feat: 주점 디테일 페이지 수정 부분 적용

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,14 @@
 import axios from "axios";
 
+const API_URI = import.meta.env.VITE_SERVER_URI;
+
+//주점에 해당하는 모든 메뉴 조회
 export const getStoreMenus = async (storeId: string | undefined) => {
-  const res = await axios.get(`/v1/menus/all-menus/stores/${storeId}`);
+  try {
+      const res = await axios.get(`${API_URI}/v1/menus/all-menus/stores/${storeId}`);
   return res.data;
+  } catch (error) {
+    console.log(error)
+  }
+
 };

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

@@ -4,8 +4,44 @@ interface ReservationType {
   partySize: number;
 }
 
+interface StoreResponse {
+  success: boolean;
+  response: {
+    storeId: number;
+    waitingCount: number;
+    isWaiting: false;
+    departmentId: number;
+    departmentName: string;
+    name: string;
+    location: string;
+    description: string;
+    notice: string;
+    openTime: string;
+    profileImage: {
+      id: number;
+      storeId: number;
+      imageUrl: string;
+      imageType: string;
+    };
+    bannerImages:
+      | {
+          id: number;
+          storeId: number;
+          imageUrl: string;
+          imageType: string;
+        }[]
+      | undefined;
+    isActive: boolean;
+    deleted: boolean;
+    createdAt: string;
+    isBookmarked: boolean;
+  };
+}
+
 // 주점 정보 가져오기
-export const getStore = async (storeId: string | undefined) => {
+export const getStore = async (
+  storeId: string | undefined
+): Promise<StoreResponse> => {
   const res = await UserApi.get(`/v1/stores/${storeId}`);
   return res.data;
 };

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

@@ -8,15 +8,15 @@ interface PropsType {
 const BackHeader = ({ title }: PropsType) => {
   const navigate = useNavigate()
   return (
-    <div>
+    <header>
       <div className="flex justify-between items-center px-5 py-2.5">
         <button onClick={()=>navigate(-1)}>
           <Back />
         </button>
         <h1 className="text-title-16-bold">{title}</h1>
         <div className="w-2.5"></div>
       </div>
-    </div>
+    </header>
   );
 };
 

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

@@ -9,21 +9,19 @@ interface PropsType {
 
 const MenuItem = ({ data, mode }: PropsType) => {
   const navigate = useNavigate();
-  const { id, storeId } = useParams();
+  const { storeId } = useParams();
 
   const handleMenuClick = () => {
-    if (mode === "store") {
-      navigate(`/store/${id}/menu/${data.id}`, { state: data });
-    } else {
-      navigate(`/${storeId}/menu/${data.id}`, { state: data });
+    if (mode === "order") {
+      navigate(`/${storeId}/menu/${data.menuId}`, { state: data });
     }
   };
 
   return (
-    <li key={data.id} className="mb-5">
+    <li className="mb-5 last:mb-0">
       <button
         onClick={handleMenuClick}
-        className="w-full flex justify-between cursor-pointer text-left"
+        className={`w-full flex justify-between ${mode==="order" && "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">

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

@@ -1,66 +1,22 @@
 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",
-  },
+const MenuList = ({ storeId, mode }: { storeId:string | undefined, mode: string }) => {
 
-  {
-    id: "4",
-    name: "파인애플 샤베트",
-    description: "시원한 파인애플 샤베트 입니다.",
-    price: 9000,
-    image: "",
-  },
-
-  {
-    id: "5",
-    name: "해물파전",
-    description: "해물 별로 안들어간 해물파전 입니다.",
-    price: 15000,
-    image: "",
-  },
-];
-
-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
+    select:(data)=>data.response.menuReadDto
   });
-  console.log(data);
+  console.log(data)
   return (
-    <div className="mt-7.5">
+    <div className="py-[30px]">
       <h1 className="text-title-20-semibold mb-3">메뉴</h1>
       <ul>
-        {dummyData.map((data: MenuType) => {
-          return <MenuItem key={data.id} data={data} mode={mode} />;
+        {data && 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/addMenu/AddMenuPage.tsx

@@ -41,7 +41,7 @@ const AddMenuPage = () => {
         </h1>
         <div className="py-8">
           <h1 className="text-headline-22-bold mb-2">{name}</h1>
-          <h2>{description}</h2>
+          <h2 className="text-16-regular text-black-70">{description}</h2>
         </div>
       </div>
       {/* 메뉴 가격 및 수량 컨트롤 */}

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 && (