🍀 Mokkoji (모꼬지) 🍀

모꼬지 팀은 동아리 홍보 및 정보 탐색의 불편함을 인지하고, 이를 해결하고자 동아리 통합 서비스를 만들었어요. 동아리 입장에서는 에브리타임에 동아리 홍보글을 올려도 글이 계속 묻혀 동아리를 홍보하기 어렵다는 문제가 있어요. 학우분들 입장에서도 어떤 동아리가 있는지 한 번에 확인하기 어렵다는 문제가 있죠. 이러한 학우분들의 불편함을 조금이라도 덜어드리고자 열심히 개발했습니다.

---

🖥️ Technology Stack (기술 스택)

🟢 Frontend

🟢 Backend

🟢 Cooperation (협업 도구)

---

👥 Team Members

🟢 Front-End Team

🟢 Back-End Team

🟢 Design Team

주요 기능 소개

✅ 세종대 모든 동아리를 한 곳애서!

• 학술, 공연, 체육, 봉사, 종교 등 다양한 분야의 동아리 정보를 한 눈에 볼 수 있어요.

✅ 동아리 검색 기능

동아리 이름이나 키워드를 입력하면 원하는 동아리를 빠르게 검색할 수 있어요!

✅ 동아리 별 최신 모집 공고 제공

• 활동 내용, 모집 일정, 가입 방법까지 한 페이지에서 확인할 수 있어요.
• 실시간 모집 현황을 확인할 수 있어요.

✅ 동아리 상세 페이지

• 선택한 동아리에 대한 상세 정보(모집기간, 인스타 링크, 모집공고 등)를 확인할 수 있어요.

✅ 모집 공고 상세 페이지

• 선택한 동아리에 대한 상세 정보(모집기간, 인스타 링크, 모집공고 등)를 확인할 수 있어요.

✅ 동아리 즐겨찾기 기능

• 즐겨찾기를 통해 관심 있는 동아리를 한 눈에 확인할 수 있어요.
• 캘린더에서 즐겨찾기한 동아리의 모집 기한을 확인하고 모집 기한을 놓치지 마세요!

✅ 동아리 모집 알림 메일 기능

• 즐겨찾기 해둔 동아리의 모집 기한을 잊지 않도록, 메일로 알림을 보내드려요.

---

✅ 로그인 기능

• 사용자는 학사정보시스템 로그인을을 통해 다양한 기능을 사용할 수 있어요.
• 로그인 안내사항 확인 및 동의 후 로그인이 가능해요.

✅ 마이페이지 및 정보 수정

• 자신의 정보를 확인하고 수정할 수 있어요.

---

동아리 회장

✅ 동아리 정보 입력

• 검증된 동아리 회장은 동아리 모집 공고를 올릴 수 있어요.
• 에타에 매번 글을 올리지 않아도 돼요.

---

🧭 개발 규칙

자세한 규칙은 .claude/api-conventions.md와 .claude/forbidden.md에 있습니다. 자주 쓰는 react-query 규칙만 요약합니다.

react-query 쿼리 정의

• 쿼리는 도메인별 {layer}/{domain}/api/queries.ts에 get{이름}Options 함수로 만듭니다.
• 도메인 기본 키(favoriteBaseKey 등)를 같은 파일에 두고, 모든 키와 캐시 무효화에 이 키를 씁니다. 컴포넌트에서 queryKey 배열을 직접 쓰지 않습니다.
• 파일에서 내보내는 것이 함수 하나뿐이면 export default를 씁니다.

export const favoriteBaseKey = ['favorites'] as const;

export function getFavoriteListOptions(params: { page: number; size: number }) {
  return queryOptions({
    queryKey: [...favoriteBaseKey, params.page, params.size],
    queryFn: () => getClientFavoriteList(params),
  });
}

// 사용
useSuspenseQuery(getFavoriteListOptions({ page, size }));
queryClient.invalidateQueries({ queryKey: favoriteBaseKey });

staleTime

범위	기본값	정하는 곳
사용자 페이지	10분	src/app/[universityCode]/layout.tsx, src/app/(home)/layout.tsx
어드민 대시보드	0	src/app/(admin)/dashboard/layout.tsx

쿼리별로 다르게 둘 때는 get{이름}Options 안에 설정하고 이유를 남깁니다. 현재 예외는 즐겨찾기 목록(staleTime: 0, 항상 최신 목록을 다시 불러옴) 하나입니다.

---

🗂️ 백엔드 백로그

프론트 작업 중 확인했지만 백엔드 API가 필요해 보류한 항목입니다.

동아리명 자동완성용 이름 목록 API

• 현재: 검색창 자동완성이 GET /clubs?universityCode={code}&page=1&size=200으로 동아리 목록을 받아 브라우저에서 이름을 거릅니다.
• 문제
  • size=200으로 한 번만 받기 때문에, 동아리가 200개를 넘는 학교는 나머지 동아리가 자동완성에 나오지 않습니다.
  • 이름(id, name)만 필요한데 소개글(HTML)·로고·모집 정보까지 함께 받아 응답이 무겁습니다.
• 요청: 학교별 동아리 이름만 반환하는 가벼운 API
  • 예: GET /clubs/names?universityCode=SEJONG → { data: [{ id, name }] }
  • 페이지네이션 없이 해당 학교의 전체 동아리를 반환
• 프론트 대응: API가 생기면 src/shared/api/getClientClubNameList.ts의 요청 경로만 바꾸면 됩니다. 초성 검색은 지금처럼 프론트에서 처리합니다.

---

대학 생활의 꽃, 동아리 활동을 모꼬지와 함께 해봐요! 🌻