Merge develop → main: UI 메뉴 활성화 로직 개선 및 버그 수정

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

@@ -57,17 +57,21 @@ const MobileAdminNav = ({
       <div className="flex flex-col justify-between h-full">
         <ul className="flex flex-col gap-2">
           {menuItems.map(({ label, icon, activeIcon, path }) => {
-            const isActive = pathname === path;
+            //주문의 경우 클릭시 경로에 storeId가 붙기 때문에 추가 검증
             if (label === "주문") {
               path = `/admin/orders/${storeId}`;
             }
+            const isActive = pathname === path;
             return (
               <li
                 key={label}
                 className={`flex items-center gap-3 px-3 py-2 rounded-md text-title-18-semibold ${
                   isActive ? "bg-[#f5f5f5] text-black" : "text-black-50"
                 }`}
-                onClick={() => navigate(path)}
+                onClick={() => {
+                  navigate(path);
+                  onClose();
+                }}
               >
                 {isActive ? (
                   <img src={activeIcon} alt={label} className="w-5 h-5" />

apps/nowait-admin/src/global.css

@@ -262,3 +262,45 @@ input[type="password"]::-ms-reveal,
 input[type="password"]::-ms-clear {
   display: none;
 }
+
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+
+  width: 100%;
+  height: 6px;
+  border-radius: 4px;
+  outline: none;
+
+  /* 왼쪽 = #222 / 오른쪽 = 연회색 */
+  background: linear-gradient(to right, #222 var(--value, 0%), #e5e7eb 0%);
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  background: transparent;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  background: #222;
+  border-radius: 50%;
+  cursor: pointer;
+  margin-top: -1px;
+}
+
+/* Firefox */
+/* input[type="range"]::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  background: #3b82f6;
+  border-radius: 50%;
+  cursor: pointer;
+}
+input[type="range"]::-moz-range-track {
+  background: #d1d5db;
+  height: 6px;
+  border-radius: 4px;
+} */

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

@@ -10,6 +10,7 @@ import PreviewModal from "./Modal/PreviewModal";
 import { useDeleteBannerImage } from "../../../hooks/booth/menu/useDeleteBannerImage";
 import { useRemoveEmoji } from "../../../hooks/useRemoveEmoji";
 import ImageCropModal from "./Modal/ImageCropModal";
+import { useWindowWidth } from "../../../hooks/useWindowWidth";
 
 const BoothSection = ({
   location,
@@ -69,6 +70,7 @@ const BoothSection = ({
   isMobile: boolean;
 }) => {
   const [showPreview, setShowPreview] = useState(false);
+  const width = useWindowWidth();
   const { mutate: deleteBannerImage } = useDeleteBannerImage();
   const { removeEmojiAll } = useRemoveEmoji();
   const [cropSpec, setCropSpec] = useState<{
@@ -406,7 +408,7 @@ const BoothSection = ({
         setNotice={setBoothNotice}
       />
 
-      {cropSpec && (
+      {cropSpec && width > 1279 && (
         <ImageCropModal
           file={cropSpec.file}
           aspect={cropSpec.aspect}
@@ -416,11 +418,7 @@ const BoothSection = ({
           quality={0.95}
           onDone={handleCropDone}
           onClose={() => setCropSpec(null)}
-          title={
-            cropSpec.target === "profile"
-              ? "프로필 이미지 1:1 자르기"
-              : "배너 이미지 375:246 자르기"
-          }
+          title={"이미지 편집하기"}
         />
       )}
     </>

apps/nowait-admin/src/pages/AdminBooth/components/Modal/ImageCropModal.tsx

@@ -67,10 +67,10 @@ export default function ImageCropModal({
 
   return (
     <div className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/60">
-      <div className="w-full max-w-[520px] rounded-2xl bg-white p-4">
+      <div className="w-full max-w-[520px] rounded-2xl bg-white py-4 px-5">
         <div className="mb-3 text-16-semibold">{title}</div>
 
-        <div className="relative h-[360px] w-full overflow-hidden rounded-xl bg-black">
+        <div className="relative h-[360px] w-full overflow-hidden rounded-xl bg-black cropper-wrapper">
           <Cropper
             image={url}
             crop={crop}
@@ -95,7 +95,12 @@ export default function ImageCropModal({
             max={6}
             step={0.01}
             value={zoom}
-            onChange={(e) => setZoom(Number(e.target.value))}
+            onChange={(e) => {
+              const v = Number(e.target.value);
+              setZoom(v);
+              const percent = ((v - 1) / (6 - 1)) * 100;
+              e.target.style.setProperty("--value", `${percent}%`);
+            }}
           />
         </div>