[feat] 학교별 동아리 목록 페이지 구현

[ff1451]

✨ 요약

- 웹 대학별 동아리 목록 조회 API 타입/쿼리 훅을 추가했습니다.
- 피그마 기반 학교별 동아리 목록 페이지를 구현했습니다.
- 동아리명 검색, 분과 필터, 무한 스크롤과 홈 대학 카드 라우팅을 연결했습니다.

😎 해결한 이슈

• close [feat] 학교별 동아리 목록 페이지 구현 #306

Summary by CodeRabbit

릴리스 노트

• New Features
  • 특정 대학의 동아리 목록을 조회할 수 있는 새로운 페이지 추가
  • 동아리 목록 페이지에서 검색, 카테고리별 필터링 기능 제공
  • 무한 스크롤을 통한 동아리 리스트 탐색 지원
  • 홈 페이지의 대학 카드에서 해당 대학의 동아리 목록으로 바로 이동 가능

[coderabbitai]

Walkthrough

이 PR은 대학별 동아리 목록 페이지를 구현합니다. 새 API 데이터 모델(ClubCategory, UniversityClub, UniversityClubListResponse)과 getUniversityClubs 클라이언트 함수를 정의하고, React Query 설정으로 단일/무한 페이지 쿼리를 구성합니다. 352줄의 UniversityClubList 페이지는 라우트 파라미터 검증, URL 기반 검색/필터링, 디바운싱된 검색 입력, IntersectionObserver 무한 스크롤, 최근 동아리 섹션, 카테고리 필터 버튼, 빈 상태 메시지를 구현합니다. App.tsx에서 라우트를 추가하고 Home 페이지 대학 카드를 Link로 변경하여 새 페이지로 라우팅합니다.

Possibly related PRs

• BCSDLab/KONECT_FRONT_END#303: App.tsx 라우터 구조 개선으로 Layout과 Route 트리 연결을 선행했으며, 이 PR에서 /universities/:universityId/clubs 라우트를 추가하는 기반이 됩니다.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 핵심 변경 사항을 명확하게 요약하고 있으며, 학교별 동아리 목록 페이지 구현이라는 주요 기능을 잘 표현하고 있습니다.
Linked Issues check	✅ Passed	API 타입 정의, 쿼리 훅, 무한 스크롤, 검색/필터 기능, 라우팅 연결 등 #306의 모든 요구사항이 충실하게 구현되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 학교별 동아리 목록 페이지 구현과 직접 관련되며, 범위를 벗어난 변경은 없습니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 306-feat-학교별-동아리-목록-페이지-구현

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (4)

apps/web/src/apis/universityClub/index.ts (1)

1-2: ⚡ Quick win

내부 import는 상대경로 대신 경로 별칭(@/*)으로 통일해주세요.

현재 상대경로 import는 프로젝트 컨벤션과 맞지 않습니다.

diff 제안

-import { apiClient } from '../client';
-import type { UniversityClubListRequestParams, UniversityClubListResponse } from './entity';
+import { apiClient } from '`@/apis/client`';
+import type { UniversityClubListRequestParams, UniversityClubListResponse } from '`@/apis/universityClub/entity`';

As per coding guidelines, `**/*.{ts,tsx}`: Use path alias `@/*` for internal app imports (preferred over relative paths).

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web/src/apis/universityClub/index.ts` around lines 1 - 2, Summary: The
file uses relative imports; replace them with the project's path alias. Fix:
change the import of apiClient from '../client' to the path-alias equivalent
(e.g., import { apiClient } from '`@/apis/client`') and change the entity types
import from './entity' to the alias form (e.g., import type {
UniversityClubListRequestParams, UniversityClubListResponse } from
'`@/apis/universityClub/entity`'); ensure you update both import statements to use
the '`@/`...' alias and keep the same identifiers (apiClient,
UniversityClubListRequestParams, UniversityClubListResponse).

apps/web/src/apis/universityClub/queries.ts (1)

3-4: ⚡ Quick win

여기도 내부 import를 @/* 별칭으로 맞춰주세요.

쿼리 파일만 상대경로를 쓰면 import 규칙 일관성이 깨집니다.

diff 제안

-import type { UniversityClubListRequestParams, UniversityClubListResponse } from './entity';
-import { getUniversityClubs } from '.';
+import type { UniversityClubListRequestParams, UniversityClubListResponse } from '`@/apis/universityClub/entity`';
+import { getUniversityClubs } from '`@/apis/universityClub`';

As per coding guidelines, `**/*.{ts,tsx}`: Use path alias `@/*` for internal app imports (preferred over relative paths).

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web/src/apis/universityClub/queries.ts` around lines 3 - 4, The import
uses a relative path for an internal module which violates the alias rule;
change the imports in this file to use the app path alias: replace the relative
import of getUniversityClubs from '.' with the alias form (e.g., import {
getUniversityClubs } from '`@/apis/universityClub`' or the correct alias root for
that module) and likewise ensure the type imports
(UniversityClubListRequestParams, UniversityClubListResponse) use the '`@/`...'
alias; update the import statements that reference the symbols
getUniversityClubs, UniversityClubListRequestParams, and
UniversityClubListResponse to the `@/`* path alias.

apps/web/src/App.tsx (1)

6-6: ⚡ Quick win

내부 import는 alias(@/)로 맞춰주세요.

상대 경로 대신 alias를 사용해 import 일관성을 맞추는 편이 좋습니다.
As per coding guidelines, "Use path alias @/* for internal app imports (preferred over relative paths)".

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web/src/App.tsx` at line 6, The import in App.tsx uses a relative path
for UniversityClubList; replace the relative import with the project path alias
format used across the app (e.g. import UniversityClubList from
'`@/pages/UniversityClubList`') so internal imports follow the "`@/`..." convention
and stay consistent with the codebase; update the import line that references
UniversityClubList accordingly.

apps/web/src/pages/UniversityClubList/index.tsx (1)

33-97: 🏗️ Heavy lift

페이지 비즈니스 로직을 커스텀 훅으로 분리해주세요.

UniversityClubListContent에 URL 상태, 쿼리 파라미터 조합, observer 로직이 밀집되어 있어 라우트 엔트리 페이지 책임이 과합니다. useUniversityClubListState 같은 훅으로 분리하면 유지보수성이 좋아집니다.
As per coding guidelines, "apps/*/src/pages/**/index.tsx: 라우트 엔트리 페이지 패턴을 확인해주세요: - 비즈니스 로직은 커스텀 훅으로 분리되어 있는지".

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web/src/pages/UniversityClubList/index.tsx` around lines 33 - 97,
Extract the business logic from UniversityClubListContent into a new custom hook
(e.g., useUniversityClubListState) that accepts universityId and encapsulates
URL/search param handling (useSearchParams, selectedCategory, query,
updateSearchQuery), local state (searchKeyword, setSearchKeyword), requestParams
creation, data fetching via
useSuspenseInfiniteQuery(universityClubQueries.infiniteList(...)), observer
setup (observerRef and the IntersectionObserver effect), and handlers
(handleSearchKeywordChange, handleCategoryChange); have the hook return
observerRef plus derived values (university, clubs, total counts, recentClubs,
hasNextPage, isFetchingNextPage, fetchNextPage) and the handler setters so
UniversityClubListContent keeps only JSX and presentation logic while the new
useUniversityClubListState contains all moved logic.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/web/src/pages/Home/index.tsx`:
- Line 137: The Tailwind class string in the JSX div's className contains a typo
"xl: mt-7" which leaves "xl:" isolated; update the class value used in the Home
page component (the div with className "xl: mt-7 grid ...") by removing the
space so the token reads "xl:mt-7" to enable the intended responsive margin.

In `@apps/web/src/pages/UniversityClubList/index.tsx`:
- Around line 207-238: RecentClubCard and ClubCard render inert <button>
elements with no onClick; replace them with an appropriate non-interactive
container or a navigable link: if the cards are purely presentational, swap the
<button> in RecentClubCard and ClubCard for a semantic <article> or <div>
(remove type="button") and keep existing classes; if the cards are intended to
navigate, wrap the card contents with the app's Link component (e.g., next/link)
and move the className to the link element so keyboard users get correct
behavior. Ensure to update imports (add Link if used) and remove any
button-specific attributes (type="button", focus styles tied to button) or adapt
them for the chosen element.

---

Nitpick comments:
In `@apps/web/src/apis/universityClub/index.ts`:
- Around line 1-2: Summary: The file uses relative imports; replace them with
the project's path alias. Fix: change the import of apiClient from '../client'
to the path-alias equivalent (e.g., import { apiClient } from '`@/apis/client`')
and change the entity types import from './entity' to the alias form (e.g.,
import type { UniversityClubListRequestParams, UniversityClubListResponse } from
'`@/apis/universityClub/entity`'); ensure you update both import statements to use
the '`@/`...' alias and keep the same identifiers (apiClient,
UniversityClubListRequestParams, UniversityClubListResponse).

In `@apps/web/src/apis/universityClub/queries.ts`:
- Around line 3-4: The import uses a relative path for an internal module which
violates the alias rule; change the imports in this file to use the app path
alias: replace the relative import of getUniversityClubs from '.' with the alias
form (e.g., import { getUniversityClubs } from '`@/apis/universityClub`' or the
correct alias root for that module) and likewise ensure the type imports
(UniversityClubListRequestParams, UniversityClubListResponse) use the '`@/`...'
alias; update the import statements that reference the symbols
getUniversityClubs, UniversityClubListRequestParams, and
UniversityClubListResponse to the `@/`* path alias.

In `@apps/web/src/App.tsx`:
- Line 6: The import in App.tsx uses a relative path for UniversityClubList;
replace the relative import with the project path alias format used across the
app (e.g. import UniversityClubList from '`@/pages/UniversityClubList`') so
internal imports follow the "`@/`..." convention and stay consistent with the
codebase; update the import line that references UniversityClubList accordingly.

In `@apps/web/src/pages/UniversityClubList/index.tsx`:
- Around line 33-97: Extract the business logic from UniversityClubListContent
into a new custom hook (e.g., useUniversityClubListState) that accepts
universityId and encapsulates URL/search param handling (useSearchParams,
selectedCategory, query, updateSearchQuery), local state (searchKeyword,
setSearchKeyword), requestParams creation, data fetching via
useSuspenseInfiniteQuery(universityClubQueries.infiniteList(...)), observer
setup (observerRef and the IntersectionObserver effect), and handlers
(handleSearchKeywordChange, handleCategoryChange); have the hook return
observerRef plus derived values (university, clubs, total counts, recentClubs,
hasNextPage, isFetchingNextPage, fetchNextPage) and the handler setters so
UniversityClubListContent keeps only JSX and presentation logic while the new
useUniversityClubListState contains all moved logic.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 960310f5-3a66-457a-865a-2a88297610b9

📥 Commits

Reviewing files that changed from the base of the PR and between e82166d and 51a70ea.

📒 Files selected for processing (6)

• apps/web/src/App.tsx
• apps/web/src/apis/universityClub/entity.ts
• apps/web/src/apis/universityClub/index.ts
• apps/web/src/apis/universityClub/queries.ts
• apps/web/src/pages/Home/index.tsx
• apps/web/src/pages/UniversityClubList/index.tsx

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Tailwind 클래스 오타를 수정해주세요 (xl:).

Line 137의 className에 xl: mt-7가 있어 xl:가 단독 토큰으로 남습니다. xl:mt-7로 붙여야 의도한 반응형 마진이 적용됩니다.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web/src/pages/Home/index.tsx` at line 137, The Tailwind class string in
the JSX div's className contains a typo "xl: mt-7" which leaves "xl:" isolated;
update the class value used in the Home page component (the div with className
"xl: mt-7 grid ...") by removing the space so the token reads "xl:mt-7" to
enable the intended responsive margin.

[coderabbitai]

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

동작 없는 button은 비대화형 요소로 바꿔주세요.

Line 207, Line 226의 카드가 button이지만 실제 액션이 없습니다. 키보드/스크린리더 사용자에게 “눌리지만 아무 일도 안 일어나는” 컨트롤로 노출됩니다. 클릭 동작이 없다면 article/div로 바꾸거나, 이동 의도가 있으면 Link로 연결해주세요.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web/src/pages/UniversityClubList/index.tsx` around lines 207 - 238,
RecentClubCard and ClubCard render inert <button> elements with no onClick;
replace them with an appropriate non-interactive container or a navigable link:
if the cards are purely presentational, swap the <button> in RecentClubCard and
ClubCard for a semantic <article> or <div> (remove type="button") and keep
existing classes; if the cards are intended to navigate, wrap the card contents
with the app's Link component (e.g., next/link) and move the className to the
link element so keyboard users get correct behavior. Ensure to update imports
(add Link if used) and remove any button-specific attributes (type="button",
focus styles tied to button) or adapt them for the chosen element.