@hivcd-printshop/design-system 1.1.1 → 1.2.0

package/dist/index.js

@@ -22,19 +22,47 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   BackButton: () => BackButton,
+  BasicFormField: () => BasicFormField,
   CTA: () => CTA,
   CategorySegment: () => CategorySegment,
   CategorySegmentedControl: () => CategorySegmentedControl,
+  Column: () => Column,
+  ColumnContentContainer: () => ColumnContentContainer,
+  ColumnLabel: () => ColumnLabel,
+  ColumnSubTitle: () => ColumnSubTitle,
+  ColumnText: () => ColumnText,
+  ColumnTextStyle: () => ColumnTextStyle,
+  Dropdown: () => Dropdown,
+  FormCheckBox: () => FormCheckBox,
+  FormColor: () => FormColor,
+  FormFile: () => FormFile,
+  FormNumber: () => FormNumber,
+  FormPassword: () => FormPassword,
+  FormSelectBox: () => FormSelectBox,
+  FormTel: () => FormTel,
+  FormText: () => FormText,
+  FormTextArea: () => FormTextArea,
+  IconCheck: () => IconCheck,
+  IconChevronDownXS: () => IconChevronDownXS,
+  IconInfo: () => IconInfo,
+  List: () => List,
+  Modal: () => Modal,
+  ModalText: () => ModalText,
+  ModalTextStyle: () => ModalTextStyle,
+  MultiColumn: () => MultiColumn,
   NoticeBadge: () => NoticeBadge,
   NoticeBar: () => NoticeBar,
   SearchBar: () => SearchBar,
+  SelectBoxOption: () => SelectBoxOption,
   SideRadioAccordion: () => SideRadioAccordion,
   TNB: () => TNB,
   Tag: () => Tag,
+  TextButton: () => TextButton,
   Timetable: () => Timetable,
   TitleInput: () => TitleInput,
   Toast: () => Toast,
-  WeekNavigation: () => WeekNavigation
+  WeekNavigation: () => WeekNavigation,
+  getInputStyles: () => getInputStyles
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -92,6 +120,20 @@ var IconChevronDownXS = ({
     }
   );
 };
+var IconCheck = ({ className, stroke }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className,
+      width: "13",
+      height: "13",
+      viewBox: "0 0 13 13",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2.05566 7.0555L4.83344 9.8333L10.9446 3.72217", stroke: stroke || "#121212" })
+    }
+  );
+};
 var IconSearch = ({ className, stroke }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
@@ -126,6 +168,32 @@ var IconSearch = ({ className, stroke }) => {
     }
   );
 };
+var IconInfo = ({ className, stroke }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "6.25", stroke: stroke || "#8b94a1", strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M8 7.25V11.25",
+            stroke: stroke || "#8b94a1",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "5", r: "0.9", fill: stroke || "#8b94a1" })
+      ]
+    }
+  );
+};
 var IconGoBack = ({ className, stroke }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
@@ -212,15 +280,696 @@ var CTA = ({
   );
 };
 
-// src/components/createPost/CategorySegment.tsx
+// src/components/Column/MultiColumn.tsx
 var import_jsx_runtime4 = 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 });
+};
+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 })
+  );
+};
+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 })
+  );
+};
+var MultiColumn = Object.assign(MultiColumnMain, {
+  Columns,
+  CTAs
+});
+
+// src/components/Column/Column.tsx
+var import_jsx_runtime5 = 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 pt-3 pb-8", className), children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h1", { className: cn("text-head3-medium text-primary font-bold"), children: header }),
+    children
+  ] });
+};
+
+// src/components/Column/ColumnContentContainer.tsx
+var import_jsx_runtime6 = 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 });
+};
+
+// src/components/Column/ColumnLabel.tsx
+var import_jsx_runtime7 = 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 })
+  ] });
+};
+
+// src/components/Column/ColumnText.tsx
+var import_jsx_runtime8 = 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 : "-" });
+};
+
+// src/components/Column/ColumnSubTitle.tsx
+var import_jsx_runtime9 = 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-head3-medium text-strong"), children }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex shrink-0 items-center", children: action })
+  ] });
+};
+
+// src/components/Form/BasicFormField.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var BasicFormField = ({
+  children,
+  isDanger,
+  dangerText,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    children,
+    isDanger && dangerText && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-caption-book text-danger", children: dangerText })
+  ] });
+};
+var getInputStyles = (isDanger, additionalClass) => {
+  return cn(
+    "w-full h-10 px-3",
+    "box-border border border-gray02 focus:outline-none focus:border-black",
+    "bg-white hover:bg-gray00 transition-colors focus:hover:bg-white",
+    ColumnTextStyle,
+    "text-primary placeholder:text-quaternary",
+    isDanger && "border-danger",
+    // 에러 시 빨간 테두리
+    additionalClass
+    // 각 인풋별 추가 스타일 (예: textarea의 h-30)
+  );
+};
+
+// src/components/Form/FormText.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var FormText = ({ className, isDanger, dangerText, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "text", className: getInputStyles(isDanger, className), ...props }) });
+};
+
+// src/components/Form/FormTextArea.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var FormTextArea = ({ className, isDanger, dangerText, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "textarea",
+    {
+      className: getInputStyles(isDanger, "resize-none h-30 py-2.5 " + (className || "")),
+      ...props
+    }
+  ) });
+};
+
+// src/components/Form/FormNumber.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var FormNumber = ({ className, isDanger, dangerText, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "number", className: getInputStyles(isDanger, className), ...props }) });
+};
+
+// src/components/Form/FormPassword.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var FormPassword = ({ className, isDanger, dangerText, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", { type: "password", className: getInputStyles(isDanger, className), ...props }) });
+};
+
+// src/components/Form/FormTel.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
+  const handlePhoneChange = (e) => {
+    const rawValue = e.target.value.replace(/[^0-9]/g, "");
+    let formattedValue = "";
+    if (rawValue.length < 4) formattedValue = rawValue;
+    else if (rawValue.length < 8) formattedValue = `${rawValue.slice(0, 3)}-${rawValue.slice(3)}`;
+    else
+      formattedValue = `${rawValue.slice(0, 3)}-${rawValue.slice(3, 7)}-${rawValue.slice(7, 11)}`;
+    e.target.value = formattedValue;
+    if (onChange) onChange(e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "input",
+    {
+      type: "tel",
+      className: getInputStyles(isDanger, className),
+      onChange: handlePhoneChange,
+      maxLength: 13,
+      ...props
+    }
+  ) });
+};
+
+// src/components/Form/FormColor.tsx
+var import_react = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var FormColor = ({
+  className,
+  isDanger,
+  dangerText,
+  value,
+  defaultValue = "#000000",
+  onChange,
+  ...props
+}) => {
+  const [internalColor, setInternalColor] = (0, import_react.useState)(
+    value || defaultValue || "#000000"
+  );
+  const color = value !== void 0 ? value : internalColor;
+  const handleColorChange = (e) => {
+    setInternalColor(e.target.value);
+    onChange?.(e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "label",
+    {
+      className: getInputStyles(
+        isDanger,
+        // 💡 focus-within을 통해 내부 <input>이 포커스될 때 부모(label)의 테두리와 배경 변경!
+        "flex items-center gap-2 relative focus-within:border-black focus-within:hover:bg-white" + (className || "")
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "w-6 h-6 shrink-0 overflow-hidden", style: { backgroundColor: color }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "input",
+          {
+            type: "color",
+            value: color,
+            onChange: handleColorChange,
+            className: "absolute inset-0 w-full h-full opacity-0",
+            ...props
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime17 = require("react/jsx-runtime");
+var FormFile = ({
+  className,
+  isDanger,
+  dangerText,
+  placeholder = "\uD30C\uC77C\uC744 \uC120\uD0DD\uD574\uC8FC\uC138\uC694",
+  fileUrl,
+  filename,
+  onChange,
+  ...props
+}) => {
+  const [selectedFile, setSelectedFile] = (0, import_react2.useState)(null);
+  const handleFileChange = (e) => {
+    const originalFile = e.target.files?.[0];
+    if (!originalFile) {
+      setSelectedFile(null);
+      onChange?.(e);
+      return;
+    }
+    let finalFile = originalFile;
+    if (filename) {
+      const lastDotIndex = originalFile.name.lastIndexOf(".");
+      const extension = lastDotIndex !== -1 ? originalFile.name.slice(lastDotIndex) : "";
+      const newFileName = filename.endsWith(extension) ? filename : `${filename}${extension}`;
+      finalFile = new File([originalFile], newFileName, {
+        type: originalFile.type,
+        lastModified: originalFile.lastModified
+      });
+      try {
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(finalFile);
+        e.target.files = dataTransfer.files;
+      } catch (err) {
+        console.warn("DataTransfer\uB97C \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uB294 \uBE0C\uB77C\uC6B0\uC800\uC785\uB2C8\uB2E4.", err);
+      }
+    }
+    setSelectedFile(finalFile);
+    onChange?.(e);
+  };
+  const handleDownload = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (selectedFile) {
+      const url = URL.createObjectURL(selectedFile);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = selectedFile.name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } else if (fileUrl) {
+      const a = document.createElement("a");
+      a.href = fileUrl;
+      a.download = fileUrl.split("/").pop() || "download";
+      a.target = "_blank";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    }
+  };
+  const displayFileName = selectedFile?.name || (fileUrl ? fileUrl.split("/").pop() : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      className: getInputStyles(
+        isDanger,
+        "active:bg-gray00 flex items-center gap-2 justify-between " + (className || "")
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "div",
+          {
+            className: `truncate flex-1 max-w-50 w-full ${displayFileName ? "text-primary" : "text-quaternary"}`,
+            children: displayFileName ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "span",
+              {
+                onClick: handleDownload,
+                className: "w-full underline text-primary cursor-pointer hover:text-black transition-colors",
+                title: `${displayFileName} \uB2E4\uC6B4\uB85C\uB4DC`,
+                children: displayFileName
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "w-full", children: placeholder })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "px-1 -mx-1 cursor-pointer", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-primary text-caption-regular underline", children: "\uD30C\uC77C \uCCA8\uBD80" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("input", { type: "file", className: "hidden", onChange: handleFileChange, ...props })
+        ] })
+      ]
+    }
+  ) });
+};
+
+// src/components/Form/FormCheckBox.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var FormCheckBox = ({
+  isChecked,
+  setIsChecked,
+  children,
+  className,
+  textStyle,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "label",
+    {
+      className: cn(
+        "w-fit h-fit pr-1",
+        "flex items-center gap-1",
+        "hover:bg-gray00 active:bg-gray01 transition-colors",
+        "cursor-pointer select-none",
+        // 💡 1. 텍스트 드래그 방지 추가
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: isChecked,
+            onChange: (e) => setIsChecked(e.target.checked),
+            className: "sr-only peer",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center justify-center w-5 h-5 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "div",
+          {
+            className: cn(
+              "w-[15px] h-[15px]",
+              "box-border border",
+              "flex items-center justify-center transition-colors duration-200",
+              // 💡 3. 키보드 Tab 이동 시 접근성 향상 (포커스 링 표시)
+              "peer-focus-visible:ring-2 peer-focus-visible:ring-black peer-focus-visible:ring-offset-1"
+            ),
+            children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconCheck, {})
+          }
+        ) }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: cn(ColumnTextStyle, textStyle), children })
+      ]
+    }
+  );
+};
+
+// src/components/Form/FormSelectBox.tsx
+var import_react3 = require("react");
+
+// src/components/Form/SelectBoxOption.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var SelectBoxOption = ({
+  label,
+  onClick,
+  // selectedLabel,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "li",
+    {
+      onClick,
+      className: cn(
+        "w-full h-11 px-3 shrink-0",
+        "flex items-center justify-start",
+        // "box-border border-b border-gray02",
+        "text-body3-book text-primary",
+        "bg-white hover:bg-gray00 active:bg-gray01",
+        // isSelected
+        //   ? "bg-black text-white"
+        //   : "",
+        className
+      ),
+      children: label
+    }
+  );
+};
+
+// src/components/Form/FormSelectBox.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var FormSelectBox = ({
+  options,
+  value,
+  onChange,
+  placeholder = "\uC120\uD0DD\uD574\uC8FC\uC138\uC694",
+  isDanger,
+  dangerText,
+  className
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const containerRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref: containerRef, className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "div",
+      {
+        tabIndex: 0,
+        className: getInputStyles(
+          isDanger,
+          cn(
+            "flex items-center justify-between cursor-pointer select-none",
+            isOpen && "border-black",
+            // 💡 열려있을 때는 테두리를 검은색으로 고정 (포커스 효과)
+            className
+          )
+        ),
+        onClick: (e) => {
+          if (isOpen) {
+            e.currentTarget.blur();
+          }
+          setIsOpen((prev) => !prev);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: value ? "text-primary" : "text-quaternary", children: value || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            IconChevronDownXS,
+            {
+              className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
+              stroke: "currentColor"
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "ul",
+      {
+        className: cn(
+          "absolute top-full left-0 right-0 z-10",
+          // 💡 Input 바로 아래에 띄움
+          "box-border border border-gray02 bg-white flex flex-col",
+          "max-h-50 overflow-y-auto shadow-sm"
+          // 💡 항목이 너무 많으면 스크롤 생성
+        ),
+        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          SelectBoxOption,
+          {
+            label: option,
+            onClick: () => {
+              onChange(option);
+              setIsOpen(false);
+            }
+          },
+          option
+        ))
+      }
+    )
+  ] }) });
+};
+
+// src/components/TextButton/TextButton.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var TextButton = ({
+  children,
+  icon,
+  iconPosition = "left",
+  alert = false,
+  underline = true,
+  className,
+  ...props
+}) => {
+  const content = /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    icon && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "flex shrink-0 items-center", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cn(underline && "underline underline-offset-2"), children }),
+    icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime21.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",
+    "text-caption-book",
+    alert ? "text-danger" : "text-tertiary",
+    "hover:bg-gray00 active:bg-gray01 transition-colors",
+    alert ? "hover:text-danger" : "hover:text-primary",
+    "cursor-pointer select-none",
+    "disabled:cursor-default disabled:text-quaternary disabled:hover:bg-transparent",
+    "aria-disabled:cursor-default aria-disabled:text-quaternary aria-disabled:hover:bg-transparent",
+    className
+  );
+  if (props.href !== void 0) {
+    const { href, ...rest } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("a", { href, className: classes, ...rest, children: content });
+  }
+  const buttonProps = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", className: classes, ...buttonProps, children: content });
+};
+
+// src/components/Dropdown/Dropdown.tsx
+var import_react4 = require("react");
+var import_jsx_runtime22 = 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 handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "div",
+      {
+        className: cn(
+          "w-fit h-fit px-2 py-1",
+          "flex items-center justify-center gap-1.5",
+          "text-body3-book text-strong",
+          "bg-white hover:bg-gray00 active:bg-gray01",
+          "cursor-pointer",
+          className
+        ),
+        onClick: () => setIsOpen((prev) => !prev),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { children: selectedLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            IconChevronDownXS,
+            {
+              className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
+              stroke: "currentColor"
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cn("absolute top-full right-0 z-10", "box-border border border-gray02"), children: labels.map((label) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      SelectBoxOption,
+      {
+        label,
+        onClick: () => {
+          setSelectedLabel(label);
+          setIsOpen(false);
+        },
+        className: "w-44 h-11 justify-center"
+      },
+      label
+    )) })
+  ] });
+};
+
+// src/components/ListView/List.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function List({
+  className,
+  label1,
+  label2,
+  label2OnClick,
+  label3,
+  disabled = false,
+  selected = false,
+  onClick,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "li",
+    {
+      className: cn(
+        "w-full min-w-fit h-13 pl-4 pr-6",
+        "grid grid-cols-[4fr_1fr_1fr] items-center gap-4",
+        "bg-white hover:bg-gray00 hover:has-[.has-clickable:hover]:bg-white active:bg-gray01",
+        "text-primary select-none [&_*]:cursor-pointer cursor-pointer",
+        disabled && "opacity-40 [&_*]:cursor-pointer cursor-pointer",
+        selected && "bg-black text-white hover:bg-black active:bg-black hover:has-[.has-clickable:hover]:bg-black",
+        className
+      ),
+      ...props,
+      onClick,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("section", { className: cn("flex items-center gap-4"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { className: cn("text-body2-regular"), children: label1 ? label1 : "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn("flex items-center gap-2"), children })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "label",
+          {
+            className: cn(
+              "text-body3-book truncate p-1 w-fit",
+              label2OnClick && "underline has-clickable",
+              label2OnClick && !selected && "hover:bg-gray00"
+            ),
+            onClick: label2OnClick,
+            children: label2 ? label2 : "-"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { className: cn("text-body3-regular text-right"), children: label3 ? label3 : "-" })
+      ]
+    }
+  );
+}
+
+// src/components/Modal/Modal.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var ModalBase = ({ isVisible, header, children, className }) => {
+  if (!isVisible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("fixed inset-0 z-50 pointer-events-auto"), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      className: cn("fixed inset-0 z-1001 flex items-center justify-center pointer-events-auto"),
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        "main",
+        {
+          className: cn(
+            "w-110 pt-8 h-fit",
+            "flex flex-col items-center",
+            "border border-gray02",
+            "bg-white shadow-[0 0 30px 0 rgba(0, 0, 0, 0.08);]",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
+            children
+          ]
+        }
+      )
+    }
+  ) });
+};
+var Contents = ({ children, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center gap-8",
+        "w-full h-fit",
+        "px-14 pt-8 pb-9",
+        className
+      ),
+      children
+    }
+  );
+};
+var CTAs2 = ({ children, className, row = false }) => {
+  if (!children) return null;
+  return (
+    // CTA 버튼들을 중앙에 배치하는 예시 (우측 정렬이 필요하면 justify-end 사용)
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "div",
+      {
+        className: cn(
+          "flex flex-col w-full h-fit",
+          row && "flex-row divide-x divide-gray02",
+          className
+        ),
+        children
+      }
+    )
+  );
+};
+var Modal = Object.assign(ModalBase, {
+  Contents,
+  CTAs: CTAs2
+});
+
+// src/components/Modal/ModalText.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ModalText = ({ children, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center",
+        "mt-[-20px] mb-[-4px]",
+        ModalTextStyle,
+        "text-tertiary text-center",
+        className
+      ),
+      children
+    }
+  );
+};
+
+// src/components/createPost/CategorySegment.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var CategorySegment = ({
   selected = false,
   label,
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       className: cn(
@@ -240,7 +989,7 @@ var CategorySegment = ({
 };
 
 // src/components/createPost/CategorySegmentedControl.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime27 = 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"],
@@ -254,8 +1003,8 @@ var CategorySegmentedControl = ({
   className
 }) => {
   const segments = categorySegments[variable];
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "div",
       {
         className: cn(
@@ -268,7 +1017,7 @@ var CategorySegmentedControl = ({
         children: variable === "infoTag" ? "\uD0DC\uADF8 \uC120\uD0DD" : "\uCE74\uD14C\uACE0\uB9AC \uC120\uD0DD"
       }
     ),
-    segments.map((label) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    segments.map((label) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       CategorySegment,
       {
         label,
@@ -281,9 +1030,9 @@ var CategorySegmentedControl = ({
 };
 
 // src/components/createPost/TitleInput.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var TitleInput = ({ title, onChange, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "input",
     {
       type: "text",
@@ -303,9 +1052,9 @@ var TitleInput = ({ title, onChange, className }) => {
 };
 
 // src/components/notice/NoticeBadge.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var NoticeBadge = ({ variable, className, onClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "button",
     {
       type: "button",
@@ -326,7 +1075,7 @@ var NoticeBadge = ({ variable, className, onClick }) => {
 };
 
 // src/components/notice/NoticeBar.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var NoticeBar = ({
   variable = "default",
   badgeVariable,
@@ -335,7 +1084,7 @@ var NoticeBar = ({
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       className: cn(
@@ -347,20 +1096,20 @@ var NoticeBar = ({
       ),
       onClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(NoticeBadge, { variable: badgeVariable }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h1", { className: "text-head1-medium text-strong", children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("section", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(NoticeBadge, { variable: badgeVariable }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h1", { className: "text-head1-medium text-strong", children: title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-body3-book text-tertiary", children: date })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-body3-book text-tertiary", children: date })
       ]
     }
   );
 };
 
 // src/components/SearchBar/SearchBar.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var SearchBar = ({ value, onChange, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "label",
     {
       className: cn(
@@ -371,8 +1120,8 @@ var SearchBar = ({ value, onChange, className }) => {
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(IconSearch, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconSearch, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "input",
           {
             type: "text",
@@ -391,15 +1140,15 @@ var SearchBar = ({ value, onChange, className }) => {
 };
 
 // src/components/SideRadioAccordion/SideRadioAccordion.tsx
-var import_react2 = require("react");
+var import_react6 = require("react");
 
 // src/lib/useControllableState.ts
-var import_react = require("react");
+var import_react5 = require("react");
 function useControllableState(controlled, defaultValue) {
   const isControlled = controlled !== void 0;
-  const [uncontrolled, setUncontrolled] = (0, import_react.useState)(defaultValue);
+  const [uncontrolled, setUncontrolled] = (0, import_react5.useState)(defaultValue);
   const value = isControlled ? controlled : uncontrolled;
-  const setValue = (0, import_react.useCallback)(
+  const setValue = (0, import_react5.useCallback)(
     (next) => {
       if (!isControlled) setUncontrolled(next);
     },
@@ -421,7 +1170,7 @@ var RadioSelected_default = "./RadioSelected-DOLVV7ZM.svg";
 var RadioUnselected_default = "./RadioUnselected-QN74EU46.svg";
 
 // src/components/SideRadioAccordion/SideRadioAccordion.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var printColorBgClass = {
   Plotter: "bg-print-plotter",
   Printer: "bg-print-printer",
@@ -432,7 +1181,7 @@ var printColorBgClass = {
   "Laser Cutting": "bg-print-laser-cutting"
 };
 var itemKey = (item) => item.value ?? item.title;
-var SideRadioAccordion = (0, import_react2.forwardRef)(
+var SideRadioAccordion = (0, import_react6.forwardRef)(
   function SideRadioAccordion2({
     step,
     title,
@@ -465,8 +1214,8 @@ var SideRadioAccordion = (0, import_react2.forwardRef)(
       setIsOpen(next);
       onOpenChange?.(next);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref, className: cn("w-full", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { ref, className: cn("w-full", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         Stepper,
         {
           step,
@@ -477,8 +1226,8 @@ var SideRadioAccordion = (0, import_react2.forwardRef)(
           className: cn(stickyHeader && "sticky top-0 z-10")
         }
       ),
-      expanded && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col", children: [
-        radioToggleList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      expanded && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col", children: [
+        radioToggleList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           RadioToggleItem,
           {
             ...item,
@@ -487,8 +1236,8 @@ var SideRadioAccordion = (0, import_react2.forwardRef)(
           },
           itemKey(item)
         )),
-        quantityLimitLabel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          TextButton,
+        quantityLimitLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          TextButton2,
           {
             label: quantityLimitLabel,
             onClick: onClickQuantityLimit,
@@ -500,16 +1249,16 @@ var SideRadioAccordion = (0, import_react2.forwardRef)(
   }
 );
 var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
-  const label = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
+  const label = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { children: [
     step,
     " | ",
     title
   ] });
   const base = "w-full flex items-center justify-between px-3 py-2.5 text-body1-medium text-strong text-left bg-white";
   if (!collapsible) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn(base, className), children: label });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn(base, className), children: label });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "button",
     {
       type: "button",
@@ -517,7 +1266,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_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "img",
           {
             src: ChevronDown_default,
@@ -543,8 +1292,8 @@ 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_runtime10.jsxs)("div", { className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "button",
       {
         type: "button",
@@ -557,16 +1306,16 @@ var RadioToggleItem = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Radio, { selected: open }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Radio, { selected: open }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: title })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-caption-regular text-secondary", children: content }),
-      badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex gap-1", children: badges.map((badge) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Badge, { label: badge }, badge)) }),
-      labelTextButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        TextButton,
+    open && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-caption-regular text-secondary", children: content }),
+      badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex gap-1", children: badges.map((badge) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Badge, { label: badge }, badge)) }),
+      labelTextButton && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        TextButton2,
         {
           label: labelTextButton,
           onClick: onClickTextButton,
@@ -578,7 +1327,7 @@ var RadioToggleItem = ({
   ] });
 };
 var Radio = ({ selected = false, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "img",
     {
       src: selected ? RadioSelected_default : RadioUnselected_default,
@@ -587,8 +1336,8 @@ var Radio = ({ selected = false, className }) => {
     }
   );
 };
-var TextButton = ({ label, onClick, showIcon = false, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "button",
     {
       type: "button",
@@ -601,14 +1350,14 @@ var TextButton = ({ label, onClick, showIcon = false, className }) => {
         className
       ),
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { src: Exclamation_default, alt: "" }),
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src: Exclamation_default, alt: "" }),
         label
       ]
     }
   );
 };
 var Badge = ({ label, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       className: cn(
@@ -622,7 +1371,7 @@ var Badge = ({ label, className }) => {
 };
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var Tag = ({
   className,
   children,
@@ -632,7 +1381,7 @@ var Tag = ({
   onClick,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "button",
     {
       className: cn(
@@ -651,16 +1400,16 @@ var Tag = ({
       disabled,
       style: bgColor ? { backgroundColor: bgColor, border: "none" } : void 0,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children })
     }
   );
 };
 
 // src/components/Timetable/Timetable.tsx
-var import_react4 = require("react");
+var import_react8 = require("react");
 
 // src/components/Timetable/WeekNavigation.tsx
-var import_react3 = require("react");
+var import_react7 = require("react");
 
 // src/components/Timetable/dateUtils.ts
 var KOREAN_WEEKDAYS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
@@ -693,18 +1442,18 @@ var formatWeekRange = (weekStart) => {
 };
 
 // src/components/Timetable/WeekNavigation.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var weekLabel = {
   thisWeek: "\uC774\uBC88 \uC8FC",
   nextWeek: "\uB2E4\uC74C \uC8FC",
   twoWeeksLater: "\uB2E4\uB2E4\uC74C \uC8FC"
 };
-var WeekNavigation = (0, import_react3.forwardRef)(
+var WeekNavigation = (0, import_react7.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_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
       "div",
       {
         ref,
@@ -716,9 +1465,9 @@ var WeekNavigation = (0, import_react3.forwardRef)(
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: text }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: text }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
         ]
       }
     );
@@ -726,9 +1475,9 @@ var WeekNavigation = (0, import_react3.forwardRef)(
 );
 var ArrowButton = ({ direction, visible, onClick }) => {
   if (!visible) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-6 h-6" });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "w-6 h-6" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "button",
     {
       type: "button",
@@ -738,7 +1487,7 @@ var ArrowButton = ({ direction, visible, onClick }) => {
         "text-gray06 cursor-pointer",
         "hover:bg-gray00 active:bg-gray01"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         IconChevronDownXS,
         {
           className: direction === "left" ? "rotate-90" : "-rotate-90",
@@ -750,7 +1499,7 @@ var ArrowButton = ({ direction, visible, onClick }) => {
 };
 
 // src/components/Timetable/Timetable.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var printColorHoverClass = {
   Plotter: "hover:bg-print-plotter",
   Printer: "hover:bg-print-printer",
@@ -760,7 +1509,7 @@ var printColorHoverClass = {
   "Seet Cutting": "hover:bg-print-seet-cutting",
   "Laser Cutting": "hover:bg-print-laser-cutting"
 };
-var Timetable = (0, import_react4.forwardRef)(function Timetable2({
+var Timetable = (0, import_react8.forwardRef)(function Timetable2({
   weekStart,
   week,
   days,
@@ -773,8 +1522,8 @@ var Timetable = (0, import_react4.forwardRef)(function Timetable2({
   canNextWeek,
   className
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref, className: cn(fluid && "w-full", className), children: [
-    !hideWeekNavigation && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ref, className: cn(fluid && "w-full", className), children: [
+    !hideWeekNavigation && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       WeekNavigation,
       {
         date: weekStart,
@@ -785,7 +1534,7 @@ var Timetable = (0, import_react4.forwardRef)(function Timetable2({
         onNextWeek
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       DailyTimetable,
       {
         date: day.date,
@@ -798,9 +1547,9 @@ var Timetable = (0, import_react4.forwardRef)(function Timetable2({
   ] });
 });
 var DailyTimetable = ({ date, slots, fluid, onSelectTime, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "h-13 flex items-center justify-center text-body3-medium text-secondary", children: formatDayLabel(date) }),
-    slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-13 flex items-center justify-center text-body3-medium text-secondary", children: formatDayLabel(date) }),
+    slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       TimeItem,
       {
         state: slot.state,
@@ -826,7 +1575,7 @@ var TimeItem = ({
 }) => {
   const clickable = (state === "default" || state === "selected") && !!onClick;
   const style = state === "default" && color ? { "--tt-hover": color } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       onClick: clickable ? onClick : void 0,
@@ -850,13 +1599,13 @@ var TimeItem = ({
 };
 
 // src/components/TNB/TNB.tsx
-var import_react5 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function useControllableState2(controlled, defaultValue) {
   const isControlled = controlled !== void 0;
-  const [uncontrolled, setUncontrolled] = (0, import_react5.useState)(defaultValue);
+  const [uncontrolled, setUncontrolled] = (0, import_react9.useState)(defaultValue);
   const value = isControlled ? controlled : uncontrolled;
-  const setValue = (0, import_react5.useCallback)(
+  const setValue = (0, import_react9.useCallback)(
     (next) => {
       if (!isControlled) setUncontrolled(next);
     },
@@ -864,7 +1613,7 @@ function useControllableState2(controlled, defaultValue) {
   );
   return [value, setValue, isControlled];
 }
-var TNB = (0, import_react5.forwardRef)(function TNB2({
+var TNB = (0, import_react9.forwardRef)(function TNB2({
   logo,
   upperPartItemList,
   upperPartIconList,
@@ -903,8 +1652,8 @@ var TNB = (0, import_react5.forwardRef)(function TNB2({
     setLowerValue(label);
     onSelectedLowerChange?.(label);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       UpperPart,
       {
         logo,
@@ -915,7 +1664,7 @@ var TNB = (0, import_react5.forwardRef)(function TNB2({
         linkComponent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       LowerPart,
       {
         lowerPartItemList: currentLowerItemList,
@@ -926,11 +1675,11 @@ var TNB = (0, import_react5.forwardRef)(function TNB2({
     )
   ] });
 });
-var NavClickable = (0, import_react5.forwardRef)(function NavClickable2({ href, onClick, linkComponent: Link, current, disabled, className, children }, ref) {
+var NavClickable = (0, import_react9.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_runtime14.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         Link,
         {
           href,
@@ -942,7 +1691,7 @@ var NavClickable = (0, import_react5.forwardRef)(function NavClickable2({ href,
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "a",
       {
         href,
@@ -954,7 +1703,7 @@ var NavClickable = (0, import_react5.forwardRef)(function NavClickable2({ href,
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "button",
     {
       type: "button",
@@ -976,10 +1725,10 @@ var UpperPart = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("w-full h-13 px-4 flex items-center justify-between", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NavIconButton, { ...logo, linkComponent }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center gap-4", children: upperPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("w-full h-13 px-4 flex items-center justify-between", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(NavIconButton, { ...logo, linkComponent }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex items-center gap-4", children: upperPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         UpperPartTab,
         {
           label: item.label,
@@ -994,7 +1743,7 @@ var UpperPart = ({
         item.id ?? item.label
       )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center gap-2", children: upperPartIconList.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex items-center gap-2", children: upperPartIconList.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       NavIconButton,
       {
         ...icon,
@@ -1012,7 +1761,7 @@ var UpperPartTab = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     NavClickable,
     {
       href,
@@ -1028,11 +1777,11 @@ var UpperPartTab = ({
     }
   );
 };
-var NavIconButton = (0, import_react5.forwardRef)(
+var NavIconButton = (0, import_react9.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_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
       NavClickable,
       {
         ref: forwardedRef,
@@ -1048,9 +1797,9 @@ var NavIconButton = (0, import_react5.forwardRef)(
           className
         ),
         children: [
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "inline-flex h-5 w-5 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { src, alt: alt ?? label ?? "", className: "h-5 w-5" }) : null,
-          label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
-          showBadge ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "inline-flex h-5 w-5 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { src, alt: alt ?? label ?? "", className: "h-5 w-5" }) : null,
+          label ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
+          showBadge ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "span",
             {
               "aria-hidden": badge === true,
@@ -1076,11 +1825,11 @@ var LowerPart = ({
   if (lowerPartItemList.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
       className: cn("w-full h-9 px-4 flex items-center gap-4 border-t border-gray02", className),
-      children: lowerPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      children: lowerPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         LowerPartItemButton,
         {
           label: item.label,
@@ -1105,7 +1854,7 @@ var LowerPartItemButton = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     NavClickable,
     {
       href,
@@ -1124,14 +1873,14 @@ var LowerPartItemButton = ({
 };
 
 // src/components/Toast/Toast.tsx
-var import_react6 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var EXIT_MS = 300;
-var Toast = (0, import_react6.forwardRef)(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
+var Toast = (0, import_react10.forwardRef)(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
   const controlled = open !== void 0;
-  const [mounted, setMounted] = (0, import_react6.useState)(!controlled || open);
-  const [visible, setVisible] = (0, import_react6.useState)(!controlled || open);
-  (0, import_react6.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react10.useState)(!controlled || open);
+  const [visible, setVisible] = (0, import_react10.useState)(!controlled || open);
+  (0, import_react10.useEffect)(() => {
     if (!controlled) return;
     if (open) {
       setMounted(true);
@@ -1142,13 +1891,13 @@ var Toast = (0, import_react6.forwardRef)(function Toast2({ message, open, durat
     const timer = setTimeout(() => setMounted(false), EXIT_MS);
     return () => clearTimeout(timer);
   }, [controlled, open]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react10.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_runtime15.jsx)(
+  const banner = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       ref,
@@ -1166,7 +1915,7 @@ var Toast = (0, import_react6.forwardRef)(function Toast2({ message, open, durat
     }
   );
   if (position === "none") return banner;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       className: cn(
@@ -1180,18 +1929,46 @@ var Toast = (0, import_react6.forwardRef)(function Toast2({ message, open, durat
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BackButton,
+  BasicFormField,
   CTA,
   CategorySegment,
   CategorySegmentedControl,
+  Column,
+  ColumnContentContainer,
+  ColumnLabel,
+  ColumnSubTitle,
+  ColumnText,
+  ColumnTextStyle,
+  Dropdown,
+  FormCheckBox,
+  FormColor,
+  FormFile,
+  FormNumber,
+  FormPassword,
+  FormSelectBox,
+  FormTel,
+  FormText,
+  FormTextArea,
+  IconCheck,
+  IconChevronDownXS,
+  IconInfo,
+  List,
+  Modal,
+  ModalText,
+  ModalTextStyle,
+  MultiColumn,
   NoticeBadge,
   NoticeBar,
   SearchBar,
+  SelectBoxOption,
   SideRadioAccordion,
   TNB,
   Tag,
+  TextButton,
   Timetable,
   TitleInput,
   Toast,
-  WeekNavigation
+  WeekNavigation,
+  getInputStyles
 });
 //# sourceMappingURL=index.js.map