feat: 주점 예약 및 api 설정

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

@@ -1,5 +1,4 @@
 import axios from "axios";
-import type { CartType } from "../types/order/cart";
 
 const SERVER_URI = import.meta.env.VITE_SERVER_URI;
 
@@ -22,6 +21,7 @@ interface ServerResponse {
   };
 }
 
+//음식 주문하기
 export const createOrder = async (
   storeId: string,
   tableId: string,
@@ -38,6 +38,7 @@ export const createOrder = async (
   }
 };
 
+//주문내역 가져오기
 export const getMyOrderList = async (
   storeId: string | undefined,
   tableId: string

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

@@ -0,0 +1,35 @@
+import axios from "axios";
+import UserApi from "../utils/UserApi";
+
+const SERVER_URI = import.meta.env.VITE_SERVER_URI;
+
+interface ReservationType {
+  partySize: number;
+}
+
+// 주점 예약하기
+export const createReservation = async (
+  storeId: string,
+  payload: ReservationType
+) => {
+  const res = await UserApi.post(`/reservations/create/${storeId}`, payload);
+  return res.data;
+};
+
+// 북마크 조회
+export const getBookmark = async () => {
+  const res = await UserApi.get("/bookmarks");
+  return res.data;
+};
+
+// 북마크 생성
+export const createBookmark = async (storeId: string | undefined) => {
+  const res = await UserApi.post(`/bookmarks/${storeId}`);
+  return res.data;
+};
+
+// 북마크 삭제
+export const deleteBookmark = async (bookmarkId: string) => {
+  const res = await UserApi.delete(`/bookmarks/${bookmarkId}`);
+  return res.data;
+};

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

@@ -0,0 +1,43 @@
+import { useNavigate, useParams } from "react-router-dom";
+import type { MenuType } from "../../types/order/menu";
+
+interface PropsType {
+  data: MenuType;
+  mode: string;
+}
+
+const MenuItem = ({ data, mode }: PropsType) => {
+  const navigate = useNavigate();
+  const { id, storeId } = useParams();
+
+  const handleMenuClick = () => {
+    if (mode === "store") {
+      navigate(`/store/${id}/menu/${data.id}`, { state: data });
+    } else {
+      navigate(`/${storeId}/menu/${data.id}`, { state: data });
+    }
+  };
+
+  return (
+    <li key={data.id} className="mb-5">
+      <button
+        onClick={handleMenuClick}
+        className="w-full flex justify-between cursor-pointer text-left"
+      >
+        <div className="max-w-[224px]">
+          <h2 className="text-title-16-bold text-black-90 mb-1 text-ellipsis line-clamp-2">
+            {data.name}
+          </h2>
+          <h2 className="text-black-70">{data.price.toLocaleString()}원</h2>
+        </div>
+        <img
+          className="w-[90px] h-[90px] bg-black-25 rounded-[12px] object-cover"
+          src={`${data.image}` || ""}
+          alt="음식 메뉴 이미지"
+        />
+      </button>
+    </li>
+  );
+};
+
+export default MenuItem;

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 MenuItem from "./MenuItem";
 
 const dummyData: MenuType[] = [
   {
@@ -25,13 +25,15 @@ const dummyData: MenuType[] = [
     price: 9200,
     image: "/beef.png",
   },
+
   {
     id: "4",
     name: "파인애플 샤베트",
     description: "시원한 파인애플 샤베트 입니다.",
     price: 9000,
     image: "",
   },
+
   {
     id: "5",
     name: "해물파전",
@@ -41,44 +43,13 @@ const dummyData: MenuType[] = [
   },
 ];
 
-const MenuList = ({ mode }: { mode?: string }) => {
-  const navigate = useNavigate();
-  const { storeId } = useParams();
+const MenuList = ({ mode }: { mode: string }) => {
   return (
     <div className="mt-7.5">
       <h1 className="text-title-20-semibold mb-3">메뉴</h1>
       <ul>
-        {dummyData.map((data) => {
-          return (
-            <li key={data.id} className="mb-5 last:mb-0">
-              <button
-                onClick={() =>
-                  navigate(`/${storeId}/menu/${data.id}`, { state: data })
-                }
-                className="w-full flex justify-between cursor-pointer text-left"
-              >
-                <div className="max-w-[224px]">
-                  <h2
-                    className={`${
-                      mode === "order"
-                        ? "text-title-18-semibold"
-                        : "text-title-16-bold"
-                    } text-black-90 mb-1 text-ellipsis line-clamp-2`}
-                  >
-                    {data.name}
-                  </h2>
-                  <h2 className="text-black-70">
-                    {data.price.toLocaleString()}원
-                  </h2>
-                </div>
-                <img
-                  className="w-[90px] h-[90px] bg-black-25 rounded-[12px] object-cover"
-                  src={`${data.image}`}
-                  alt="음식 메뉴 이미지"
-                />
-              </button>
-            </li>
-          );
+        {dummyData.map((data: MenuType) => {
+          return <MenuItem key={data.id} data={data} mode={mode} />;
         })}
       </ul>
     </div>

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

@@ -9,7 +9,9 @@ const PageFooterButton = ({
 }) => {
   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%)]">
-      <div className="flex flex-col justify-center py-8 px-5">{children}</div>
+      <div className={`${className} flex justify-center py-8 px-5`}>
+        {children}
+      </div>
     </footer>
   );
 };

apps/nowait-user/src/hooks/mutate/useBookmark.ts

@@ -0,0 +1,22 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  createBookmark,
+  deleteBookmark,
+} from "../../api/reservation";
+
+export const useBookmarkMutation = () => {
+  const queryclient = useQueryClient();
+  const onSuccess = () => {
+    queryclient.invalidateQueries({ queryKey: ["bookmark"] });
+  };
+  const createBookmarkMutate = useMutation({
+    mutationFn: createBookmark,
+    onSuccess: onSuccess,
+  });
+
+  const deleteBookmarkMutate = useMutation({
+    mutationFn: deleteBookmark,
+    onSuccess: onSuccess,
+  });
+  return { createBookmarkMutate, deleteBookmarkMutate };
+};

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

@@ -28,34 +28,31 @@ const AddMenuPage = () => {
     navigate(`/${storeId}`, { state: { added: true }, replace: true });
   };
   return (
-    <div>
-      <div className="flex flex-col min-h-screen-dvh px-5">
-        <h1 className="-mx-5">
-          <img
-            className="w-full min-h-[250px] object-cover"
-            src={image}
-            alt="음식 메뉴 이미지"
-          />
+    <div className="flex flex-col h-screen">
+      <div className="flex-1 overflow-y-auto px-5">
+        <h1 className="-mx-5 h-[375px] bg-black-25">
+          <img className="w-full" src={image} alt="음식 메뉴 이미지" />
         </h1>
-        <div className="pt-7.5">
-          <h1 className="text-headline-22-bold mb-2 break-keep">{name}</h1>
-          <h2 className="text-16-regular text-black-70 break-keep">
-            {description}
-          </h2>
+        <div className="py-8">
+          <h1 className="text-headline-22-bold mb-2">{name}</h1>
+          <h2>{description}</h2>
         </div>
       </div>
-      <PageFooterButton>
-        {/* 메뉴 가격 및 수량 컨트롤 */}
-        <div className="w-full flex justify-between items-center mb-8">
-          <h1 className="text-[24px] font-bold">
-            <NumberFlow value={price * quantity} trend={0} suffix="원" />
+      {/* 메뉴 가격 및 수량 컨트롤 */}
+      <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()}원 */}
           </h1>
           <QuantitySelector
             mode="state"
             quantity={quantity}
             setQuantity={setQuantity}
           />
         </div>
+      </div>
+      <PageFooterButton>
         <Button textColor="white" onClick={addToCartButton}>
           추가하기
         </Button>

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

@@ -3,12 +3,13 @@ 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/common/MenuList";
 import { useEffect } from "react";
 import { useToastStore } from "../../../stores/toastStore";
 import StoreHeader from "./components/StoreHeader";
+import MenuList from "../../../components/common/MenuList";
 import SectionDivider from "../../../components/SectionDivider";
 
+
 const StorePage = () => {
   const navigate = useNavigate();
   const { storeId } = useParams();

apps/nowait-user/src/pages/order/home/components/StoreHeader.tsx

@@ -1,5 +1,5 @@
 import { useNavigate, useParams } from "react-router-dom";
-import { getMyOrderList } from "../../../../lib/order";
+import { getMyOrderList } from "../../../../api/order";
 
 const StoreHeader = () => {
   const navigate = useNavigate();

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

@@ -14,29 +14,6 @@ const OrderListPage = () => {
   const { storeId } = useParams();
   const { cart } = useCartStore();
 
-  // const orderHandleButton = async () => {
-  //   try {
-  //     const payload = {
-  //       depositorName: "홍길동",
-  //       items: cart.map((item) => ({
-  //         menuId: item.menuId,
-  //         quantity: item.quantity,
-  //       })),
-  //       totalPrice: sumTotalPrice(cart),
-  //     };
-  //     const res = await createOrder(storeId!, tableId!, payload);
-  //     if (res?.success) {
-  //       //세션 아이디, 입금자명 로컬스토리지 저장
-  //       setSessionData(res.response.sessionId, res.response.depositorName);
-  //     } else {
-  //       console.log("error");
-  //     }
-  //     navigate(`/${storeId}/remittance`);
-  //   } catch (e) {
-  //     console.log(e);
-  //   }
-  // };
-
   if (cart.length === 0) return <EmptyCart />;
 
   return (

apps/nowait-user/src/pages/order/remittance/RemittancePage.tsx

@@ -7,7 +7,7 @@ import SectionDivider from "../../../components/SectionDivider";
 import { useRef, useState } from "react";
 import { sumTotalPrice } from "../../../utils/sumUtils";
 import { getTableId, setSessionData } from "../../../utils/cartStorage";
-import { createOrder } from "../../../lib/order";
+import { createOrder } from "../../../api/order";
 import PayerInput from "./components/PayerInput";
 import OrderSummary from "./components/OrderSummary";
 import RemitOptions from "./components/RemitOptions";