From b0f21204422d151f55cb7c24d372f99bd8d686ec Mon Sep 17 00:00:00 2001
From: hwangdae <klp2797@naver.com>
Date: Fri, 18 Jul 2025 18:30:34 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A3=BC=EB=AC=B8=EB=82=B4=EC=97=AD=20?=
 =?UTF-8?q?=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/nowait-user/src/components/EmptyPage.tsx | 32 ++++++++++
 .../src/components/SmallActionButton.tsx      |  4 +-
 apps/nowait-user/src/lib/order.ts             |  4 +-
 .../order/home/components/StoreHeader.tsx     | 11 ++--
 .../order/orderDetails/OrderDetailsPage.tsx   | 58 +++++++++++++++++++
 .../components/EmptyOrderDetails.tsx          | 13 +++++
 .../pages/order/orderList/OrderListPage.tsx   |  1 +
 .../order/orderList/components/EmptyCart.tsx  | 26 ++-------
 apps/nowait-user/src/routes/Router.tsx        |  6 +-
 9 files changed, 126 insertions(+), 29 deletions(-)
 create mode 100644 apps/nowait-user/src/components/EmptyPage.tsx
 create mode 100644 apps/nowait-user/src/pages/order/orderDetails/OrderDetailsPage.tsx
 create mode 100644 apps/nowait-user/src/pages/order/orderDetails/components/EmptyOrderDetails.tsx

diff --git a/apps/nowait-user/src/components/EmptyPage.tsx b/apps/nowait-user/src/components/EmptyPage.tsx
new file mode 100644
index 00000000..9cb4bdc6
--- /dev/null
+++ b/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;
diff --git a/apps/nowait-user/src/components/SmallActionButton.tsx b/apps/nowait-user/src/components/SmallActionButton.tsx
index 6c8512b2..4599a81a 100644
--- a/apps/nowait-user/src/components/SmallActionButton.tsx
+++ b/apps/nowait-user/src/components/SmallActionButton.tsx
@@ -1,4 +1,5 @@
 interface PropsType {
+  mode? : "default" | "orderDetails"
   type?: "button" | "submit" | "reset";
   ariaLabel: string;
   children: React.ReactNode;
@@ -6,6 +7,7 @@ interface PropsType {
   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">
diff --git a/apps/nowait-user/src/lib/order.ts b/apps/nowait-user/src/lib/order.ts
index b8e368ae..62165261 100644
--- a/apps/nowait-user/src/lib/order.ts
+++ b/apps/nowait-user/src/lib/order.ts
@@ -1,5 +1,4 @@
 import axios from "axios";
-import type { CartType } from "../types/order/cart";
 
 const SERVER_URI = import.meta.env.VITE_SERVER_URI;
 
@@ -38,7 +37,8 @@ export const createOrder = async (
   }
 };
 
-export const getMyOrderList = async (
+//주문내역 가져오기
+export const getOrderDetails = async (
   storeId: string | undefined,
   tableId: string
 ) => {
diff --git a/apps/nowait-user/src/pages/order/home/components/StoreHeader.tsx b/apps/nowait-user/src/pages/order/home/components/StoreHeader.tsx
index 7e1aa5d0..2160c854 100644
--- a/apps/nowait-user/src/pages/order/home/components/StoreHeader.tsx
+++ b/apps/nowait-user/src/pages/order/home/components/StoreHeader.tsx
@@ -1,15 +1,16 @@
 import { useNavigate, useParams } from "react-router-dom";
-import { getMyOrderList } from "../../../../lib/order";
+import { getOrderDetails } from "../../../../lib/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"
       >
         주문내역
diff --git a/apps/nowait-user/src/pages/order/orderDetails/OrderDetailsPage.tsx b/apps/nowait-user/src/pages/order/orderDetails/OrderDetailsPage.tsx
new file mode 100644
index 00000000..613f4843
--- /dev/null
+++ b/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;
diff --git a/apps/nowait-user/src/pages/order/orderDetails/components/EmptyOrderDetails.tsx b/apps/nowait-user/src/pages/order/orderDetails/components/EmptyOrderDetails.tsx
new file mode 100644
index 00000000..5b3c4eab
--- /dev/null
+++ b/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;
diff --git a/apps/nowait-user/src/pages/order/orderList/OrderListPage.tsx b/apps/nowait-user/src/pages/order/orderList/OrderListPage.tsx
index fd875149..93a786a4 100644
--- a/apps/nowait-user/src/pages/order/orderList/OrderListPage.tsx
+++ b/apps/nowait-user/src/pages/order/orderList/OrderListPage.tsx
@@ -60,6 +60,7 @@ const OrderListPage = () => {
             })}
           </AnimatePresence>
           <SmallActionButton
+            mode="default"
             type="button"
             ariaLabel="메뉴 추가하기"
             onClick={() => navigate(`/${storeId}`)}
diff --git a/apps/nowait-user/src/pages/order/orderList/components/EmptyCart.tsx b/apps/nowait-user/src/pages/order/orderList/components/EmptyCart.tsx
index 076bfa20..207856eb 100644
--- a/apps/nowait-user/src/pages/order/orderList/components/EmptyCart.tsx
+++ b/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="추가하기"
+    />
   );
 };
 
diff --git a/apps/nowait-user/src/routes/Router.tsx b/apps/nowait-user/src/routes/Router.tsx
index 7911939a..0b7d1487 100644
--- a/apps/nowait-user/src/routes/Router.tsx
+++ b/apps/nowait-user/src/routes/Router.tsx
@@ -17,6 +17,7 @@ import AddMenuPage from "../pages/order/addMenu/AddMenuPage";
 import RemittanceWaitPage from "../pages/order/remittenceWait/RemittanceWaitPage";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
 import "../components/layout/transition.css";
+import OrderDetailsPage from "../pages/order/orderDetails/OrderDetailsPage";
 
 // AuthGuard로 래핑하는 헬퍼 함수
 const withAuth = (Component: React.ComponentType) => (
@@ -71,7 +72,10 @@ const Router = () => {
           path="/:storeId/order/success"
           element={withTransition(OrderSuccessPage)}
         />
-
+        <Route
+          path="/:storeId/orderDetails"
+          element={withTransition(OrderDetailsPage)}
+        />
         {/* 보호된 라우트 - 인증 필요 */}
         <Route
           path="/*"