Conversation
|
Caution Review failedThe pull request is closed. Walkthrough이 변경사항은 이벤트 상세 API 반환 구조를 수정하고, 호스트 대시보드 기능을 추가하며, 날짜 선택기와 대시보드 관련 컴포넌트의 데이터 흐름을 개선합니다. 또한, 이벤트 정보 관리 페이지에서 날짜 상태를 명시적으로 관리하도록 리팩토링하고, 불필요해진 이벤트 포맷팅 유틸리티를 삭제하였습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant DashboardPage
participant useHostDashboard
participant hostDashboard API
participant EventOverview
DashboardPage->>useHostDashboard: 호출
useHostDashboard->>hostDashboard API: eventId로 데이터 요청
hostDashboard API-->>useHostDashboard: HostDashboardResponse 반환
useHostDashboard-->>DashboardPage: data, refetch 반환
DashboardPage->>EventOverview: eventInfo={data}
sequenceDiagram
participant EventInfoPage
participant EventDatePicker
EventInfoPage->>EventDatePicker: startDate, endDate, onStartDateChange, onEndDateChange 전달
EventDatePicker-->>EventInfoPage: 날짜 변경 시 콜백 호출
EventInfoPage->>EventDatePicker: 상태 업데이트
Possibly related PRs
Suggested reviewers
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (13)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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: 5
🔭 Outside diff range comments (1)
src/pages/event/ui/EventDetailsPage.tsx (1)
39-46:⚠️ Potential issue데이터 접근 방식에 일관성 없음
여기 북마크 관련 처리에서 일관성 문제가 있습니다. 북마크 여부 확인 시에는
event.bookmarked와event.bookmarkId를 사용하지만, 실제 함수 호출에서는event.result.id와event.result.bookmarkId를 사용합니다.다음과 같이 모든 event 데이터 접근을 일관되게 수정하세요:
const handleLikeClick = () => { - if (event.bookmarked) { - if (event.bookmarkId === null) { + if (event.result.bookmarked) { + if (event.result.bookmarkId === null) { return; } deleteBookmark({ eventId: event.result.id, bookmarkId: event.result.bookmarkId }); } else { createBookmark(event.result.id); } };
🧹 Nitpick comments (2)
src/pages/dashboard/ui/DashbaordPage.tsx (1)
27-28: 판매 금액 표시에 적절한 fallback 처리가 되었습니다.데이터가 없을 경우의 fallback 처리가 잘 되어 있습니다.
파일 이름에 오타가 있습니다:
DashbaordPage.tsx는DashboardPage.tsx로 수정하는 것이 좋습니다.src/entities/host/model/hostDashboard.ts (1)
1-9: 인터페이스 명확성 개선 제안인터페이스 구조는 명확하지만, 각 필드에 대한 설명이 없어 특히
ticketOption과ticket불리언 필드의 목적이 불분명합니다.아래와 같이 JSDoc 주석을 추가하여 각 필드의 용도를 명확히 하는 것이 좋습니다:
+/** + * 호스트 대시보드 응답 데이터 인터페이스 + */ export interface HostDashboardResponse { + /** 이벤트 이름 */ eventName: string; + /** 이벤트 시작 일시 (ISO 8601 형식) */ eventStartDate: string; + /** 이벤트 종료 일시 (ISO 8601 형식) */ eventEndDate: string; + /** 총 티켓 수량 */ totalTicketCnt: number; + /** 총 가격 */ totalPrice: number; + /** 티켓 옵션 활성화 여부 */ ticketOption: boolean; + /** 티켓 생성 여부 */ ticket: boolean; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
src/entities/event/api/event.ts(1 hunks)src/entities/event/hook/useEventHook.ts(1 hunks)src/entities/host/api/hostDashboard.ts(1 hunks)src/entities/host/hook/hostDashboardHook.ts(1 hunks)src/entities/host/model/hostDashboard.ts(1 hunks)src/features/dashboard/ui/Checklist.tsx(2 hunks)src/pages/dashboard/ui/DashbaordPage.tsx(1 hunks)src/pages/event/ui/EventDetailsPage.tsx(2 hunks)src/pages/search/ui/SearchPage.tsx(1 hunks)src/widgets/dashboard/ui/EventOverview.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/entities/event/hook/useEventHook.ts (1)
src/entities/event/api/event.ts (1)
eventDetail(7-12)
src/entities/event/api/event.ts (3)
src/entities/event/model/event.ts (2)
PaginationParams(19-22)EventItem(30-34)src/shared/types/api/apiResponse.ts (1)
ApiResponse(1-5)src/shared/types/api/http-client.ts (1)
axiosClient(6-13)
src/entities/host/api/hostDashboard.ts (3)
src/shared/types/api/http-client.ts (1)
axiosClient(6-13)src/shared/types/api/apiResponse.ts (1)
ApiResponse(1-5)src/entities/host/model/hostDashboard.ts (1)
HostDashboardResponse(1-9)
src/widgets/dashboard/ui/EventOverview.tsx (2)
src/entities/host/model/hostDashboard.ts (1)
HostDashboardResponse(1-9)src/shared/lib/date.ts (2)
formatDate(1-9)formatTime(10-15)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: storybook
🔇 Additional comments (17)
src/pages/search/ui/SearchPage.tsx (1)
85-85: EventCard 컴포넌트에 id prop 추가 구현이 잘되었습니다.이벤트 카드에 id prop을 추가한 변경사항은 PR 목표에 맞게 API 응답 데이터 구조 표준화를 지원합니다. 이것은 향후 API 반환 타입을 일관되게 만들기 위한 좋은 단계입니다.
src/pages/dashboard/ui/DashbaordPage.tsx (5)
7-8: 새로운 useHostDashboard 훅 import 잘 구현되었습니다.대시보드 페이지에서 새롭게 구현된
useHostDashboard훅을 import하는 변경이 적절하게 이루어졌습니다.
10-10: useHostDashboard 훅 사용으로 변경 잘 적용되었습니다.기존 훅에서 새로운
useHostDashboard훅으로의 변경이 깔끔하게 이루어졌습니다.
15-15: 이벤트 이름 표시에 대한 fallback 처리가 적절합니다.데이터가 없을 경우의 fallback 텍스트 처리가 잘 되어 있습니다.
17-17: EventOverview 컴포넌트에 데이터 전달 방식 변경이 잘 적용되었습니다.새로운 데이터 구조에 맞게
eventInfo속성에data를 전달하도록 변경되었습니다.
22-23: 티켓 판매 수 표시에 적절한 fallback 처리가 되었습니다.데이터가 없을 경우의 fallback 처리가 잘 되어 있습니다.
src/entities/event/api/event.ts (2)
15-18: 함수 시그니처 개선
searchEvents함수의 시그니처가 가독성 있게 재구성되었습니다. 가독성이 좋아졌네요!
7-11:Details
✅ Verification successful
API 반환 패턴 변경에 대한 주의
eventDetail함수가 이전에는response.data.result를 반환했을 것으로 추정되나, 이제response.data전체를 반환하도록 변경되었습니다. 이는 PR 설명에서 언급된 API 반환 타입 통일을 위한 일부로 보입니다.이 변경으로 인해
eventDetail함수를 사용하는 컴포넌트에서는 데이터 접근 방식을 수정해야 할 수 있습니다:
🏁 Script executed:
#!/bin/bash # eventDetail 함수 사용 패턴 확인 echo "eventDetail 함수 사용 패턴 확인..." rg -A 3 "eventDetail\(" src/Length of output: 348
🏁 Script executed:
#!/bin/bash # useEventHook.ts 전체 내용 확인 cat src/entities/event/hook/useEventHook.tsLength of output: 609
🏁 Script executed:
#!/bin/bash # useEventDetail 훅 사용 위치 확인 echo "useEventDetail 사용 위치 검색 중..." rg -n "useEventDetail" src/Length of output: 839
🏁 Script executed:
#!/bin/bash # 페이지에서 eventDetail 반환값 사용 방식 확인 echo "=== EventInfoPage.tsx ===" cat src/pages/dashboard/ui/EventInfoPage.tsx echo "" echo "=== EventDetailPage.tsx ===" cat src/pages/dashboard/ui/EventDetailPage.tsx echo "" echo "=== EventDetailsPage.tsx ===" cat src/pages/event/ui/EventDetailsPage.tsxLength of output: 13844
eventDetail 반환 형태 확인 완료 – 변경 반영됨
eventDetail이 이제response.data전체를 반환하고, 이를 사용하는 훅과 페이지들에서 모두data?.result로 접근하도록 이미 업데이트된 것을 확인했습니다. 추가 수정이 필요 없습니다.src/widgets/dashboard/ui/EventOverview.tsx (3)
1-2: 적절한 타입 및 유틸리티 함수 가져오기기존
dashboardData타입 대신HostDashboardResponse타입을 사용하고, 날짜 형식화를 위한 유틸리티 함수를 가져오도록 변경되었습니다. 이는 올바른 접근법입니다.
4-4: 컴포넌트 프롭 타입 업데이트컴포넌트 프롭 타입이 새로운
HostDashboardResponse인터페이스에 맞게 올바르게 업데이트되었습니다.
18-27: 날짜 형식화 개선날짜 표시 방식이 하드코딩된 문자열 연결에서 재사용 가능한 유틸리티 함수를 사용하는 방식으로 개선되었습니다. 이런 접근법은 날짜 형식을 일관되게 유지하는 데 도움이 됩니다.
조건부 렌더링도 적절하게 처리되어
eventInfo가 없을 경우 "날짜 정보 없음"을 표시합니다.src/pages/event/ui/EventDetailsPage.tsx (1)
68-120: 이벤트 데이터 접근 개선이벤트 데이터를
event.result객체를 통해 일관되게 접근하도록 수정한 것이 좋습니다. 이는 PR 목표에 언급된 API 반환 타입 통일화 작업과 일치합니다.src/features/dashboard/ui/Checklist.tsx (5)
3-6: 리소스 및 훅 추가 적절완료 상태를 표시하기 위한 아이콘과 대시보드 데이터를 가져오기 위한 훅을 적절하게 추가했습니다.
11-11: 대시보드 데이터 사용 구현호스트 대시보드 데이터를 가져오기 위한 훅 사용이 적절합니다. 데이터와 함께 refetch 함수도 가져와 상태 업데이트에 활용하고 있습니다.
32-35: 네비게이션 처리 함수 적절네비게이션 전 데이터를 다시 가져오는 함수가 적절하게 구현되었습니다. 페이지 이동 시 최신 상태를 유지하는 데 도움이 됩니다.
44-49: 진행 상태 표시 UI 구현 적절진행 상태에 따라 프로그레스 바의 색상이 변경되도록 구현이 잘 되었습니다. 사용자에게 시각적 피드백을 적절히 제공합니다.
53-58: 체크리스트 아이콘 조건부 표시 적절완료 상태에 따라 체크 아이콘을 다르게 표시하는 구현이 잘 되었습니다. 사용자에게 명확한 시각적 피드백을 제공합니다.
| queryFn: () => eventDetail({ eventId, userId: user?.id }), | ||
| enabled: !!user?.id, |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
공백 제거 변경이 잘 적용되었습니다.
이 부분의 변경은 단순 공백 제거에 불과하지만, eventDetail API 함수의 반환 구조 변경(response.data.result → response.data)과 연관되어 있습니다. 현재 이 훅 자체는 큰 수정이 필요하지 않았지만, 이 훅을 사용하는 컴포넌트들이 데이터 접근 방식을 적절히 수정했는지 확인해주세요.
🏁 Script executed:
#!/bin/bash
# 이 훅을 사용하는 컴포넌트 검색
echo "useEventDetail 훅을 사용하는 파일 검색:"
rg -l "useEventDetail" --type tsxLength of output: 130
🏁 Script executed:
#!/bin/bash
# useEventHook 훅을 사용하는 컴포넌트 검색
echo "useEventHook 훅을 사용하는 파일 검색:"
rg -l "useEventHook" -g '*.{ts,tsx}'Length of output: 318
🏁 Script executed:
#!/bin/bash
# data.result 사용 여부 검색
echo "data.result 사용 검색:"
rg -n "data\\.result" -g '*.{ts,tsx}'Length of output: 2536
eventDetail 반환 구조 변경에 따른 컴포넌트 수정 필요
response.data.result → response.data로 API 반환값이 바뀌었으므로, 아직 data.result를 참조하고 있는 컴포넌트들을 직접 data로 참조하도록 수정해야 합니다. 다음 파일들을 점검 및 리팩토링해 주세요:
- src/widgets/event/ui/TicketInfo.tsx
- src/pages/dashboard/ui/EventInfoPage.tsx
- src/pages/dashboard/ui/ticket/TicketListPage.tsx
- src/pages/dashboard/ui/EventDetailPage.tsx
- 기타
data.result를 사용 중인 파일들 (rg 결과 참조)
수정 예시:
- const tickets = data.result;
+ const tickets = data;위 파일들의 모든 data.result 참조를 data로 교체하고, 맵핑 로직이나 변수명도 일관되게 업데이트해 주세요.
Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/pages/dashboard/ui/EventDetailPage.tsx (1)
35-52: UpdateEventRequest 객체 구성이 체계적으로 구현됨기존 formatEventRequest 유틸리티 함수 대신 명시적으로 UpdateEventRequest 객체를 구성하는 방식으로 변경한 것이 좋습니다. 각 필드마다 fallback 값을 제공하여 데이터 무결성을 보장하고 있습니다.
다만,
data.result가 존재하는지 확인하는 방어적인 코드가 추가되면 더 안전할 것 같습니다.const requestData: UpdateEventRequest = { - hostChannelId: data.result.hostChannelId || hostChannelId, + hostChannelId: data?.result?.hostChannelId || hostChannelId, title: data.result.title, startDate: data.result.startDate, endDate: data.result.endDate, // ... 다른 필드들 };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/entities/host/hook/hostDashboardHook.ts(1 hunks)src/features/dashboard/ui/Checklist.tsx(2 hunks)src/features/event-manage/event-create/ui/DatePicker.tsx(3 hunks)src/pages/dashboard/ui/EventDetailPage.tsx(2 hunks)src/pages/dashboard/ui/EventInfoPage.tsx(4 hunks)src/shared/lib/formatEventRequest.ts(0 hunks)
💤 Files with no reviewable changes (1)
- src/shared/lib/formatEventRequest.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- src/entities/host/hook/hostDashboardHook.ts
- src/features/dashboard/ui/Checklist.tsx
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/pages/dashboard/ui/EventDetailPage.tsx (2)
src/features/dashboard/model/event.ts (1)
UpdateEventRequest(3-10)src/shared/types/baseEventType.ts (1)
OnlineType(1-1)
src/pages/dashboard/ui/EventInfoPage.tsx (2)
src/features/dashboard/model/event.ts (1)
UpdateEventRequest(3-10)src/shared/types/baseEventType.ts (1)
OnlineType(1-1)
🔇 Additional comments (15)
src/pages/dashboard/ui/EventDetailPage.tsx (2)
10-11: 적절한 import 추가새로운 타입을 가져오는 import 문이 깔끔하게 추가되었습니다.
54-54: mutate 호출 구조 변경요청 데이터를 명시적으로 전달하는 방식으로 변경되었습니다. 이는 코드의 가독성과 유지보수성을 향상시킵니다.
src/pages/dashboard/ui/EventInfoPage.tsx (6)
13-13: 필요한 타입 import 추가UpdateEventRequest 타입을 명시적으로 가져와서 타입 안정성을 높였습니다.
35-36: 날짜 상태 변수의 명시적 관리
startDate와endDate상태 변수를 추가하여 날짜 정보를 명시적으로 관리하는 것은 좋은 개선입니다. 이를 통해 날짜 정보의 관리가 더 명확해집니다.
41-58: UpdateEventRequest 객체 구성이 개선됨이전의 formatEventRequest 유틸리티 함수 대신 명시적으로 UpdateEventRequest 객체를 구성하는 방식으로 변경한 것이 좋습니다. 각 필드마다 현재 상태 값과 data.result의 값을 적절하게 체크하고 fallback을 제공하고 있습니다.
60-68: 에러 핸들링 개선에러 발생 시
console.error를 통해 자세한 에러 정보를 로깅하는 기능이 추가되었습니다. 이는 디버깅과 문제 해결에 큰 도움이 됩니다.
85-86: 상태 초기화 로직 추가useEffect 내에서 startDate와 endDate 상태를 초기화하는 로직이 추가되었습니다. 이는 데이터가 로드될 때 적절하게 상태를 설정하기 위한 중요한 부분입니다.
101-106: DatePicker 컴포넌트 사용 방식 개선EventDatePicker 컴포넌트에 startDate, endDate 및 변경 핸들러를 명시적으로 전달하여 제어 컴포넌트 방식으로 사용하는 것으로 변경되었습니다. 이는 상태 관리를 더 명확하게 하고 코드의 가독성을 높입니다.
src/features/event-manage/event-create/ui/DatePicker.tsx (7)
11-14: DatePickerProps 인터페이스 확장컴포넌트의 재사용성을 높이기 위해 인터페이스에 새로운 속성들을 추가한 것은 좋은 개선입니다. 이를 통해 제어 컴포넌트 방식으로도 사용할 수 있게 되었습니다.
18-27: 컴포넌트 파라미터 구조 개선새로 추가된 속성들을 반영하여 컴포넌트 파라미터 구조를 업데이트했습니다. 이름을 initialStartDate와 initialEndDate로 변경하여 의도를 더 명확하게 표현했습니다.
28-29: 상태 초기화 방식 개선Date 객체를 null로 초기화하는 것은 적절한 방식입니다. 이전에는 빈 문자열로 초기화되어 있었을 수 있는데, Date 객체에 대해 null을 사용하는 것이 더 의미론적으로 맞습니다.
33-52: useEffect를 통한 날짜 상태 동기화 로직컴포넌트가 두 가지 방식(eventState와 props)으로 동작할 수 있도록 useEffect를 사용하여 날짜 상태를 동기화하는 로직이 잘 구현되었습니다. 기존 코드와의 호환성을 유지하면서 새로운 기능을 추가한 좋은 예입니다.
59-59: 시간 옵션 포맷팅 수정padStart를 사용하여 시간 옵션의 분 값을 포맷팅하도록 수정한 것은 좋은 개선입니다. 이렇게 하면 "0:0"과 같은 형식 대신 "00:00"과 같이 일관된 형식의 시간 문자열을 얻을 수 있습니다.
82-97: 조건부 상태 업데이트 및 콜백 호출setEventState와 onStartDateChange, onEndDateChange 콜백을 조건부로 호출하는 로직이 잘 구현되어 있습니다. 이를 통해 컴포넌트가 두 가지 사용 방식(내부 상태 관리와 외부 제어)을 모두 지원할 수 있게 되었습니다.
98-98: 의존성 배열 업데이트useEffect의 의존성 배열에 새로운 콜백 함수들을 추가한 것은 적절합니다. 이를 통해 콜백 함수가 변경될 때마다 effect가 다시 실행되어 최신 상태를 유지할 수 있습니다.
| const startISO = new Date(start.getTime() + 9 * 60 * 60 * 1000).toISOString(); | ||
| const endISO = new Date(end.getTime() + 9 * 60 * 60 * 1000).toISOString(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
타임존 처리 관련 고려사항
날짜에 9시간을 더하는 방식으로 타임존 처리를 하고 있는데, 이는 한국 시간(KST, UTC+9)을 위한 것으로 보입니다. 하지만 이러한 하드코딩된 시간 조정은 문제가 될 수 있습니다.
타임존 처리는 Date 객체의 메서드나 moment.js, date-fns와 같은 라이브러리를 사용하여 좀 더 명시적으로 처리하는 것이 좋습니다. 현재 방식은 다른 타임존의 사용자에게 혼란을 줄 수 있습니다.
- const startISO = new Date(start.getTime() + 9 * 60 * 60 * 1000).toISOString();
- const endISO = new Date(end.getTime() + 9 * 60 * 60 * 1000).toISOString();
+ // date-fns 사용 예시
+ import { format, addHours } from 'date-fns';
+ import { zonedTimeToUtc } from 'date-fns-tz';
+
+ const startISO = zonedTimeToUtc(start, 'Asia/Seoul').toISOString();
+ const endISO = zonedTimeToUtc(end, 'Asia/Seoul').toISOString();Committable suggestion skipped: line range outside the PR's diff.
Yejiin21
force-pushed
the
feat/#123/dashboard-mainPage-api
branch
from
ee6d293 to
a8c5924
Compare
2 participants
작업 사항
추후 리팩토링 할 부분
Summary by CodeRabbit
신규 기능
버그 수정
리팩터링
스타일