feat: 주문내역 페이지 퍼블리싱

apps/nowait-user/src/api/order.ts

@@ -39,7 +39,7 @@ export const createOrder = async (
 };
 
 //주문내역 가져오기
-export const getMyOrderList = async (
+export const getOrderDetails = async (
   storeId: string | undefined,
   tableId: string
 ) => {

apps/nowait-user/src/components/EmptyPage.tsx

@@ -0,0 +1,32 @@
+import { useNavigate, useParams } from "react-router-dom";
+import { SmallActionButton } from "./SmallActionButton";
+import Add from "../assets/icon/Add.svg?react";
+
+interface PropsType {
+  mode: "default" | "orderDetails";
+  title: string;
+  buttonText: string;
+}
+
+const EmptyPage = ({ mode, title, buttonText }: PropsType) => {
+  const navigate = useNavigate();
+  const { storeId } = useParams();
+  return (
+    <div className={`min-h-screen flex flex-col justify-center items-center ${mode=== "default"? "bg-white":"bg-black-15"}`}>
+      <h1 className="whitespace-pre-line text-16-regular text-black-80 mb-5 text-center">
+        {title}
+      </h1>
+      <SmallActionButton
+        mode={mode}
+        type="button"
+        ariaLabel="메뉴 추가"
+        onClick={() => navigate(`/${storeId}`)}
+      >
+        {buttonText}
+        <Add className="w-4 h-4" fill="currentColor" />
+      </SmallActionButton>
+    </div>
+  );
+};
+
+export default EmptyPage;

apps/nowait-user/src/components/SmallActionButton.tsx

@@ -1,11 +1,13 @@
 interface PropsType {
+  mode? : "default" | "orderDetails"
   type?: "button" | "submit" | "reset";
   ariaLabel: string;
   children: React.ReactNode;
   onClick: () => void;
   className?: string;
 }
 export const SmallActionButton = ({
+  mode = "default",
   type = "button",
   children,
   onClick,
@@ -16,7 +18,7 @@ export const SmallActionButton = ({
     <button
       type={type}
       aria-label={ariaLabel}
-      className={`${className} py-2 px-4 rounded-[12px] border border-[#ececec] text-black-70`}
+      className={`${className} py-2 px-4 rounded-[12px] border-2 bg-white ${mode==="default" ? "border-[#ececec] text-black-70" : "border-[#dddddd] text-black-80"}`}
       onClick={onClick}
     >
       <p className="flex items-center justify-center gap-1 text-[14px] font-bold">

apps/nowait-user/src/pages/order/home/components/StoreHeader.tsx

@@ -1,15 +1,16 @@
 import { useNavigate, useParams } from "react-router-dom";
-import { getMyOrderList } from "../../../../api/order";
+import { getOrderDetails } from "../../../../api/order";
 
 const StoreHeader = () => {
   const navigate = useNavigate();
   const { storeId } = useParams();
   const tableId = localStorage.getItem("tableId");
 
-  const getMyOrderListButton = async () => {
+  const getOrderDetailsButton = async () => {
     try {
-      const res = await getMyOrderList(storeId, tableId!);
-      navigate(`/${storeId}/myOrderList`, { state: res });
+      const res = await getOrderDetails(storeId, tableId!);
+      navigate(`/${storeId}/orderDetails`);
+      console.log(res)
     } catch (error) {
       console.log(error);
     }
@@ -22,7 +23,7 @@ const StoreHeader = () => {
         <h2 className="text-text-16-medium">5번 테이블</h2>
       </div>
       <button
-        onClick={getMyOrderListButton}
+        onClick={getOrderDetailsButton}
         className="text-14-semibold bg-black-20 py-2 px-2.5 rounded-[8px] text-black-70 cursor-pointer"
       >
         주문내역

apps/nowait-user/src/pages/order/orderDetails/OrderDetailsPage.tsx

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import EmptyOrderDetails from "./components/EmptyOrderDetails";
+
+const dummyData = [
+  { id: 1, menu: "참치마요주먹밥 세트", quantity: 1 },
+  { id: 2, menu: "해물파전", quantity: 2 },
+  { id: 3, menu: "숙주보끔", quantity: 3 },
+];
+
+const OrderDetailsPage = () => {
+    const [a,setA] = useState(false)
+    if (a) return <EmptyOrderDetails/>
+  return (
+    <div>
+      <div className="bg-black-15 min-h-screen py-[30px] px-5">
+        <button onClick={()=>setA(!a)}>스위치</button>
+        <h1 className="text-headline-24-bold mb-[23px] text-black-90">
+          주문내역 <span className="text-primary">1건</span>
+        </h1>
+        <ul>
+          <li className="p-[22px] bg-white rounded-[22px] mb-4">
+            <div className="mb-7.5">
+              <h1 className="text-title-20-bold text-black-90 mb-2">
+                입금 확인 중
+              </h1>
+              <p className="text-14-regular text-black-60">
+                2025년 7월 1일 19:49
+              </p>
+            </div>
+            <ul className="border-b-1 border-[#ececec] pb-5 mb-5">
+              {dummyData.map((data) => {
+                return (
+                  <li
+                    key={data.id}
+                    className="flex justify-between items-center mb-2.5 last:mb-0"
+                  >
+                    <h1 className="text-16-regular text-black-90">
+                      {data.menu}
+                    </h1>
+                    <span className="text-16-regular text-black-60">
+                      {data.quantity}
+                    </span>
+                  </li>
+                );
+              })}
+            </ul>
+            <div className="flex justify-between items-center">
+              <h1 className="text-16-semibold">결제금액</h1>
+              <h2 className="text-16-semibold">36,000원</h2>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default OrderDetailsPage;

apps/nowait-user/src/pages/order/orderDetails/components/EmptyOrderDetails.tsx

@@ -0,0 +1,13 @@
+import EmptyPage from "../../../../components/EmptyPage";
+
+const EmptyOrderDetails = () => {
+  return (
+    <EmptyPage
+      mode="orderDetails"
+      title={`주문 내역이 없습니다.\n첫 주문을 시작해 보세요.`}
+      buttonText="주문하기"
+    />
+  );
+};
+
+export default EmptyOrderDetails;

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

@@ -37,6 +37,7 @@ const OrderListPage = () => {
             })}
           </AnimatePresence>
           <SmallActionButton
+            mode="default"
             type="button"
             ariaLabel="메뉴 추가하기"
             onClick={() => navigate(`/${storeId}`)}

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

@@ -1,26 +1,12 @@
-import { useNavigate, useParams } from "react-router-dom";
-import Add from "../../../../assets/icon/Add.svg?react";
-import { SmallActionButton } from "../../../../components/SmallActionButton";
+import EmptyPage from "../../../../components/EmptyPage";
 
 const EmptyCart = () => {
-  const navigate = useNavigate();
-  const { storeId } = useParams();
   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>
-      <SmallActionButton
-        type="button"
-        ariaLabel="메뉴 추가"
-        onClick={() => navigate(`/${storeId}`)}
-      >
-        추가하기
-        <Add className="w-4 h-4" fill="currentColor" />
-      </SmallActionButton>
-    </div>
+    <EmptyPage
+      mode="default"
+      title={`아직 담긴 메뉴가 없어요.\n마음에 드는 메뉴를 담아주세요!`}
+      buttonText="추가하기"
+    />
   );
 };
 

apps/nowait-user/src/pages/order/remittenceWait/RemittanceWaitPage.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import PageFooterButton from "../../../components/order/PageFooterButton";
 import { Button } from "@repo/ui";

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

@@ -15,6 +15,8 @@ import WaitingPartySizeForm from "../pages/waiting/waitingPartysize/WaitingParty
 import StoreMenuDetailPage from "../pages/waiting/menuDetail/StoreMenuDetailPage";
 import WaitingSummaryPage from "../pages/waiting/WaitingSummary/WaitingSummaryPage";
 import AddMenuPage from "../pages/order/addMenu/AddMenuPage";
+import RemittanceWaitPage from "../pages/order/remittenceWait/RemittanceWaitPage";
+import OrderDetailsPage from "../pages/order/orderDetails/OrderDetailsPage";
 import RemittancePage from "../pages/order/remittance/RemittancePage";
 
 // AuthGuard로 래핑하는 헬퍼 함수
@@ -31,39 +33,32 @@ const withTransition = (Component: React.ComponentType) => (
 const Router = () => {
   const location = useLocation();
   return (
-    // <PageTransitionWrapper>
-      <Routes location={location}  key={location.pathname}>
-        {/* 공개 라우트 - 인증 불필요 */}
-        <Route path="/login/success" element={<KakaoRedirectHandler />} />
-        <Route path="/login" element={<LoginPage />} />
-
-      {/* 보호된 라우트 - 인증 필요 (구체적인 경로 먼저) */}
-      <Route
-        path="/store/:id/reserve/success"
-        element={withAuth(WaitingSuccessPage)}
-      />
-      {/* <Route path="/store/:id/reserve" element={withAuth(StoreReservePage)} /> */}
-      <Route path="/store/:id" element={withAuth(StoreDetailPage)} />
-      <Route path="/map" element={withAuth(MapPage)} />
-      <Route path="/" element={withAuth(HomePage)} />
+    <Routes location={location} key={location.pathname}>
+      {/* 공개 라우트 - 인증 불필요 */}
+      <Route path="/login/success" element={<KakaoRedirectHandler />} />
+      <Route path="/login" element={<LoginPage />} />
 
       {/* QR 코드 접속 페이지 - 인증 불필요 (일반적인 경로 나중에) */}
       <Route path="/:storeId/:tableId" element={<RedirectToStorePage />} />
-      <Route path="/:storeId" element={withTransition(StorePage)} />
-      <Route
-        path="/:storeId/menu/:menuId"
-        element={withTransition(AddMenuPage)}
-      />
+      <Route path="/:storeId" element={<StorePage />} />
+      <Route path="/:storeId/menu/:menuId" element={<AddMenuPage />} />
       <Route path="/:storeId/order" element={withTransition(OrderListPage)} />
       <Route
         path="/:storeId/remittance"
         element={withTransition(RemittancePage)}
       />
-
+      <Route
+        path="/:storeId/remittanceWait"
+        element={withTransition(RemittanceWaitPage)}
+      />
       <Route
         path="/:storeId/order/success"
         element={withTransition(OrderSuccessPage)}
       />
+      <Route
+        path="/:storeId/orderDetails"
+        element={withTransition(OrderDetailsPage)}
+      />
 
       {/* 보호된 라우트 - 인증 필요 */}
       <Route