@hivcd-printshop/design-system 1.1.1 → 1.2.1

package/dist/index.js

@@ -22,19 +22,50 @@ 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,
+  ColumnDescription: () => ColumnDescription,
+  ColumnDescriptionList: () => ColumnDescriptionList,
+  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,
+  IconCompass: () => IconCompass,
+  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 +123,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 +171,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",
@@ -151,6 +222,28 @@ var IconGoBack = ({ className, stroke }) => {
     }
   );
 };
+var IconCompass = ({ className, fill }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "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)(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12.5731 7.37945C12.2964 5.32806 10.668 3.70356 8.6166 3.42688V0H7.37945V3.42688C5.32806 3.70356 3.70356 5.32806 3.42688 7.37945H0V8.62055H3.42688C3.70356 10.6719 5.32806 12.2964 7.37945 12.5731V16H8.6166V12.5731C10.668 12.2964 12.2964 10.6719 12.5731 8.62055H16V7.37945H12.5731ZM7.37945 11.3241C6.01186 11.0672 4.93281 9.98814 4.67589 8.62055H7.37945V11.3241ZM7.4664 5.51383C7.41897 5.81423 7.39131 6.14229 7.37945 6.50988V7.37945H4.67589C4.89328 6.22925 5.68775 5.28458 6.75099 4.86166C6.9921 4.73122 7.07905 4.67589 7.19763 4.41502L7.67984 4.57312C7.58498 4.90119 7.51779 5.21344 7.4664 5.51383ZM9.24506 11.1383C9.00395 11.2727 8.917 11.3241 8.79842 11.5889L8.31621 11.4269C8.41107 11.1028 8.47826 10.7905 8.52965 10.4901C8.57312 10.2134 8.60474 9.91304 8.6166 9.58103V8.62055H11.3202C11.1067 9.77075 10.3083 10.7154 9.24506 11.1383ZM8.6166 7.37945V4.67984C9.98419 4.93281 11.0672 6.01186 11.3202 7.37945H8.6166Z",
+          fill: fill || "#121212"
+        }
+      )
+    }
+  );
+};
 
 // src/components/BackButton/BackButton.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -212,15 +305,720 @@ 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 py-3", className), children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime5.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 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-body1-medium text-primary"), children }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex shrink-0 items-center", children: action })
+  ] });
+};
+
+// src/components/Column/ColumnDescription.tsx
+var import_jsx_runtime10 = 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 })
+  ] });
+};
+var ColumnDescriptionList = ({ className, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.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 BasicFormField = ({
+  children,
+  isDanger,
+  dangerText,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.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 })
+  ] });
+};
+var getInputStyles = (isDanger, additionalClass) => {
+  return cn(
+    // 디자인 스펙: 높이 41px, 좌우 12px / 상하 10px 패딩
+    "w-full h-[41px] px-3 py-2.5",
+    "box-border border border-gray02 focus:outline-none focus:border-black",
+    "bg-white transition-colors",
+    ColumnTextStyle,
+    "text-primary placeholder:text-quaternary",
+    isDanger && "border-danger",
+    // 경고 시 빨간 테두리 (#E42939)
+    additionalClass
+    // 각 인풋별 추가 스타일 (예: textarea의 h-30)
+  );
+};
+
+// src/components/Form/FormText.tsx
+var import_jsx_runtime12 = 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 }) });
+};
+
+// src/components/Form/FormTextArea.tsx
+var import_jsx_runtime13 = 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)(
+    "textarea",
+    {
+      className: getInputStyles(isDanger, "resize-none h-30 px-4 py-2.5 " + (className || "")),
+      ...props
+    }
+  ) });
+};
+
+// src/components/Form/FormNumber.tsx
+var import_jsx_runtime14 = 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 }) });
+};
+
+// src/components/Form/FormPassword.tsx
+var import_jsx_runtime15 = 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 }) });
+};
+
+// src/components/Form/FormTel.tsx
+var import_jsx_runtime16 = 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_runtime16.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime17 = 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_runtime17.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime17.jsx)("div", { className: "w-6 h-6 shrink-0 overflow-hidden", style: { backgroundColor: color }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "input",
+          {
+            type: "color",
+            value: color,
+            onChange: handleColorChange,
+            className: "absolute inset-0 w-full h-full opacity-0",
+            ...props
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.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 FormFile = ({
+  className,
+  isDanger,
+  dangerText,
+  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_runtime18.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    "div",
+    {
+      className: getInputStyles(
+        isDanger,
+        // 디자인 스펙: 파일 전 상태는 우측 정렬("파일 첨부"만), 파일 후 상태는 좌우 배치
+        cn(
+          "flex items-center gap-2",
+          displayFileName ? "justify-between" : "justify-end",
+          className
+        )
+      ),
+      children: [
+        displayFileName && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "span",
+          {
+            onClick: handleDownload,
+            className: "text-body3-book text-primary truncate max-w-[200px] cursor-pointer",
+            title: `${displayFileName} \uB2E4\uC6B4\uB85C\uB4DC`,
+            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 })
+        ] })
+      ]
+    }
+  ) });
+};
+
+// src/components/Form/FormCheckBox.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var FormCheckBox = ({
+  isChecked,
+  setIsChecked,
+  children,
+  className,
+  textStyle,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "label",
+    {
+      className: cn(
+        "group w-fit h-fit",
+        "flex items-center gap-1",
+        "cursor-pointer select-none",
+        // 💡 1. 텍스트 드래그 방지 추가
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: isChecked,
+            onChange: (e) => setIsChecked(e.target.checked),
+            className: "sr-only peer",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.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)(
+              "div",
+              {
+                className: cn(
+                  "w-[15px] h-[15px]",
+                  "box-border border border-black",
+                  "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_runtime19.jsx)(IconCheck, {})
+              }
+            )
+          }
+        ),
+        children && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: cn("text-body3-book text-primary", textStyle), children })
+      ]
+    }
+  );
+};
+
+// src/components/Form/FormSelectBox.tsx
+var import_react3 = require("react");
+
+// src/components/Form/SelectBoxOption.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var SelectBoxOption = ({
+  label,
+  onClick,
+  // selectedLabel,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "li",
+    {
+      onClick,
+      className: cn(
+        "w-full p-3 shrink-0",
+        // 디자인 스펙: 12px 패딩
+        "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_runtime21 = 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_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)(
+      "div",
+      {
+        tabIndex: 0,
+        className: getInputStyles(
+          isDanger,
+          cn(
+            "flex items-center justify-between cursor-pointer select-none",
+            isOpen && "border-gray08",
+            // 열려있을 때 테두리 #3A414C 고정 (디자인 스펙)
+            className
+          )
+        ),
+        onClick: (e) => {
+          if (isOpen) {
+            e.currentTarget.blur();
+          }
+          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)(
+            IconChevronDownXS,
+            {
+              className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
+              stroke: "currentColor"
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime21.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"
+          // 항목이 너무 많으면 스크롤 생성 (디자인 스펙: 그림자 없음)
+        ),
+        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          SelectBoxOption,
+          {
+            label: option,
+            onClick: () => {
+              onChange(option);
+              setIsOpen(false);
+            }
+          },
+          option
+        ))
+      }
+    )
+  ] }) });
+};
+
+// src/components/TextButton/TextButton.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var TextButton = ({
+  children,
+  icon,
+  iconPosition = "left",
+  alert = false,
+  underline = true,
+  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 classes = cn(
+    "inline-flex w-fit items-center gap-1 px-1 -mx-1",
+    "text-caption-book",
+    alert ? "text-danger" : "text-secondary",
+    "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_runtime22.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 });
+};
+
+// src/components/Dropdown/Dropdown.tsx
+var import_react4 = require("react");
+var import_jsx_runtime23 = 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_runtime23.jsxs)("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)("p", { children: selectedLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            IconChevronDownXS,
+            {
+              className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
+              stroke: "currentColor"
+            }
+          )
+        ]
+      }
+    ),
+    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)(
+      SelectBoxOption,
+      {
+        label,
+        onClick: () => {
+          setSelectedLabel(label);
+          setIsOpen(false);
+        },
+        className: "w-44 h-11 justify-center"
+      },
+      label
+    )) })
+  ] });
+};
+
+// src/components/ListView/List.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function List({
+  className,
+  label1,
+  label2,
+  label2OnClick,
+  label3,
+  disabled = false,
+  selected = false,
+  onClick,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.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_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_runtime24.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_runtime24.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 ModalBase = ({ isVisible, header, children, className }) => {
+  if (!isVisible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("fixed inset-0 z-50 pointer-events-auto"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "div",
+    {
+      className: cn("fixed inset-0 z-1001 flex items-center justify-center pointer-events-auto"),
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
+            children
+          ]
+        }
+      )
+    }
+  ) });
+};
+var Contents = ({ children, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.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_runtime26 = require("react/jsx-runtime");
+var ModalText = ({ children, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.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_runtime27 = require("react/jsx-runtime");
 var CategorySegment = ({
   selected = false,
   label,
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       className: cn(
@@ -240,7 +1038,7 @@ var CategorySegment = ({
 };
 
 // src/components/createPost/CategorySegmentedControl.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime28 = 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 +1052,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_runtime28.jsxs)("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
         className: cn(
@@ -268,7 +1066,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_runtime28.jsx)(
       CategorySegment,
       {
         label,
@@ -281,9 +1079,9 @@ var CategorySegmentedControl = ({
 };
 
 // src/components/createPost/TitleInput.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var TitleInput = ({ title, onChange, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "input",
     {
       type: "text",
@@ -303,9 +1101,9 @@ var TitleInput = ({ title, onChange, className }) => {
 };
 
 // src/components/notice/NoticeBadge.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var NoticeBadge = ({ variable, className, onClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "button",
     {
       type: "button",
@@ -326,7 +1124,7 @@ var NoticeBadge = ({ variable, className, onClick }) => {
 };
 
 // src/components/notice/NoticeBar.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var NoticeBar = ({
   variable = "default",
   badgeVariable,
@@ -335,7 +1133,7 @@ var NoticeBar = ({
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "div",
     {
       className: cn(
@@ -347,20 +1145,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_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_runtime8.jsx)("p", { className: "text-body3-book text-tertiary", children: date })
+        /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime32 = require("react/jsx-runtime");
 var SearchBar = ({ value, onChange, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "label",
     {
       className: cn(
@@ -371,8 +1169,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_runtime32.jsx)(IconSearch, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           "input",
           {
             type: "text",
@@ -391,15 +1189,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 +1219,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_runtime33 = require("react/jsx-runtime");
 var printColorBgClass = {
   Plotter: "bg-print-plotter",
   Printer: "bg-print-printer",
@@ -432,7 +1230,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 +1263,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_runtime33.jsxs)("div", { ref, className: cn("w-full border-r border-gray02 bg-white", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         Stepper,
         {
           step,
@@ -477,8 +1275,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_runtime33.jsxs)("div", { className: "flex flex-col divide-y divide-gray02", children: [
+        radioToggleList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           RadioToggleItem,
           {
             ...item,
@@ -487,29 +1285,22 @@ var SideRadioAccordion = (0, import_react2.forwardRef)(
           },
           itemKey(item)
         )),
-        quantityLimitLabel && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          TextButton,
-          {
-            label: quantityLimitLabel,
-            onClick: onClickQuantityLimit,
-            className: "mt-2"
-          }
-        )
+        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 }) })
       ] })
     ] });
   }
 );
 var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
-  const label = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
+  const label = /* @__PURE__ */ (0, import_jsx_runtime33.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";
+  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_runtime10.jsx)("div", { className: cn(base, className), children: label });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn(base, className), children: label });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "button",
     {
       type: "button",
@@ -517,7 +1308,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_runtime33.jsx)(
           "img",
           {
             src: ChevronDown_default,
@@ -543,30 +1334,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_runtime10.jsxs)("div", { className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "button",
       {
         type: "button",
         onClick: onSelect,
         style,
         className: cn(
-          "w-full flex items-center gap-1.5 px-3 py-2.5",
-          "text-body2-regular text-primary text-left cursor-pointer",
+          "w-full flex items-center gap-1.5 p-3",
+          "text-body1-regular text-secondary text-left cursor-pointer",
           rowBg,
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Radio, { selected: open }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Radio, { selected: open }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.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_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 gap-1", children: badges.map((badge) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Badge, { label: badge }, badge)) }),
+      labelTextButton && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        TextButton2,
         {
           label: labelTextButton,
           onClick: onClickTextButton,
@@ -578,17 +1369,17 @@ var RadioToggleItem = ({
   ] });
 };
 var Radio = ({ selected = false, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "img",
     {
       src: selected ? RadioSelected_default : RadioUnselected_default,
       alt: "",
-      className: cn("w-4 h-4", className)
+      className: cn("w-6 h-6", 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_runtime33.jsxs)(
     "button",
     {
       type: "button",
@@ -601,14 +1392,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_runtime33.jsx)("img", { src: Exclamation_default, alt: "" }),
         label
       ]
     }
   );
 };
 var Badge = ({ label, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
     {
       className: cn(
@@ -622,7 +1413,7 @@ var Badge = ({ label, className }) => {
 };
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Tag = ({
   className,
   children,
@@ -632,7 +1423,7 @@ var Tag = ({
   onClick,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "button",
     {
       className: cn(
@@ -651,16 +1442,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_runtime34.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,64 +1484,73 @@ var formatWeekRange = (weekStart) => {
 };
 
 // src/components/Timetable/WeekNavigation.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime35 = 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_runtime35.jsxs)(
       "div",
       {
         ref,
         className: cn(
-          "flex items-center justify-between",
-          "w-full h-11 px-3",
-          "bg-white border border-gray02",
-          "text-body2-regular text-primary",
+          "flex items-stretch justify-between",
+          "w-full h-12",
+          "bg-white border-b border-gray02",
+          "text-body1-medium text-secondary",
           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_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 })
         ]
       }
     );
   }
 );
 var ArrowButton = ({ direction, visible, onClick }) => {
+  const divider = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
   if (!visible) {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-6 h-6" });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-stretch", children: [
+      direction === "right" && divider,
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "w-[42px]" }),
+      direction === "left" && divider
+    ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: cn(
-        "flex items-center justify-center w-6 h-6",
-        "text-gray06 cursor-pointer",
-        "hover:bg-gray00 active:bg-gray01"
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        IconChevronDownXS,
-        {
-          className: direction === "left" ? "rotate-90" : "-rotate-90",
-          stroke: "currentColor"
-        }
-      )
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-stretch", children: [
+    direction === "right" && divider,
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick,
+        className: cn(
+          "flex w-[42px] items-center justify-center",
+          "text-gray06 cursor-pointer transition-colors",
+          "hover:bg-gray00 active:bg-gray01"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          IconChevronDownXS,
+          {
+            className: direction === "left" ? "rotate-90" : "-rotate-90",
+            stroke: "currentColor"
+          }
+        )
+      }
+    ),
+    direction === "left" && divider
+  ] });
 };
 
 // src/components/Timetable/Timetable.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var printColorHoverClass = {
   Plotter: "hover:bg-print-plotter",
   Printer: "hover:bg-print-printer",
@@ -760,7 +1560,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 +1573,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_runtime36.jsxs)("div", { ref, className: cn(fluid && "w-full", className), children: [
+    !hideWeekNavigation && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       WeekNavigation,
       {
         date: weekStart,
@@ -785,7 +1585,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_runtime36.jsx)("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       DailyTimetable,
       {
         date: day.date,
@@ -798,9 +1598,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_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)(
       TimeItem,
       {
         state: slot.state,
@@ -826,17 +1626,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_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
       onClick: clickable ? onClick : void 0,
       style,
       className: cn(
-        "h-18 flex items-center justify-center",
+        "h-18 flex items-center justify-center border-b border-gray02",
         fluid ? "w-full" : "w-18",
         "text-body1-medium text-center bg-white text-primary",
         state === "none" && "bg-gray00 text-transparent",
-        state === "selected" && "bg-black text-gray02 hover:cursor-pointer",
+        state === "selected" && "bg-black text-white hover:cursor-pointer",
         state === "disabled" && "bg-gray00 text-gray03",
         state === "default" && [
           "hover:cursor-pointer",
@@ -850,13 +1650,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_runtime37 = 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 +1664,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 +1703,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_runtime37.jsxs)("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       UpperPart,
       {
         logo,
@@ -915,7 +1715,7 @@ var TNB = (0, import_react5.forwardRef)(function TNB2({
         linkComponent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       LowerPart,
       {
         lowerPartItemList: currentLowerItemList,
@@ -926,11 +1726,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_runtime37.jsx)(
         Link,
         {
           href,
@@ -942,7 +1742,7 @@ var NavClickable = (0, import_react5.forwardRef)(function NavClickable2({ href,
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "a",
       {
         href,
@@ -954,7 +1754,7 @@ var NavClickable = (0, import_react5.forwardRef)(function NavClickable2({ href,
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "button",
     {
       type: "button",
@@ -976,33 +1776,50 @@ 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)(
-        UpperPartTab,
-        {
-          label: item.label,
-          href: item.href,
-          selected: item.label === selected,
-          linkComponent,
-          onClick: () => {
-            item.onClick?.();
-            onSelectItem(item.label);
-          }
-        },
-        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)(
-      NavIconButton,
-      {
-        ...icon,
-        linkComponent
-      },
-      icon.id ?? icon.src ?? icon.label ?? index
-    )) })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    "div",
+    {
+      className: cn(
+        "w-full min-h-13 flex items-stretch justify-between border-b border-gray02",
+        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)(
+                UpperPartTab,
+                {
+                  label: item.label,
+                  href: item.href,
+                  selected: item.label === selected,
+                  linkComponent,
+                  onClick: () => {
+                    item.onClick?.();
+                    onSelectItem(item.label);
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime37.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
+          ))
+        ] })
+      ]
+    }
+  );
 };
 var UpperPartTab = ({
   label,
@@ -1012,7 +1829,7 @@ var UpperPartTab = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     NavClickable,
     {
       href,
@@ -1020,19 +1837,22 @@ var UpperPartTab = ({
       linkComponent,
       current: selected,
       className: cn(
-        "inline-flex px-1 py-1.5 text-body2-regular cursor-pointer no-underline",
-        selected ? "text-strong font-medium underline underline-offset-4" : "text-quaternary hover:text-secondary",
+        "inline-flex min-h-13 flex-col items-center gap-2 pt-2.5 cursor-pointer no-underline",
+        "transition-colors hover:bg-gray00 active:bg-gray01",
         className
       ),
-      children: label
+      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") })
+      ]
     }
   );
 };
-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_runtime37.jsxs)(
       NavClickable,
       {
         ref: forwardedRef,
@@ -1042,15 +1862,15 @@ var NavIconButton = (0, import_react5.forwardRef)(
         current: selected,
         disabled: !interactive,
         className: cn(
-          "relative inline-flex h-8 min-w-8 items-center justify-center gap-1.5 rounded-full px-1.5",
+          "relative inline-flex h-13 min-w-13 items-center justify-center gap-1.5 px-3 transition-colors",
           interactive && "cursor-pointer",
           selected ? "bg-black text-white" : "bg-transparent hover:bg-gray00 active:bg-gray01",
           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_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)(
             "span",
             {
               "aria-hidden": badge === true,
@@ -1076,24 +1896,29 @@ var LowerPart = ({
   if (lowerPartItemList.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "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)(
-        LowerPartItemButton,
-        {
-          label: item.label,
-          href: item.href,
-          selected: item.label === selected,
-          linkComponent,
-          onClick: () => {
-            item.onClick?.();
-            onSelectItem(item.label);
-          }
-        },
-        item.id ?? item.label
-      ))
+      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)(
+            LowerPartItemButton,
+            {
+              label: item.label,
+              href: item.href,
+              selected: item.label === selected,
+              linkComponent,
+              onClick: () => {
+                item.onClick?.();
+                onSelectItem(item.label);
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+        ] }, item.id ?? item.label))
+      ]
     }
   );
 };
@@ -1105,7 +1930,7 @@ var LowerPartItemButton = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     NavClickable,
     {
       href,
@@ -1113,9 +1938,9 @@ var LowerPartItemButton = ({
       linkComponent,
       current: selected,
       className: cn(
-        "inline-flex px-1.5 py-1 text-caption-regular cursor-pointer no-underline",
-        "hover:bg-gray00 active:bg-gray01",
-        selected ? "text-strong font-medium" : "text-quaternary",
+        "inline-flex h-full items-center justify-center px-5 text-head3-medium cursor-pointer no-underline",
+        "transition-colors hover:bg-gray00 active:bg-gray01",
+        selected ? "text-strong" : "text-quaternary",
         className
       ),
       children: label
@@ -1124,14 +1949,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_runtime38 = 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 +1967,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_runtime38.jsx)(
     "div",
     {
       ref,
@@ -1156,7 +1981,7 @@ var Toast = (0, import_react6.forwardRef)(function Toast2({ message, open, durat
       "aria-live": "polite",
       className: cn(
         "w-full h-fit py-2.5 bg-gray06",
-        "font-pretendard text-white text-center font-semibold text-[17px]",
+        "font-pretendard text-white text-center font-semibold text-[17px] leading-[1.6]",
         "shadow-[0_2px_15px_rgba(0,0,0,0.18)]",
         controlled && "transition-opacity duration-300",
         controlled && (visible ? "opacity-100" : "opacity-0"),
@@ -1166,7 +1991,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_runtime38.jsx)(
     "div",
     {
       className: cn(
@@ -1180,18 +2005,49 @@ 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,
+  ColumnDescription,
+  ColumnDescriptionList,
+  ColumnLabel,
+  ColumnSubTitle,
+  ColumnText,
+  ColumnTextStyle,
+  Dropdown,
+  FormCheckBox,
+  FormColor,
+  FormFile,
+  FormNumber,
+  FormPassword,
+  FormSelectBox,
+  FormTel,
+  FormText,
+  FormTextArea,
+  IconCheck,
+  IconChevronDownXS,
+  IconCompass,
+  IconInfo,
+  List,
+  Modal,
+  ModalText,
+  ModalTextStyle,
+  MultiColumn,
   NoticeBadge,
   NoticeBar,
   SearchBar,
+  SelectBoxOption,
   SideRadioAccordion,
   TNB,
   Tag,
+  TextButton,
   Timetable,
   TitleInput,
   Toast,
-  WeekNavigation
+  WeekNavigation,
+  getInputStyles
 });
 //# sourceMappingURL=index.js.map