@tipp/ui 1.6.22 → 1.6.24

package/dist/chunk-GDSTYYNT.js

@@ -0,0 +1,106 @@
+import {
+  Heading
+} from "./chunk-HJB3AASV.js";
+import {
+  usePortalContainer
+} from "./chunk-NWF4LV6Z.js";
+import {
+  IconButton
+} from "./chunk-O3DNDMV3.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N552FDTV.js";
+
+// src/atoms/dialog.tsx
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { Cross1Icon } from "@radix-ui/react-icons";
+import { Flex, Theme } from "@radix-ui/themes";
+import { jsx, jsxs } from "react/jsx-runtime";
+var preventDefault = (e) => {
+  e.preventDefault();
+};
+function Content2(props) {
+  const _a = props, {
+    children,
+    style = {},
+    width,
+    maxWidth,
+    minWidth,
+    maxHeight,
+    height,
+    minHeight,
+    title,
+    buttons,
+    hideCloseButton,
+    className
+  } = _a, rest = __objRest(_a, [
+    "children",
+    "style",
+    "width",
+    "maxWidth",
+    "minWidth",
+    "maxHeight",
+    "height",
+    "minHeight",
+    "title",
+    "buttons",
+    "hideCloseButton",
+    "className"
+  ]);
+  const { dialogContainerRef } = usePortalContainer();
+  return /* @__PURE__ */ jsx(RadixDialog.Portal, { container: dialogContainerRef.current, children: /* @__PURE__ */ jsx(Theme, { asChild: true, children: /* @__PURE__ */ jsx(RadixDialog.Overlay, { className: "DialogOverlay", children: /* @__PURE__ */ jsxs(
+    RadixDialog.Content,
+    __spreadProps(__spreadValues({
+      className: `DialogContent ${className || ""}`,
+      onPointerDownOutside: preventDefault,
+      style: __spreadValues({
+        width,
+        maxWidth,
+        minWidth,
+        maxHeight,
+        height,
+        minHeight
+      }, style)
+    }, rest), {
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { gap: "2", justify: "between", children: [
+          /* @__PURE__ */ jsx(RadixDialog.Title, { asChild: true, children: typeof title === "string" ? /* @__PURE__ */ jsx(Heading, { align: "center", mb: "2", variant: "heading3", children: title }) : title }),
+          !hideCloseButton && /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, className: "DialogClose", children: /* @__PURE__ */ jsx(IconButton, { color: "gray", variant: "ghost", children: /* @__PURE__ */ jsx(Cross1Icon, {}) }) })
+        ] }),
+        children,
+        buttons ? /* @__PURE__ */ jsx(Flex, { gap: "3", justify: "end", mt: "3", children: buttons }) : null
+      ]
+    })
+  ) }) }) });
+}
+function Close2(_a) {
+  var _b = _a, {
+    children
+  } = _b, rest = __objRest(_b, [
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx(RadixDialog.Close, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
+}
+function Trigger2(_a) {
+  var _b = _a, {
+    children
+  } = _b, rest = __objRest(_b, [
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx(RadixDialog.Trigger, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
+}
+var Dialog = {
+  Root: RadixDialog.Root,
+  Trigger: Trigger2,
+  Content: Content2,
+  Close: Close2,
+  Description: RadixDialog.Description,
+  Title: RadixDialog.Title
+};
+
+export {
+  Dialog
+};
+//# sourceMappingURL=chunk-GDSTYYNT.js.map

package/dist/chunk-GDSTYYNT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/dialog.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { Flex, Theme } from '@radix-ui/themes';\nimport { ToastContainer } from './toast';\nimport { Heading } from './heading';\nimport { IconButton } from './icon-button';\nimport { usePortalContainer } from '@/theme/portal-provider';\n\ntype ContentProps = RadixDialog.DialogContentProps & {\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  height?: string;\n  maxHeight?: string;\n  minHeight?: string;\n  title?: string;\n  hideCloseButton?: boolean;\n  buttons?: React.ReactElement;\n};\n\nconst preventDefault: RadixDialog.DialogContentProps['onPointerDownOutside'] = (\n  e\n) => {\n  e.preventDefault();\n};\n\nfunction Content(props: ContentProps): React.ReactElement {\n  const {\n    children,\n    style = {},\n    width,\n    maxWidth,\n    minWidth,\n    maxHeight,\n    height,\n    minHeight,\n    title,\n    buttons,\n    hideCloseButton,\n    className,\n    ...rest\n  } = props;\n  const { dialogContainerRef } = usePortalContainer();\n\n  return (\n    <RadixDialog.Portal container={dialogContainerRef.current}>\n      <Theme asChild>\n        <RadixDialog.Overlay className=\"DialogOverlay\">\n          <RadixDialog.Content\n            className={`DialogContent ${className || ''}`}\n            onPointerDownOutside={preventDefault}\n            style={{\n              width,\n              maxWidth,\n              minWidth,\n              maxHeight,\n              height,\n              minHeight,\n              ...style,\n            }}\n            {...rest}\n          >\n            <Flex gap=\"2\" justify=\"between\">\n              <RadixDialog.Title asChild>\n                {typeof title === 'string' ? (\n                  <Heading align=\"center\" mb=\"2\" variant=\"heading3\">\n                    {title}\n                  </Heading>\n                ) : (\n                  title\n                )}\n              </RadixDialog.Title>\n              {!hideCloseButton && (\n                <RadixDialog.Close asChild className=\"DialogClose\">\n                  <IconButton color=\"gray\" variant=\"ghost\">\n                    <Cross1Icon />\n                  </IconButton>\n                </RadixDialog.Close>\n              )}\n            </Flex>\n            {children}\n            {buttons ? (\n              <Flex gap=\"3\" justify=\"end\" mt=\"3\">\n                {buttons}\n              </Flex>\n            ) : null}\n          </RadixDialog.Content>\n        </RadixDialog.Overlay>\n      </Theme>\n    </RadixDialog.Portal>\n  );\n}\n\nfunction Close({\n  children,\n  ...rest\n}: RadixDialog.DialogCloseProps): React.ReactElement {\n  return (\n    <RadixDialog.Close asChild {...rest}>\n      {children}\n    </RadixDialog.Close>\n  );\n}\n\nfunction Trigger({\n  children,\n  ...rest\n}: RadixDialog.DialogTriggerProps): React.ReactElement {\n  return (\n    <RadixDialog.Trigger asChild {...rest}>\n      {children}\n    </RadixDialog.Trigger>\n  );\n}\n\nexport const Dialog = {\n  Root: RadixDialog.Root,\n  Trigger,\n  Content,\n  Close,\n  Description: RadixDialog.Description,\n  Title: RadixDialog.Title,\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,YAAY,iBAAiB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,MAAM,aAAa;AA4DhB,SAGM,KAHN;AA1CZ,IAAM,iBAAyE,CAC7E,MACG;AACH,IAAE,eAAe;AACnB;AAEA,SAASA,SAAQ,OAAyC;AACxD,QAcI,YAbF;AAAA;AAAA,IACA,QAAQ,CAAC;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAvCJ,IAyCM,IADC,iBACD,IADC;AAAA,IAZH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGF,QAAM,EAAE,mBAAmB,IAAI,mBAAmB;AAElD,SACE,oBAAa,oBAAZ,EAAmB,WAAW,mBAAmB,SAChD,8BAAC,SAAM,SAAO,MACZ,8BAAa,qBAAZ,EAAoB,WAAU,iBAC7B;AAAA,IAAa;AAAA,IAAZ;AAAA,MACC,WAAW,iBAAiB,aAAa,EAAE;AAAA,MAC3C,sBAAsB;AAAA,MACtB,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,SACG;AAAA,OAED,OAZL;AAAA,MAcC;AAAA,6BAAC,QAAK,KAAI,KAAI,SAAQ,WACpB;AAAA,8BAAa,mBAAZ,EAAkB,SAAO,MACvB,iBAAO,UAAU,WAChB,oBAAC,WAAQ,OAAM,UAAS,IAAG,KAAI,SAAQ,YACpC,iBACH,IAEA,OAEJ;AAAA,UACC,CAAC,mBACA,oBAAa,mBAAZ,EAAkB,SAAO,MAAC,WAAU,eACnC,8BAAC,cAAW,OAAM,QAAO,SAAQ,SAC/B,8BAAC,cAAW,GACd,GACF;AAAA,WAEJ;AAAA,QACC;AAAA,QACA,UACC,oBAAC,QAAK,KAAI,KAAI,SAAQ,OAAM,IAAG,KAC5B,mBACH,IACE;AAAA;AAAA;AAAA,EACN,GACF,GACF,GACF;AAEJ;AAEA,SAASC,OAAM,IAGsC;AAHtC,eACb;AAAA;AAAA,EA9FF,IA6Fe,IAEV,iBAFU,IAEV;AAAA,IADH;AAAA;AAGA,SACE,oBAAa,mBAAZ,+BAAkB,SAAO,QAAK,OAA9B,EACE,WACH;AAEJ;AAEA,SAASC,SAAQ,IAGsC;AAHtC,eACf;AAAA;AAAA,EAzGF,IAwGiB,IAEZ,iBAFY,IAEZ;AAAA,IADH;AAAA;AAGA,SACE,oBAAa,qBAAZ,+BAAoB,SAAO,QAAK,OAAhC,EACE,WACH;AAEJ;AAEO,IAAM,SAAS;AAAA,EACpB,MAAkB;AAAA,EAClB,SAAAA;AAAA,EACA,SAAAF;AAAA,EACA,OAAAC;AAAA,EACA,aAAyB;AAAA,EACzB,OAAmB;AACrB;","names":["Content","Close","Trigger"]}

package/dist/chunk-GDZ3OYPF.js

@@ -0,0 +1,70 @@
+import {
+  ThemeProvider
+} from "./chunk-BVNXAZ4W.js";
+import {
+  Heading
+} from "./chunk-HJB3AASV.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Button
+} from "./chunk-Q5AFRGVP.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N552FDTV.js";
+
+// src/molecules/ghost-post.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function GhostPost(props) {
+  const { defaultThemeProps, html, onPageBack } = props;
+  return /* @__PURE__ */ jsx(
+    ThemeProvider,
+    __spreadProps(__spreadValues({}, defaultThemeProps), {
+      accentColor: "iris",
+      scaling: "110%",
+      style: {},
+      children: html ? /* @__PURE__ */ jsx(Box, { mt: "5", width: "100%", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "gh-content",
+          dangerouslySetInnerHTML: { __html: html }
+        }
+      ) }) : /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          align: "center",
+          direction: "column",
+          gap: "6",
+          height: "100%",
+          justify: "center",
+          width: "100%",
+          children: [
+            /* @__PURE__ */ jsx(Heading, { variant: "heading1", children: "\uCF58\uD150\uCE20\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4." }),
+            /* @__PURE__ */ jsx(
+              Heading,
+              {
+                align: "center",
+                color: "gray",
+                variant: "heading4",
+                weight: "regular",
+                children: `\uC694\uCCAD\uD558\uC2E0 \uCF58\uD150\uCE20\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.
+        \uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574\uC8FC\uC138\uC694.`
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { onClick: onPageBack, size: "large", children: "\uB4A4\uB85C\uAC00\uAE30" })
+          ]
+        }
+      )
+    })
+  );
+}
+
+export {
+  GhostPost
+};
+//# sourceMappingURL=chunk-GDZ3OYPF.js.map

package/dist/chunk-GDZ3OYPF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/ghost-post.tsx"],"sourcesContent":["import React from 'react';\nimport type { ThemeProviderProps } from '../theme/theme-provider';\nimport { ThemeProvider } from '../theme/theme-provider';\nimport { Flex } from '../atoms/flex';\nimport { Heading } from '../atoms/heading';\nimport { Box } from '../atoms/box';\nimport { Button } from '../atoms/button';\n\nexport interface GhostPostProps {\n  defaultThemeProps?: Partial<ThemeProviderProps>;\n  html?: string;\n  title?: string;\n  children?: React.ReactElement;\n  onPageBack?: () => void;\n}\n\nexport function GhostPost(props: GhostPostProps): React.ReactElement {\n  const { defaultThemeProps, html, onPageBack } = props;\n  return (\n    <ThemeProvider\n      {...defaultThemeProps}\n      accentColor=\"iris\"\n      scaling=\"110%\"\n      style={{}}\n    >\n      {html ? (\n        <Box mt=\"5\" width=\"100%\">\n          <div\n            className=\"gh-content\"\n            dangerouslySetInnerHTML={{ __html: html }}\n          />\n        </Box>\n      ) : (\n        <Flex\n          align=\"center\"\n          direction=\"column\"\n          gap=\"6\"\n          height=\"100%\"\n          justify=\"center\"\n          width=\"100%\"\n        >\n          <Heading variant=\"heading1\">콘텐츠를 찾을 수 없습니다.</Heading>\n          <Heading\n            align=\"center\"\n            color=\"gray\"\n            variant=\"heading4\"\n            weight=\"regular\"\n          >\n            {`요청하신 콘텐츠를 찾을 수 없습니다.\n        잠시 후 다시 시도해주세요.`}\n          </Heading>\n          <Button onClick={onPageBack} size=\"large\">\n            뒤로가기\n          </Button>\n        </Flex>\n      )}\n    </ThemeProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2BU,cAMF,YANE;AAXH,SAAS,UAAU,OAA2C;AACnE,QAAM,EAAE,mBAAmB,MAAM,WAAW,IAAI;AAChD,SACE;AAAA,IAAC;AAAA,qCACK,oBADL;AAAA,MAEC,aAAY;AAAA,MACZ,SAAQ;AAAA,MACR,OAAO,CAAC;AAAA,MAEP,iBACC,oBAAC,OAAI,IAAG,KAAI,OAAM,QAChB;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,yBAAyB,EAAE,QAAQ,KAAK;AAAA;AAAA,MAC1C,GACF,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,OAAM;AAAA,UACN,WAAU;AAAA,UACV,KAAI;AAAA,UACJ,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,OAAM;AAAA,UAEN;AAAA,gCAAC,WAAQ,SAAQ,YAAW,oFAAe;AAAA,YAC3C;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,QAAO;AAAA,gBAEN;AAAA;AAAA;AAAA,YAEH;AAAA,YACA,oBAAC,UAAO,SAAS,YAAY,MAAK,SAAQ,sCAE1C;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/chunk-H76H7C6P.js

@@ -0,0 +1,284 @@
+import {
+  OnOfflineRadioCard
+} from "./chunk-CXPOD6VX.js";
+import {
+  DatePickerButton
+} from "./chunk-SNHJQ4GS.js";
+import {
+  TimeSelect
+} from "./chunk-YPYQISJB.js";
+import {
+  getTimeOption,
+  parseTimeOption
+} from "./chunk-VGIX3A5R.js";
+import {
+  Form
+} from "./chunk-4JBL5FRI.js";
+import {
+  toast
+} from "./chunk-CYYWMYE7.js";
+import {
+  Inset
+} from "./chunk-XQOL7UBI.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Heading
+} from "./chunk-HJB3AASV.js";
+import {
+  BulletText
+} from "./chunk-IWW6ST7Q.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Typo
+} from "./chunk-52MVZ6AN.js";
+import {
+  Button
+} from "./chunk-Q5AFRGVP.js";
+import {
+  Card
+} from "./chunk-2ZQK7NTN.js";
+import {
+  Badge
+} from "./chunk-EWD4AO5N.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  ArrowRightIcon,
+  Cross1Icon
+} from "./chunk-HLFG5ZTU.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N552FDTV.js";
+
+// src/app/platform/reservation-card.tsx
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { setHours, setMinutes } from "date-fns";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ReservationCard(props) {
+  const {
+    sessionNumber,
+    customerName,
+    readonly,
+    defaultTime,
+    defaultType,
+    error,
+    minTime,
+    maxTime,
+    onClickReserve,
+    onClickCancel,
+    onClickCompleteSession
+  } = props;
+  const [editValues, setEditValues] = useState({
+    date: props.defaultTime,
+    type: props.defaultType
+  });
+  const date = readonly ? defaultTime : editValues.date;
+  const type = readonly ? defaultType : editValues.type;
+  const time = date && getTimeOption(date);
+  const onClickSave = useCallback(() => {
+    var _a;
+    (_a = props.onClickSave) == null ? void 0 : _a.call(props, editValues);
+  }, [editValues, props]);
+  const onClickReset = useCallback(() => {
+    setEditValues({
+      date: defaultTime,
+      type: defaultType
+    });
+  }, [defaultTime, defaultType]);
+  const ActionButtons = useMemo(() => {
+    if (readonly) {
+      return /* @__PURE__ */ jsx(Button, { onClick: onClickReserve, size: "small", variant: "surface", children: defaultTime && defaultType ? "\uC608\uC57D \uC218\uC815\uD558\uAE30" : "\uC608\uC57D\uD558\uAE30" });
+    }
+    return /* @__PURE__ */ jsx(Button, { color: "gray", onClick: onClickCancel, variant: "transparent", children: /* @__PURE__ */ jsx(Cross1Icon, {}) });
+  }, [defaultTime, defaultType, onClickCancel, onClickReserve, readonly]);
+  const onChangeDate = useCallback(
+    (newDate) => {
+      if (!newDate)
+        return;
+      const { hour = 0, minute = 0 } = time ? parseTimeOption(time) : {};
+      setEditValues((prev) => {
+        return __spreadProps(__spreadValues({}, prev), {
+          date: setMinutes(setHours(newDate, hour), minute)
+        });
+      });
+    },
+    [time]
+  );
+  const onChangeType = useCallback((newType) => {
+    setEditValues((prev) => {
+      return __spreadProps(__spreadValues({}, prev), {
+        type: newType
+      });
+    });
+  }, []);
+  const onChangeTime = 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: setMinutes(setHours(date || /* @__PURE__ */ new Date(), hour), minute)
+        });
+      });
+    },
+    [date]
+  );
+  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.");
+      setEditValues((prev) => {
+        return __spreadProps(__spreadValues({}, prev), {
+          date: minTime
+        });
+      });
+    }
+  }, [editValues, minTime, readonly]);
+  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.");
+      setEditValues((prev) => {
+        return __spreadProps(__spreadValues({}, prev), {
+          date: maxTime
+        });
+      });
+    }
+  }, [editValues, maxTime, readonly]);
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      error: Boolean(error),
+      size: "3",
+      style: { overflow: "visible", contain: "initial" },
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "between", mb: "5", children: [
+          /* @__PURE__ */ jsxs(
+            Grid,
+            {
+              align: "center",
+              columns: { initial: "1", xs: "auto 1fr" },
+              gapY: "2",
+              children: [
+                /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+                  /* @__PURE__ */ jsxs(Heading, { variant: "heading4", children: [
+                    customerName || "-",
+                    "\uB2D8 ",
+                    sessionNumber || "-",
+                    "\uD68C\uCC28 \uC138\uC158"
+                  ] }),
+                  /* @__PURE__ */ jsx(Badge, { ml: "2", children: "\uB2E4\uC74C \uC138\uC158" })
+                ] }),
+                error ? /* @__PURE__ */ jsx(BulletText, { color: "red", variant: "caption", children: error }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Flex, { children: ActionButtons })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+          Form.Root,
+          {
+            onSubmit: (e) => {
+              e.preventDefault();
+            },
+            children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "5", children: [
+              /* @__PURE__ */ jsx(Form.Field, { name: "date", children: /* @__PURE__ */ jsxs(Form.Label, { asChild: true, children: [
+                /* @__PURE__ */ jsx(Heading, { mb: "2", variant: "heading5", weight: "regular", children: "\uC138\uC158 \uC77C\uC790\uC640 \uC2DC\uAC01" }),
+                /* @__PURE__ */ jsxs(Grid, { columns: "1fr auto", gap: "4", children: [
+                  /* @__PURE__ */ 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__ */ jsx(
+                    TimeSelect,
+                    {
+                      disabled: readonly,
+                      maxTime,
+                      minTime,
+                      onValueChange: onChangeTime,
+                      size: "3",
+                      time: date,
+                      value: time
+                    }
+                  )
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxs(Form.Field, { name: "type", children: [
+                /* @__PURE__ */ jsx(Form.Label, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { mb: "2", variant: "heading5", weight: "regular", children: "\uC628/\uC624\uD504\uB77C\uC778 \uC9C4\uD589 \uC5EC\uBD80" }) }),
+                /* @__PURE__ */ jsx(Form.Control, { asChild: true, children: /* @__PURE__ */ jsx(
+                  OnOfflineRadioCard,
+                  {
+                    disabled: readonly,
+                    onValueChange: onChangeType,
+                    size: "1",
+                    value: type
+                  }
+                ) })
+              ] }),
+              readonly ? null : /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", justify: "end", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    color: "gray",
+                    onClick: onClickReset,
+                    size: "small",
+                    variant: "transparent",
+                    children: "\uCD08\uAE30\uD654\uD558\uAE30"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Button, { onClick: onClickSave, size: "small", children: "\uC800\uC7A5\uD558\uAE30" })
+              ] })
+            ] })
+          }
+        ) }),
+        readonly ? /* @__PURE__ */ jsx(Inset, { clip: "border-box", side: "bottom", children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            mt: "5",
+            px: "5",
+            py: "4",
+            style: { backgroundColor: "var(--accent-a3)" },
+            width: "100%",
+            children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "4", justify: "center", children: [
+              /* @__PURE__ */ jsxs(Typo, { children: [
+                sessionNumber || "-",
+                "\uD68C\uCC28 \uC138\uC158\uC744 \uC644\uB8CC\uD558\uC168\uB098\uC694?"
+              ] }),
+              /* @__PURE__ */ jsxs(Button, { onClick: onClickCompleteSession, size: "small", children: [
+                "\uC138\uC158 \uC885\uB8CC\uD558\uAE30",
+                /* @__PURE__ */ jsx(ArrowRightIcon, {})
+              ] })
+            ] })
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+
+export {
+  ReservationCard
+};
+//# sourceMappingURL=chunk-H76H7C6P.js.map

package/dist/chunk-H76H7C6P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app/platform/reservation-card.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { setHours, setMinutes } from 'date-fns';\nimport {\n  Badge,\n  Box,\n  BulletText,\n  Button,\n  Card,\n  Flex,\n  Form,\n  Grid,\n  Heading,\n  Inset,\n  toast,\n  Typo,\n} from '../../atoms';\nimport { ArrowRightIcon, Cross1Icon } from '../../icon';\nimport { DatePickerButton, TimeSelect } from '../../molecules';\nimport { getTimeOption, parseTimeOption } from '../../utils';\nimport { OnOfflineRadioCard } from './on-offline-radio-card';\n\ntype Type = 'onlineCoaching' | 'offlineCoaching';\n\ninterface Values {\n  date?: Date;\n  type?: Type;\n}\n\nexport interface ReservationCardProps {\n  sessionNumber?: number;\n  readonly?: boolean;\n  defaultTime?: Date;\n  defaultType?: Type;\n  customerName?: string;\n  error?: string;\n  onClickCompleteSession?: () => void;\n  onClickReserve?: () => void;\n  onClickSave?: (values: Values) => void;\n  onClickCancel?: () => void;\n  minTime?: Date;\n  maxTime?: Date;\n}\n\nexport function ReservationCard(\n  props: ReservationCardProps\n): React.ReactElement {\n  const {\n    sessionNumber,\n    customerName,\n    readonly,\n    defaultTime,\n    defaultType,\n    error,\n    minTime,\n    maxTime,\n    onClickReserve,\n    onClickCancel,\n    onClickCompleteSession,\n  } = props;\n\n  const [editValues, setEditValues] = useState<Values>({\n    date: props.defaultTime,\n    type: props.defaultType,\n  });\n\n  const date = readonly ? defaultTime : editValues.date;\n  const type = readonly ? defaultType : editValues.type;\n  const time = date && getTimeOption(date);\n\n  const onClickSave = useCallback(() => {\n    props.onClickSave?.(editValues);\n  }, [editValues, props]);\n\n  const onClickReset = useCallback(() => {\n    setEditValues({\n      date: defaultTime,\n      type: defaultType,\n    });\n  }, [defaultTime, defaultType]);\n\n  const ActionButtons = useMemo(() => {\n    if (readonly) {\n      return (\n        <Button onClick={onClickReserve} size=\"small\" variant=\"surface\">\n          {defaultTime && defaultType ? '예약 수정하기' : '예약하기'}\n        </Button>\n      );\n    }\n    return (\n      <Button color=\"gray\" onClick={onClickCancel} variant=\"transparent\">\n        <Cross1Icon />\n      </Button>\n    );\n  }, [defaultTime, defaultType, onClickCancel, onClickReserve, readonly]);\n\n  const onChangeDate = useCallback(\n    (newDate: Date | null) => {\n      if (!newDate) return;\n      const { hour = 0, minute = 0 } = time ? parseTimeOption(time) : {};\n      setEditValues((prev) => {\n        return {\n          ...prev,\n          date: setMinutes(setHours(newDate, hour), minute),\n        };\n      });\n    },\n    [time]\n  );\n\n  const onChangeType = useCallback((newType: string) => {\n    setEditValues((prev) => {\n      return {\n        ...prev,\n        type: newType as Type,\n      };\n    });\n  }, []);\n\n  const onChangeTime = useCallback(\n    (v?: string) => {\n      const { hour, minute } = parseTimeOption(v);\n      if (typeof v === 'undefined') {\n        setEditValues((prev) => {\n          return {\n            ...prev,\n            date: v,\n          };\n        });\n      }\n      setEditValues((prev) => {\n        return {\n          ...prev,\n          date: setMinutes(setHours(date || new Date(), hour), minute),\n        };\n      });\n    },\n    [date]\n  );\n\n  useEffect(() => {\n    if (!minTime || !editValues.date || readonly) return;\n    if (editValues.date < minTime) {\n      toast.warn('선택 가능한 시간대로 변경되었습니다.');\n      setEditValues((prev) => {\n        return {\n          ...prev,\n          date: minTime,\n        };\n      });\n    }\n  }, [editValues, minTime, readonly]);\n\n  useEffect(() => {\n    if (!maxTime || !editValues.date || readonly) return;\n    if (editValues.date > maxTime) {\n      toast.warn('선택 가능한 시간대로 변경되었습니다.');\n      setEditValues((prev) => {\n        return {\n          ...prev,\n          date: maxTime,\n        };\n      });\n    }\n  }, [editValues, maxTime, readonly]);\n\n  return (\n    <Card\n      error={Boolean(error)}\n      size=\"3\"\n      style={{ overflow: 'visible', contain: 'initial' }}\n    >\n      <Flex gap=\"3\" justify=\"between\" mb=\"5\">\n        <Grid\n          align=\"center\"\n          columns={{ initial: '1', xs: 'auto 1fr' }}\n          gapY=\"2\"\n        >\n          <Flex align=\"center\">\n            <Heading variant=\"heading4\">\n              {customerName || '-'}님 {sessionNumber || '-'}회차 세션\n            </Heading>\n            <Badge ml=\"2\">다음 세션</Badge>\n          </Flex>\n          {error ? (\n            <BulletText color=\"red\" variant=\"caption\">\n              {error}\n            </BulletText>\n          ) : null}\n        </Grid>\n        <Flex>{ActionButtons}</Flex>\n      </Flex>\n\n      <Box>\n        <Form.Root\n          onSubmit={(e) => {\n            e.preventDefault();\n          }}\n        >\n          <Flex direction=\"column\" gap=\"5\">\n            <Form.Field name=\"date\">\n              <Form.Label asChild>\n                <Heading mb=\"2\" variant=\"heading5\" weight=\"regular\">\n                  세션 일자와 시각\n                </Heading>\n                <Grid columns=\"1fr auto\" gap=\"4\">\n                  <DatePickerButton\n                    disabled={readonly}\n                    maxDate={maxTime}\n                    minDate={minTime}\n                    onChange={onChangeDate}\n                    placeholder=\"일자를 선택해주세요\"\n                    selected={date}\n                    size=\"large\"\n                  />\n                  <TimeSelect\n                    disabled={readonly}\n                    maxTime={maxTime}\n                    minTime={minTime}\n                    onValueChange={onChangeTime}\n                    size=\"3\"\n                    time={date}\n                    value={time}\n                  />\n                </Grid>\n              </Form.Label>\n            </Form.Field>\n\n            <Form.Field name=\"type\">\n              <Form.Label asChild>\n                <Heading mb=\"2\" variant=\"heading5\" weight=\"regular\">\n                  온/오프라인 진행 여부\n                </Heading>\n              </Form.Label>\n              <Form.Control asChild>\n                <OnOfflineRadioCard\n                  disabled={readonly}\n                  onValueChange={onChangeType}\n                  size=\"1\"\n                  value={type}\n                />\n              </Form.Control>\n            </Form.Field>\n\n            {readonly ? null : (\n              <Flex align=\"center\" gap=\"3\" justify=\"end\">\n                <Button\n                  color=\"gray\"\n                  onClick={onClickReset}\n                  size=\"small\"\n                  variant=\"transparent\"\n                >\n                  초기화하기\n                </Button>\n                <Button onClick={onClickSave} size=\"small\">\n                  저장하기\n                </Button>\n              </Flex>\n            )}\n          </Flex>\n        </Form.Root>\n      </Box>\n\n      {readonly ? (\n        <Inset clip=\"border-box\" side=\"bottom\">\n          <Box\n            mt=\"5\"\n            px=\"5\"\n            py=\"4\"\n            style={{ backgroundColor: 'var(--accent-a3)' }}\n            width=\"100%\"\n          >\n            <Flex align=\"center\" gap=\"4\" justify=\"center\">\n              <Typo>{sessionNumber || '-'}회차 세션을 완료하셨나요?</Typo>\n              <Button onClick={onClickCompleteSession} size=\"small\">\n                세션 종료하기\n                <ArrowRightIcon />\n              </Button>\n            </Flex>\n          </Box>\n        </Inset>\n      ) : null}\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-HQSSAZHP.js

@@ -0,0 +1,84 @@
+import {
+  Kbd
+} from "./chunk-TULWX7D6.js";
+import {
+  Code
+} from "./chunk-OHMOP5PV.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Typo
+} from "./chunk-52MVZ6AN.js";
+
+// src/molecules/force-refresh.tsx
+import { DotsVerticalIcon, ReloadIcon } from "@radix-ui/react-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CodeSize3(props) {
+  return /* @__PURE__ */ jsx(
+    Code,
+    {
+      style: {
+        display: "inline-flex",
+        justifyItems: "center",
+        alignItems: "center"
+      },
+      children: props.children
+    }
+  );
+}
+function ForceRefresh() {
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+    /* @__PURE__ */ jsxs(Typo, { children: [
+      "1. \uD06C\uB86C \uBE0C\uB77C\uC6B0\uC800 \uC624\uB978\uCABD \uC0C1\uB2E8\uC758",
+      " ",
+      /* @__PURE__ */ jsxs(CodeSize3, { children: [
+        /* @__PURE__ */ jsx(DotsVerticalIcon, { height: "13px" }),
+        "\uB354\uBCF4\uAE30"
+      ] }),
+      "\uC544\uC774\uCF58\uC744 \uD074\uB9AD\uD569\uB2C8\uB2E4."
+    ] }),
+    /* @__PURE__ */ jsxs(Typo, { children: [
+      "2. ",
+      /* @__PURE__ */ jsx(CodeSize3, { children: "\uB3C4\uAD6C \uB354\uBCF4\uAE30" }),
+      " ",
+      ">",
+      " ",
+      /* @__PURE__ */ jsx(CodeSize3, { children: "\uAC1C\uBC1C\uC790 \uB3C4\uAD6C" }),
+      " \uBA54\uB274\uB97C \uC120\uD0DD\uD569\uB2C8\uB2E4. (\uB610\uB294 \uC544\uB798\uC758 \uB2E8\uCD95\uD0A4\uB97C \uC0AC\uC6A9 \uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.)"
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", p: "0", pl: "3", children: [
+      /* @__PURE__ */ jsxs(Typo, { children: [
+        "a. \uC708\uB3C4\uC6B0 \uB2E8\uCD95\uD0A4: ",
+        /* @__PURE__ */ jsx(Kbd, { children: "F12" })
+      ] }),
+      /* @__PURE__ */ jsxs(Typo, { children: [
+        "b. \uB9E5 \uB2E8\uCD95\uD0A4: ",
+        /* @__PURE__ */ jsx(Kbd, { children: "Option" }),
+        " + ",
+        /* @__PURE__ */ jsx(Kbd, { children: "Command" }),
+        " + ",
+        /* @__PURE__ */ jsx(Kbd, { children: "I" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Typo, { children: [
+      "3. \uAC1C\uBC1C\uC790 \uB3C4\uAD6C\uAC00 \uC5F4\uB9AC\uBA74, \uBE0C\uB77C\uC6B0\uC800 \uC0C1\uB2E8\uC5D0 \uC788\uB294",
+      " ",
+      /* @__PURE__ */ jsxs(CodeSize3, { children: [
+        /* @__PURE__ */ jsx(ReloadIcon, { style: { paddingRight: "5px" } }),
+        "\uC0C8\uB85C\uACE0\uCE68 \uBC84\uD2BC"
+      ] }),
+      "\uC744 \uC6B0\uD074\uB9AD\uD569\uB2C8\uB2E4."
+    ] }),
+    /* @__PURE__ */ jsxs(Typo, { children: [
+      "4. \uC0C8\uB85C\uACE0\uCE68 \uBA54\uB274\uC5D0\uC11C ",
+      /* @__PURE__ */ jsx(CodeSize3, { children: "\uCE90\uC2DC \uBE44\uC6B0\uAE30 \uBC0F \uAC15\uB825 \uC0C8\uB85C\uACE0\uCE68" }),
+      "\uC744 \uD074\uB9AD\uD569\uB2C8\uB2E4."
+    ] })
+  ] });
+}
+
+export {
+  ForceRefresh
+};
+//# sourceMappingURL=chunk-HQSSAZHP.js.map

package/dist/chunk-HQSSAZHP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/force-refresh.tsx"],"sourcesContent":["import React from 'react';\nimport { DotsVerticalIcon, ReloadIcon } from '@radix-ui/react-icons';\nimport { Typo } from '../atoms/typo';\nimport { Code } from '../atoms/code';\nimport { Kbd } from '../atoms/kbd';\nimport { Flex } from '../atoms/flex';\n\nfunction CodeSize3(props: { children: React.ReactNode }): React.ReactElement {\n  return (\n    <Code\n      style={{\n        display: 'inline-flex',\n        justifyItems: 'center',\n        alignItems: 'center',\n      }}\n    >\n      {props.children}\n    </Code>\n  );\n}\n\nexport function ForceRefresh(): React.ReactElement {\n  return (\n    <Flex direction=\"column\" gap=\"2\">\n      <Typo>\n        1. 크롬 브라우저 오른쪽 상단의{' '}\n        <CodeSize3>\n          <DotsVerticalIcon height=\"13px\" />\n          더보기\n        </CodeSize3>\n        아이콘을 클릭합니다.\n      </Typo>\n      <Typo>\n        2. <CodeSize3>도구 더보기</CodeSize3> {'>'}{' '}\n        <CodeSize3>개발자 도구</CodeSize3> 메뉴를 선택합니다. (또는 아래의\n        단축키를 사용 할 수 있습니다.)\n      </Typo>\n      <Flex direction=\"column\" gap=\"3\" p=\"0\" pl=\"3\">\n        <Typo>\n          a. 윈도우 단축키: <Kbd>F12</Kbd>\n        </Typo>\n        <Typo>\n          b. 맥 단축키: <Kbd>Option</Kbd> + <Kbd>Command</Kbd> + <Kbd>I</Kbd>\n        </Typo>\n      </Flex>\n\n      <Typo>\n        3. 개발자 도구가 열리면, 브라우저 상단에 있는{' '}\n        <CodeSize3>\n          <ReloadIcon style={{ paddingRight: '5px' }} />\n          새로고침 버튼\n        </CodeSize3>\n        을 우클릭합니다.\n      </Typo>\n\n      <Typo>\n        4. 새로고침 메뉴에서 <CodeSize3>캐시 비우기 및 강력 새로고침</CodeSize3>\n        을 클릭합니다.\n      </Typo>\n    </Flex>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AACA,SAAS,kBAAkB,kBAAkB;AAQzC,cAiBI,YAjBJ;AAFJ,SAAS,UAAU,OAA0D;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,cAAc;AAAA,QACd,YAAY;AAAA,MACd;AAAA,MAEC,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEO,SAAS,eAAmC;AACjD,SACE,qBAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,yBAAC,QAAK;AAAA;AAAA,MACe;AAAA,MACnB,qBAAC,aACC;AAAA,4BAAC,oBAAiB,QAAO,QAAO;AAAA,QAAE;AAAA,SAEpC;AAAA,MAAY;AAAA,OAEd;AAAA,IACA,qBAAC,QAAK;AAAA;AAAA,MACD,oBAAC,aAAU,6CAAM;AAAA,MAAY;AAAA,MAAE;AAAA,MAAK;AAAA,MACvC,oBAAC,aAAU,6CAAM;AAAA,MAAY;AAAA,OAE/B;AAAA,IACA,qBAAC,QAAK,WAAU,UAAS,KAAI,KAAI,GAAE,KAAI,IAAG,KACxC;AAAA,2BAAC,QAAK;AAAA;AAAA,QACQ,oBAAC,OAAI,iBAAG;AAAA,SACtB;AAAA,MACA,qBAAC,QAAK;AAAA;AAAA,QACM,oBAAC,OAAI,oBAAM;AAAA,QAAM;AAAA,QAAG,oBAAC,OAAI,qBAAO;AAAA,QAAM;AAAA,QAAG,oBAAC,OAAI,eAAC;AAAA,SAC3D;AAAA,OACF;AAAA,IAEA,qBAAC,QAAK;AAAA;AAAA,MACwB;AAAA,MAC5B,qBAAC,aACC;AAAA,4BAAC,cAAW,OAAO,EAAE,cAAc,MAAM,GAAG;AAAA,QAAE;AAAA,SAEhD;AAAA,MAAY;AAAA,OAEd;AAAA,IAEA,qBAAC,QAAK;AAAA;AAAA,MACS,oBAAC,aAAU,0FAAgB;AAAA,MAAY;AAAA,OAEtD;AAAA,KACF;AAEJ;","names":[]}