리사이쿨 예약 데이터 조회 에러

📌 결제 페이지 트러블 슈팅 정리 (Recychool)

문제

/payment/1로 접근 시 결제 페이지가 빈 화면으로 렌더링됨

Swagger에서 /private/payment/page?reserveId=1 API는 정상 응답

원인

라우팅 방식 불일치

라우터: payment/:reserveId (path parameter)

프론트: useSearchParams()로 쿼리스트링(?reserveId=)을 읽고 있었음
→ reserveId가 null로 전달됨

예약 ID 상태 누락

예약 조회 후 reserve state에 id를 저장하지 않아

결제 완료 요청 시 reserve.id가 undefined

해결

useSearchParams → useParams로 변경하여 path param에서 reserveId 추출

예약 조회 응답(PaymentPageResponseDTO)에서 reserveId를 reserve.id로 state에 저장

데이터 로딩 전 빈 화면 방지를 위해 간단한 로딩 가드 추가

결과

결제 페이지 정상 렌더링

예약 조회 → 결제 요청 → 결제 완료 흐름 정상 동작