Conversation
|
""" Walkthrough이번 변경 사항에서는 북마크(관심 이벤트) 기능이 새롭게 추가되고, 이메일 발송 관련 로직에 타겟 타입 및 티켓 ID를 명시적으로 처리하도록 확장되었습니다. 이벤트 상세 조회 시 사용자 정보를 반영하며, 전체적으로 관련 API, 모델, 훅, UI가 연동되어 북마크와 이메일 기능이 개선되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BookmarkPage
participant useBookmarks
participant BookmarkAPI
User->>BookmarkPage: 페이지 진입
BookmarkPage->>useBookmarks: 북마크 목록 조회 쿼리 실행
useBookmarks->>BookmarkAPI: readBookmark() API 호출
BookmarkAPI-->>useBookmarks: 북마크 데이터 반환
useBookmarks-->>BookmarkPage: 데이터 전달
BookmarkPage->>User: 북마크 이벤트 카드 렌더링
sequenceDiagram
participant User
participant EventDetailsPage
participant useEventDetail
participant EventAPI
User->>EventDetailsPage: 이벤트 상세 진입
EventDetailsPage->>useEventDetail: 이벤트 상세 쿼리 실행 (userId 포함)
useEventDetail->>EventAPI: eventDetail({eventId, userId}) 호출
EventAPI-->>useEventDetail: 이벤트 상세 데이터 반환
useEventDetail-->>EventDetailsPage: 데이터 전달
EventDetailsPage->>User: 상세 정보 및 북마크 버튼 표시
User->>EventDetailsPage: 북마크 버튼 클릭
EventDetailsPage->>useCreateBookmark/useDeleteBookmark: 북마크 생성/삭제 mutation 실행
useCreateBookmark/useDeleteBookmark->>BookmarkAPI: createBookmark/deleteBookmark 호출
BookmarkAPI-->>useCreateBookmark/useDeleteBookmark: 응답 반환
useCreateBookmark/useDeleteBookmark-->>EventDetailsPage: 캐시 업데이트 및 UI 반영
Possibly related PRs
Suggested reviewers
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. ✨ 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
🧹 Nitpick comments (7)
src/features/dashboard/model/emailInformation.ts (2)
7-8: 이메일 타겟팅 기능 향상을 위한 속성 추가
EmailRequest인터페이스에targetType과ticketId속성이 추가되어 메일 발송 타겟을 더 명확하게 지정할 수 있게 되었습니다. 'ALL'은 모든 사용자, 'TICKET'은 특정 티켓 소유자를 대상으로 할 때 사용되는 것으로 보입니다.타입 정의에 JSDoc 주석을 추가하여 각 속성의 의미와 사용 방법을 문서화하면 더 좋을 것 같습니다:
+/** + * 이메일 요청 정보 + */ export interface EmailRequest { eventId: number; title: string; content: string; recipients: string[]; reservationDate: string; + /** + * 이메일 대상 타입 + * - ALL: 모든 사용자 + * - TICKET: 특정 티켓 소유자 + */ targetType: 'ALL' | 'TICKET'; + /** + * 대상 티켓 ID (targetType이 'TICKET'일 경우에만 사용) + */ ticketId?: number; }
23-23: 응답 인터페이스에 targetName 속성 추가
ReadEmailResponse인터페이스에targetName속성이 추가되어 이메일이 대상으로 하는 엔티티의 설명적인 이름을 제공합니다. 이는 UI에서 이메일 대상을 표시할 때 유용할 것입니다.속성 정의 끝에 세미콜론이 누락되었습니다. 일관성을 위해 추가하는 것이 좋겠습니다:
- targetName: string + targetName: string;src/features/dashboard/model/EmailStore.tsx (1)
43-44: 타겟 관련 속성 리셋 로직상태 리셋 시
targetType과ticketId가 초기값으로 적절히 리셋되고 있습니다.코드의 가독성과 유지보수성을 높이기 위해 JSDoc 주석을 추가하는 것을 고려해 보세요:
interface EmailState { // ... 기존 속성들 ... + /** + * 이메일 대상 타입 (전체 사용자 또는 특정 티켓 소유자) + */ targetType: 'ALL' | 'TICKET'; + /** + * 대상 티켓 ID (targetType이 'TICKET'일 경우에만 사용됨) + */ ticketId: number; // ... 기존 메서드들 ... }src/app/routes/routes.ts (1)
5-5: 철자 오류 수정 필요: "eventDatail"
eventDatail은 철자가 잘못되었습니다. 올바른 철자는eventDetail입니다. 이 변수명을 일관성 있게 수정하는 것이 좋겠습니다.- eventDatail: '/event-details/:id', + eventDetail: '/event-details/:id',src/app/routes/Router.tsx (1)
45-45: 철자 오류: "eventDatail"routes.ts 파일과 동일하게 여기서도
eventDatail의 철자가 잘못되었습니다.eventDetail로 수정하는 것이 좋겠습니다.- { path: MAIN_ROUTES.eventDatail, element: <EventDetailsPage />, requiresAuth: false }, + { path: MAIN_ROUTES.eventDetail, element: <EventDetailsPage />, requiresAuth: false },src/pages/bookmark/ui/BookmarkPage.tsx (1)
22-22: 그리드 레이아웃의 z-index 사용 검토 필요그리드 레이아웃 컨테이너에
z-50이 적용되어 있는데, 이것이 필요한지 검토가 필요합니다. 일반적으로 그리드 레이아웃에 z-index를 높게 설정하면 다른 UI 요소(예: 모달, 팝업)와 충돌할 수 있습니다.- <div className="grid grid-cols-2 gap-4 mx-5 mt-3 md:grid-cols-2 lg:grid-cols-2 z-50"> + <div className="grid grid-cols-2 gap-4 mx-5 mt-3 md:grid-cols-2 lg:grid-cols-2">src/pages/event/ui/EventDetailsPage.tsx (1)
37-46: 북마크 토글 처리가 개선되었으나 null 체크 로직을 강화해야 합니다.북마크 상태에 따라 적절한 뮤테이션을 호출하도록 처리되었습니다. 그러나 bookmarkId의 null 체크 로직에서 undefined에 대한 검사도 추가하는 것이 좋습니다.
const handleLikeClick = () => { if (event.bookmarked) { - if (event.bookmarkId === null) { + if (event.bookmarkId === null || event.bookmarkId === undefined) { return; } deleteBookmark({ eventId: event.id, bookmarkId: event.bookmarkId }); } else { createBookmark(event.id); } };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (18)
src/app/routes/Router.tsx(2 hunks)src/app/routes/routes.ts(1 hunks)src/entities/event/api/event.ts(1 hunks)src/entities/event/hook/useEventHook.ts(1 hunks)src/entities/event/model/event.ts(1 hunks)src/features/bookmark/api/bookmark.ts(1 hunks)src/features/bookmark/model/bookmarkInformation.ts(1 hunks)src/features/bookmark/model/useBookmarkHook.ts(1 hunks)src/features/dashboard/model/EmailStore.tsx(2 hunks)src/features/dashboard/model/emailInformation.ts(2 hunks)src/pages/bookmark/ui/BookmarkPage.tsx(1 hunks)src/pages/dashboard/ui/mail/EmailPage.tsx(3 hunks)src/pages/event/ui/EventDetailsPage.tsx(3 hunks)src/shared/types/api/http-client.ts(1 hunks)src/shared/types/bottomBarType.ts(1 hunks)src/widgets/dashboard/ui/EmailModal.tsx(3 hunks)src/widgets/dashboard/ui/SelectTicketModal.tsx(2 hunks)src/widgets/dashboard/ui/SentMailCard.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (10)
src/widgets/dashboard/ui/SentMailCard.tsx (1)
src/features/dashboard/model/EmailStore.tsx (1)
useEmailStore(21-46)
src/entities/event/api/event.ts (1)
src/shared/types/api/http-client.ts (1)
axiosClient(6-13)
src/entities/event/hook/useEventHook.ts (2)
src/features/join/hooks/useUserHook.ts (1)
useUserInfo(5-10)src/entities/event/api/event.ts (1)
eventDetail(4-9)
src/widgets/dashboard/ui/EmailModal.tsx (1)
src/features/dashboard/model/emailInformation.ts (1)
EmailRequest(1-9)
src/app/routes/Router.tsx (1)
src/app/routes/routes.ts (1)
MAIN_ROUTES(1-11)
src/widgets/dashboard/ui/SelectTicketModal.tsx (1)
src/features/dashboard/model/EmailStore.tsx (1)
useEmailStore(21-46)
src/features/bookmark/api/bookmark.ts (2)
src/features/bookmark/model/bookmarkInformation.ts (1)
BookmarkResponse(1-11)src/shared/types/api/http-client.ts (1)
axiosClient(6-13)
src/features/bookmark/model/useBookmarkHook.ts (2)
src/features/bookmark/model/bookmarkInformation.ts (1)
BookmarkResponse(1-11)src/features/bookmark/api/bookmark.ts (3)
readBookmark(4-7)createBookmark(9-12)deleteBookmark(14-17)
src/pages/dashboard/ui/mail/EmailPage.tsx (1)
src/features/dashboard/model/emailInformation.ts (1)
EmailRequest(1-9)
src/pages/bookmark/ui/BookmarkPage.tsx (1)
src/features/bookmark/model/useBookmarkHook.ts (1)
useBookmarks(5-10)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: storybook
🔇 Additional comments (35)
src/widgets/dashboard/ui/SelectTicketModal.tsx (2)
18-18: 함수 추출 구조가 올바르게 확장되었습니다.이메일 스토어에서
setTargetType과setTicketId를 추가로 가져와서 티켓 선택 시 관련 정보를 설정할 수 있게 되었습니다.
27-28: 대상 유형과 티켓 ID 설정이 성공적으로 구현되었습니다.이제 티켓 선택 시 이메일 대상 유형을 'TICKET'으로 설정하고 선택된 티켓 ID를 저장하여 이메일 타겟팅이 올바르게 처리됩니다.
src/widgets/dashboard/ui/SentMailCard.tsx (2)
21-21: 불필요한 함수 참조가 제거되었습니다.
useEmailStore에서 가져오는 함수 목록이 유효한 함수들만 포함하도록 수정되었습니다.setReservationTime함수는EmailStore에 정의되어 있지 않아 제거된 것이 적절합니다.
37-37: 라벨 텍스트가 동적으로 표시되도록 개선되었습니다.하드코딩된 "[무료]" 문자열 대신
mail.targetName속성을 사용하여 동적인 타겟 이름을 표시하도록 변경되었습니다. 이는 다양한 대상 유형을 지원하는 데 필요한 개선입니다.src/pages/dashboard/ui/mail/EmailPage.tsx (4)
11-11: 타입 임포트가 추가되었습니다.
EmailRequest타입을 임포트하여 이메일 데이터 객체에 명시적 타입을 적용할 수 있게 되었습니다.
25-26: 이메일 스토어에서 티켓 관련 속성을 추출합니다.이메일 스토어에서
ticketId와targetType을 추출하여 이메일 발송 시 필요한 대상 정보를 활용할 수 있게 되었습니다.
47-54: 이메일 데이터에 타입이 명시적으로 적용되었습니다.
EmailRequest타입을 사용하여 이메일 데이터 객체에 명시적 타입을 적용하고,targetType을 데이터에 포함시켜 이메일 대상 유형을 명확히 하였습니다.
55-57: 조건부 티켓 ID 포함 로직이 추가되었습니다.
targetType이 'TICKET'인 경우에만ticketId를 이메일 데이터에 포함시키는 조건부 로직이 올바르게 구현되었습니다.src/widgets/dashboard/ui/EmailModal.tsx (4)
7-7: 타입 임포트가 추가되었습니다.
EmailRequest타입을 임포트하여 이메일 데이터 객체에 명시적 타입을 적용할 수 있게 되었습니다.
24-25: 이메일 스토어에서 티켓 관련 속성을 추출합니다.이메일 스토어에서
targetType과ticketId를 추출하여 이메일 발송 시 필요한 대상 정보를 활용할 수 있게 되었습니다.
46-53: 이메일 데이터에 타입과 대상 유형이 추가되었습니다.
EmailRequest타입을 사용하여 이메일 데이터 객체에 명시적 타입을 적용하고,targetType을 데이터에 포함시켜 이메일 대상 유형을 명확히 하였습니다.
54-56: 조건부 티켓 ID 포함 로직이 추가되었습니다.
targetType이 'TICKET'인 경우에만ticketId를 이메일 데이터에 포함시키는 조건부 로직이 올바르게 구현되었습니다. 이는EmailPage.tsx의 구현과 일관성을 유지합니다.src/features/dashboard/model/EmailStore.tsx (4)
9-10: 이메일 상태에 타겟 관련 속성 추가
EmailState인터페이스에targetType과ticketId속성이 추가되어 이메일 타겟팅 기능을 지원합니다. 이는emailInformation.ts의 변경사항과 일치합니다.
16-17: 타겟 관련 setter 메서드 추가타겟 타입과 티켓 ID를 설정하기 위한 setter 메서드가 적절히 추가되었습니다.
27-28: 타겟 관련 속성 초기화
targetType은 기본값으로 'ALL'로,ticketId는 0으로 초기화되어 있습니다. 이는 대부분의 경우 모든 사용자를 대상으로 이메일을 발송한다는 가정을 반영합니다.
34-35: 타겟 관련 setter 메서드 구현타겟 타입과 티켓 ID를 설정하는 setter 메서드가 간결하고 명확하게 구현되었습니다.
src/shared/types/api/http-client.ts (1)
45-45: 토큰 재발급 엔드포인트 경로가 변경되었습니다.인증 토큰 재발급 요청 URL이
/api/v1/auth/refresh에서/api/v1/oauth/reissue로 변경되었습니다. API 엔드포인트 변경이 모든 관련 코드에서 일관되게 적용되었는지 확인하세요.src/entities/event/model/event.ts (1)
5-5: 사용자 컨텍스트를 위한 userId 필드 추가
EventDetailRequest인터페이스에userId옵션 필드가 추가되었습니다. 이는 이벤트 상세 정보를 조회할 때 사용자별 맞춤 데이터(예: 북마크 상태)를 제공하기 위한 적절한 변경입니다.src/shared/types/bottomBarType.ts (1)
18-18: 하단 바 경로 업데이트'관심' 항목의 경로가
/interest에서/bookmark로 변경되었습니다. 이는 새로 추가된 북마크 기능의 라우팅 구조와 일치시키기 위한 적절한 변경입니다.src/entities/event/api/event.ts (2)
5-8: 이벤트 상세 API 요청에 userId 매개변수 추가이벤트 상세 정보 조회 시
userId를 쿼리 파라미터로 추가하여 사용자별 맞춤 데이터를 제공할 수 있도록 변경되었습니다. 이 변경은 사용자 컨텍스트를 포함한 이벤트 데이터 조회를 위한 적절한 구현입니다.
8-8: 응답 데이터 구조 참조 업데이트API 응답 구조 변경에 맞추어
response.data에서response.data.result로 참조가 변경되었습니다. 관련 데이터를 사용하는 모든 컴포넌트에서 이 변경이 반영되었는지 확인하세요.src/app/routes/routes.ts (2)
5-5: 경로 매개변수를 추가하여 동적 라우팅 구현이 잘 되었습니다.이벤트 상세 페이지 경로를 정적 경로에서 동적 경로로 변경하여
:id매개변수를 통해 특정 이벤트 정보를 로드할 수 있도록 개선했습니다.
10-10: 북마크 기능 라우트 추가가 잘 구현되었습니다.새로운 북마크 기능을 위한 경로가 적절히 추가되었습니다. 이 경로는 사용자가 관심 있는 이벤트 목록을 볼 수 있는 페이지로 연결됩니다.
src/app/routes/Router.tsx (1)
39-39: 북마크 페이지 컴포넌트 임포트가 적절히 추가되었습니다.북마크 기능 구현을 위한
BookmarkPage컴포넌트 임포트가 올바르게 추가되었습니다.src/entities/event/hook/useEventHook.ts (1)
4-4: 사용자 정보를 활용한 이벤트 조회 기능 개선이 잘 구현되었습니다.이벤트 상세 정보를 조회할 때 사용자 컨텍스트를 고려하도록 개선한 점이 좋습니다. 사용자 ID를 API 요청에 포함시켜 개인화된 정보(예: 북마크 상태)를 함께 받아올 수 있게 되었습니다. 또한 사용자 정보가 있을 때만 쿼리가 활성화되도록
enabled옵션을 추가한 것도 불필요한 API 호출을 방지하는 좋은 방법입니다.Also applies to: 8-8, 14-15
src/pages/bookmark/ui/BookmarkPage.tsx (1)
1-41: 북마크 페이지가 전반적으로 잘 구현되었습니다.북마크 페이지 컴포넌트가 필요한 기능을 모두 갖추고 있습니다. 헤더, 이벤트 카드 그리드, 하단 네비게이션 바 등의 UI 요소들이 적절히 배치되어 있습니다.
src/features/bookmark/model/bookmarkInformation.ts (1)
1-11: 인터페이스 정의가 잘 되어 있습니다.BookmarkResponse 인터페이스가 북마크된 이벤트 데이터 구조를 명확하게 정의하고 있습니다. 모든 속성에 대한 타입이 명시적으로 지정되어 있어 타입 안전성이 보장됩니다.
src/features/bookmark/api/bookmark.ts (2)
9-12: createBookmark 함수 구현이 적절합니다.이벤트 ID를 매개변수로 받아 해당 이벤트에 대한 북마크를 생성하는 API를 호출하고 있습니다. 응답 데이터를 반환하는 구조도 적절합니다.
14-17: deleteBookmark 함수 구현이 적절합니다.이벤트 ID와 북마크 ID를 매개변수로 받아 해당 북마크를 삭제하는 API를 호출하고 있습니다. 응답 데이터를 반환하는 구조도 적절합니다.
src/pages/event/ui/EventDetailsPage.tsx (4)
18-19: 이벤트 상세와 북마크 관련 훅 가져오기가 적절합니다.useEventDetail과 북마크 관련 훅을 import하여 컴포넌트에서 사용할 준비가 되었습니다.
25-25: 데이터 가져오기 로직이 훅으로 개선되었습니다.기존 상태 관리와 수동 API 호출 대신 useEventDetail 훅을 사용하여 이벤트 데이터를 가져오는 방식으로 개선되었습니다.
34-36: 북마크 관련 뮤테이션 훅 사용이 적절합니다.북마크 생성 및 삭제를 위한 뮤테이션 훅을 가져와 사용하고 있습니다.
84-84: 북마크 상태에 따른 아이콘 표시가 적절합니다.북마크 상태(event.bookmarked)에 따라 like 또는 liked 아이콘을 조건부로 표시하는 로직이 잘 구현되었습니다.
src/features/bookmark/model/useBookmarkHook.ts (2)
12-38: useCreateBookmark 훅 구현이 최적화되었습니다.React Query의 useMutation을 사용하여 북마크 생성 기능을 구현했으며, 낙관적 업데이트(Optimistic Update)를 통해 사용자 경험을 향상시켰습니다. 쿼리 취소, 이전 상태 저장, 오류 처리, 쿼리 무효화 등이 잘 구현되어 있습니다.
39-66: useDeleteBookmark 훅도 마찬가지로 잘 구현되었습니다.북마크 삭제 기능도 낙관적 업데이트를 포함하여 체계적으로 구현되었습니다. 매개변수 구조도 적절하게 처리되고 있습니다.
Yejiin21
left a comment
Yejiin21
left a comment
There was a problem hiding this comment.
Optimisitc UI까지 적용 잘 해주셨네요! 수고하셨습니다~
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/shared/lib/date.ts (1)
8-8: formatDate 함수의 일관성 개선 제안월과 일에 대해서도
padStart를 사용하여 한 자리 숫자 앞에 0을 추가하는 것이 좋을 것 같습니다. 이렇게 하면formatTime함수와 일관된 형식이 유지되며, 날짜 표시가 더 깔끔해집니다.- return `${year}년 ${month}월 ${day}일`; + const formattedMonth = month.toString().padStart(2, '0'); + const formattedDay = day.toString().padStart(2, '0'); + return `${year}년 ${formattedMonth}월 ${formattedDay}일`;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/pages/event/ui/EventDetailsPage.tsx(3 hunks)src/shared/lib/date.ts(1 hunks)src/widgets/dashboard/ui/SentMailCard.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/widgets/dashboard/ui/SentMailCard.tsx
- src/pages/event/ui/EventDetailsPage.tsx
🔇 Additional comments (1)
src/shared/lib/date.ts (1)
10-15: 새 formatTime 함수 구현이 잘 되었습니다시간 형식을 일관되게 표시하기 위해
padStart를 사용하여 한 자리 숫자 앞에 0을 추가한 것이 좋습니다. 이 함수는 이벤트 시간과 이메일 전송 시간을 표시하는 데 유용하게 사용될 것입니다.
2 participants
관심 있는 이벤트 페이지
좋아요 생성
좋아요 삭제
예약 메일 targetName으로 변경 & 시간 형식 수정