fix: 디자인 오류 사항 모두 수정

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>
   );
 };

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

@@ -12,8 +12,8 @@ const BoothForm = () => {
   const [activeTab, setActiveTab] = useState<"booth" | "menu">("booth");
   const [boothName, setBoothName] = useState("");
   const [boothIntro, setBoothIntro] = useState("");
-  const [noticeTitle, setNoticeTitle] = useState("");
-  const [noticeContent, setNoticeContent] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+  const [isTextareaFocused, setIsTextareaFocused] = useState(false);
   const [bannerImages, setBannerImages] = useState<File[]>([]);
 
   return (
@@ -26,34 +26,32 @@ const BoothForm = () => {
       <div className="flex">
         <button
           className={`px-4 py-2 mr-2 rounded-full text-sm font-semibold ${
-            activeTab === "booth"
+            activeTab === "menu"
               ? "bg-black text-white"
-              : "bg-gray-100 text-gray-500"
+              : "bg-white text-black-60 border border-black-35"
           }`}
-          onClick={() => setActiveTab("booth")}
+          onClick={() => setActiveTab("menu")}
         >
-          부스 관리
+          메뉴 관리
         </button>
         <button
           className={`px-4 py-2 rounded-full text-sm font-semibold ${
-            activeTab === "menu"
+            activeTab === "booth"
               ? "bg-black text-white"
-              : "bg-gray-100 text-gray-500"
+              : "bg-white text-black-60 border border-black-35"
           }`}
-          onClick={() => setActiveTab("menu")}
+          onClick={() => setActiveTab("booth")}
         >
-          메뉴 관리
+          부스 관리
         </button>
       </div>
 
       {/* 부스명 */}
       <div className="flex items-center py-[50px]">
         <div className="relative self-start">
-          <img
-            src={booth_thumbnail}
-            alt="썸네일"
-            className="w-25 h-25 rounded-full bg-gray-100 object-cover"
-          />
+          <div className="h-25 w-25 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
+            <img src={booth_thumbnail} alt="썸네일" className="object-cover" />
+          </div>
           <button className="absolute bottom-0 right-0 bg-white rounded-full p-1 border border-[#ECECEC]">
             <img src={editIcon} className="w-4 h-4" alt="편집" />
           </button>
@@ -70,12 +68,17 @@ const BoothForm = () => {
               type="text"
               value={boothName}
               maxLength={20}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
               onChange={(e) => setBoothName(e.target.value)}
               placeholder="부스명을 입력해주세요"
-              className="w-full h-full border border-[#DDDDDD] rounded-xl px-4 py-2 text-sm"
+              className="w-full h-full bg-black-5 border border-[#DDDDDD] rounded-xl px-4 py-2 text-sm bg-black-5 "
             />
             <span className="absolute right-[20px] top-1/2 -translate-y-1/2 text-xs text-gray-400">
-              {boothName.length} / 20
+              <span className={isFocused ? "text-black" : "text-gray-400"}>
+                {boothName.length}
+              </span>{" "}
+              / 20
             </span>
           </div>
         </div>
@@ -89,8 +92,10 @@ const BoothForm = () => {
         </p>
         <textarea
           maxLength={250}
-          className="w-full h-32 border border-[#DDDDDD] rounded-lg text-sm px-[20px] pt-[16px] pr-[147px] pb-[33px]"
-          placeholder="부스 소개를 입력해주세요"
+          className="w-full h-32 border border-[#DDDDDD] bg-black-5 bg-black-5 focus:bg-white rounded-lg text-sm px-[20px] pt-[16px] pr-[147px] pb-[33px]"
+          onFocus={() => setIsTextareaFocused(true)}
+          onBlur={() => setIsTextareaFocused(false)}
+          placeholder={isTextareaFocused ? "" : "부스 소개를 입력해주세요"}
           value={boothIntro}
           onChange={(e) => setBoothIntro(e.target.value)}
         />

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

@@ -1,55 +1,79 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Underline from "@tiptap/extension-underline";
 
 const MenuBar = ({ editor }: { editor: any }) => {
+  const [editorChanged, setEditorChanged] = useState(0);
+  // 툴바 버튼 클릭시 리랜더링
+  useEffect(() => {
+    if (!editor) return;
+
+    const update = () => setEditorChanged((prev) => prev + 1);
+    editor.on("transaction", update);
+    return () => editor.off("transaction", update);
+  }, [editor]);
+
   if (!editor) return null;
 
+  const baseBtnClass =
+    "h-[34px] w-[34px] flex justify-center items-center rounded hover:bg-gray-100 transition-colors duration-200";
+
   return (
     <div className="flex px-[14px] py-[8px] border-b border-[#F4F4F4] text-gray-600">
       <button
         onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
-        className="px-2 py-1 rounded hover:bg-gray-100"
+        className={`${baseBtnClass} ${
+          editor.isActive("heading", { level: 1 }) ? "bg-gray-100" : ""
+        }`}
       >
         H1
       </button>
       <button
         onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-        className="px-2 py-1 mr-6 rounded hover:bg-gray-100"
+        className={`${baseBtnClass} ${
+          editor.isActive("heading", { level: 2 }) ? "bg-gray-100" : ""
+        }`}
       >
         H2
       </button>
       <button
         onClick={() => editor.chain().focus().toggleBold().run()}
-        className="px-2 py-1 font-bold rounded hover:bg-gray-100"
+        className={`${baseBtnClass} ${
+          editor.isActive("bold") ? "bg-gray-100" : ""
+        }`}
       >
         B
       </button>
       <button
         onClick={() => editor.chain().focus().toggleItalic().run()}
-        className="px-2 py-1 italic rounded hover:bg-gray-100"
+        className={`${baseBtnClass} ${
+          editor.isActive("italic") ? "bg-gray-100" : ""
+        }`}
       >
         I
       </button>
       <button
         onClick={() => editor.chain().focus().toggleUnderline().run()}
-        className="px-2 py-1 underline rounded hover:bg-gray-100"
+        className={`${baseBtnClass} ${
+          editor.isActive("underline") ? "bg-gray-100" : ""
+        }`}
       >
         U
       </button>
       <button
         onClick={() => editor.chain().focus().toggleStrike().run()}
-        className="px-2 py-1 line-through rounded hover:bg-gray-100"
+        className={`${baseBtnClass} ${
+          editor.isActive("strike") ? "bg-gray-100" : ""
+        }`}
       >
         S
       </button>
     </div>
   );
 };
-
 const NoticeEditor = () => {
-  const [title, setTitle] = useState("제목을 입력해주세요");
+  const [title, setTitle] = useState("");
 
   const editor = useEditor({
     extensions: [StarterKit, Underline],
@@ -63,13 +87,32 @@ const NoticeEditor = () => {
     // API 전송 가능
   };
 
+  const [hasCleared, setHasCleared] = useState(false);
+  // 텍스터 에디터 focusing시 clear
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleFocus = () => {
+      if (!hasCleared) {
+        editor.commands.clearContent();
+        setHasCleared(true);
+      }
+    };
+
+    editor.on("focus", handleFocus);
+    return () => {
+      editor.off("focus", handleFocus);
+    };
+  }, [editor, hasCleared]);
+
   return (
     <div className="w-full bg-white border border-[#DDDDDD] rounded-xl">
       <input
         type="text"
         value={title}
+        onFocus={() => setTitle("")}
         onChange={(e) => setTitle(e.target.value)}
-        placeholder="공지 제목을 입력하세요"
+        placeholder="제목을 입력해주세요"
         className="w-full px-5 py-3 text-[#666666] bg-black-20 font-semibold rounded-t-xl outline-none"
       />
       <MenuBar editor={editor} />

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

@@ -208,7 +208,7 @@ const AdminHome = () => {
       <section id="대기자 목록" className="flex flex-col w-full">
         {/* <h1 className="title-20-bold mb-5">대기자 목록</h1> */}
         <div className="flex justify-between items-center">
-          <div className="flex flex-wrap gap-2 overflow-x-auto scrollbar-hide [@media(max-width:431px)]:flex-nowrap [@media(max-width:431px)]:mask-fade-right">
+          <div className="flex flex-wrap whitespace-nowrap overflow-x-auto scrollbar-hide [@media(max-width:431px)]:flex-nowrap [@media(max-width:431px)]:mask-fade-right -mr-5">
             {tabLabels.map(({ label, count }) => (
               <RoundTabButton
                 key={label}

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

@@ -19,7 +19,7 @@ const RoundTabButton: React.FC<RoundTabButtonProps> = ({
     <button
       onClick={onClick}
       className={clsx(
-        "px-4 h-[33px] rounded-full text-14-medium font-semibold transition cursor-pointer",
+        "px-4 h-[33px] mr-2 rounded-full text-14-medium font-semibold transition cursor-pointer",
         "whitespace-nowrap",
         active ? "text-white bg-navy-80" : "bg-white text-navy-30"
       )}