@hivcd-printshop/design-system 1.3.1 → 1.3.3

package/dist/index.d.mts

@@ -424,6 +424,31 @@ interface SideRadioAccordionProps {
 }
 declare const SideRadioAccordion: react.ForwardRefExoticComponent<SideRadioAccordionProps & react.RefAttributes<HTMLDivElement>>;
 
+type TabSwitchItem = {
+    label: string;
+    /**
+     * 선택 상태를 식별할 값. 표시 텍스트(label)와 분리하고 싶을 때 사용한다.
+     * 생략하면 label이 식별자로 쓰인다.
+     */
+    value?: string;
+};
+interface TabSwitchProps {
+    items: TabSwitchItem[];
+    /** controlled: 현재 선택된 항목의 value(없으면 label). */
+    selected?: string;
+    /** uncontrolled 초기 선택값. `selected`를 함께 주면 무시된다. 기본은 첫 항목. */
+    defaultSelected?: string;
+    /** 선택이 바뀔 때 호출. 인자는 항목의 value(없으면 label). */
+    onSelect?: (value: string) => void;
+    className?: string;
+}
+/**
+ * 두 개 이상의 항목을 가로로 나열하고 선택된 항목 아래에 밑줄을 그리는 탭 전환 UI.
+ * 예: "나의 예약"의 "진행중인 예약" / "완료된 예약" 전환.
+ * (Figma "카테고리" 컴포넌트 — CategorySegmentedControl과는 별개의, 필터가 아닌 탭 전환용 컴포넌트.)
+ */
+declare const TabSwitch: react.ForwardRefExoticComponent<TabSwitchProps & react.RefAttributes<HTMLDivElement>>;
+
 type Week = "thisWeek" | "nextWeek" | "twoWeeksLater";
 interface WeekNavigationProps {
     /** 표시 중인 주의 월요일(ISO "YYYY-MM-DD"). 범위 라벨(~금요일)을 여기서 계산한다. */
@@ -577,4 +602,4 @@ interface ToastProps {
 }
 declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, type AccordionProps, BackButton, type BackButtonProps, BasicFormField, type BasicFormFieldProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, Column, ColumnContentContainer, type ColumnContentContainerProps, ColumnDescription, ColumnDescriptionList, type ColumnDescriptionListProps, type ColumnDescriptionProps, ColumnLabel, type ColumnLabelProps, type ColumnProps, ColumnSubTitle, type ColumnSubTitleProps, ColumnText, type ColumnTextProps, ColumnTextStyle, type DayColumn, Dropdown, type DropdownProps, FormCheckBox, type FormCheckBoxProps, FormColor, type FormColorProps, FormFile, type FormFileProps, FormNumber, type FormNumberProps, FormPassword, type FormPasswordProps, FormSelectBox, type FormSelectBoxProps, FormTel, type FormTelProps, FormText, FormTextArea, type FormTextAreaProps, type FormTextProps, IconCheck, IconChevronDownXS, IconClose, IconCompass, IconExclamation, IconInfo, IconRadioSelected, IconRadioUnselected, type LinkComponent, List, type ListProps, type LowerPartItem, Modal, type ModalProps, ModalText, type ModalTextProps, ModalTextStyle, MultiColumn, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SelectBoxOption, type SelectBoxOptionProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, TextButton, type TextButtonProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps, getInputStyles };
+export { Accordion, type AccordionProps, BackButton, type BackButtonProps, BasicFormField, type BasicFormFieldProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, Column, ColumnContentContainer, type ColumnContentContainerProps, ColumnDescription, ColumnDescriptionList, type ColumnDescriptionListProps, type ColumnDescriptionProps, ColumnLabel, type ColumnLabelProps, type ColumnProps, ColumnSubTitle, type ColumnSubTitleProps, ColumnText, type ColumnTextProps, ColumnTextStyle, type DayColumn, Dropdown, type DropdownProps, FormCheckBox, type FormCheckBoxProps, FormColor, type FormColorProps, FormFile, type FormFileProps, FormNumber, type FormNumberProps, FormPassword, type FormPasswordProps, FormSelectBox, type FormSelectBoxProps, FormTel, type FormTelProps, FormText, FormTextArea, type FormTextAreaProps, type FormTextProps, IconCheck, IconChevronDownXS, IconClose, IconCompass, IconExclamation, IconInfo, IconRadioSelected, IconRadioUnselected, type LinkComponent, List, type ListProps, type LowerPartItem, Modal, type ModalProps, ModalText, type ModalTextProps, ModalTextStyle, MultiColumn, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SelectBoxOption, type SelectBoxOptionProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, TabSwitch, type TabSwitchItem, type TabSwitchProps, Tag, type TagProps, TextButton, type TextButtonProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps, getInputStyles };

package/dist/index.d.ts

@@ -424,6 +424,31 @@ interface SideRadioAccordionProps {
 }
 declare const SideRadioAccordion: react.ForwardRefExoticComponent<SideRadioAccordionProps & react.RefAttributes<HTMLDivElement>>;
 
+type TabSwitchItem = {
+    label: string;
+    /**
+     * 선택 상태를 식별할 값. 표시 텍스트(label)와 분리하고 싶을 때 사용한다.
+     * 생략하면 label이 식별자로 쓰인다.
+     */
+    value?: string;
+};
+interface TabSwitchProps {
+    items: TabSwitchItem[];
+    /** controlled: 현재 선택된 항목의 value(없으면 label). */
+    selected?: string;
+    /** uncontrolled 초기 선택값. `selected`를 함께 주면 무시된다. 기본은 첫 항목. */
+    defaultSelected?: string;
+    /** 선택이 바뀔 때 호출. 인자는 항목의 value(없으면 label). */
+    onSelect?: (value: string) => void;
+    className?: string;
+}
+/**
+ * 두 개 이상의 항목을 가로로 나열하고 선택된 항목 아래에 밑줄을 그리는 탭 전환 UI.
+ * 예: "나의 예약"의 "진행중인 예약" / "완료된 예약" 전환.
+ * (Figma "카테고리" 컴포넌트 — CategorySegmentedControl과는 별개의, 필터가 아닌 탭 전환용 컴포넌트.)
+ */
+declare const TabSwitch: react.ForwardRefExoticComponent<TabSwitchProps & react.RefAttributes<HTMLDivElement>>;
+
 type Week = "thisWeek" | "nextWeek" | "twoWeeksLater";
 interface WeekNavigationProps {
     /** 표시 중인 주의 월요일(ISO "YYYY-MM-DD"). 범위 라벨(~금요일)을 여기서 계산한다. */
@@ -577,4 +602,4 @@ interface ToastProps {
 }
 declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
 
-export { Accordion, type AccordionProps, BackButton, type BackButtonProps, BasicFormField, type BasicFormFieldProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, Column, ColumnContentContainer, type ColumnContentContainerProps, ColumnDescription, ColumnDescriptionList, type ColumnDescriptionListProps, type ColumnDescriptionProps, ColumnLabel, type ColumnLabelProps, type ColumnProps, ColumnSubTitle, type ColumnSubTitleProps, ColumnText, type ColumnTextProps, ColumnTextStyle, type DayColumn, Dropdown, type DropdownProps, FormCheckBox, type FormCheckBoxProps, FormColor, type FormColorProps, FormFile, type FormFileProps, FormNumber, type FormNumberProps, FormPassword, type FormPasswordProps, FormSelectBox, type FormSelectBoxProps, FormTel, type FormTelProps, FormText, FormTextArea, type FormTextAreaProps, type FormTextProps, IconCheck, IconChevronDownXS, IconClose, IconCompass, IconExclamation, IconInfo, IconRadioSelected, IconRadioUnselected, type LinkComponent, List, type ListProps, type LowerPartItem, Modal, type ModalProps, ModalText, type ModalTextProps, ModalTextStyle, MultiColumn, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SelectBoxOption, type SelectBoxOptionProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, TextButton, type TextButtonProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps, getInputStyles };
+export { Accordion, type AccordionProps, BackButton, type BackButtonProps, BasicFormField, type BasicFormFieldProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, Column, ColumnContentContainer, type ColumnContentContainerProps, ColumnDescription, ColumnDescriptionList, type ColumnDescriptionListProps, type ColumnDescriptionProps, ColumnLabel, type ColumnLabelProps, type ColumnProps, ColumnSubTitle, type ColumnSubTitleProps, ColumnText, type ColumnTextProps, ColumnTextStyle, type DayColumn, Dropdown, type DropdownProps, FormCheckBox, type FormCheckBoxProps, FormColor, type FormColorProps, FormFile, type FormFileProps, FormNumber, type FormNumberProps, FormPassword, type FormPasswordProps, FormSelectBox, type FormSelectBoxProps, FormTel, type FormTelProps, FormText, FormTextArea, type FormTextAreaProps, type FormTextProps, IconCheck, IconChevronDownXS, IconClose, IconCompass, IconExclamation, IconInfo, IconRadioSelected, IconRadioUnselected, type LinkComponent, List, type ListProps, type LowerPartItem, Modal, type ModalProps, ModalText, type ModalTextProps, ModalTextStyle, MultiColumn, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SelectBoxOption, type SelectBoxOptionProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, TabSwitch, type TabSwitchItem, type TabSwitchProps, Tag, type TagProps, TextButton, type TextButtonProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps, getInputStyles };

package/dist/index.js

@@ -64,6 +64,7 @@ __export(index_exports, {
   SelectBoxOption: () => SelectBoxOption,
   SideRadioAccordion: () => SideRadioAccordion,
   TNB: () => TNB,
+  TabSwitch: () => TabSwitch,
   Tag: () => Tag,
   TextButton: () => TextButton,
   Timetable: () => Timetable,
@@ -1625,11 +1626,56 @@ var Tag = ({
   );
 };
 
+// src/components/TabSwitch/TabSwitch.tsx
+var import_react8 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var itemKey2 = (item) => item.value ?? item.label;
+var TabSwitch = (0, import_react8.forwardRef)(function TabSwitch2({ items, selected, defaultSelected, onSelect, className }, ref) {
+  const [selectedValue, setSelectedValue] = useControllableState(
+    selected,
+    defaultSelected ?? itemKey2(items[0])
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref, className: cn("w-full border-b border-gray02", className), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex items-stretch", children: items.map((item) => {
+    const key = itemKey2(item);
+    const isSelected = key === selectedValue;
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setSelectedValue(key);
+            onSelect?.(key);
+          },
+          className: cn(
+            "flex flex-col items-center pt-2.5 cursor-pointer",
+            isSelected ? "gap-2" : "pb-2.5"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              "span",
+              {
+                className: cn(
+                  "px-4 whitespace-nowrap",
+                  isSelected ? "text-body1-medium text-strong" : "text-body1-regular text-quaternary"
+                ),
+                children: item.label
+              }
+            ),
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "h-0.5 w-full bg-black" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+    ] }, key);
+  }) }) });
+});
+
 // src/components/Timetable/Timetable.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/Timetable/WeekNavigation.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/Timetable/dateUtils.ts
 var KOREAN_WEEKDAYS = ["\uC77C", "\uC6D4", "\uD654", "\uC218", "\uBAA9", "\uAE08", "\uD1A0"];
@@ -1662,18 +1708,18 @@ var formatWeekRange = (weekStart) => {
 };
 
 // src/components/Timetable/WeekNavigation.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var weekLabel = {
   thisWeek: "\uC774\uBC88 \uC8FC",
   nextWeek: "\uB2E4\uC74C \uC8FC",
   twoWeeksLater: "\uB2E4\uB2E4\uC74C \uC8FC"
 };
-var WeekNavigation = (0, import_react8.forwardRef)(
+var WeekNavigation = (0, import_react9.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_runtime36.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
       "div",
       {
         ref,
@@ -1685,22 +1731,22 @@ var WeekNavigation = (0, import_react8.forwardRef)(
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex flex-1 items-center justify-center text-center", children: text }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex flex-1 items-center justify-center text-center", children: text }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
         ]
       }
     );
   }
 );
 var ArrowButton = ({ direction, visible, onClick }) => {
-  const divider = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
+  const divider = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
   if (!visible) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": true, className: "w-[43px]" });
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-[43px]" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-stretch", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-stretch", children: [
     direction === "right" && divider,
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "button",
       {
         type: "button",
@@ -1710,7 +1756,7 @@ var ArrowButton = ({ direction, visible, onClick }) => {
           "text-gray06 cursor-pointer transition-colors",
           "hover:bg-gray00 active:bg-gray01"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           IconChevronDownXS,
           {
             className: direction === "left" ? "rotate-90" : "-rotate-90",
@@ -1724,7 +1770,7 @@ var ArrowButton = ({ direction, visible, onClick }) => {
 };
 
 // src/components/Timetable/Timetable.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var printColorHoverClass = {
   Plotter: "hover:bg-print-plotter",
   Printer: "hover:bg-print-printer",
@@ -1734,7 +1780,7 @@ var printColorHoverClass = {
   "Seet Cutting": "hover:bg-print-seet-cutting",
   "Laser Cutting": "hover:bg-print-laser-cutting"
 };
-var Timetable = (0, import_react9.forwardRef)(function Timetable2({
+var Timetable = (0, import_react10.forwardRef)(function Timetable2({
   weekStart,
   week,
   days,
@@ -1747,8 +1793,8 @@ var Timetable = (0, import_react9.forwardRef)(function Timetable2({
   canNextWeek,
   className
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ref, className: cn(fluid && "w-full", className), children: [
-    !hideWeekNavigation && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ref, className: cn(fluid && "w-full", className), children: [
+    !hideWeekNavigation && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       WeekNavigation,
       {
         date: weekStart,
@@ -1759,7 +1805,7 @@ var Timetable = (0, import_react9.forwardRef)(function Timetable2({
         onNextWeek
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cn("flex divide-x divide-gray02", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cn("flex divide-x divide-gray02", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       DailyTimetable,
       {
         date: day.date,
@@ -1772,21 +1818,26 @@ var Timetable = (0, import_react9.forwardRef)(function Timetable2({
   ] });
 });
 var DailyTimetable = ({ date, slots, fluid, onSelectTime, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-12 flex items-center justify-center border-b border-gray02 text-body1-regular text-secondary", children: formatDayLabel(date) }),
-    slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-      TimeItem,
-      {
-        state: slot.state,
-        label: slot.time,
-        printColor: slot.printColor,
-        color: slot.color,
-        fluid,
-        className: slot.className,
-        onClick: onSelectTime ? () => onSelectTime(slot.time) : void 0
-      },
-      slot.time
-    ))
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.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, index) => {
+      const prevState = index > 0 ? slots[index - 1].state : void 0;
+      const withTopBorder = slot.state !== "none" && prevState === "none";
+      return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        TimeItem,
+        {
+          state: slot.state,
+          label: slot.time,
+          printColor: slot.printColor,
+          color: slot.color,
+          fluid,
+          withTopBorder,
+          className: slot.className,
+          onClick: onSelectTime ? () => onSelectTime(slot.time) : void 0
+        },
+        slot.time
+      );
+    })
   ] });
 };
 var TimeItem = ({
@@ -1795,12 +1846,13 @@ var TimeItem = ({
   printColor,
   color,
   fluid,
+  withTopBorder = false,
   onClick,
   className
 }) => {
   const clickable = (state === "default" || state === "selected") && !!onClick;
   const style = state === "default" && color ? { "--tt-hover": color } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "div",
     {
       onClick: clickable ? onClick : void 0,
@@ -1811,6 +1863,7 @@ var TimeItem = ({
         "text-body1-medium text-center bg-white text-primary",
         // "none"(일정 없음)은 구분선을 그리지 않아 연속된 빈 칸이 하나의 덩어리로 보이게 한다.
         state === "none" ? "bg-gray00 text-transparent" : "border-b border-gray02",
+        withTopBorder && "border-t border-gray02",
         state === "selected" && "bg-black text-white hover:cursor-pointer",
         state === "disabled" && "bg-gray00 text-gray03",
         state === "default" && [
@@ -1825,13 +1878,13 @@ var TimeItem = ({
 };
 
 // src/components/TNB/TNB.tsx
-var import_react10 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function useControllableState2(controlled, defaultValue) {
   const isControlled = controlled !== void 0;
-  const [uncontrolled, setUncontrolled] = (0, import_react10.useState)(defaultValue);
+  const [uncontrolled, setUncontrolled] = (0, import_react11.useState)(defaultValue);
   const value = isControlled ? controlled : uncontrolled;
-  const setValue = (0, import_react10.useCallback)(
+  const setValue = (0, import_react11.useCallback)(
     (next) => {
       if (!isControlled) setUncontrolled(next);
     },
@@ -1839,7 +1892,7 @@ function useControllableState2(controlled, defaultValue) {
   );
   return [value, setValue, isControlled];
 }
-var TNB = (0, import_react10.forwardRef)(function TNB2({
+var TNB = (0, import_react11.forwardRef)(function TNB2({
   logo,
   upperPartItemList,
   upperPartIconList,
@@ -1878,8 +1931,8 @@ var TNB = (0, import_react10.forwardRef)(function TNB2({
     setLowerValue(label);
     onSelectedLowerChange?.(label);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       UpperPart,
       {
         logo,
@@ -1890,7 +1943,7 @@ var TNB = (0, import_react10.forwardRef)(function TNB2({
         linkComponent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       LowerPart,
       {
         lowerPartItemList: currentLowerItemList,
@@ -1901,11 +1954,11 @@ var TNB = (0, import_react10.forwardRef)(function TNB2({
     )
   ] });
 });
-var NavClickable = (0, import_react10.forwardRef)(function NavClickable2({ href, onClick, linkComponent: Link, current, disabled, className, children }, ref) {
+var NavClickable = (0, import_react11.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_runtime38.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Link,
         {
           href,
@@ -1917,7 +1970,7 @@ var NavClickable = (0, import_react10.forwardRef)(function NavClickable2({ href,
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "a",
       {
         href,
@@ -1929,7 +1982,7 @@ var NavClickable = (0, import_react10.forwardRef)(function NavClickable2({ href,
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "button",
     {
       type: "button",
@@ -1951,7 +2004,7 @@ var UpperPart = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "div",
     {
       className: cn(
@@ -1959,12 +2012,12 @@ var UpperPart = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-stretch", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex w-14 shrink-0 items-center justify-center px-3", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NavIconButton, { ...logo, linkComponent }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-stretch", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-            upperPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react10.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex w-14 shrink-0 items-center justify-center px-3", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(NavIconButton, { ...logo, linkComponent }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+            upperPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react11.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                 UpperPartTab,
                 {
                   label: item.label,
@@ -1977,15 +2030,15 @@ var UpperPart = ({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
             ] }, item.id ?? item.label))
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-stretch", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-          upperPartIconList.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react10.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(NavIconButton, { ...icon, linkComponent }),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+          upperPartIconList.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react11.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(NavIconButton, { ...icon, linkComponent }),
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
           ] }, icon.id ?? icon.src ?? icon.label ?? index))
         ] })
       ]
@@ -2000,7 +2053,7 @@ var UpperPartTab = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     NavClickable,
     {
       href,
@@ -2015,17 +2068,17 @@ var UpperPartTab = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
       ]
     }
   );
 };
-var NavIconButton = (0, import_react10.forwardRef)(
+var NavIconButton = (0, import_react11.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_runtime38.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       NavClickable,
       {
         ref: forwardedRef,
@@ -2041,9 +2094,9 @@ var NavIconButton = (0, import_react10.forwardRef)(
           className
         ),
         children: [
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { src, alt: alt ?? label ?? "", className: "h-6 w-6" }) : null,
-          label ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
-          showBadge ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src, alt: alt ?? label ?? "", className: "h-6 w-6" }) : null,
+          label ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
+          showBadge ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "span",
             {
               "aria-hidden": badge === true,
@@ -2069,14 +2122,14 @@ var LowerPart = ({
   if (lowerPartItemList.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "div",
     {
       className: cn("w-full h-[42px] pl-14 flex items-stretch border-b border-gray02", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-        lowerPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react10.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+        lowerPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react11.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             LowerPartItemButton,
             {
               label: item.label,
@@ -2089,7 +2142,7 @@ var LowerPart = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
         ] }, item.id ?? item.label))
       ]
     }
@@ -2103,7 +2156,7 @@ var LowerPartItemButton = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     NavClickable,
     {
       href,
@@ -2122,14 +2175,14 @@ var LowerPartItemButton = ({
 };
 
 // src/components/Toast/Toast.tsx
-var import_react11 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var EXIT_MS = 300;
-var Toast = (0, import_react11.forwardRef)(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
+var Toast = (0, import_react12.forwardRef)(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
   const controlled = open !== void 0;
-  const [mounted, setMounted] = (0, import_react11.useState)(!controlled || open);
-  const [visible, setVisible] = (0, import_react11.useState)(!controlled || open);
-  (0, import_react11.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react12.useState)(!controlled || open);
+  const [visible, setVisible] = (0, import_react12.useState)(!controlled || open);
+  (0, import_react12.useEffect)(() => {
     if (!controlled) return;
     if (open) {
       setMounted(true);
@@ -2140,13 +2193,13 @@ var Toast = (0, import_react11.forwardRef)(function Toast2({ message, open, dura
     const timer = setTimeout(() => setMounted(false), EXIT_MS);
     return () => clearTimeout(timer);
   }, [controlled, open]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.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_runtime39.jsx)(
+  const banner = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
       ref,
@@ -2164,7 +2217,7 @@ var Toast = (0, import_react11.forwardRef)(function Toast2({ message, open, dura
     }
   );
   if (position === "none") return banner;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "div",
     {
       className: cn(
@@ -2220,6 +2273,7 @@ var Toast = (0, import_react11.forwardRef)(function Toast2({ message, open, dura
   SelectBoxOption,
   SideRadioAccordion,
   TNB,
+  TabSwitch,
   Tag,
   TextButton,
   Timetable,