@@ -101,9 +147,13 @@ const NavItem = ({ to, icon, label, compact }: NavItemProps) => {
to={to}
end
className={({ isActive }) =>
- `flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-semibold justify-center ${
+ `flex items-center rounded-lg text-sm font-semibold ${
isActive ? "bg-gray-100 text-black" : "text-gray-400"
- } ${compact ? "justify-center" : "justify-start"}`
+ } ${
+ compact
+ ? "justify-center w-10 h-10"
+ : "justify-start px-4 py-2 gap-[8px]"
+ }`
}
>
{icon}
diff --git a/apps/nowait-admin/src/components/MobileAdminNav.tsx b/apps/nowait-admin/src/components/MobileAdminNav.tsx
index 50effa91..3c761d86 100644
--- a/apps/nowait-admin/src/components/MobileAdminNav.tsx
+++ b/apps/nowait-admin/src/components/MobileAdminNav.tsx
@@ -1,16 +1,35 @@
import waitIcon from "../assets/Waiting.svg"; // 대기 아이콘 등
+import waitIconActive from "../assets/waitIconActive.svg";
import orderIcon from "../assets/Order.svg";
+import orderIconActive from "../assets/orderIconActive.svg";
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";
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" },
+ { label: "대기", icon: waitIcon, activeIcon: waitIconActive, path: "/admin" },
+ {
+ label: "주문",
+ icon: orderIcon,
+ activeIcon: orderIconActive,
+ path: "/admin/orders",
+ },
+ {
+ label: "통계",
+ icon: statIcon,
+ activeIcon: statIconActive,
+ path: "/admin/analytics",
+ },
+ {
+ label: "부스 관리",
+ icon: boothIcon,
+ activeIcon: boothIconActive,
+ path: "/admin/booth",
+ },
];
const MobileAdminNav = ({ onClose }: { onClose: () => void }) => {
@@ -28,19 +47,22 @@ const MobileAdminNav = ({ onClose }: { onClose: () => void }) => {
{/* 메뉴 목록 */}
- {menuItems.map(({ label, icon, path }) => {
+ {menuItems.map(({ label, icon, activeIcon, path }) => {
const isActive = pathname === path;
return (
- navigate(path)}
>
-
+ {isActive ? (
+ 
+ ) : (
+
+ )}
+
{label}
);
@@ -48,12 +70,7 @@ const MobileAdminNav = ({ onClose }: { onClose: () => void }) => {
{/* 하단 - 로그아웃 */}
-
-
+
diff --git a/apps/nowait-admin/src/components/MobileMenuBar.tsx b/apps/nowait-admin/src/components/MobileMenuBar.tsx
index 1642d2be..4e4a6c29 100644
--- a/apps/nowait-admin/src/components/MobileMenuBar.tsx
+++ b/apps/nowait-admin/src/components/MobileMenuBar.tsx
@@ -9,7 +9,7 @@ const MobileMenuBar = () => {
return (
{/* 좌측: 로고 + 텍스트 */}
-
+
diff --git a/apps/nowait-admin/src/global.css b/apps/nowait-admin/src/global.css
index b35048d8..4dcc4ebb 100644
--- a/apps/nowait-admin/src/global.css
+++ b/apps/nowait-admin/src/global.css
@@ -65,3 +65,62 @@ body,
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
+/* 에디터 관련(글 입력시 아웃라인 제거) */
+.ProseMirror:focus {
+ outline: none !important;
+ box-shadow: none !important;
+}
+
+/* toggle버튼 */
+.toggle-btn .switch {
+ position: relative;
+ display: inline-block;
+ width: 40px;
+ height: 24px;
+}
+
+.toggle-btn .switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+.toggle-btn .slider {
+ position: absolute;
+ cursor: pointer;
+ inset: 0;
+ background-color: #d3d8df;
+ transition: all 0.4s ease;
+ border-radius: 34px;
+}
+
+.toggle-btn .slider::before {
+ position: absolute;
+ content: "";
+ width: 18px;
+ height: 18px;
+ left: 3px;
+ top: 3px;
+ background-color: white;
+ transition: all 0.4s ease;
+ border-radius: 50%;
+ box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 4px 0px;
+}
+
+.toggle-btn input:checked + .slider {
+ background-color: #000000;
+}
+
+.toggle-btn input:checked + .slider::before {
+ transform: translateX(16px);
+}
+
+.toggle-btn .slider.round {
+ border-radius: 34px;
+}
+
+/* 라운드 버튼 넘칠때 그라데이션 효과 */
+.mask-fade-right {
+ mask-image: linear-gradient(to right, black 80%, transparent 100%);
+ -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
+}
diff --git a/apps/nowait-admin/src/layout/AdminLayout.tsx b/apps/nowait-admin/src/layout/AdminLayout.tsx
index c76d1736..17ff3d1d 100644
--- a/apps/nowait-admin/src/layout/AdminLayout.tsx
+++ b/apps/nowait-admin/src/layout/AdminLayout.tsx
@@ -2,6 +2,7 @@ import { Outlet } from "react-router-dom";
import AdminSidebar from "../components/AdminSidebar";
import MobileMenuBar from "../components/MobileMenuBar";
import { useWindowWidth } from "../hooks/useWindowWidth";
+import { useLocation } from "react-router-dom";
const AdminLayout = () => {
const width = useWindowWidth();
@@ -9,20 +10,24 @@ const AdminLayout = () => {
const isCompact = width < 1024;
const isMobile = width <= 431;
+ const { pathname } = useLocation();
+ const isBoothPage = pathname === "/admin/booth";
+
return (
{isMobile ?
:
}
diff --git a/apps/nowait-admin/src/pages/AdminBooth/AdminBooth.tsx b/apps/nowait-admin/src/pages/AdminBooth/AdminBooth.tsx
index 2abb3351..3894f554 100644
--- a/apps/nowait-admin/src/pages/AdminBooth/AdminBooth.tsx
+++ b/apps/nowait-admin/src/pages/AdminBooth/AdminBooth.tsx
@@ -1,5 +1,160 @@
-const AdminBooth = () => {
- return
부스 관리 페이지 입니다
;
+import { useState } from "react";
+import booth_thumbnail from "../../assets/booth_thumbnail.svg";
+import editIcon from "../../assets/edit_icon.svg";
+import placeholderIcon from "../../assets/image_placeholder.svg";
+import { useWindowWidth } from "../../hooks/useWindowWidth";
+import OperatingTimeSelector from "./components/OperatingTimeSelector";
+import NoticeEditor from "./components/NoticeEditor";
+
+const BoothForm = () => {
+ const width = useWindowWidth();
+ const isTablet = width >= 768 && width <= 1024;
+ const [activeTab, setActiveTab] = useState<"booth" | "menu">("booth");
+ const [boothName, setBoothName] = useState("");
+ const [boothIntro, setBoothIntro] = useState("");
+ const [noticeTitle, setNoticeTitle] = useState("");
+ const [noticeContent, setNoticeContent] = useState("");
+ const [bannerImages, setBannerImages] = useState
([]);
+
+ return (
+
+ {/* 탭 */}
+
+
+
+
+
+ {/* 부스명 */}
+
+
+
+
+
+
+
+ 부스명
+
+
+ 컴퓨터공학과
+
+
+ setBoothName(e.target.value)}
+ placeholder="부스명을 입력해주세요"
+ className="w-full h-full border border-[#DDDDDD] rounded-xl px-4 py-2 text-sm"
+ />
+
+ {boothName.length} / 20
+
+
+
+
+
+ {/* 부스 소개 */}
+
+
+
+ 부스를 자유롭게 소개해주세요
+
+