[✨Feature/158] 체험 예약 내역 승인, 거절 api 연결#214
Conversation
Summary of ChangesHello @yujin-fe, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 풀 리퀘스트는 체험 예약 관리 시스템에 중요한 기능을 추가합니다. 사용자가 자신의 활동에 대한 예약 요청을 승인하거나 거절할 수 있도록 백엔드 API와 프론트엔드 UI를 연결하는 데 중점을 둡니다. 이를 통해 예약 관리 프로세스의 효율성을 높이고, 호스트가 예약 상태를 직접 제어할 수 있는 기능을 제공합니다. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![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
체험 예약 승인 및 거절 API 연동 작업을 해주셨네요. 전반적으로 ReservationListByStatus 컴포넌트를 상태를 갖지 않는 순수 UI 컴포넌트로 리팩터링하여 부모 컴포넌트에서 데이터 흐름을 관리하도록 변경한 점이 인상적입니다. 코드 구조가 더 명확해진 것 같습니다.
몇 가지 개선점을 제안드립니다. PR 설명에 언급해주신 데이터 불일치 문제를 해결하기 위해 react-query의 invalidateQueries를 사용하는 방안을 제안했습니다. 또한, 사용자 경험을 위해 alert 대신 토스트 알림과 같은 전역 에러 핸들링을 적용하고, 코드에 남아있는 console.log를 제거하는 것이 좋겠습니다. 자세한 내용은 각 파일에 남긴 코멘트를 확인해주세요.
| try { | ||
| await updateReservationApproval(activityId, reservationId, req); | ||
| await Promise.all([dailyReservationRefetch(), reservationListRefetch()]); | ||
| } catch (error) { | ||
| alert(error); | ||
| } |
There was a problem hiding this comment.
PR 설명에 언급된 간헐적인 데이터 불일치 문제를 해결하고 코드를 개선하기 위해, refetch를 직접 호출하는 대신 queryClient.invalidateQueries를 사용하는 것을 권장합니다. invalidateQueries는 특정 쿼리 키와 일치하는 쿼리를 무효화하여 react-query가 데이터를 다시 가져오게 하는, 더 안정적이고 선언적인 방법입니다. useQueryClient가 이미 선언되어 있으니 바로 활용할 수 있습니다.
또한, catch 블록에서 alert()로 에러를 표시하는 것은 사용자 경험에 좋지 않습니다. 일반적인 API 오류는 토스트 알림과 같은 전역 메커니즘으로 처리하는 것이 좋습니다. (Rule: Handle generic, non-field-specific API errors with a global mechanism like a toast notification, rather than assigning the error to an arbitrary input field.) 토스트 메시지 등 더 나은 방식의 피드백을 제공하는 것을 고려해보세요.
try {
await updateReservationApproval(activityId, reservationId, req);
queryClient.invalidateQueries({ queryKey: ['DailyReservationStatus', activityId, formatDate] });
queryClient.invalidateQueries({ queryKey: ['ReservationListByStatus'] });
} catch (error) {
console.error('예약 상태 업데이트 실패:', error);
// TODO: 사용자에게 토스트 메시지 등으로 에러 알림
}
References
- Handle generic, non-field-specific API errors with a global mechanism like a toast notification, rather than assigning the error to an arbitrary input field.
There was a problem hiding this comment.
/gemini
이것도 해봤는데 안되던데 결국 데이터 다시 불러오는건 똑같잖아
There was a problem hiding this comment.
yujin-fe님, 좋은 질문입니다. invalidateQueries와 refetch 모두 최종적으로는 데이터를 다시 불러오는 결과를 가져오는 것은 맞습니다. 하지만 react-query의 핵심 개념과 더 나은 데이터 관리 측면에서 invalidateQueries를 사용하는 것이 권장됩니다.
주요 차이점은 다음과 같습니다:
queryClient.invalidateQueries(권장): 이는 선언적인 방식입니다. 특정queryKey에 해당하는 모든 쿼리를 '오래된(stale)' 상태로 표시하라고react-query에게 지시합니다.react-query는 이 지시를 받고 해당 쿼리를 구독하고 있는 모든 컴포넌트에서 데이터를 자동으로 다시 가져오도록 관리합니다. 이는 여러 컴포넌트가 동일한 데이터를 사용하고 있을 때 데이터 일관성을 유지하는 데 매우 효과적입니다. 캐시 관리와 최적화는react-query가 담당하게 됩니다.refetch: 이는 특정useQuery훅 인스턴스에 대해 데이터를 즉시 다시 가져오도록 강제하는 명령적인 방식입니다. 해당refetch를 호출한 특정 쿼리 인스턴스만 영향을 받으며, 다른 곳에서 동일한queryKey를 사용하는 쿼리들은 자동으로 업데이트되지 않을 수 있습니다.
만약 invalidateQueries가 작동하지 않는다고 느끼셨다면, queryKey가 정확히 일치하는지 확인해 볼 필요가 있습니다. react-query는 queryKey를 기반으로 쿼리를 식별하므로, invalidateQueries에 전달하는 queryKey가 useQuery에서 사용된 queryKey와 정확히 일치해야 합니다.
데이터 일관성 문제를 해결하고 react-query의 이점을 최대한 활용하기 위해 invalidateQueries 방식을 다시 고려해 보시는 것을 추천합니다.
또한, catch 블록에서 alert() 대신 토스트 알림과 같은 사용자 친화적인 방식으로 에러를 처리하는 것도 사용자 경험을 위해 중요합니다. 이 부분도 함께 개선하는 것을 권장합니다.
try {
await updateReservationApproval(activityId, reservationId, req);
queryClient.invalidateQueries({ queryKey: ['DailyReservationStatus', activityId, formatDate] });
queryClient.invalidateQueries({ queryKey: ['ReservationListByStatus'] });
} catch (error) {
console.error('예약 상태 업데이트 실패:', error);
// TODO: 사용자에게 토스트 메시지 등으로 에러 알림
}| try { | |
| await updateReservationApproval(activityId, reservationId, req); | |
| await Promise.all([dailyReservationRefetch(), reservationListRefetch()]); | |
| } catch (error) { | |
| alert(error); | |
| } | |
| try { | |
| await updateReservationApproval(activityId, reservationId, req); | |
| queryClient.invalidateQueries({ queryKey: ['DailyReservationStatus', activityId, formatDate] }); | |
| queryClient.invalidateQueries({ queryKey: ['ReservationListByStatus'] }); | |
| } catch (error) { | |
| console.error('예약 상태 업데이트 실패:', error); | |
| // TODO: 사용자에게 토스트 메시지 등으로 에러 알림 | |
| } |
2 participants
✅ PR 체크리스트
🔗 이슈 번호
✨ 작업한 내용
💁 리뷰 요청 / 코멘트
💡 참고사항