style: 부스 관리 메뉴 페이지 1차 구현

apps/nowait-admin/package.json

@@ -27,6 +27,7 @@
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.10.4",
     "react": "^19.1.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^19.1.0",
     "react-quill": "^2.0.0",
     "react-router": "^7.6.2",
@@ -39,6 +40,7 @@
     "@tailwindcss/postcss": "^4.1.5",
     "@types/node": "^24.0.3",
     "@types/react": "^19.1.2",
+    "@types/react-beautiful-dnd": "^13",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
     "autoprefixer": "^10.4.20",

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

@@ -70,7 +70,7 @@ const AdminSidebar = () => {
                 className="w-5 h-5"
               />
             }
-            label="웨이팅"
+            label="대기"
             compact={isCompact}
           />
           <NavItem
@@ -96,7 +96,7 @@ const AdminSidebar = () => {
                 className="w-5 h-5"
               />
             }
-            label="관리 · 통계"
+            label="통계"
             compact={isCompact}
           />
           <NavItem
@@ -108,7 +108,7 @@ const AdminSidebar = () => {
                 className="w-5 h-5"
               />
             }
-            label="부스"
+            label="부스 관리"
             compact={isCompact}
           />
         </nav>

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

@@ -6,7 +6,6 @@ import statIcon from "../assets/Statistics.svg";
 import statIconActive from "../assets/statIconActive.svg";
 import boothIcon from "../assets/Tent.svg";
 import boothIconActive from "../assets/boothIconActive.svg";
-import profileImg from "../assets/profile.png"; // 사용자 이미지
 import cancelIcon from "../assets/Cancel.svg";
 import { useLocation, useNavigate } from "react-router";
 
@@ -36,7 +35,9 @@ 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={`w-[250px] h-full bg-white flex flex-col px-4 py-6 fixed top-0 right-0 z-50 `}
+    >
       {/* 상단 - 닫기 버튼 */}
       <div className="flex justify-end mb-4">
         <button onClick={onClose}>
@@ -70,8 +71,8 @@ const MobileAdminNav = ({ onClose }: { onClose: () => void }) => {
         </ul>
 
         {/* 하단 - 로그아웃 */}
-        <div className="flex justify-end items-center gap-2 px-3 mt-8">
-          <button className="text-red-500 font-medium text-sm">
+        <div className="flex justify-start items-center gap-2 px-3 mt-8">
+          <button className="text-primary font-medium text-title-18-semibold">
             계정 로그아웃
           </button>
         </div>

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

@@ -22,7 +22,16 @@ const MobileMenuBar = () => {
       <button className="cursor-pointer" onClick={() => setShowNav(true)}>
         <img src={menuIcon} />
       </button>
-      {showNav && <MobileAdminNav onClose={() => setShowNav(false)} />}
+      {/* 사이드 메뉴: 항상 렌더링되지만 translate-x로 제어 */}
+      <div
+        className={`fixed top-0 right-0 z-50 h-full w-[260px] bg-white shadow-xl transition-transform duration-300 ${
+          showNav ? "translate-x-0" : "translate-x-full"
+        }`}
+      >
+        <MobileAdminNav onClose={() => setShowNav(false)} />
+      </div>
+      {/* dim 영역 */}
+      {showNav && <div className="fixed inset-0 bg-black/30 z-40" />}
     </div>
   );
 };