{(price * quantity).toLocaleString()}원
diff --git a/apps/nowait-user/src/pages/order/OrderListPage.tsx b/apps/nowait-user/src/pages/order/OrderListPage.tsx
index 0340e181..d8eddd29 100644
--- a/apps/nowait-user/src/pages/order/OrderListPage.tsx
+++ b/apps/nowait-user/src/pages/order/OrderListPage.tsx
@@ -1,4 +1,4 @@
-import MenuItem from "../../components/order/MenuItem";
+import CartItem from "../../components/order/CartItem";
import PageFooterButton from "../../components/order/PageFooterButton";
import { Button } from "@repo/ui";
import { useNavigate, useParams } from "react-router-dom";
@@ -6,8 +6,11 @@ import TotalButton from "../../components/order/TotalButton";
import { useCartStore } from "../../stores/cartStore";
import { AnimatePresence } from "framer-motion";
import EmptyCart from "../../components/order/EmptyCart";
-import axios from "axios";
-import { getTableId } from "../../utils/cartStorage";
+import { getTableId, setSessionData } from "../../utils/cartStorage";
+import { SmallActionButton } from "../../components/SmallActionButton";
+import Add from "../../assets/icon/Add.svg?react";
+import { sumTotalPrice } from "../../utils/sumUtils";
+import { createOrder } from "../../lib/order";
const OrderListPage = () => {
const navigate = useNavigate();
@@ -15,8 +18,6 @@ const OrderListPage = () => {
const tableId = getTableId();
const { cart } = useCartStore();
- const SERVER_URI = import.meta.env.VITE_SERVER_URI;
-
const orderHandleButton = async () => {
try {
const payload = {
@@ -25,17 +26,15 @@ const OrderListPage = () => {
menuId: item.menuId,
quantity: item.quantity,
})),
+ totalPrice: sumTotalPrice(cart),
};
- const url = `${SERVER_URI}/orders/create/${storeId}/${tableId}`;
- const res = await axios.post(url, payload);
- if (res.status === 201 && res.data.success) {
- console.log(res);
- localStorage.setItem("sessionId", res.data.response.sessionId);
- localStorage.setItem("depositorName", res.data.response.depositorName);
+ const res = await createOrder(storeId!, tableId!, payload);
+ if (res?.success) {
+ //세션 아이디, 입금자명 로컬스토리지 저장
+ setSessionData(res.response.sessionId, res.response.depositorName);
} else {
console.log("error");
}
-
navigate(`/${storeId}/payer`);
} catch (e) {
console.log(e);
@@ -48,13 +47,13 @@ const OrderListPage = () => {
총 주문 {cart.length}건
-
+
{cart.map((item) => {
return (
-
+ navigate(`/${storeId}`)}
+ icon={}
+ className="py-5 border-none"
+ >
+ 메뉴 추가하기
+
+
diff --git a/apps/nowait-user/src/pages/order/RedirectToStorePage.tsx b/apps/nowait-user/src/pages/order/RedirectToStorePage.tsx
index 815c21c7..63d4d314 100644
--- a/apps/nowait-user/src/pages/order/RedirectToStorePage.tsx
+++ b/apps/nowait-user/src/pages/order/RedirectToStorePage.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom";
const RedirectToStorePage = () => {
diff --git a/apps/nowait-user/src/pages/order/RemittanceRequestPage.tsx b/apps/nowait-user/src/pages/order/RemittanceRequestPage.tsx
index 1dd02c42..c49cccfc 100644
--- a/apps/nowait-user/src/pages/order/RemittanceRequestPage.tsx
+++ b/apps/nowait-user/src/pages/order/RemittanceRequestPage.tsx
@@ -1,32 +1,29 @@
-import { useState } from "react";
import PageFooterButton from "../../components/order/PageFooterButton";
import { Button } from "@repo/ui";
import copy from "../../assets/icon/copy.svg";
import useThrottle from "../../hooks/useThrottle";
-import Toast from "../../components/order/Toast";
import useModal from "../../hooks/useModal";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import ConfirmModal from "../../components/order/ConfirmModal";
+import { useToastStore } from "../../stores/toastStore";
const RemittanceRequestPage = () => {
- const [showToast, setShowToast] = useState(false);
-
+ const { showToast } = useToastStore();
const navigate = useNavigate();
const { storeId } = useParams();
const modal = useModal();
const price = useLocation().state;
const account = "기업은행 611-000202-01-010";
- const clipBoardDelay = 3000;
+ const clipBoardDelay = 2000;
const handleCopyClipBoard = useThrottle(() => {
navigator.clipboard.writeText(account);
- setShowToast(true);
- setTimeout(() => setShowToast(false), clipBoardDelay);
+ showToast("계좌번호가 복사되었습니다");
}, clipBoardDelay);
return (
-
-
+
+
주문을 위해 이체해 주세요
@@ -50,9 +47,9 @@ const RemittanceRequestPage = () => {
{price}원
-
+ {/*
{showToast && }
-
+
*/}
{modal.isOpen && (
navigate(`/${storeId}/order/success`)}
diff --git a/apps/nowait-user/src/pages/order/StorePage.tsx b/apps/nowait-user/src/pages/order/StorePage.tsx
index 636f4fae..f5186383 100644
--- a/apps/nowait-user/src/pages/order/StorePage.tsx
+++ b/apps/nowait-user/src/pages/order/StorePage.tsx
@@ -1,25 +1,36 @@
-import { useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
import PageFooterButton from "../../components/order/PageFooterButton";
import { Button } from "@repo/ui";
import TotalButton from "../../components/order/TotalButton";
import { useCartStore } from "../../stores/cartStore";
-import MenuList from "../../components/MenuList";
-import axios from "axios";
-
+import MenuList from "../../components/common/MenuList";
+import { useEffect } from "react";
+import { getMyOrderList } from "../../lib/order";
+import { useToastStore } from "../../stores/toastStore";
const StorePage = () => {
const navigate = useNavigate();
const { storeId } = useParams();
+ const tableId = localStorage.getItem("tableId");
+ const location = useLocation();
+ const added = (location.state as { added?: boolean } | null)?.added;
const { cart } = useCartStore();
-const SERVER_URI = import.meta.env.VITE_SERVER_URI;
- const a = async() => {
+ const { showToast } = useToastStore();
+
+ //메뉴 추가 시 toast 띄우기
+ useEffect(() => {
+ if (added) showToast("메뉴를 담았습니다");
+ navigate(location.pathname, { replace: true });
+ }, [added]);
+
+ const getMyOrderListButton = async () => {
try {
- const res = await axios.get(`${SERVER_URI}/orders/items/7/1`)
- console.log(res)
+ const res = await getMyOrderList(storeId, tableId!);
+ navigate(`/${storeId}/myOrderList`, { state: res });
} catch (error) {
- console.log(error)
+ console.log(error);
}
- }
+ };
return (
@@ -30,7 +41,7 @@ const SERVER_URI = import.meta.env.VITE_SERVER_URI;
5번 테이블
{cart && cart.length > 0 && (
-
)}
diff --git a/apps/nowait-user/src/pages/reserve/StoreDetailPage.tsx b/apps/nowait-user/src/pages/reserve/StoreDetailPage.tsx
index b797fe71..5e68b5f0 100644
--- a/apps/nowait-user/src/pages/reserve/StoreDetailPage.tsx
+++ b/apps/nowait-user/src/pages/reserve/StoreDetailPage.tsx
@@ -1,4 +1,4 @@
-import MenuList from "../../components/MenuList";
+import MenuList from "../../components/common/MenuList";
import Arrow from "../../assets/icon/arrow-right.svg?react";
import MapPin from "../../assets/icon/map-pin.svg?react";
import Clock from "../../assets/icon/clock.svg?react";
diff --git a/apps/nowait-user/src/stores/cartStore.ts b/apps/nowait-user/src/stores/cartStore.ts
index 700d9fd5..77a924d0 100644
--- a/apps/nowait-user/src/stores/cartStore.ts
+++ b/apps/nowait-user/src/stores/cartStore.ts
@@ -1,12 +1,12 @@
import { create } from "zustand";
-import type { CartItem } from "../types/order/cart";
import { persist } from "zustand/middleware";
+import type { CartType } from "../types/order/cart";
interface CartState {
- cart: CartItem[];
+ cart: CartType[];
increaseQuantity: (id: string, price: number) => void;
decreaseQuantity: (id: string, price: number) => void;
- addToCart: (item: CartItem) => void;
+ addToCart: (item: CartType) => void;
removeFromCart: (id: string) => void;
clearCart: () => void;
}
@@ -15,10 +15,11 @@ export const useCartStore = create
()(
persist(
(set) => ({
cart: [],
+ // 메뉴 수량 증가
increaseQuantity: (id, price) =>
set(({ cart }) => ({
cart: cart.map((item) => {
- return item.id === id
+ return item.menuId === id
? {
...item,
quantity: item.quantity + 1,
@@ -27,10 +28,11 @@ export const useCartStore = create()(
: item;
}),
})),
+ //메뉴 수량 감소
decreaseQuantity: (id, price) =>
set(({ cart }) => ({
cart: cart.map((item) => {
- return item.id === id
+ return item.menuId === id
? {
...item,
quantity: item.quantity - 1,
@@ -39,15 +41,17 @@ export const useCartStore = create()(
: item;
}),
})),
+ //메뉴 추가(같은 메뉴가 있다면 기존 수량에 합산, 없으면 새 메뉴 추가)
addToCart: (item) =>
set(({ cart }) => {
const existingIndex = cart.findIndex(
- (cartItem) => cartItem.id === item.id
+ (cartItem) => cartItem.menuId === item.menuId
);
if (existingIndex !== -1) {
const updatedCart = [...cart];
updatedCart[existingIndex] = {
...updatedCart[existingIndex],
+ price : updatedCart[existingIndex].price + item.price,
quantity: updatedCart[existingIndex].quantity + item.quantity,
};
return { cart: updatedCart }; // 수량 변경
@@ -55,10 +59,12 @@ export const useCartStore = create()(
return { cart: [...cart, item] }; // 새 메뉴 추가
}
}),
+ // 메뉴 삭제
removeFromCart: (id) =>
set((state) => ({
- cart: state.cart.filter((item) => item.id !== id),
+ cart: state.cart.filter((item) => item.menuId !== id),
})),
+ // 장바구니 전체 삭제(key는 남아있고, value만 삭제)
clearCart: () => set({ cart: [] }),
}),
{ name: "cart-storage" }
diff --git a/apps/nowait-user/src/stores/toastStore.ts b/apps/nowait-user/src/stores/toastStore.ts
new file mode 100644
index 00000000..eb9d7749
--- /dev/null
+++ b/apps/nowait-user/src/stores/toastStore.ts
@@ -0,0 +1,27 @@
+import { create } from "zustand";
+
+let toastTimeout: ReturnType | null = null;
+
+interface ToastState {
+ message: string;
+ isOpen: boolean;
+ showToast: (message: string, duration?: number) => void;
+ clearToastTimeout: () => void;
+}
+
+export const useToastStore = create((set) => ({
+ message: "",
+ isOpen: false,
+ showToast: (message, duration = 2000) => {
+ if (toastTimeout) clearTimeout(toastTimeout);
+ set({ message, isOpen: true });
+ toastTimeout = setTimeout(() => {
+ set({ message: "", isOpen: false });
+ toastTimeout = null;
+ }, duration);
+ },
+ clearToastTimeout: () => {
+ if (toastTimeout) clearTimeout(toastTimeout);
+ toastTimeout = null;
+ },
+}));
diff --git a/apps/nowait-user/src/utils/cartStorage.ts b/apps/nowait-user/src/utils/cartStorage.ts
index 51c58929..8f50e87f 100644
--- a/apps/nowait-user/src/utils/cartStorage.ts
+++ b/apps/nowait-user/src/utils/cartStorage.ts
@@ -1,4 +1,4 @@
-import type { CartItem } from "../types/order/cart";
+import type { CartType } from "../types/order/cart";
const CART_KEY = "cart";
@@ -7,7 +7,15 @@ export const getTableId = (): string => {
return tableId || "";
};
-export const getcart = (): CartItem[] => {
+
+//주문 시 세션 아이디, 입금자명 로컬스토리지에 저장
+export const setSessionData = (sessionId: string, depositorName: string) => {
+ localStorage.setItem("sessionId", sessionId);
+ localStorage.setItem("depositorName", depositorName);
+};
+
+
+export const getcart = (): CartType[] => {
const cartString = localStorage.getItem(CART_KEY);
try {
const parsedCart = cartString ? JSON.parse(cartString) : [];
@@ -17,9 +25,9 @@ export const getcart = (): CartItem[] => {
}
};
-export const addToCart = (newItem: CartItem) => {
+export const addToCart = (newItem: CartType) => {
const cart = getcart();
- const existingItem = cart.find((item) => item.id === newItem.id);
+ const existingItem = cart.find((item) => item.menuId === newItem.menuId);
if (existingItem) {
existingItem.quantity += newItem.quantity;
existingItem.price += newItem.price;
diff --git a/apps/nowait-user/src/utils/sumUtils.ts b/apps/nowait-user/src/utils/sumUtils.ts
index 3294ffde..84874533 100644
--- a/apps/nowait-user/src/utils/sumUtils.ts
+++ b/apps/nowait-user/src/utils/sumUtils.ts
@@ -1,4 +1,4 @@
-import type { CartItem } from "../types/order/cart";
+import type { CartType } from "../types/order/cart";
export const sumQuantity = (
items: T[],
@@ -7,10 +7,10 @@ export const sumQuantity = (
return items.reduce((acc, cur) => acc + Number(cur[key]), 0);
};
-export const sumTotalPrice = (items: CartItem[]) => {
+export const sumTotalPrice = (items: CartType[]) => {
const totalPrice = items.reduce(
(acc, cur) => acc + cur.price,
0
);
- return totalPrice.toLocaleString();
+ return totalPrice;
};
diff --git a/package.json b/package.json
index 14d19b23..c84625d6 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,8 @@
},
"dependencies": {
"clsx": "^2.1.1",
+ "framer-motion": "^12.20.1",
+ "react-toastify": "^11.0.5",
"zustand": "^5.0.6"
}
}
diff --git a/yarn.lock b/yarn.lock
index d142d3da..463e6bb3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3751,6 +3751,8 @@ __metadata:
dependencies:
"@yarnpkg/sdks": "npm:^3.2.2"
clsx: "npm:^2.1.1"
+ framer-motion: "npm:^12.20.1"
+ react-toastify: "npm:^11.0.5"
turbo: "npm:^2.5.4"
typescript: "npm:^5.8.3"
zustand: "npm:^5.0.6"
@@ -3942,6 +3944,7 @@ __metadata:
react: "npm:^19.1.0"
react-dom: "npm:^19.1.0"
react-router-dom: "npm:^7.6.2"
+ react-toastify: "npm:^11.0.5"
tailwindcss: "npm:^4.1.5"
typescript: "npm:~5.8.3"
typescript-eslint: "npm:^8.30.1"
@@ -4228,6 +4231,18 @@ __metadata:
languageName: node
linkType: hard
+"react-toastify@npm:^11.0.5":
+ version: 11.0.5
+ resolution: "react-toastify@npm:11.0.5"
+ dependencies:
+ clsx: "npm:^2.1.1"
+ peerDependencies:
+ react: ^18 || ^19
+ react-dom: ^18 || ^19
+ checksum: 10c0/50f5b81323ebb1957b2efd0963fac24aa1407155d16ab756ffd6d0f42f8af17e796b3958a9fce13e9d1b945d6c3a5a9ebf13529478474d8a2af4bf1dd0db67d2
+ languageName: node
+ linkType: hard
+
"react@npm:^19.1.0":
version: 19.1.0
resolution: "react@npm:19.1.0"