@hivcd-printshop/design-system 1.2.2 → 1.3.0

package/dist/index.mjs

@@ -1,5 +1,8 @@
 'use client';
 
+// src/components/Accordion/Accordion.tsx
+import { forwardRef } from "react";
+
 // src/lib/cn.ts
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
@@ -27,6 +30,21 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/lib/useControllableState.ts
+import { useCallback, useState } from "react";
+function useControllableState(controlled, defaultValue) {
+  const isControlled = controlled !== void 0;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const value = isControlled ? controlled : uncontrolled;
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue, isControlled];
+}
+
 // src/assets/svgs/Icons.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var IconChevronDownXS = ({
@@ -259,10 +277,88 @@ var IconClose = ({ className, stroke }) => {
   );
 };
 
+// src/components/Accordion/Accordion.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Accordion = forwardRef(function Accordion2({
+  step,
+  title,
+  children,
+  headerRight,
+  collapsible = true,
+  defaultOpen = true,
+  open,
+  onOpenChange,
+  stickyHeader = false,
+  className,
+  headerClassName,
+  contentClassName
+}, ref) {
+  const [isOpen, setIsOpen] = useControllableState(open, defaultOpen);
+  const expanded = collapsible ? isOpen : true;
+  const toggleOpen = () => {
+    if (!collapsible) return;
+    const next = !isOpen;
+    setIsOpen(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs2("div", { ref, className: cn("w-full bg-white", className), children: [
+    /* @__PURE__ */ jsx2(
+      AccordionHeader,
+      {
+        step,
+        title,
+        headerRight,
+        isOpen: expanded,
+        collapsible,
+        onClick: toggleOpen,
+        className: cn(stickyHeader && "sticky top-0 z-10", headerClassName)
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx2("div", { className: contentClassName, children })
+  ] });
+});
+var AccordionHeader = ({
+  step,
+  title,
+  headerRight,
+  isOpen,
+  collapsible,
+  onClick,
+  className
+}) => {
+  const label = /* @__PURE__ */ jsxs2("span", { className: "truncate", children: [
+    step,
+    " | ",
+    title
+  ] });
+  const base = "w-full flex items-center justify-between gap-3 px-5 py-2.5 text-head3-medium text-primary text-left bg-white border-b border-gray02";
+  if (!collapsible) {
+    return /* @__PURE__ */ jsxs2("div", { className: cn(base, className), children: [
+      label,
+      headerRight
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(base, "cursor-pointer hover:bg-gray00 active:bg-gray01", className),
+      children: [
+        label,
+        /* @__PURE__ */ jsxs2("span", { className: "flex shrink-0 items-center gap-3", children: [
+          headerRight,
+          /* @__PURE__ */ jsx2(IconChevronDownXS, { className: cn("transition-transform", isOpen && "rotate-180") })
+        ] })
+      ]
+    }
+  );
+};
+
 // src/components/BackButton/BackButton.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var BackButton = ({ onClick, className }) => {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "button",
     {
       type: "button",
@@ -275,13 +371,13 @@ var BackButton = ({ onClick, className }) => {
         "cursor-pointer",
         className
       ),
-      children: /* @__PURE__ */ jsx2(IconGoBack, {})
+      children: /* @__PURE__ */ jsx3(IconGoBack, {})
     }
   );
 };
 
 // src/components/CTA/CTA.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var CTA = ({
   primary = false,
   alert = false,
@@ -292,7 +388,7 @@ var CTA = ({
   forModal = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "button",
     {
       type: "button",
@@ -320,22 +416,22 @@ var CTA = ({
 };
 
 // src/components/Column/MultiColumn.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var MultiColumnMain = ({ children, className }) => {
-  return /* @__PURE__ */ jsx4("div", { className: cn("flex flex-col w-full h-full", className), children });
+  return /* @__PURE__ */ jsx5("div", { className: cn("flex flex-col w-full h-full", className), children });
 };
 var Columns = ({ children, className }) => {
   return (
     // flex 래퍼를 사용하고 하위 Column들이 flex-1을 가지게 하거나,
     // grid를 사용하여 열을 나눌 수 있어. 여기서는 flex를 활용한 균등 분할 예시야.
-    /* @__PURE__ */ jsx4("div", { className: cn("flex w-full h-full divide-x divide-gray02", className), children })
+    /* @__PURE__ */ jsx5("div", { className: cn("flex w-full h-full divide-x divide-gray02", className), children })
   );
 };
 var CTAs = ({ children, className }) => {
   if (!children) return null;
   return (
     // CTA 버튼들을 중앙에 배치하는 예시 (우측 정렬이 필요하면 justify-end 사용)
-    /* @__PURE__ */ jsx4("div", { className: cn("flex flex-col w-full h-fit", className), children })
+    /* @__PURE__ */ jsx5("div", { className: cn("flex flex-col w-full h-fit", className), children })
   );
 };
 var MultiColumn = Object.assign(MultiColumnMain, {
@@ -344,78 +440,78 @@ var MultiColumn = Object.assign(MultiColumnMain, {
 });
 
 // src/components/Column/Column.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var Column = ({ className, children, header }) => {
-  return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col gap-5", "h-full w-full px-5 py-3", className), children: [
-    header && /* @__PURE__ */ jsx5("h1", { className: cn("text-body1-medium text-primary"), children: header }),
+  return /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col gap-5", "h-full w-full px-5 py-3", className), children: [
+    header && /* @__PURE__ */ jsx6("h1", { className: cn("text-body1-medium text-primary"), children: header }),
     children
   ] });
 };
 
 // src/components/Column/ColumnContentContainer.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var ColumnContentContainer = ({ className, children }) => {
-  return /* @__PURE__ */ jsx6("div", { className: cn("flex flex-col gap-1.5 w-full h-fit", className), children });
+  return /* @__PURE__ */ jsx7("div", { className: cn("flex flex-col gap-1.5 w-full h-fit", className), children });
 };
 
 // src/components/Column/ColumnLabel.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var ColumnLabel = ({ className, children, subLabel, htmlFor }) => {
-  return /* @__PURE__ */ jsxs3("label", { htmlFor, className: cn("flex gap-1.5 items-end", className), children: [
-    /* @__PURE__ */ jsx7("span", { className: cn("text-body2-regular text-tertiary"), children }),
-    subLabel && /* @__PURE__ */ jsx7("span", { className: cn("text-caption-book text-quaternary"), children: subLabel })
+  return /* @__PURE__ */ jsxs4("label", { htmlFor, className: cn("flex gap-1.5 items-end", className), children: [
+    /* @__PURE__ */ jsx8("span", { className: cn("text-body2-regular text-tertiary"), children }),
+    subLabel && /* @__PURE__ */ jsx8("span", { className: cn("text-caption-book text-quaternary"), children: subLabel })
   ] });
 };
 
 // src/components/Column/ColumnText.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var ColumnTextStyle = "text-body3-book text-strong";
 var ModalTextStyle = "text-body1-regular text-primary";
 var ColumnText = ({ className, alert = false, children, onClick }) => {
-  return /* @__PURE__ */ jsx8("div", { className: cn(ColumnTextStyle, alert && "text-danger", className), onClick, children: children ? children : "-" });
+  return /* @__PURE__ */ jsx9("div", { className: cn(ColumnTextStyle, alert && "text-danger", className), onClick, children: children ? children : "-" });
 };
 
 // src/components/Column/ColumnSubTitle.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var ColumnSubTitle = ({
   className,
   children,
   action,
   as: Tag2 = "h2"
 }) => {
-  return /* @__PURE__ */ jsxs4(Tag2, { className: cn("flex items-center justify-between gap-1.5", "w-full", className), children: [
-    /* @__PURE__ */ jsx9("span", { className: cn("text-body1-medium text-primary"), children }),
-    action && /* @__PURE__ */ jsx9("span", { className: "flex shrink-0 items-center", children: action })
+  return /* @__PURE__ */ jsxs5(Tag2, { className: cn("flex items-center justify-between gap-1.5", "w-full", className), children: [
+    /* @__PURE__ */ jsx10("span", { className: cn("text-body1-medium text-primary"), children }),
+    action && /* @__PURE__ */ jsx10("span", { className: "flex shrink-0 items-center", children: action })
   ] });
 };
 
 // src/components/Column/ColumnDescription.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var ColumnDescription = ({
   className,
   children,
   bullet = true
 }) => {
-  return /* @__PURE__ */ jsxs5("div", { className: cn("flex items-start gap-3", className), children: [
-    bullet && /* @__PURE__ */ jsx10("span", { className: "flex shrink-0 items-center py-1", children: /* @__PURE__ */ jsx10(IconCompass, { className: "size-4" }) }),
-    /* @__PURE__ */ jsx10("div", { className: "min-w-0 flex-1 whitespace-pre-line text-body3-book text-primary", children })
+  return /* @__PURE__ */ jsxs6("div", { className: cn("flex items-start gap-3", className), children: [
+    bullet && /* @__PURE__ */ jsx11("span", { className: "flex shrink-0 items-center py-1", children: /* @__PURE__ */ jsx11(IconCompass, { className: "size-4" }) }),
+    /* @__PURE__ */ jsx11("div", { className: "min-w-0 flex-1 whitespace-pre-line text-body3-book text-primary", children })
   ] });
 };
 var ColumnDescriptionList = ({ className, children }) => {
-  return /* @__PURE__ */ jsx10("div", { className: cn("flex flex-col gap-4", className), children });
+  return /* @__PURE__ */ jsx11("div", { className: cn("flex flex-col gap-4", className), children });
 };
 
 // src/components/Form/BasicFormField.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var BasicFormField = ({
   children,
   isDanger,
   dangerText,
   className
 }) => {
-  return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col gap-1.5", className), children: [
+  return /* @__PURE__ */ jsxs7("div", { className: cn("flex flex-col gap-1.5", className), children: [
     children,
-    isDanger && dangerText && /* @__PURE__ */ jsx11("span", { className: "text-caption-book text-danger", children: dangerText })
+    isDanger && dangerText && /* @__PURE__ */ jsx12("span", { className: "text-caption-book text-danger", children: dangerText })
   ] });
 };
 var getInputStyles = (isDanger, additionalClass) => {
@@ -434,15 +530,15 @@ var getInputStyles = (isDanger, additionalClass) => {
 };
 
 // src/components/Form/FormText.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var FormText = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ jsx12(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx12("input", { type: "text", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ jsx13(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx13("input", { type: "text", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormTextArea.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var FormTextArea = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ jsx13(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx14(
     "textarea",
     {
       className: getInputStyles(isDanger, "resize-none h-30 px-4 py-2.5 " + (className || "")),
@@ -452,19 +548,19 @@ var FormTextArea = ({ className, isDanger, dangerText, ...props }) => {
 };
 
 // src/components/Form/FormNumber.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var FormNumber = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ jsx14(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx14("input", { type: "number", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ jsx15(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx15("input", { type: "number", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormPassword.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var FormPassword = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ jsx15(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx15("input", { type: "password", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ jsx16(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx16("input", { type: "password", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormTel.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
   const handlePhoneChange = (e) => {
     const rawValue = e.target.value.replace(/[^0-9]/g, "");
@@ -476,7 +572,7 @@ var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
     e.target.value = formattedValue;
     if (onChange) onChange(e);
   };
-  return /* @__PURE__ */ jsx16(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx17(
     "input",
     {
       type: "tel",
@@ -489,8 +585,8 @@ var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
 };
 
 // src/components/Form/FormColor.tsx
-import { useState } from "react";
-import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useState as useState2 } from "react";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var FormColor = ({
   className,
   isDanger,
@@ -500,7 +596,7 @@ var FormColor = ({
   onChange,
   ...props
 }) => {
-  const [internalColor, setInternalColor] = useState(
+  const [internalColor, setInternalColor] = useState2(
     value || defaultValue || "#000000"
   );
   const color = value !== void 0 ? value : internalColor;
@@ -508,7 +604,7 @@ var FormColor = ({
     setInternalColor(e.target.value);
     onChange?.(e);
   };
-  return /* @__PURE__ */ jsx17(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx18(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs8(
     "label",
     {
       className: getInputStyles(
@@ -517,7 +613,7 @@ var FormColor = ({
         "flex items-center gap-2 relative focus-within:border-black focus-within:hover:bg-white" + (className || "")
       ),
       children: [
-        /* @__PURE__ */ jsx17("div", { className: "w-6 h-6 shrink-0 overflow-hidden", style: { backgroundColor: color }, children: /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18("div", { className: "w-6 h-6 shrink-0 overflow-hidden", style: { backgroundColor: color }, children: /* @__PURE__ */ jsx18(
           "input",
           {
             type: "color",
@@ -527,15 +623,15 @@ var FormColor = ({
             ...props
           }
         ) }),
-        /* @__PURE__ */ jsx17("span", { className: "text-primary text-body3-regular uppercase flex-1 select-none", children: color })
+        /* @__PURE__ */ jsx18("span", { className: "text-primary text-body3-regular uppercase flex-1 select-none", children: color })
       ]
     }
   ) });
 };
 
 // src/components/Form/FormFile.tsx
-import { useState as useState2 } from "react";
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var FormFile = ({
   className,
   isDanger,
@@ -545,7 +641,7 @@ var FormFile = ({
   onChange,
   ...props
 }) => {
-  const [selectedFile, setSelectedFile] = useState2(null);
+  const [selectedFile, setSelectedFile] = useState3(null);
   const handleFileChange = (e) => {
     const originalFile = e.target.files?.[0];
     if (!originalFile) {
@@ -596,7 +692,7 @@ var FormFile = ({
     }
   };
   const displayFileName = selectedFile?.name || (fileUrl ? fileUrl.split("/").pop() : null);
-  return /* @__PURE__ */ jsx18(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsx19(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs9(
     "div",
     {
       className: getInputStyles(
@@ -609,7 +705,7 @@ var FormFile = ({
         )
       ),
       children: [
-        displayFileName && /* @__PURE__ */ jsx18(
+        displayFileName && /* @__PURE__ */ jsx19(
           "span",
           {
             onClick: handleDownload,
@@ -618,9 +714,9 @@ var FormFile = ({
             children: displayFileName
           }
         ),
-        /* @__PURE__ */ jsxs8("label", { className: "shrink-0 px-1 -mx-1 cursor-pointer", children: [
-          /* @__PURE__ */ jsx18("div", { className: "text-primary text-caption-regular underline", children: displayFileName ? "\uB2E4\uC2DC \uCCA8\uBD80" : "\uD30C\uC77C \uCCA8\uBD80" }),
-          /* @__PURE__ */ jsx18("input", { type: "file", className: "hidden", onChange: handleFileChange, ...props })
+        /* @__PURE__ */ jsxs9("label", { className: "shrink-0 px-1 -mx-1 cursor-pointer", children: [
+          /* @__PURE__ */ jsx19("div", { className: "text-primary text-caption-regular underline", children: displayFileName ? "\uB2E4\uC2DC \uCCA8\uBD80" : "\uD30C\uC77C \uCCA8\uBD80" }),
+          /* @__PURE__ */ jsx19("input", { type: "file", className: "hidden", onChange: handleFileChange, ...props })
         ] })
       ]
     }
@@ -628,7 +724,7 @@ var FormFile = ({
 };
 
 // src/components/Form/FormCheckBox.tsx
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 var FormCheckBox = ({
   isChecked,
   setIsChecked,
@@ -637,7 +733,7 @@ var FormCheckBox = ({
   textStyle,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "label",
     {
       className: cn(
@@ -648,7 +744,7 @@ var FormCheckBox = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           "input",
           {
             type: "checkbox",
@@ -658,14 +754,14 @@ var FormCheckBox = ({
             ...props
           }
         ),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           "div",
           {
             className: cn(
               "flex items-center justify-center w-5 h-5 shrink-0 rounded transition-colors",
               "group-hover:bg-gray00 group-active:bg-gray01"
             ),
-            children: /* @__PURE__ */ jsx19(
+            children: /* @__PURE__ */ jsx20(
               "div",
               {
                 className: cn(
@@ -675,29 +771,29 @@ var FormCheckBox = ({
                   // 💡 3. 키보드 Tab 이동 시 접근성 향상 (포커스 링 표시)
                   "peer-focus-visible:ring-2 peer-focus-visible:ring-black peer-focus-visible:ring-offset-1"
                 ),
-                children: isChecked && /* @__PURE__ */ jsx19(IconCheck, {})
+                children: isChecked && /* @__PURE__ */ jsx20(IconCheck, {})
               }
             )
           }
         ),
-        children && /* @__PURE__ */ jsx19("span", { className: cn("text-body3-book text-primary", textStyle), children })
+        children && /* @__PURE__ */ jsx20("span", { className: cn("text-body3-book text-primary", textStyle), children })
       ]
     }
   );
 };
 
 // src/components/Form/FormSelectBox.tsx
-import { useEffect, useRef, useState as useState3 } from "react";
+import { useEffect, useRef, useState as useState4 } from "react";
 
 // src/components/Form/SelectBoxOption.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var SelectBoxOption = ({
   label,
   onClick,
   // selectedLabel,
   className
 }) => {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "li",
     {
       onClick,
@@ -719,7 +815,7 @@ var SelectBoxOption = ({
 };
 
 // src/components/Form/FormSelectBox.tsx
-import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 var FormSelectBox = ({
   options,
   value,
@@ -729,7 +825,7 @@ var FormSelectBox = ({
   dangerText,
   className
 }) => {
-  const [isOpen, setIsOpen] = useState3(false);
+  const [isOpen, setIsOpen] = useState4(false);
   const containerRef = useRef(null);
   useEffect(() => {
     const handleClickOutside = (event) => {
@@ -742,8 +838,8 @@ var FormSelectBox = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ jsx21(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs10("div", { ref: containerRef, className: "relative w-full", children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx22(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs11("div", { ref: containerRef, className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs11(
       "div",
       {
         tabIndex: 0,
@@ -763,8 +859,8 @@ var FormSelectBox = ({
           setIsOpen((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx21("span", { className: value ? "text-primary" : "text-quaternary", children: value || placeholder }),
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22("span", { className: value ? "text-primary" : "text-quaternary", children: value || placeholder }),
+          /* @__PURE__ */ jsx22(
             IconChevronDownXS,
             {
               className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
@@ -774,7 +870,7 @@ var FormSelectBox = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx21(
+    isOpen && /* @__PURE__ */ jsx22(
       "ul",
       {
         className: cn(
@@ -784,7 +880,7 @@ var FormSelectBox = ({
           "max-h-50 overflow-y-auto"
           // 항목이 너무 많으면 스크롤 생성 (디자인 스펙: 그림자 없음)
         ),
-        children: options.map((option) => /* @__PURE__ */ jsx21(
+        children: options.map((option) => /* @__PURE__ */ jsx22(
           SelectBoxOption,
           {
             label: option,
@@ -801,7 +897,7 @@ var FormSelectBox = ({
 };
 
 // src/components/TextButton/TextButton.tsx
-import { Fragment, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var TextButton = ({
   children,
   icon,
@@ -811,10 +907,10 @@ var TextButton = ({
   className,
   ...props
 }) => {
-  const content = /* @__PURE__ */ jsxs11(Fragment, { children: [
-    icon && iconPosition === "left" && /* @__PURE__ */ jsx22("span", { className: "flex shrink-0 items-center", children: icon }),
-    /* @__PURE__ */ jsx22("span", { className: cn(underline && "underline underline-offset-2"), children }),
-    icon && iconPosition === "right" && /* @__PURE__ */ jsx22("span", { className: "flex shrink-0 items-center", children: icon })
+  const content = /* @__PURE__ */ jsxs12(Fragment, { children: [
+    icon && iconPosition === "left" && /* @__PURE__ */ jsx23("span", { className: "flex shrink-0 items-center", children: icon }),
+    /* @__PURE__ */ jsx23("span", { className: cn(underline && "underline underline-offset-2"), children }),
+    icon && iconPosition === "right" && /* @__PURE__ */ jsx23("span", { className: "flex shrink-0 items-center", children: icon })
   ] });
   const classes = cn(
     "inline-flex w-fit items-center gap-1 px-1 -mx-1",
@@ -829,17 +925,17 @@ var TextButton = ({
   );
   if (props.href !== void 0) {
     const { href, ...rest } = props;
-    return /* @__PURE__ */ jsx22("a", { href, className: classes, ...rest, children: content });
+    return /* @__PURE__ */ jsx23("a", { href, className: classes, ...rest, children: content });
   }
   const buttonProps = props;
-  return /* @__PURE__ */ jsx22("button", { type: "button", className: classes, ...buttonProps, children: content });
+  return /* @__PURE__ */ jsx23("button", { type: "button", className: classes, ...buttonProps, children: content });
 };
 
 // src/components/Dropdown/Dropdown.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState5 } from "react";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
-  const [isOpen, setIsOpen] = useState4(false);
+  const [isOpen, setIsOpen] = useState5(false);
   const containerRef = useRef2(null);
   useEffect2(() => {
     const handleClickOutside = (event) => {
@@ -852,8 +948,8 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ jsxs12("div", { ref: containerRef, className: "relative", children: [
-    /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ jsxs13(
       "div",
       {
         className: cn(
@@ -866,8 +962,8 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
         ),
         onClick: () => setIsOpen((prev) => !prev),
         children: [
-          /* @__PURE__ */ jsx23("p", { children: selectedLabel }),
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx24("p", { children: selectedLabel }),
+          /* @__PURE__ */ jsx24(
             IconChevronDownXS,
             {
               className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
@@ -877,7 +973,7 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx23("div", { className: cn("absolute top-full right-0 z-10", "box-border border border-gray02"), children: labels.map((label) => /* @__PURE__ */ jsx23(
+    isOpen && /* @__PURE__ */ jsx24("div", { className: cn("absolute top-full right-0 z-10", "box-border border border-gray02"), children: labels.map((label) => /* @__PURE__ */ jsx24(
       SelectBoxOption,
       {
         label,
@@ -893,7 +989,7 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
 };
 
 // src/components/ListView/List.tsx
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 function List({
   className,
   label1,
@@ -906,7 +1002,7 @@ function List({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "li",
     {
       className: cn(
@@ -921,11 +1017,11 @@ function List({
       ...props,
       onClick,
       children: [
-        /* @__PURE__ */ jsxs13("section", { className: cn("flex items-center gap-4"), children: [
-          /* @__PURE__ */ jsx24("label", { className: cn("text-body2-regular"), children: label1 ? label1 : "-" }),
-          /* @__PURE__ */ jsx24("div", { className: cn("flex items-center gap-2"), children })
+        /* @__PURE__ */ jsxs14("section", { className: cn("flex items-center gap-4"), children: [
+          /* @__PURE__ */ jsx25("label", { className: cn("text-body2-regular"), children: label1 ? label1 : "-" }),
+          /* @__PURE__ */ jsx25("div", { className: cn("flex items-center gap-2"), children })
         ] }),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(
           "label",
           {
             className: cn(
@@ -937,26 +1033,26 @@ function List({
             children: label2 ? label2 : "-"
           }
         ),
-        /* @__PURE__ */ jsx24("label", { className: cn("text-body3-regular text-right"), children: label3 ? label3 : "-" })
+        /* @__PURE__ */ jsx25("label", { className: cn("text-body3-regular text-right"), children: label3 ? label3 : "-" })
       ]
     }
   );
 }
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 var ModalBase = ({ isVisible, header, children, className, onClose }) => {
   if (!isVisible) return null;
-  return /* @__PURE__ */ jsxs14("div", { className: cn("fixed inset-0 z-50"), children: [
-    /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs15("div", { className: cn("fixed inset-0 z-50"), children: [
+    /* @__PURE__ */ jsx26(
       "div",
       {
         "aria-hidden": true,
         onClick: onClose,
-        className: cn("fixed inset-0 z-1000 bg-black/10", onClose && "cursor-pointer")
+        className: cn("fixed inset-0 z-1000 bg-[#212121]/30", onClose && "cursor-pointer")
       }
     ),
-    /* @__PURE__ */ jsx25("div", { className: "fixed inset-0 z-1001 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsx26("div", { className: "fixed inset-0 z-1001 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs15(
       "main",
       {
         role: "dialog",
@@ -969,7 +1065,7 @@ var ModalBase = ({ isVisible, header, children, className, onClose }) => {
           className
         ),
         children: [
-          onClose && /* @__PURE__ */ jsx25(
+          onClose && /* @__PURE__ */ jsx26(
             "button",
             {
               type: "button",
@@ -979,10 +1075,10 @@ var ModalBase = ({ isVisible, header, children, className, onClose }) => {
                 "absolute right-3 top-3 flex size-8 items-center justify-center",
                 "text-tertiary transition-colors hover:bg-gray00 active:bg-gray01 cursor-pointer"
               ),
-              children: /* @__PURE__ */ jsx25(IconClose, {})
+              children: /* @__PURE__ */ jsx26(IconClose, {})
             }
           ),
-          /* @__PURE__ */ jsx25("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
+          /* @__PURE__ */ jsx26("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
           children
         ]
       }
@@ -990,7 +1086,7 @@ var ModalBase = ({ isVisible, header, children, className, onClose }) => {
   ] });
 };
 var Contents = ({ children, className }) => {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: cn(
@@ -1007,7 +1103,7 @@ var CTAs2 = ({ children, className, row = false }) => {
   if (!children) return null;
   return (
     // CTA 버튼들을 중앙에 배치하는 예시 (우측 정렬이 필요하면 justify-end 사용)
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx26(
       "div",
       {
         className: cn(
@@ -1026,9 +1122,9 @@ var Modal = Object.assign(ModalBase, {
 });
 
 // src/components/Modal/ModalText.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var ModalText = ({ children, className }) => {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       className: cn(
@@ -1044,14 +1140,14 @@ var ModalText = ({ children, className }) => {
 };
 
 // src/components/createPost/CategorySegment.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var CategorySegment = ({
   selected = false,
   label,
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       className: cn(
@@ -1071,7 +1167,7 @@ var CategorySegment = ({
 };
 
 // src/components/createPost/CategorySegmentedControl.tsx
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var categorySegments = {
   info: ["\uACF5\uC6A9 \uBB3C\uD488", "\uC77C\uBC18 \uAE30\uC790\uC7AC", "\uD2B9\uC218 \uAE30\uC790\uC7AC"],
   archive: ["\uD504\uB9B0\uD2B8\uC2E4", "\uD64D\uC775\uC2DC\uB514"],
@@ -1085,8 +1181,8 @@ var CategorySegmentedControl = ({
   className
 }) => {
   const segments = categorySegments[variable];
-  return /* @__PURE__ */ jsxs15("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
-    /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs16("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
+    /* @__PURE__ */ jsx29(
       "div",
       {
         className: cn(
@@ -1099,7 +1195,7 @@ var CategorySegmentedControl = ({
         children: variable === "infoTag" ? "\uD0DC\uADF8 \uC120\uD0DD" : "\uCE74\uD14C\uACE0\uB9AC \uC120\uD0DD"
       }
     ),
-    segments.map((label) => /* @__PURE__ */ jsx28(
+    segments.map((label) => /* @__PURE__ */ jsx29(
       CategorySegment,
       {
         label,
@@ -1112,9 +1208,9 @@ var CategorySegmentedControl = ({
 };
 
 // src/components/createPost/TitleInput.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var TitleInput = ({ title, onChange, className }) => {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "input",
     {
       type: "text",
@@ -1134,9 +1230,9 @@ var TitleInput = ({ title, onChange, className }) => {
 };
 
 // src/components/notice/NoticeBadge.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var NoticeBadge = ({ variable, className, onClick }) => {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     "button",
     {
       type: "button",
@@ -1157,7 +1253,7 @@ var NoticeBadge = ({ variable, className, onClick }) => {
 };
 
 // src/components/notice/NoticeBar.tsx
-import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 var NoticeBar = ({
   variable = "default",
   badgeVariable,
@@ -1166,7 +1262,7 @@ var NoticeBar = ({
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       className: cn(
@@ -1178,20 +1274,20 @@ var NoticeBar = ({
       ),
       onClick,
       children: [
-        /* @__PURE__ */ jsxs16("section", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx31(NoticeBadge, { variable: badgeVariable }),
-          /* @__PURE__ */ jsx31("h1", { className: "text-head1-medium text-strong", children: title })
+        /* @__PURE__ */ jsxs17("section", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx32(NoticeBadge, { variable: badgeVariable }),
+          /* @__PURE__ */ jsx32("h1", { className: "text-head1-medium text-strong", children: title })
         ] }),
-        /* @__PURE__ */ jsx31("p", { className: "text-body3-book text-tertiary", children: date })
+        /* @__PURE__ */ jsx32("p", { className: "text-body3-book text-tertiary", children: date })
       ]
     }
   );
 };
 
 // src/components/SearchBar/SearchBar.tsx
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 var SearchBar = ({ value, onChange, className }) => {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "label",
     {
       className: cn(
@@ -1202,8 +1298,8 @@ var SearchBar = ({ value, onChange, className }) => {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx32(IconSearch, {}),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(IconSearch, {}),
+        /* @__PURE__ */ jsx33(
           "input",
           {
             type: "text",
@@ -1222,25 +1318,8 @@ var SearchBar = ({ value, onChange, className }) => {
 };
 
 // src/components/SideRadioAccordion/SideRadioAccordion.tsx
-import { forwardRef } from "react";
-
-// src/lib/useControllableState.ts
-import { useCallback, useState as useState5 } from "react";
-function useControllableState(controlled, defaultValue) {
-  const isControlled = controlled !== void 0;
-  const [uncontrolled, setUncontrolled] = useState5(defaultValue);
-  const value = isControlled ? controlled : uncontrolled;
-  const setValue = useCallback(
-    (next) => {
-      if (!isControlled) setUncontrolled(next);
-    },
-    [isControlled]
-  );
-  return [value, setValue, isControlled];
-}
-
-// src/components/SideRadioAccordion/SideRadioAccordion.tsx
-import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 var printColorBgClass = {
   Plotter: "bg-print-plotter",
   Printer: "bg-print-printer",
@@ -1251,7 +1330,7 @@ var printColorBgClass = {
   "Laser Cutting": "bg-print-laser-cutting"
 };
 var itemKey = (item) => item.value ?? item.title;
-var SideRadioAccordion = forwardRef(
+var SideRadioAccordion = forwardRef2(
   function SideRadioAccordion2({
     step,
     title,
@@ -1284,8 +1363,8 @@ var SideRadioAccordion = forwardRef(
       setIsOpen(next);
       onOpenChange?.(next);
     };
-    return /* @__PURE__ */ jsxs18("div", { ref, className: cn("w-full border-r border-gray02 bg-white", className), children: [
-      /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsxs19("div", { ref, className: cn("w-full border-r border-gray02 bg-white", className), children: [
+      /* @__PURE__ */ jsx34(
         Stepper,
         {
           step,
@@ -1296,8 +1375,8 @@ var SideRadioAccordion = forwardRef(
           className: cn(stickyHeader && "sticky top-0 z-10")
         }
       ),
-      expanded && /* @__PURE__ */ jsxs18("div", { className: "flex flex-col divide-y divide-gray02", children: [
-        radioToggleList.map((item) => /* @__PURE__ */ jsx33(
+      expanded && /* @__PURE__ */ jsxs19("div", { className: "flex flex-col divide-y divide-gray02", children: [
+        radioToggleList.map((item) => /* @__PURE__ */ jsx34(
           RadioToggleItem,
           {
             ...item,
@@ -1306,22 +1385,22 @@ var SideRadioAccordion = forwardRef(
           },
           itemKey(item)
         )),
-        quantityLimitLabel && /* @__PURE__ */ jsx33("div", { className: "px-5 py-4", children: /* @__PURE__ */ jsx33(TextButton2, { label: quantityLimitLabel, onClick: onClickQuantityLimit }) })
+        quantityLimitLabel && /* @__PURE__ */ jsx34("div", { className: "px-5 py-4", children: /* @__PURE__ */ jsx34(TextButton2, { label: quantityLimitLabel, onClick: onClickQuantityLimit }) })
       ] })
     ] });
   }
 );
 var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
-  const label = /* @__PURE__ */ jsxs18("span", { children: [
+  const label = /* @__PURE__ */ jsxs19("span", { children: [
     step,
     " | ",
     title
   ] });
   const base = "w-full flex items-center justify-between px-5 py-2.5 text-head3-medium text-primary text-left bg-white border-b border-gray02";
   if (!collapsible) {
-    return /* @__PURE__ */ jsx33("div", { className: cn(base, className), children: label });
+    return /* @__PURE__ */ jsx34("div", { className: cn(base, className), children: label });
   }
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "button",
     {
       type: "button",
@@ -1329,7 +1408,7 @@ var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
       className: cn(base, "cursor-pointer hover:bg-gray00 active:bg-gray01", className),
       children: [
         label,
-        /* @__PURE__ */ jsx33(IconChevronDownXS, { className: cn("transition-transform", isOpen && "rotate-180") })
+        /* @__PURE__ */ jsx34(IconChevronDownXS, { className: cn("transition-transform", isOpen && "rotate-180") })
       ]
     }
   );
@@ -1348,29 +1427,30 @@ var RadioToggleItem = ({
 }) => {
   const rowBg = !open ? "bg-white hover:bg-gray00" : color ? void 0 : printColor ? printColorBgClass[printColor] : "bg-gray00";
   const style = open && color ? { backgroundColor: color } : void 0;
-  return /* @__PURE__ */ jsxs18("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs19(
       "button",
       {
         type: "button",
         onClick: onSelect,
         style,
         className: cn(
-          "w-full flex items-center gap-1.5 p-3",
-          "text-body1-regular text-secondary text-left cursor-pointer",
+          "group w-full flex items-center gap-1.5 p-3",
+          "text-body1-regular text-left cursor-pointer",
+          open ? "text-strong" : "text-secondary",
           rowBg,
           className
         ),
         children: [
-          /* @__PURE__ */ jsx33(Radio, { selected: open }),
-          /* @__PURE__ */ jsx33("span", { children: title })
+          /* @__PURE__ */ jsx34(Radio, { selected: open }),
+          /* @__PURE__ */ jsx34("span", { children: title })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
-      /* @__PURE__ */ jsx33("p", { className: "text-caption-regular text-secondary", children: content }),
-      badges && badges.length > 0 && /* @__PURE__ */ jsx33("div", { className: "flex flex-wrap gap-1", children: badges.map((badge) => /* @__PURE__ */ jsx33(Badge, { label: badge }, badge)) }),
-      labelTextButton && /* @__PURE__ */ jsx33(
+    open && /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
+      /* @__PURE__ */ jsx34("p", { className: "text-caption-regular text-secondary", children: content }),
+      badges && badges.length > 0 && /* @__PURE__ */ jsx34("div", { className: "flex flex-wrap gap-1", children: badges.map((badge) => /* @__PURE__ */ jsx34(Badge, { label: badge }, badge)) }),
+      labelTextButton && /* @__PURE__ */ jsx34(
         TextButton2,
         {
           label: labelTextButton,
@@ -1384,10 +1464,24 @@ var RadioToggleItem = ({
 };
 var Radio = ({ selected = false, className }) => {
   const Icon = selected ? IconRadioSelected : IconRadioUnselected;
-  return /* @__PURE__ */ jsx33(Icon, { className: cn("w-6 h-6", className) });
+  return (
+    // 디자인 스펙(Figma "radio" 5:781): 아이콘 자체 색은 고정, hover/pressed 시
+    // 24px 원형 배경 칩만 나타난다(gray00/gray01). 부모 버튼의 group-hover/active로 동기화.
+    /* @__PURE__ */ jsx34(
+      "span",
+      {
+        className: cn(
+          "inline-flex size-6 shrink-0 items-center justify-center rounded-full transition-colors",
+          "group-hover:bg-gray00 group-active:bg-gray01",
+          className
+        ),
+        children: /* @__PURE__ */ jsx34(Icon, { className: "size-6" })
+      }
+    )
+  );
 };
 var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "button",
     {
       type: "button",
@@ -1400,14 +1494,14 @@ var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
         className
       ),
       children: [
-        showIcon && /* @__PURE__ */ jsx33(IconExclamation, {}),
+        showIcon && /* @__PURE__ */ jsx34(IconExclamation, {}),
         label
       ]
     }
   );
 };
 var Badge = ({ label, className }) => {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       className: cn(
@@ -1421,7 +1515,7 @@ var Badge = ({ label, className }) => {
 };
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var Tag = ({
   className,
   children,
@@ -1431,7 +1525,7 @@ var Tag = ({
   onClick,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "button",
     {
       className: cn(
@@ -1450,16 +1544,16 @@ var Tag = ({
       disabled,
       style: bgColor ? { backgroundColor: bgColor, border: "none" } : void 0,
       ...props,
-      children: /* @__PURE__ */ jsx34("span", { children })
+      children: /* @__PURE__ */ jsx35("span", { children })
     }
   );
 };
 
 // src/components/Timetable/Timetable.tsx
-import { forwardRef as forwardRef3 } from "react";
+import { forwardRef as forwardRef4 } from "react";
 
 // src/components/Timetable/WeekNavigation.tsx
-import { forwardRef as forwardRef2 } from "react";
+import { forwardRef as forwardRef3 } from "react";
 
 // src/components/Timetable/dateUtils.ts
 var KOREAN_WEEKDAYS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
@@ -1492,18 +1586,18 @@ var formatWeekRange = (weekStart) => {
 };
 
 // src/components/Timetable/WeekNavigation.tsx
-import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
 var weekLabel = {
   thisWeek: "\uC774\uBC88 \uC8FC",
   nextWeek: "\uB2E4\uC74C \uC8FC",
   twoWeeksLater: "\uB2E4\uB2E4\uC74C \uC8FC"
 };
-var WeekNavigation = forwardRef2(
+var WeekNavigation = forwardRef3(
   function WeekNavigation2({ date, week, label, canPrev, canNext, onPrevWeek, onNextWeek, className }, ref) {
     const showPrev = canPrev ?? (week ? week !== "thisWeek" : true);
     const showNext = canNext ?? (week ? week !== "twoWeeksLater" : true);
     const text = label ?? (week ? `${weekLabel[week]} (${formatWeekRange(date)})` : formatWeekRange(date));
-    return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsxs20(
       "div",
       {
         ref,
@@ -1515,26 +1609,26 @@ var WeekNavigation = forwardRef2(
           className
         ),
         children: [
-          /* @__PURE__ */ jsx35(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
-          /* @__PURE__ */ jsx35("span", { className: "flex flex-1 items-center justify-center text-center", children: text }),
-          /* @__PURE__ */ jsx35(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
+          /* @__PURE__ */ jsx36(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
+          /* @__PURE__ */ jsx36("span", { className: "flex flex-1 items-center justify-center text-center", children: text }),
+          /* @__PURE__ */ jsx36(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
         ]
       }
     );
   }
 );
 var ArrowButton = ({ direction, visible, onClick }) => {
-  const divider = /* @__PURE__ */ jsx35("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
+  const divider = /* @__PURE__ */ jsx36("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
   if (!visible) {
-    return /* @__PURE__ */ jsxs19("div", { className: "flex items-stretch", children: [
+    return /* @__PURE__ */ jsxs20("div", { className: "flex items-stretch", children: [
       direction === "right" && divider,
-      /* @__PURE__ */ jsx35("span", { className: "w-[42px]" }),
+      /* @__PURE__ */ jsx36("span", { className: "w-[42px]" }),
       direction === "left" && divider
     ] });
   }
-  return /* @__PURE__ */ jsxs19("div", { className: "flex items-stretch", children: [
+  return /* @__PURE__ */ jsxs20("div", { className: "flex items-stretch", children: [
     direction === "right" && divider,
-    /* @__PURE__ */ jsx35(
+    /* @__PURE__ */ jsx36(
       "button",
       {
         type: "button",
@@ -1544,7 +1638,7 @@ var ArrowButton = ({ direction, visible, onClick }) => {
           "text-gray06 cursor-pointer transition-colors",
           "hover:bg-gray00 active:bg-gray01"
         ),
-        children: /* @__PURE__ */ jsx35(
+        children: /* @__PURE__ */ jsx36(
           IconChevronDownXS,
           {
             className: direction === "left" ? "rotate-90" : "-rotate-90",
@@ -1558,7 +1652,7 @@ var ArrowButton = ({ direction, visible, onClick }) => {
 };
 
 // src/components/Timetable/Timetable.tsx
-import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
 var printColorHoverClass = {
   Plotter: "hover:bg-print-plotter",
   Printer: "hover:bg-print-printer",
@@ -1568,7 +1662,7 @@ var printColorHoverClass = {
   "Seet Cutting": "hover:bg-print-seet-cutting",
   "Laser Cutting": "hover:bg-print-laser-cutting"
 };
-var Timetable = forwardRef3(function Timetable2({
+var Timetable = forwardRef4(function Timetable2({
   weekStart,
   week,
   days,
@@ -1581,8 +1675,8 @@ var Timetable = forwardRef3(function Timetable2({
   canNextWeek,
   className
 }, ref) {
-  return /* @__PURE__ */ jsxs20("div", { ref, className: cn(fluid && "w-full", className), children: [
-    !hideWeekNavigation && /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs21("div", { ref, className: cn(fluid && "w-full", className), children: [
+    !hideWeekNavigation && /* @__PURE__ */ jsx37(
       WeekNavigation,
       {
         date: weekStart,
@@ -1593,7 +1687,7 @@ var Timetable = forwardRef3(function Timetable2({
         onNextWeek
       }
     ),
-    /* @__PURE__ */ jsx36("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ jsx36(
+    /* @__PURE__ */ jsx37("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ jsx37(
       DailyTimetable,
       {
         date: day.date,
@@ -1606,9 +1700,9 @@ var Timetable = forwardRef3(function Timetable2({
   ] });
 });
 var DailyTimetable = ({ date, slots, fluid, onSelectTime, className }) => {
-  return /* @__PURE__ */ jsxs20("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
-    /* @__PURE__ */ jsx36("div", { className: "h-12 flex items-center justify-center border-b border-gray02 text-body1-regular text-secondary", children: formatDayLabel(date) }),
-    slots.map((slot) => /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsxs21("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
+    /* @__PURE__ */ jsx37("div", { className: "h-12 flex items-center justify-center border-b border-gray02 text-body1-regular text-secondary", children: formatDayLabel(date) }),
+    slots.map((slot) => /* @__PURE__ */ jsx37(
       TimeItem,
       {
         state: slot.state,
@@ -1634,16 +1728,17 @@ var TimeItem = ({
 }) => {
   const clickable = (state === "default" || state === "selected") && !!onClick;
   const style = state === "default" && color ? { "--tt-hover": color } : void 0;
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "div",
     {
       onClick: clickable ? onClick : void 0,
       style,
       className: cn(
-        "h-18 flex items-center justify-center border-b border-gray02",
+        "h-18 flex items-center justify-center",
         fluid ? "w-full" : "w-18",
         "text-body1-medium text-center bg-white text-primary",
-        state === "none" && "bg-gray00 text-transparent",
+        // "none"(일정 없음)은 구분선을 그리지 않아 연속된 빈 칸이 하나의 덩어리로 보이게 한다.
+        state === "none" ? "bg-gray00 text-transparent" : "border-b border-gray02",
         state === "selected" && "bg-black text-white hover:cursor-pointer",
         state === "disabled" && "bg-gray00 text-gray03",
         state === "default" && [
@@ -1660,11 +1755,11 @@ var TimeItem = ({
 // src/components/TNB/TNB.tsx
 import {
   Fragment as Fragment2,
-  forwardRef as forwardRef4,
+  forwardRef as forwardRef5,
   useCallback as useCallback2,
   useState as useState6
 } from "react";
-import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 function useControllableState2(controlled, defaultValue) {
   const isControlled = controlled !== void 0;
   const [uncontrolled, setUncontrolled] = useState6(defaultValue);
@@ -1677,7 +1772,7 @@ function useControllableState2(controlled, defaultValue) {
   );
   return [value, setValue, isControlled];
 }
-var TNB = forwardRef4(function TNB2({
+var TNB = forwardRef5(function TNB2({
   logo,
   upperPartItemList,
   upperPartIconList,
@@ -1716,8 +1811,8 @@ var TNB = forwardRef4(function TNB2({
     setLowerValue(label);
     onSelectedLowerChange?.(label);
   };
-  return /* @__PURE__ */ jsxs21("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
-    /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs22("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
+    /* @__PURE__ */ jsx38(
       UpperPart,
       {
         logo,
@@ -1728,7 +1823,7 @@ var TNB = forwardRef4(function TNB2({
         linkComponent
       }
     ),
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38(
       LowerPart,
       {
         lowerPartItemList: currentLowerItemList,
@@ -1739,11 +1834,11 @@ var TNB = forwardRef4(function TNB2({
     )
   ] });
 });
-var NavClickable = forwardRef4(function NavClickable2({ href, onClick, linkComponent: Link, current, disabled, className, children }, ref) {
+var NavClickable = forwardRef5(function NavClickable2({ href, onClick, linkComponent: Link, current, disabled, className, children }, ref) {
   const ariaCurrent = current ? "page" : void 0;
   if (href && !disabled) {
     if (Link) {
-      return /* @__PURE__ */ jsx37(
+      return /* @__PURE__ */ jsx38(
         Link,
         {
           href,
@@ -1755,7 +1850,7 @@ var NavClickable = forwardRef4(function NavClickable2({ href, onClick, linkCompo
         }
       );
     }
-    return /* @__PURE__ */ jsx37(
+    return /* @__PURE__ */ jsx38(
       "a",
       {
         href,
@@ -1767,7 +1862,7 @@ var NavClickable = forwardRef4(function NavClickable2({ href, onClick, linkCompo
       }
     );
   }
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "button",
     {
       type: "button",
@@ -1789,7 +1884,7 @@ var UpperPart = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: cn(
@@ -1797,12 +1892,12 @@ var UpperPart = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs21("div", { className: "flex items-stretch", children: [
-          /* @__PURE__ */ jsx37("div", { className: "flex w-14 shrink-0 items-center justify-center px-3", children: /* @__PURE__ */ jsx37(NavIconButton, { ...logo, linkComponent }) }),
-          /* @__PURE__ */ jsxs21("div", { className: "flex items-stretch", children: [
-            /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-            upperPartItemList.map((item) => /* @__PURE__ */ jsxs21(Fragment2, { children: [
-              /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsxs22("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ jsx38("div", { className: "flex w-14 shrink-0 items-center justify-center px-3", children: /* @__PURE__ */ jsx38(NavIconButton, { ...logo, linkComponent }) }),
+          /* @__PURE__ */ jsxs22("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+            upperPartItemList.map((item) => /* @__PURE__ */ jsxs22(Fragment2, { children: [
+              /* @__PURE__ */ jsx38(
                 UpperPartTab,
                 {
                   label: item.label,
@@ -1815,20 +1910,16 @@ var UpperPart = ({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+              /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
             ] }, item.id ?? item.label))
           ] })
         ] }),
-        /* @__PURE__ */ jsxs21("div", { className: "flex items-stretch", children: [
-          /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-          upperPartIconList.map((icon, index) => /* @__PURE__ */ jsx37(
-            NavIconButton,
-            {
-              ...icon,
-              linkComponent
-            },
-            icon.id ?? icon.src ?? icon.label ?? index
-          ))
+        /* @__PURE__ */ jsxs22("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+          upperPartIconList.map((icon, index) => /* @__PURE__ */ jsxs22(Fragment2, { children: [
+            /* @__PURE__ */ jsx38(NavIconButton, { ...icon, linkComponent }),
+            /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+          ] }, icon.id ?? icon.src ?? icon.label ?? index))
         ] })
       ]
     }
@@ -1842,7 +1933,7 @@ var UpperPartTab = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     NavClickable,
     {
       href,
@@ -1850,22 +1941,24 @@ var UpperPartTab = ({
       linkComponent,
       current: selected,
       className: cn(
-        "inline-flex min-h-13 flex-col items-center gap-2 pt-2.5 cursor-pointer no-underline",
+        // 헤더 바닥 border-b와 언더라인이 겹치도록 높이를 52px로 고정하고
+        // justify-between으로 라벨/언더라인을 위-아래 끝에 붙인다.
+        "inline-flex h-13 flex-col items-center justify-between pt-2.5 cursor-pointer no-underline",
         "transition-colors hover:bg-gray00 active:bg-gray01",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx37("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
-        /* @__PURE__ */ jsx37("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
+        /* @__PURE__ */ jsx38("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
+        /* @__PURE__ */ jsx38("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
       ]
     }
   );
 };
-var NavIconButton = forwardRef4(
+var NavIconButton = forwardRef5(
   function NavIconButton2({ src, icon, alt, label, href, onClick, selected, badge, className, linkComponent }, forwardedRef) {
     const interactive = Boolean(onClick || href);
     const showBadge = badge !== void 0 && badge !== null && badge !== false;
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs22(
       NavClickable,
       {
         ref: forwardedRef,
@@ -1881,9 +1974,9 @@ var NavIconButton = forwardRef4(
           className
         ),
         children: [
-          icon ? /* @__PURE__ */ jsx37("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ jsx37("img", { src, alt: alt ?? label ?? "", className: "h-6 w-6" }) : null,
-          label ? /* @__PURE__ */ jsx37("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
-          showBadge ? /* @__PURE__ */ jsx37(
+          icon ? /* @__PURE__ */ jsx38("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ jsx38("img", { src, alt: alt ?? label ?? "", className: "h-6 w-6" }) : null,
+          label ? /* @__PURE__ */ jsx38("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
+          showBadge ? /* @__PURE__ */ jsx38(
             "span",
             {
               "aria-hidden": badge === true,
@@ -1909,14 +2002,14 @@ var LowerPart = ({
   if (lowerPartItemList.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: cn("w-full h-[42px] pl-14 flex items-stretch border-b border-gray02", className),
       children: [
-        /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-        lowerPartItemList.map((item) => /* @__PURE__ */ jsxs21(Fragment2, { children: [
-          /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+        lowerPartItemList.map((item) => /* @__PURE__ */ jsxs22(Fragment2, { children: [
+          /* @__PURE__ */ jsx38(
             LowerPartItemButton,
             {
               label: item.label,
@@ -1929,7 +2022,7 @@ var LowerPart = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+          /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
         ] }, item.id ?? item.label))
       ]
     }
@@ -1943,7 +2036,7 @@ var LowerPartItemButton = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     NavClickable,
     {
       href,
@@ -1962,10 +2055,10 @@ var LowerPartItemButton = ({
 };
 
 // src/components/Toast/Toast.tsx
-import { forwardRef as forwardRef5, useEffect as useEffect3, useState as useState7 } from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { forwardRef as forwardRef6, useEffect as useEffect3, useState as useState7 } from "react";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var EXIT_MS = 300;
-var Toast = forwardRef5(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
+var Toast = forwardRef6(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
   const controlled = open !== void 0;
   const [mounted, setMounted] = useState7(!controlled || open);
   const [visible, setVisible] = useState7(!controlled || open);
@@ -1986,7 +2079,7 @@ var Toast = forwardRef5(function Toast2({ message, open, duration = 3e3, onClose
     return () => clearTimeout(timer);
   }, [controlled, open, duration, onClose]);
   if (!mounted) return null;
-  const banner = /* @__PURE__ */ jsx38(
+  const banner = /* @__PURE__ */ jsx39(
     "div",
     {
       ref,
@@ -2004,7 +2097,7 @@ var Toast = forwardRef5(function Toast2({ message, open, duration = 3e3, onClose
     }
   );
   if (position === "none") return banner;
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       className: cn(
@@ -2016,6 +2109,7 @@ var Toast = forwardRef5(function Toast2({ message, open, duration = 3e3, onClose
   );
 });
 export {
+  Accordion,
   BackButton,
   BasicFormField,
   CTA,