@tipp/ui 2.3.33 → 2.3.35

package/dist/app/platform/report-card.js

@@ -1,54 +1,60 @@
 import {
   ReportCard
-} from "../../chunk-SNPAB3HJ.js";
+} from "../../chunk-DWBYAHIR.js";
 import "../../chunk-HBF6IIVZ.js";
 import "../../chunk-QDC3LFHS.js";
+import "../../chunk-OYM4XCHQ.js";
+import "../../chunk-YJ7ZFOYL.js";
+import "../../chunk-5ZITU5L7.js";
 import "../../chunk-5XYPLDI5.js";
 import "../../chunk-6NPTJBFE.js";
 import "../../chunk-LNPFV5BJ.js";
+import "../../chunk-MUPK4L3U.js";
+import "../../chunk-MUNMDHRF.js";
+import "../../chunk-TVDKGMBI.js";
 import "../../chunk-X2GMDZ7M.js";
 import "../../chunk-HYITAA4J.js";
 import "../../chunk-5H3YPCZK.js";
 import "../../chunk-FR2GDOU2.js";
 import "../../chunk-74DX4CU7.js";
-import "../../chunk-OYM4XCHQ.js";
-import "../../chunk-YJ7ZFOYL.js";
-import "../../chunk-5ZITU5L7.js";
+import "../../chunk-JIJLOKVN.js";
+import "../../chunk-F7LTJOOC.js";
+import "../../chunk-5AVBYDPB.js";
 import "../../chunk-365QMK4D.js";
 import "../../chunk-YO3BQW6S.js";
 import "../../chunk-6IVCARWS.js";
 import "../../chunk-6DJOIRMF.js";
 import "../../chunk-FPD73OHW.js";
-import "../../chunk-MUPK4L3U.js";
-import "../../chunk-MUNMDHRF.js";
-import "../../chunk-TVDKGMBI.js";
+import "../../chunk-EGEQY3KT.js";
+import "../../chunk-O3T3TM3V.js";
 import "../../chunk-XQOL7UBI.js";
 import "../../chunk-TULWX7D6.js";
 import "../../chunk-DHZVOXFM.js";
-import "../../chunk-JIJLOKVN.js";
-import "../../chunk-MFIOT62L.js";
-import "../../chunk-5AVBYDPB.js";
-import "../../chunk-D4U2MCJG.js";
+import "../../chunk-VTJZMOSP.js";
+import "../../chunk-B5CKZFDM.js";
+import "../../chunk-BESTU2AY.js";
+import "../../chunk-EEAHZCIK.js";
+import "../../chunk-645GPOW2.js";
+import "../../chunk-U7N2PWMO.js";
+import "../../chunk-XK6VEVOK.js";
+import "../../chunk-HF6GNDPV.js";
+import "../../chunk-SMLC2O3V.js";
 import "../../chunk-Y4U24VXI.js";
 import "../../chunk-3NUQAVE6.js";
 import "../../chunk-PT57HCAI.js";
 import "../../chunk-2DZ2Y3JI.js";
 import "../../chunk-ZOPYFDLO.js";
-import "../../chunk-EGEQY3KT.js";
-import "../../chunk-O3T3TM3V.js";
+import "../../chunk-B6XJN6EC.js";
+import "../../chunk-RP2RGCAW.js";
+import "../../chunk-MIMJ7LON.js";
 import "../../chunk-W7X7KSJP.js";
 import "../../chunk-VYCYVN3L.js";
 import "../../chunk-OHMOP5PV.js";
 import "../../chunk-NFDQJVFA.js";
 import "../../chunk-Q37G2GS6.js";
-import "../../chunk-VTJZMOSP.js";
-import "../../chunk-B5CKZFDM.js";
-import "../../chunk-BESTU2AY.js";
-import "../../chunk-EEAHZCIK.js";
-import "../../chunk-645GPOW2.js";
-import "../../chunk-U7N2PWMO.js";
-import "../../chunk-XK6VEVOK.js";
-import "../../chunk-HF6GNDPV.js";
+import "../../chunk-6SYFG6YY.js";
+import "../../chunk-K36TPMKL.js";
+import "../../chunk-U3BQT7ZO.js";
 import "../../chunk-YGL6SWKN.js";
 import "../../chunk-4Y5BEXVN.js";
 import "../../chunk-Z34HR7RE.js";
@@ -58,9 +64,6 @@ import "../../chunk-25HMMI7R.js";
 import "../../chunk-ZVDAEY5Q.js";
 import "../../chunk-LQY4RKWI.js";
 import "../../chunk-ZD7MNMED.js";
-import "../../chunk-B6XJN6EC.js";
-import "../../chunk-RP2RGCAW.js";
-import "../../chunk-MIMJ7LON.js";
 import "../../chunk-DLP4UUNG.js";
 import "../../chunk-VD7AQ7HK.js";
 import "../../chunk-ZQE7SP6P.js";
@@ -79,9 +82,6 @@ import "../../chunk-ZUYCXCPW.js";
 import "../../chunk-YVFNJE4E.js";
 import "../../chunk-J242TTFH.js";
 import "../../chunk-EAXUQEO5.js";
-import "../../chunk-6SYFG6YY.js";
-import "../../chunk-K36TPMKL.js";
-import "../../chunk-U3BQT7ZO.js";
 import "../../chunk-CRTRMMJ7.js";
 export {
   ReportCard

package/dist/app/platform/reservation-card.cjs

@@ -62,7 +62,7 @@ __export(reservation_card_exports, {
   ReservationCard: () => ReservationCard
 });
 module.exports = __toCommonJS(reservation_card_exports);
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_date_fns3 = require("date-fns");
 var import_locale2 = require("date-fns/locale");
 
@@ -472,8 +472,16 @@ var Content2 = (0, import_react11.forwardRef)((props, ref) => {
   );
 });
 Content2.displayName = "DropdownMenu.Content";
+var Trigger2 = (0, import_react11.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { asChild: _asChild } = _b, props = __objRest(_b, ["asChild"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes20.DropdownMenu.Trigger, __spreadValues({ ref }, props));
+  }
+);
+Trigger2.displayName = "DropdownMenu.Trigger";
 var DropdownMenu = __spreadProps(__spreadValues({}, import_themes20.DropdownMenu), {
-  Content: Content2
+  Content: Content2,
+  Trigger: Trigger2
 });
 
 // src/atoms/em.tsx
@@ -553,7 +561,7 @@ var Content3 = (0, import_react13.forwardRef)((props, ref) => {
   );
 });
 Content3.displayName = "Select.Content";
-var Trigger2 = (0, import_react13.forwardRef)(
+var Trigger3 = (0, import_react13.forwardRef)(
   (props, ref) => {
     const _a = props, { className } = _a, rest = __objRest(_a, ["className"]);
     const { error } = (0, import_react13.useContext)(SelectContext);
@@ -564,7 +572,7 @@ var Trigger2 = (0, import_react13.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes38.Select.Trigger, __spreadProps(__spreadValues({}, rest), { className: cls, ref }));
   }
 );
-Trigger2.displayName = "Select.Trigger";
+Trigger3.displayName = "Select.Trigger";
 function Root3(props) {
   const _a = props, { error } = _a, rest = __objRest(_a, ["error"]);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectContext.Provider, { value: { error }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes38.Select.Root, __spreadValues({}, rest)) });
@@ -572,7 +580,7 @@ function Root3(props) {
 Root3.displayName = "Select.Root";
 var Select = __spreadProps(__spreadValues({}, import_themes38.Select), {
   Root: Root3,
-  Trigger: Trigger2,
+  Trigger: Trigger3,
   Content: Content3
 });
 
@@ -2075,22 +2083,272 @@ var import_jsx_runtime96 = require("react/jsx-runtime");
 // src/molecules/dynamic-form-editor.tsx
 var import_jsx_runtime97 = require("react/jsx-runtime");
 
+// src/molecules/autocomplete-textfield.tsx
+var import_react50 = require("react");
+var import_themes58 = require("@radix-ui/themes");
+var import_jsx_runtime98 = require("react/jsx-runtime");
+var AutocompleteTextfield = (0, import_react50.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      options,
+      value: externalValue,
+      onChange,
+      onSelect,
+      placeholder,
+      emptyMessage = "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+      maxItems = 10,
+      slotLeft,
+      slotRight,
+      error
+    } = _b, rest = __objRest(_b, [
+      "options",
+      "value",
+      "onChange",
+      "onSelect",
+      "placeholder",
+      "emptyMessage",
+      "maxItems",
+      "slotLeft",
+      "slotRight",
+      "error"
+    ]);
+    const isControlled = externalValue !== void 0;
+    const [internalValue, setInternalValue] = (0, import_react50.useState)("");
+    const inputValue = isControlled ? externalValue : internalValue;
+    const [open, setOpen] = (0, import_react50.useState)(false);
+    const [highlightedIndex, setHighlightedIndex] = (0, import_react50.useState)(-1);
+    const inputRef = (0, import_react50.useRef)(null);
+    const listRef = (0, import_react50.useRef)(null);
+    const listboxId = (0, import_react50.useId)();
+    const justSelectedRef = (0, import_react50.useRef)(false);
+    const filtered = options.filter(
+      (opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase())
+    ).slice(0, maxItems);
+    const handleInputChange = (0, import_react50.useCallback)(
+      (e) => {
+        const next = e.target.value;
+        if (!isControlled) setInternalValue(next);
+        onChange == null ? void 0 : onChange(next);
+        const nextFiltered = options.filter((opt) => opt.label.toLowerCase().includes(next.toLowerCase())).slice(0, maxItems);
+        setOpen(nextFiltered.length > 0 || emptyMessage !== null);
+        setHighlightedIndex(-1);
+      },
+      [isControlled, onChange, options, maxItems, emptyMessage]
+    );
+    const handleSelect = (0, import_react50.useCallback)(
+      (option) => {
+        var _a2;
+        if (!isControlled) setInternalValue(option.label);
+        onChange == null ? void 0 : onChange(option.label);
+        onSelect == null ? void 0 : onSelect(option);
+        setOpen(false);
+        setHighlightedIndex(-1);
+        justSelectedRef.current = true;
+        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      },
+      [isControlled, onChange, onSelect]
+    );
+    const handleFocus = (0, import_react50.useCallback)(() => {
+      if (justSelectedRef.current) {
+        justSelectedRef.current = false;
+        return;
+      }
+      const currentFiltered = options.filter((opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase())).slice(0, maxItems);
+      setOpen(currentFiltered.length > 0 || emptyMessage !== null);
+    }, [options, inputValue, maxItems, emptyMessage]);
+    const handleBlur = (0, import_react50.useCallback)((e) => {
+      var _a2, _b2;
+      if (e.relatedTarget && ((_b2 = (_a2 = inputRef.current) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b2.contains(e.relatedTarget))) {
+        return;
+      }
+      setOpen(false);
+      setHighlightedIndex(-1);
+    }, []);
+    const handleKeyDown = (0, import_react50.useCallback)(
+      (e) => {
+        if (!open) {
+          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            setOpen(true);
+            setHighlightedIndex(0);
+            e.preventDefault();
+          }
+          return;
+        }
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            setHighlightedIndex(
+              (prev) => prev < filtered.length - 1 ? prev + 1 : 0
+            );
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            setHighlightedIndex(
+              (prev) => prev > 0 ? prev - 1 : filtered.length - 1
+            );
+            break;
+          case "Enter":
+            e.preventDefault();
+            if (highlightedIndex >= 0 && filtered[highlightedIndex]) {
+              handleSelect(filtered[highlightedIndex]);
+            }
+            break;
+          case "Escape":
+            setOpen(false);
+            setHighlightedIndex(-1);
+            break;
+          case "Tab":
+            setOpen(false);
+            setHighlightedIndex(-1);
+            break;
+          default:
+            break;
+        }
+      },
+      [open, filtered, highlightedIndex, handleSelect]
+    );
+    (0, import_react50.useEffect)(() => {
+      if (!listRef.current || highlightedIndex < 0) return;
+      const item = listRef.current.children[highlightedIndex];
+      item.scrollIntoView({ block: "nearest" });
+    }, [highlightedIndex]);
+    return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(import_themes58.Box, { position: "relative", style: { width: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+        TextField.Root,
+        __spreadProps(__spreadValues({
+          "aria-activedescendant": open && highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : void 0,
+          "aria-autocomplete": "list",
+          "aria-controls": open ? listboxId : void 0,
+          "aria-expanded": open,
+          error,
+          onBlur: handleBlur,
+          onChange: handleInputChange,
+          onFocus: handleFocus,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          ref: (node) => {
+            inputRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          },
+          role: "combobox",
+          style: { width: "100%" },
+          value: inputValue
+        }, rest), {
+          children: [
+            slotLeft && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(TextField.Slot, { side: "left", children: slotLeft }),
+            slotRight && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(TextField.Slot, { side: "right", children: slotRight })
+          ]
+        })
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+        DropdownMenu.Root,
+        {
+          modal: false,
+          onOpenChange: (nextOpen) => {
+            if (!nextOpen && document.activeElement !== inputRef.current) {
+              setOpen(false);
+              setHighlightedIndex(-1);
+            }
+          },
+          open,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+              "span",
+              {
+                "aria-hidden": "true",
+                style: {
+                  bottom: 0,
+                  height: 0,
+                  left: 0,
+                  opacity: 0,
+                  pointerEvents: "none",
+                  position: "absolute",
+                  width: "100%"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+              DropdownMenu.Content,
+              {
+                align: "start",
+                onCloseAutoFocus: (e) => {
+                  e.preventDefault();
+                },
+                onOpenAutoFocus: (e) => {
+                  e.preventDefault();
+                },
+                sideOffset: 4,
+                style: {
+                  maxHeight: 240,
+                  overflowY: "auto",
+                  padding: 0,
+                  width: "var(--radix-dropdown-menu-trigger-width)"
+                },
+                children: filtered.length === 0 && emptyMessage !== null ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_themes58.Box, { px: "2", py: "2", children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Typo, { color: "gray", children: emptyMessage }) }) : /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                  "ul",
+                  {
+                    id: listboxId,
+                    ref: listRef,
+                    role: "listbox",
+                    style: { listStyle: "none", margin: 0, padding: 0 },
+                    children: filtered.map((option, index) => {
+                      const isHighlighted = index === highlightedIndex;
+                      return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                        "li",
+                        {
+                          "aria-selected": isHighlighted,
+                          id: `${listboxId}-option-${index}`,
+                          onMouseEnter: () => {
+                            setHighlightedIndex(index);
+                          },
+                          onPointerDown: (e) => {
+                            e.preventDefault();
+                            handleSelect(option);
+                          },
+                          role: "option",
+                          style: {
+                            padding: "var(--spacing-4) var(--spacing-6)",
+                            cursor: "pointer",
+                            backgroundColor: isHighlighted ? "var(--accent-3)" : "transparent",
+                            transition: "background-color 80ms"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Typo, { variant: "body", children: option.label })
+                        },
+                        option.value
+                      );
+                    })
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+AutocompleteTextfield.displayName = "AutocompleteTextfield";
+
 // src/app/platform/on-offline-radio-card.tsx
 var import_react_icons9 = require("@radix-ui/react-icons");
-var import_jsx_runtime98 = require("react/jsx-runtime");
+var import_jsx_runtime99 = require("react/jsx-runtime");
 var SERVICE_TYPE = {
   onlineCoaching: "onlineCoaching",
   offlineCoaching: "offlineCoaching"
 };
 var breakpoint = "sm";
 function HideSmallBox(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_themes6.Box, { display: { initial: "none", [breakpoint]: "block" }, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_themes6.Box, { display: { initial: "none", [breakpoint]: "block" }, children: props.children });
 }
 function OnOfflineRadioCard(props) {
   const Wrapper = props.response ? HideSmallBox : (p) => p.children;
   const columns = props.response ? { initial: "2", [breakpoint]: "1" } : "1";
   const justify = props.response ? { initial: "center", [breakpoint]: "between" } : "between";
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
     RadioButtonCard.Root,
     __spreadProps(__spreadValues({
       RadioWrapper: Wrapper,
@@ -2099,13 +2357,13 @@ function OnOfflineRadioCard(props) {
       justify
     }, props), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(RadioButtonCard.Item, { value: SERVICE_TYPE.onlineCoaching, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(import_themes22.Flex, { align: "center", gap: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_react_icons9.GlobeIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Typo, { children: "\uC628\uB77C\uC778" })
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(RadioButtonCard.Item, { value: SERVICE_TYPE.onlineCoaching, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_themes22.Flex, { align: "center", gap: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_react_icons9.GlobeIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Typo, { children: "\uC628\uB77C\uC778" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(RadioButtonCard.Item, { value: SERVICE_TYPE.offlineCoaching, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(import_themes22.Flex, { align: "center", gap: "2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_react_icons9.BackpackIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(Typo, { children: "\uC624\uD504\uB77C\uC778" })
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(RadioButtonCard.Item, { value: SERVICE_TYPE.offlineCoaching, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_themes22.Flex, { align: "center", gap: "2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_react_icons9.BackpackIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Typo, { children: "\uC624\uD504\uB77C\uC778" })
         ] }) })
       ]
     })
@@ -2113,7 +2371,7 @@ function OnOfflineRadioCard(props) {
 }
 
 // src/app/platform/reservation-card.tsx
-var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_jsx_runtime100 = require("react/jsx-runtime");
 function ReservationCard(props) {
   const {
     sessionNumber,
@@ -2128,29 +2386,29 @@ function ReservationCard(props) {
     onClickCancel,
     onClickCompleteSession
   } = props;
-  const [editValues, setEditValues] = (0, import_react50.useState)({
+  const [editValues, setEditValues] = (0, import_react51.useState)({
     date: props.defaultTime,
     type: props.defaultType
   });
   const date = readonly ? defaultTime : editValues.date;
   const type = readonly ? defaultType : editValues.type;
-  const onClickSave = (0, import_react50.useCallback)(() => {
+  const onClickSave = (0, import_react51.useCallback)(() => {
     var _a;
     (_a = props.onClickSave) == null ? void 0 : _a.call(props, editValues);
   }, [editValues, props]);
-  const onClickReset = (0, import_react50.useCallback)(() => {
+  const onClickReset = (0, import_react51.useCallback)(() => {
     setEditValues({
       date: defaultTime,
       type: defaultType
     });
   }, [defaultTime, defaultType]);
-  const ActionButtons = (0, import_react50.useMemo)(() => {
+  const ActionButtons = (0, import_react51.useMemo)(() => {
     if (readonly) {
-      return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Button, { onClick: onClickReserve, size: "small", variant: "surface", children: defaultTime && defaultType ? "\uC608\uC57D \uC218\uC815\uD558\uAE30" : "\uC608\uC57D\uD558\uAE30" });
+      return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { onClick: onClickReserve, size: "small", variant: "surface", children: defaultTime && defaultType ? "\uC608\uC57D \uC218\uC815\uD558\uAE30" : "\uC608\uC57D\uD558\uAE30" });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Button, { color: "gray", onClick: onClickCancel, variant: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_react_icons2.Cross1Icon, {}) });
+    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { color: "gray", onClick: onClickCancel, variant: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_react_icons2.Cross1Icon, {}) });
   }, [defaultTime, defaultType, onClickCancel, onClickReserve, readonly]);
-  const onChangeDate = (0, import_react50.useCallback)((newDate) => {
+  const onChangeDate = (0, import_react51.useCallback)((newDate) => {
     if (!newDate) return;
     setEditValues((prev) => {
       return __spreadProps(__spreadValues({}, prev), {
@@ -2158,17 +2416,17 @@ function ReservationCard(props) {
       });
     });
   }, []);
-  const onChangeType = (0, import_react50.useCallback)((newType) => {
+  const onChangeType = (0, import_react51.useCallback)((newType) => {
     setEditValues((prev) => {
       return __spreadProps(__spreadValues({}, prev), {
         type: newType
       });
     });
   }, []);
-  const formatDate = (0, import_react50.useCallback)((v) => {
+  const formatDate = (0, import_react51.useCallback)((v) => {
     return (0, import_date_fns3.format)(v, "yyyy\uB144 MM\uC6D4 dd\uC77C(EEE) aa h:mm", { locale: import_locale2.ko });
   }, []);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!minTime || !editValues.date || readonly) return;
     if (editValues.date < minTime) {
       toast.warn("\uC120\uD0DD \uAC00\uB2A5\uD55C \uC2DC\uAC04\uB300\uB85C \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
@@ -2179,7 +2437,7 @@ function ReservationCard(props) {
       });
     }
   }, [editValues, minTime, readonly]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!maxTime || !editValues.date || readonly) return;
     if (editValues.date > maxTime) {
       toast.warn("\uC120\uD0DD \uAC00\uB2A5\uD55C \uC2DC\uAC04\uB300\uB85C \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4.");
@@ -2190,39 +2448,39 @@ function ReservationCard(props) {
       });
     }
   }, [editValues, maxTime, readonly]);
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
     Card,
     {
       error: Boolean(error),
       size: "3",
       style: { overflow: "visible", contain: "initial" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_themes22.Flex, { gap: "3", justify: "between", mb: "5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_themes22.Flex, { gap: "3", justify: "between", mb: "5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
             import_themes23.Grid,
             {
               align: "center",
               columns: { initial: "1", xs: "auto 1fr" },
               gapY: "2",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_themes22.Flex, { align: "center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(Heading2, { variant: "heading4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_themes22.Flex, { align: "center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(Heading2, { variant: "heading4", children: [
                     customerName || "-",
                     "\uB2D8 ",
                     sessionNumber || "-",
                     "\uD68C\uCC28 \uC138\uC158"
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Badge, { ml: "2", children: "\uB2E4\uC74C \uC138\uC158" })
+                  /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Badge, { ml: "2", children: "\uB2E4\uC74C \uC138\uC158" })
                 ] }),
-                error ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(BulletText, { color: "red", variant: "caption", children: error }) : null
+                error ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(BulletText, { color: "red", variant: "caption", children: error }) : null
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_themes22.Flex, { children: ActionButtons })
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_themes22.Flex, { children: ActionButtons })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_themes6.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_themes22.Flex, { direction: "column", gap: "5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Heading2, { mb: "2", variant: "heading5", weight: "regular", children: "\uC138\uC158 \uC77C\uC790\uC640 \uC2DC\uAC01" }),
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_themes6.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_themes22.Flex, { direction: "column", gap: "5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Heading2, { mb: "2", variant: "heading5", weight: "regular", children: "\uC138\uC158 \uC77C\uC790\uC640 \uC2DC\uAC01" }),
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
             DatePickerButton,
             {
               disabled: readonly,
@@ -2236,8 +2494,8 @@ function ReservationCard(props) {
               size: "large"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Heading2, { mb: "2", variant: "heading5", weight: "regular", children: "\uC628/\uC624\uD504\uB77C\uC778 \uC9C4\uD589 \uC5EC\uBD80" }),
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Heading2, { mb: "2", variant: "heading5", weight: "regular", children: "\uC628/\uC624\uD504\uB77C\uC778 \uC9C4\uD589 \uC5EC\uBD80" }),
+          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
             OnOfflineRadioCard,
             {
               disabled: readonly,
@@ -2246,8 +2504,8 @@ function ReservationCard(props) {
               value: type
             }
           ),
-          readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_themes22.Flex, { align: "center", gap: "3", justify: "end", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+          readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_themes22.Flex, { align: "center", gap: "3", justify: "end", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
               Button,
               {
                 color: "gray",
@@ -2257,10 +2515,10 @@ function ReservationCard(props) {
                 children: "\uCD08\uAE30\uD654\uD558\uAE30"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Button, { onClick: onClickSave, size: "small", children: "\uC800\uC7A5\uD558\uAE30" })
+            /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(Button, { onClick: onClickSave, size: "small", children: "\uC800\uC7A5\uD558\uAE30" })
           ] })
         ] }) }),
-        readonly ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_themes25.Inset, { clip: "border-box", side: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+        readonly ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_themes25.Inset, { clip: "border-box", side: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
           import_themes6.Box,
           {
             mt: "5",
@@ -2268,14 +2526,14 @@ function ReservationCard(props) {
             py: "4",
             style: { backgroundColor: "var(--accent-a3)" },
             width: "100%",
-            children: /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_themes22.Flex, { align: "center", gap: "4", justify: "center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(Typo, { children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_themes22.Flex, { align: "center", gap: "4", justify: "center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(Typo, { children: [
                 sessionNumber || "-",
                 "\uD68C\uCC28 \uC138\uC158\uC744 \uC644\uB8CC\uD558\uC168\uB098\uC694?"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(Button, { onClick: onClickCompleteSession, size: "small", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(Button, { onClick: onClickCompleteSession, size: "small", children: [
                 "\uC138\uC158 \uC885\uB8CC\uD558\uAE30",
-                /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_react_icons2.ArrowRightIcon, {})
+                /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_react_icons2.ArrowRightIcon, {})
               ] })
             ] })
           }