Conversation
Walkthrough이번 변경 사항은 호스트 상세 정보를 가져오기 위한 API, 커스텀 훅, 모델 인터페이스가 추가되었습니다. 또한, 관련 페이지 컴포넌트에서 정적 데이터 대신 동적으로 데이터를 조회하도록 리팩토링되었으며, 컴포넌트 간 import 경로가 재구성되었습니다. 마지막으로, EventCard 컴포넌트에 Changes
Sequence Diagram(s)sequenceDiagram
participant Page as MyHostPage
participant Hook as useHostDetail
participant API as hostDetail
participant Axios as axiosClient
Page->>Hook: useHostDetail(hostChannelId) 호출
Hook->>API: hostDetail(dto) 호출
API->>Axios: GET /host-channels/{hostChannelId}
Axios-->>API: HostDetailResponse 반환
API-->>Hook: 결과 데이터(result) 반환
Hook-->>Page: 데이터를 전달
Suggested reviewers
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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 (2)
src/entities/host/hook/useHostDetailHook.ts (1)
1-13: React Query 훅이 잘 구현되었습니다.호스트 상세 정보를 가져오는 커스텀 훅이 적절하게 구현되었습니다. 하지만 반환값에
data만 포함되어 있어 컴포넌트에서 로딩 상태나 오류 처리가 어려울 수 있습니다.추가적인 상태 정보를 반환하도록 개선하는 것이 좋겠습니다:
-const useHostDetail = (hostChannelId: number) => { - const { data } = useQuery({ +const useHostDetail = (hostChannelId: number) => { + const { data, isLoading, error } = useQuery({ queryKey: ['hostDetail', hostChannelId], queryFn: () => hostDetail({ hostChannelId }), }); - return { data }; + return { data, isLoading, error }; };src/entities/host/model/hostDetail.ts (1)
1-9: Event 인터페이스 내보내기 필요성 검토
Event인터페이스가 현재 파일 내부에서만 사용되는 경우 문제가 없지만, 다른 파일에서도 이 타입을 사용할 가능성이 있다면 인터페이스를 내보내는 것이 좋겠습니다.-interface Event { +export interface Event { id: number; bannerImageUrl: string; title: string; hostChannelName: string; startDate: string; address: string; hashtags: string[]; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/entities/host/api/hostDetail.ts(1 hunks)src/entities/host/hook/useHostDetailHook.ts(1 hunks)src/entities/host/model/hostDetail.ts(1 hunks)src/pages/event-manage/ui/HostSelectionPage.tsx(1 hunks)src/pages/menu/ui/myHost/MyHostPage.tsx(2 hunks)src/shared/ui/EventCard.tsx(2 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
src/entities/host/api/hostDetail.ts (1)
src/entities/host/model/hostDetail.ts (2)
HostDetailRequest(11-13)HostDetailResponse(15-23)
🔇 Additional comments (13)
src/entities/host/api/hostDetail.ts (1)
1-10: API 호출이 적절하게 구현되었습니다.호스트 채널 상세 조회를 위한 API 호출이 잘 구현되었습니다. 타입 안전성을 확보하고 간결한 구현을 했습니다.
src/pages/event-manage/ui/HostSelectionPage.tsx (1)
4-4: import 경로 변경이 적절합니다.
useHostChannelList훅의 import 경로가 위젯 디렉토리에서 엔티티 디렉토리로 변경되었습니다. 이는 코드 구조 개선을 위한 적절한 리팩토링입니다.src/entities/host/model/hostDetail.ts (1)
11-23: 요청 및 응답 인터페이스가 잘 정의되었습니다.
HostDetailRequest와HostDetailResponse인터페이스가 API 요청 및 응답 구조를 명확하게 정의하고 있어 타입 안전성이 확보됩니다.src/shared/ui/EventCard.tsx (4)
6-7: 새로운 필수 속성 추가 확인EventCardProps 인터페이스에
id: number속성이 추가되었습니다. 이는 대시보드 링크 생성 시 동적 라우팅을 위한 적절한 변경사항입니다.
9-9: 옵셔널 타입 변환 적절함dDay 속성이 필수에서 옵셔널(
?)로 변경되었습니다. 이는 모든 이벤트가 dDay 값을 가지지 않을 수 있는 현실적인 상황을 반영한 좋은 변경입니다.
17-17: 컴포넌트 시그니처 업데이트 확인EventCard 컴포넌트의 매개변수에
id가 추가되었습니다. 인터페이스 변경에 맞게 적절히 반영되었습니다.
56-56: 동적 라우팅 구현 확인대시보드 링크가 정적 경로에서 동적 경로(
/dashboard/${id})로 변경되었습니다. 이를 통해 각 이벤트별 대시보드로 정확히 이동할 수 있게 되었습니다.src/pages/menu/ui/myHost/MyHostPage.tsx (6)
6-7: API 훅 통합 구현 확인
useHostChannelList와useHostDetail훅을 추가하여 API 연동이 적절히 구현되었습니다. PR 목표인 "내 호스트 전체 조회"와 "호스트 채널 상세 조회" 기능 통합이 이루어졌습니다.
11-12: API 데이터 활용 구현정적 데이터 대신 API에서 가져온 데이터를 사용하도록 적절히 구현되었습니다.
selectedHostId를 기반으로 상세 정보를 조회하는 로직이 잘 작성되었습니다.
21-21: 동적 프로필 목록 구현정적 데이터 대신 API 응답의
data?.result를 사용하여 프로필 목록을 동적으로 렌더링하도록 변경되었습니다.
35-35: 이벤트 목록 동적 렌더링API 응답의
hostDetail?.result?.events를 사용하여 이벤트 카드 목록을 동적으로 렌더링하도록 변경되었습니다.
37-45: 이벤트 카드 속성 매핑 확인API 응답 구조에 맞게 EventCard 컴포넌트에 전달되는 속성들이 적절히 매핑되었습니다. 또한 새로 추가된
id속성도 올바르게 전달되고 있습니다.
41-41: dDay 주석 처리 확인 필요dDay 속성이 주석 처리되어 있습니다. EventCard 컴포넌트에서 dDay를 옵셔널로 변경했으므로 주석을 제거하거나, API 응답에서 적절한 dDay 값을 매핑하는 것이 좋겠습니다.
dDay 값을 API 응답에서 가져올 수 있는지, 아니면 추가 계산이 필요한지 확인해주세요. 필요하다면 주석 해제 후 적절한 값을 매핑하는 것이 좋겠습니다.
Yejiin21
force-pushed
the
feat/#84/my-host-api
branch
from
3d83c7e to
49e5d5e
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
src/pages/menu/ui/myHost/HostDetailPage.tsx (1)
11-13:⚠️ Potential issueAPI 연동 불완전: 정적 데이터 대신 API 데이터 사용 필요
현재
HostDetailPage컴포넌트는 여전히trendingEvents라는 정적 데이터를 사용하여 이벤트를 필터링하고 있습니다. 그러나 PR의 목적인 "호스트 채널 상세 조회" API 연동과 맞지 않습니다.MyHostPage.tsx에서 구현한 것처럼useHostDetail훅을 사용하여 동적으로 데이터를 가져오도록 수정해야 합니다.다음과 같이 코드를 수정하는 것을 제안합니다:
import { useNavigate, useParams } from 'react-router-dom'; import HostDetailLayout from '../../../../shared/ui/backgrounds/HostDetailLayout'; -import { trendingEvents } from '../../../../shared/types/eventCardType'; import EventCard from '../../../../shared/ui/EventCard'; +import useHostDetail from '../../../../entities/host/hook/useHostDetailHook'; const HostDetailPage = () => { const navigate = useNavigate(); // URL에서 hostId를 가져오기 const { id } = useParams<{ id: string }>(); + const { data: hostDetail } = useHostDetail(Number(id) || 0); - // hostId에 해당하는 이벤트들만 필터링 - const filteredEvents = trendingEvents.filter(event => event.id === Number(id)); return ( <HostDetailLayout rightContent={ <button onClick={() => navigate(`/menu/hostEdit/${id}`)} className="text-xs cursor-pointer"> 수정하기 </button> } > <div className="grid grid-cols-2 gap-4 mx-5 mt-3 md:grid-cols-2 lg:grid-cols-2 z-50"> - {filteredEvents.map((event, index) => ( + {hostDetail?.result?.events?.map(event => ( <EventCard id={event.id} - key={index} + key={event.id} - img={event.img} + img={event.bannerImageUrl} - eventTitle={event.eventTitle} + eventTitle={event.title} - dDay={event.dDay} + dDay={event.remainDays} - host={event.host} + host={event.hostChannelName} - eventDate={event.eventDate} + eventDate={event.startDate} - location={event.location} + location={event.onlineType} hashtags={event.hashtags} /> ))} </div> </HostDetailLayout> ); }; export default HostDetailPage;
🧹 Nitpick comments (5)
src/entities/host/model/hostDetail.ts (3)
1-11: Event 인터페이스에 대한 개선 사항
Event인터페이스는 다른 파일에서도 사용될 가능성이 있으므로export를 추가하는 것이 좋습니다. 또한 일부 속성의 타입을 개선할 수 있습니다:
startDate는 문자열 대신Date타입 또는 ISO 문자열을 명확히 하는 타입을 사용하는 것이 좋습니다.remainDays는 숫자로 표현되는 값이므로string대신number타입을 사용하고, 화면에 표시할 때 포맷팅하는 것이 더 적절합니다.- 각 속성에 대한 JSDoc 주석을 추가하면 코드의 가독성과 유지보수성이 향상됩니다.
+/** + * 이벤트 정보에 대한 인터페이스 + */ -interface Event { +export interface Event { id: number; bannerImageUrl: string; title: string; hostChannelName: string; - startDate: string; + startDate: string; // ISO 형식의 날짜 문자열 (YYYY-MM-DD) address: string; onlineType: string; hashtags: string[]; - remainDays: string; + remainDays: number; }
13-15: 타입 주석 추가 권장
HostDetailRequest인터페이스에 JSDoc 주석을 추가하여 용도와 사용 방법을 명확히 하면 좋을 것 같습니다.+/** + * 호스트 상세 정보 요청 파라미터 인터페이스 + */ export interface HostDetailRequest { hostChannelId: number; }
17-25: 응답 인터페이스에 타입 주석 추가 권장
HostDetailResponse인터페이스에도 JSDoc 주석을 추가하면 API 응답 구조를 이해하는데 도움이 됩니다.+/** + * 호스트 상세 정보 응답 인터페이스 + * @property {object} result - 호스트 채널 및 이벤트 정보 + */ export interface HostDetailResponse { result: { id: number; profileImageUrl: string; hostChannelName: string; channelDescription: string; events: Event[]; }; }src/pages/menu/ui/myHost/MyHostPage.tsx (2)
21-30: 프로필 데이터 처리 개선프로필 데이터가 없을 경우에 대한 처리가 필요합니다. API에서 데이터를 못 받아올 경우
data?.result가undefined일 수 있으며, 이 경우map함수가 에러를 발생시킬 수 있습니다.다음과 같이 개선할 것을 제안합니다:
<div className="flex space-x-5 mt-24 mx-5 overflow-x-auto scrollbar-hide"> - {data?.result.map(profile => ( + {data?.result?.map(profile => ( <ProfileCircle key={profile.id} id={profile.id} name={profile.hostChannelName} profile="hostProfile" onClick={() => handleProfileClick(profile.id)} className="md:w-20 md:h-20 w-16 h-16 hover:border hover:border-main" /> + )) || ( + <div className="text-center w-full py-4">호스트 정보가 없습니다.</div> ))} </div>
35-47: 이벤트 카드 데이터 처리 개선됨이벤트 카드 데이터를 API에서 가져오도록 잘 수정되었습니다. API 응답 구조에 맞게 속성들이 올바르게 매핑되었습니다.
단, 데이터가 없을 경우에 대한 UI 처리를 추가하는 것이 좋을 것 같습니다.
<div className="grid grid-cols-2 gap-4 mx-5 mt-3 md:grid-cols-2 lg:grid-cols-2 pb-6"> - {hostDetail?.result?.events?.map(event => ( + {hostDetail?.result?.events?.length > 0 ? ( + hostDetail.result.events.map(event => ( <EventCard key={event.id} id={event.id} img={event.bannerImageUrl} eventTitle={event.title} dDay={event.remainDays} host={event.hostChannelName} eventDate={event.startDate} location={event.onlineType} hashtags={event.hashtags} /> + )) + ) : ( + <div className="col-span-2 text-center py-8">이벤트가 없습니다.</div> ))} </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
design-system/ui/texts/Countdown.tsx(1 hunks)src/entities/host/api/hostDetail.ts(1 hunks)src/entities/host/hook/useHostDetailHook.ts(1 hunks)src/entities/host/model/hostDetail.ts(1 hunks)src/pages/event-manage/ui/HostSelectionPage.tsx(1 hunks)src/pages/menu/ui/myHost/HostDetailPage.tsx(1 hunks)src/pages/menu/ui/myHost/MyHostPage.tsx(2 hunks)src/shared/ui/EventCard.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/entities/host/hook/useHostDetailHook.ts
- src/entities/host/api/hostDetail.ts
- src/pages/event-manage/ui/HostSelectionPage.tsx
- src/shared/ui/EventCard.tsx
🔇 Additional comments (2)
src/pages/menu/ui/myHost/HostDetailPage.tsx (1)
25-25: 이벤트 카드에 id 추가 적용 완료EventCard 컴포넌트에
id속성이 올바르게 추가되었습니다. 이는 API 통합 작업의 일부로서 필요한 변경사항입니다.design-system/ui/texts/Countdown.tsx (1)
20-21: 스타일 변경 관련 확인 필요
baseStyles에서 다음과 같은 스타일 변경이 있었습니다:
text-xs에서text-11로 변경min-w-[38px] max-w-[38px]제거
text-11이 프로젝트의 Tailwind 구성에 정의된 커스텀 클래스인지 확인해주세요. 표준 Tailwind에서는 일반적으로text-xs,text-sm,text-base등의 형태로 텍스트 크기를 지정합니다.또한, 고정 너비 제약을 제거함으로써 컨텐츠 변경 시 예상치 못한 UI 변화가 발생할 수 있습니다. 특히 D-day 표시와 같이 일관된 너비가 필요한 경우 문제가 될 수 있습니다.
이 변경사항이 모든 상황에서 UI를 정확하게 표시하는지 확인해주세요.
| const { data } = useHostChannelList(); | ||
| const { data: hostDetail } = useHostDetail(selectedHostId ?? 0); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
API 호출에 대한 로딩 상태 및 오류 처리 필요
API 호출을 사용하는 방식으로 잘 리팩토링되었지만, 로딩 상태와 오류 처리가 누락되었습니다. 또한 selectedHostId가 null일 때 기본값으로 0을 사용하고 있는데, 이것이 유효한 ID인지 확인이 필요합니다.
다음과 같이 개선할 것을 제안합니다:
const [selectedHostId, setSelectedHostId] = useState<number | null>(null);
const { data } = useHostChannelList();
- const { data: hostDetail } = useHostDetail(selectedHostId ?? 0);
+ const { data: hostDetail, isLoading, error } = useHostDetail(selectedHostId ?? undefined);
+ // 로딩 상태 처리
+ if (isLoading) {
+ return <div className="flex justify-center items-center h-screen">로딩 중...</div>;
+ }
+
+ // 오류 처리
+ if (error) {
+ return <div className="flex justify-center items-center h-screen">오류가 발생했습니다: {error.message}</div>;
+ }또한 useHostDetail 훅에서 undefined나 null을 처리하도록 수정하는 것이 좋습니다. 유효한 ID가 선택되었을 때만 API를 호출하도록 해야 합니다.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { data } = useHostChannelList(); | |
| const { data: hostDetail } = useHostDetail(selectedHostId ?? 0); | |
| const [selectedHostId, setSelectedHostId] = useState<number | null>(null); | |
| const { data } = useHostChannelList(); | |
| const { data: hostDetail, isLoading, error } = useHostDetail(selectedHostId ?? undefined); | |
| // 로딩 상태 처리 | |
| if (isLoading) { | |
| return <div className="flex justify-center items-center h-screen">로딩 중...</div>; | |
| } | |
| // 오류 처리 | |
| if (error) { | |
| return <div className="flex justify-center items-center h-screen">오류가 발생했습니다: {error.message}</div>; | |
| } |
2 participants
Summary by CodeRabbit
새로운 기능
버그 수정
리팩토링