Develop

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

@@ -27,7 +27,7 @@ export default function NewOrderToast() {
     <>
       <audio
         id="new-order-audio"
-        src="/assets/sounds/new-order.mp3"
+        src="/assets/sound/newOrder.mp3"
         preload="auto"
       />
       <div className="fixed top-4 right-4 z-[1000] flex flex-col gap-2">

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

@@ -3,29 +3,36 @@ import React from "react";
 
 interface RedBadgeProps {
   label: string;
-  small: boolean | null;
+  small?: boolean; // 굳이 null 필요 없으면 선택값으로
+  changeColor?: boolean; // same
 }
 
-const RedBadge: React.FC<RedBadgeProps> = ({ label, small }) => {
+const RedBadge: React.FC<RedBadgeProps> = ({
+  label,
+  small = false,
+  changeColor = false,
+}) => {
+  const sizeClasses = small
+    ? label === "필수"
+      ? "rounded-[6px] px-[7px] py-[6px]"
+      : "h-[15.55px] w-[38px] py-[3.78px] px-[4px] rounded-[3px]"
+    : "h-[32px] rounded-[8px]";
+
+  const colorClasses = changeColor
+    ? "bg-[#16191E] text-white"
+    : "bg-[#FFECE6] text-[#ff4103]";
+
+  const textSizeClasses = small
+    ? label === "필수"
+      ? "text-12-bold"
+      : "text-8-bold"
+    : "text-16-semibold py-[5px] px-[10px]";
+
   return (
     <div
-      className={`inline-block ${
-        small
-          ? label == "필수"
-            ? "rounded-[6px] px-[7px] py-[6px]"
-            : "h-[15.55px] w-[38px] py-[3.78px] px-[4px] rounded-[3px]"
-          : "h-[32px] rounded-[8px]"
-      } bg-[#FFECE6] flex items-center justify-center`}
+      className={`inline-block ${sizeClasses} ${colorClasses} flex items-center justify-center`}
     >
-      <p
-        className={`flex  items-center justify-center ${
-          small
-            ? label == "필수"
-              ? "text-12-bold"
-              : "text-8-bold"
-            : "text-16-medium py-[5px] px-[10px]"
-        } text-[#ff4103]`}
-      >
+      <p className={`flex items-center justify-center ${textSizeClasses}`}>
         {label}
       </p>
     </div>

apps/nowait-admin/src/pages/AdminAnalytics/components/BoothSalesRankingCard .tsx

@@ -39,10 +39,14 @@ const BoothSalesRankingCard: React.FC<BoothSalesRankingCardProps> = ({
 }) => {
   return (
     <div
-      className={`bg-white w-full rounded-[16px] mt-[10px] ${
-        disabled ? "flex flex-col justify-center items-center relative" : ""
+      className={`bg-white rounded-[16px] mt-[10px] ${
+        disabled
+          ? "w-full flex flex-col justify-center items-center relative"
+          : ""
       } ${
-        isTablet ? "h-[364px] max-h-[50%] p-6 w-[754px]" : " h-[410px] p-[22px]"
+        isTablet
+          ? "h-[364px] max-h-[50%] p-6 w-full"
+          : "max-w-[335px] h-[410px] p-[22px]"
       }`}
     >
       <div

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

@@ -1,6 +1,6 @@
 import { Button } from "@repo/ui/button";
 import RedBadge from "../../components/RedBadge";
-import redLogo from "../../assets/redLogo.svg";
+import blackLogo from "../../assets/blackLogo.svg";
 import { useNavigate } from "react-router";
 import bg_festival from "../../assets/startPage/bg_festival.svg";
 import bg_order from "../../assets/startPage/bg_order.svg";
@@ -14,7 +14,7 @@ const AdminAuth = () => {
       {/* 1. Hero Section */}
       <section className="w-[576px] [@media(max-width:431px)]:w-[325px] text-left mx-auto mt-[50px] ">
         <div>
-          <img src={redLogo} />
+          <img src={blackLogo} />
         </div>
         <h2 className="text-3xl font-bold leading-snug mt-4">
           기다림 없는 <br /> 우리의 즐거운 축제
@@ -26,7 +26,7 @@ const AdminAuth = () => {
 
       {/* 2. Feature Section 1 */}
       <section className="w-[576px] [@media(max-width:431px)]:w-[325px] mx-auto ">
-        <RedBadge label="웨이팅 관리" small={false} />
+        <RedBadge label="웨이팅 관리" small={false} changeColor={true} />
         <h3 className="text-headline-28-bold mb-3 mt-3">
           대기 없이 빠르게
           <br />
@@ -44,7 +44,7 @@ const AdminAuth = () => {
 
       {/* 3. Feature Section 2 */}
       <section className="w-[576px] [@media(max-width:431px)]:w-[325px] mx-auto text-right">
-        <RedBadge label="주문 관리" small={false} />
+        <RedBadge label="주문 관리" small={false} changeColor={true} />
         <h3 className="text-headline-28-bold mb-3 mt-3">
           주문 접수, 입금 확인도
           <br />
@@ -62,7 +62,7 @@ const AdminAuth = () => {
 
       {/* 4. Feature Section 3 */}
       <section className="w-[576px]  [@media(max-width:431px)]:w-[325px] mx-auto mb-[200px]">
-        <RedBadge label="운영 현황 요약" small={false} />
+        <RedBadge label="운영 현황 요약" small={false} changeColor={true} />
         <h3 className="text-headline-28-bold mb-3 mt-3">
           운영 상황을 한눈에
           <br />
@@ -79,8 +79,7 @@ const AdminAuth = () => {
       </section>
 
       <div
-        className="fixed bottom-6 left-1/2 -translate-x-1/2 w-[576px] 
-  [@media(max-width:431px)]:bottom-[60px] 
+        className="fixed bottom-6 left-1/2 -translate-x-1/2 w-[576px]  
   [@media(max-width:431px)]:mb-0 
   [@media(max-width:431px)]:w-[325px] rounded-[12px]"
       >

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

@@ -310,9 +310,9 @@ const BoothForm = () => {
         isTablet ? "px-[100px] py-[20px]" : "px-[20px] py-[20px]"
       }`}
     >
-      <div className="max-w-[614px] w-full mx-auto">
+      <div className="w-full mx-auto">
         {/* 탭 */}
-        <div className="flex gap-2">
+        <div className="flex w-full gap-2">
           <button
             className={`px-4 py-2 rounded-full text-14-semibold ${
               activeTab === "menu"

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

@@ -14,9 +14,12 @@ import { REQUIRED_PREFIX, validateUrlPrefix } from "./Rule/payUrlRule";
 import { useWindowWidth } from "../../../hooks/useWindowWidth";
 import { FaRegTrashAlt } from "react-icons/fa";
 import { FaFileUpload } from "react-icons/fa";
+import { DropdownSelect } from "./DropDown/DropDownSelect";
+
+const bankOptions = ["IBK 기업", "신한은행", "국민은행", "하나은행"];
 
 const AccountPage = () => {
-  const [bank, setBank] = useState("IBK기업");
+  const [bank, setBank] = useState("");
   const [accountName, setAccountName] = useState("");
   const [accountNumber, setAccountNumber] = useState("");
   const [errors, setErrors] = useState<Record<PaymentId, string | null>>({
@@ -271,21 +274,37 @@ const AccountPage = () => {
     let numberInfo = accountInfo[0];
     if (accountInfo.length === 4) {
       bankInfo = accountInfo[2] + accountInfo[3];
+    } else if (accountInfo.length < 3) {
+      bankInfo = "";
+      nameInfo = "";
+      numberInfo = "";
+    }
+
+    if (!numberInfo || !nameInfo || !bankInfo) {
+      setBank("");
+      setAccountName("");
+      setAccountNumber("");
+    } else {
+      setBank(bankInfo);
+      setAccountName(nameInfo);
+      setAccountNumber(numberInfo);
     }
-    setBank(bankInfo);
-    setAccountName(nameInfo);
-    setAccountNumber(numberInfo);
   }, [storePayment]);
 
   return (
     <div>
       {/* Guide Banner */}
       <div className="my-10">
-        <img src={banner} alt="배너" onClick={() => navigate("guides")} />
+        <img
+          src={banner}
+          alt="배너"
+          className="w-full"
+          onClick={() => navigate("guides")}
+        />
       </div>
 
       {/* QR Code Section */}
-      <section>
+      <section className="w-full">
         <h2 className="flex items-center text-navy-80 text-18-bold gap-[6px]">
           간편 송금 QR코드 <RedBadge label="필수" small={true} />
         </h2>
@@ -316,7 +335,7 @@ const AccountPage = () => {
                   <span className="text-14-semibold">{option.name}</span>
                 )}
               </div>
-              <div className="flex justify-between h-[52px] w-[474px] min-w-[236px] items-center bg-black-5 rounded-xl border border-[#dddddd] pl-4 pr-[10px] py-4">
+              <div className="flex justify-between h-[52px] w-full min-w-[236px] items-center bg-black-5 rounded-xl border border-[#dddddd] pl-4 pr-[10px] py-4">
                 <div className={`flex flex-col w-[79%] w-overflow-scroll`}>
                   <div className="relative w-full">
                     <input
@@ -408,21 +427,21 @@ const AccountPage = () => {
       <section className="my-[60px]">
         <h2 className="text-navy-80 text-18-bold mb-[20px]">입금받을 계좌</h2>
         <div className="flex space-x-[10px]">
-          <select
+          <DropdownSelect
+            type="bank"
             value={bank}
-            onChange={(e) => setBank(e.target.value)}
-            className="w-1/4 border border-[#dddddd] rounded-md p-4 text-black-70 text-14-regular rounded-xl"
-          >
-            <option>IBK 기업</option>
-            <option>신한은행</option>
-            <option>국민은행</option>
-            <option>하나은행</option>
-          </select>
+            onChange={setBank}
+            options={bankOptions}
+            placeholder="은행 선택"
+            className="w-1/4 h-[53.93px]"
+          />
           <input
             type="text"
-            placeholder="예금주 이름"
+            placeholder="예금주"
             value={accountName}
-            onChange={(e) => setAccountName(e.target.value)}
+            onChange={(e) => {
+              setAccountName(e.target.value);
+            }}
             className="w-1/4 border border-[#dddddd] bg-black-5 text-14-regular text-black-90 rounded-xl p-4"
           />
           <input

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

@@ -73,7 +73,7 @@ const BoothSection = ({
 
   return (
     <>
-      <div className="flex flex-col items-center pb-[50px] max-w-[614px]">
+      <div className="flex flex-col items-center pb-[50px] w-full ">
         <div className="flex justify-between items-center w-full my-[40px]">
           {/* 좌측 타이틀 */}
           <h2 className="text-headline-22-bold text-black-80">부스 프로필</h2>
@@ -171,7 +171,7 @@ const BoothSection = ({
       </div>
 
       {/* 부스 소개 */}
-      <div className="flex flex-col mb-[50px] relative max-w-[614px]">
+      <div className="flex flex-col mb-[50px] relative w-full">
         <label
           className={`block text-title-18-bold text-black-80 ${
             isMobile ? "mb-[14px]" : ""
@@ -201,7 +201,7 @@ const BoothSection = ({
       </div>
 
       {/* 배너 이미지 */}
-      <div className="flex flex-col mb-[50px] max-w-[614px]">
+      <div className="flex flex-col mb-[50px] w-full">
         <label
           className={`block text-title-18-bold text-black-80 ${
             isMobile ? "mb-[6px]" : ""

apps/nowait-admin/src/pages/AdminBooth/components/DropDown/DropDownSelect.tsx

@@ -2,12 +2,14 @@ import { useEffect, useRef, useState } from "react";
 import dropIcon from "../../../../assets/drop_down.svg";
 
 export const DropdownSelect = ({
+  type,
   value,
   onChange,
   options,
   placeholder,
   className = "w-[124.25px]",
 }: {
+  type?: string;
   value: string;
   onChange: (val: string) => void;
   options: string[];
@@ -18,8 +20,8 @@ export const DropdownSelect = ({
   const [highlight, setHighlight] = useState<number>(-1);
   const rootRef = useRef<HTMLDivElement | null>(null);
 
-  const display = value || placeholder;
-  const isPlaceholder = !value;
+  const isPlaceholder = value == null || value.trim().length === 0;
+  const display = isPlaceholder ? placeholder : value;
 
   // 바깥 클릭 닫기
   useEffect(() => {
@@ -72,9 +74,11 @@ export const DropdownSelect = ({
         aria-expanded={open}
         onClick={() => setOpen((v) => !v)}
         onKeyDown={onKeyDown}
-        className={`h-10 w-full rounded-lg border border-[#DDDDDD] bg-white focus:bg-[#FAFAFA] p-[10px] text-13-regular text-left`}
+        className={`h-full w-full ${
+          type === "bank" ? "rounded-xl" : "rounded-lg"
+        } border border-[#DDDDDD] bg-white focus:bg-[#FAFAFA] p-[10px] text-13-regular text-left`}
       >
-        <span className={isPlaceholder ? "text-black-35" : "text-black-90"}>
+        <span className={isPlaceholder ? "text-gray-400" : "text-black-90"}>
           {display}
         </span>
         <img

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

@@ -235,7 +235,7 @@ const MenuSection = ({ isTablet }: { isTablet: boolean }) => {
   }, [fetchedMenus]);
 
   return (
-    <div className="mt-[40px] mb-[20px] max-w-[614px]">
+    <div className="mt-[40px] mb-[20px] w-full">
       <div className="flex justify-between items-center mb-[20px]">
         <h2 className="text-headline-22-bold">메뉴</h2>
         <div className="flex gap-[10px]">

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

@@ -128,7 +128,7 @@ const NoticeEditor = ({
   }, [notice, editor]);
 
   return (
-    <div className="w-full bg-white border border-[#DDDDDD] rounded-xl max-w-[614px]">
+    <div className="w-full bg-white border border-[#DDDDDD] rounded-xl w-full">
       <input
         type="text"
         value={noticeTitle}

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

@@ -61,7 +61,7 @@ const OperatingTimeSelector = ({
   isMobile: boolean;
 }) => {
   return (
-    <div className="mb-[50px] max-w-[614px]">
+    <div className="mb-[50px] w-full">
       <label className="block text-title-18-bold text-black-80 mb-1">
         운영 시간
       </label>

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

@@ -230,7 +230,6 @@ const AdminHome = () => {
   }, [store]);
 
   return (
-    //md:w-[752px]
     <div className={`w-full flex flex-col items-center space-y-6`}>
       <section
         id="대기 현황"