feat: 주점 공지사항 및 북마크 작업

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

@@ -0,0 +1,6 @@
+import axios from "axios";
+
+export const getStoreMenus = async (storeId: string | undefined) => {
+  const res = await axios.get(`/v1/menus/all-menus/stores/${storeId}`);
+  return res.data;
+};

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

@@ -1,4 +1,3 @@
-import axios from "axios";
 import UserApi from "../utils/UserApi";
 
 const SERVER_URI = import.meta.env.VITE_SERVER_URI;
@@ -7,12 +6,21 @@ interface ReservationType {
   partySize: number;
 }
 
+// 주점 정보 가져오기
+export const getStore = async (storeId: string | undefined) => {
+  const res = await UserApi.get(`/v1/stores/${storeId}`);
+  return res.data;
+};
+
 // 주점 예약하기
 export const createReservation = async (
   storeId: string,
   payload: ReservationType
 ) => {
-  const res = await UserApi.post(`/reservations/create/${storeId}`, payload);
+  const res = await UserApi.post(
+    `/reservations/create/redis/${storeId}`,
+    payload
+  );
   return res.data;
 };
 

apps/nowait-user/src/components/order/Header.tsx → apps/nowait-user/src/components/BackHeader.tsx

@@ -1,14 +1,16 @@
-import Back from "../../assets/icon/back.svg?react";
+import { useNavigate } from "react-router-dom";
+import Back from "../assets/icon/back.svg?react";
 
 interface PropsType {
   title: string;
 }
 
-const Header = ({ title }: PropsType) => {
+const BackHeader = ({ title }: PropsType) => {
+  const navigate = useNavigate()
   return (
     <div>
       <div className="flex justify-between items-center px-5 py-2.5">
-        <button>
+        <button onClick={()=>navigate(-1)}>
           <Back />
         </button>
         <h1 className="text-title-16-bold">{title}</h1>
@@ -18,4 +20,4 @@ const Header = ({ title }: PropsType) => {
   );
 };
 
-export default Header;
+export default BackHeader;

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

@@ -1,5 +1,8 @@
+import { useQuery } from "@tanstack/react-query";
 import type { MenuType } from "../../types/order/menu";
 import MenuItem from "./MenuItem";
+import { useParams } from "react-router-dom";
+import { getStoreMenus } from "../../api/menu";
 
 const dummyData: MenuType[] = [
   {
@@ -44,6 +47,14 @@ const dummyData: MenuType[] = [
 ];
 
 const MenuList = ({ mode }: { mode: string }) => {
+  const { id: storeId } = useParams();
+  console.log(storeId, "스토어아이디");
+  const { data } = useQuery({
+    queryKey: ["storeMenus", storeId],
+    queryFn: () => getStoreMenus(storeId),
+    select:(data)=>data.response
+  });
+  console.log(data);
   return (
     <div className="mt-7.5">
       <h1 className="text-title-20-semibold mb-3">메뉴</h1>

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

@@ -0,0 +1,30 @@
+import { useQuery } from "@tanstack/react-query";
+import { useParams } from "react-router-dom";
+import { getBookmark } from "../api/reservation";
+
+interface BookmarkType {
+  bookmarkId: string;
+  userId: string;
+  storeId: string;
+}
+
+export const useBookmarkState = (storeId?: string) => {
+  const { id: paramId } = useParams();
+  console.log(paramId)
+  const id = storeId ?? paramId;
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["bookmark", id],
+    queryFn: getBookmark,
+    select: (data) =>
+      data.response.find(
+        (bookmark: BookmarkType) => String(bookmark.storeId) === id
+      ),
+  });
+  console.log(data)
+  return {
+    isBookmarked: data !== undefined,
+    bookmarkData: data,
+    isLoading,
+  };
+};

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

@@ -8,7 +8,7 @@ import { AnimatePresence } from "framer-motion";
 import EmptyCart from "./components/EmptyCart";
 import { SmallActionButton } from "../../../components/SmallActionButton";
 import Add from "../../../assets/icon/Add.svg?react";
-import Header from "../../../components/order/Header";
+import BackHeader from "../../../components/BackHeader";
 
 const OrderListPage = () => {
   const navigate = useNavigate();
@@ -19,7 +19,7 @@ const OrderListPage = () => {
 
   return (
     <div>
-      <Header title="장바구니"/>
+      <BackHeader title="장바구니"/>
       <section className="flex flex-col flex-grow min-h-screen-dvh pt-7 px-5 pb-[124px]">
         <h1 className="text-headline-24-bold mb-5">
           주문 총 <span className="text-primary">{cart.length}건</span>

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

@@ -11,7 +11,7 @@ import OrderSummary from "./components/OrderSummary";
 import RemitOptions from "./components/RemitOptions";
 import ConfirmModal from "../../../components/order/ConfirmModal";
 import useModal from "../../../hooks/useModal";
-import Header from "../../../components/order/Header";
+import BackHeader from "../../../components/BackHeader";
 
 const RemittancePage = () => {
   const navigate = useNavigate();
@@ -38,7 +38,7 @@ const RemittancePage = () => {
 
   return (
     <div className="flex flex-col flex-grow pb-[124px] min-h-screen-dvh">
-      <Header title="주문하기" />
+      <BackHeader title="주문하기" />
       <section className="px-5">
         <OrderSummary cart={cart} />
         <SectionDivider />

apps/nowait-user/src/pages/waiting/WaitingSummary/WaitingSummaryPage.tsx

@@ -14,7 +14,8 @@ const WaitingSummaryPage = () => {
       const payload = {
         partySize,
       };
-      await createReservation(id!, payload);
+      const res = await createReservation(id!, payload);
+      console.log(res,"예약 응답")
       navigate(`/store/${id}/waiting/success`);
     } catch (error) {
       console.log(error);

apps/nowait-user/src/pages/waiting/bookmark/BookmarkPage.tsx

@@ -0,0 +1,51 @@
+import HomeHeader from "../../../components/Header";
+import BookmarkedStoreItem from "./components/BookmarkedStoreItem";
+
+const dummyData = [
+  {
+    id: 1,
+    image: "/bookmarkStoreImage.png",
+    wait: "대기 0팀",
+    storeName: "스페이시스",
+    lesson: "바이오메카트로닉스공학과",
+    storeId: "1",
+  },
+  {
+    id: 1,
+    image: "/bookmarkStoreImage.png",
+    wait: "대기 0팀",
+    storeName: "스페이시스",
+    lesson: "약과",
+    storeId: "2",
+  },
+];
+
+const BookmarkPage = () => {
+  return (
+    <div>
+      <div className="px-5">
+        <HomeHeader />
+        <h1 className="mt-5 mb-4 text-title-20-bold text-black-90">
+          북마크한 부스
+        </h1>
+        <ul>
+          {dummyData.map((data) => {
+            return (
+              <BookmarkedStoreItem
+                key={data.id}
+                id={data.id}
+                image={data.image}
+                wait={data.wait}
+                storeName={data.storeName}
+                lesson={data.lesson}
+                storeId={data.storeId}
+              />
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default BookmarkPage;

apps/nowait-user/src/pages/waiting/bookmark/components/BookmarkedStoreItem.tsx

@@ -0,0 +1,68 @@
+import BookmarkIcon from "../../storeDetail/components/BookmarkIcon";
+import { useBookmarkMutation } from "../../../../hooks/mutate/useBookmark";
+import { useBookmarkState } from "../../../../hooks/useBookmarkState";
+
+interface PropsType {
+  id: number;
+  image: string;
+  wait: string;
+  storeName: string;
+  lesson: string;
+  storeId: string;
+}
+
+const BookmarkedStoreItem = ({
+  id,
+  image,
+  wait,
+  storeName,
+  lesson,
+  storeId,
+}: PropsType) => {
+  const { createBookmarkMutate, deleteBookmarkMutate } = useBookmarkMutation();
+  const { isBookmarked, bookmarkData } = useBookmarkState(storeId);
+
+  const handleBookmarkButton = async () => {
+    try {
+      if (!isBookmarked) {
+        await createBookmarkMutate.mutate(storeId);
+      } else {
+        await deleteBookmarkMutate.mutate(bookmarkData.bookmarkId);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  return (
+    <li key={id} className="mb-6">
+      <div className="relative top-0 right-0">
+        <img
+          className="w-full object-cover"
+          src={image}
+          alt="북마크한 주점 메인 이미지"
+        ></img>
+        <p className="absolute top-[12px] right-[12px] text-primary bg-[#ffe9df] px-2 py-[7px] font-bold text-[12px] rounded-[6px]">
+          {wait}
+        </p>
+      </div>
+      <div className="flex justify-between py-3">
+        <div className="flex items-center gap-2.5">
+          <img
+            className="w-[40px] h-[40px] object-cover rounded-full bg-black-40"
+            src=""
+            alt="학과 메인 이미지"
+          ></img>
+          <div className="flex flex-col justify-between">
+            <h1 className="text-title-16-bold text-black-90">{storeName}</h1>
+            <h2 className="text-14-regular text-black-70">{lesson}</h2>
+          </div>
+        </div>
+        <button className="mr-[5px]" onClick={handleBookmarkButton}>
+          <BookmarkIcon />
+        </button>
+      </div>
+    </li>
+  );
+};
+
+export default BookmarkedStoreItem;

apps/nowait-user/src/pages/waiting/storeDetail/StoreDetailPage.tsx

@@ -5,8 +5,11 @@ import PageFooterButton from "../../../components/order/PageFooterButton";
 import { Button } from "@repo/ui";
 import { useNavigate, useParams } from "react-router-dom";
 import MenuList from "../../../components/common/MenuList";
-import IsBookmark from "./components/IsBookmark";
-import { getBookmark } from "../../../api/reservation";
+import { useBookmarkMutation } from "../../../hooks/mutate/useBookmark";
+import BookmarkIcon from "./components/BookmarkIcon";
+import { useBookmarkState } from "../../../hooks/useBookmarkState";
+import { useQuery } from "@tanstack/react-query";
+import { getStore } from "../../../api/reservation";
 
 const TAG = [
   { id: 1, type: "default", tag: "태그 추가" },
@@ -16,14 +19,24 @@ const TAG = [
 
 const StoreDetailPage = () => {
   const navigate = useNavigate();
-  const { id } = useParams();
-
-  const a = async () => {
+  const { id: storeId } = useParams();
+  const { isBookmarked, bookmarkData } = useBookmarkState();
+  const { createBookmarkMutate, deleteBookmarkMutate } = useBookmarkMutation();
+  const { data:store } = useQuery({
+    queryKey: ["store"],
+    queryFn: () => getStore(storeId),
+    select: (data) => data.response,
+  });
+  console.log(store);
+  const handleBookmarkButton = async () => {
     try {
-      const res = await getBookmark();
-      console.log(res);
+      if (!isBookmarked) {
+        await createBookmarkMutate.mutate(storeId);
+      } else {
+        await deleteBookmarkMutate.mutate(bookmarkData.bookmarkId);
+      }
     } catch (error) {
-      console.log(error)
+      console.log(error);
     }
   };
 
@@ -36,12 +49,12 @@ const StoreDetailPage = () => {
         <section className="border-b-1 border-[#f4f4f4]">
           <div className="flex justify-between items-center py-[21px]">
             <div className="flex flex-col justify-between gap-[3px]">
-              <p className="text-14-regular text-black-70">컴퓨터공학과</p>
-              <h1 className="text-headline-22-bold">스페이시스</h1>
+              <p className="text-14-regular text-black-70">{store?.departmentName}</p>
+              <h1 className="text-headline-22-bold">{store?.name}</h1>
             </div>
             <img
               className="w-[52px] h-[52px] rounded-[100%] bg-black-60"
-              src=""
+              src={store?.profileImage}
               alt="학과 대표 이미지"
             />
           </div>
@@ -64,7 +77,6 @@ const StoreDetailPage = () => {
         </section>
         <section className="pt-5 pb-[28px]">
           <div className="mb-6">
-            <button onClick={a}>북마크조회</button>
             <p className="flex items-center mb-1.5 text-16-regular text-black-80">
               <span className="w-[18px] flex justify-center  mr-1.5">
                 <SubStract />
@@ -101,8 +113,16 @@ const StoreDetailPage = () => {
         <MenuList mode="store" />
       </div>
       <PageFooterButton className="gap-2">
-        <IsBookmark />
-        <Button onClick={() => navigate(`/store/${id}/partysize`)}>
+        <Button
+          className="border"
+          backgroundColor="white"
+          borderColor="#ececec"
+          buttonType="icon"
+          onClick={handleBookmarkButton}
+        >
+          <BookmarkIcon />
+        </Button>
+        <Button onClick={() => navigate(`/store/${storeId}/partysize`)}>
           대기하기
         </Button>
       </PageFooterButton>

apps/nowait-user/src/pages/waiting/storeDetail/components/BookmarkIcon.tsx

@@ -0,0 +1,11 @@
+import BookMark from "../../../../assets/icon/bookmark.svg?react";
+import FullfieldBookmark from "../../../../assets/icon/fullfieldBookmark.svg?react";
+import { useBookmarkState } from "../../../../hooks/useBookmarkState";
+
+const BookmarkIcon = () => {
+  const { isBookmarked } = useBookmarkState();
+  console.log(isBookmarked,"여기")
+  return isBookmarked ? <FullfieldBookmark /> : <BookMark />;
+};
+
+export default BookmarkIcon;