@tipp/ui 2.1.30 → 2.1.32

package/dist/app/platform/on-offline-radio-card.js

@@ -30,8 +30,8 @@ import "../../chunk-HYMGXDPL.js";
 import "../../chunk-KOWWLQ4T.js";
 import "../../chunk-IYQJIEVM.js";
 import "../../chunk-TKD7AJ2T.js";
-import "../../chunk-IPF2UOFH.js";
-import "../../chunk-GWJMQBPR.js";
+import "../../chunk-JHXDNCGN.js";
+import "../../chunk-GCOMTYEP.js";
 import "../../chunk-DQ5FBMYB.js";
 import "../../chunk-WDUSQ6HR.js";
 import "../../chunk-PAFFDZBG.js";

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

@@ -64,6 +64,7 @@ __export(reservation_card_exports, {
 module.exports = __toCommonJS(reservation_card_exports);
 var import_react36 = require("react");
 var import_date_fns3 = require("date-fns");
+var import_locale2 = require("date-fns/locale");
 
 // src/atoms/alert-dialog.tsx
 var import_themes = require("@radix-ui/themes");
@@ -1273,33 +1274,6 @@ var Control2 = (0, import_react18.forwardRef)(
   }
 );
 Control2.displayName = "FORM_Control";
-function FormItem(_a) {
-  var _b = _a, {
-    label,
-    labelVariant,
-    children,
-    errorMessage
-  } = _b, fieldProps = __objRest(_b, [
-    "label",
-    "labelVariant",
-    "children",
-    "errorMessage"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Form.Field, __spreadProps(__spreadValues({}, fieldProps), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Form.Label, { variant: labelVariant, children: label }),
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Form.Message, { forceMatch: Boolean(errorMessage), children: errorMessage })
-  ] }));
-}
-var Form = {
-  Root: Root7,
-  Field: Field2,
-  Label: Label2,
-  Message: Message2,
-  Control: RadixForm.Control,
-  Submit: RadixForm.Submit,
-  FormItem
-};
 
 // src/atoms/auto-sizing-input.tsx
 var import_react19 = require("react");
@@ -1448,7 +1422,7 @@ var DatePicker = (0, import_react22.forwardRef)(
         renderCustomHeader,
         showPopperArrow: false,
         timeCaption: "\uC2DC\uAC04",
-        timeFormat: "h:mm aa",
+        timeFormat: "aa h:mm",
         timeIntervals: 10
       }, rest), {
         calendarClassName: `tipp_datePicker_calendar ${rest.calendarClassName || ""}`,
@@ -1665,66 +1639,7 @@ function DatePickerButton(props) {
 // src/molecules/time-select.tsx
 var import_react27 = require("react");
 var import_date_fns2 = require("date-fns");
-
-// src/utils/get-time-options.ts
-var getTimeOptions = () => {
-  const timeOptions = [];
-  for (let i = 0; i < 24; i++) {
-    for (let j = 0; j < 60; j += 10) {
-      timeOptions.push(`${i < 10 ? `0${i}` : i}:${j < 10 ? `0${j}` : j}`);
-    }
-  }
-  return timeOptions;
-};
-var parseTimeOption = (time) => {
-  if (!time) return { hour: 0, minute: 0 };
-  const [hour, minute] = time.split(":").map((t) => parseInt(t, 10));
-  return { hour, minute };
-};
-var getTimeOption = (time) => {
-  const hour = time.getHours();
-  const minute = time.getMinutes();
-  return `${hour < 10 ? `0${hour}` : hour}:${minute < 10 ? `0${minute}` : minute}`;
-};
-
-// src/molecules/time-select.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var getOptionValue = (date, timeValue) => {
-  if (date && timeValue) {
-    if ((0, import_date_fns2.format)(date, "yyyyMMdd") === (0, import_date_fns2.format)(timeValue, "yyyyMMdd")) {
-      return (0, import_date_fns2.format)(date, "HH:mm");
-    }
-  }
-};
-function TimeSelect(_a) {
-  var _b = _a, {
-    value,
-    maxTime,
-    minTime,
-    time
-  } = _b, rest = __objRest(_b, [
-    "value",
-    "maxTime",
-    "minTime",
-    "time"
-  ]);
-  const timeOptions = (0, import_react27.useMemo)(() => {
-    return getTimeOptions();
-  }, []);
-  const [minOption, maxOption] = (0, import_react27.useMemo)(() => {
-    return [getOptionValue(minTime, time), getOptionValue(maxTime, time)];
-  }, [maxTime, minTime, time]);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Select.Root, __spreadProps(__spreadValues({ value }, rest), { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_themes22.Flex, { direction: "column", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Select.Trigger, { placeholder: "-        ", style: { minWidth: "100px" }, children: value }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Select.Content, { children: timeOptions.map((option) => {
-      const visible = (!minOption || option >= minOption) && (!maxOption || option <= maxOption);
-      if (!visible) {
-        return null;
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Select.Item, { value: option, children: option }, option);
-    }) })
-  ] }));
-}
 
 // src/molecules/radio-button-card.tsx
 var import_react28 = require("react");
@@ -1940,7 +1855,6 @@ function ReservationCard(props) {
   });
   const date = readonly ? defaultTime : editValues.date;
   const type = readonly ? defaultType : editValues.type;
-  const time = date && getTimeOption(date);
   const onClickSave = (0, import_react36.useCallback)(() => {
     var _a;
     (_a = props.onClickSave) == null ? void 0 : _a.call(props, editValues);
@@ -1957,18 +1871,14 @@ function ReservationCard(props) {
     }
     return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Button, { color: "gray", onClick: onClickCancel, variant: "transparent", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_react_icons2.Cross1Icon, {}) });
   }, [defaultTime, defaultType, onClickCancel, onClickReserve, readonly]);
-  const onChangeDate = (0, import_react36.useCallback)(
-    (newDate) => {
-      if (!newDate) return;
-      const { hour = 0, minute = 0 } = time ? parseTimeOption(time) : {};
-      setEditValues((prev) => {
-        return __spreadProps(__spreadValues({}, prev), {
-          date: (0, import_date_fns3.setMinutes)((0, import_date_fns3.setHours)(newDate, hour), minute)
-        });
+  const onChangeDate = (0, import_react36.useCallback)((newDate) => {
+    if (!newDate) return;
+    setEditValues((prev) => {
+      return __spreadProps(__spreadValues({}, prev), {
+        date: newDate
       });
-    },
-    [time]
-  );
+    });
+  }, []);
   const onChangeType = (0, import_react36.useCallback)((newType) => {
     setEditValues((prev) => {
       return __spreadProps(__spreadValues({}, prev), {
@@ -1976,24 +1886,9 @@ function ReservationCard(props) {
       });
     });
   }, []);
-  const onChangeTime = (0, import_react36.useCallback)(
-    (v) => {
-      const { hour, minute } = parseTimeOption(v);
-      if (typeof v === "undefined") {
-        setEditValues((prev) => {
-          return __spreadProps(__spreadValues({}, prev), {
-            date: v
-          });
-        });
-      }
-      setEditValues((prev) => {
-        return __spreadProps(__spreadValues({}, prev), {
-          date: (0, import_date_fns3.setMinutes)((0, import_date_fns3.setHours)(date || /* @__PURE__ */ new Date(), hour), minute)
-        });
-      });
-    },
-    [date]
-  );
+  const formatDate = (0, import_react36.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_react36.useEffect)(() => {
     if (!minTime || !editValues.date || readonly) return;
     if (editValues.date < minTime) {
@@ -2046,70 +1941,46 @@ function ReservationCard(props) {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_themes22.Flex, { children: ActionButtons })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_themes6.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-          Form.Root,
-          {
-            onSubmit: (e) => {
-              e.preventDefault();
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_themes22.Flex, { direction: "column", gap: "5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Form.Field, { name: "date", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(Form.Label, { asChild: true, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Heading2, { mb: "2", variant: "heading5", weight: "regular", children: "\uC138\uC158 \uC77C\uC790\uC640 \uC2DC\uAC01" }),
-                /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_themes23.Grid, { columns: "1fr auto", gap: "4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-                    DatePickerButton,
-                    {
-                      disabled: readonly,
-                      maxDate: maxTime,
-                      minDate: minTime,
-                      onChange: onChangeDate,
-                      placeholder: "\uC77C\uC790\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694",
-                      selected: date,
-                      size: "large"
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-                    TimeSelect,
-                    {
-                      disabled: readonly,
-                      maxTime,
-                      minTime,
-                      onValueChange: onChangeTime,
-                      size: "3",
-                      time: date,
-                      value: time
-                    }
-                  )
-                ] })
-              ] }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(Form.Field, { name: "type", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Form.Label, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Heading2, { mb: "2", variant: "heading5", weight: "regular", children: "\uC628/\uC624\uD504\uB77C\uC778 \uC9C4\uD589 \uC5EC\uBD80" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Form.Control, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-                  OnOfflineRadioCard,
-                  {
-                    disabled: readonly,
-                    onValueChange: onChangeType,
-                    size: "1",
-                    value: type
-                  }
-                ) })
-              ] }),
-              readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_themes22.Flex, { align: "center", gap: "3", justify: "end", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-                  Button,
-                  {
-                    color: "gray",
-                    onClick: onClickReset,
-                    size: "small",
-                    variant: "transparent",
-                    children: "\uCD08\uAE30\uD654\uD558\uAE30"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Button, { onClick: onClickSave, size: "small", children: "\uC800\uC7A5\uD558\uAE30" })
-              ] })
-            ] })
-          }
-        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_themes6.Box, { children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_themes22.Flex, { direction: "column", gap: "5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Heading2, { mb: "2", variant: "heading5", weight: "regular", children: "\uC138\uC158 \uC77C\uC790\uC640 \uC2DC\uAC01" }),
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+            DatePickerButton,
+            {
+              disabled: readonly,
+              format: formatDate,
+              maxDate: maxTime,
+              minDate: minTime,
+              onChange: onChangeDate,
+              placeholder: "\uC77C\uC790\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694",
+              selected: date,
+              showTimeSelect: true,
+              size: "large"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Heading2, { mb: "2", variant: "heading5", weight: "regular", children: "\uC628/\uC624\uD504\uB77C\uC778 \uC9C4\uD589 \uC5EC\uBD80" }),
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+            OnOfflineRadioCard,
+            {
+              disabled: readonly,
+              onValueChange: onChangeType,
+              size: "1",
+              value: type
+            }
+          ),
+          readonly ? null : /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_themes22.Flex, { align: "center", gap: "3", justify: "end", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+              Button,
+              {
+                color: "gray",
+                onClick: onClickReset,
+                size: "small",
+                variant: "transparent",
+                children: "\uCD08\uAE30\uD654\uD558\uAE30"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Button, { onClick: onClickSave, size: "small", children: "\uC800\uC7A5\uD558\uAE30" })
+          ] })
+        ] }) }),
         readonly ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_themes25.Inset, { clip: "border-box", side: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           import_themes6.Box,
           {