[Feat] 모임 목록 페이지 모임 검색 기능 추가 #190
Conversation
요약검색 기능을 지원하는 URL 파라미터 기반 그룹 검색 시스템을 구현합니다. 홈페이지에서 검색 키워드를 URL 파라미터로 수신하고, 레이아웃 계층에서 동적 헤더 높이를 관리하며, 그룹 리스트 페이지에서 검색 바를 렌더링하고 검색어 상태를 관리합니다. 변경사항
예상 코드 리뷰 난이도🎯 3 (보통) | ⏱️ ~20-30분 검토 시 주의사항:
관련 PR
리뷰어 제안
축하 시
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
🎭 Playwright Report✨ E2E Test가 성공적으로 완료되었습니다. Test 요약 내용을 확인해주세요.
📊 Test Summary
📜 Test Details✅ Passed Tests (9)
|
📊 Coverage Report
📉 #190을 main에 병합하면 coverage가 Coverage 요약@@ Coverage Diff @@
## main #190 +/- ##
===========================================
- Coverage 34.92% 34.56% -0.36%
===========================================
Files 153 154 +1
Lines 6330 6397 +67
Branches 247 248 +1
===========================================
Hits 2211 2211 0
+ Misses 4119 4186 +67 영향받은 파일✅ 이 PR로 영향받은 파일이 없습니다 수정된 모든 파일이 현재 coverage를 유지했습니다. |
🎨 Storybook Report✨ Story가 변경되었습니다 Chromatic에서 비주얼 변경사항을 확인하세요.
|
🚀 PR Preview Report✨ Build가 성공적으로 완료되었습니다. Preview에서 변경사항을 확인하세요.
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/components/pages/group-search/index.tsx (1)
7-29: URL 변경 시 SearchBar 값 동기화 & 빈 쿼리 처리 개선 제안
URL ↔ 입력값 불일치 가능성
currentKeyword는searchParams가 바뀔 때마다 변하지만,SearchBar는defaultValue만 사용하고 내부 state로 값을 관리하고 있어요.- 예: 검색 후 다른 키워드로 검색 → 뒤로가기 등으로 URL의
keyword가 바뀌면, URL과 리스트는 새 키워드를 기준으로 갱신되지만 SearchBar input 값은 이전 내부 state를 그대로 유지할 수 있습니다.- 대응 아이디어:
- 간단히
key를 주어 검색어가 바뀔 때마다 SearchBar를 remount:<SearchBar key={currentKeyword} className='h-11' defaultValue={currentKeyword} placeholder='원하는 모임을 검색해보세요' onSearch={handleSearch} />- 또는
SearchBar를 완전히 제어 컴포넌트로 사용(value+onChange)하는 방향도 장기적으로 고려할 수 있습니다.빈 쿼리일 때
/?대신/로 이동
params.toString()이 빈 문자열이면router.push('/?')가 되어 약간 지저분한 URL이 됩니다.- 아래처럼 정리하면 더 깔끔할 것 같습니다:
const handleSearch = (keyword: string) => { const params = new URLSearchParams(searchParams.toString()); const trimmed = keyword.trim(); if (trimmed) { params.set('keyword', trimmed); } else { params.delete('keyword'); } const query = params.toString(); router.push(query ? `/?${query}` : '/'); };src/components/layout/layout-wrapper/index.tsx (1)
15-32:main의 min-height 정의가 중복됩니다
main에 Tailwind class로min-h-[calc(100vh-112px)]를 주고, 동시에 인라인 스타일로style={{ minHeight: mainMinHeight }}를 설정하고 있어서 실제로는 인라인 스타일만 적용됩니다.
- 동작엔 문제 없지만, 나중에 높이 조정 시 혼동될 수 있으니 한쪽으로만 정리하는 걸 추천드립니다.
- 예: class에서 min-h 제거:
<main style={{ minHeight: mainMinHeight }}> {children} </main>src/components/layout/header/index.tsx (1)
8-28: 루트 페이지 판별 로직이 LayoutWrapper와 Header에 중복되어 있습니다현재는:
LayoutWrapper에서isRoot에 따라searchBar={isRoot ? <GroupSearch /> : undefined}로 한 번 필터링하고,Header내부에서도isRootPage && searchBar && ...로 다시 조건을 검증하고 있습니다.동작에는 문제 없지만, 루트 여부 판별이 두 군데에 나뉘어 있어 추후 유지보수 시 혼동될 수 있습니다.
장기적으로는:
- 루트 판단은 Header만 담당하고 LayoutWrapper는 그냥
searchBar만 넘기거나,- 반대로 Header는 단순 프레젠테이션 컴포넌트로 두고, 루트 여부는 LayoutWrapper에서만 처리하는 식으로 책임을 한쪽에 모으는 것도 고려해 볼 수 있습니다.
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/app/page.tsx(2 hunks)src/components/layout/header/index.tsx(1 hunks)src/components/layout/layout-wrapper/index.tsx(1 hunks)src/components/pages/group-list/index.tsx(2 hunks)src/components/pages/group-search/index.tsx(1 hunks)src/components/shared/search-bar/index.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (4)
src/components/pages/group-list/index.tsx (1)
src/hooks/use-group/use-group-infinite-list/index.ts (1)
useInfiniteGroupList(201-225)
src/app/page.tsx (3)
src/api/index.ts (1)
API(22-22)src/lib/constants/group-list.ts (1)
GROUP_LIST_PAGE_SIZE(1-1)src/components/pages/group-list/index.tsx (1)
GroupList(20-93)
src/components/layout/layout-wrapper/index.tsx (2)
src/components/layout/header/index.tsx (1)
Header(13-30)src/components/pages/group-search/index.tsx (1)
GroupSearch(7-30)
src/components/layout/header/index.tsx (1)
src/components/icon/index.tsx (1)
Icon(55-61)
🔇 Additional comments (3)
src/components/shared/search-bar/index.tsx (1)
60-67: 검색 아이콘 정렬 변경 좋습니다
top-1/2 -translate-y-1/2로 수직 중앙 정렬이 자연스럽고, 기존 입력/검색 로직에도 영향이 없어 보입니다.src/components/pages/group-list/index.tsx (1)
20-30: URL 기반 키워드 합성 로직이 자연스럽습니다
initialKeyword ?? keywordFromUrl로 서버에서 내려준 초기 키워드를 우선 사용하고, 없을 때만 URL을 참조하는 구조가 수화 관점에서 안정적으로 보입니다.
다만, 나중에 다른 곳에서GroupList를 재사용하면서initialKeyword를 명시적으로 넘기는 경우에도 이 우선순위가 여전히 의도에 맞는지 한 번만 생각해 보시면 좋겠습니다.src/app/page.tsx (1)
10-30: searchParams → API → GroupList로 이어지는 키워드 전달 흐름이 잘 정리되어 있습니다
searchParams에서keyword를 읽어 API 호출에 그대로 넘기고,- 동일한 값을
initialKeyword로GroupList에도 전달해서 서버 초기 데이터와 클라이언트 무한스크롤 쿼리 키가 일관되게 맞춰진 점이 좋습니다.추가로, 나중에 검색 조건이 늘어날 경우(예: 위치, 태그 등)에도 같은 패턴으로
searchParams → API → initialData/초기 파라미터를 확장하면 이해하기 쉬운 구조일 것 같습니다.
📝 변경 사항
검색 기능 구현
?keyword=검색어) 기반 검색 상태 관리컴포넌트 구조 개선
searchBarprop을 추가하여 모임 목록 페이지에서 검색바 추가GroupSearch를 Header에 전달Server Component 검색 지원
page.tsx에서searchParams를 읽어 검색 키워드 처리initialData로 전달하여 초기 렌더링에 반영🔗 관련 이슈
Closes #
🧪 테스트 방법
📸 스크린샷 (선택)
📋 체크리스트
💬 추가 코멘트
CodeRabbit Review는 자동으로 실행되지 않습니다.
Review를 실행하려면 comment에 아래와 같이 작성해주세요
Summary by CodeRabbit
릴리스 노트
새 기능
스타일
✏️ Tip: You can customize this high-level summary in your review settings.