feat: 주점 디테일 페이지 api 연결

apps/nowait-user/package.json

@@ -25,6 +25,7 @@
     "react-router-dom": "^7.6.2",
     "react-toastify": "^11.0.5",
     "react-transition-group": "^4.4.5",
+    "swiper": "^11.2.10",
     "zustand": "^5.0.6"
   },
   "devDependencies": {

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

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

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

@@ -0,0 +1,36 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Pagination, Navigation } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "./customSwiper.css";
+
+interface BannerImageType {
+  id: number;
+  storeId: number;
+  imageUrl: string;
+  imageType: string;
+}
+
+const CommonSwiper = ({ slideImages }: { slideImages: BannerImageType[] }) => {
+  return (
+    <section className="swiper-wrap">
+      <Swiper
+        className="swiper"
+        modules={[Navigation, Pagination]}
+        slidesPerView={1}
+        pagination
+      >
+        {slideImages?.map((slideImage) => {
+          return (
+            <SwiperSlide className="swiper-slide">
+              <img src={slideImage.imageUrl} alt="학과 주점 대표 이미지" />
+            </SwiperSlide>
+          );
+        })}
+      </Swiper>
+    </section>
+  );
+};
+
+export default CommonSwiper;

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

@@ -12,14 +12,14 @@ const MenuItem = ({ data, mode }: PropsType) => {
 
   const handleMenuClick = () => {
     if (mode === "store") {
-      navigate(`/store/${id}/menu/${data.id}`, { state: data });
+      navigate(`/store/${id}/menu/${data.menuId}`, { state: data });
     } else {
-      navigate(`/${storeId}/menu/${data.id}`, { state: data });
+      navigate(`/${storeId}/menu/${data.menuId}`, { state: data });
     }
   };
 
   return (
-    <li key={data.id} className="mb-5">
+    <li className="mb-5">
       <button
         onClick={handleMenuClick}
         className="w-full flex justify-between cursor-pointer text-left"

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

@@ -1,53 +1,9 @@
 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[] = [
-  {
-    id: "1",
-    name: "우리 학과 최고의 자랑거리 메뉴인 숙주 삼결살 볶음 입니다.",
-    description:
-      "숙주 삼겹살에 대한 메뉴 설명입니다.숙주 삼겹살에 대한 메뉴 설명입니다.",
-    price: 12000,
-    image: "",
-  },
-  {
-    id: "2",
-    name: "과일 화채",
-    description: "시원한 과일 화채 입니다.",
-    price: 10000,
-    image: "",
-  },
-  {
-    id: "3",
-    name: "갈비구이",
-    description:
-      "갈비를 달콤하고 고소한 비법 간장 양념에 재워 촉촉하게 구운 꿀조합 술 안주",
-    price: 9200,
-    image: "/beef.png",
-  },
-
-  {
-    id: "4",
-    name: "파인애플 샤베트",
-    description: "시원한 파인애플 샤베트 입니다.",
-    price: 9000,
-    image: "",
-  },
-
-  {
-    id: "5",
-    name: "해물파전",
-    description: "해물 별로 안들어간 해물파전 입니다.",
-    price: 15000,
-    image: "",
-  },
-];
-
-const MenuList = ({ mode }: { mode: string }) => {
-  const { id: storeId } = useParams();
+const MenuList = ({ storeId, mode }: { storeId:string | undefined, mode: string }) => {
   console.log(storeId, "스토어아이디");
   const { data } = useQuery({
     queryKey: ["storeMenus", storeId],
@@ -56,11 +12,11 @@ const MenuList = ({ mode }: { mode: string }) => {
   });
   console.log(data);
   return (
-    <div className="mt-7.5">
+    <div className="py-7.5">
       <h1 className="text-title-20-semibold mb-3">메뉴</h1>
       <ul>
-        {dummyData.map((data: MenuType) => {
-          return <MenuItem key={data.id} data={data} mode={mode} />;
+        {data?.map((data: MenuType) => {
+          return <MenuItem key={data.menuId} data={data} mode={mode} />;
         })}
       </ul>
     </div>

apps/nowait-user/src/components/customSwiper.css

@@ -0,0 +1,30 @@
+.swiper-wrap {
+  margin: 0px -20px;
+  height: 256px;
+}
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+.swiper-slide {
+  width: 100%;
+  height: 100%;
+}
+.swiper-slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.swiper-pagination-bullet-active {
+  width: 6px;
+  height: 6px;
+  margin: 0px 2px !important;
+
+  background-color: white;
+}
+.swiper-pagination-bullet {
+  width: 6px;
+  height: 6px;
+  margin: 0px 2px !important;
+  background-color: rgb(255, 255, 255);
+}

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

@@ -3,27 +3,41 @@ import { useParams } from "react-router-dom";
 import { getBookmark } from "../api/reservation";
 
 interface BookmarkType {
-  bookmarkId: string;
-  userId: string;
+  // bookmarkId: string;
+  // userId: string;
   storeId: string;
+  waitingCount: number;
+  departmentId: number;
+  departmentName: string;
+  name: string;
+  location: string;
+  description: string;
+  profileImage: string | null;
+  bannerImages: string[];
+  isActive: boolean;
+  deleted: boolean;
+  createdAt: string;
 }
 
 export const useBookmarkState = (storeId?: string) => {
   const { id: paramId } = useParams();
-  console.log(paramId)
+  console.log(paramId);
   const id = storeId ?? paramId;
-
+  console.log(id)
   const { data, isLoading } = useQuery({
-    queryKey: ["bookmark", id],
+    queryKey: ["bookmark"],
     queryFn: getBookmark,
-    select: (data) =>
-      data.response.find(
-        (bookmark: BookmarkType) => String(bookmark.storeId) === id
-      ),
+    select : (data) => data.response
+    // select: (data) =>
+    //   data.response.find(
+    //     (bookmark: BookmarkType) => String(bookmark.storeId) === id
+    //   ),
   });
-  console.log(data)
+  const isBookmarked = data?.response?.find(
+        (bookmark: BookmarkType) => String(bookmark.storeId) === id
+      )
   return {
-    isBookmarked: data !== undefined,
+    isBookmarked: isBookmarked !== undefined,
     bookmarkData: data,
     isLoading,
   };

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

@@ -0,0 +1,32 @@
+import { useLocation } from "react-router-dom";
+
+export const useTransitionSelect = () => {
+  const location = useLocation();
+  const previousPath = sessionStorage.getItem('path');
+
+  const previousPage = previousPath || '';
+  const currentPage = location.pathname;
+
+  sessionStorage.setItem('path', location.pathname);
+
+  if (currentPage === 'passwordPage') {
+    return '';
+  }
+  if (currentPage === 'spaceListPage') {
+    if (previousPage === 'passwordPage') return '';
+    return 'slide-left';
+  }
+  if (currentPage === 'jobListPage') {
+    if (previousPage === 'spaceListPage') {
+      return 'slide-right';
+    }
+    if (previousPage === 'taskListPage') {
+      return 'left';
+    }
+  }
+  if (currentPage === 'taskListPage') {
+    return 'right';
+  }
+
+  return '';
+};

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

@@ -31,7 +31,7 @@ const StorePage = () => {
         <div className="flex-grow">
           <StoreHeader />
           <SectionDivider />
-          <MenuList mode="order" />
+          <MenuList storeId={storeId} mode="order" />
         </div>
       </div>
       {cart && cart.length > 0 && (

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

@@ -1,26 +1,28 @@
 import HomeHeader from "../../../components/Header";
+import { useBookmarkState } from "../../../hooks/useBookmarkState";
 import BookmarkedStoreItem from "./components/BookmarkedStoreItem";
 
 const dummyData = [
   {
     id: 1,
     image: "/bookmarkStoreImage.png",
-    wait: "대기 0팀",
+    waitingCount: "대기 0팀",
     storeName: "스페이시스",
-    lesson: "바이오메카트로닉스공학과",
+    departmentName: "바이오메카트로닉스공학과",
     storeId: "1",
   },
   {
-    id: 1,
+    id: 2,
     image: "/bookmarkStoreImage.png",
-    wait: "대기 0팀",
+    waitingCount: "대기 0팀",
     storeName: "스페이시스",
-    lesson: "약과",
+    departmentName: "약과",
     storeId: "2",
   },
 ];
 
 const BookmarkPage = () => {
+  const {bookmarkData} = useBookmarkState()
   return (
     <div>
       <div className="px-5">
@@ -29,15 +31,15 @@ const BookmarkPage = () => {
           북마크한 부스
         </h1>
         <ul>
-          {dummyData.map((data) => {
+          {bookmarkData?.map((data:any) => {
             return (
               <BookmarkedStoreItem
                 key={data.id}
                 id={data.id}
                 image={data.image}
-                wait={data.wait}
+                waitingCount={data.waitingCount}
                 storeName={data.storeName}
-                lesson={data.lesson}
+                departmentName={data.departmentName}
                 storeId={data.storeId}
               />
             );

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

@@ -5,18 +5,18 @@ import { useBookmarkState } from "../../../../hooks/useBookmarkState";
 interface PropsType {
   id: number;
   image: string;
-  wait: string;
+  waitingCount: string;
   storeName: string;
-  lesson: string;
+  departmentName: string;
   storeId: string;
 }
 
 const BookmarkedStoreItem = ({
   id,
   image,
-  wait,
+  waitingCount,
   storeName,
-  lesson,
+  departmentName,
   storeId,
 }: PropsType) => {
   const { createBookmarkMutate, deleteBookmarkMutate } = useBookmarkMutation();
@@ -42,7 +42,7 @@ const BookmarkedStoreItem = ({
           alt="북마크한 주점 메인 이미지"
         ></img>
         <p className="absolute top-[12px] right-[12px] text-primary bg-[#ffe9df] px-2 py-[7px] font-bold text-[12px] rounded-[6px]">
-          {wait}
+          {waitingCount}
         </p>
       </div>
       <div className="flex justify-between py-3">
@@ -54,7 +54,7 @@ const BookmarkedStoreItem = ({
           ></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>
+            <h2 className="text-14-regular text-black-70">{departmentName}</h2>
           </div>
         </div>
         <button className="mr-[5px]" onClick={handleBookmarkButton}>