-
-
-
- {/* 메뉴 가격 및 수량 컨트롤 */}
-
- 
-
-
-
- - {menu!.name} -
-- {menu!.description} -
-
-
+
-
-
-
-
-
-
+ 
+
+
+
+
+ {menu.name}
+ {menu.description && ( ++ {menu.description} +
+ )} +
+
+
+
+
+
+
+
+
- {
+ const navigate = useNavigate();
+
+ return (
+
+
+ {cart.map((item) => (
+
+ navigate(`/${storeId}`, { state: { isBack: true } })}
+ className="py-5 border-none"
+ >
+ 메뉴 추가하기
+
+
+
+
+
+ );
+};
+
+export default CartList;
diff --git a/apps/nowait-user/src/pages/order/orderList/components/OrderFooter.tsx b/apps/nowait-user/src/pages/order/orderList/components/OrderFooter.tsx
new file mode 100644
index 00000000..5b1fbdf0
--- /dev/null
+++ b/apps/nowait-user/src/pages/order/orderList/components/OrderFooter.tsx
@@ -0,0 +1,19 @@
+import { Button } from "@repo/ui";
+import PageFooterButton from "../../../../components/order/PageFooterButton";
+import TotalButton from "../../../../components/order/TotalButton";
+
+interface Props {
+ onOrder: () => void;
+}
+
+const OrderFooter = ({ onOrder }: Props) => {
+ return (
+
+
+
+ );
+};
+
+export default OrderFooter;
diff --git a/apps/nowait-user/src/pages/order/orderList/components/SoldOutModal.tsx b/apps/nowait-user/src/pages/order/orderList/components/SoldOutModal.tsx
new file mode 100644
index 00000000..e96f1421
--- /dev/null
+++ b/apps/nowait-user/src/pages/order/orderList/components/SoldOutModal.tsx
@@ -0,0 +1,48 @@
+import { Button } from "@repo/ui";
+import Portal from "../../../../components/common/modal/Portal";
+import type { CartType } from "../../../../types/order/cart";
+
+interface Props {
+ menus: CartType[];
+ onConfirm: () => void;
+}
+
+const SoldOutModal = ({ menus, onConfirm }: Props) => {
+ return (
+
+
+ );
+};
+
+export default SoldOutModal;
diff --git a/apps/nowait-user/src/pages/order/orderList/hooks/useOrderListLogic.ts b/apps/nowait-user/src/pages/order/orderList/hooks/useOrderListLogic.ts
new file mode 100644
index 00000000..dc3898c9
--- /dev/null
+++ b/apps/nowait-user/src/pages/order/orderList/hooks/useOrderListLogic.ts
@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { useCartStore } from "../../../../stores/cartStore";
+import useModal from "../../../../hooks/useModal";
+import { useStoreMenuList } from "../../../../hooks/order/useStoreMenus";
+import type { CartType } from "../../../../types/order/cart";
+import { getSoldOutMenusInCart } from "../../../../utils/checkSoldOutMenus";
+
+export const useOrderListLogic = () => {
+ const navigate = useNavigate();
+ const { storeId } = useParams();
+ const { cart, removeFromCart } = useCartStore();
+ const modal = useModal();
+
+ const { data: menus } = useStoreMenuList(storeId);
+
+ const [soldOutMenus, setSoldOutMenus] = useState();
+ const [isAnimatingOut, setIsAnimatingOut] = useState(false);
+
+ // 스크롤 초기화
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ }, []);
+
+ // EmptyCart 애니메이션 타이밍 제어
+ useEffect(() => {
+ let timer: number | undefined;
+
+ if (cart.length === 0 && !isAnimatingOut) {
+ timer = window.setTimeout(() => setIsAnimatingOut(true), 350);
+ }
+
+ if (cart.length > 0 && isAnimatingOut) {
+ setIsAnimatingOut(false);
+ }
+
+ return () => {
+ if (timer) clearTimeout(timer);
+ };
+ }, [cart, isAnimatingOut]);
+
+ const handleOrder = () => {
+ if (!menus) return;
+
+ const soldOut = getSoldOutMenusInCart(cart, menus);
+
+ if (soldOut.length > 0) {
+ setSoldOutMenus(soldOut);
+ modal.open();
+ return;
+ }
+
+ navigate(`/${storeId}/remittance`);
+ };
+
+ const handleRemoveSoldOutMenus = () => {
+ soldOutMenus?.forEach((menu) => removeFromCart(menu.menuId));
+ modal.close();
+ };
+
+ return {
+ cart,
+ storeId,
+ isAnimatingOut,
+ modal,
+ soldOutMenus,
+ handleOrder,
+ handleRemoveSoldOutMenus,
+ };
+};
diff --git a/apps/nowait-user/src/pages/order/remittenceWait/RemittanceWaitPage.tsx b/apps/nowait-user/src/pages/order/remittenceWait/RemittanceWaitPage.tsx
index 4892e397..0c46e357 100644
--- a/apps/nowait-user/src/pages/order/remittenceWait/RemittanceWaitPage.tsx
+++ b/apps/nowait-user/src/pages/order/remittenceWait/RemittanceWaitPage.tsx
@@ -14,44 +14,48 @@ import { useFallbackImage } from "../../../hooks/useFallbackImage";
const RemittanceWaitPage = () => {
const navigate = useNavigate();
const location = useLocation();
- const payer = location.state as string;
const { storeId } = useParams();
+
const tableId = localStorage.getItem("tableId");
+ const payer = location.state as string;
+
const { cart, clearCart } = useCartStore();
const { showToast } = useToastStore();
- const totalPrice = sumTotalPrice(cart);
+
const [isLoading, setIsLoading] = useState(false); // 중복 요청 방지
const { isLoaded, loadedSrc } = useFallbackImage(remittanceWait);
+ const totalPrice = sumTotalPrice(cart);
+
+ const payload = {
+ depositorName: payer,
+ items: cart.map((item) => ({
+ menuId: item.menuId,
+ quantity: item.quantity,
+ })),
+ totalPrice,
+ };
+
const orderButton = async () => {
+ if (isLoading) return;
try {
setIsLoading(true);
- const payload = {
- depositorName: payer,
- items: cart.map((item) => ({
- menuId: item.menuId,
- quantity: item.quantity,
- })),
- totalPrice,
- };
const res = await createOrder(storeId!, Number(tableId!), payload);
- console.log(res, "주문 생성");
- if (res?.success) {
- //입금자명 로컬스토리지 저장
- localStorage.setItem("depositorName", res.response.depositorName);
- //장바구니 비우기
- clearCart();
- navigate(`/${storeId}/order/success`, { replace: true });
- } else {
- // 서버가 success:false 반환한 경우
- console.error("주문 실패:", res);
+ if (!res?.success) {
showToast("주문에 실패했습니다. 다시 시도해 주세요");
return;
}
+
+ //입금자명 로컬스토리지 저장
+ localStorage.setItem("depositorName", res.response.depositorName);
+ //장바구니 비우기
+ clearCart();
+ navigate(`/${storeId}/order/success`, { replace: true });
} catch (error) {
console.log(error);
+ showToast("주문 처리 중 오류가 발생했습니다");
} finally {
- setIsLoading(true);
+ setIsLoading(false);
}
};
@@ -66,7 +70,6 @@ const RemittanceWaitPage = () => {
>
{
const navigate = useNavigate();
const { id: storeId } = useParams();
+ const { data: menus, isLoading: menusIsLoading } = useStoreMenus(storeId);
const {
data: store,
- isLoading,
+ isLoading: storeIsLoading,
isError,
} = useQuery({
queryKey: ["store", storeId],
@@ -33,12 +34,6 @@ const StoreDetailPage = () => {
select: (data) => data?.response,
});
- const { data: menus, isLoading: menusIsLoading } = useQuery({
- queryKey: ["storeMenus", storeId],
- queryFn: () => getStoreMenus(storeId!),
- select: (data) => data?.response,
- });
-
//맨위로 위치 초기화
useEffect(() => {
window.scrollTo(0, 0);
@@ -61,7 +56,7 @@ const StoreDetailPage = () => {
console.log(error);
}
};
- if (isLoading) return
0 ? "pb-[116px]" : ""} px-5`}>
+
0 ? "pb-[116px]" : ""
+ } px-5`}
+ >
();
- const [isAnimatingOut, setIsAnimatingOut] = useState(false);
-
- const { data: menus } = useQuery({
- queryKey: ["storeMenuList", storeId],
- queryFn: () => getStoreMenus(storeId!),
- select: (data) => data?.response?.menuReadDto,
- });
-
- // 맨위로 위치 초기화
- useEffect(() => {
- window.scrollTo(0, 0);
- }, []);
-
- useEffect(() => {
- let timerId: number | undefined;
-
- if (cart.length === 0) {
- if (!isAnimatingOut) {
- timerId = window.setTimeout(() => {
- setIsAnimatingOut(true);
- }, 350);
- }
- } else {
- if (isAnimatingOut) setIsAnimatingOut(false);
- }
-
- return () => {
- if (timerId) clearTimeout(timerId);
- };
- }, [cart, isAnimatingOut]);
+
+ const {
+ cart,
+ storeId,
+ isAnimatingOut,
+ modal,
+ soldOutMenus,
+ handleOrder,
+ handleRemoveSoldOutMenus,
+ } = useOrderListLogic();
if (cart.length === 0 && isAnimatingOut) {
return
-
- {cart.map((item) => {
- return (
-
-
- navigate(`/${storeId}`, { state: { isBack: true } })
- }
- className="py-5 border-none"
- >
- 메뉴 추가하기
-
-
-
-
-
+
-
-
- {modal.isOpen && soldOutMenus!.length > 0 && (
-
-
+
);
diff --git a/apps/nowait-user/src/pages/order/orderList/components/CartItem.tsx b/apps/nowait-user/src/pages/order/orderList/components/CartItem.tsx
index 702aeeff..ea29aca1 100644
--- a/apps/nowait-user/src/pages/order/orderList/components/CartItem.tsx
+++ b/apps/nowait-user/src/pages/order/orderList/components/CartItem.tsx
@@ -4,14 +4,20 @@ import { useCartStore } from "../../../../stores/cartStore";
import { motion } from "framer-motion";
interface PropsType {
- id: number;
+ menuId: number;
name: string;
originPrice: number;
price: number;
quantity: number;
}
-const CartItem = ({ id, name, originPrice, price, quantity }: PropsType) => {
+const CartItem = ({
+ menuId,
+ name,
+ originPrice,
+ price,
+ quantity,
+}: PropsType) => {
const { removeFromCart, increaseQuantity, decreaseQuantity } = useCartStore();
return (
{
{originPrice.toLocaleString()}원
- 주문 총 {cart.length}건
- {
- modal.close();
- soldOutMenus?.forEach((menu: CartType) =>
- removeFromCart(menu.menuId)
- );
- }}
- >
-
- e.stopPropagation()}
- className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 min-w-[calc(100%-35px)] max-w-[430px] bg-white rounded-[20px] px-[22px] pt-[30px] pb-[22px]"
- >
-
- - 현재{" "} - {soldOutMenus?.map((menu: CartType, idx: number) => ( - - {menu.name} - {idx < soldOutMenus.length - 1 && ", "} - - ))} - 는(은) 품절 상태입니다. -
- - {
+ onConfirm();
+ }}
+ >
+
+ e.stopPropagation()}
+ className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 min-w-[calc(100%-35px)] max-w-[430px] bg-white rounded-[20px] px-[22px] pt-[30px] pb-[22px]"
+ >
+
+ + 현재{" "} + {menus?.map((menu: CartType, idx: number) => ( + + {menu.name} + {idx < menus.length - 1 && ", "} + + ))} + 는(은) 품절 상태입니다. +
+ +
diff --git a/apps/nowait-user/src/routes/Router.tsx b/apps/nowait-user/src/routes/Router.tsx
index e384e4ab..adb14e28 100644
--- a/apps/nowait-user/src/routes/Router.tsx
+++ b/apps/nowait-user/src/routes/Router.tsx
@@ -3,7 +3,7 @@ import HomePage from "../pages/home/HomePage";
import WaitingSuccessPage from "../pages/waiting/waitingSuccess/WaitingSuccessPage";
import MapPage from "../pages/waiting/boothMap/MapPage";
import StoreDetailPage from "../pages/waiting/storeDetail/StoreDetailPage";
-import RedirectToStorePage from "../pages/order/home/RedirectToStorePage";
+import RedirectToStorePage from "../pages/order/home/components/RedirectToStorePage";
import StorePage from "../pages/order/home/StorePage";
import OrderListPage from "../pages/order/orderList/OrderListPage";
import OrderSuccessPage from "../pages/order/orderSuccess/OrderSuccessPage";