From 9d83a266ffc8683c9fe68b783e65d4d37a139718 Mon Sep 17 00:00:00 2001
From: unknown <klp2797@naver.com>
Date: Thu, 15 Jan 2026 22:35:44 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=ED=85=8C=EC=9D=B4=EB=B8=94=20?=
 =?UTF-8?q?=EC=98=A4=EB=8D=94=20=EB=A9=94=EC=9D=B8=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/MenuList.tsx        | 27 +++++--------------
 .../components/common/MenuListSkeleton.tsx    | 22 +++++++++++++++
 .../pages/order/remittance/RemittancePage.tsx |  2 +-
 3 files changed, 29 insertions(+), 22 deletions(-)
 create mode 100644 apps/nowait-user/src/components/common/MenuListSkeleton.tsx

diff --git a/apps/nowait-user/src/components/common/MenuList.tsx b/apps/nowait-user/src/components/common/MenuList.tsx
index 5e2a3d04..913485b4 100644
--- a/apps/nowait-user/src/components/common/MenuList.tsx
+++ b/apps/nowait-user/src/components/common/MenuList.tsx
@@ -1,5 +1,6 @@
 import type { MenuType } from "../../types/order/menu";
 import MenuItem from "./MenuItem";
+import MenuListSkeleton from "./MenuListSkeleton";
 
 const MenuList = ({
   mode,
@@ -10,32 +11,16 @@ const MenuList = ({
   menus: MenuType[] | undefined;
   isLoading: boolean;
 }) => {
+  
+  if (isLoading) return <MenuListSkeleton />;
 
   return (
     <div className="pt-[30px] pb-[14px]">
       <h1 className="text-title-20-semibold mb-3">메뉴</h1>
       <ul>
-        {!isLoading ? (
-          menus?.map((menu: MenuType) => {
-            return <MenuItem key={menu.menuId} data={menu} mode={mode} />;
-          })
-        ) : (
-          <>
-            {Array.from({ length: 5 }).map((_, i) => {
-              return (
-                <li key={i} className="mb-5 last:mb-0">
-                  <div className="w-full flex justify-between items-center text-left">
-                    <div className="min-w-[224px]">
-                      <h1 className="mb-1 w-full h-[24px] bg-black-20 rounded-[4px]" />
-                      <h2 className="bg-black-20 w-[100px] h-[20px] rounded-[4px]" />
-                    </div>
-                    <div className="w-[80px] h-[80px] bg-black-20 rounded-[12px]" />
-                  </div>
-                </li>
-              );
-            })}
-          </>
-        )}
+        {menus?.map((menu: MenuType) => {
+          return <MenuItem key={menu.menuId} data={menu} mode={mode} />;
+        })}
       </ul>
     </div>
   );
diff --git a/apps/nowait-user/src/components/common/MenuListSkeleton.tsx b/apps/nowait-user/src/components/common/MenuListSkeleton.tsx
new file mode 100644
index 00000000..f3a081cf
--- /dev/null
+++ b/apps/nowait-user/src/components/common/MenuListSkeleton.tsx
@@ -0,0 +1,22 @@
+const MenuListSkeleton = () => {
+  return (
+    <div className="pt-[30px] pb-[14px]">
+      <h1 className="text-title-20-semibold mb-3">메뉴</h1>
+      <ul>
+        {Array.from({ length: 5 }).map((_, i) => (
+          <li key={i} className="mb-5 last:mb-0">
+            <div className="w-full flex justify-between items-center text-left">
+              <div className="min-w-[224px]">
+                <div className="mb-1 w-full h-[24px] bg-black-20 rounded-[4px]" />
+                <div className="bg-black-20 w-[100px] h-[20px] rounded-[4px]" />
+              </div>
+              <div className="w-[80px] h-[80px] bg-black-20 rounded-[12px]" />
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default MenuListSkeleton;
diff --git a/apps/nowait-user/src/pages/order/remittance/RemittancePage.tsx b/apps/nowait-user/src/pages/order/remittance/RemittancePage.tsx
index 619252cc..ed83ca02 100644
--- a/apps/nowait-user/src/pages/order/remittance/RemittancePage.tsx
+++ b/apps/nowait-user/src/pages/order/remittance/RemittancePage.tsx
@@ -70,7 +70,7 @@ const RemittancePage = () => {
     setErrorMessage(null);
     modal.open();
   };
-  console.log(remittance);
+
   return (
     <div className="flex flex-col grow mt-12 mb-[116px]">
       <BackHeader title="주문하기" />

From 00926f660b67c45a18f1fae63b2cd6d77c6c10ff Mon Sep 17 00:00:00 2001
From: unknown <klp2797@naver.com>
Date: Sat, 17 Jan 2026 21:05:53 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=A3=BC=EB=AC=B8=20=EB=8C=80?=
 =?UTF-8?q?=EA=B8=B0=20=EC=BD=94=EB=93=9C=20=EC=A0=95=EB=A6=AC=20=EB=B0=8F?=
 =?UTF-8?q?=20API=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/nowait-user/src/api/client.ts            | 13 ++++
 apps/nowait-user/src/api/menu.ts              | 12 +---
 apps/nowait-user/src/api/order.ts             | 14 ++--
 .../src/pages/order/home/StorePage.tsx        |  9 ++-
 .../order/orderDetails/OrderDetailsPage.tsx   | 63 +----------------
 .../orderDetails/components/OrderCard.tsx     | 62 ++++++++++++++++
 .../pages/order/remittance/RemittancePage.tsx | 70 +++++++++++++------
 .../waiting/storeDetail/StoreDetailPage.tsx   |  2 +-
 8 files changed, 139 insertions(+), 106 deletions(-)
 create mode 100644 apps/nowait-user/src/api/client.ts
 create mode 100644 apps/nowait-user/src/pages/order/orderDetails/components/OrderCard.tsx

diff --git a/apps/nowait-user/src/api/client.ts b/apps/nowait-user/src/api/client.ts
new file mode 100644
index 00000000..848232a0
--- /dev/null
+++ b/apps/nowait-user/src/api/client.ts
@@ -0,0 +1,13 @@
+// api/client.ts
+import axios from "axios";
+
+const API_URI = import.meta.env.VITE_SERVER_URI;
+
+export const authApi = axios.create({
+  baseURL: `${API_URI}/v1`,
+  withCredentials: true,
+});
+
+export const publicApi = axios.create({
+  baseURL: `${API_URI}/v1`,
+});
\ No newline at end of file
diff --git a/apps/nowait-user/src/api/menu.ts b/apps/nowait-user/src/api/menu.ts
index 5e1a0f8a..dcfba61c 100644
--- a/apps/nowait-user/src/api/menu.ts
+++ b/apps/nowait-user/src/api/menu.ts
@@ -1,5 +1,5 @@
 import type { MenuType } from "../types/order/menu";
-import axios from "axios";
+import { publicApi } from "./client";
 
 interface AllMenuServerResponse {
   success: boolean;
@@ -17,16 +17,10 @@ interface MenuServerResponse {
   status: number;
 }
 
-const API_URI = import.meta.env.VITE_SERVER_URI;
-
-const UserApi = axios.create({
-  baseURL: `${API_URI}/v1`,
-});
-
 //주점에 해당하는 모든 메뉴 조회
 export const getStoreMenus = async (publicCode: string) => {
   try {
-    const res = await UserApi.get<AllMenuServerResponse>(
+    const res = await publicApi.get<AllMenuServerResponse>(
       `/stores/${publicCode}/menus`
     );
     if (res?.data.success) return res.data;
@@ -40,6 +34,6 @@ export const getStoreMenu = async (
   publicCode: string,
   menuId: number
 ): Promise<MenuServerResponse> => {
-  const res = await UserApi.get(`/stores/${publicCode}/menus/${menuId}`);
+  const res = await publicApi.get(`/stores/${publicCode}/menus/${menuId}`);
   return res.data;
 };
diff --git a/apps/nowait-user/src/api/order.ts b/apps/nowait-user/src/api/order.ts
index 258c20a9..1a960fb0 100644
--- a/apps/nowait-user/src/api/order.ts
+++ b/apps/nowait-user/src/api/order.ts
@@ -4,13 +4,7 @@ import type {
   OrderType,
   StorePaymentsResponse,
 } from "../types/order/order";
-import axios from "axios";
-
-const API_URI = import.meta.env.VITE_SERVER_URI;
-
-const UserApi = axios.create({
-  baseURL: `${API_URI}/v1`,
-});
+import { authApi, publicApi } from "./client";
 
 //주문 생성
 export const createOrder = async (
@@ -18,7 +12,7 @@ export const createOrder = async (
   tableId: number,
   payload: OrderType
 ): Promise<CreateOrderServerResponse> => {
-  const res = await UserApi.post(
+  const res = await authApi.post(
     `/stores/${publicCode}/tables/${tableId}/orders`,
     payload
   );
@@ -30,7 +24,7 @@ export const getOrderDetails = async (
   publicCode: string,
   tableId: number
 ): Promise<OrderDetailsServerResponse> => {
-  const res = await UserApi.get(
+  const res = await authApi.get(
     `/stores/${publicCode}/tables/${tableId}/orders`
   );
   return res.data;
@@ -38,7 +32,7 @@ export const getOrderDetails = async (
 
 //주점 QR, 계좌번호 조회
 export const getStorePayments = async (publicCode: string) => {
-  const res = await UserApi.get<StorePaymentsResponse>(
+  const res = await publicApi.get<StorePaymentsResponse>(
     `/stores/${publicCode}/payments`
   );
   return res.data;
diff --git a/apps/nowait-user/src/pages/order/home/StorePage.tsx b/apps/nowait-user/src/pages/order/home/StorePage.tsx
index f9dabe09..380b036f 100644
--- a/apps/nowait-user/src/pages/order/home/StorePage.tsx
+++ b/apps/nowait-user/src/pages/order/home/StorePage.tsx
@@ -29,12 +29,12 @@ const StorePage = () => {
     }
   }, [added]);
 
+  const hasCartItems = cart.length > 0;
+  const pagePaddingBottom = hasCartItems ? "pb-[116px]" : "";
   return (
     <div>
       <div
-        className={`flex flex-col grow min-h-dvh pt-7.5 ${
-          cart && cart.length > 0 ? "pb-[116px]" : ""
-        } px-5`}
+        className={`flex flex-col grow min-h-dvh pt-7.5 ${pagePaddingBottom} px-5`}
       >
         <div className="grow">
           <StoreHeader storeName={menus?.storeName} isLoading={isLoading} />
@@ -46,14 +46,13 @@ const StorePage = () => {
           />
         </div>
       </div>
-      {cart && cart.length > 0 && (
+      {hasCartItems && (
         <PageFooterButton background="gradient">
           <Button
             textColor="white"
             onClick={() => navigate(`/${storeId}/order`)}
           >
             <TotalButton
-              key={cart.length}
               addedPrice={addedPrice}
               actionText="주문하기"
             />
diff --git a/apps/nowait-user/src/pages/order/orderDetails/OrderDetailsPage.tsx b/apps/nowait-user/src/pages/order/orderDetails/OrderDetailsPage.tsx
index 1c8856fe..9d8097d8 100644
--- a/apps/nowait-user/src/pages/order/orderDetails/OrderDetailsPage.tsx
+++ b/apps/nowait-user/src/pages/order/orderDetails/OrderDetailsPage.tsx
@@ -4,22 +4,7 @@ import BackOnlyHeader from "../../../components/BackOnlyHeader";
 import FullPageLoader from "../../../components/FullPageLoader";
 import EmptyOrderDetails from "./components/EmptyOrderDetails";
 import { getOrderDetails } from "../../../api/order";
-
-interface OrderDetailsType {
-  menuId: number;
-  menuName: string;
-  price: number;
-  quantity: number;
-}
-
-//주문내역 status에 따른 값, 컬러 객체
-const statusMap = {
-  WAITING_FOR_PAYMENT: { label: "입금 대기 중", color: "text-black-90" },
-  COOKING: { label: "조리 중", color: "text-black-90" },
-  COOKED: { label: "조리 완료", color: "text-black-60" },
-} as const;
-
-type OrderStatus = keyof typeof statusMap;
+import OrderCard from "./components/OrderCard";
 
 const OrderDetailsPage = () => {
   const { storeId } = useParams();
@@ -34,7 +19,7 @@ const OrderDetailsPage = () => {
   if (isLoading) return <FullPageLoader />;
 
   //주문내역 없을 시
-  if (!orderDetails || orderDetails?.length < 1) return <EmptyOrderDetails />;
+  if (!orderDetails || orderDetails?.length === 0) return <EmptyOrderDetails />;
 
   return (
     <div>
@@ -45,49 +30,7 @@ const OrderDetailsPage = () => {
         </h1>
         <ul>
           {orderDetails?.map((order) => {
-            // 주문 상태에 따른 값 보여주기
-            const statusData = statusMap[order?.status as OrderStatus];
-            return (
-              <li
-                key={order.orderId}
-                className="p-[22px] bg-white rounded-[22px] mb-4"
-              >
-                <div className="mb-7.5">
-                  <h1
-                    className={`text-title-18-bold mb-2 ${statusData.color}
-                    `}
-                  >
-                    {statusData.label}
-                  </h1>
-                  <p className="text-14-regular text-black-60">
-                    {order.createdAt}
-                  </p>
-                </div>
-                <ul className="border-b border-[#ececec] pb-5 mb-5">
-                  {order.items?.map((item: OrderDetailsType) => {
-                    return (
-                      <li
-                        key={item?.menuId}
-                        className="flex justify-between items-center mb-2.5 last:mb-0"
-                      >
-                        <h1 className="text-16-regular text-black-90">
-                          {item?.menuName}
-                        </h1>
-                        <span className="text-16-regular text-black-60">
-                          {item?.quantity}
-                        </span>
-                      </li>
-                    );
-                  })}
-                </ul>
-                <div className="flex justify-between items-center">
-                  <h1 className="text-16-semibold">결제금액</h1>
-                  <h2 className="text-16-semibold">
-                    {order.totalPrice.toLocaleString()}원
-                  </h2>
-                </div>
-              </li>
-            );
+            return <OrderCard key={order.orderId} order={order} />;
           })}
         </ul>
       </div>
diff --git a/apps/nowait-user/src/pages/order/orderDetails/components/OrderCard.tsx b/apps/nowait-user/src/pages/order/orderDetails/components/OrderCard.tsx
new file mode 100644
index 00000000..f1e744cf
--- /dev/null
+++ b/apps/nowait-user/src/pages/order/orderDetails/components/OrderCard.tsx
@@ -0,0 +1,62 @@
+import type {
+  OrderDetailsType,
+  OrderStatus,
+} from "../../../../types/order/order";
+
+interface OrderCardProps {
+  order: {
+    orderId: number;
+    status: OrderStatus;
+    createdAt: string;
+    items: OrderDetailsType[];
+    totalPrice: number;
+  };
+}
+
+//주문내역 status에 따른 값, 컬러 객체
+const ORDER_STATUS_MAP = {
+  WAITING_FOR_PAYMENT: { label: "입금 대기 중", color: "text-black-90" },
+  COOKING: { label: "조리 중", color: "text-black-90" },
+  COOKED: { label: "조리 완료", color: "text-black-60" },
+} as const;
+
+const OrderCard = ({ order }: OrderCardProps) => {
+    
+  const status = ORDER_STATUS_MAP[order.status];
+
+  return (
+    <li className="p-[22px] bg-white rounded-[22px] mb-4">
+      <header className="mb-7.5">
+        <h2 className={`text-title-18-bold mb-2 ${status.color}`}>
+          {status.label}
+        </h2>
+        <p className="text-14-regular text-black-60">{order.createdAt}</p>
+      </header>
+
+      <ul className="border-b border-[#ececec] pb-5 mb-5">
+        {order.items.map((item) => (
+          <li
+            key={item.menuId}
+            className="flex justify-between items-center mb-2.5 last:mb-0"
+          >
+            <span className="text-16-regular text-black-90">
+              {item.menuName}
+            </span>
+            <span className="text-16-regular text-black-60">
+              {item.quantity}
+            </span>
+          </li>
+        ))}
+      </ul>
+
+      <footer className="flex justify-between items-center">
+        <span className="text-16-semibold">결제금액</span>
+        <span className="text-16-semibold">
+          {order.totalPrice.toLocaleString()}원
+        </span>
+      </footer>
+    </li>
+  );
+};
+
+export default OrderCard;
diff --git a/apps/nowait-user/src/pages/order/remittance/RemittancePage.tsx b/apps/nowait-user/src/pages/order/remittance/RemittancePage.tsx
index ed83ca02..ef9721ed 100644
--- a/apps/nowait-user/src/pages/order/remittance/RemittancePage.tsx
+++ b/apps/nowait-user/src/pages/order/remittance/RemittancePage.tsx
@@ -16,6 +16,23 @@ import { useQuery } from "@tanstack/react-query";
 import { getStorePayments } from "../../../api/order";
 import { AnimatePresence } from "framer-motion";
 
+const REMIT_TYPE = {
+  KAKAO: "kakao",
+  TOSS: "toss",
+  NAVER: "naver",
+  DIRECT: "direct",
+} as const;
+
+type RemitType = (typeof REMIT_TYPE)[keyof typeof REMIT_TYPE];
+
+const getDefaultRemitValue = (remittance: any): RemitType | "" => {
+  if (remittance.kakaoPayUrl) return REMIT_TYPE.KAKAO;
+  if (remittance.tossUrl) return REMIT_TYPE.TOSS;
+  if (remittance.naverPayUrl) return REMIT_TYPE.NAVER;
+  if (remittance.accountNumber) return REMIT_TYPE.DIRECT;
+  return "";
+};
+
 const RemittancePage = () => {
   const navigate = useNavigate();
   const { storeId } = useParams();
@@ -45,32 +62,52 @@ const RemittancePage = () => {
       navigate(`/${storeId}`, { replace: true });
     }
   }, []);
+
   // 기본 선택 값 지정하기
   useEffect(() => {
     if (!remittance) return;
-
-    if (!(remittance.kakaoPayUrl === "")) setRemitValue("kakao");
-    else if (!(remittance.tossUrl === "")) setRemitValue("toss");
-    else if (!(remittance.naverPayUrl === "")) setRemitValue("naver");
-    else if (!(remittance.accountNumber === "")) setRemitValue("direct");
+    setRemitValue(getDefaultRemitValue(remittance));
   }, [remittance]);
 
-  const orderHandleButton = () => {
+  const validatePayer = () => {
     //입금자명을 입력하지 않고 이체 버튼 클릭 시 입금자명 input으로 포커스
     if (payer.trim() === "") {
-      payerFocus?.current?.focus();
       setErrorMessage("입금자명을 입력해주세요");
-      return;
+      payerFocus?.current?.focus();
+      return false;
     }
+
     if (payer.length > 10) {
-      payerFocus?.current?.focus();
       setErrorMessage("입금자명은 10자 이하로 입력해주세요");
-      return;
+      payerFocus?.current?.focus();
+      return false;
     }
+
     setErrorMessage(null);
+    return true;
+  };
+
+  const handleOrderClick = () => {
+    if (!validatePayer()) return;
     modal.open();
   };
 
+  const handleConfirm = () => {
+    if (!remittance) return;
+
+    const urlMap: Record<RemitType, string | undefined> = {
+      kakao: remittance.kakaoPayUrl,
+      toss: remittance.tossUrl,
+      naver: remittance.naverPayUrl,
+      direct: undefined,
+    };
+
+    const url = urlMap[remitValue as RemitType];
+    if (url) window.open(url, "_blank");
+
+    navigate(`/${storeId}/remittanceWait`, { state: payer });
+  };
+
   return (
     <div className="flex flex-col grow mt-12 mb-[116px]">
       <BackHeader title="주문하기" />
@@ -105,23 +142,14 @@ const RemittancePage = () => {
         </section>
       </section>
       <PageFooterButton background="gradient">
-        <Button textColor="white" onClick={orderHandleButton}>
+        <Button textColor="white" onClick={handleOrderClick}>
           <TotalButton variant="orderPage" actionText="이체하기" />
         </Button>
       </PageFooterButton>
       <AnimatePresence>
         {modal.isOpen && (
           <ConfirmModal
-            open={() => {
-              if (remitValue === "kakao") {
-                window.open(`${remittance?.kakaoPayUrl}`, "_blank");
-              } else if (remitValue === "toss") {
-                window.open(`${remittance?.tossUrl}`, "_blank");
-              } else if (remitValue === "naver") {
-                window.open(`${remittance?.naverPayUrl}`, "_blank");
-              }
-              navigate(`/${storeId}/remittanceWait`, { state: payer });
-            }}
+            open={handleConfirm}
             close={modal.close}
             title={`${
               remitValue === "direct" ? "직접 " : ""
diff --git a/apps/nowait-user/src/pages/waiting/storeDetail/StoreDetailPage.tsx b/apps/nowait-user/src/pages/waiting/storeDetail/StoreDetailPage.tsx
index c68cafa9..a8cc80a0 100644
--- a/apps/nowait-user/src/pages/waiting/storeDetail/StoreDetailPage.tsx
+++ b/apps/nowait-user/src/pages/waiting/storeDetail/StoreDetailPage.tsx
@@ -19,7 +19,7 @@ const StoreDetailPage = () => {
 
   return (
     <div>
-      <div className="px-5 min-h-dvh">
+      <div className="px-5 pb-[100px] min-h-dvh">
         <StoreHeaderSection
           bannerImages={store?.bannerImages}
           departmentName={store?.departmentName}