feat: 주문 내역 페이지 api 연결 및 변경된 UI 적용

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

@@ -1,8 +1,5 @@
-import axios from "axios";
 import UserApi from "../utils/UserApi";
 
-const SERVER_URI = import.meta.env.VITE_SERVER_URI;
-
 interface ReservationType {
   partySize: number;
 }

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

@@ -1,5 +1,6 @@
 import { useNavigate, useParams } from "react-router-dom";
 import type { MenuType } from "../../types/order/menu";
+import defaultMenuImageSm from "../../assets/default-menu-image-sm.png"
 
 interface PropsType {
   data: MenuType;
@@ -32,7 +33,7 @@ const MenuItem = ({ data, mode }: PropsType) => {
         </div>
         <img
           className="w-[80px] h-[80px] bg-black-25 rounded-[12px] object-cover"
-          src={`${data.image}` || "/default-menu.png"}
+          src={`${data.image}` || defaultMenuImageSm}
           alt="음식 메뉴 이미지"
         />
       </button>

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

@@ -1,7 +1,7 @@
 import React from "react";
 import Minus from "../../assets/icon/minus.svg?react";
 import Plus from "../../assets/icon/plus.svg?react";
-import NumberFlow, { continuous } from "@number-flow/react";
+import NumberFlow from "@number-flow/react";
 
 interface stateProps {
   mode: "state";
@@ -59,7 +59,7 @@ const QuantitySelector = (props: PropsType) => {
             : "text-16-semibold"
         } text-balck-80`}
       >
-        <NumberFlow value={props.quantity} plugins={[continuous]} />
+        <NumberFlow value={props.quantity}/>
       </p>
       <button
         className={`${

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

@@ -1,7 +1,6 @@
-import PageFooterButton from "../order/PageFooterButton";
-import { Button } from "@repo/ui";
 import { SmallActionButton } from "../SmallActionButton";
 import { useNavigate, useParams } from "react-router-dom";
+import CenteredContentLayout from "../layout/CenteredContentLayout";
 
 interface PropsType {
   imageSrc: string;
@@ -23,34 +22,22 @@ const SuccessMessagePage = ({
   const navigate = useNavigate();
   const { storeId } = useParams();
   return (
-    <div className="flex flex-col h-screen">
-      <div className="flex flex-1 flex-col justify-center items-center text-center overflow-y-auto px-5">
-        <img
-          className="mb-5"
-          src={imageSrc}
-          alt={imageAlt}
-        />
-        <h1 className="text-headline-24-bold mb-2">{title}</h1>
-        <h2 className="whitespace-pre-line text-16-regular text-black-70 mb-3.5">
-          {message}
-        </h2>
-        {storeId && (
-          <SmallActionButton
-            type="button"
-            ariaLabel="주문내역 확인"
-            onClick={() => navigate(`/${storeId}/orderDetails`)}
-          >
-            주문내역 확인
-          </SmallActionButton>
-        )}
-      </div>
-
-      <PageFooterButton>
-        <Button textColor="white" onClick={onClick}>
-          {buttonText}
-        </Button>
-      </PageFooterButton>
-    </div>
+    <CenteredContentLayout onClick={onClick} buttonText={buttonText}>
+      <img src={imageSrc} alt={imageAlt} />
+      <h1 className="text-headline-24-bold mb-2">{title}</h1>
+      <h2 className="whitespace-pre-line text-16-regular text-black-70 mb-3.5">
+        {message}
+      </h2>
+      {storeId && (
+        <SmallActionButton
+          type="button"
+          ariaLabel="주문내역 확인"
+          onClick={() => navigate(`/${storeId}/orderDetails`)}
+        >
+          주문내역 확인
+        </SmallActionButton>
+      )}
+    </CenteredContentLayout>
   );
 };
 

apps/nowait-user/src/components/layout/CenteredContentLayout.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import PageFooterButton from "../order/PageFooterButton";
+import { Button } from "@repo/ui";
+
+const CenteredContentLayout = ({
+  children,
+  onClick,
+  buttonText,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+  buttonText: string;
+}) => {
+  return (
+    <div className="flex justify-center items-center min-h-screen-dvh">
+      <div className="flex flex-col items-center text-center px-5 mt-[110px]">
+        {children}
+      </div>
+      <PageFooterButton>
+        <Button textColor="white" onClick={onClick}>
+          {buttonText}
+        </Button>
+      </PageFooterButton>
+    </div>
+  );
+};
+
+export default CenteredContentLayout;

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

@@ -8,7 +8,7 @@ const PageFooterButton = ({
   className?: string;
 }) => {
   return (
-    <footer className="fixed left-1/2 -translate-x-1/2 bottom-0 w-full max-w-[430px] min-w-[320px] bg-[linear-gradient(to_top,_white_80%,_transparent_100%)]">
+    <footer className="fixed bottom-0 w-full max-w-[430px] min-w-[320px] bg-[linear-gradient(to_top,_white_80%,_transparent_100%)]">
       <div className={`${className} flex justify-center py-8 px-5`}>
         {children}
       </div>

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

@@ -18,7 +18,7 @@ const TotalButton = ({ variant = "default", actionText }: PropsType) => {
           {sumQuantity(cart, "quantity")}
         </span>
       )}
-      <NumberFlow value={totalPrice} suffix={`원 ${actionText}`} trend={1} />
+      <NumberFlow value={totalPrice} suffix={`원 ${actionText}`}/>
     </div>
   );
 };

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

@@ -6,6 +6,7 @@ import { Button } from "@repo/ui";
 import type { CartType } from "../../../types/order/cart";
 import { useCartStore } from "../../../stores/cartStore";
 import NumberFlow from "@number-flow/react";
+import defaultMenuImageLg from "../../../assets/default-menu-image-lg.png";
 
 const AddMenuPage = () => {
   const location = useLocation();
@@ -21,6 +22,7 @@ const AddMenuPage = () => {
       image,
       name,
       quantity,
+      originPrice: price,
       price: price * quantity,
     };
     addToCart(item);
@@ -31,7 +33,11 @@ const AddMenuPage = () => {
     <div className="flex flex-col h-screen">
       <div className="flex-1 overflow-y-auto px-5">
         <h1 className="-mx-5">
-          <img className="w-full" src={image} alt="음식 메뉴 이미지" />
+          <img
+            className="w-full"
+            src={image || defaultMenuImageLg}
+            alt="음식 메뉴 이미지"
+          />
         </h1>
         <div className="py-8">
           <h1 className="text-headline-22-bold mb-2">{name}</h1>
@@ -42,8 +48,7 @@ const AddMenuPage = () => {
       <div className="sticky left-0 bottom-[124px] bg-white">
         <div className="w-full flex justify-between items-center px-5">
           <h1 className="text-[24px] font-semibold">
-            <NumberFlow value={(price * quantity)} suffix="원"/>
-            {/* {(price * quantity).toLocaleString()}원 */}
+            <NumberFlow value={price * quantity} suffix="원" />
           </h1>
           <QuantitySelector
             mode="state"

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

@@ -17,7 +17,6 @@ const RedirectToStorePage = () => {
       const isDifferentTable = prevTableId && prevTableId !== tableId;
       //이전 storeId 또는 tableId가 변경 되었고, 장바구니에 메뉴가 담겨있을 시 장바구니 비우기
       if ((isDifferentStore || isDifferentTable) && cart.length > 0) {
-        localStorage.removeItem("depositorName")
         clearCart();
       }
       //테이블 아이디 로컬스토리지 저장

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

@@ -2,74 +2,88 @@ import EmptyOrderDetails from "./components/EmptyOrderDetails";
 import { useQuery } from "@tanstack/react-query";
 import { getOrderDetails } from "../../../api/order";
 import { useParams } from "react-router-dom";
+import { formatDate } from "../../../utils/formatDate";
 
 interface OrderDetailsType {
-  orderId: string;
+  menuId: string;
   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" },
+};
+type OrderStatus = keyof typeof statusMap;
+
 const OrderDetailsPage = () => {
   const { storeId } = useParams();
   const tableId = localStorage.getItem("tableId");
 
   const { data } = useQuery({
     queryKey: ["orderDetails", storeId, tableId],
     queryFn: () => getOrderDetails(storeId, tableId!),
-    select: (data) => data.response[0],
+    select: (data) => data.response,
   });
-  console.log(data)
-  //주문내역 status에 따른 값, 컬러 객체
-  const statusMap = {
-    WAITING_FOR_PAYMENT: { label: "입금 대기 중", color: "text-black-90" },
-    COOKING: { label: "조리 중", color: "text-black-90" },
-    COOKED: { label: "조리 완료", color: "text-black-60" },
-  };
-  type OrderStatus = keyof typeof statusMap;
-  const statusData = statusMap[data?.status as OrderStatus];
 
   //주문내역 없을 시
-  if (!data || data?.items?.length < 1) return <EmptyOrderDetails />;
+  if (!data || data?.length < 1) return <EmptyOrderDetails />;
 
   return (
     <div>
       <div className="bg-black-15 min-h-screen py-[30px] px-5">
         <h1 className="text-headline-24-bold mb-[23px] text-black-90">
-          주문내역 <span className="text-primary">{data.items.length}건</span>
+          주문내역 <span className="text-primary">{data.length}건</span>
         </h1>
         <ul>
-          <li className="p-[22px] bg-white rounded-[22px] mb-4">
-            <div className="mb-7.5">
-              <h1 className={`text-title-20-bold mb-2${statusData.color} `}>
-                {statusData.label}
-              </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">
-              {data?.items?.map((item: OrderDetailsType) => {
-                return (
-                  <li
-                    key={item.orderId}
-                    className="flex justify-between items-center mb-2.5 last:mb-0"
+          {data.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-20-bold mb-2 ${statusData.color}
+                    `}
                   >
-                    <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">36,000원</h2>
-            </div>
-          </li>
+                    {statusData.label}
+                  </h1>
+                  <p className="text-14-regular text-black-60">
+                    {formatDate(order.createdAt)}
+                  </p>
+                </div>
+                <ul className="border-b-1 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>
+            );
+          })}
         </ul>
       </div>
     </div>

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

@@ -32,6 +32,7 @@ const OrderListPage = () => {
                   key={item.menuId}
                   id={item.menuId}
                   name={item.name}
+                  originPrice={item.originPrice}
                   price={item.price}
                   quantity={item.quantity}
                 />

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

@@ -3,16 +3,16 @@ import Close from "../../../../assets/icon/close.svg?react";
 import { useCartStore } from "../../../../stores/cartStore";
 import { motion } from "framer-motion";
 import { useState } from "react";
-import NumberFlow from "@number-flow/react";
 
 interface PropsType {
   id: string;
   name: string;
+  originPrice: number;
   price: number;
   quantity: number;
 }
 
-const CartItem = ({ id, name, price, quantity }: PropsType) => {
+const CartItem = ({ id, name, originPrice, price, quantity }: PropsType) => {
   const { removeFromCart, increaseQuantity, decreaseQuantity } = useCartStore();
   const [isRemoving, setIsRemoving] = useState(false);
   return (
@@ -31,7 +31,7 @@ const CartItem = ({ id, name, price, quantity }: PropsType) => {
               {name}
             </h1>
             <h2 className="text-title-18-bold">
-              <NumberFlow value={price} suffix="원" />
+              {originPrice.toLocaleString()}원
             </h2>
           </div>
           <button

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

@@ -1,14 +1,14 @@
 import { useNavigate, useParams } from "react-router-dom";
 import SuccessMessagePage from "../../../components/common/SuccessMessagePage";
-import successImage from "../../../assets/success.png";
+import orderSuccess from "../../../assets/orderSuccess.png"
 
 const OrderSuccessPage = () => {
   const navigate = useNavigate();
   const { storeId } = useParams();
 
   return (
     <SuccessMessagePage
-      imageSrc={successImage}
+      imageSrc={orderSuccess}
       imageAlt="주문 완료 이미지"
       title="주문이 접수되었어요!"
       message={`입금 확인 후 조리를 진행할게요.\n조금만 기다려 주세요.`}

apps/nowait-user/src/pages/order/remittance/components/OrderSummary.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import type { CartType } from "../../../../types/order/cart";
 import ArrowDown from "../../../../assets/icon/arrow_down.svg?react";
+import defaultMenuImageSm from "../../../../assets/default-menu-image-sm.png"
 import SlideToggle from "./SlideToggle";
 
 interface PropsType {
@@ -52,7 +53,7 @@ const OrderSummary = ({ cart }: PropsType) => {
                 </div>
                 <img
                   className="w-[76px] h-[76px] rounded-[12px] object-cover"
-                  src={`${item.image}` || "/default-menu.png"}
+                  src={`${item.image}` || defaultMenuImageSm}
                   alt="음식 메뉴 이미지"
                 />
               </li>