@hivcd-printshop/design-system 1.0.0 → 1.1.0

package/dist/index.mjs

@@ -27,8 +27,116 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/assets/svgs/Icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var IconChevronDownXS = ({
+  className,
+  stroke
+}) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M5 8.3335L10 13.3335L15 8.3335",
+          stroke: stroke || "#121212",
+          strokeWidth: "1.5",
+          strokeLinecap: "square"
+        }
+      )
+    }
+  );
+};
+var IconSearch = ({ className, stroke }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      width: "30",
+      height: "30",
+      viewBox: "0 0 30 30",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M20.1161 20.6888L24.1075 25.1791",
+            stroke: stroke || "black",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M13.9289 23.0361C18.9587 23.0361 23.0361 18.9587 23.0361 13.9289C23.0361 8.89918 18.9587 4.82178 13.9289 4.82178C8.89918 4.82178 4.82178 8.89918 4.82178 13.9289C4.82178 18.9587 8.89918 23.0361 13.9289 23.0361Z",
+            stroke: stroke || "black",
+            strokeWidth: "2"
+          }
+        )
+      ]
+    }
+  );
+};
+var IconGoBack = ({ className, stroke }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      width: "32",
+      height: "32",
+      viewBox: "0 0 32 32",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M28 16.0001L4 16.0001",
+            stroke: stroke || "black",
+            strokeWidth: "2",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { d: "M12 8L4 16L12 24", stroke: stroke || "black", strokeWidth: "2", strokeLinecap: "round" })
+      ]
+    }
+  );
+};
+
+// src/components/BackButton/BackButton.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var BackButton = ({ onClick, className }) => {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "w-14 h-full py-3",
+        "flex flex-col items-center",
+        "box-border border-r border-gray02",
+        "bg-white hover:bg-gray00 active:bg-gray01",
+        "cursor-pointer",
+        className
+      ),
+      children: /* @__PURE__ */ jsx2(IconGoBack, {})
+    }
+  );
+};
+
 // src/components/CTA/CTA.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var CTA = ({
   primary = true,
   variable = "default",
@@ -36,7 +144,7 @@ var CTA = ({
   onClick,
   className
 }) => {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     "button",
     {
       type: "button",
@@ -60,7 +168,753 @@ var CTA = ({
     }
   );
 };
+
+// src/components/createPost/CategorySegment.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CategorySegment = ({
+  selected = false,
+  label,
+  className,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn(
+        "w-fit h-8 px-3.5",
+        "flex items-center justify-center",
+        // 피그마랑 조금 다르게 적용하였음. 이게 더 효율적
+        "border-r border-gray02 cursor-pointer",
+        "text-body3-book text-strong",
+        selected ? "bg-black text-white" : "bg-white text-strong hover:bg-gray00 active:bg-gray01",
+        // default, hover, pressed 상태
+        className
+      ),
+      onClick,
+      children: label
+    }
+  );
+};
+
+// src/components/createPost/CategorySegmentedControl.tsx
+import { jsx as jsx5, jsxs as jsxs2 } 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"],
+  notice: ["\uC77C\uBC18 \uACF5\uC9C0", "\uAE34\uAE09 \uACF5\uC9C0"],
+  infoTag: ["\uAC00\uACF5", "\uC81C\uBCF8", "\uCD9C\uB825", "\uC2A4\uCE94", "\uAE30\uD0C0"]
+};
+var CategorySegmentedControl = ({
+  variable,
+  setSelectedCategory,
+  selectedCategory,
+  className
+}) => {
+  const segments = categorySegments[variable];
+  return /* @__PURE__ */ jsxs2("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: cn(
+          "w-fit h-8 px-3.5",
+          "flex items-center justify-center",
+          // 피그마랑 조금 다르게 적용하였음. 이게 더 효율적
+          "border-r border-gray02",
+          "text-body3-medium text-strong"
+        ),
+        children: variable === "infoTag" ? "\uD0DC\uADF8 \uC120\uD0DD" : "\uCE74\uD14C\uACE0\uB9AC \uC120\uD0DD"
+      }
+    ),
+    segments.map((label) => /* @__PURE__ */ jsx5(
+      CategorySegment,
+      {
+        label,
+        selected: selectedCategory === label,
+        onClick: () => setSelectedCategory(label)
+      },
+      label
+    ))
+  ] });
+};
+
+// src/components/createPost/TitleInput.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var TitleInput = ({ title, onChange, className }) => {
+  return /* @__PURE__ */ jsx6(
+    "input",
+    {
+      type: "text",
+      value: title,
+      onChange: (e) => onChange(e.target.value),
+      placeholder: "\uC81C\uBAA9\uC744 \uC785\uB825\uD558\uC138\uC694",
+      className: cn(
+        "w-full min-w-[200px] h-12 px-3",
+        // 피그마랑 매우 다름. focus되었을 때 테두리 중복 문제 등
+        "box-border border-b border-gray02 border-t border-t-white",
+        "focus:border-black focus:border focus:outline-none",
+        "text-head2-medium text-strong placeholder:text-gray03",
+        className
+      )
+    }
+  );
+};
+
+// src/components/notice/NoticeBadge.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var NoticeBadge = ({ variable, className, onClick }) => {
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        // 너비 피그마에서는 fit으로 69px로 되어있는데, 69px로 하면 글자가 잘려서 72px로 잡음. 컨펌 필요
+        "w-18 h-8 box-border px-2 py-1 text-center text-body3-book cursor-pointer",
+        /** Urgent */
+        `${variable === "urgent" ? "bg-black text-white" : ""}`,
+        /** Common */
+        `${variable === "common" ? "border border-gray03 text-strong" : ""}`,
+        //이거 배경 없는 거 맞겠지...?
+        className
+      ),
+      onClick,
+      children: variable === "urgent" ? "\uAE34\uAE09 \uACF5\uC9C0" : "\uC77C\uBC18 \uACF5\uC9C0"
+    }
+  );
+};
+
+// src/components/notice/NoticeBar.tsx
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+var NoticeBar = ({
+  variable = "default",
+  badgeVariable,
+  title,
+  date,
+  className,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "w-full min-w-200 h-15 px-4 py-3.5 flex items-center justify-between box-border border-b border-gray02 cursor-pointer",
+        variable === "default" && "bg-white hover:bg-gray00 active:bg-gray01",
+        variable === "hover" && "bg-gray00",
+        variable === "pressed" && "bg-gray01",
+        className
+      ),
+      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__ */ jsx8("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";
+var SearchBar = ({ value, onChange, className }) => {
+  return /* @__PURE__ */ jsxs4(
+    "label",
+    {
+      className: cn(
+        "w-full h-12 pl-4 pr-3",
+        "flex items-center gap-2",
+        "box-border border-b border-gray02 border-t border-t-white",
+        "focus-within:border-black focus-within:border focus-within:outline-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx9(IconSearch, {}),
+        /* @__PURE__ */ jsx9(
+          "input",
+          {
+            type: "text",
+            placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD574\uC8FC\uC138\uC694",
+            value,
+            onChange: (e) => onChange?.(e.target.value),
+            className: cn(
+              "w-full focus:outline-none",
+              "text-body1-book text-strong placeholder:text-quaternary"
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/SideRadioAccordion/SideRadioAccordion.tsx
+import { useState } from "react";
+
+// src/components/SideRadioAccordion/Exclamation.svg
+var Exclamation_default = "./Exclamation-IUYZYYC4.svg";
+
+// src/components/SideRadioAccordion/ChevronDown.svg
+var ChevronDown_default = "./ChevronDown-XSALXCW4.svg";
+
+// src/components/SideRadioAccordion/RadioSelected.svg
+var RadioSelected_default = "./RadioSelected-DOLVV7ZM.svg";
+
+// src/components/SideRadioAccordion/RadioUnselected.svg
+var RadioUnselected_default = "./RadioUnselected-QN74EU46.svg";
+
+// src/components/SideRadioAccordion/SideRadioAccordion.tsx
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var printColorBgClass = {
+  Plotter: "bg-print-plotter",
+  Printer: "bg-print-printer",
+  Riso: "bg-print-riso",
+  Fluorescent: "bg-print-fluorescent",
+  UV: "bg-print-uv",
+  "Seet Cutting": "bg-print-seet-cutting",
+  "Laser Cutting": "bg-print-laser-cutting"
+};
+var SideRadioAccordion = ({
+  step,
+  title,
+  radioToggleList,
+  defaultSelected,
+  onSelect,
+  quantityLimitLabel,
+  onClickQuantityLimit,
+  className
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [selected, setSelected] = useState(defaultSelected);
+  const handleSelect = (itemTitle) => {
+    setSelected(itemTitle);
+    onSelect?.(itemTitle);
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx10(
+      Stepper,
+      {
+        step,
+        title,
+        isOpen,
+        onClick: () => setIsOpen((prev) => !prev)
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
+      radioToggleList.map((item) => /* @__PURE__ */ jsx10(
+        RadioToggleItem,
+        {
+          ...item,
+          open: selected === item.title,
+          onSelect: () => handleSelect(item.title)
+        },
+        item.title
+      )),
+      quantityLimitLabel && /* @__PURE__ */ jsx10(
+        TextButton,
+        {
+          label: quantityLimitLabel,
+          onClick: onClickQuantityLimit,
+          className: "mt-2"
+        }
+      )
+    ] })
+  ] });
+};
+var Stepper = ({ step, title, isOpen, onClick, className }) => {
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "w-full flex items-center justify-between px-3 py-2.5",
+        "text-body1-medium text-strong text-left cursor-pointer",
+        "bg-white hover:bg-gray00 active:bg-gray01",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs5("span", { children: [
+          step,
+          " | ",
+          title
+        ] }),
+        /* @__PURE__ */ jsx10(
+          "img",
+          {
+            src: ChevronDown_default,
+            alt: "",
+            className: cn("transition-transform", isOpen && "rotate-180")
+          }
+        )
+      ]
+    }
+  );
+};
+var RadioToggleItem = ({
+  title,
+  content,
+  badges,
+  printColor,
+  labelTextButton,
+  onClickTextButton,
+  open,
+  onSelect,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs5("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        onClick: onSelect,
+        className: cn(
+          "w-full flex items-center gap-1.5 px-3 py-2.5",
+          "text-body2-regular text-primary text-left cursor-pointer",
+          open ? printColor ? printColorBgClass[printColor] : "bg-gray00" : "bg-white hover:bg-gray00"
+        ),
+        children: [
+          /* @__PURE__ */ jsx10(Radio, { selected: open }),
+          /* @__PURE__ */ jsx10("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,
+        {
+          label: labelTextButton,
+          onClick: onClickTextButton,
+          showIcon: true,
+          className: "self-end"
+        }
+      )
+    ] })
+  ] });
+};
+var Radio = ({ selected = false, className }) => {
+  return /* @__PURE__ */ jsx10(
+    "img",
+    {
+      src: selected ? RadioSelected_default : RadioUnselected_default,
+      alt: "",
+      className: cn("w-4 h-4", className)
+    }
+  );
+};
+var TextButton = ({ label, onClick, showIcon = false, className }) => {
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled: !onClick,
+      className: cn(
+        "w-fit h-fit px-1.5 py-0.5 flex items-center gap-1",
+        "text-primary text-caption-regular underline",
+        onClick && "cursor-pointer hover:bg-gray00 active:bg-gray01",
+        className
+      ),
+      children: [
+        showIcon && /* @__PURE__ */ jsx10("img", { src: Exclamation_default, alt: "" }),
+        label
+      ]
+    }
+  );
+};
+var Badge = ({ label, className }) => {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: cn(
+        "w-fit h-fit px-2 py-0.5 border border-gray02",
+        "text-tertiary text-caption-book",
+        className
+      ),
+      children: label
+    }
+  );
+};
+
+// src/components/Tag/Tag.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Tag = ({
+  className,
+  children,
+  selected = false,
+  disabled = false,
+  bgColor,
+  onClick,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx11(
+    "button",
+    {
+      className: cn(
+        "tag",
+        "w-fit h-8 px-2.5",
+        "text-primary text-body2-regular transition-colors",
+        "box-border border border-gray02",
+        "bg-white",
+        // bgColor && `bg-[${bgColor}] border-none`,
+        onClick && "cursor-pointer hover:bg-gray00 active:bg-gray01 cursor-pointer",
+        selected && "text-white bg-black border-black hover:bg-black active:bg-black",
+        "disabled:text-gray04 disabled:bg-gray02 disabled:border-gray02 disabled:cursor-not-allowed",
+        className
+      ),
+      onClick,
+      disabled,
+      style: bgColor ? { backgroundColor: bgColor, border: "none" } : void 0,
+      ...props,
+      children: /* @__PURE__ */ jsx11("span", { children })
+    }
+  );
+};
+
+// src/components/Timetable/dateUtils.ts
+var KOREAN_WEEKDAYS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
+var parseISODate = (date) => {
+  const [year, month, day] = date.split("-").map(Number);
+  return new Date(year, month - 1, day);
+};
+var toISODate = (d) => {
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+var addDays = (date, amount) => {
+  const d = parseISODate(date);
+  d.setDate(d.getDate() + amount);
+  return toISODate(d);
+};
+var formatDayLabel = (date) => {
+  const d = parseISODate(date);
+  return `${d.getMonth() + 1}\uC6D4 ${d.getDate()}\uC77C(${KOREAN_WEEKDAYS[d.getDay()]})`;
+};
+var formatMMDD = (date) => {
+  const d = parseISODate(date);
+  return `${String(d.getMonth() + 1).padStart(2, "0")}.${String(d.getDate()).padStart(2, "0")}`;
+};
+var formatWeekRange = (weekStart) => {
+  const weekEnd = addDays(weekStart, 4);
+  return `${formatMMDD(weekStart)} ~ ${formatMMDD(weekEnd)}`;
+};
+
+// src/components/Timetable/WeekNavigation.tsx
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var weekLabel = {
+  thisWeek: "\uC774\uBC88 \uC8FC",
+  nextWeek: "\uB2E4\uC74C \uC8FC",
+  twoWeeksLater: "\uB2E4\uB2E4\uC74C \uC8FC"
+};
+var WeekNavigation = ({
+  date,
+  week,
+  onPrevWeek,
+  onNextWeek,
+  className
+}) => {
+  const showPrev = week !== "thisWeek";
+  const showNext = week !== "twoWeeksLater";
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between",
+        "w-full h-11 px-3",
+        "bg-white border border-gray02",
+        "text-body2-regular text-primary",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx12(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
+        /* @__PURE__ */ jsxs6("span", { children: [
+          weekLabel[week],
+          " (",
+          formatWeekRange(date),
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx12(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
+      ]
+    }
+  );
+};
+var ArrowButton = ({ direction, visible, onClick }) => {
+  if (!visible) {
+    return /* @__PURE__ */ jsx12("span", { className: "w-6 h-6" });
+  }
+  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"
+        }
+      )
+    }
+  );
+};
+
+// src/components/Timetable/Timetable.tsx
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var printColorHoverClass = {
+  Plotter: "hover:bg-print-plotter",
+  Printer: "hover:bg-print-printer",
+  Riso: "hover:bg-print-riso",
+  Fluorescent: "hover:bg-print-fluorescent",
+  UV: "hover:bg-print-uv",
+  "Seet Cutting": "hover:bg-print-seet-cutting",
+  "Laser Cutting": "hover:bg-print-laser-cutting"
+};
+var Timetable = ({
+  weekStart,
+  week,
+  days,
+  onPrevWeek,
+  onNextWeek,
+  onSelectSlot,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs7("div", { className: cn(className), children: [
+    /* @__PURE__ */ jsx13(
+      WeekNavigation,
+      {
+        date: weekStart,
+        week,
+        onPrevWeek,
+        onNextWeek
+      }
+    ),
+    /* @__PURE__ */ jsx13("div", { className: "flex", children: days.map((day) => /* @__PURE__ */ jsx13(
+      DailyTimetable,
+      {
+        date: day.date,
+        slots: day.slots,
+        onSelectTime: onSelectSlot ? (time) => onSelectSlot(day.date, time) : void 0
+      },
+      day.date
+    )) })
+  ] });
+};
+var DailyTimetable = ({ date, slots, onSelectTime, className }) => {
+  return /* @__PURE__ */ jsxs7("div", { className: cn("flex flex-col", 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(
+      TimeItem,
+      {
+        state: slot.state,
+        label: slot.time,
+        printColor: slot.printColor,
+        onClick: onSelectTime ? () => onSelectTime(slot.time) : void 0
+      },
+      slot.time
+    ))
+  ] });
+};
+var TimeItem = ({ state, label, printColor, onClick, className }) => {
+  const clickable = (state === "default" || state === "selected") && !!onClick;
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      onClick: clickable ? onClick : void 0,
+      className: cn(
+        "w-18 h-18 flex items-center justify-center",
+        "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 === "disabled" && "bg-gray00 text-gray03",
+        state === "default" && [
+          "hover:cursor-pointer",
+          printColor ? printColorHoverClass[printColor] : "hover:bg-gray00"
+        ],
+        className
+      ),
+      children: label
+    }
+  );
+};
+
+// src/components/TNB/TNB.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var TNB = ({
+  logo,
+  upperPartItemList,
+  upperPartIconList,
+  defaultSelected,
+  onSelectItem,
+  className
+}) => {
+  const [selected, setSelected] = useState2(defaultSelected ?? upperPartItemList[0]?.label);
+  const [selectedLower, setSelectedLower] = useState2(
+    upperPartItemList.find((item) => item.label === selected)?.lowerPartItemList[0]?.label
+  );
+  const handleSelectUpper = (label) => {
+    setSelected(label);
+    setSelectedLower(
+      upperPartItemList.find((item) => item.label === label)?.lowerPartItemList[0]?.label
+    );
+    onSelectItem?.(label);
+  };
+  const currentLowerItemList = upperPartItemList.find((item) => item.label === selected)?.lowerPartItemList ?? [];
+  return /* @__PURE__ */ jsxs8("nav", { className: cn("w-full bg-white", className), children: [
+    /* @__PURE__ */ jsx14(
+      UpperPart,
+      {
+        logo,
+        upperPartItemList,
+        upperPartIconList,
+        selected,
+        onSelectItem: handleSelectUpper
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      LowerPart,
+      {
+        lowerPartItemList: currentLowerItemList,
+        selected: selectedLower,
+        onSelectItem: setSelectedLower
+      }
+    )
+  ] });
+};
+var UpperPart = ({
+  logo,
+  upperPartItemList,
+  upperPartIconList,
+  selected,
+  onSelectItem,
+  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 }),
+      /* @__PURE__ */ jsx14("div", { className: "flex items-center gap-4", children: upperPartItemList.map((item) => /* @__PURE__ */ jsx14(
+        UpperPartTab,
+        {
+          label: item.label,
+          selected: item.label === selected,
+          onClick: () => onSelectItem(item.label)
+        },
+        item.label
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx14("div", { className: "flex items-center gap-2", children: upperPartIconList.map((icon) => /* @__PURE__ */ jsx14(NavIconButton, { ...icon }, icon.src)) })
+  ] });
+};
+var UpperPartTab = ({ label, selected, onClick, className }) => {
+  return /* @__PURE__ */ jsx14(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "px-1 py-1.5 text-body2-regular cursor-pointer",
+        selected ? "text-strong font-medium underline underline-offset-4" : "text-quaternary hover:text-secondary",
+        className
+      ),
+      children: label
+    }
+  );
+};
+var NavIconButton = ({ src, alt, onClick, selected, className }) => {
+  return /* @__PURE__ */ jsx14(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled: !onClick,
+      className: cn(
+        "w-8 h-8 flex items-center justify-center rounded-full",
+        onClick && "cursor-pointer",
+        selected ? "bg-black" : "bg-transparent hover:bg-gray00 active:bg-gray01",
+        className
+      ),
+      children: /* @__PURE__ */ jsx14("img", { src, alt: alt ?? "", className: "w-5 h-5" })
+    }
+  );
+};
+var LowerPart = ({ lowerPartItemList, selected, onSelectItem, className }) => {
+  if (lowerPartItemList.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx14(
+    "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,
+          selected: item.label === selected,
+          onClick: () => {
+            item.onClick?.();
+            onSelectItem(item.label);
+          }
+        },
+        item.label
+      ))
+    }
+  );
+};
+var LowerPartItemButton = ({ label, selected, onClick, className }) => {
+  return /* @__PURE__ */ jsx14(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "px-1.5 py-1 text-caption-regular cursor-pointer",
+        "hover:bg-gray00 active:bg-gray01",
+        selected ? "text-strong font-medium" : "text-quaternary",
+        className
+      ),
+      children: label
+    }
+  );
+};
+
+// src/components/Toast/Toast.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Toast = ({ message, className }) => {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: cn(
+        `bg-gray06 w-dvw h-fit py-2.5`,
+        `font-pretendard text-white text-center font-semibold text-[17px]`,
+        `shadow-[0_2px_15px_rgba(0,0,0,0.18)]`,
+        className
+      ),
+      children: message
+    }
+  );
+};
 export {
-  CTA
+  BackButton,
+  CTA,
+  CategorySegment,
+  CategorySegmentedControl,
+  NoticeBadge,
+  NoticeBar,
+  SearchBar,
+  SideRadioAccordion,
+  TNB,
+  Tag,
+  Timetable,
+  TitleInput,
+  Toast,
+  WeekNavigation
 };
 //# sourceMappingURL=index.mjs.map