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

src/components/reservation/PaymentModal.tsx

@@ -4,6 +4,11 @@ import { formatKrw } from "@/utils/money";
 import { Button } from "../ui/button";
 import { cn } from "@/lib/utils";
 import { X } from "lucide-react";
+import { useMenus } from "@/hooks/useMenus";
+import { useDepositRate } from "@/hooks/useDepositRate";
+import { calcMenuTotal } from "@/utils/menu";
+import { calcDeposit } from "@/utils/payment";
+import { useConfirmClose } from "@/hooks/useConfirmClose";
 
 type PayMethod = "KAKAOPAY" | "TOSSPAY";
 
@@ -14,7 +19,6 @@ type Props = {
   restaurant: Restaurant;
   draft: ReservationDraft;
   onSuccess: () => void;
-  onBack: () => void;
 };
 
 function mockPay(method: PayMethod, amount: number) {
@@ -31,12 +35,20 @@ export default function PaymentModal({
   restaurant,
   draft,
   onSuccess,
-  onBack,
 }: Props) {
   const [method, setMethod] = useState<PayMethod | undefined>();
   const [loading, setLoading] = useState(false);
 
-  const amount = useMemo(() => draft.payment.depositAmount, [draft.payment]);
+  const { menus } = useMenus(restaurant.id);
+  const { rate } = useDepositRate(restaurant.id);
+
+  const menuTotal = useMemo(() => {
+    return calcMenuTotal(menus, draft.selectedMenus);
+  }, [menus, draft.selectedMenus]);
+
+  const amount = useMemo(() => {
+    return calcDeposit(menuTotal, rate);
+  }, [menuTotal, rate]);
 
   const onClickPay = async () => {
     if (loading) return;
@@ -50,18 +62,7 @@ export default function PaymentModal({
     }
   };
 
-  const handleBack = () => {
-    onOpenChange(false);
-    onBack();
-  };
-
-  const handleRequestClose = () => {
-    const ok = window.confirm(
-      "예약금이 결제되지 않았습니다. \n 예약화면을 벗어나시겠습니까?",
-    );
-    if (ok) onClose();
-  };
-
+  const handleRequestClose = useConfirmClose(onClose);
   if (!open) return null;
 
   return (
@@ -83,7 +84,7 @@ export default function PaymentModal({
           <h3 className="text-lg">예약금 결제</h3>
           <button
             type="button"
-            onClick={handleBack}
+            onClick={handleRequestClose}
             aria-label="닫기"
             className="p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
           >
@@ -96,13 +97,18 @@ export default function PaymentModal({
             <div className="text-sm text-muted-foreground">매장</div>
             <div className="mt-1 text-base truncate">{restaurant.name}</div>
           </div>
-          <div className="border rounded-xl p-4 flex items-center justify-between gap-3">
-            <div className="min-w-0">
-              <div className="text-sm text-muted-foreground">결제 금액</div>
-              <div className="mt-1 text-xl font-semibold">
-                {formatKrw(amount)}원
+          <div className="border rounded-xl p-4 space-y-1">
+            <div className="flex items-center justify-between gap-3">
+              <div className="min-w-0">
+                <div className="text-sm text-muted-foreground">결제 금액</div>
+                <div className="mt-1 text-xl font-semibold">
+                  {formatKrw(amount)}원
+                </div>
               </div>
             </div>
+            <p className="text-xs text-muted-foreground">
+              메뉴 총액 {formatKrw(menuTotal)}원 * {Math.round(rate * 100)}%
+            </p>
           </div>
           {/* 본문 */}
           <div className="space-y-2">

src/components/reservation/ReservationConfirmModal.tsx

@@ -1,7 +1,12 @@
+import { useConfirmClose } from "@/hooks/useConfirmClose";
+import { useDepositRate } from "@/hooks/useDepositRate";
+import { useMenus } from "@/hooks/useMenus";
 import { getMockLayoutByRestaurantId } from "@/mock/seatLayout";
 import type { ReservationDraft, Restaurant } from "@/types/restaurant";
 import { toYmd } from "@/utils/date";
+import { calcMenuTotal } from "@/utils/menu";
 import { formatKrw } from "@/utils/money";
+import { calcDeposit } from "@/utils/payment";
 import { tablePrefLabel } from "@/utils/reservation";
 import { X } from "lucide-react";
 
@@ -22,22 +27,21 @@ export default function ReservationConfirmMoodal({
   restaurant,
   draft,
 }: Props) {
-  if (!open) return null;
-
   const { people, date, time, seatType, tablePref } = draft;
 
-  //UI테스트를 위해서 r-1로 고정함. 나중에 백엔드 연결시 주석으로 변경필요. ReservationModal또한 변경필요.
-  // const layout = getMockLayoutByRestaurantId(restaurant.id ?? "r-1");
-  const layout = getMockLayoutByRestaurantId("r-1");
+  const layout = getMockLayoutByRestaurantId(restaurant.id ?? "1");
 
   const seatTable = layout?.tables.find((t) => t.id === draft.tableId);
 
-  const handleRequestClose = () => {
-    const ok = window.confirm(
-      "예약이 확정되지 않았습니다.\n예약화면을 벗어나시겠습니까?",
-    );
-    if (ok) onClose();
-  };
+  const handleRequestClose = useConfirmClose(onClose);
+
+  const { menus } = useMenus(restaurant.id);
+  const { rate } = useDepositRate(restaurant.id);
+  const { selectedMenus } = draft;
+  const menuTotal = calcMenuTotal(menus, selectedMenus);
+  const depositAmount = calcDeposit(menuTotal, rate);
+
+  if (!open) return null;
 
   return (
     <div
@@ -100,12 +104,13 @@ export default function ReservationConfirmMoodal({
           <div className="border rounded-lg p-3 bg-blue-50 border-blue-200">
             <div className="text-sm text-gray-500">결제 유형</div>
             <div className="text-blue-700">사전 결제</div>
-            <div className="text-sm text-gray-800 mt-1">
-              예약금: {formatKrw(draft.payment.depositAmount)}원
-              {draft.payment.depositRate
-                ? ` (${Math.round(draft.payment.depositRate * 100)}% 정책 적용)`
-                : null}
+            <div className="text-gray-800 mt-1 font-semibold">
+              예약금: {formatKrw(depositAmount)}원
             </div>
+            <p className="text-xs text-muted-foreground mt-2">
+              {restaurant.paymentPolicy?.notice ??
+                "예약 확정을 위해 예약금 결제가 필요합니다.(노쇼 방지 목적)"}
+            </p>
           </div>
           <p className="text-gray-700 text-center">
             위 내용으로 예약을 진행할까요?