feat: 예약 API 연동

[jjjsun]

💡 개요

예약 플로우 전체에 대해 서버 API 기반으로 동작하도록 연동하고, 토스 결제 위젯 기반 결제 플로우 및 실패 완료 UX 구현

🔢 관련 이슈 링크

• Closes [feat] 예약 플로우 조회 API 연동 #53

💻 작업내용

• 예약 플로우 조회/확정 API 연동 (식당 상세, 메뉴, 예약 생성)
• 결제 주문 생성 API 연동
• TOSS 결제 위젯 방식 적용 및 결제 승인 API 연동
• 결제 성공/실패 페이지 UI 구현 및 라우팅 처리
• 결제 실패 사유 표시
• 결제 중복 confirm 호출 방지 처리
• 예약 완료 화면 구성 및 5초후 예약목록으로 자동이동하도록 설정
• 예약 완료 후에 bookingId 기반 예약 목록 하이라이트 이동
• 사용자 인증 정보 기반 userId 연동
• 결제 위젯 customerKey에 userId 적용
• axios 공통 에러 처리 규칙에 맞춘 결제 에러 핸들링

📌 변경사항PR

• FEAT: 새로운 기능 추가
• FIX: 버그/오류 수정
• CHORE: 코드/내부 파일/설정 수정
• DOCS: 문서 수정(README 등)
• REFACTOR: 코드 리팩토링 (기능 변경 없음)
• TEST: 테스트 코드 추가/수정
• STYLE: 스타일 변경(포맷, 세미콜론 등)

🤔 추가 논의하고 싶은 내용

• 지금 로그인 안하고 식당 검색페이지에서 예약 진행하면, 예약금 결제하기 페이지에서 에러 뜨도록 되어있는데, 로그인 안하면 아예 식당 정보나오는 페이지만 나오도록하고, 예약하기 누르면, 홈페이지로 돌아가서 로그인 모달이 열리도록 설정하면 어떨까요?

• 결제부분 UI 수정 진행중입니다. 2/10일내 해결예정 ⇒ 수정완료

• 결제 완료 모달 undefined나오는것도 2/10내에 해결예정입니다 ⇒ 수정완료

• 현재 SDK 로드/타일 요청이 정상(200)으로 나오는데, 지도 캔버스가 랜더링 되지 않는 문제는 미해결입니다. 해결해보겠습니다! ⇒ 수정완료

• 현재 로그인 후에 아무버튼이나 클릭하면 다시 로그아웃되는현상이 발생함 ⇒ 수정완료

✅ 체크리스트

• 브랜치는 잘 맞게 올렸는지
• 관련 이슈를 맞게 연결했는지
• 로컬에서 정상 동작을 확있했는지
• 충돌이 없다(또는 브랜치에서 충돌 해결 후 PR 업데이트 완료)

Summary by CodeRabbit

• 새로운 기능

  • 결제 성공/실패 페이지와 예약 완료 페이지 추가 및 결제 흐름(Toss) 연동
  • 서버 기반 매장 상세·메뉴 조회, 가용 시간/테이블 조회 및 예약 생성 기능 추가

• 개선사항

  • 인증 상태 자동 동기화 및 사용자 식별 개선
  • API 응답·오류 처리와 기본 오류 메시지 개선
  • 예약 모달·지도·테이블 선택 UX 및 타입 안정화

• 제거

  • 여러 내부 목 데이터와 테스트용 모듈 제거

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/components/reservation/modals/PaymentModal.tsx`:
- Around line 178-181: The current handleBack calls onOpenChange(false) before
onBack, which can cause the modal component to unmount (return null) before
onBack runs; change handleBack to call onBack() first, then onOpenChange(false)
(or, if unmount timing must be controlled by the parent, move the back-handling
into the parent), so update the handleBack function to invoke onBack() prior to
calling onOpenChange(false) to guarantee onBack executes.

In `@src/components/reservation/modals/ReservationModal.tsx`:
- Around line 180-184: The backdrop button currently calls onOpenChange(false)
directly (button with aria-label "모달 닫기"), while the X button uses
handleRequestClose (from useConfirmClose) to show a confirmation; make backdrop
clicks consistent by invoking the same confirmation flow: replace the direct
onOpenChange(false) handler on the backdrop button with a call to
handleRequestClose (or a small wrapper that calls handleRequestClose) so both
closing mechanisms use the same confirmation logic; alternatively, if immediate
backdrop-close is intended, add an explicit prop like allowBackdropClose and
gate the backdrop handler to call onOpenChange(false) only when that prop is
true, keeping handleRequestClose for the X button.

🧹 Nitpick comments (5)

src/components/reservation/modals/PaymentModal.tsx (2)

127-129: 위젯 초기화 실패 시 무조건 /payment/fail로 이동하면 모달이 닫히면서 사용자 맥락이 사라져요

VITE_TOSS_CLIENT_KEY 누락, 네트워크 에러, 로그인 만료 등 다양한 원인이 catch에 걸리는데, 모두 nav("/payment/fail", { replace: true })로 페이지 이동시키면 사용자가 예약 흐름 전체를 처음부터 다시 해야 해요.

환경 변수 누락 같은 개발 오류와 일시적 네트워크 에러는 구분해서, 후자는 모달 안에서 재시도 안내를 주는 게 UX상 더 나을 것 같아요. 지금 당장은 아니더라도 TODO로 남겨두면 좋겠습니다.

---

48-52: Toss SDK 관련 ref 타입이 전부 any예요

paymentMethodWidgetRef, agreementWidgetRef, widgetsRef 모두 useRef<any>인데, Toss SDK에서 타입을 제공한다면 적용하면 자동완성과 타입 안전성이 올라가요. 당장 급하진 않지만 참고해주세요.

src/components/reservation/modals/ReservationModal.tsx (3)

18-18: useStoreDetail import가 남아있어요

이전 리뷰에서 useStoreDetail 중복 호출 제거가 반영되어 restaurant prop을 직접 쓰고 있는데, import만 남아있네요. 사용하지 않는 import라 빌드엔 영향 없지만 정리해주면 좋겠어요.

🧹 제거 제안

-import { useStoreDetail } from "@/hooks/reservation/useStoreDetail";

---

125-130: mock 시절 주석이 남아있어요

Line 125의 // date, time 기준가능 mock 주석은 이제 실제 API 데이터를 사용하므로 맞지 않아요. 삭제하거나 현재 로직에 맞게 업데이트해주세요.

🧹 주석 제거

-  // date, time 기준가능 mock
   const availableIds = useMemo(() => {

---

77-99: useEffect 의존성에 initialDraft가 빠져있어요

didInitRef 가드 덕분에 보통은 문제없지만, 모달이 열린 상태에서 부모가 initialDraft를 변경하면 반영이 안 돼요. 현재 흐름상 initialDraft는 모달이 열릴 때만 의미 있으니 의도된 설계일 수 있지만, ESLint exhaustive-deps 경고가 날 수 있어요.

의도적이라면 // eslint-disable-next-line react-hooks/exhaustive-deps 주석으로 명시해주면 다른 개발자가 헷갈리지 않을 것 같아요.