Fix/139 3차 QA 수정 #141
Fix/139 3차 QA 수정 #141
Conversation
Walkthrough예약 리뷰 생성 및 체험 삭제와 관련된 캐시 무효화 및 에러 메시지 처리 로직이 개선되었습니다. 리뷰 생성 시 연관된 액티비티 쿼리 캐시를 무효화하도록 변경되었고, 체험 삭제 실패 시 HTTP 상태 코드에 따라 상세한 토스트 메시지가 표시되도록 수정되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ReservationsPage
participant ReservationQueriesHook
participant ActivityQueriesHook
participant QueryClient
User->>ReservationsPage: 리뷰 작성 확인 (handleReviewConfirm)
ReservationsPage->>ReservationQueriesHook: useCreateReview.mutate()
ReservationQueriesHook-->>ReservationsPage: onSuccess
ReservationsPage->>ActivityQueriesHook: invalidateActivityQueries(activityId)
ActivityQueriesHook->>QueryClient: 관련 쿼리 invalidate
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Suggested labels
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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. 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: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
src/app/(with-header)/mypage/reservations/page.tsx(2 hunks)src/hooks/useMyActivitiesQueries.ts(2 hunks)src/hooks/useReservationQueries.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/hooks/useReservationQueries.ts (1)
src/hooks/useDashboardQueries.ts (4)
queryClient(95-143)_(165-185)updatedReservation(109-137)queryClient(146-191)
src/app/(with-header)/mypage/reservations/page.tsx (1)
src/hooks/useReservationQueries.ts (1)
invalidateActivityQueries(91-108)
🔇 Additional comments (4)
src/hooks/useMyActivitiesQueries.ts (2)
13-13: 적절한 import 추가AxiosError 타입을 올바르게 import하여 타입 안전성을 보장했습니다.
58-76: 체험 삭제 오류 처리 개선 완료HTTP 상태 코드별로 구체적인 토스트 메시지를 제공하도록 개선되었습니다. 이는 PR 목표인 "체험 삭제 시 토스트 메시지 수정"과 정확히 일치합니다. 각 상태 코드에 대한 메시지가 사용자 친화적이고 명확합니다.
src/app/(with-header)/mypage/reservations/page.tsx (2)
8-8: 새로운 캐시 무효화 함수 import후기 작성 후 실시간 업데이트를 위한 함수를 올바르게 import했습니다.
106-121: 후기 작성 후 캐시 무효화 로직 개선후기 작성 성공 후 관련 액티비티 쿼리들을 무효화하여 실시간 업데이트를 제공하는 로직이 잘 구현되었습니다. 이는 PR 목표와 정확히 일치합니다.
다만
invalidateActivityQueries함수의 설계 이슈로 인해 이 코드도 수정이 필요할 수 있습니다:onSuccess: () => { // 성공 후 추가 쿼리 무효화 if (reservation?.activity.id) { - invalidateActivityQueries(reservation.activity.id); + invalidateActivityQueries(queryClient, reservation.activity.id); } },
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
src/components/Dropdown.tsx (1)
187-194: 접근성 개선이 필요합니다.정적 분석 도구에서 지적한 대로,
ul요소에listbox역할을 부여하는 것은 접근성 표준에 맞지 않습니다.다음과 같이 수정하는 것을 권장합니다:
- <ul - role='listbox' + <div + role='listbox' className={cn( 'p-8', disableScroll ? '' : 'max-h-240 overflow-auto', listboxClassName, )} >
♻️ Duplicate comments (1)
src/hooks/useReservationQueries.ts (1)
91-108: React 훅 규칙 위반으로 인한 심각한 오류가 있습니다.
invalidateActivityQueries함수가 React 컴포넌트나 커스텀 훅이 아닌 곳에서useQueryClient를 호출하고 있어 런타임 오류가 발생합니다.다음과 같이 수정하여 queryClient를 매개변수로 받도록 변경해주세요:
-export const invalidateActivityQueries = (activityId: number) => { - const queryClient = useQueryClient(); +export const invalidateActivityQueries = (queryClient: QueryClient, activityId: number) => {그리고 이 함수를 호출하는 모든 곳에서 queryClient 인스턴스를 전달하도록 수정해야 합니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (5)
src/app/(with-header)/mypage/dashboard/page.tsx(3 hunks)src/components/Dropdown.tsx(10 hunks)src/hooks/useActivityOptions.ts(1 hunks)src/hooks/useReservationQueries.ts(1 hunks)src/types/dropdownTypes.ts(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/hooks/useReservationQueries.ts (1)
src/hooks/useDashboardQueries.ts (5)
queryClient(95-143)_(165-185)updatedReservation(109-137)queryClient(146-191)reservationId(157-160)
src/components/Dropdown.tsx (2)
src/hooks/useOutsideClick.ts (1)
useOutsideClick(21-49)src/types/dropdownTypes.ts (1)
DropdownOption(3-6)
🪛 GitHub Actions: CI
src/hooks/useActivityOptions.ts
[warning] 3-3: Run autofix to sort these imports! (simple-import-sort/imports)
src/app/(with-header)/mypage/dashboard/page.tsx
[warning] 3-142: Run autofix to sort imports, fragments should contain more than one child, props sorting, callbacks ordering, and boolean attribute value must be omitted (simple-import-sort/imports, react/jsx-no-useless-fragment, react/jsx-sort-props, react/jsx-boolean-value)
src/hooks/useReservationQueries.ts
[error] 92-92: React Hook "useQueryClient" is called in function "invalidateActivityQueries" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". (react-hooks/rules-of-hooks)
src/components/Dropdown.tsx
[warning] 3-205: Run autofix to sort imports, callbacks ordering, props sorting, and usage of array index in keys issues (simple-import-sort/imports, react/jsx-sort-props, react/no-array-index-key)
🪛 Biome (2.1.2)
src/components/Dropdown.tsx
[error] 196-196: The elements with this role can be changed to the following elements:
For examples and more information, see WAI-ARIA Roles
(lint/a11y/useSemanticElements)
[error] 196-196: The HTML element ul is non-interactive and should not have an interactive role.
Replace ul with a div or a span.
Unsafe fix: Remove the role attribute.
(lint/a11y/noNoninteractiveElementToInteractiveRole)
🔇 Additional comments (11)
src/types/dropdownTypes.ts (2)
3-6: 새로운 DropdownOption 인터페이스가 잘 정의되었습니다.
드롭다운 옵션에 대한 명확한 타입 정의를 제공하여 코드의 타입 안전성을 향상시킵니다.
24-24: optionData 속성 추가로 유연성이 향상되었습니다.
기존 options 배열과 함께 더 풍부한 옵션 데이터를 지원할 수 있게 되었습니다.
src/hooks/useReservationQueries.ts (1)
77-81: 주석 업데이트가 적절합니다.
후기 작성 후 관련 쿼리 무효화에 대한 더 일반적인 설명으로 변경되었습니다.
src/hooks/useActivityOptions.ts (2)
18-29: activityOptions 생성 로직이 잘 개선되었습니다.
더 일관된 구조로 변경되어 드롭다운 컴포넌트와의 통합이 개선되었습니다.
32-51: 활동 변경 시 캐시 무효화 로직이 적절합니다.
선택된 활동이 변경될 때 관련 쿼리들을 무효화하여 최신 데이터를 보장하는 로직이 잘 구현되었습니다.
src/app/(with-header)/mypage/dashboard/page.tsx (3)
23-29: useActivityOptions 훅 사용법이 개선되었습니다.
더 간결하고 일관된 구조로 변경되어 코드 가독성이 향상되었습니다.
43-44: 선택된 활동 값 처리가 단순화되었습니다.
문자열 기반의 값 처리로 변경되어 더 직관적이고 일관된 로직이 되었습니다.
120-122: 드롭다운 컴포넌트 사용법이 새로운 구조에 맞게 업데이트되었습니다.
optionData 속성을 사용하여 더 풍부한 옵션 데이터를 제공하도록 개선되었습니다.
src/components/Dropdown.tsx (3)
31-31: optionData 지원 추가로 컴포넌트 유연성이 크게 향상되었습니다.
기존 options와의 호환성을 유지하면서 더 풍부한 옵션 데이터를 지원할 수 있게 되었습니다.
Also applies to: 51-55
62-64: 표시 값 계산 로직이 잘 구현되었습니다.
optionData 사용 여부에 따라 적절한 표시 텍스트를 선택하는 로직이 명확합니다.
73-82: 선택 핸들러가 새로운 구조에 맞게 잘 업데이트되었습니다.
DropdownOption 객체를 받아 value를 추출하는 방식으로 일관된 처리가 가능해졌습니다.
| return ( | ||
| <li | ||
| key={option} | ||
| key={`${optionItem.value}-${index}`} |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
키 값으로 배열 인덱스 사용을 개선해주세요.
배열 인덱스를 키로 사용하면 성능 문제가 발생할 수 있습니다.
다음과 같이 수정하는 것을 권장합니다:
- key={`${optionItem.value}-${index}`}
+ key={optionItem.value}📝 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.
| key={`${optionItem.value}-${index}`} | |
| key={optionItem.value} |
🤖 Prompt for AI Agents
In src/components/Dropdown.tsx at line 201, avoid using the array index as part
of the key prop because it can cause performance issues. Instead, use a unique
and stable identifier from the optionItem itself, such as optionItem.value
alone, assuming it is unique. Update the key to use only optionItem.value or
another unique property without appending the index.
evaain706
left a comment
evaain706
left a comment
There was a problem hiding this comment.
수정 수고많으셨습니다! 코드분리와 에러 핸들링도 잘 해주신것같아요!
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/app/(with-header)/mypage/reservations/page.tsx(3 hunks)src/hooks/useReservationQueries.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/app/(with-header)/mypage/reservations/page.tsx (1)
src/hooks/useReservationQueries.ts (1)
useInvalidateActivityQueries(91-110)
src/hooks/useReservationQueries.ts (1)
src/hooks/useDashboardQueries.ts (5)
_(165-185)queryClient(95-143)updatedReservation(109-137)queryClient(146-191)activityId(64-92)
🔇 Additional comments (4)
src/hooks/useReservationQueries.ts (2)
77-77: 주석 개선이 적절합니다.구체적인 내용에서 일반적인 설명으로 변경하여 더 명확해졌습니다.
91-110: 쿼리 무효화 훅이 잘 구현되었습니다.새로운
useInvalidateActivityQueries훅이 적절하게 구현되었습니다:
- React 훅 컨텍스트 내에서
useQueryClient를 올바르게 사용하고 있습니다- 액티비티 관련 여러 쿼리 키를 체계적으로 무효화합니다
activityId매개변수가 특정 액티비티 쿼리에 적절히 활용됩니다이전 리뷰에서 지적된 React 훅 사용 문제가 해결되었습니다.
src/app/(with-header)/mypage/reservations/page.tsx (2)
8-8: 새로운 훅 임포트가 적절합니다.
useInvalidateActivityQueries훅을 올바르게 임포트했습니다.
58-59: 훅 초기화가 올바릅니다.쿼리 무효화 훅을 적절하게 초기화했습니다.
| const reservation = allReservations.find( | ||
| (r) => r.id === reviewModal.reservationId, | ||
| ); | ||
|
|
||
| createReviewMutation.mutate( | ||
| { | ||
| reservationId: reviewModal.reservationId, | ||
| data: { rating, content }, | ||
| }, | ||
| { | ||
| onSuccess: () => { | ||
| setReviewModal({ | ||
| isOpen: false, | ||
| reservationId: null, | ||
| activityTitle: null, | ||
| activityImage: null, | ||
| activityDate: null, | ||
| activityTime: null, | ||
| headCount: null, | ||
| totalPrice: null, | ||
| }); | ||
| // 성공 후 추가 쿼리 무효화 | ||
| if (reservation?.activity.id) { | ||
| invalidateActivityQueries(reservation.activity.id); | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
리뷰 생성 후 캐시 무효화 로직이 잘 구현되었습니다.
후기 작성 성공 시 관련 액티비티 쿼리들을 무효화하여 실시간 업데이트를 보장합니다. 예약 정보를 찾아 액티비티 ID를 전달하는 로직도 적절합니다.
다만 reservation을 찾지 못할 경우에 대한 방어 로직을 고려해보세요.
선택적 개선사항으로 다음과 같은 방어 로직을 추가할 수 있습니다:
onSuccess: () => {
// 성공 후 추가 쿼리 무효화
- if (reservation?.activity.id) {
+ if (reservation?.activity?.id) {
invalidateActivityQueries(reservation.activity.id);
+ } else {
+ console.warn('예약 정보를 찾을 수 없어 캐시 무효화를 건너뜁니다.');
}
},📝 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 reservation = allReservations.find( | |
| (r) => r.id === reviewModal.reservationId, | |
| ); | |
| createReviewMutation.mutate( | |
| { | |
| reservationId: reviewModal.reservationId, | |
| data: { rating, content }, | |
| }, | |
| { | |
| onSuccess: () => { | |
| setReviewModal({ | |
| isOpen: false, | |
| reservationId: null, | |
| activityTitle: null, | |
| activityImage: null, | |
| activityDate: null, | |
| activityTime: null, | |
| headCount: null, | |
| totalPrice: null, | |
| }); | |
| // 성공 후 추가 쿼리 무효화 | |
| if (reservation?.activity.id) { | |
| invalidateActivityQueries(reservation.activity.id); | |
| } | |
| const reservation = allReservations.find( | |
| (r) => r.id === reviewModal.reservationId, | |
| ); | |
| createReviewMutation.mutate( | |
| { | |
| reservationId: reviewModal.reservationId, | |
| data: { rating, content }, | |
| }, | |
| { | |
| onSuccess: () => { | |
| // 성공 후 추가 쿼리 무효화 | |
| if (reservation?.activity?.id) { | |
| invalidateActivityQueries(reservation.activity.id); | |
| } else { | |
| console.warn('예약 정보를 찾을 수 없어 캐시 무효화를 건너뜁니다.'); | |
| } | |
| }, | |
| }, | |
| ); |
🤖 Prompt for AI Agents
In src/app/(with-header)/mypage/reservations/page.tsx around lines 109 to 123,
the code finds a reservation by ID but lacks handling for the case when no
matching reservation is found. Add a defensive check to verify that reservation
exists before accessing its properties, such as reservation.activity.id, to
prevent runtime errors. If reservation is undefined, skip the cache invalidation
logic or handle the case appropriately.
📌 변경 사항 개요
체험 삭제 토스트 메시지 수정, 후기 작성 후 실시간 업데이트
📝 상세 내용
체험 삭제 토스트 메시지 수정, 후기 작성 후 실시간 업데이트(쿼리 키 추가)
🔗 관련 이슈
🖼️ 스크린샷(선택사항)
💡 참고 사항
Summary by CodeRabbit
버그 수정
기타