Feat(client): HASHI-107 예약 상세 조회 및 취소 API 연동 - #91

📌 Summary

예약 상세 페이지의 예약 상세 조회/예약 취소 API를 연동하고, 공통 API 클라이언트에 인증 헤더 및 성공 응답 envelope 처리 기능을 추가했습니다.

Jira: HASHI-107

📚 Tasks

• 공통 API 클라이언트에 accessToken 기반 Authorization 헤더 주입 로직 추가
• 성공 응답의 message를 사용할 수 있도록 requestSuccessResponse 추가
• 예약 상세 조회 API 연동
  • GET /api/v1/reservations/{reservationId}
• 예약 취소 API 연동
  • POST /api/v1/reservations/{reservationId}/cancel
• 예약 취소 성공 시 서버 응답 message로 toast 표시
• 예약 취소 실패 시 공통 mutation error handler를 통해 실패 toast 표시
• 예약 취소 요청 중 취소 확인/닫기 버튼 비활성화
• 취소 요청 중 모달이 닫히지 않도록 방어 처리
• 취소된 예약(CANCELED) 직접 URL 접근 시 NotFoundPage 표시
• 예약 상세 mock 데이터 제거 및 API 응답 기반 view model 생성
• API, 페이지 동작, 공통 request 관련 테스트 추가 및 수정

🔎 Description

공통 API 처리

apiClient에서 localStorage의 accessToken을 읽어 Authorization: Bearer {token} 헤더를 자동으로 주입하도록 수정했습니다.

• 기존 request 함수는 성공 응답의 data만 반환하는 구조였기 때문에, 예약 취소 성공 toast에 필요한 서버 응답 message를 사용할 수 없었습니다. 이를 위해 성공 응답 envelope 전체를 반환하는 requestSuccessResponse를 추가했습니다.
• 기존 request의 반환 형태는 유지해서 기존 API 호출부의 동작은 변경하지 않았습니다.

예약 상세 조회

예약 상세 페이지는 route param의 reservationId를 양의 정수로 검증한 뒤, 유효한 경우에만 예약 상세 조회 API를 호출합니다.

• 유효하지 않은 reservationId이거나 서버에서 404 응답을 내려주는 경우 NotFoundPage를 표시합니다. 또한 서버가 취소된 예약(reservationStatus: CANCELED)을 정상 응답하더라도, 상세 화면 표시 대상이 아니므로 NotFoundPage로 처리했습니다.
• API 응답은 createReservationDetailViewModel에서 UI에 필요한 형태로 변환합니다.

예약 취소

예약 취소 버튼 클릭 시 확인 모달을 띄우고, 모달에서 취소하기를 누르면 예약 취소 API를 호출합니다.

• 예약 취소 성공 시 서버 응답의 message를 toast로 표시한 뒤, 예약 정보 페이지의 진행 중 탭(/my-reservations?status=IN_PROGRESS)으로 이동합니다.
• 예약 취소 실패 시에는 공통 mutation error handler에서 실패 toast를 표시하므로, 페이지 hook에서는 별도의 실패 toast를 중복으로 띄우지 않습니다. 실패 시 모달 닫기와 페이지 이동도 수행하지 않습니다.
• 예약 취소 요청이 진행 중일 때는 취소하기와 닫기 버튼을 모두 비활성화하고, 모달 닫힘 요청도 무시하도록 처리해 중복 요청과 중간 닫힘을 방지했습니다.

구조 정리

예약 상세 API 연동 관련 파일은 다음 책임으로 분리했습니다.

• api: 서버 요청 함수
• hooks: React Query query/mutation hook 및 페이지 상태 hook
• utils/createReservationDetailViewModel: API 응답을 UI view model로 변환
• utils/reservationDetailPolicy: route param 검증 및 상세 접근 정책 처리

불필요해진 mock 데이터 파일은 제거했습니다.

✅ Verification

• pnpm --filter @hashi/client test
• pnpm --filter @hashi/client typecheck
• pnpm --filter @hashi/client lint
• git diff --check

👀 To Reviewer

• 예약 취소 실패 toast는 페이지에서 직접 처리하지 않고 공통 mutation error handler를 따르도록 했습니다.
• 또한 취소된 예약은 서버에서 상세 응답이 내려오더라도 클라이언트 정책상 NotFoundPage로 처리했습니다.

📸 Screenshot