feat: 예약 카드에 방문 확정 버튼 추가#46
Conversation
- markReservationVisited API 호출 함수 추가 - useMarkVisitedMutation React Query 훅 추가 - 방문 예정 탭 카드에 [방문 확정] 버튼 + 클릭 핸들러 추가 - 성공 시 토스트 + 예약 목록 자동 새로고침
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![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
This pull request introduces a 'Confirm Visit' feature, allowing users to manually mark reservations as visited. The changes include a new API endpoint, a React Query mutation, and UI updates to the reservation card. Feedback focuses on ensuring the 'Confirm Visit' button is only visible for 'CONFIRMED' reservations to prevent API errors and adding a disabled state during the mutation to avoid duplicate submissions.
| <button | ||
| onClick={() => | ||
| router.push( | ||
| `/stores/${reservation.storeId}?changeFrom=${reservation.id}` | ||
| ) | ||
| } | ||
| className="flex-1 rounded-lg border border-blue-200 py-2 text-sm font-medium text-blue-500 hover:bg-blue-50" | ||
| > | ||
| 예약 변경 | ||
| </button> | ||
| <button | ||
| onClick={() => onCancel(reservation.id)} | ||
| className="flex-1 rounded-lg border border-red-200 py-2 text-sm font-medium text-red-500 hover:bg-red-50" | ||
| onClick={() => onMarkVisited(reservation.id)} | ||
| className="w-full rounded-lg bg-orange-500 py-2 text-sm font-medium text-white hover:bg-orange-600" | ||
| > | ||
| 예약 취소 | ||
| 방문 확정 | ||
| </button> |
There was a problem hiding this comment.
isUpcoming 조건에 의해 PENDING 상태에서도 "방문 확정" 버튼이 노출되지만, reservationApi.ts의 주석에 따르면 백엔드는 CONFIRMED 상태에서만 이 작업을 허용합니다. PENDING 상태에서 버튼을 클릭하면 API 에러가 발생할 수 있으므로, 버튼 노출 조건을 reservation.status === 'CONFIRMED'로 제한하는 것이 좋습니다.
{reservation.status === 'CONFIRMED' && (
<button
onClick={() => onMarkVisited(reservation.id)}
className="w-full rounded-lg bg-orange-500 py-2 text-sm font-medium text-white hover:bg-orange-600"
>
방문 확정
</button>
)}
| onClick={() => onCancel(reservation.id)} | ||
| className="flex-1 rounded-lg border border-red-200 py-2 text-sm font-medium text-red-500 hover:bg-red-50" | ||
| onClick={() => onMarkVisited(reservation.id)} | ||
| className="w-full rounded-lg bg-orange-500 py-2 text-sm font-medium text-white hover:bg-orange-600" |
There was a problem hiding this comment.
"방문 확정" 버튼 클릭 시 API 요청이 진행되는 동안 버튼을 비활성화하는 처리가 누락되어 있습니다. 사용자의 중복 클릭으로 인한 불필요한 API 요청을 방지하기 위해 useMarkVisitedMutation의 isPending 상태를 활용하여 disabled 속성을 추가하는 것을 권장합니다.
- API 진행 중 useMarkVisitedMutation의 isPending으로 버튼 비활성화 - disabled 스타일 및 "처리 중..." 텍스트로 시각적 피드백 추가 - 코드 리뷰 피드백 반영
…into feat/#44-visit-button
1 participant
📢 기능 설명
필요시 실행결과 스크린샷 첨부
연결된 issue
연결된 issue를 자동을 닫기 위해 아래 {이슈넘버}를 입력해주세요.
close #{44}
✅ 체크리스트