diff --git a/apps/nowait-admin/src/App.tsx b/apps/nowait-admin/src/App.tsx index 87899f15..d050d0c6 100644 --- a/apps/nowait-admin/src/App.tsx +++ b/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() { {/* 대기인원 */} } /> {/* 주문현황 */} + } /> } /> {/* 관리 & 통계 페이지 */} } /> diff --git a/apps/nowait-admin/src/assets/Cancel.svg b/apps/nowait-admin/src/assets/Cancel.svg new file mode 100644 index 00000000..b3dfb7df --- /dev/null +++ b/apps/nowait-admin/src/assets/Cancel.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/nowait-admin/src/assets/Order.svg b/apps/nowait-admin/src/assets/Order.svg new file mode 100644 index 00000000..3863cc96 --- /dev/null +++ b/apps/nowait-admin/src/assets/Order.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/apps/nowait-admin/src/assets/Statistics.svg b/apps/nowait-admin/src/assets/Statistics.svg new file mode 100644 index 00000000..feec5e69 --- /dev/null +++ b/apps/nowait-admin/src/assets/Statistics.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/nowait-admin/src/assets/Tent.svg b/apps/nowait-admin/src/assets/Tent.svg new file mode 100644 index 00000000..a8fb747e --- /dev/null +++ b/apps/nowait-admin/src/assets/Tent.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/nowait-admin/src/assets/Waiting.svg b/apps/nowait-admin/src/assets/Waiting.svg new file mode 100644 index 00000000..f3241278 --- /dev/null +++ b/apps/nowait-admin/src/assets/Waiting.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/apps/nowait-admin/src/components/MobileAdminNav.tsx b/apps/nowait-admin/src/components/MobileAdminNav.tsx new file mode 100644 index 00000000..50effa91 --- /dev/null +++ b/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 ( +
+ {/* 상단 - 닫기 버튼 */} +
+ +
+ + {/* 메뉴 목록 */} +
+
    + {menuItems.map(({ label, icon, path }) => { + const isActive = pathname === path; + return ( +
  • navigate(path)} + > + {label} + {label} +
    • + ); + })} +
+ + {/* 하단 - 로그아웃 */} +
+ profile + +
+
+
+ ); +}; + +export default MobileAdminNav; diff --git a/apps/nowait-admin/src/components/MobileMenuBar.tsx b/apps/nowait-admin/src/components/MobileMenuBar.tsx index 2a4d57e4..1642d2be 100644 --- a/apps/nowait-admin/src/components/MobileMenuBar.tsx +++ b/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 ( -
+
{/* 좌측: 로고 + 텍스트 */}
@@ -16,9 +19,10 @@ const MobileMenuBar = () => {
{/* 우측: 햄버거 메뉴 */} - + {showNav && setShowNav(false)} />}
); }; diff --git a/apps/nowait-admin/src/layout/AdminLayout.tsx b/apps/nowait-admin/src/layout/AdminLayout.tsx index f78ef11a..c76d1736 100644 --- a/apps/nowait-admin/src/layout/AdminLayout.tsx +++ b/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 ( -
+
{isMobile ? : }
{ + return
부스 관리 페이지 입니다
; +}; + +export default AdminBooth; diff --git a/apps/nowait-admin/src/pages/AdminHome/AdminHome.tsx b/apps/nowait-admin/src/pages/AdminHome/AdminHome.tsx index 169fce2e..c1a37eb7 100644 --- a/apps/nowait-admin/src/pages/AdminHome/AdminHome.tsx +++ b/apps/nowait-admin/src/pages/AdminHome/AdminHome.tsx @@ -26,13 +26,10 @@ interface Reservation { } const AdminHome = () => { - const width = useWindowWidth(); const [noShowIds, setNoShowIds] = useState([]); 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); diff --git a/apps/nowait-admin/src/pages/LoingPage/LoginPage.tsx b/apps/nowait-admin/src/pages/LoingPage/LoginPage.tsx index 0ae07120..d4265923 100644 --- a/apps/nowait-admin/src/pages/LoingPage/LoginPage.tsx +++ b/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 " /> @@ -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" />