feat: 예약중 메뉴선택 UI추가

[jjjsun]

💡 개요

고객 예약 flow에서 메뉴 선택 모달 UI를 추가하고, 선택한 메뉴의 총액과 그에 예약금률을 적용하여 예약금이 보여지도록 구현

🔢 관련 이슈 링크

• Closes [feat] 예약중 메뉴선택 UI 추가 #38

💻 작업내용

• SearchPage.tsx에서 예약 flow에 메뉴 선택 모달 단계 추가
• 메뉴 카테고리별(메인/사이드/음료) 리스트 출력, 수량 증감버튼, 품절 상태 UI및 비활성 처리(ResevationMenuModal.tsx)
• 선택한 메뉴 상태를 draft에 반영해서 예약확인 단계와 결제 단계로 전달
• 메뉴 총액과 예약금 계산을 모달 하단에 요약
• 예약 확인 모달에서 예약금률이 적용된 값으로 표시되도록 수정

📌 변경사항PR

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

🤔 추가 논의하고 싶은 내용

N/A

✅ 체크리스트

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

Summary by CodeRabbit

• 새로운 기능

  • 예약 흐름에 메뉴 선택 단계 추가(예약 → 메뉴 → 확인 → 결제)
  • 닫기 시 확인을 요구하는 통합 종료 확인 흐름 추가(뒤로가기 동작 제거)

• UI 개선

  • 선택한 메뉴 기반 총액 및 비율 기반 예치금 자동 계산·표시(총액·비율 별도 노출)
  • 메뉴 목록에 사진·설명·품절 표시 및 수량 조절(0–20) UI 제공
  • 예약 확인에 결제 안내문 노출·날짜 선택 동작 개선·테이블 뷰 가로스크롤 보강

• 기타

  • 목업 이미지/레이아웃 키 및 문구 소소 수정; 리뷰 버튼에 안내 알림 추가

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

예약 플로우에 메뉴 선택 단계(ReservationMenuModal)를 추가하고, 선택된 메뉴 합계(menuTotal)에 저장된 비율(rate)을 적용해 예약금을 동적으로 계산하도록 Confirm/Payment 모달과 SearchPage 상태 전환을 변경했습니다. onBack 공용 prop을 제거하고 useConfirmClose 기반의 모달 종료 확인을 도입했습니다.

Changes

Cohort / File(s)	Summary
메뉴 선택 모달 추가 src/components/reservation/ReservationMenuModal.tsx	신규 컴포넌트: 메뉴 그룹화(MAIN/SIDE/DRINK), 수량(0–20) 증감, 품절 비활성화, 선택 맵 유지 및 총액/예약금 계산 후 onConfirm으로 draft 반환.
동적 예약금 계산 & 결제 UI 변경 src/components/reservation/PaymentModal.tsx, src/components/reservation/ReservationConfirmModal.tsx	useMenus, useDepositRate, calcMenuTotal, calcDeposit 도입. draft.payment 대신 menus 기반 menuTotal·rate로 deposit 계산 및 UI에 노출. 모달 닫기 로직을 useConfirmClose로 교체.
예약 모달 / 흐름 변경 src/components/reservation/ReservationModal.tsx, src/components/reservation/ReservationConfirmModal.tsx	onBack 제거 → onClose/useConfirmClose로 통합, paymentDraft 제거 및 selectedMenus 포함, 날짜 비활성화 조건(d <= today) 변경, 테이블 맵에 수평 스크롤 래핑 추가, 결제 정책 문구를 비율 기반으로 표시.
페이지 흐름(상태/내비게이션) 변경 src/pages/SearchPage.tsx	reserveMenuOpen 상태 및 goReserveMenu/backToReserveMenu 추가. ReservationModal → ReservationMenuModal → ReservationConfirmModal → PaymentModal로 단계형 플로우 확장 및 closeAll에서 상태 초기화 강화.
훅/유틸 추가 src/hooks/useConfirmClose.ts	새 훅: 모달 닫기 시 확인 다이얼로그 표시 후 onClose 호출(취소 가능).
마이너 데이터/표시 변경 src/mock/menus.ts, src/mock/seatLayout.ts, src/components/restaurant/RestaurantDetailModal.tsx, src/pages/myPage/storePage.tsx	mock 이미지 URL 추가, seatLayout 키 "r-1"→"1" 변경, 리뷰 버튼에 alert 추가, import/포맷 정리 등 경량 수정.

Sequence Diagram(s)

sequenceDiagram
    participant User as User
    participant SP as SearchPage
    participant RM as ReservationModal
    participant MM as ReservationMenuModal
    participant CM as ReservationConfirmModal
    participant PM as PaymentModal

    User->>SP: 예약 시작 (식당 선택)
    SP->>RM: ReservationModal 오픈
    User->>RM: 예약 입력 -> 메뉴 선택 클릭
    RM->>SP: goReserveMenu(draft)
    SP->>MM: ReservationMenuModal 오픈 (draft 전달)
    MM->>MM: useMenus / useDepositRate 호출 -> calcMenuTotal(), calcDeposit()
    User->>MM: 메뉴 수량 변경 -> Next (onConfirm(selectedMenus))
    MM->>SP: onConfirm(draft + selectedMenus)
    SP->>CM: ReservationConfirmModal 오픈 (계산된 deposit 반영)
    User->>CM: 확인 -> 결제 진행
    CM->>PM: PaymentModal 오픈
    PM->>PM: useDepositRate/useMenus 재조회 및 금액표시
    User->>PM: 결제 수행 / 모달 닫기 (useConfirmClose 확인)

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• feat: 메뉴/예약금 type 및 mock데이터/hooks 추가 #35: useMenus, useDepositRate, calcMenuTotal, calcDeposit, mock menus 등 훅/유틸을 도입한 PR로 본 변경이 해당 훅·유틸을 소비합니다.

Suggested reviewers

• yooseolhee
• dew102938

Poem

메뉴 고르고 수량 더하니 합계가 반짝,
비율 곱해 예약금이 또렷히 보이네.
모달이 줄지어 단계 따라 열리고,
확인창은 실수 막아주며 잠깐 멈추네.
작은 클릭들이 예약을 완성하네 ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	RestaurantDetailModal.tsx의 리뷰 버튼 알림 메시지 추가와 storePage.tsx 임포트 재정렬은 #38 범위 밖이나 사소한 유지보수 수정입니다.	큰 문제는 아니지만 향후 PR은 범위에 맞춰 진행하시면 좋습니다. 혹은 별도 PR로 분리 가능합니다.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 주요 변경사항(메뉴선택 UI 추가)을 명확하게 요약하고 있어 팀원이 히스토리를 스캔할 때 무엇이 변경되었는지 쉽게 파악할 수 있습니다.
Description check	✅ Passed	PR 설명이 템플릿을 따르고 개요, 이슈 링크, 작업내용, 변경사항, 체크리스트를 완성도 있게 작성했으나 추가 논의 섹션이 N/A로 비워있습니다.
Linked Issues check	✅ Passed	코드 변경사항이 #38의 요구사항(메뉴선택 UI, 메뉴별 수량 조절, 예약금 계산 표시)을 완전히 충족합니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/reservatioMenuUI

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

src/components/reservation/ReservationConfirmModal.tsx (1)

33-50: ⚠️ Potential issue | 🟠 Major

모크 레스토랑 ID 불일치 시 메뉴/예약금이 0으로 계산될 수 있어요

레이아웃은 "1"로 고정인데 메뉴/예약금 계산은 restaurant.id를 사용합니다. id가 다르면 menus가 비어 총액/예약금이 0이 됩니다. 동일한 mockRestaurantId를 재사용해주세요.

🔧 수정 제안

-  const layout = getMockLayoutByRestaurantId("1");
+  const mockRestaurantId = restaurant.id ?? "1";
+  const layout = getMockLayoutByRestaurantId(mockRestaurantId);
@@
-  const { menus } = useMenus(restaurant.id);
-  const { rate } = useDepositRate(restaurant.id);
+  const { menus } = useMenus(mockRestaurantId);
+  const { rate } = useDepositRate(mockRestaurantId);

src/components/reservation/ReservationModal.tsx (1)

96-117: ⚠️ Potential issue | 🟠 Major

레이아웃 ID와 가용 테이블 조회 ID를 동일하게 맞춰야 합니다

레이아웃은 "1"로 고정했는데 가용 테이블 조회는 restaurant.id를 사용하고 있어요. id가 다르면 availableIds가 비어 테이블 선택이 막힐 수 있습니다. 동일한 mockRestaurantId로 맞춰주세요.

🔧 수정 제안

-  const layout: SeatLayout | null = useMemo(() => {
-    return getMockLayoutByRestaurantId("1"); //UI테스트 용으로 고정시켜 놓음.
-  }, []);
+  const mockRestaurantId = restaurant.id ?? "1";
+  const layout: SeatLayout | null = useMemo(() => {
+    return getMockLayoutByRestaurantId(mockRestaurantId); //UI테스트 용으로 고정시켜 놓음.
+  }, [mockRestaurantId]);
@@
-    const restaurantId = restaurant.id ?? "r-1";
+    const restaurantId = mockRestaurantId;
@@
-  }, [layout, date, time, dateYmd, restaurant.id]);
+  }, [layout, date, time, dateYmd, mockRestaurantId]);

🤖 Fix all issues with AI agents

In `@src/components/reservation/ReservationConfirmModal.tsx`:
- Around line 46-50: The component currently returns early before calling hooks
which breaks the Rules of Hooks; always call hooks (useMenus, useDepositRate)
and compute derived values (selectedMenus, menuTotal via calcMenuTotal,
depositAmount via calcDeposit) unconditionally at the top of
ReservationConfirmModal, then perform the open/early return after those hook
calls so hook call order is stable across renders; update the component to move
the early return that checks `open` so it occurs after the
useMenus/useDepositRate calls and their derived computations.

In `@src/components/reservation/ReservationMenuModal.tsx`:
- Around line 98-104: The aria-label on the ReservationMenuModal component is
incorrect for the dialog's purpose; update the JSX in ReservationMenuModal (the
div with role="dialog") to change aria-label from "식당 예약 모달" to "메뉴 선택 모달" so
screen readers describe the modal accurately; locate the div in
ReservationMenuModal.tsx that sets aria-modal/role and replace the label string
accordingly, keeping other accessibility attributes intact.
- Around line 28-38: The component ReservationMenuModal currently returns early
before calling hooks which breaks React Hooks rules and also fails to keep
selectedMenus in sync with draft and has an incorrect aria-label; to fix: move
the early return (if (!open) return null) to after all hook calls including the
useMenus(restaurant.id) invocation so hook order is stable, add a useEffect that
watches draft and calls setSelectedMenus(draft.selectedMenus ?? []) to resync
state when draft changes, and update the modal/Dialog aria-label from "식당 예약 모달"
to "메뉴 선택" so screen readers reflect the actual content.
- Around line 40-47: The local state selectedMenus initialized from
draft.selectedMenus isn't resynced when draft changes, causing stale UI after
navigation; add a useEffect that watches draft.selectedMenus (or draft) and
calls setSelectedMenus(draft.selectedMenus ?? []) to reset selectedMenus
whenever the draft updates (ensure you reference the existing selectedMenus and
setSelectedMenus state hooks in ReservationMenuModal.tsx).

🧹 Nitpick comments (3)

src/pages/myPage/storePage.tsx (1)

109-110: 참고: 추후 API 연동 시 empty 상태 처리 고려해주세요 📝

현재는 mock 데이터라 괜찮지만, 나중에 실제 API 연동하실 때 가게가 없는 경우(shops.length === 0) empty 상태 UI도 추가하면 좋을 것 같아요. 이번 PR 범위는 아니니 참고만 해주세요!

{shops.length === 0 ? (
  <div className="text-center py-12 text-gray-500">
    등록된 가게가 없습니다. 새 가게를 등록해보세요!
  </div>
) : (
  shops.map((shop) => (
    // 기존 렌더링 로직
  ))
)}

As per coding guidelines: src/pages/**: 라우팅/레이아웃 영향, 로딩/에러/empty 상태 UX 확인.

src/mock/seatLayout.ts (1)

5-7: 모크 레스토랑 ID 상수화 제안

키가 문자열 리터럴로 박혀 있어 추후 변경 시 다른 mock들과 불일치가 생기기 쉬워요. 공통 상수로 정의해두면 재사용과 변경이 안전합니다.

♻️ 예시 수정안

+export const MOCK_RESTAURANT_ID = "1";
 export const MOCK_SEAT_LAYOUT_BY_RESTAURANT: Record<string, SeatLayout> = {
-  "1": {
+  [MOCK_RESTAURANT_ID]: {

src/components/restaurant/RestaurantDetailModal.tsx (1)

127-132: 알림을 비차단 UI로 바꾸면 접근성/UX가 좋아져요

window.alert는 브라우저 기본 모달이라 포커스/스크린리더 흐름이 끊길 수 있어요. 가능하면 토스트/인라인 안내로 대체를 고려해주세요.

As per coding guidelines, src/components/**: 컴포넌트는 단일 책임, props 타입/네이밍 명확히, 접근성(aria) 체크.

[coderabbitai]

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/reservation/ReservationConfirmModal.tsx (1)

21-21: ⚠️ Potential issue | 🟡 Minor

함수명 오타: ReservationConfirmMoodal → ReservationConfirmModal

Moodal이 아니라 Modal이에요. 다른 파일에서 import 시 혼란이 생길 수 있고, 나중에 컴포넌트명 기반 검색이나 디버깅할 때 찾기 어려울 수 있어요.

🔧 수정 제안

-export default function ReservationConfirmMoodal({
+export default function ReservationConfirmModal({

🤖 Fix all issues with AI agents

In `@src/components/reservation/ReservationMenuModal.tsx`:
- Around line 22-26: Rename the misspelled constant CategotyLabel to
CategoryLabel and update all references in this file (including the place that
currently uses CategotyLabel) to the new name; keep the same type/contents
(Record<MenuCategory, string>) and only change the identifier so usages such as
the lookup for menu category labels now reference CategoryLabel instead of
CategotyLabel.
- Around line 225-237: The increase button currently only disables on
menu.isSoldOut; update it to also disable when the menu has reached the max
quantity (20) by adding a check against the current count property (e.g.,
menu.quantity or whatever field holds the current count) to the disabled prop
and to the cn conditional for styles, so the button (the element using
onClick={() => inc(menu)} and aria-label={`${menu.name} 수량증가`}) becomes disabled
and gets the opacity/cursor-not-allowed styling when menu.isSoldOut OR
menu.quantity >= 20; ensure the same condition prevents calling inc(menu).
- Around line 102-108: ReservationMenuModal currently always renders the modal
container even when the open prop is false; add an early return at the top of
the ReservationMenuModal component (after any hooks/initialization) that returns
null when props.open (or the open prop name used in this component) is falsy so
the fixed full-screen container (the div with className "fixed inset-0 z-50
...") is not rendered when the modal is closed; ensure this check is placed
before returning the JSX and references the component name ReservationMenuModal
and the open prop.

🧹 Nitpick comments (1)

src/components/reservation/ReservationMenuModal.tsx (1)

220-234: aria-label 띄어쓰기 불일치 (접근성)

• Line 220: 수량 감소 (띄어쓰기 O)
• Line 234: 수량증가 (띄어쓰기 X)

스크린리더 사용자에게 일관된 경험을 제공하려면 통일해주세요.

🔧 수정 제안

-                                    aria-label={`${menu.name} 수량증가`}
+                                    aria-label={`${menu.name} 수량 증가`}

As per coding guidelines, src/components/**: 컴포넌트는 단일 책임, props 타입/네이밍 명확히, 접근성(aria) 체크.

[dew102938]

코드 리뷰 달았습니다.
수고많으셨습니다!!

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/reservation/ReservationModal.tsx`:
- Around line 101-102: The layout is hardcoded by calling
getMockLayoutByRestaurantId("1") with an empty deps array in ReservationModal,
causing incorrect layouts when switching restaurants; change the call to use the
real restaurant identifier (e.g., restaurant.id) and add restaurant (or
restaurant.id) to the hook deps so the layout recalculates when restaurant
changes, and to preserve UI tests introduce an optional prop (e.g.,
mockLayoutRestaurantId or injectedLayoutId) that, when present, is used instead
of restaurant.id so tests can pass a fixed ID without modifying production
behavior.

🧹 Nitpick comments (1)

src/components/reservation/ReservationModal.tsx (1)

369-376: 퍼센트 표시가 실제 계산과 어긋날 수 있어요.
Math.round는 7.5% 같은 값을 8%로 보여줘서 실제 예약금 계산과 불일치할 수 있습니다. 소수 한 자리 정도는 그대로 노출하는 게 안전합니다.

🎯 표시 정합성 개선 예시

+  const depositRatePct = depositRate * 100;
+  const depositRateLabel = Number.isInteger(depositRatePct)
+    ? `${depositRatePct}%`
+    : `${depositRatePct.toFixed(1)}%`;
...
-  {Math.round(depositRate * 100)}% 정책
+  {depositRateLabel} 정책
...
-  <b>{Math.round(depositRate * 100)}%</b>
+  <b>{depositRateLabel}</b>

[coderabbitai]

Actionable comments posted: 3

🤖 Fix all issues with AI agents

In `@src/components/reservation/ReservationConfirmModal.tsx`:
- Around line 32-35: The code in ReservationConfirmModal.tsx hardcodes the
layout ID with getMockLayoutByRestaurantId("1"), which breaks seat lookups for
restaurants with different IDs; change it to use the restaurant.id when
available and only fall back to "1". Update the layout assignment (the variable
named layout and call getMockLayoutByRestaurantId) to pass restaurant.id ?? "1"
(or equivalent null-coalescing fallback) so the component prefers the real
restaurant.id but still works in tests.

In `@src/components/reservation/ReservationMenuModal.tsx`:
- Around line 115-120: The backdrop button currently calls onOpenChange(false)
directly and can discard selections; change it to use the app's confirm-close
flow instead of closing immediately: replace the direct onClick handler on the
backdrop button in ReservationMenuModal (the anonymous onClick={() =>
onOpenChange(false)}) with the component's standard confirm-close invocation
(e.g., call the confirm/confirmClose hook or shared handleClose method that
prompts the confirmation and only calls onOpenChange(false) when confirmed).
Ensure you reference and reuse the same confirm-close hook/function used by
other modals so the backdrop follows the unified confirm-and-close behavior.

In `@src/components/reservation/ReservationModal.tsx`:
- Around line 65-69: The deposit rate fallback is inconsistent: ReservationModal
sets depositRate = restaurant.paymentPolicy?.depositRate ?? 0.1 while the
confirmation/payment flow uses useDepositRate (default 0.3). Unify to a single
source of truth by either reading the rate from useDepositRate everywhere or by
normalizing restaurant.paymentPolicy into the same fallback value; update
ReservationModal to derive depositRate from the same source (e.g., call/use
useDepositRate or apply the same 0.3 fallback) so both display and payment logic
use the identical fallback and symbol (depositRate / useDepositRate).

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

src/components/reservation/ReservationModal.tsx (2)

140-156: ⚠️ Potential issue | 🟠 Major

배경 클릭도 확인 닫기 로직으로 통일해주세요.

현재 배경 클릭은 onOpenChange(false)로 바로 닫혀 확인 모달을 우회합니다. 작성 중 이탈 방지 UX가 깨질 수 있어요. 배경 클릭도 handleRequestClose로 통일하는 게 안전합니다.

✅ 제안 수정

-      <button
+      <button
         type="button"
         className="absolute inset-0 bg-black/50"
         aria-label="모달 닫기"
-        onClick={() => onOpenChange(false)}
+        onClick={handleRequestClose}
       />

---

97-110: ⚠️ Potential issue | 🟠 Major

restaurant.id 기본값이 레이아웃/가용테이블에서 불일치합니다.

레이아웃은 "1", 가용테이블은 "r-1"을 fallback으로 써서 restaurant.id가 비어 있을 때 테이블 가용성이 전부 비어질 수 있어요. 동일한 fallback을 재사용하거나 아예 restaurant.id를 필수로 보장하는 쪽이 안전합니다.

✅ 제안 수정

-  const layout: SeatLayout | null = useMemo(() => {
-    return getMockLayoutByRestaurantId(restaurant.id ?? "1");
-  }, [restaurant.id]);
+  const fallbackRestaurantId = restaurant.id ?? "1";
+  const layout: SeatLayout | null = useMemo(() => {
+    return getMockLayoutByRestaurantId(fallbackRestaurantId);
+  }, [fallbackRestaurantId]);

  const availableIds = useMemo(() => {
    if (!layout || !date || !time) return new Set<string>();
-    const restaurantId = restaurant.id ?? "r-1";
+    const restaurantId = fallbackRestaurantId;
    return getMockAvailableTableIds({
      restaurantId,
      dateYmd,
      time,
      tableIds: layout.tables.map((t) => t.id),
    });
-  }, [layout, date, time, dateYmd, restaurant.id]);
+  }, [layout, date, time, dateYmd, fallbackRestaurantId]);