@hivcd-printshop/design-system 1.2.2 → 1.3.0

package/dist/index.js

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Accordion: () => Accordion,
   BackButton: () => BackButton,
   BasicFormField: () => BasicFormField,
   CTA: () => CTA,
@@ -73,6 +74,9 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/components/Accordion/Accordion.tsx
+var import_react2 = require("react");
+
 // src/lib/cn.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
@@ -100,6 +104,21 @@ function cn(...inputs) {
   return twMerge((0, import_clsx.clsx)(inputs));
 }
 
+// src/lib/useControllableState.ts
+var import_react = require("react");
+function useControllableState(controlled, defaultValue) {
+  const isControlled = controlled !== void 0;
+  const [uncontrolled, setUncontrolled] = (0, import_react.useState)(defaultValue);
+  const value = isControlled ? controlled : uncontrolled;
+  const setValue = (0, import_react.useCallback)(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue, isControlled];
+}
+
 // src/assets/svgs/Icons.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var IconChevronDownXS = ({
@@ -332,10 +351,88 @@ var IconClose = ({ className, stroke }) => {
   );
 };
 
-// src/components/BackButton/BackButton.tsx
+// src/components/Accordion/Accordion.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var Accordion = (0, import_react2.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__ */ (0, import_jsx_runtime2.jsxs)("div", { ref, className: cn("w-full bg-white", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      AccordionHeader,
+      {
+        step,
+        title,
+        headerRight,
+        isOpen: expanded,
+        collapsible,
+        onClick: toggleOpen,
+        className: cn(stickyHeader && "sticky top-0 z-10", headerClassName)
+      }
+    ),
+    expanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: contentClassName, children })
+  ] });
+});
+var AccordionHeader = ({
+  step,
+  title,
+  headerRight,
+  isOpen,
+  collapsible,
+  onClick,
+  className
+}) => {
+  const label = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("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__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn(base, className), children: [
+      label,
+      headerRight
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(base, "cursor-pointer hover:bg-gray00 active:bg-gray01", className),
+      children: [
+        label,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "flex shrink-0 items-center gap-3", children: [
+          headerRight,
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconChevronDownXS, { className: cn("transition-transform", isOpen && "rotate-180") })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/BackButton/BackButton.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var BackButton = ({ onClick, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "button",
     {
       type: "button",
@@ -348,13 +445,13 @@ var BackButton = ({ onClick, className }) => {
         "cursor-pointer",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconGoBack, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconGoBack, {})
     }
   );
 };
 
 // src/components/CTA/CTA.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var CTA = ({
   primary = false,
   alert = false,
@@ -365,7 +462,7 @@ var CTA = ({
   forModal = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
       type: "button",
@@ -393,22 +490,22 @@ var CTA = ({
 };
 
 // src/components/Column/MultiColumn.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var MultiColumnMain = ({ children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("flex flex-col w-full h-full", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("flex flex-col w-full h-full", className), children });
 };
 var Columns = ({ children, className }) => {
   return (
     // flex 래퍼를 사용하고 하위 Column들이 flex-1을 가지게 하거나,
     // grid를 사용하여 열을 나눌 수 있어. 여기서는 flex를 활용한 균등 분할 예시야.
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("flex w-full h-full divide-x divide-gray02", className), children })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("flex flex-col w-full h-fit", className), children })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("flex flex-col w-full h-fit", className), children })
   );
 };
 var MultiColumn = Object.assign(MultiColumnMain, {
@@ -417,78 +514,78 @@ var MultiColumn = Object.assign(MultiColumnMain, {
 });
 
 // src/components/Column/Column.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var Column = ({ className, children, header }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex flex-col gap-5", "h-full w-full px-5 py-3", className), children: [
-    header && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { className: cn("text-body1-medium text-primary"), children: header }),
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("flex flex-col gap-5", "h-full w-full px-5 py-3", className), children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { className: cn("text-body1-medium text-primary"), children: header }),
     children
   ] });
 };
 
 // src/components/Column/ColumnContentContainer.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var ColumnContentContainer = ({ className, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("flex flex-col gap-1.5 w-full h-fit", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn("flex flex-col gap-1.5 w-full h-fit", className), children });
 };
 
 // src/components/Column/ColumnLabel.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ColumnLabel = ({ className, children, subLabel, htmlFor }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { htmlFor, className: cn("flex gap-1.5 items-end", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn("text-body2-regular text-tertiary"), children }),
-    subLabel && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn("text-caption-book text-quaternary"), children: subLabel })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { htmlFor, className: cn("flex gap-1.5 items-end", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn("text-body2-regular text-tertiary"), children }),
+    subLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn("text-caption-book text-quaternary"), children: subLabel })
   ] });
 };
 
 // src/components/Column/ColumnText.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("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__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn(ColumnTextStyle, alert && "text-danger", className), onClick, children: children ? children : "-" });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn(ColumnTextStyle, alert && "text-danger", className), onClick, children: children ? children : "-" });
 };
 
 // src/components/Column/ColumnSubTitle.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var ColumnSubTitle = ({
   className,
   children,
   action,
   as: Tag2 = "h2"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tag2, { className: cn("flex items-center justify-between gap-1.5", "w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("text-body1-medium text-primary"), children }),
-    action && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex shrink-0 items-center", children: action })
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Tag2, { className: cn("flex items-center justify-between gap-1.5", "w-full", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("text-body1-medium text-primary"), children }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex shrink-0 items-center", children: action })
   ] });
 };
 
 // src/components/Column/ColumnDescription.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var ColumnDescription = ({
   className,
   children,
   bullet = true
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex items-start gap-3", className), children: [
-    bullet && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex shrink-0 items-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(IconCompass, { className: "size-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "min-w-0 flex-1 whitespace-pre-line text-body3-book text-primary", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex items-start gap-3", className), children: [
+    bullet && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex shrink-0 items-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconCompass, { className: "size-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "min-w-0 flex-1 whitespace-pre-line text-body3-book text-primary", children })
   ] });
 };
 var ColumnDescriptionList = ({ className, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("flex flex-col gap-4", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("flex flex-col gap-4", className), children });
 };
 
 // src/components/Form/BasicFormField.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var BasicFormField = ({
   children,
   isDanger,
   dangerText,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex flex-col gap-1.5", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex flex-col gap-1.5", className), children: [
     children,
-    isDanger && dangerText && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-caption-book text-danger", children: dangerText })
+    isDanger && dangerText && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-caption-book text-danger", children: dangerText })
   ] });
 };
 var getInputStyles = (isDanger, additionalClass) => {
@@ -507,15 +604,15 @@ var getInputStyles = (isDanger, additionalClass) => {
 };
 
 // src/components/Form/FormText.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var FormText = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { type: "text", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "text", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormTextArea.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var FormTextArea = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "textarea",
     {
       className: getInputStyles(isDanger, "resize-none h-30 px-4 py-2.5 " + (className || "")),
@@ -525,19 +622,19 @@ var FormTextArea = ({ className, isDanger, dangerText, ...props }) => {
 };
 
 // src/components/Form/FormNumber.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var FormNumber = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", { type: "number", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", { type: "number", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormPassword.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var FormPassword = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", { type: "password", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { type: "password", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormTel.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
   const handlePhoneChange = (e) => {
     const rawValue = e.target.value.replace(/[^0-9]/g, "");
@@ -549,7 +646,7 @@ var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
     e.target.value = formattedValue;
     if (onChange) onChange(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "input",
     {
       type: "tel",
@@ -562,8 +659,8 @@ var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
 };
 
 // src/components/Form/FormColor.tsx
-var import_react = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react3 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var FormColor = ({
   className,
   isDanger,
@@ -573,7 +670,7 @@ var FormColor = ({
   onChange,
   ...props
 }) => {
-  const [internalColor, setInternalColor] = (0, import_react.useState)(
+  const [internalColor, setInternalColor] = (0, import_react3.useState)(
     value || defaultValue || "#000000"
   );
   const color = value !== void 0 ? value : internalColor;
@@ -581,7 +678,7 @@ var FormColor = ({
     setInternalColor(e.target.value);
     onChange?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "label",
     {
       className: getInputStyles(
@@ -590,7 +687,7 @@ var FormColor = ({
         "flex items-center gap-2 relative focus-within:border-black focus-within:hover:bg-white" + (className || "")
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-6 h-6 shrink-0 overflow-hidden", style: { backgroundColor: color }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-6 h-6 shrink-0 overflow-hidden", style: { backgroundColor: color }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "input",
           {
             type: "color",
@@ -600,15 +697,15 @@ var FormColor = ({
             ...props
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-primary text-body3-regular uppercase flex-1 select-none", children: color })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-primary text-body3-regular uppercase flex-1 select-none", children: color })
       ]
     }
   ) });
 };
 
 // src/components/Form/FormFile.tsx
-var import_react2 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var FormFile = ({
   className,
   isDanger,
@@ -618,7 +715,7 @@ var FormFile = ({
   onChange,
   ...props
 }) => {
-  const [selectedFile, setSelectedFile] = (0, import_react2.useState)(null);
+  const [selectedFile, setSelectedFile] = (0, import_react4.useState)(null);
   const handleFileChange = (e) => {
     const originalFile = e.target.files?.[0];
     if (!originalFile) {
@@ -669,7 +766,7 @@ var FormFile = ({
     }
   };
   const displayFileName = selectedFile?.name || (fileUrl ? fileUrl.split("/").pop() : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       className: getInputStyles(
@@ -682,7 +779,7 @@ var FormFile = ({
         )
       ),
       children: [
-        displayFileName && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        displayFileName && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "span",
           {
             onClick: handleDownload,
@@ -691,9 +788,9 @@ var FormFile = ({
             children: displayFileName
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "shrink-0 px-1 -mx-1 cursor-pointer", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "text-primary text-caption-regular underline", children: displayFileName ? "\uB2E4\uC2DC \uCCA8\uBD80" : "\uD30C\uC77C \uCCA8\uBD80" }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { type: "file", className: "hidden", onChange: handleFileChange, ...props })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "shrink-0 px-1 -mx-1 cursor-pointer", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-primary text-caption-regular underline", children: displayFileName ? "\uB2E4\uC2DC \uCCA8\uBD80" : "\uD30C\uC77C \uCCA8\uBD80" }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "file", className: "hidden", onChange: handleFileChange, ...props })
         ] })
       ]
     }
@@ -701,7 +798,7 @@ var FormFile = ({
 };
 
 // src/components/Form/FormCheckBox.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var FormCheckBox = ({
   isChecked,
   setIsChecked,
@@ -710,7 +807,7 @@ var FormCheckBox = ({
   textStyle,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "label",
     {
       className: cn(
@@ -721,7 +818,7 @@ var FormCheckBox = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "input",
           {
             type: "checkbox",
@@ -731,14 +828,14 @@ var FormCheckBox = ({
             ...props
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "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__ */ (0, import_jsx_runtime19.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "div",
               {
                 className: cn(
@@ -748,29 +845,29 @@ var FormCheckBox = ({
                   // 💡 3. 키보드 Tab 이동 시 접근성 향상 (포커스 링 표시)
                   "peer-focus-visible:ring-2 peer-focus-visible:ring-black peer-focus-visible:ring-offset-1"
                 ),
-                children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconCheck, {})
+                children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(IconCheck, {})
               }
             )
           }
         ),
-        children && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: cn("text-body3-book text-primary", textStyle), children })
+        children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: cn("text-body3-book text-primary", textStyle), children })
       ]
     }
   );
 };
 
 // src/components/Form/FormSelectBox.tsx
-var import_react3 = require("react");
+var import_react5 = require("react");
 
 // src/components/Form/SelectBoxOption.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var SelectBoxOption = ({
   label,
   onClick,
   // selectedLabel,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "li",
     {
       onClick,
@@ -792,7 +889,7 @@ var SelectBoxOption = ({
 };
 
 // src/components/Form/FormSelectBox.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var FormSelectBox = ({
   options,
   value,
@@ -802,9 +899,9 @@ var FormSelectBox = ({
   dangerText,
   className
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
-  const containerRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
+  const containerRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -815,8 +912,8 @@ var FormSelectBox = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref: containerRef, className: "relative w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref: containerRef, className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "div",
       {
         tabIndex: 0,
@@ -836,8 +933,8 @@ var FormSelectBox = ({
           setIsOpen((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: value ? "text-primary" : "text-quaternary", children: value || placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: value ? "text-primary" : "text-quaternary", children: value || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             IconChevronDownXS,
             {
               className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
@@ -847,7 +944,7 @@ var FormSelectBox = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "ul",
       {
         className: cn(
@@ -857,7 +954,7 @@ var FormSelectBox = ({
           "max-h-50 overflow-y-auto"
           // 항목이 너무 많으면 스크롤 생성 (디자인 스펙: 그림자 없음)
         ),
-        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           SelectBoxOption,
           {
             label: option,
@@ -874,7 +971,7 @@ var FormSelectBox = ({
 };
 
 // src/components/TextButton/TextButton.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var TextButton = ({
   children,
   icon,
@@ -884,10 +981,10 @@ var TextButton = ({
   className,
   ...props
 }) => {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    icon && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "flex shrink-0 items-center", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: cn(underline && "underline underline-offset-2"), children }),
-    icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "flex shrink-0 items-center", children: icon })
+  const content = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    icon && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex shrink-0 items-center", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: cn(underline && "underline underline-offset-2"), children }),
+    icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex shrink-0 items-center", children: icon })
   ] });
   const classes = cn(
     "inline-flex w-fit items-center gap-1 px-1 -mx-1",
@@ -902,19 +999,19 @@ var TextButton = ({
   );
   if (props.href !== void 0) {
     const { href, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href, className: classes, ...rest, children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href, className: classes, ...rest, children: content });
   }
   const buttonProps = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", className: classes, ...buttonProps, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: classes, ...buttonProps, children: content });
 };
 
 // src/components/Dropdown/Dropdown.tsx
-var import_react4 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
-  const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
-  const containerRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+  const containerRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -925,8 +1022,8 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ref: containerRef, className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "div",
       {
         className: cn(
@@ -939,8 +1036,8 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
         ),
         onClick: () => setIsOpen((prev) => !prev),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { children: selectedLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: selectedLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             IconChevronDownXS,
             {
               className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
@@ -950,7 +1047,7 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("absolute top-full right-0 z-10", "box-border border border-gray02"), children: labels.map((label) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("absolute top-full right-0 z-10", "box-border border border-gray02"), children: labels.map((label) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       SelectBoxOption,
       {
         label,
@@ -966,7 +1063,7 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
 };
 
 // src/components/ListView/List.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function List({
   className,
   label1,
@@ -979,7 +1076,7 @@ function List({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "li",
     {
       className: cn(
@@ -994,11 +1091,11 @@ function List({
       ...props,
       onClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("section", { className: cn("flex items-center gap-4"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { className: cn("text-body2-regular"), children: label1 ? label1 : "-" }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("flex items-center gap-2"), children })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("section", { className: cn("flex items-center gap-4"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("label", { className: cn("text-body2-regular"), children: label1 ? label1 : "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("flex items-center gap-2"), children })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "label",
           {
             className: cn(
@@ -1010,26 +1107,26 @@ function List({
             children: label2 ? label2 : "-"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("label", { className: cn("text-body3-regular text-right"), children: label3 ? label3 : "-" })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("label", { className: cn("text-body3-regular text-right"), children: label3 ? label3 : "-" })
       ]
     }
   );
 }
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var ModalBase = ({ isVisible, header, children, className, onClose }) => {
   if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("fixed inset-0 z-50"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("fixed inset-0 z-50"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "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__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fixed inset-0 z-1001 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fixed inset-0 z-1001 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "main",
       {
         role: "dialog",
@@ -1042,7 +1139,7 @@ var ModalBase = ({ isVisible, header, children, className, onClose }) => {
           className
         ),
         children: [
-          onClose && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             "button",
             {
               type: "button",
@@ -1052,10 +1149,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__ */ (0, import_jsx_runtime25.jsx)(IconClose, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconClose, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
           children
         ]
       }
@@ -1063,7 +1160,7 @@ var ModalBase = ({ isVisible, header, children, className, onClose }) => {
   ] });
 };
 var Contents = ({ children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       className: cn(
@@ -1080,7 +1177,7 @@ var CTAs2 = ({ children, className, row = false }) => {
   if (!children) return null;
   return (
     // CTA 버튼들을 중앙에 배치하는 예시 (우측 정렬이 필요하면 justify-end 사용)
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "div",
       {
         className: cn(
@@ -1099,9 +1196,9 @@ var Modal = Object.assign(ModalBase, {
 });
 
 // src/components/Modal/ModalText.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var ModalText = ({ children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       className: cn(
@@ -1117,14 +1214,14 @@ var ModalText = ({ children, className }) => {
 };
 
 // src/components/createPost/CategorySegment.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var CategorySegment = ({
   selected = false,
   label,
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       className: cn(
@@ -1144,7 +1241,7 @@ var CategorySegment = ({
 };
 
 // src/components/createPost/CategorySegmentedControl.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("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"],
@@ -1158,8 +1255,8 @@ var CategorySegmentedControl = ({
   className
 }) => {
   const segments = categorySegments[variable];
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "div",
       {
         className: cn(
@@ -1172,7 +1269,7 @@ var CategorySegmentedControl = ({
         children: variable === "infoTag" ? "\uD0DC\uADF8 \uC120\uD0DD" : "\uCE74\uD14C\uACE0\uB9AC \uC120\uD0DD"
       }
     ),
-    segments.map((label) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    segments.map((label) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       CategorySegment,
       {
         label,
@@ -1185,9 +1282,9 @@ var CategorySegmentedControl = ({
 };
 
 // src/components/createPost/TitleInput.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var TitleInput = ({ title, onChange, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "input",
     {
       type: "text",
@@ -1207,9 +1304,9 @@ var TitleInput = ({ title, onChange, className }) => {
 };
 
 // src/components/notice/NoticeBadge.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var NoticeBadge = ({ variable, className, onClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "button",
     {
       type: "button",
@@ -1230,7 +1327,7 @@ var NoticeBadge = ({ variable, className, onClick }) => {
 };
 
 // src/components/notice/NoticeBar.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var NoticeBar = ({
   variable = "default",
   badgeVariable,
@@ -1239,7 +1336,7 @@ var NoticeBar = ({
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       className: cn(
@@ -1251,20 +1348,20 @@ var NoticeBar = ({
       ),
       onClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("section", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(NoticeBadge, { variable: badgeVariable }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h1", { className: "text-head1-medium text-strong", children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("section", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(NoticeBadge, { variable: badgeVariable }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h1", { className: "text-head1-medium text-strong", children: title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-body3-book text-tertiary", children: date })
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-body3-book text-tertiary", children: date })
       ]
     }
   );
 };
 
 // src/components/SearchBar/SearchBar.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var SearchBar = ({ value, onChange, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "label",
     {
       className: cn(
@@ -1275,8 +1372,8 @@ var SearchBar = ({ value, onChange, className }) => {
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconSearch, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconSearch, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "input",
           {
             type: "text",
@@ -1295,25 +1392,8 @@ var SearchBar = ({ value, onChange, className }) => {
 };
 
 // src/components/SideRadioAccordion/SideRadioAccordion.tsx
-var import_react6 = require("react");
-
-// src/lib/useControllableState.ts
-var import_react5 = require("react");
-function useControllableState(controlled, defaultValue) {
-  const isControlled = controlled !== void 0;
-  const [uncontrolled, setUncontrolled] = (0, import_react5.useState)(defaultValue);
-  const value = isControlled ? controlled : uncontrolled;
-  const setValue = (0, import_react5.useCallback)(
-    (next) => {
-      if (!isControlled) setUncontrolled(next);
-    },
-    [isControlled]
-  );
-  return [value, setValue, isControlled];
-}
-
-// src/components/SideRadioAccordion/SideRadioAccordion.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var printColorBgClass = {
   Plotter: "bg-print-plotter",
   Printer: "bg-print-printer",
@@ -1324,7 +1404,7 @@ var printColorBgClass = {
   "Laser Cutting": "bg-print-laser-cutting"
 };
 var itemKey = (item) => item.value ?? item.title;
-var SideRadioAccordion = (0, import_react6.forwardRef)(
+var SideRadioAccordion = (0, import_react7.forwardRef)(
   function SideRadioAccordion2({
     step,
     title,
@@ -1357,8 +1437,8 @@ var SideRadioAccordion = (0, import_react6.forwardRef)(
       setIsOpen(next);
       onOpenChange?.(next);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ref, className: cn("w-full border-r border-gray02 bg-white", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ref, className: cn("w-full border-r border-gray02 bg-white", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         Stepper,
         {
           step,
@@ -1369,8 +1449,8 @@ var SideRadioAccordion = (0, import_react6.forwardRef)(
           className: cn(stickyHeader && "sticky top-0 z-10")
         }
       ),
-      expanded && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col divide-y divide-gray02", children: [
-        radioToggleList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      expanded && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col divide-y divide-gray02", children: [
+        radioToggleList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           RadioToggleItem,
           {
             ...item,
@@ -1379,22 +1459,22 @@ var SideRadioAccordion = (0, import_react6.forwardRef)(
           },
           itemKey(item)
         )),
-        quantityLimitLabel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TextButton2, { label: quantityLimitLabel, onClick: onClickQuantityLimit }) })
+        quantityLimitLabel && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TextButton2, { label: quantityLimitLabel, onClick: onClickQuantityLimit }) })
       ] })
     ] });
   }
 );
 var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
-  const label = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
+  const label = /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("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__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn(base, className), children: label });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn(base, className), children: label });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "button",
     {
       type: "button",
@@ -1402,7 +1482,7 @@ var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
       className: cn(base, "cursor-pointer hover:bg-gray00 active:bg-gray01", className),
       children: [
         label,
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconChevronDownXS, { className: cn("transition-transform", isOpen && "rotate-180") })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconChevronDownXS, { className: cn("transition-transform", isOpen && "rotate-180") })
       ]
     }
   );
@@ -1421,29 +1501,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__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "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__ */ (0, import_jsx_runtime33.jsx)(Radio, { selected: open }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Radio, { selected: open }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: title })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-caption-regular text-secondary", children: content }),
-      badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-wrap gap-1", children: badges.map((badge) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Badge, { label: badge }, badge)) }),
-      labelTextButton && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-caption-regular text-secondary", children: content }),
+      badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-wrap gap-1", children: badges.map((badge) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Badge, { label: badge }, badge)) }),
+      labelTextButton && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         TextButton2,
         {
           label: labelTextButton,
@@ -1457,10 +1538,24 @@ var RadioToggleItem = ({
 };
 var Radio = ({ selected = false, className }) => {
   const Icon = selected ? IconRadioSelected : IconRadioUnselected;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { className: cn("w-6 h-6", className) });
+  return (
+    // 디자인 스펙(Figma "radio" 5:781): 아이콘 자체 색은 고정, hover/pressed 시
+    // 24px 원형 배경 칩만 나타난다(gray00/gray01). 부모 버튼의 group-hover/active로 동기화.
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "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__ */ (0, import_jsx_runtime34.jsx)(Icon, { className: "size-6" })
+      }
+    )
+  );
 };
 var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "button",
     {
       type: "button",
@@ -1473,14 +1568,14 @@ var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
         className
       ),
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconExclamation, {}),
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconExclamation, {}),
         label
       ]
     }
   );
 };
 var Badge = ({ label, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "div",
     {
       className: cn(
@@ -1494,7 +1589,7 @@ var Badge = ({ label, className }) => {
 };
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var Tag = ({
   className,
   children,
@@ -1504,7 +1599,7 @@ var Tag = ({
   onClick,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "button",
     {
       className: cn(
@@ -1523,16 +1618,16 @@ var Tag = ({
       disabled,
       style: bgColor ? { backgroundColor: bgColor, border: "none" } : void 0,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children })
     }
   );
 };
 
 // src/components/Timetable/Timetable.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/Timetable/WeekNavigation.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/Timetable/dateUtils.ts
 var KOREAN_WEEKDAYS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
@@ -1565,18 +1660,18 @@ var formatWeekRange = (weekStart) => {
 };
 
 // src/components/Timetable/WeekNavigation.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var weekLabel = {
   thisWeek: "\uC774\uBC88 \uC8FC",
   nextWeek: "\uB2E4\uC74C \uC8FC",
   twoWeeksLater: "\uB2E4\uB2E4\uC74C \uC8FC"
 };
-var WeekNavigation = (0, import_react7.forwardRef)(
+var WeekNavigation = (0, import_react8.forwardRef)(
   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__ */ (0, import_jsx_runtime35.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       "div",
       {
         ref,
@@ -1588,26 +1683,26 @@ var WeekNavigation = (0, import_react7.forwardRef)(
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "flex flex-1 items-center justify-center text-center", children: text }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex flex-1 items-center justify-center text-center", children: text }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
         ]
       }
     );
   }
 );
 var ArrowButton = ({ direction, visible, onClick }) => {
-  const divider = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
+  const divider = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
   if (!visible) {
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-stretch", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-stretch", children: [
       direction === "right" && divider,
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "w-[42px]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "w-[42px]" }),
       direction === "left" && divider
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-stretch", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-stretch", children: [
     direction === "right" && divider,
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "button",
       {
         type: "button",
@@ -1617,7 +1712,7 @@ var ArrowButton = ({ direction, visible, onClick }) => {
           "text-gray06 cursor-pointer transition-colors",
           "hover:bg-gray00 active:bg-gray01"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           IconChevronDownXS,
           {
             className: direction === "left" ? "rotate-90" : "-rotate-90",
@@ -1631,7 +1726,7 @@ var ArrowButton = ({ direction, visible, onClick }) => {
 };
 
 // src/components/Timetable/Timetable.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var printColorHoverClass = {
   Plotter: "hover:bg-print-plotter",
   Printer: "hover:bg-print-printer",
@@ -1641,7 +1736,7 @@ var printColorHoverClass = {
   "Seet Cutting": "hover:bg-print-seet-cutting",
   "Laser Cutting": "hover:bg-print-laser-cutting"
 };
-var Timetable = (0, import_react8.forwardRef)(function Timetable2({
+var Timetable = (0, import_react9.forwardRef)(function Timetable2({
   weekStart,
   week,
   days,
@@ -1654,8 +1749,8 @@ var Timetable = (0, import_react8.forwardRef)(function Timetable2({
   canNextWeek,
   className
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { ref, className: cn(fluid && "w-full", className), children: [
-    !hideWeekNavigation && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ref, className: cn(fluid && "w-full", className), children: [
+    !hideWeekNavigation && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       WeekNavigation,
       {
         date: weekStart,
@@ -1666,7 +1761,7 @@ var Timetable = (0, import_react8.forwardRef)(function Timetable2({
         onNextWeek
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       DailyTimetable,
       {
         date: day.date,
@@ -1679,9 +1774,9 @@ var Timetable = (0, import_react8.forwardRef)(function Timetable2({
   ] });
 });
 var DailyTimetable = ({ date, slots, fluid, onSelectTime, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("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__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("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__ */ (0, import_jsx_runtime37.jsx)(
       TimeItem,
       {
         state: slot.state,
@@ -1707,16 +1802,17 @@ var TimeItem = ({
 }) => {
   const clickable = (state === "default" || state === "selected") && !!onClick;
   const style = state === "default" && color ? { "--tt-hover": color } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "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" && [
@@ -1731,13 +1827,13 @@ var TimeItem = ({
 };
 
 // src/components/TNB/TNB.tsx
-var import_react9 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function useControllableState2(controlled, defaultValue) {
   const isControlled = controlled !== void 0;
-  const [uncontrolled, setUncontrolled] = (0, import_react9.useState)(defaultValue);
+  const [uncontrolled, setUncontrolled] = (0, import_react10.useState)(defaultValue);
   const value = isControlled ? controlled : uncontrolled;
-  const setValue = (0, import_react9.useCallback)(
+  const setValue = (0, import_react10.useCallback)(
     (next) => {
       if (!isControlled) setUncontrolled(next);
     },
@@ -1745,7 +1841,7 @@ function useControllableState2(controlled, defaultValue) {
   );
   return [value, setValue, isControlled];
 }
-var TNB = (0, import_react9.forwardRef)(function TNB2({
+var TNB = (0, import_react10.forwardRef)(function TNB2({
   logo,
   upperPartItemList,
   upperPartIconList,
@@ -1784,8 +1880,8 @@ var TNB = (0, import_react9.forwardRef)(function TNB2({
     setLowerValue(label);
     onSelectedLowerChange?.(label);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       UpperPart,
       {
         logo,
@@ -1796,7 +1892,7 @@ var TNB = (0, import_react9.forwardRef)(function TNB2({
         linkComponent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       LowerPart,
       {
         lowerPartItemList: currentLowerItemList,
@@ -1807,11 +1903,11 @@ var TNB = (0, import_react9.forwardRef)(function TNB2({
     )
   ] });
 });
-var NavClickable = (0, import_react9.forwardRef)(function NavClickable2({ href, onClick, linkComponent: Link, current, disabled, className, children }, ref) {
+var NavClickable = (0, import_react10.forwardRef)(function NavClickable2({ href, onClick, linkComponent: Link, current, disabled, className, children }, ref) {
   const ariaCurrent = current ? "page" : void 0;
   if (href && !disabled) {
     if (Link) {
-      return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         Link,
         {
           href,
@@ -1823,7 +1919,7 @@ var NavClickable = (0, import_react9.forwardRef)(function NavClickable2({ href,
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "a",
       {
         href,
@@ -1835,7 +1931,7 @@ var NavClickable = (0, import_react9.forwardRef)(function NavClickable2({ href,
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "button",
     {
       type: "button",
@@ -1857,7 +1953,7 @@ var UpperPart = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "div",
     {
       className: cn(
@@ -1865,12 +1961,12 @@ var UpperPart = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-stretch", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex w-14 shrink-0 items-center justify-center px-3", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NavIconButton, { ...logo, linkComponent }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-stretch", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-            upperPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react9.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex w-14 shrink-0 items-center justify-center px-3", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NavIconButton, { ...logo, linkComponent }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+            upperPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react10.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 UpperPartTab,
                 {
                   label: item.label,
@@ -1883,20 +1979,16 @@ var UpperPart = ({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
             ] }, item.id ?? item.label))
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-stretch", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-          upperPartIconList.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-            NavIconButton,
-            {
-              ...icon,
-              linkComponent
-            },
-            icon.id ?? icon.src ?? icon.label ?? index
-          ))
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+          upperPartIconList.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react10.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NavIconButton, { ...icon, linkComponent }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+          ] }, icon.id ?? icon.src ?? icon.label ?? index))
         ] })
       ]
     }
@@ -1910,7 +2002,7 @@ var UpperPartTab = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     NavClickable,
     {
       href,
@@ -1918,22 +2010,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__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
       ]
     }
   );
 };
-var NavIconButton = (0, import_react9.forwardRef)(
+var NavIconButton = (0, import_react10.forwardRef)(
   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__ */ (0, import_jsx_runtime37.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       NavClickable,
       {
         ref: forwardedRef,
@@ -1949,9 +2043,9 @@ var NavIconButton = (0, import_react9.forwardRef)(
           className
         ),
         children: [
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("img", { src, alt: alt ?? label ?? "", className: "h-6 w-6" }) : null,
-          label ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
-          showBadge ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { src, alt: alt ?? label ?? "", className: "h-6 w-6" }) : null,
+          label ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
+          showBadge ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "span",
             {
               "aria-hidden": badge === true,
@@ -1977,14 +2071,14 @@ var LowerPart = ({
   if (lowerPartItemList.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "div",
     {
       className: cn("w-full h-[42px] pl-14 flex items-stretch border-b border-gray02", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-        lowerPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react9.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+        lowerPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react10.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             LowerPartItemButton,
             {
               label: item.label,
@@ -1997,7 +2091,7 @@ var LowerPart = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
         ] }, item.id ?? item.label))
       ]
     }
@@ -2011,7 +2105,7 @@ var LowerPartItemButton = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     NavClickable,
     {
       href,
@@ -2030,14 +2124,14 @@ var LowerPartItemButton = ({
 };
 
 // src/components/Toast/Toast.tsx
-var import_react10 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var EXIT_MS = 300;
-var Toast = (0, import_react10.forwardRef)(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
+var Toast = (0, import_react11.forwardRef)(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
   const controlled = open !== void 0;
-  const [mounted, setMounted] = (0, import_react10.useState)(!controlled || open);
-  const [visible, setVisible] = (0, import_react10.useState)(!controlled || open);
-  (0, import_react10.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react11.useState)(!controlled || open);
+  const [visible, setVisible] = (0, import_react11.useState)(!controlled || open);
+  (0, import_react11.useEffect)(() => {
     if (!controlled) return;
     if (open) {
       setMounted(true);
@@ -2048,13 +2142,13 @@ var Toast = (0, import_react10.forwardRef)(function Toast2({ message, open, dura
     const timer = setTimeout(() => setMounted(false), EXIT_MS);
     return () => clearTimeout(timer);
   }, [controlled, open]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!controlled || !open || !duration) return;
     const timer = setTimeout(() => onClose?.(), duration);
     return () => clearTimeout(timer);
   }, [controlled, open, duration, onClose]);
   if (!mounted) return null;
-  const banner = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  const banner = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       ref,
@@ -2072,7 +2166,7 @@ var Toast = (0, import_react10.forwardRef)(function Toast2({ message, open, dura
     }
   );
   if (position === "none") return banner;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       className: cn(
@@ -2085,6 +2179,7 @@ var Toast = (0, import_react10.forwardRef)(function Toast2({ message, open, dura
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Accordion,
   BackButton,
   BasicFormField,
   CTA,