Feat/#105 등록된 식당 검색 페이지에서 메뉴 검색 포함#106
Conversation
- 메뉴명 검색 기능 추가로 인한 이름 변경
- api path 및 함수, 스키마 추가
- 가게명/메뉴명 검색 전환을 위한 `FilterSelector` 컴포넌트 구현 - 검색 유형(`searchType`) 변경 시 `SearchPage` 컴포넌트가 리마운트(초기화)되도록 `key` prop 적용
Walkthrough검색을 이름 기반과 메뉴 기반으로 분리했습니다. 스키마와 서비스 함수가 분리·추가되고 API 경로 상수가 조정되었으며, FilterSelector 컴포넌트와 검색 페이지 로직이 검색 타입 전환을 지원하도록 변경되었습니다. (49자) Changes
Sequence Diagram(s)sequenceDiagram
participant User as "사용자"
participant UI as "SearchPage\n+ FilterSelector"
participant Service as "place service\n(getPlacesByName/MenuSearch)"
participant Path as "API_PATH"
participant Backend as "서버 API"
participant Kakao as "Kakao API"
User->>UI: 검색어 입력 및 타입 선택
UI->>UI: 선택에 따라 currentConfig 설정
UI->>Service: 호출 (keyword)
Service->>Path: 사용 엔드포인트 결정 (BY_NAME / BY_MENU)
Service->>Backend: HTTP GET 요청 (검색 API)
Backend-->>Service: 검색 결과
Service-->>UI: 변환된 결과 목록
UI-->>User: 검색 결과 표시
Note over Service,Kakao: Kakao는 별도 위치 기반 검색에서\nAPI_PATH.KAKAO.SEARCH + params로 호출됨
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts (beta)
No actionable comments were generated in the recent review. 🎉 🧹 Recent nitpick comments
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@apps/web/app/_constants/path.ts`:
- Around line 29-32: The SEARCH route builders BY_NAME and BY_MENU insert the
raw keyword into the URL, which breaks on spaces/special chars; update the arrow
functions (SEARCH.BY_NAME and SEARCH.BY_MENU) to wrap the keyword with
encodeURIComponent(...) so getPlacesByNameSearch and getPlacesByMenuSearch
receive a properly encoded query string and avoid malformed URLs.
🧹 Nitpick comments (4)
apps/web/app/places/search/_components/FilterSelector/FilterSelector.tsx (1)
33-55: 접근성:FilterButton에 선택 상태를 시맨틱하게 전달하는 것을 권장합니다.현재 선택 상태가 시각적 스타일로만 구분됩니다. 스크린 리더 사용자를 위해
aria-pressed를 추가하면 좋겠습니다.♻️ 제안
<button onClick={onClick} + aria-pressed={isSelected} className={cn(apps/web/app/_components/SearchPage/SearchPage.tsx (1)
81-83: 복합 key 사용은 메뉴 검색에서 동일placeId가 여러 번 나올 수 있어 합리적입니다.메뉴 검색 결과에서 같은 가게가 다른 메뉴로 중복 노출될 수 있으므로
place.id + '-' + index조합이 필요합니다. 다만 가능하다면 고유 식별자(예:placeId-menuName또는 서버에서 제공하는 고유 ID)를 사용하는 것이 index 기반보다 React 재조정(reconciliation)에 유리합니다.apps/web/app/_apis/schemas/place.ts (1)
46-50:placeId스키마 정의가BasePlaceSchema와 중복됩니다.
BasePlaceSchema의placeId정의(z.number().transform(String))와 동일한 로직이 반복되고 있습니다.BasePlaceSchema.shape.placeId를 재사용하면 변환 로직 변경 시 한 곳만 수정하면 됩니다.♻️ 제안
export const PlaceByMenuSearchSchema = z.object({ - placeId: z.number().transform(String), + placeId: BasePlaceSchema.shape.placeId, placeName: z.string(), menuName: z.string(), })apps/web/app/places/search/page.tsx (1)
36-44: 메뉴 검색 결과에서address필드에 가게명(placeName)을 매핑하고 있습니다.
BasePlace.address에place.placeName을 넣으면SearchPlaceListItem이 가게명을 주소처럼 표시하게 됩니다. 의도된 UX라면 괜찮지만,BasePlace타입의 시맨틱과 맞지 않아 혼란을 줄 수 있습니다.향후
BasePlace에subtitle같은 범용 필드를 두거나, 메뉴 검색 전용 리스트 아이템을 만드는 것도 고려해보세요.
| }))} | ||
| /> | ||
| <SearchPage | ||
| key={searchType} |
There was a problem hiding this comment.
searchType 변경 시 key prop 업데이트로 SearchPage 컴포넌트 새롭게 렌더링
입력값과 결과값 모두 초기화를 위해 추가
- 기존 URL 문자열 결합 방식을 axios `params` 객체 전달 방식으로 변경 - 검색어에 특수문자(&, #, = 등)나 공백이 포함될 경우 URL이 깨지거나 잘못 요청되는 버그 수정 - 자동 URL 인코딩을 통해 안정적인 API 호출 보장
1 participant
#️⃣연관된 이슈
📝작업 내용
등록된 맛집 검색 페이지의 기능을 확장하여 메뉴 이름으로도 맛집을 검색할 수 있도록 개선하고, 이에 맞춰 검색 로직을 리팩토링했습니다.
1. 가게명/메뉴명 검색 전환을 위한
FilterSelector컴포넌트 구현2. 검색 로직 리팩토링
3. UX 개선 (상태 초기화)
key Prop 활용
검색 유형(searchType)이 변경될 때 SearchPage 컴포넌트의 key를 업데이트하여, 이전 검색 결과와 입력값이 자동으로 초기화되도록 처리했습니다.
스크린샷 (선택)
💬리뷰 요구사항(선택)
Summary by CodeRabbit
새로운 기능
개선 사항