주문 페이지 코드 정리 및 수정

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`,
+});

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;
 };

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

@@ -4,21 +4,15 @@ 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 (
   publicCode: string,
   tableId: number,
   payload: OrderType
 ): Promise<CreateOrderServerResponse> => {
-  const res = await UserApi.post(
+  const res = await authApi.post(
     `/stores/${publicCode}/tables/${tableId}/orders`,
     payload
   );
@@ -30,15 +24,15 @@ 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;
 };
 
 //주점 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;

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>
   );

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;

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="주문하기"
             />

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>

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;