refactor: order 폴더 구조 변경

.gitignore

@@ -9,6 +9,7 @@ dist-ssr
 server/dist
 public/dist
 .yarn/install-state.gz
+yarn.lock
 
 .pnp
 .pnp.js

apps/nowait-admin/tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/AdminSidebar.tsx","./src/components/ImageBox.tsx","./src/components/MenuItem.tsx","./src/components/MobileMenuBar.tsx","./src/components/RedBadge.tsx","./src/components/closeButton.tsx","./src/hooks/usePostAdminLogin.tsx","./src/hooks/useWindowWidth.tsx","./src/layout/AdminLayout.tsx","./src/pages/AdminAnalytics/AdminAnalytics.tsx","./src/pages/AdminAuth/AdminAuth.tsx","./src/pages/AdminHome/AdminHome.tsx","./src/pages/AdminHome/components/CardBox.tsx","./src/pages/AdminHome/components/RoundTabButton.tsx","./src/pages/AdminHome/components/WaitingCard.tsx","./src/pages/AdminOrders/AdminOrders.tsx","./src/pages/AdminOrders/CookedPage.tsx","./src/pages/AdminOrders/OrderCard.tsx","./src/pages/LoingPage/LoginPage.tsx","./src/pages/NotFound/NotFound.tsx","./src/utils/UserApi.tsx"],"version":"5.8.3"}
+{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/AdminSidebar.tsx","./src/components/ImageBox.tsx","./src/components/MenuItem.tsx","./src/components/MobileMenuBar.tsx","./src/components/RedBadge.tsx","./src/components/closeButton.tsx","./src/hooks/useGetReservationList.tsx","./src/hooks/usePostAdminLogin.tsx","./src/hooks/useWindowWidth.tsx","./src/layout/AdminLayout.tsx","./src/pages/AdminAnalytics/AdminAnalytics.tsx","./src/pages/AdminAuth/AdminAuth.tsx","./src/pages/AdminHome/AdminHome.tsx","./src/pages/AdminHome/components/CardBox.tsx","./src/pages/AdminHome/components/RoundTabButton.tsx","./src/pages/AdminHome/components/WaitingCard.tsx","./src/pages/AdminOrders/AdminOrders.tsx","./src/pages/AdminOrders/CookedPage.tsx","./src/pages/AdminOrders/OrderCard.tsx","./src/pages/LoingPage/LoginPage.tsx","./src/pages/NotFound/NotFound.tsx","./src/utils/UserApi.tsx"],"errors":true,"version":"5.8.3"}

apps/nowait-user/package.json

@@ -18,6 +18,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.6.2",
+    "react-toastify": "^11.0.5",
     "zustand": "^5.0.6"
   },
   "devDependencies": {

apps/nowait-user/src/App.tsx

@@ -1,6 +1,8 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Router from "./routes/Router";
 import { BrowserRouter } from "react-router-dom";
+import GlobalToast from "./components/common/toast/Toast";
+import 'react-toastify/dist/ReactToastify.css';
 
 function App() {
   const queryClient = new QueryClient();
@@ -9,6 +11,7 @@ function App() {
     <QueryClientProvider client={queryClient}>
       <BrowserRouter>
         <Router />
+        <GlobalToast/>
       </BrowserRouter>
     </QueryClientProvider>
   );

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

@@ -0,0 +1,30 @@
+interface PropsType {
+  type?: "button" | "submit" | "reset";
+  ariaLabel: string;
+  children: React.ReactNode;
+  onClick: () => void;
+  icon?: React.ReactNode;
+  iconPosition?: "left" | "right";
+  className?: string;
+}
+export const SmallActionButton = ({
+  type = "button",
+  children,
+  onClick,
+  ariaLabel,
+
+  className,
+}: PropsType) => {
+  return (
+    <button
+      type={type}
+      aria-label={ariaLabel}
+      className={`${className} py-2 px-4 rounded-[12px] border border-[#ececec] text-black-70`}
+      onClick={onClick}
+    >
+      <p className="flex items-center justify-center gap-1 text-[14px] font-bold">
+        {children}
+      </p>
+    </button>
+  );
+};

apps/nowait-user/src/components/MenuList.tsx → apps/nowait-user/src/components/common/MenuList.tsx

@@ -1,5 +1,5 @@
 import { useNavigate, useParams } from "react-router-dom";
-import type { MenuType } from "../types/order/menu";
+import type { MenuType } from "../../types/order/menu";
 
 const dummyData: MenuType[] = [
   {
@@ -25,9 +25,25 @@ const dummyData: MenuType[] = [
     price: 9000,
     image: "",
   },
+   {
+    id: "4",
+    name: "파인애플 샤베트2",
+    description:
+      "시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.",
+    price: 9000,
+    image: "",
+  },
+   {
+    id: "5",
+    name: "파인애플 샤베트3",
+    description:
+      "시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.",
+    price: 9000,
+    image: "",
+  },
 ];
 
-const MenuList = ({ mode } : { mode: string }) => {
+const MenuList = ({ mode }: { mode: string }) => {
   const navigate = useNavigate();
   const { storeId } = useParams();
   return (
@@ -39,7 +55,9 @@ const MenuList = ({ mode } : { mode: string }) => {
             <li key={data.id} className="mb-5">
               <button
                 onClick={() =>
-                  navigate(`/${storeId}/menu/${data.id}`, { state: data })
+                  navigate(`/${storeId}/menu/${data.id}`, {
+                    state: data,
+                  })
                 }
                 className="w-full flex justify-between cursor-pointer text-left"
               >

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

@@ -1,12 +1,13 @@
 import React from "react";
-import minus from "../../assets/icon/minus.svg";
-import plus from "../../assets/icon/plus.svg";
+import Minus from "../../assets/icon/minus.svg?react";
+import Plus from "../../assets/icon/plus.svg?react";
 
 interface stateProps {
   mode: "state";
   quantity: number;
   setQuantity: React.Dispatch<React.SetStateAction<number>>;
 }
+
 interface storeProps {
   mode: "store";
   id: string;
@@ -15,12 +16,16 @@ interface storeProps {
   increaseQuantity: (id: string, price: number) => void;
   decreaseQuantity: (id: string, price: number) => void;
 }
+
 type PropsType = stateProps | storeProps;
 
 const QuantitySelector = (props: PropsType) => {
+
   const increaseQuantityButton = () => {
+    // 전체 주문 페이지에서 수량 컨트롤(로컬 스토리지에 바로 반영)
     if (props.mode === "store") {
       props.increaseQuantity(props.id, props.price);
+    // 메뉴 추가 페이지에서 수량 컨트롤(메뉴 추가 페이지에서 추가하기 클릭 전까지 로컬 스토리지에 반영x)
     } else if (props.mode === "state") {
       props.setQuantity(props.quantity + 1);
     }
@@ -36,13 +41,11 @@ const QuantitySelector = (props: PropsType) => {
   return (
     <div className="flex items-center justify-end gap-0.5">
       <button
-        className={`bg-[#F2F6F9] rounded-[7px] w-[28px] h-[28px] flex items-center justify-center ${
-          props.quantity === 1 ? "bg-[#e6e8eb]" : "bg-[#F2F6F9]"
-        }`}
+        className="bg-[#F2F6F9] rounded-[7px] w-[28px] h-[28px] flex items-center justify-center"
         disabled={props.quantity === 1}
         onClick={decreaseQuantityButton}
       >
-        <img src={minus} alt="수량 마이너스 아이콘" />
+        <Minus fill={`${props.quantity === 1?"#ececec": "#97A7B2"}`}/>
       </button>
       <p
         className={`w-[30px] text-center ${
@@ -58,7 +61,7 @@ const QuantitySelector = (props: PropsType) => {
         className="bg-[#F2F6F9] rounded-[7px] w-[28px] h-[28px]  flex items-center justify-center"
         onClick={increaseQuantityButton}
       >
-        <img src={plus} alt="수량 마이너스 아이콘" />
+        <Plus/>
       </button>
     </div>
   );

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

@@ -1,5 +1,7 @@
 import PageFooterButton from "../order/PageFooterButton";
 import { Button } from "@repo/ui";
+import { SmallActionButton } from "../SmallActionButton";
+import { useNavigate, useParams } from "react-router-dom";
 
 interface PropsType {
   imageSrc: string;
@@ -18,19 +20,31 @@ const SuccessMessagePage = ({
   onClick,
   buttonText,
 }: PropsType) => {
+  const navigate = useNavigate();
+  const { storeId } = useParams();
   return (
-    <div>
-      <div className="min-h-screen flex flex-col justify-center items-center text-center">
+    <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-2.5 w-[210px] h-[210px] bg-amber-300"
+          className="mb-2.5 w-[210px] h-[210px] bg-black-25"
           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">
+        <h2 className="whitespace-pre-line text-16-regular text-black-70 mb-3.5">
           {message}
         </h2>
+        {storeId && (
+          <SmallActionButton
+            type="button"
+            ariaLabel="주문내역 확인"
+            onClick={() => navigate(`/${storeId}`)} //주문 내역 페이지로 변경하기
+          >
+            주문내역 확인
+          </SmallActionButton>
+        )}
       </div>
+
       <PageFooterButton>
         <Button textColor="white" onClick={onClick}>
           {buttonText}

apps/nowait-user/src/components/common/toast/Toast.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+import { useToastStore } from "../../../stores/toastStore";
+import { motion } from "framer-motion";
+
+const Toast = () => {
+  const { message, isOpen, clearToastTimeout } = useToastStore();
+
+  useEffect(() => {
+    return () => {
+      clearToastTimeout();
+    };
+  }, [clearToastTimeout]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed left-1/2 bottom-[124px] -translate-x-1/2 z-50">
+      <motion.div
+        initial={{ opacity: 0, y: "100%" }}
+        animate={{ opacity: 1, y: "30%" }}
+        transition={{ duration: 0.4, ease: "easeInOut" }}
+        className="flex justify-center items-center px-4 py-2.5 rounded-[999px] bg-[#F2F6F9]"
+      >
+        <p className="text-14-medium text-navy-70">{message}</p>
+      </motion.div>
+    </div>
+  );
+};
+
+export default Toast;

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

@@ -1,21 +1,23 @@
 import { sumQuantity, sumTotalPrice } from "../../utils/sumUtils";
 import { useCartStore } from "../../stores/cartStore";
-import { useLocation, useParams } from "react-router-dom";
 
-const TotalButton = () => {
+interface PropsType {
+  variant?: "default" | "orderPage";
+  actionText: string;
+}
+
+const TotalButton = ({ variant = "default", actionText }: PropsType) => {
   const { cart } = useCartStore();
-  const { storeId } = useParams();
-  const pathname = useLocation().pathname;
 
   return (
     <>
-      {pathname !== `/${storeId}/order` && (
+      {variant !== "orderPage" && (
         <span className="text-[14px] font-extrabold rounded-[5px] px-1.5 bg-white text-black">{`${sumQuantity(
           cart,
           "quantity"
         )}`}</span>
       )}
-      {`${sumTotalPrice(cart)}원 주문하기`}
+      {`${sumTotalPrice(cart).toLocaleString()}원 ${actionText}`}
     </>
   );
 };

apps/nowait-user/src/global.css

@@ -37,11 +37,13 @@ body {
   display: flex;
   min-width: 100vw;
   min-height: 100vh;
+  background-color: #222;
 }
 
 #root {
   max-width: 430px;
   min-width: 360px;
+  background-color: #fff;
   width: 100%;
   margin: 0 auto;
 }
@@ -131,3 +133,19 @@ body {
 .scrollbar-hide::-webkit-scrollbar {
   display: none; /* Chrome, Safari and Opera */
 }
+
+.order-toast {
+  font-family: 'pretendard';
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 144%;
+  max-width: 11.25rem;
+  max-height: 17px;
+  color: var(--navy-70);
+  background-color: #F2F6F9;
+  /* display: flex; */
+  padding: unset !important;
+  justify-content: center;
+  text-align: center;
+  border-radius: 999px;
+}

apps/nowait-user/src/hooks/useTimeout.ts

@@ -0,0 +1,10 @@
+import { useEffect } from "react";
+
+const useTimeout = (delay:number) => {
+  useEffect(() => {
+    const timeOut = setTimeout(() => console.log(), delay);
+    return () => {
+      clearTimeout(timeOut);
+    };
+  });
+};