feat: 웨이팅 디테일 페이지 UI 작업

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

@@ -0,0 +1,67 @@
+import { useNavigate } from "react-router-dom";
+import type { MenuType } from "../types/order/menu";
+
+const dummyData: MenuType[] = [
+  {
+    id: "1",
+    name: "우리 학과 최고의 자랑거리 메뉴인 숙주 삼결살 볶음 입니다.",
+    description:
+      "숙주 삼겹살에 대한 메뉴 설명입니다.숙주 삼겹살에 대한 메뉴 설명입니다.",
+    price: 12000,
+    image: "",
+  },
+  {
+    id: "2",
+    name: "과일 화채",
+    description: "시원한 과일 화채 입니다.",
+    price: 10000,
+    image: "",
+  },
+  {
+    id: "3",
+    name: "파인애플 샤베트",
+    description:
+      "시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.",
+    price: 9000,
+    image: "",
+  },
+];
+
+const MenuList = () => {
+  const navigate = useNavigate();
+  return (
+    <div>
+      <h1 className="text-title-20-semibold mb-3">메뉴</h1>
+      <ul>
+        {dummyData.map((data) => {
+          return (
+            <li key={data.id} className="mb-5">
+              <button
+                onClick={() =>
+                  navigate(`/asd/menu/${data.id}`, { state: data })
+                }
+                className="w-full flex justify-between cursor-pointer text-left"
+              >
+                <div className="max-w-[224px]">
+                  <h2 className="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-70"
+                  src={`${data.image}`}
+                  alt="음식 메뉴 이미지"
+                />
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default MenuList;

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

@@ -1,9 +1,17 @@
 import React from "react";
 
-const PageFooterButton = ({ children }: { children: React.ReactNode }) => {
+const PageFooterButton = ({
+  children,
+  className = "",
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
   return (
     <footer className=" bg-white sticky bottom-0">
-      <div className="flex justify-center py-8 px-5">{children}</div>
+      <div className={`flex justify-center py-8 px-5 ${className}`}>
+        {children}
+      </div>
     </footer>
   );
 };

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import QuantitySelector from "../../components/common/QuantitySelector";
 import { useLocation, useNavigate } from "react-router-dom";
 import PageFooterButton from "../../components/order/PageFooterButton";

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

@@ -1,39 +1,9 @@
 import { useNavigate } from "react-router-dom";
-import type { MenuType } from "../../types/order/menu";
-import { useEffect, useState } from "react";
-import { getcart } from "../../utils/cartStorage";
-import type { CartItem } from "../../types/order/cart";
 import PageFooterButton from "../../components/order/PageFooterButton";
 import { Button } from "@repo/ui";
-import { sumQuantity, sumTotalPrice } from "../../utils/sumUtils";
 import TotalButton from "../../components/order/TotalButton";
 import { useCartStore } from "../../stores/cartStore";
-
-const dummyData: MenuType[] = [
-  {
-    id: "1",
-    name: "우리 학과 최고의 자랑거리 메뉴인 숙주 삼결살 볶음 입니다.",
-    description:
-      "숙주 삼겹살에 대한 메뉴 설명입니다.숙주 삼겹살에 대한 메뉴 설명입니다.",
-    price: 12000,
-    image: "",
-  },
-  {
-    id: "2",
-    name: "과일 화채",
-    description: "시원한 과일 화채 입니다.",
-    price: 10000,
-    image: "",
-  },
-  {
-    id: "3",
-    name: "파인애플 샤베트",
-    description:
-      "시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.시원한 파인애플 샤베트 입니다.",
-    price: 9000,
-    image: "",
-  },
-];
+import MenuList from "../../components/MenuList";
 
 const StorePage = () => {
   const navigate = useNavigate();
@@ -54,37 +24,7 @@ const StorePage = () => {
             주문내역
           </button>
         </div>
-        <div>
-          <h1 className="text-title-20-semibold mb-3">메뉴</h1>
-          <ul>
-            {dummyData.map((data) => {
-              return (
-                <li key={data.id} className="mb-5">
-                  <button
-                    onClick={() =>
-                      navigate(`/asd/menu/${data.id}`, { state: data })
-                    }
-                    className="w-full flex justify-between cursor-pointer text-left"
-                  >
-                    <div className="max-w-[224px]">
-                      <h2 className="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-70"
-                      src={`${data.image}`}
-                      alt="음식 메뉴 이미지"
-                    />
-                  </button>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
+        <MenuList />
       </div>
       {cart && cart.length > 0 && (
         <PageFooterButton>

apps/nowait-user/src/pages/reserve/StoreDetailPage.tsx

@@ -1,7 +1,98 @@
-import React from "react";
+import MenuList from "../../components/MenuList";
+import Arrow from "../../assets/icon/arrow-right.svg?react";
+import MapPin from "../../assets/icon/map-pin.svg?react";
+import Clock from "../../assets/icon/clock.svg?react";
+import BookMark from "../../assets/icon/bookmark.svg?react";
+import PageFooterButton from "../../components/order/PageFooterButton";
+import { Button } from "@repo/ui";
+
+const TAG = [
+  { id: 1, type: "default", tag: "태그 추가" },
+  { id: 2, type: "default", tag: "컴공 과" },
+  { id: 3, type: "waiting", tag: "웨이팅 15팀" },
+];
 
 const StoreDetailPage = () => {
-  return <div>StoreDetailPage</div>;
+  return (
+    <div>
+      <div className="px-5">
+        <h1 className="-mx-5 h-[246px] bg-amber-400">
+          <img className="w-full" src="" alt="음식 메뉴 이미지" />
+        </h1>
+        <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>
+            </div>
+            <img
+              className="w-[52px] h-[52px] rounded-[100%] bg-black-60"
+              src=""
+              alt="학과 대표 이미지"
+            />
+          </div>
+          <ul className="pb-5 flex gap-1.5">
+            {TAG.map((item) => {
+              return (
+                <li
+                  key={item.id}
+                  className={`text-[12px] font-bold rounded-[4px] px-2 py-[7px] ${
+                    item.type === "default"
+                      ? "bg-[#f1f1f1] text-[#959595]"
+                      : "bg-[#ffeedf] text-[#ff5e07]"
+                  }`}
+                >
+                  {item.tag}
+                </li>
+              );
+            })}
+          </ul>
+        </section>
+        <section className="pt-5 pb-[28px]">
+          <div className="mb-6">
+            <p className="flex items-center mb-1.5 text-16-regular text-black-80">
+              <span className="mr-1.5">
+                <MapPin fill="#D9D9D9" />
+              </span>
+              가천대학교 무한광장
+            </p>
+            <p className="flex items-center text-16-regular text-black-80">
+              <span className="mr-1.5">
+                <Clock fill="#D9D9D9" />
+              </span>
+              18:00 - 24:00
+            </p>
+          </div>
+          <h2 className="mb-10 text-14-regular text-black-80">
+            안녕하세요! 컴공과가 버그 없이 준비한 이스터에그가 가득 부스
+            스페이시스입니다 🚀 남다른 디버깅 실력으로 굽는 츄러스, 데이터 손실
+            없는 아이스티, 그리고 메모리 오류 없는 넉넉한 양까지 완벽
+            구현했습니다.
+          </h2>
+          <div className="flex justify-between items-center py-3.5 px-4 bg-black-15 rounded-[10px]">
+            <div className="flex gap-1.5 min-w-0">
+              <p className="text-[14px] font-bold text-black-50 shrink-0">
+                공지
+              </p>
+              <h1 className="text-14-medium text-black-70 overflow-hidden text-ellipsis line-clamp-1">
+                입장 시 신분증 검사 필수 입장 시 신분증
+                검사dddddddasdasdasdddddddddddddddddddddddddaaaaaaaaaaaa
+              </h1>
+            </div>
+            <Arrow className="shrink-0" fill="#AAAAAA" />
+          </div>
+        </section>
+        <div className="-mx-5 bg-black-25 h-[16px] mb-[30px]"></div>
+        <MenuList />
+      </div>
+      <PageFooterButton className="gap-2.5">
+        <Button className="border" backgroundColor="white" borderColor="#ececec" buttonType="icon">
+          <BookMark />
+        </Button>
+        <Button>대기하기</Button>
+      </PageFooterButton>
+    </div>
+  );
 };
 
 export default StoreDetailPage;

apps/nowait-user/src/routes/Router.tsx

@@ -47,7 +47,26 @@ const Router = () => {
         path="/:storeId/remittance/request"
         element={<RemittanceRequestPage />}
       />
-      <Route path="/:storeId" element={<StorePage />} />
+
+      {/* 보호된 라우트 - 인증 필요 */}
+      <Route
+        path="/*"
+        element={
+          <AuthGuard>
+            <Routes>
+              <Route path="/" element={<HomePage />} />
+              <Route path="/store/:id/11" element={<StoreDetailPage />} />
+              <Route path="/store/:id/reserve" element={<StoreReservePage />} />
+              <Route
+                path="/store/:id/reserve/success"
+                element={<ReserveSuccessPage />}
+              />
+              <Route path="/map" element={<MapPage />} />
+            </Routes>
+          </AuthGuard>
+        }
+      />
+
     </Routes>
   );
 };