@hivcd-printshop/design-system 1.1.1 → 1.2.1

package/dist/index.mjs

@@ -54,6 +54,20 @@ var IconChevronDownXS = ({
     }
   );
 };
+var IconCheck = ({ className, stroke }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "13",
+      height: "13",
+      viewBox: "0 0 13 13",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx("path", { d: "M2.05566 7.0555L4.83344 9.8333L10.9446 3.72217", stroke: stroke || "#121212" })
+    }
+  );
+};
 var IconSearch = ({ className, stroke }) => {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -88,6 +102,32 @@ var IconSearch = ({ className, stroke }) => {
     }
   );
 };
+var IconInfo = ({ className, stroke }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.25", stroke: stroke || "#8b94a1", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M8 7.25V11.25",
+            stroke: stroke || "#8b94a1",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "5", r: "0.9", fill: stroke || "#8b94a1" })
+      ]
+    }
+  );
+};
 var IconGoBack = ({ className, stroke }) => {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -113,6 +153,28 @@ var IconGoBack = ({ className, stroke }) => {
     }
   );
 };
+var IconCompass = ({ className, fill }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ 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
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -174,15 +236,720 @@ var CTA = ({
   );
 };
 
-// src/components/createPost/CategorySegment.tsx
+// src/components/Column/MultiColumn.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
+var MultiColumnMain = ({ children, className }) => {
+  return /* @__PURE__ */ jsx4("div", { className: cn("flex flex-col w-full h-full", className), children });
+};
+var Columns = ({ children, className }) => {
+  return (
+    // flex 래퍼를 사용하고 하위 Column들이 flex-1을 가지게 하거나,
+    // grid를 사용하여 열을 나눌 수 있어. 여기서는 flex를 활용한 균등 분할 예시야.
+    /* @__PURE__ */ jsx4("div", { className: cn("flex w-full h-full divide-x divide-gray02", className), children })
+  );
+};
+var CTAs = ({ children, className }) => {
+  if (!children) return null;
+  return (
+    // CTA 버튼들을 중앙에 배치하는 예시 (우측 정렬이 필요하면 justify-end 사용)
+    /* @__PURE__ */ jsx4("div", { className: cn("flex flex-col w-full h-fit", className), children })
+  );
+};
+var MultiColumn = Object.assign(MultiColumnMain, {
+  Columns,
+  CTAs
+});
+
+// src/components/Column/Column.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var Column = ({ className, children, header }) => {
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col gap-5", "h-full w-full px-5 py-3", className), children: [
+    header && /* @__PURE__ */ jsx5("h1", { className: cn("text-body1-medium text-primary"), children: header }),
+    children
+  ] });
+};
+
+// src/components/Column/ColumnContentContainer.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ColumnContentContainer = ({ className, children }) => {
+  return /* @__PURE__ */ jsx6("div", { className: cn("flex flex-col gap-1.5 w-full h-fit", className), children });
+};
+
+// src/components/Column/ColumnLabel.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var ColumnLabel = ({ className, children, subLabel, htmlFor }) => {
+  return /* @__PURE__ */ jsxs3("label", { htmlFor, className: cn("flex gap-1.5 items-end", className), children: [
+    /* @__PURE__ */ jsx7("span", { className: cn("text-body2-regular text-tertiary"), children }),
+    subLabel && /* @__PURE__ */ jsx7("span", { className: cn("text-caption-book text-quaternary"), children: subLabel })
+  ] });
+};
+
+// src/components/Column/ColumnText.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var ColumnTextStyle = "text-body3-book text-strong";
+var ModalTextStyle = "text-body1-regular text-primary";
+var ColumnText = ({ className, alert = false, children, onClick }) => {
+  return /* @__PURE__ */ jsx8("div", { className: cn(ColumnTextStyle, alert && "text-danger", className), onClick, children: children ? children : "-" });
+};
+
+// src/components/Column/ColumnSubTitle.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var ColumnSubTitle = ({
+  className,
+  children,
+  action,
+  as: Tag2 = "h2"
+}) => {
+  return /* @__PURE__ */ jsxs4(Tag2, { className: cn("flex items-center justify-between gap-1.5", "w-full", className), children: [
+    /* @__PURE__ */ jsx9("span", { className: cn("text-body1-medium text-primary"), children }),
+    action && /* @__PURE__ */ jsx9("span", { className: "flex shrink-0 items-center", children: action })
+  ] });
+};
+
+// src/components/Column/ColumnDescription.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var ColumnDescription = ({
+  className,
+  children,
+  bullet = true
+}) => {
+  return /* @__PURE__ */ jsxs5("div", { className: cn("flex items-start gap-3", className), children: [
+    bullet && /* @__PURE__ */ jsx10("span", { className: "flex shrink-0 items-center py-1", children: /* @__PURE__ */ jsx10(IconCompass, { className: "size-4" }) }),
+    /* @__PURE__ */ jsx10("div", { className: "min-w-0 flex-1 whitespace-pre-line text-body3-book text-primary", children })
+  ] });
+};
+var ColumnDescriptionList = ({ className, children }) => {
+  return /* @__PURE__ */ jsx10("div", { className: cn("flex flex-col gap-4", className), children });
+};
+
+// src/components/Form/BasicFormField.tsx
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var BasicFormField = ({
+  children,
+  isDanger,
+  dangerText,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs6("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    children,
+    isDanger && dangerText && /* @__PURE__ */ jsx11("span", { className: "text-caption-book text-danger", children: dangerText })
+  ] });
+};
+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
+import { jsx as jsx12 } from "react/jsx-runtime";
+var FormText = ({ className, isDanger, dangerText, ...props }) => {
+  return /* @__PURE__ */ jsx12(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx12("input", { type: "text", className: getInputStyles(isDanger, className), ...props }) });
+};
+
+// src/components/Form/FormTextArea.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var FormTextArea = ({ className, isDanger, dangerText, ...props }) => {
+  return /* @__PURE__ */ jsx13(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx13(
+    "textarea",
+    {
+      className: getInputStyles(isDanger, "resize-none h-30 px-4 py-2.5 " + (className || "")),
+      ...props
+    }
+  ) });
+};
+
+// src/components/Form/FormNumber.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var FormNumber = ({ className, isDanger, dangerText, ...props }) => {
+  return /* @__PURE__ */ jsx14(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx14("input", { type: "number", className: getInputStyles(isDanger, className), ...props }) });
+};
+
+// src/components/Form/FormPassword.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var FormPassword = ({ className, isDanger, dangerText, ...props }) => {
+  return /* @__PURE__ */ jsx15(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx15("input", { type: "password", className: getInputStyles(isDanger, className), ...props }) });
+};
+
+// src/components/Form/FormTel.tsx
+import { jsx as jsx16 } from "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__ */ jsx16(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx16(
+    "input",
+    {
+      type: "tel",
+      className: getInputStyles(isDanger, className),
+      onChange: handlePhoneChange,
+      maxLength: 13,
+      ...props
+    }
+  ) });
+};
+
+// src/components/Form/FormColor.tsx
+import { useState } from "react";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+var FormColor = ({
+  className,
+  isDanger,
+  dangerText,
+  value,
+  defaultValue = "#000000",
+  onChange,
+  ...props
+}) => {
+  const [internalColor, setInternalColor] = useState(
+    value || defaultValue || "#000000"
+  );
+  const color = value !== void 0 ? value : internalColor;
+  const handleColorChange = (e) => {
+    setInternalColor(e.target.value);
+    onChange?.(e);
+  };
+  return /* @__PURE__ */ jsx17(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs7(
+    "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__ */ jsx17("div", { className: "w-6 h-6 shrink-0 overflow-hidden", style: { backgroundColor: color }, children: /* @__PURE__ */ jsx17(
+          "input",
+          {
+            type: "color",
+            value: color,
+            onChange: handleColorChange,
+            className: "absolute inset-0 w-full h-full opacity-0",
+            ...props
+          }
+        ) }),
+        /* @__PURE__ */ jsx17("span", { className: "text-primary text-body3-regular uppercase flex-1 select-none", children: color })
+      ]
+    }
+  ) });
+};
+
+// src/components/Form/FormFile.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+var FormFile = ({
+  className,
+  isDanger,
+  dangerText,
+  fileUrl,
+  filename,
+  onChange,
+  ...props
+}) => {
+  const [selectedFile, setSelectedFile] = useState2(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__ */ jsx18(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: getInputStyles(
+        isDanger,
+        // 디자인 스펙: 파일 전 상태는 우측 정렬("파일 첨부"만), 파일 후 상태는 좌우 배치
+        cn(
+          "flex items-center gap-2",
+          displayFileName ? "justify-between" : "justify-end",
+          className
+        )
+      ),
+      children: [
+        displayFileName && /* @__PURE__ */ jsx18(
+          "span",
+          {
+            onClick: handleDownload,
+            className: "text-body3-book text-primary truncate max-w-[200px] cursor-pointer",
+            title: `${displayFileName} \uB2E4\uC6B4\uB85C\uB4DC`,
+            children: displayFileName
+          }
+        ),
+        /* @__PURE__ */ jsxs8("label", { className: "shrink-0 px-1 -mx-1 cursor-pointer", children: [
+          /* @__PURE__ */ jsx18("div", { className: "text-primary text-caption-regular underline", children: displayFileName ? "\uB2E4\uC2DC \uCCA8\uBD80" : "\uD30C\uC77C \uCCA8\uBD80" }),
+          /* @__PURE__ */ jsx18("input", { type: "file", className: "hidden", onChange: handleFileChange, ...props })
+        ] })
+      ]
+    }
+  ) });
+};
+
+// src/components/Form/FormCheckBox.tsx
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+var FormCheckBox = ({
+  isChecked,
+  setIsChecked,
+  children,
+  className,
+  textStyle,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs9(
+    "label",
+    {
+      className: cn(
+        "group w-fit h-fit",
+        "flex items-center gap-1",
+        "cursor-pointer select-none",
+        // 💡 1. 텍스트 드래그 방지 추가
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx19(
+          "input",
+          {
+            type: "checkbox",
+            checked: isChecked,
+            onChange: (e) => setIsChecked(e.target.checked),
+            className: "sr-only peer",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx19(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center w-5 h-5 shrink-0 rounded transition-colors",
+              "group-hover:bg-gray00 group-active:bg-gray01"
+            ),
+            children: /* @__PURE__ */ jsx19(
+              "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__ */ jsx19(IconCheck, {})
+              }
+            )
+          }
+        ),
+        children && /* @__PURE__ */ jsx19("span", { className: cn("text-body3-book text-primary", textStyle), children })
+      ]
+    }
+  );
+};
+
+// src/components/Form/FormSelectBox.tsx
+import { useEffect, useRef, useState as useState3 } from "react";
+
+// src/components/Form/SelectBoxOption.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var SelectBoxOption = ({
+  label,
+  onClick,
+  // selectedLabel,
+  className
+}) => {
+  return /* @__PURE__ */ jsx20(
+    "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
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+var FormSelectBox = ({
+  options,
+  value,
+  onChange,
+  placeholder = "\uC120\uD0DD\uD574\uC8FC\uC138\uC694",
+  isDanger,
+  dangerText,
+  className
+}) => {
+  const [isOpen, setIsOpen] = useState3(false);
+  const containerRef = useRef(null);
+  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__ */ jsx21(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs10("div", { ref: containerRef, className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs10(
+      "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__ */ jsx21("span", { className: value ? "text-primary" : "text-quaternary", children: value || placeholder }),
+          /* @__PURE__ */ jsx21(
+            IconChevronDownXS,
+            {
+              className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
+              stroke: "currentColor"
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx21(
+      "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__ */ jsx21(
+          SelectBoxOption,
+          {
+            label: option,
+            onClick: () => {
+              onChange(option);
+              setIsOpen(false);
+            }
+          },
+          option
+        ))
+      }
+    )
+  ] }) });
+};
+
+// src/components/TextButton/TextButton.tsx
+import { Fragment, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+var TextButton = ({
+  children,
+  icon,
+  iconPosition = "left",
+  alert = false,
+  underline = true,
+  className,
+  ...props
+}) => {
+  const content = /* @__PURE__ */ jsxs11(Fragment, { children: [
+    icon && iconPosition === "left" && /* @__PURE__ */ jsx22("span", { className: "flex shrink-0 items-center", children: icon }),
+    /* @__PURE__ */ jsx22("span", { className: cn(underline && "underline underline-offset-2"), children }),
+    icon && iconPosition === "right" && /* @__PURE__ */ jsx22("span", { className: "flex shrink-0 items-center", children: icon })
+  ] });
+  const 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__ */ jsx22("a", { href, className: classes, ...rest, children: content });
+  }
+  const buttonProps = props;
+  return /* @__PURE__ */ jsx22("button", { type: "button", className: classes, ...buttonProps, children: content });
+};
+
+// src/components/Dropdown/Dropdown.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
+  const [isOpen, setIsOpen] = useState4(false);
+  const containerRef = useRef2(null);
+  useEffect2(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs12("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ jsxs12(
+      "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__ */ jsx23("p", { children: selectedLabel }),
+          /* @__PURE__ */ jsx23(
+            IconChevronDownXS,
+            {
+              className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
+              stroke: "currentColor"
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx23("div", { className: cn("absolute top-full right-0 z-10", "box-border border border-gray02"), children: labels.map((label) => /* @__PURE__ */ jsx23(
+      SelectBoxOption,
+      {
+        label,
+        onClick: () => {
+          setSelectedLabel(label);
+          setIsOpen(false);
+        },
+        className: "w-44 h-11 justify-center"
+      },
+      label
+    )) })
+  ] });
+};
+
+// src/components/ListView/List.tsx
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+function List({
+  className,
+  label1,
+  label2,
+  label2OnClick,
+  label3,
+  disabled = false,
+  selected = false,
+  onClick,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs13(
+    "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__ */ jsxs13("section", { className: cn("flex items-center gap-4"), children: [
+          /* @__PURE__ */ jsx24("label", { className: cn("text-body2-regular"), children: label1 ? label1 : "-" }),
+          /* @__PURE__ */ jsx24("div", { className: cn("flex items-center gap-2"), children })
+        ] }),
+        /* @__PURE__ */ jsx24(
+          "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__ */ jsx24("label", { className: cn("text-body3-regular text-right"), children: label3 ? label3 : "-" })
+      ]
+    }
+  );
+}
+
+// src/components/Modal/Modal.tsx
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+var ModalBase = ({ isVisible, header, children, className }) => {
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsx25("div", { className: cn("fixed inset-0 z-50 pointer-events-auto"), children: /* @__PURE__ */ jsx25(
+    "div",
+    {
+      className: cn("fixed inset-0 z-1001 flex items-center justify-center pointer-events-auto"),
+      children: /* @__PURE__ */ jsxs14(
+        "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__ */ jsx25("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
+            children
+          ]
+        }
+      )
+    }
+  ) });
+};
+var Contents = ({ children, className }) => {
+  return /* @__PURE__ */ jsx25(
+    "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__ */ jsx25(
+      "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
+import { jsx as jsx26 } from "react/jsx-runtime";
+var ModalText = ({ children, className }) => {
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center",
+        "mt-[-20px] mb-[-4px]",
+        ModalTextStyle,
+        "text-tertiary text-center",
+        className
+      ),
+      children
+    }
+  );
+};
+
+// src/components/createPost/CategorySegment.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
 var CategorySegment = ({
   selected = false,
   label,
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       className: cn(
@@ -202,7 +969,7 @@ var CategorySegment = ({
 };
 
 // src/components/createPost/CategorySegmentedControl.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var categorySegments = {
   info: ["\uACF5\uC6A9 \uBB3C\uD488", "\uC77C\uBC18 \uAE30\uC790\uC7AC", "\uD2B9\uC218 \uAE30\uC790\uC7AC"],
   archive: ["\uD504\uB9B0\uD2B8\uC2E4", "\uD64D\uC775\uC2DC\uB514"],
@@ -216,8 +983,8 @@ var CategorySegmentedControl = ({
   className
 }) => {
   const segments = categorySegments[variable];
-  return /* @__PURE__ */ jsxs2("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs15("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
+    /* @__PURE__ */ jsx28(
       "div",
       {
         className: cn(
@@ -230,7 +997,7 @@ var CategorySegmentedControl = ({
         children: variable === "infoTag" ? "\uD0DC\uADF8 \uC120\uD0DD" : "\uCE74\uD14C\uACE0\uB9AC \uC120\uD0DD"
       }
     ),
-    segments.map((label) => /* @__PURE__ */ jsx5(
+    segments.map((label) => /* @__PURE__ */ jsx28(
       CategorySegment,
       {
         label,
@@ -243,9 +1010,9 @@ var CategorySegmentedControl = ({
 };
 
 // src/components/createPost/TitleInput.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var TitleInput = ({ title, onChange, className }) => {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx29(
     "input",
     {
       type: "text",
@@ -265,9 +1032,9 @@ var TitleInput = ({ title, onChange, className }) => {
 };
 
 // src/components/notice/NoticeBadge.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var NoticeBadge = ({ variable, className, onClick }) => {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx30(
     "button",
     {
       type: "button",
@@ -288,7 +1055,7 @@ var NoticeBadge = ({ variable, className, onClick }) => {
 };
 
 // src/components/notice/NoticeBar.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 var NoticeBar = ({
   variable = "default",
   badgeVariable,
@@ -297,7 +1064,7 @@ var NoticeBar = ({
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: cn(
@@ -309,20 +1076,20 @@ var NoticeBar = ({
       ),
       onClick,
       children: [
-        /* @__PURE__ */ jsxs3("section", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx8(NoticeBadge, { variable: badgeVariable }),
-          /* @__PURE__ */ jsx8("h1", { className: "text-head1-medium text-strong", children: title })
+        /* @__PURE__ */ jsxs16("section", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx31(NoticeBadge, { variable: badgeVariable }),
+          /* @__PURE__ */ jsx31("h1", { className: "text-head1-medium text-strong", children: title })
         ] }),
-        /* @__PURE__ */ jsx8("p", { className: "text-body3-book text-tertiary", children: date })
+        /* @__PURE__ */ jsx31("p", { className: "text-body3-book text-tertiary", children: date })
       ]
     }
   );
 };
 
 // src/components/SearchBar/SearchBar.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 var SearchBar = ({ value, onChange, className }) => {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs17(
     "label",
     {
       className: cn(
@@ -333,8 +1100,8 @@ var SearchBar = ({ value, onChange, className }) => {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx9(IconSearch, {}),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx32(IconSearch, {}),
+        /* @__PURE__ */ jsx32(
           "input",
           {
             type: "text",
@@ -356,10 +1123,10 @@ var SearchBar = ({ value, onChange, className }) => {
 import { forwardRef } from "react";
 
 // src/lib/useControllableState.ts
-import { useCallback, useState } from "react";
+import { useCallback, useState as useState5 } from "react";
 function useControllableState(controlled, defaultValue) {
   const isControlled = controlled !== void 0;
-  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const [uncontrolled, setUncontrolled] = useState5(defaultValue);
   const value = isControlled ? controlled : uncontrolled;
   const setValue = useCallback(
     (next) => {
@@ -383,7 +1150,7 @@ var RadioSelected_default = "./RadioSelected-DOLVV7ZM.svg";
 var RadioUnselected_default = "./RadioUnselected-QN74EU46.svg";
 
 // src/components/SideRadioAccordion/SideRadioAccordion.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 var printColorBgClass = {
   Plotter: "bg-print-plotter",
   Printer: "bg-print-printer",
@@ -427,8 +1194,8 @@ var SideRadioAccordion = forwardRef(
       setIsOpen(next);
       onOpenChange?.(next);
     };
-    return /* @__PURE__ */ jsxs5("div", { ref, className: cn("w-full", className), children: [
-      /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsxs18("div", { ref, className: cn("w-full border-r border-gray02 bg-white", className), children: [
+      /* @__PURE__ */ jsx33(
         Stepper,
         {
           step,
@@ -439,8 +1206,8 @@ var SideRadioAccordion = forwardRef(
           className: cn(stickyHeader && "sticky top-0 z-10")
         }
       ),
-      expanded && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
-        radioToggleList.map((item) => /* @__PURE__ */ jsx10(
+      expanded && /* @__PURE__ */ jsxs18("div", { className: "flex flex-col divide-y divide-gray02", children: [
+        radioToggleList.map((item) => /* @__PURE__ */ jsx33(
           RadioToggleItem,
           {
             ...item,
@@ -449,29 +1216,22 @@ var SideRadioAccordion = forwardRef(
           },
           itemKey(item)
         )),
-        quantityLimitLabel && /* @__PURE__ */ jsx10(
-          TextButton,
-          {
-            label: quantityLimitLabel,
-            onClick: onClickQuantityLimit,
-            className: "mt-2"
-          }
-        )
+        quantityLimitLabel && /* @__PURE__ */ jsx33("div", { className: "px-5 py-4", children: /* @__PURE__ */ jsx33(TextButton2, { label: quantityLimitLabel, onClick: onClickQuantityLimit }) })
       ] })
     ] });
   }
 );
 var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
-  const label = /* @__PURE__ */ jsxs5("span", { children: [
+  const label = /* @__PURE__ */ jsxs18("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__ */ jsx10("div", { className: cn(base, className), children: label });
+    return /* @__PURE__ */ jsx33("div", { className: cn(base, className), children: label });
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs18(
     "button",
     {
       type: "button",
@@ -479,7 +1239,7 @@ var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
       className: cn(base, "cursor-pointer hover:bg-gray00 active:bg-gray01", className),
       children: [
         label,
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx33(
           "img",
           {
             src: ChevronDown_default,
@@ -505,30 +1265,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__ */ jsxs5("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs18("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs18(
       "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__ */ jsx10(Radio, { selected: open }),
-          /* @__PURE__ */ jsx10("span", { children: title })
+          /* @__PURE__ */ jsx33(Radio, { selected: open }),
+          /* @__PURE__ */ jsx33("span", { children: title })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
-      /* @__PURE__ */ jsx10("p", { className: "text-caption-regular text-secondary", children: content }),
-      badges && badges.length > 0 && /* @__PURE__ */ jsx10("div", { className: "flex gap-1", children: badges.map((badge) => /* @__PURE__ */ jsx10(Badge, { label: badge }, badge)) }),
-      labelTextButton && /* @__PURE__ */ jsx10(
-        TextButton,
+    open && /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
+      /* @__PURE__ */ jsx33("p", { className: "text-caption-regular text-secondary", children: content }),
+      badges && badges.length > 0 && /* @__PURE__ */ jsx33("div", { className: "flex gap-1", children: badges.map((badge) => /* @__PURE__ */ jsx33(Badge, { label: badge }, badge)) }),
+      labelTextButton && /* @__PURE__ */ jsx33(
+        TextButton2,
         {
           label: labelTextButton,
           onClick: onClickTextButton,
@@ -540,17 +1300,17 @@ var RadioToggleItem = ({
   ] });
 };
 var Radio = ({ selected = false, className }) => {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx33(
     "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__ */ jsxs5(
+var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
+  return /* @__PURE__ */ jsxs18(
     "button",
     {
       type: "button",
@@ -563,14 +1323,14 @@ var TextButton = ({ label, onClick, showIcon = false, className }) => {
         className
       ),
       children: [
-        showIcon && /* @__PURE__ */ jsx10("img", { src: Exclamation_default, alt: "" }),
+        showIcon && /* @__PURE__ */ jsx33("img", { src: Exclamation_default, alt: "" }),
         label
       ]
     }
   );
 };
 var Badge = ({ label, className }) => {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       className: cn(
@@ -584,7 +1344,7 @@ var Badge = ({ label, className }) => {
 };
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var Tag = ({
   className,
   children,
@@ -594,7 +1354,7 @@ var Tag = ({
   onClick,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx34(
     "button",
     {
       className: cn(
@@ -613,7 +1373,7 @@ var Tag = ({
       disabled,
       style: bgColor ? { backgroundColor: bgColor, border: "none" } : void 0,
       ...props,
-      children: /* @__PURE__ */ jsx11("span", { children })
+      children: /* @__PURE__ */ jsx34("span", { children })
     }
   );
 };
@@ -655,7 +1415,7 @@ var formatWeekRange = (weekStart) => {
 };
 
 // src/components/Timetable/WeekNavigation.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 var weekLabel = {
   thisWeek: "\uC774\uBC88 \uC8FC",
   nextWeek: "\uB2E4\uC74C \uC8FC",
@@ -666,53 +1426,62 @@ var WeekNavigation = forwardRef2(
     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__ */ jsxs6(
+    return /* @__PURE__ */ jsxs19(
       "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__ */ jsx12(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
-          /* @__PURE__ */ jsx12("span", { children: text }),
-          /* @__PURE__ */ jsx12(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
+          /* @__PURE__ */ jsx35(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
+          /* @__PURE__ */ jsx35("span", { className: "flex flex-1 items-center justify-center text-center", children: text }),
+          /* @__PURE__ */ jsx35(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
         ]
       }
     );
   }
 );
 var ArrowButton = ({ direction, visible, onClick }) => {
+  const divider = /* @__PURE__ */ jsx35("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
   if (!visible) {
-    return /* @__PURE__ */ jsx12("span", { className: "w-6 h-6" });
+    return /* @__PURE__ */ jsxs19("div", { className: "flex items-stretch", children: [
+      direction === "right" && divider,
+      /* @__PURE__ */ jsx35("span", { className: "w-[42px]" }),
+      direction === "left" && divider
+    ] });
   }
-  return /* @__PURE__ */ jsx12(
-    "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__ */ jsx12(
-        IconChevronDownXS,
-        {
-          className: direction === "left" ? "rotate-90" : "-rotate-90",
-          stroke: "currentColor"
-        }
-      )
-    }
-  );
+  return /* @__PURE__ */ jsxs19("div", { className: "flex items-stretch", children: [
+    direction === "right" && divider,
+    /* @__PURE__ */ jsx35(
+      "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__ */ jsx35(
+          IconChevronDownXS,
+          {
+            className: direction === "left" ? "rotate-90" : "-rotate-90",
+            stroke: "currentColor"
+          }
+        )
+      }
+    ),
+    direction === "left" && divider
+  ] });
 };
 
 // src/components/Timetable/Timetable.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
 var printColorHoverClass = {
   Plotter: "hover:bg-print-plotter",
   Printer: "hover:bg-print-printer",
@@ -735,8 +1504,8 @@ var Timetable = forwardRef3(function Timetable2({
   canNextWeek,
   className
 }, ref) {
-  return /* @__PURE__ */ jsxs7("div", { ref, className: cn(fluid && "w-full", className), children: [
-    !hideWeekNavigation && /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs20("div", { ref, className: cn(fluid && "w-full", className), children: [
+    !hideWeekNavigation && /* @__PURE__ */ jsx36(
       WeekNavigation,
       {
         date: weekStart,
@@ -747,7 +1516,7 @@ var Timetable = forwardRef3(function Timetable2({
         onNextWeek
       }
     ),
-    /* @__PURE__ */ jsx13("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx36("div", { className: cn("flex", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ jsx36(
       DailyTimetable,
       {
         date: day.date,
@@ -760,9 +1529,9 @@ var Timetable = forwardRef3(function Timetable2({
   ] });
 });
 var DailyTimetable = ({ date, slots, fluid, onSelectTime, className }) => {
-  return /* @__PURE__ */ jsxs7("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
-    /* @__PURE__ */ jsx13("div", { className: "h-13 flex items-center justify-center text-body3-medium text-secondary", children: formatDayLabel(date) }),
-    slots.map((slot) => /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs20("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
+    /* @__PURE__ */ jsx36("div", { className: "h-12 flex items-center justify-center border-b border-gray02 text-body1-regular text-secondary", children: formatDayLabel(date) }),
+    slots.map((slot) => /* @__PURE__ */ jsx36(
       TimeItem,
       {
         state: slot.state,
@@ -788,17 +1557,17 @@ var TimeItem = ({
 }) => {
   const clickable = (state === "default" || state === "selected") && !!onClick;
   const style = state === "default" && color ? { "--tt-hover": color } : void 0;
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx36(
     "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",
@@ -813,14 +1582,15 @@ var TimeItem = ({
 
 // src/components/TNB/TNB.tsx
 import {
+  Fragment as Fragment2,
   forwardRef as forwardRef4,
   useCallback as useCallback2,
-  useState as useState2
+  useState as useState6
 } from "react";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
 function useControllableState2(controlled, defaultValue) {
   const isControlled = controlled !== void 0;
-  const [uncontrolled, setUncontrolled] = useState2(defaultValue);
+  const [uncontrolled, setUncontrolled] = useState6(defaultValue);
   const value = isControlled ? controlled : uncontrolled;
   const setValue = useCallback2(
     (next) => {
@@ -869,8 +1639,8 @@ var TNB = forwardRef4(function TNB2({
     setLowerValue(label);
     onSelectedLowerChange?.(label);
   };
-  return /* @__PURE__ */ jsxs8("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs21("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
+    /* @__PURE__ */ jsx37(
       UpperPart,
       {
         logo,
@@ -881,7 +1651,7 @@ var TNB = forwardRef4(function TNB2({
         linkComponent
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx37(
       LowerPart,
       {
         lowerPartItemList: currentLowerItemList,
@@ -896,7 +1666,7 @@ var NavClickable = forwardRef4(function NavClickable2({ href, onClick, linkCompo
   const ariaCurrent = current ? "page" : void 0;
   if (href && !disabled) {
     if (Link) {
-      return /* @__PURE__ */ jsx14(
+      return /* @__PURE__ */ jsx37(
         Link,
         {
           href,
@@ -908,7 +1678,7 @@ var NavClickable = forwardRef4(function NavClickable2({ href, onClick, linkCompo
         }
       );
     }
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx37(
       "a",
       {
         href,
@@ -920,7 +1690,7 @@ var NavClickable = forwardRef4(function NavClickable2({ href, onClick, linkCompo
       }
     );
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx37(
     "button",
     {
       type: "button",
@@ -942,33 +1712,50 @@ var UpperPart = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ jsxs8("div", { className: cn("w-full h-13 px-4 flex items-center justify-between", className), children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-6", children: [
-      /* @__PURE__ */ jsx14(NavIconButton, { ...logo, linkComponent }),
-      /* @__PURE__ */ jsx14("div", { className: "flex items-center gap-4", children: upperPartItemList.map((item) => /* @__PURE__ */ jsx14(
-        UpperPartTab,
-        {
-          label: item.label,
-          href: item.href,
-          selected: item.label === selected,
-          linkComponent,
-          onClick: () => {
-            item.onClick?.();
-            onSelectItem(item.label);
-          }
-        },
-        item.id ?? item.label
-      )) })
-    ] }),
-    /* @__PURE__ */ jsx14("div", { className: "flex items-center gap-2", children: upperPartIconList.map((icon, index) => /* @__PURE__ */ jsx14(
-      NavIconButton,
-      {
-        ...icon,
-        linkComponent
-      },
-      icon.id ?? icon.src ?? icon.label ?? index
-    )) })
-  ] });
+  return /* @__PURE__ */ jsxs21(
+    "div",
+    {
+      className: cn(
+        "w-full min-h-13 flex items-stretch justify-between border-b border-gray02",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs21("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ jsx37("div", { className: "flex w-14 shrink-0 items-center justify-center px-3", children: /* @__PURE__ */ jsx37(NavIconButton, { ...logo, linkComponent }) }),
+          /* @__PURE__ */ jsxs21("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+            upperPartItemList.map((item) => /* @__PURE__ */ jsxs21(Fragment2, { children: [
+              /* @__PURE__ */ jsx37(
+                UpperPartTab,
+                {
+                  label: item.label,
+                  href: item.href,
+                  selected: item.label === selected,
+                  linkComponent,
+                  onClick: () => {
+                    item.onClick?.();
+                    onSelectItem(item.label);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+            ] }, item.id ?? item.label))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs21("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+          upperPartIconList.map((icon, index) => /* @__PURE__ */ jsx37(
+            NavIconButton,
+            {
+              ...icon,
+              linkComponent
+            },
+            icon.id ?? icon.src ?? icon.label ?? index
+          ))
+        ] })
+      ]
+    }
+  );
 };
 var UpperPartTab = ({
   label,
@@ -978,7 +1765,7 @@ var UpperPartTab = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs21(
     NavClickable,
     {
       href,
@@ -986,11 +1773,14 @@ 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__ */ jsx37("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
+        /* @__PURE__ */ jsx37("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
+      ]
     }
   );
 };
@@ -998,7 +1788,7 @@ var NavIconButton = forwardRef4(
   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__ */ jsxs8(
+    return /* @__PURE__ */ jsxs21(
       NavClickable,
       {
         ref: forwardedRef,
@@ -1008,15 +1798,15 @@ var NavIconButton = forwardRef4(
         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__ */ jsx14("span", { className: "inline-flex h-5 w-5 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ jsx14("img", { src, alt: alt ?? label ?? "", className: "h-5 w-5" }) : null,
-          label ? /* @__PURE__ */ jsx14("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
-          showBadge ? /* @__PURE__ */ jsx14(
+          icon ? /* @__PURE__ */ jsx37("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ jsx37("img", { src, alt: alt ?? label ?? "", className: "h-6 w-6" }) : null,
+          label ? /* @__PURE__ */ jsx37("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
+          showBadge ? /* @__PURE__ */ jsx37(
             "span",
             {
               "aria-hidden": badge === true,
@@ -1042,24 +1832,29 @@ var LowerPart = ({
   if (lowerPartItemList.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
-      className: cn("w-full h-9 px-4 flex items-center gap-4 border-t border-gray02", className),
-      children: lowerPartItemList.map((item) => /* @__PURE__ */ jsx14(
-        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__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+        lowerPartItemList.map((item) => /* @__PURE__ */ jsxs21(Fragment2, { children: [
+          /* @__PURE__ */ jsx37(
+            LowerPartItemButton,
+            {
+              label: item.label,
+              href: item.href,
+              selected: item.label === selected,
+              linkComponent,
+              onClick: () => {
+                item.onClick?.();
+                onSelectItem(item.label);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+        ] }, item.id ?? item.label))
+      ]
     }
   );
 };
@@ -1071,7 +1866,7 @@ var LowerPartItemButton = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx37(
     NavClickable,
     {
       href,
@@ -1079,9 +1874,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
@@ -1090,14 +1885,14 @@ var LowerPartItemButton = ({
 };
 
 // src/components/Toast/Toast.tsx
-import { forwardRef as forwardRef5, useEffect, useState as useState3 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { forwardRef as forwardRef5, useEffect as useEffect3, useState as useState7 } from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var EXIT_MS = 300;
 var Toast = forwardRef5(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
   const controlled = open !== void 0;
-  const [mounted, setMounted] = useState3(!controlled || open);
-  const [visible, setVisible] = useState3(!controlled || open);
-  useEffect(() => {
+  const [mounted, setMounted] = useState7(!controlled || open);
+  const [visible, setVisible] = useState7(!controlled || open);
+  useEffect3(() => {
     if (!controlled) return;
     if (open) {
       setMounted(true);
@@ -1108,13 +1903,13 @@ var Toast = forwardRef5(function Toast2({ message, open, duration = 3e3, onClose
     const timer = setTimeout(() => setMounted(false), EXIT_MS);
     return () => clearTimeout(timer);
   }, [controlled, open]);
-  useEffect(() => {
+  useEffect3(() => {
     if (!controlled || !open || !duration) return;
     const timer = setTimeout(() => onClose?.(), duration);
     return () => clearTimeout(timer);
   }, [controlled, open, duration, onClose]);
   if (!mounted) return null;
-  const banner = /* @__PURE__ */ jsx15(
+  const banner = /* @__PURE__ */ jsx38(
     "div",
     {
       ref,
@@ -1122,7 +1917,7 @@ var Toast = forwardRef5(function Toast2({ message, open, duration = 3e3, onClose
       "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"),
@@ -1132,7 +1927,7 @@ var Toast = forwardRef5(function Toast2({ message, open, duration = 3e3, onClose
     }
   );
   if (position === "none") return banner;
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
       className: cn(
@@ -1145,18 +1940,49 @@ var Toast = forwardRef5(function Toast2({ message, open, duration = 3e3, onClose
 });
 export {
   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.mjs.map