feat: order 라우터 설정

apps/nowait-user/src/components/common/QuantitySelector.tsx

@@ -11,31 +11,34 @@ interface storeProps {
   mode: "store";
   id: string;
   quantity: number;
-  increaseQuantity: (id: string) => void;
-  decreaseQuantity: (id: string) => void;
+  price: number;
+  increaseQuantity: (id: string, price: number) => void;
+  decreaseQuantity: (id: string, price: number) => void;
 }
 type PropsType = stateProps | storeProps;
 
 const QuantitySelector = (props: PropsType) => {
   const increaseQuantityButton = () => {
     if (props.mode === "store") {
-      props.increaseQuantity(props.id);
+      props.increaseQuantity(props.id, props.price);
     } else if (props.mode === "state") {
-      props.setQuantity((prev) => prev + 1);
+      props.setQuantity(props.quantity + 1);
     }
   };
   const decreaseQuantityButton = () => {
     if (props.mode === "store") {
-      props.decreaseQuantity(props.id);
+      props.decreaseQuantity(props.id, props.price);
     } else if (props.mode === "state") {
-      props.setQuantity((prev) => prev - 1);
+      props.setQuantity(props.quantity - 1);
     }
   };
 
   return (
     <div className="flex items-center justify-end gap-0.5">
       <button
-        className={`bg-[#F2F6F9] rounded-[7px] w-[28px] h-[28px] flex items-center justify-center ${props.quantity === 1 ? "bg-[#e6e8eb]" :"bg-[#F2F6F9]"}`}
+        className={`bg-[#F2F6F9] rounded-[7px] w-[28px] h-[28px] flex items-center justify-center ${
+          props.quantity === 1 ? "bg-[#e6e8eb]" : "bg-[#F2F6F9]"
+        }`}
         disabled={props.quantity === 1}
         onClick={decreaseQuantityButton}
       >

apps/nowait-user/src/components/common/SuccessMessagePage.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import PageFooterButton from "../order/PageFooterButton";
 import { Button } from "@repo/ui";
 
@@ -20,8 +19,8 @@ const SuccessMessagePage = ({
   buttonText,
 }: PropsType) => {
   return (
-    <div className="flex min-h-full">
-      <div className="flex-1 flex flex-col justify-center items-center text-center">
+    <div>
+      <div className="min-h-screen flex flex-col justify-center items-center text-center">
         <img
           className="mb-2.5 w-[210px] h-[210px] bg-amber-300"
           src={imageSrc}

apps/nowait-user/src/components/order/EmptyCart.tsx

@@ -0,0 +1,26 @@
+import { useNavigate } from "react-router-dom";
+import Add from "../../assets/icon/Add.svg?react";
+
+const EmptyCart = () => {
+  const navigate = useNavigate();
+  return (
+    <div className="min-h-screen flex flex-col justify-center items-center">
+      <h1 className="text-16-regular text-black-70 mb-5 text-center">
+        아직 담긴 메뉴가 없어요.
+        <br />
+        마음에 드는 메뉴를 담아주세요!
+      </h1>
+      <button
+        type="button"
+        aria-label="메뉴 추가"
+        className="flex justify-center items-center gap-1 py-2 px-4 rounded-[12px] border border-[#ececec] text-black-70"
+        onClick={() => navigate("/:storeId")}
+      >
+        <span className="text-[14px] font-bold">추가하기</span>
+        <Add className="w-4 h-4" fill="currentColor" />
+      </button>
+    </div>
+  );
+};
+
+export default EmptyCart;

apps/nowait-user/src/components/order/MenuItem.tsx

@@ -1,4 +1,3 @@
-import React, { useState } from "react";
 import QuantitySelector from "../common/QuantitySelector";
 import close from "../../assets/icon/close.svg";
 import { useCartStore } from "../../stores/cartStore";
@@ -30,6 +29,7 @@ const MenuItem = ({ id, name, price, quantity }: PropsType) => {
           mode="store"
           id={id}
           quantity={quantity}
+          price={price / quantity}
           increaseQuantity={increaseQuantity}
           decreaseQuantity={decreaseQuantity}
         />

apps/nowait-user/src/components/order/PageFooterButton.tsx

@@ -8,10 +8,8 @@ const PageFooterButton = ({
   className?: string;
 }) => {
   return (
-    <footer className=" bg-white sticky bottom-0">
-      <div className={`flex justify-center py-8 px-5 ${className}`}>
-        {children}
-      </div>
+    <footer className="bg-white sticky bottom-0 w-full">
+      <div className="flex justify-center py-8 px-5">{children}</div>
     </footer>
   );
 };

apps/nowait-user/src/pages/order/AddMenuPage.tsx

@@ -11,7 +11,7 @@ const AddMenuPage = () => {
   const navigate = useNavigate();
   const { id, image, name, description, price } = location.state;
   const [quantity, setQuantity] = useState(1);
-  const { cart, addToCart } = useCartStore();
+  const { addToCart } = useCartStore();
 
   const addToCartButton = () => {
     const item: CartItem = {
@@ -24,17 +24,19 @@ const AddMenuPage = () => {
     navigate(-1);
   };
   return (
-    <div>
-      <div className="px-5">
+    <div className="flex flex-col h-screen">
+      <div className="flex-1 overflow-y-auto px-5">
         <h1 className="-mx-5 h-[375px] bg-amber-400">
           <img className="w-full" src={image} alt="음식 메뉴 이미지" />
         </h1>
         <div className="py-8">
           <h1 className="text-[24px] font-semibold">{name}</h1>
           <h2>{description}</h2>
         </div>
-        <div className="flex justify-between items-center -mx-5 sticky left-0 bottom-[124px] bg-white px-5">
-          <h1 className="text-[26px] font-semibold">
+      </div>
+      <div className="w-full -mx-5 sticky left-0 bottom-[124px] bg-white">
+        <div className="flex justify-between items-center px-5">
+          <h1 className="text-[24px] font-semibold">
             {(price * quantity).toLocaleString()}원
           </h1>
           <QuantitySelector

apps/nowait-user/src/pages/order/OrderListPage.tsx

@@ -1,19 +1,50 @@
 import MenuItem from "../../components/order/MenuItem";
 import PageFooterButton from "../../components/order/PageFooterButton";
 import { Button } from "@repo/ui";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import TotalButton from "../../components/order/TotalButton";
 import { useCartStore } from "../../stores/cartStore";
+import EmptyCart from "../../components/order/EmptyCart";
+import { sumTotalPrice } from "../../utils/sumUtils";
+import axios from "axios";
+import { getTableId } from "../../utils/cartStorage";
 
 const OrderListPage = () => {
   const navigate = useNavigate();
-  const orderHandleButton = () => {};
+  const { storeId } = useParams();
+  console.log(storeId);
+  const tableId = getTableId();
+  console.log(tableId, "테이블아이디");
   const { cart } = useCartStore();
 
+  const SERVER_URI = import.meta.env.VITE_SERVER_URI;
+
+  const orderHandleButton = async () => {
+    try {
+      const payload = {
+        tableId: Number(tableId),
+        items: cart.map((item) => ({
+          menuId: Number(item.id),
+          quantity: item.quantity,
+        })),
+      };
+      const url = `${SERVER_URI}/orders/create/${Number(storeId)}/${Number(tableId)}`;
+      console.log("요청 주소:", url);
+      await axios.post(url, payload);
+      navigate(`/${storeId}/remittance/request`, {
+        state: sumTotalPrice(cart),
+      });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  if (cart.length === 0) return <EmptyCart />;
+
   return (
-    <div>
-      <div className="pt-8 pb-24 px-5">
-        <h1 className="text-headline-24-bold mb-5">총 주문 3건</h1>
+    <div className="flex flex-col min-h-[100dvh]">
+      <div className="flex-1 overflow-y-auto pt-7 px-5">
+        <h1 className="text-headline-24-bold mb-5">총 주문 {cart.length}건</h1>
         <ul>
           {cart.map((item) => {
             return (

apps/nowait-user/src/pages/order/OrderSuccessPage.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useNavigate } from "react-router-dom";
 import SuccessMessagePage from "../../components/common/SuccessMessagePage";
 

apps/nowait-user/src/pages/order/PayerNameInput.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { Button } from "@repo/ui";
+import PageFooterButton from "../../components/order/PageFooterButton";
+import { useNavigate, useParams } from "react-router-dom";
+
+const PayerNameInput = () => {
+  const [payer, setPayer] = useState("");
+  const navigate = useNavigate();
+  const { storeId } = useParams();
+
+  const handlePayerSubmit = () => {
+    navigate(`/${storeId}/order/success`);
+  };
+
+  return (
+    <div className="flex flex-col h-[100dvh]">
+      <div className="flex-1 flex flex-col justify-center items-center text-center px-5 overflow-hidden">
+        <div className="mb-7.5">
+          <h1 className="text-headline-24-bold mb-2.5">
+            정확한 결제 확인을 위해
+            <br />
+            입금자명을 입력해주세요
+          </h1>
+          <h2 className="text-16-regular text-black-70">
+            한 번만 입력하면 이후 주문에도 적용 돼요.
+          </h2>
+        </div>
+        <input
+          className="w-full text-title-20-semibold border-2 border-[#ececec] rounded-[12px] placeholder-[#aaa] text-center p-5 outline-none text-black-90"
+          placeholder="입금자명"
+          value={payer}
+          onChange={(e) => setPayer(e.target.value)}
+        />
+      </div>
+      <PageFooterButton>
+        <Button
+          onClick={handlePayerSubmit}
+          backgroundColor={
+            payer.trim() === "" ? "var(--black-25)" : "var(--navy-100)"
+          }
+          textColor={payer.trim() === "" ? "var(--black-55)" : "white"}
+          disabled={payer.trim() === ""}
+        >
+          다음
+        </Button>
+      </PageFooterButton>
+    </div>
+  );
+};
+
+export default PayerNameInput;

apps/nowait-user/src/pages/order/RedirectToStorePage.tsx

@@ -9,7 +9,7 @@ const RedirectToStorePage = () => {
     if (storeId && tableId) {
       //테이블 아이디 로컬스토리지 저장(다른 방법 생각)
       localStorage.setItem("tableId", tableId);
-      navigate(`/${storeId}?table=${tableId}`, { replace: true });
+      navigate(`/${storeId}`, { replace: true });
     }
   }, [storeId, tableId, navigate]);
 

apps/nowait-user/src/pages/order/RemittanceRequestPage.tsx

@@ -1,19 +1,22 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import PageFooterButton from "../../components/order/PageFooterButton";
 import { Button } from "@repo/ui";
 import copy from "../../assets/icon/copy.svg";
 import useThrottle from "../../hooks/useThrottle";
 import Toast from "../../components/order/Toast";
 import useModal from "../../hooks/useModal";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import ConfirmModal from "../../components/order/ConfirmModal";
 
 const RemittanceRequestPage = () => {
   const [showToast, setShowToast] = useState(false);
-  const account = "기업은행 611-000202-01-010";
-  const clipBoardDelay = 3000;
+
   const navigate = useNavigate();
+  const { storeId } = useParams();
   const modal = useModal();
+  const price = useLocation().state;
+  const account = "기업은행 611-000202-01-010";
+  const clipBoardDelay = 3000;
 
   const handleCopyClipBoard = useThrottle(() => {
     navigator.clipboard.writeText(account);
@@ -22,8 +25,8 @@ const RemittanceRequestPage = () => {
   }, clipBoardDelay);
 
   return (
-    <div className="flex min-h-full">
-      <div className="px-5 flex-1 flex flex-col justify-center items-center">
+    <div>
+      <div className="min-h-screen px-5 flex flex-col justify-center items-center">
         <div className="mb-6 text-center">
           <h1 className="text-headline-24-bold mb-2.5">
             주문을 위해 이체해 주세요
@@ -44,14 +47,17 @@ const RemittanceRequestPage = () => {
             </p>
             <img src={copy} alt="복사 아이콘" />
           </button>
-          <p className="text-headline-24-bold">23,800원</p>
+          <p className="text-headline-24-bold">{price}원</p>
         </div>
       </div>
       <div className="fixed left-1/2 bottom-[124px] -translate-x-1/2 z-50">
         {showToast && <Toast message="계좌번호가 복사되었습니다" />}
       </div>
       {modal.isOpen && (
-        <ConfirmModal open={() => navigate("/")} close={modal.close} />
+        <ConfirmModal
+          open={() => navigate(`/${storeId}/payer`)}
+          close={modal.close}
+        />
       )}
       <PageFooterButton>
         <Button onClick={() => modal.open()}>다음</Button>

apps/nowait-user/src/pages/order/StorePage.tsx

@@ -1,17 +1,20 @@
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
+import type { MenuType } from "../../types/order/menu";
 import PageFooterButton from "../../components/order/PageFooterButton";
 import { Button } from "@repo/ui";
 import TotalButton from "../../components/order/TotalButton";
 import { useCartStore } from "../../stores/cartStore";
 import MenuList from "../../components/MenuList";
 
+
 const StorePage = () => {
   const navigate = useNavigate();
+  const { storeId } = useParams();
   const { cart } = useCartStore();
 
   return (
-    <div>
-      <div className="mt-8 pb-[124px]">
+    <div className="flex flex-col h-screen">
+      <div className="flex-1 overflow-y-auto mt-7.5 px-5">
         <div className="flex justify-between items-start mb-12">
           <div>
             <h1 className="text-headline-24-bold">스페이시스</h1>
@@ -28,7 +31,7 @@ const StorePage = () => {
       </div>
       {cart && cart.length > 0 && (
         <PageFooterButton>
-          <Button textColor="white" onClick={() => navigate("/:storeId/order")}>
+          <Button textColor="white" onClick={() => navigate(`/${storeId}/order`)}>
             <TotalButton />
           </Button>
         </PageFooterButton>

apps/nowait-user/src/routes/Router.tsx

@@ -13,6 +13,7 @@ import StoreReservePage from "../pages/reserve/StoreReservePage";
 import LoginPage from "../pages/login/LoginPage";
 import KakaoRedirectHandler from "../pages/login/KakaoRedirectHandler";
 import AuthGuard from "../components/AuthGuard";
+import PayerNameInput from "../pages/order/PayerNameInput";
 
 // AuthGuard로 래핑하는 헬퍼 함수
 const withAuth = (Component: React.ComponentType) => (
@@ -47,6 +48,11 @@ const Router = () => {
         path="/:storeId/remittance/request"
         element={<RemittanceRequestPage />}
       />
+      <Route
+        path="/:storeId/payer"
+        element={<PayerNameInput />}
+      />
+      <Route path="/:storeId/order/success" element={<OrderSuccessPage />} />
 
       {/* 보호된 라우트 - 인증 필요 */}
       <Route