#122 refactor/feature(performance/header): 카테고리바 컴포넌트 분리 및 헤더 네비게이션 개선 - #127
#122 refactor/feature(performance/header): 카테고리바 컴포넌트 분리 및 헤더 네비게이션 개선#127kaeuhy wants to merge 1 commit into
Conversation
- 카테고리바 컴포넌트 분리 - 메인 페이지 전용 MainCategoryBar 컴포넌트 신규 생성 - 메인 페이지 -> 카테고리 탭 선택 시 해당 장르의 공연 목록 API 호출 - 공연 목록 페이지 -> 기존 Category 컴포넌트 유지 - 헤더바 공연 카테고리 진입점 추가 - 데스크탑 -> 로그인 왼쪽에 공연 카테고리 드롭다운 버튼 추가 - 모바일 -> 사이드바 공연 메뉴 하위에 카테고리 서브메뉴 추가 - About 버튼을 헤더 왼쪽으로 이동 - 공연 필터링 파라미터 수정 - API 응답 구조에 맞춰 type → genre 파라미터로 전환 - fetchPerformances, usePerformances, queryKeys에 genre 파라미터 추가 - Category, Header, PerformancePage의 URL 쿼리 파라미터 genre으로 통일 Resolves: #122 See also: None
kaeuhy
added
status: in progress
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the performance listing and filtering logic by replacing the 'type' query parameter with 'genre' and updating the UI to support category-based filtering on the main page. Key changes include updating the API fetcher, query keys, and hooks to support the 'genre' parameter, as well as adding a new 'MainCategoryBar' and a category dropdown in the 'Header'. Feedback focuses on ensuring the 'popular' sorting is maintained when switching to the general performance hook, restoring detailed error messages in the UI, and centralizing the duplicated category constants into a shared file.
| staleTime: 1000 * 60, | ||
| }); | ||
| const genre = categoryGenreMap[activeCategory]; | ||
| const { data, status } = usePerformances(10, genre); |
There was a problem hiding this comment.
기존에는 fetchPopularPerformances를 사용하여 인기 공연 데이터를 가져왔으나, 현재는 usePerformances(전체 공연 목록 조회)를 사용하도록 변경되었습니다. 만약 /api/v1/performances API가 기본적으로 인기순 정렬을 제공하지 않는다면, UI의 '인기 공연' 타이틀과 실제 데이터가 일치하지 않는 문제가 발생할 수 있습니다. 인기 공연 필터링이 필요하다면 기존 인기 공연 전용 API에 genre 파라미터를 추가하거나, usePerformances에 정렬 파라미터를 추가하는 방향을 검토해 주세요. 또한, 에러 처리를 위해 error 객체를 함께 구조 분해 할당하는 것을 권장합니다.
| const { data, status } = usePerformances(10, genre); | |
| const { data, status, error } = usePerformances(10, genre); |
| {status === "error" && ( | ||
| <div className="text-center py-10"> | ||
| <p className="text-red-500 font-semibold">오류가 발생했습니다.</p> | ||
| <p className="text-gray-600 mt-2"> | ||
| {error instanceof Error ? error.message : "알 수 없는 에러"} | ||
| </p> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
에러 발생 시 사용자에게 구체적인 에러 메시지를 보여주던 로직이 삭제되었습니다. 네트워크 오류나 서버 에러 등 다양한 상황에 대한 피드백을 제공하기 위해, error 객체의 메시지를 활용하여 사용자에게 정보를 제공하는 것이 좋습니다.
{status === "error" && (
<div className="text-center py-10">
<p className="text-red-500 font-semibold">오류가 발생했습니다.</p>
<p className="text-gray-600 mt-2">
{error instanceof Error ? error.message : "알 수 없는 에러"}
</p>
</div>
)}
| const performanceCategories = [ | ||
| { label: "전체", path: "/performances" }, | ||
| { label: "콘서트", path: "/performances?genre=CONCERT" }, | ||
| { label: "뮤지컬", path: "/performances?genre=MUSICAL" }, | ||
| { label: "어린이극", path: "/performances?genre=CHILDREN_THEATER" }, | ||
| { label: "무용", path: "/performances?genre=DANCE" }, | ||
| { label: "연극", path: "/performances?genre=PLAY" }, | ||
| { label: "오페라", path: "/performances?genre=OPERA" }, | ||
| ]; |
There was a problem hiding this comment.
공연 카테고리 목록(performanceCategories)이 Header.tsx, Category.tsx, MainCategoryBar.tsx 등 여러 컴포넌트에서 중복으로 정의되어 있습니다. 이를 src/constants/categories.ts와 같은 공통 파일로 분리하여 관리하면, 향후 카테고리가 추가되거나 변경될 때 유지보수가 훨씬 용이해집니다.
|
|
||
| {isCategoryOpen && ( | ||
| <div | ||
| className="absolute right-0 mt-2 w-44 bg-white rounded-xl shadow-[0_10px_40px_-10px_rgba(0,0,0,0.1)] border border-gray-100 overflow-hidden z-50 animate-fadeIn" |
There was a problem hiding this comment.
shadow 속성 재사용을 위해, global.css 파일에 설정해서 불러오는 방식으로 고려해도 좋을 것 같습니다.
| const categories = [ | ||
| { id: "all", label: "전체" }, | ||
| { id: "CONCERT", label: "콘서트" }, | ||
| { id: "MUSICAL", label: "뮤지컬" }, | ||
| { id: "CHILDREN_THEATER", label: "어린이극" }, | ||
| { id: "DANCE", label: "무용" }, | ||
| { id: "PLAY", label: "연극" }, | ||
| { id: "OPERA", label: "오페라" }, | ||
| ]; |
There was a problem hiding this comment.
따로 파일을 만들어 관리하는 것이 유지보수에 좋을 것 같습니다.
2 participants
🛠️ 설명 (Description)
이번 PR에서는 공연 카테고리 탐색 경험을 개선하기 위해 카테고리바 컴포넌트 분리, 헤더 내 공연 카테고리 진입점 추가, 공연 목록 필터링 파라미터 정리 작업을 진행했습니다.
메인 페이지와 공연 목록 페이지의 역할을 분리하고, URL 쿼리 파라미터와 API 요청 파라미터를
genre기준으로 일관되게 맞추는 것을 목표로 했습니다.📝 변경 사항 요약 (Summary)
MainCategoryBar컴포넌트 신규 생성Category컴포넌트 유지type→genre파라미터로 전환fetchPerformances,usePerformances,queryKeys에genre파라미터 추가Category,Header,PerformancePage의 URL 쿼리 파라미터genre으로 통일🔗 관련 이슈 (Related Issues)
☑️ 체크리스트 (Checklist)
👀 리뷰어를 위한 참고 사항 (Notes for Reviewers)
➕ 추가 정보 (Additional Information)