[feat] 웹 홈 및 대학별 동아리 탐색 개선

[ff1451]

✨ 요약

- 홈 최근 본 동아리 섹션 노출 조건과 지역 필터 URL 동기화를 개선했습니다.
- 대학별 동아리 목록의 브레드크럼/스크롤 초기화와 university.clubCount 표시를 반영했습니다.
- 웹 헤더와 동아리 사이드바 여백을 조정했습니다.

😎 해결한 이슈

• close [feat] 웹 홈 및 대학별 동아리 탐색 개선 #323

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 페이지 진입 시 스크롤 위치 초기화로 향상된 네비게이션 경험 제공
  • 최근 본 동아리 섹션의 조건부 표시 개선

• 스타일

  • 사이드바 및 헤더의 패딩/여백 조정으로 레이아웃 최적화
  • 카테고리 필터 인터페이스 재설계로 가로 스크롤 가능하게 개선
  • URL 기반 지역 선택 처리로 필터 관리 개선

[coderabbitai]

Walkthrough

PR #324는 홈 페이지와 대학별 동아리 탐색 흐름을 개선합니다. UniversitySummary 타입에 clubCount 필드를 추가하여 응답 모델을 확장하고, 중복되는 ClubDetailUniversitySummary를 제거합니다. useResetScroll 훅을 새로 도입하여 페이지 진입 시 스크롤을 초기화하고, RecentClubListByIds 컴포넌트를 추가하여 최근 본 동아리 렌더링을 분리합니다. 홈 페이지는 URL 파라미터(region, section) 기반으로 selectedRegion을 파생시키고, handleRegionChange로 지역 선택 시 URL을 동기화하며, 스크롤 이펙트를 추가합니다. UniversityClubList에서는 university.clubCount 필드를 활용하도록 변경하고, getHomeUniversitySectionPath 유틸로 breadcrumb 홈 링크를 생성합니다. 마지막으로 헤더와 사이드바의 여백을 조정합니다.

Possibly related PRs

• BCSDLab/KONECT_FRONT_END#309: ClubDetailResponse.university 타입과 UniversitySummary 확장 변경이 직접 맞물립니다.
• BCSDLab/KONECT_FRONT_END#315: Header 컴포넌트 스타일 클래스 변경이 동일 영역에서 충돌할 가능성이 있습니다.
• BCSDLab/KONECT_FRONT_END#321: UniversitySummary.clubCount 추가와 UniversityClubSidebar props 변경이 직접 연관됩니다.

🚥 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	모든 링크된 이슈 #323의 요구사항이 코드 변경으로 충족됩니다: URL 동기화, 스크롤 초기화, clubCount 반영, 여백 조정, 최근본동아리 노출조건 개선.
Out of Scope Changes check	✅ Passed	UniversitySummary에 clubCount 추가, RecentClubListByIds 분리, useResetScroll 훅 추가 등 모든 변경사항이 이슈 #323의 목표범위 내입니다.

_{✏️ 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 323-feat-웹-홈-및-대학별-동아리-탐색-개선

---

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: 1

🧹 Nitpick comments (2)

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

140-140: ⚡ Quick win

타이포그래피는 semantic utility로 맞춰주세요.

text-[16px] 대신 프로젝트의 semantic typography 유틸(text-body1 등)로 맞추는 게 일관성에 좋습니다.

As per coding guidelines, "Prioritize semantic typography utilities (e.g., text-h1, text-body1) over generic utilities".

🤖 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` at line 140, Replace the
atomic font-size utility on the paragraph in UniversityClubList (the <p> with
className containing "text-text-400 text-[16px] leading-7") with the project's
semantic typography utility (e.g., swap "text-[16px]" for "text-body1"); also
verify whether "leading-7" is redundant with the chosen semantic utility and
remove or adjust it so the final className uses the semantic typography token
plus color/weight utilities only.

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

1-4: ⚡ Quick win

동적 Tailwind 클래스는 cn()으로 통일하고 import 순서를 정렬해주세요.

현재 템플릿 문자열 기반 병합이 섞여 있어 클래스 충돌 처리/일관성이 떨어집니다. @konect/utils/cn으로 통일하고 external import를 알파벳 순으로 맞춰주세요.

제안 diff

-import { useEffect, useRef, useState, type ChangeEvent } from 'react';
-import { useDebouncedCallback } from '`@konect/utils/use-debounced-callback`';
+import { cn } from '`@konect/utils/cn`';
+import { useDebouncedCallback } from '`@konect/utils/use-debounced-callback`';
 import { useSuspenseQuery } from '`@tanstack/react-query`';
+import { useEffect, useRef, useState, type ChangeEvent } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
@@
-          <div
-            className={`grid w-full transition-[grid-template-rows,opacity,margin-top] duration-300 ease-out ${
-              isSearching ? 'mt-0 grid-rows-[0fr] opacity-0' : 'mt-10 grid-rows-[1fr] opacity-100 sm:mt-24'
-            }`}
-          >
+          <div
+            className={cn(
+              'grid w-full transition-[grid-template-rows,opacity,margin-top] duration-300 ease-out',
+              isSearching ? 'mt-0 grid-rows-[0fr] opacity-0' : 'mt-10 grid-rows-[1fr] opacity-100 sm:mt-24'
+            )}
+          >
@@
-            <section
-              className={`min-h-0 ${isSearching ? 'overflow-hidden' : 'overflow-visible'}`}
-              aria-hidden={isSearching}
-            >
+            <section className={cn('min-h-0', isSearching ? 'overflow-hidden' : 'overflow-visible')} aria-hidden={isSearching}>
@@
-                    className={`shrink-0 rounded-[26px] border px-3 font-medium transition-colors sm:px-5 ${
-                      isSelected
-                        ? 'border-primary-900 bg-primary-900 text-indigo-5'
-                        : 'border-text-300 text-text-300 hover:border-primary-500 hover:text-primary-700 bg-transparent'
-                    }`}
+                    className={cn(
+                      'shrink-0 rounded-[26px] border px-3 font-medium transition-colors sm:px-5',
+                      isSelected
+                        ? 'border-primary-900 bg-primary-900 text-indigo-5'
+                        : 'border-text-300 bg-transparent text-text-300 hover:border-primary-500 hover:text-primary-700'
+                    )}

As per coding guidelines "Use @konect/utils/cn utility for Tailwind class merging with clsx + tailwind-merge" and "Organize imports in order: builtin -> external -> internal (@/**) -> parent -> sibling -> index, sorted alphabetically within each group".

Also applies to: 124-126, 129-129, 151-155

🤖 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` around lines 1 - 4, Replace
template-string or manual concatenation Tailwind class merging with the shared
cn utility from `@konect/utils/cn`: update imports to add cn and refactor all
className usages that currently use template literals or manual joins (search
for uses near identifiers like useDebouncedCallback, useSuspenseQuery and
components in this file) to call cn(...) so tailwind-merge + clsx semantics are
applied (also fix occurrences mentioned in the comment). Additionally reorder
the import block to follow the project order (builtin -> external -> internal ->
parent -> sibling -> index) and sort external imports alphabetically so imports
such as useDebouncedCallback, useSuspenseQuery, Link, useSearchParams and the
new cn import are in the correct alphabetical order within the external group.

🤖 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`:
- Around line 122-131: The section controlled by hasRecentClubs/isSearching
currently only uses aria-hidden, which doesn't stop keyboard focus; update the
Home/index.tsx JSX so that when isSearching is true the section is either
unmounted (render it only when !isSearching) or marked inert in addition to
aria-hidden (add the inert attribute to the section element when isSearching and
ensure an inert/polyfill is included if needed), so keyboard focus cannot enter
its internal links; target the JSX block using hasRecentClubs and the section
element around the isSearching conditional to make this change.

---

Nitpick comments:
In `@apps/web/src/pages/Home/index.tsx`:
- Around line 1-4: Replace template-string or manual concatenation Tailwind
class merging with the shared cn utility from `@konect/utils/cn`: update imports
to add cn and refactor all className usages that currently use template literals
or manual joins (search for uses near identifiers like useDebouncedCallback,
useSuspenseQuery and components in this file) to call cn(...) so tailwind-merge
+ clsx semantics are applied (also fix occurrences mentioned in the comment).
Additionally reorder the import block to follow the project order (builtin ->
external -> internal -> parent -> sibling -> index) and sort external imports
alphabetically so imports such as useDebouncedCallback, useSuspenseQuery, Link,
useSearchParams and the new cn import are in the correct alphabetical order
within the external group.

In `@apps/web/src/pages/UniversityClubList/index.tsx`:
- Line 140: Replace the atomic font-size utility on the paragraph in
UniversityClubList (the <p> with className containing "text-text-400 text-[16px]
leading-7") with the project's semantic typography utility (e.g., swap
"text-[16px]" for "text-body1"); also verify whether "leading-7" is redundant
with the chosen semantic utility and remove or adjust it so the final className
uses the semantic typography token plus color/weight utilities only.

🪄 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: 38fe725c-687d-4ce7-8532-e255f17a0f7c

📥 Commits

Reviewing files that changed from the base of the PR and between b0fd664 and 47347c2.

📒 Files selected for processing (9)

• apps/web/src/apis/clubDetail/entity.ts
• apps/web/src/apis/universityClub/entity.ts
• apps/web/src/components/RecentClubList/index.tsx
• apps/web/src/components/UniversityClubSidebar/index.tsx
• apps/web/src/layout/Header/index.tsx
• apps/web/src/pages/ClubDetail/index.tsx
• apps/web/src/pages/Home/index.tsx
• apps/web/src/pages/UniversityClubList/index.tsx
• apps/web/src/utils/hooks/useResetScroll.ts

[coderabbitai]

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

aria-hidden만으로는 숨김 상태 포커스가 차단되지 않습니다.

Line 130에서 aria-hidden만 적용하면 내부 링크가 키보드 포커스로 진입할 수 있습니다. 검색 중(isSearching)에는 섹션을 언마운트하거나 inert를 함께 적용해 포커스를 막아주세요.

🤖 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` around lines 122 - 131, The section
controlled by hasRecentClubs/isSearching currently only uses aria-hidden, which
doesn't stop keyboard focus; update the Home/index.tsx JSX so that when
isSearching is true the section is either unmounted (render it only when
!isSearching) or marked inert in addition to aria-hidden (add the inert
attribute to the section element when isSearching and ensure an inert/polyfill
is included if needed), so keyboard focus cannot enter its internal links;
target the JSX block using hasRecentClubs and the section element around the
isSearching conditional to make this change.