feat: 모바일 버전 tobBar & 네비게이션 바 구현

apps/nowait-admin/src/App.tsx

@@ -6,6 +6,7 @@ import AdminOrders from "./pages/AdminOrders/AdminOrders";
 import NotFound from "./pages/NotFound/NotFound";
 import LoginPage from "./pages/LoingPage/LoginPage";
 import AdminAuth from "./pages/AdminAuth/AdminAuth";
+import AdminBooth from "./pages/AdminBooth/AdminBooth";
 
 function App() {
   return (
@@ -21,6 +22,7 @@ function App() {
         {/* 대기인원 */}
         <Route index element={<AdminHome />} />
         {/* 주문현황 */}
+        <Route path="booth" element={<AdminBooth />} />
         <Route path="orders" element={<AdminOrders />} />
         {/* 관리 & 통계 페이지 */}
         <Route path="analytics" element={<AdminAnalytics />} />

apps/nowait-admin/src/components/MobileAdminNav.tsx

@@ -0,0 +1,66 @@
+import waitIcon from "../assets/Waiting.svg"; // 대기 아이콘 등
+import orderIcon from "../assets/Order.svg";
+import statIcon from "../assets/Statistics.svg";
+import boothIcon from "../assets/Tent.svg";
+import profileImg from "../assets/profile.png"; // 사용자 이미지
+import cancelIcon from "../assets/Cancel.svg";
+import { useLocation, useNavigate } from "react-router";
+
+const menuItems = [
+  { label: "대기", icon: waitIcon, path: "/admin" },
+  { label: "주문", icon: orderIcon, path: "/admin/orders" },
+  { label: "통계", icon: statIcon, path: "/admin/analytics" },
+  { label: "부스 관리", icon: boothIcon, path: "/admin/booth" },
+];
+
+const MobileAdminNav = ({ onClose }: { onClose: () => void }) => {
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  return (
+    <div className="w-[250px] h-full bg-white flex flex-col px-4 py-6 shadow-lg fixed top-0 right-0 z-50">
+      {/* 상단 - 닫기 버튼 */}
+      <div className="flex justify-end mb-4">
+        <button onClick={onClose}>
+          <img src={cancelIcon} alt={"닫기"} className="w-6" />
+        </button>
+      </div>
+
+      {/* 메뉴 목록 */}
+      <div className="flex flex-col justify-between h-full">
+        <ul className="flex flex-col gap-2">
+          {menuItems.map(({ label, icon, path }) => {
+            const isActive = pathname === path;
+            return (
+              <li
+                key={label}
+                className={`flex items-center gap-3 px-3 py-2 rounded-md ${
+                  isActive
+                    ? "bg-[#f5f5f5] text-black font-semibold"
+                    : "text-gray-400"
+                }`}
+                onClick={() => navigate(path)}
+              >
+                <img src={icon} alt={label} className="w-5 h-5" />
+                <span>{label}</span>
+              </li>
+            );
+          })}
+        </ul>
+
+        {/* 하단 - 로그아웃 */}
+        <div className="flex items-center gap-2 px-3 mt-8">
+          <img
+            src={profileImg}
+            alt="profile"
+            className="w-8 h-8 rounded-full object-cover"
+          />
+          <button className="text-red-500 font-medium text-sm">
+            계정 로그아웃
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MobileAdminNav;

apps/nowait-admin/src/components/MobileMenuBar.tsx

@@ -1,10 +1,13 @@
 import nwIcon from "../assets/nwLogo.svg";
 import nwTextIcon from "../assets/nw_text_logo.svg";
 import menuIcon from "../assets/Menu.svg";
+import MobileAdminNav from "./MobileAdminNav";
+import { useState } from "react";
 
 const MobileMenuBar = () => {
+  const [showNav, setShowNav] = useState(false);
   return (
-    <div className="flex items-center justify-between bg-white w-full px-[20px] py-[12px]">
+    <div className="flex items-center justify-between bg-white w-full h-[56px] px-[20px] py-[12px]">
       {/* 좌측: 로고 + 텍스트 */}
       <div className="flex items-center gap-2">
         <div>
@@ -16,9 +19,10 @@ const MobileMenuBar = () => {
       </div>
 
       {/* 우측: 햄버거 메뉴 */}
-      <button className="cursor-pointer">
+      <button className="cursor-pointer" onClick={() => setShowNav(true)}>
         <img src={menuIcon} />
       </button>
+      {showNav && <MobileAdminNav onClose={() => setShowNav(false)} />}
     </div>
   );
 };

apps/nowait-admin/src/layout/AdminLayout.tsx

@@ -9,13 +9,8 @@ const AdminLayout = () => {
   const isCompact = width < 1024;
   const isMobile = width <= 431;
 
-  const getSidebarWidth = () => {
-    if (isMobile || width <= 768) return 0;
-    return isCompact ? 60 : 210;
-  };
-
   return (
-    <div className="flex w-screen">
+    <div className={`${isMobile ? "flex flex-col" : "flex"} w-screen`}>
       {isMobile ? <MobileMenuBar /> : <AdminSidebar />}
       <main
         className={`

apps/nowait-admin/src/pages/AdminBooth/AdminBooth.tsx

@@ -0,0 +1,5 @@
+const AdminBooth = () => {
+  return <div>부스 관리 페이지 입니다</div>;
+};
+
+export default AdminBooth;

apps/nowait-admin/src/pages/AdminHome/AdminHome.tsx

@@ -26,13 +26,10 @@ interface Reservation {
 }
 
 const AdminHome = () => {
-  const width = useWindowWidth();
   const [noShowIds, setNoShowIds] = useState<number[]>([]);
   const { mutate: updateStatus } = useUpdateReservationStatus();
   const [showModal, setShowModal] = useState(false);
 
-  console.log("토큰값", localStorage.getItem("adminToken"));
-
   const [activeTab, setActiveTab] = useState("전체 보기");
   const storeId = 1; //현재는 임시로 mockdata씀
   const [isOn, setIsOn] = useState(false);

apps/nowait-admin/src/pages/LoingPage/LoginPage.tsx

@@ -56,17 +56,16 @@ const LoginPage = () => {
             onChange={(e) => setId(e.target.value)}
             required
             className="peer w-[330px] h-[60px] px-4 border-[3px] border-[var(--black-35)] rounded-[12px] text-16-medium font-[500px] 
-          focus:outline-none focus:ring-0 focus:border-[var(--primary)] focus:border-[3px] focus:placeholder-shown:none pt-3 
+          focus:outline-none focus:ring-0 focus:border-[var(--primary)] focus:border-[3px] focus:placeholder-shown:none py-auto
           "
           />
           <label
             htmlFor="username"
-            className="absolute left-4 top-4 text-black-40 text-[14px] transition-all duration-200
-              peer-placeholder-shown:top-4 peer-placeholder-shown:text-[16px]
-              peer-placeholder-shown:text-black-40
-              peer-focus:top-2 peer-focus:text-[14px] peer-focus:text-primary
-              peer-valid:top-2 peer-valid:text-black-40
-              "
+            className="absolute left-4 top-1/2 -translate-y-1/2 text-black-40 text-[16px] transition-all duration-200
+            peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2
+            peer-focus:top-2 peer-focus:-translate-y-0 peer-focus:text-[14px] peer-focus:text-primary
+            peer-valid:top-2 peer-valid:-translate-y-0 peer-valid:text-[14px]
+          "
           >
             {isIdFocused ? "아이디" : ""}
           </label>
@@ -80,16 +79,15 @@ const LoginPage = () => {
             required
             placeholder={isPwFocused ? "" : "비밀번호"}
             className="peer w-[330px] h-[60px] px-4 border-[3px] border-[var(--black-35)] rounded-[12px] text-16-medium font-[500px] 
-            focus:outline-none focus:ring-0 focus:border-[var(--primary)] focus:border-[3px] focus:placeholder-shown:none pt-3 "
+            focus:outline-none focus:ring-0 focus:border-[var(--primary)] focus:border-[3px] focus:placeholder-shown:none py-auto"
           />
           <label
             htmlFor="username"
-            className="absolute left-4 top-4 text-black-40 text-[14px] transition-all duration-200
-              peer-placeholder-shown:top-4 peer-placeholder-shown:text-[16px]
-              peer-placeholder-shown:text-black-40
-              peer-focus:top-2 peer-focus:text-[14px] peer-focus:text-primary
-              peer-valid:top-2 peer-valid:text-black-40
-              "
+            className="absolute left-4 top-1/2 -translate-y-1/2 text-black-40 text-[16px] transition-all duration-200
+            peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2
+            peer-focus:top-2 peer-focus:-translate-y-0 peer-focus:text-[14px] peer-focus:text-primary
+            peer-valid:top-2 peer-valid:-translate-y-0 peer-valid:text-[14px]
+          "
           >
             {isPwFocused ? "비밀번호" : ""}
           </label>