@tipp/ui 1.5.6 → 1.5.7

package/dist/chunk-2XXY6PJ6.js

@@ -0,0 +1,179 @@
+import {
+  Popover
+} from "./chunk-5AVBYDPB.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Heading
+} from "./chunk-HK224ADT.js";
+import {
+  Separator
+} from "./chunk-HYITAA4J.js";
+import {
+  IconButton
+} from "./chunk-O3DNDMV3.js";
+import {
+  Card
+} from "./chunk-2ZQK7NTN.js";
+import {
+  Collapse
+} from "./chunk-LZJR77Q2.js";
+import {
+  Badge
+} from "./chunk-EWD4AO5N.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  Typo
+} from "./chunk-52MVZ6AN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Button
+} from "./chunk-U7JPP7WJ.js";
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  Pencil1Icon,
+  RocketIcon,
+  TrashIcon
+} from "./chunk-OAUNSXK7.js";
+import {
+  __spreadValues
+} from "./chunk-N552FDTV.js";
+
+// src/app/platform/goal-manage-card-read.tsx
+import { useCallback, useMemo, useState } from "react";
+import { format } from "date-fns";
+import { jsx, jsxs } from "react/jsx-runtime";
+function GoalManageCardRead(props) {
+  const {
+    title,
+    dueDate,
+    completed,
+    expectedEffect,
+    huddle,
+    onClickDelete,
+    onClickEdit,
+    defaultOpen,
+    onCompleteChange
+  } = props;
+  const [open, setOpen] = useState(Boolean(defaultOpen));
+  const onClickOpen = useCallback(() => {
+    setOpen((p) => !p);
+  }, []);
+  const icon = open ? /* @__PURE__ */ jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {});
+  const badgeMeta = useMemo(() => {
+    if (!completed && dueDate) {
+      if (dueDate < /* @__PURE__ */ new Date())
+        return { color: "error", children: "\uBBF8\uB2EC\uC131" };
+      return {
+        color: "success",
+        children: "\uC9C4\uD589 \uC911"
+      };
+    }
+    return null;
+  }, [completed, dueDate]);
+  const renderSubTitle = useCallback((subTitle) => {
+    return /* @__PURE__ */ jsx(Heading, { mb: "2", variant: "heading5", children: subTitle });
+  }, []);
+  const renderSubContent = useCallback((content) => {
+    return /* @__PURE__ */ jsx(Typo, { as: "p", color: "gray", children: content });
+  }, []);
+  const renderCompleteButton = useCallback(() => {
+    if (completed) {
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => onCompleteChange == null ? void 0 : onCompleteChange(false),
+          size: "small",
+          variant: "surface",
+          children: "\uC9C4\uD589\uC911\uC778 \uACFC\uC81C\uB85C \uB3CC\uB824\uB193\uAE30"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(Popover.Root, { children: [
+      /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsxs(Button, { size: "small", children: [
+        /* @__PURE__ */ jsx(RocketIcon, {}),
+        "\uB2EC\uC131\uD558\uAE30"
+      ] }) }),
+      /* @__PURE__ */ jsxs(Popover.Content, { children: [
+        /* @__PURE__ */ jsx(Typo, { color: "gray", children: "\uBAA9\uD45C\uB97C \uB2EC\uC131\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
+        /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", mt: "3", children: [
+          /* @__PURE__ */ jsx(Popover.Close, { children: /* @__PURE__ */ jsx(Button, { color: "gray", size: "small", variant: "outline", children: "\uC544\uB2C8\uC694" }) }),
+          /* @__PURE__ */ jsx(Popover.Close, { children: /* @__PURE__ */ jsx(Button, { onClick: props.onClickComplete, size: "small", children: "\uC608" }) })
+        ] })
+      ] })
+    ] });
+  }, [completed, onCompleteChange, props.onClickComplete]);
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Grid, { align: "center", columns: "auto 1fr", gapX: "3", children: [
+    /* @__PURE__ */ jsx(IconButton, { onClick: onClickOpen, variant: "ghost", children: icon }),
+    /* @__PURE__ */ jsx(Heading, { variant: "heading4", children: title }),
+    /* @__PURE__ */ jsxs(Flex, { align: "center", gridColumnStart: "2", justify: "between", mt: "2", children: [
+      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", children: [
+        badgeMeta ? /* @__PURE__ */ jsx(Badge, __spreadValues({}, badgeMeta)) : null,
+        /* @__PURE__ */ jsx(Typo, { color: "gray", children: dueDate ? format(dueDate, "yyyy\uB144 MM\uC6D4 dd\uC77C") : null })
+      ] }),
+      renderCompleteButton()
+    ] }),
+    open ? /* @__PURE__ */ jsx(
+      Separator,
+      {
+        mb: "4",
+        mt: "4",
+        size: "4",
+        style: { gridColumnStart: "span 2" }
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(Box, { gridColumnStart: "2", p: "0", children: /* @__PURE__ */ jsxs(Collapse, { open, children: [
+      /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "5", children: [
+        /* @__PURE__ */ jsxs(Box, { children: [
+          renderSubTitle(
+            "\uD574\uB2F9 \uBAA9\uD45C\uB97C \uB2EC\uC131\uD558\uBA74, \uC544\uB798\uC640 \uAC19\uC740 \uACB0\uACFC\uB97C \uC5BB\uC744 \uC218 \uC788\uC2B5\uB2C8\uB2E4"
+          ),
+          renderSubContent(expectedEffect)
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          renderSubTitle("\uD574\uB2F9 \uBAA9\uD45C\uB97C \uB2EC\uC131\uD558\uAE30 \uC704\uD574 \uD544\uC694\uD55C \uD5C8\uB4E4"),
+          renderSubContent(huddle)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "3", justify: "end", mt: "3", children: [
+        /* @__PURE__ */ jsxs(Popover.Root, { children: [
+          /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              color: "gray",
+              onClick: onClickDelete,
+              size: "small",
+              variant: "ghost",
+              children: [
+                /* @__PURE__ */ jsx(TrashIcon, {}),
+                "\uC0AD\uC81C\uD558\uAE30"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(Popover.Content, { children: [
+            /* @__PURE__ */ jsx(Typo, { children: "\uBAA9\uD45C\uB97C \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?" }),
+            /* @__PURE__ */ jsxs(Flex, { gap: "3", mt: "3", children: [
+              /* @__PURE__ */ jsx(Popover.Close, { children: /* @__PURE__ */ jsx(Button, { color: "gray", size: "small", variant: "outline", children: "\uC544\uB2C8\uC694" }) }),
+              /* @__PURE__ */ jsx(Popover.Close, { children: /* @__PURE__ */ jsx(Button, { onClick: onClickDelete, size: "small", children: "\uC608" }) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Button, { onClick: onClickEdit, size: "small", variant: "surface", children: [
+          /* @__PURE__ */ jsx(Pencil1Icon, {}),
+          "\uC218\uC815\uD558\uAE30"
+        ] })
+      ] })
+    ] }) })
+  ] }) });
+}
+
+export {
+  GoalManageCardRead
+};
+//# sourceMappingURL=chunk-2XXY6PJ6.js.map

package/dist/chunk-2XXY6PJ6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app/platform/goal-manage-card-read.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { format } from 'date-fns';\nimport type { BadgeProps } from '../../atoms';\nimport {\n  Box,\n  Button,\n  Card,\n  Collapse,\n  Flex,\n  Heading,\n  Badge,\n  Typo,\n  Popover,\n  Grid,\n  Separator,\n  IconButton,\n} from '../../atoms';\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  Pencil1Icon,\n  RocketIcon,\n  TrashIcon,\n} from '../../icon';\n\nexport interface GoalManageCardProps {\n  defaultOpen?: boolean;\n  title?: string;\n  dueDate?: Date;\n  completed?: boolean;\n  expectedEffect?: string;\n  huddle?: string;\n  onClickDelete?: () => void;\n  onClickEdit?: () => void;\n  onClickComplete?: () => void;\n  onCompleteChange?: (completed: boolean) => void;\n}\n\nexport function GoalManageCardRead(\n  props: GoalManageCardProps\n): React.ReactElement {\n  const {\n    title,\n    dueDate,\n    completed,\n    expectedEffect,\n    huddle,\n    onClickDelete,\n    onClickEdit,\n    defaultOpen,\n    onCompleteChange,\n  } = props;\n  const [open, setOpen] = useState<boolean>(Boolean(defaultOpen));\n  const onClickOpen = useCallback(() => {\n    setOpen((p) => !p);\n  }, []);\n\n  const icon = open ? <ChevronUpIcon /> : <ChevronDownIcon />;\n\n  const badgeMeta = useMemo<BadgeProps | null>(() => {\n    if (!completed && dueDate) {\n      if (dueDate < new Date()) return { color: 'error', children: '미달성' };\n      return {\n        color: 'success',\n        children: '진행 중',\n      } as const;\n    }\n    return null;\n  }, [completed, dueDate]);\n\n  const renderSubTitle = useCallback((subTitle: string) => {\n    return (\n      <Heading mb=\"2\" variant=\"heading5\">\n        {subTitle}\n      </Heading>\n    );\n  }, []);\n\n  const renderSubContent = useCallback((content?: string) => {\n    return (\n      <Typo as=\"p\" color=\"gray\">\n        {content}\n      </Typo>\n    );\n  }, []);\n\n  const renderCompleteButton = useCallback(() => {\n    if (completed) {\n      return (\n        <Button\n          onClick={() => onCompleteChange?.(false)}\n          size=\"small\"\n          variant=\"surface\"\n        >\n          진행중인 과제로 돌려놓기\n        </Button>\n      );\n    }\n    return (\n      <Popover.Root>\n        <Popover.Trigger>\n          <Button size=\"small\">\n            <RocketIcon />\n            달성하기\n          </Button>\n        </Popover.Trigger>\n        <Popover.Content>\n          <Typo color=\"gray\">목표를 달성하시겠습니까?</Typo>\n          <Flex gap=\"3\" justify=\"end\" mt=\"3\">\n            <Popover.Close>\n              <Button color=\"gray\" size=\"small\" variant=\"outline\">\n                아니요\n              </Button>\n            </Popover.Close>\n            <Popover.Close>\n              <Button onClick={props.onClickComplete} size=\"small\">\n                예\n              </Button>\n            </Popover.Close>\n          </Flex>\n        </Popover.Content>\n      </Popover.Root>\n    );\n  }, [completed, onCompleteChange, props.onClickComplete]);\n\n  return (\n    <Card>\n      <Grid align=\"center\" columns=\"auto 1fr\" gapX=\"3\">\n        <IconButton onClick={onClickOpen} variant=\"ghost\">\n          {icon}\n        </IconButton>\n        <Heading variant=\"heading4\">{title}</Heading>\n\n        <Flex align=\"center\" gridColumnStart=\"2\" justify=\"between\" mt=\"2\">\n          <Flex align=\"center\" gap=\"3\">\n            {badgeMeta ? <Badge {...badgeMeta} /> : null}\n            <Typo color=\"gray\">\n              {dueDate ? format(dueDate, 'yyyy년 MM월 dd일') : null}\n            </Typo>\n          </Flex>\n          {renderCompleteButton()}\n        </Flex>\n        {open ? (\n          <Separator\n            mb=\"4\"\n            mt=\"4\"\n            size=\"4\"\n            style={{ gridColumnStart: 'span 2' }}\n          />\n        ) : null}\n        <Box gridColumnStart=\"2\" p=\"0\">\n          <Collapse open={open}>\n            <Flex direction=\"column\" gap=\"5\">\n              <Box>\n                {renderSubTitle(\n                  '해당 목표를 달성하면, 아래와 같은 결과를 얻을 수 있습니다'\n                )}\n                {renderSubContent(expectedEffect)}\n              </Box>\n              <Box>\n                {renderSubTitle('해당 목표를 달성하기 위해 필요한 허들')}\n                {renderSubContent(huddle)}\n              </Box>\n            </Flex>\n            <Flex align=\"center\" gap=\"3\" justify=\"end\" mt=\"3\">\n              <Popover.Root>\n                <Popover.Trigger>\n                  <Button\n                    color=\"gray\"\n                    onClick={onClickDelete}\n                    size=\"small\"\n                    variant=\"ghost\"\n                  >\n                    <TrashIcon />\n                    삭제하기\n                  </Button>\n                </Popover.Trigger>\n                <Popover.Content>\n                  <Typo>목표를 삭제하시겠습니까?</Typo>\n                  <Flex gap=\"3\" mt=\"3\">\n                    <Popover.Close>\n                      <Button color=\"gray\" size=\"small\" variant=\"outline\">\n                        아니요\n                      </Button>\n                    </Popover.Close>\n                    <Popover.Close>\n                      <Button onClick={onClickDelete} size=\"small\">\n                        예\n                      </Button>\n                    </Popover.Close>\n                  </Flex>\n                </Popover.Content>\n              </Popover.Root>\n              <Button onClick={onClickEdit} size=\"small\" variant=\"surface\">\n                <Pencil1Icon />\n                수정하기\n              </Button>\n            </Flex>\n          </Collapse>\n        </Box>\n      </Grid>\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-36O5PZEJ.js

@@ -0,0 +1,176 @@
+import {
+  DatePickerButton
+} from "./chunk-LZ6IXRRC.js";
+import {
+  TimeSelect
+} from "./chunk-K55LGP5B.js";
+import {
+  getTimeOption,
+  parseTimeOption
+} from "./chunk-VAXB7NV2.js";
+import {
+  ResponseDisplay
+} from "./chunk-O4ZX5Z2J.js";
+import {
+  Dialog
+} from "./chunk-WRQLM673.js";
+import {
+  toast
+} from "./chunk-CYYWMYE7.js";
+import {
+  Separator
+} from "./chunk-HYITAA4J.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  Button
+} from "./chunk-U7JPP7WJ.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Form
+} from "./chunk-SRZ6X74X.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "./chunk-N552FDTV.js";
+
+// src/app/platform/edit-coaching-time.tsx
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getValueFromDefaultValue = (args) => {
+  return {
+    startTime: args.startAt ? getTimeOption(args.startAt) : "00:00",
+    endTime: args.endAt ? getTimeOption(args.endAt) : "00:00",
+    date: args.startAt || /* @__PURE__ */ new Date()
+  };
+};
+var getDateFromValue = (date, time) => {
+  const { hour, minute } = parseTimeOption(time);
+  return new Date(
+    date.getFullYear(),
+    date.getMonth(),
+    date.getDate(),
+    hour,
+    minute
+  );
+};
+function EditCoachingTime(props) {
+  const { defaultEndAt, defaultStartAt, onClickCancel } = props;
+  const [values, setValues] = useState(() => {
+    return getValueFromDefaultValue({
+      startAt: defaultStartAt,
+      endAt: defaultEndAt
+    });
+  });
+  const [timeError, setTimeError] = useState("");
+  const checkTimeError = useCallback(
+    (startTime, endTime) => {
+      const error = startTime >= endTime ? "\uC2DC\uC791\uC2DC\uAC04\uC744 \uC885\uB8CC\uC2DC\uAC04\uBCF4\uB2E4 \uBE60\uB974\uAC8C \uC120\uD0DD\uD574\uC8FC\uC138\uC694." : "";
+      if (error) {
+        setTimeError(error);
+        return false;
+      }
+      return true;
+    },
+    []
+  );
+  const onChangeStartTime = useCallback(
+    (v) => {
+      checkTimeError(v, values.endTime);
+      setValues((prev) => __spreadProps(__spreadValues({}, prev), {
+        startTime: v
+      }));
+    },
+    [checkTimeError, values.endTime]
+  );
+  const onChangeEndTime = useCallback(
+    (v) => {
+      checkTimeError(values.startTime, v);
+      setValues((prev) => __spreadProps(__spreadValues({}, prev), {
+        endTime: v
+      }));
+    },
+    [checkTimeError, values.startTime]
+  );
+  const onChangeDate = useCallback((date) => {
+    date && setValues((prev) => __spreadProps(__spreadValues({}, prev), {
+      date
+    }));
+  }, []);
+  const onClickSave = useCallback(() => {
+    if (checkTimeError(values.startTime, values.endTime)) {
+      const startAt = getDateFromValue(values.date, values.startTime);
+      const endAt = getDateFromValue(values.date, values.endTime);
+      props.onClickSave && props.onClickSave(startAt, endAt);
+    } else {
+      toast.error("\uC785\uB825 \uAC12\uC774 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.");
+    }
+  }, [checkTimeError, props, values.date, values.endTime, values.startTime]);
+  return /* @__PURE__ */ jsx(Box, { width: { initial: "100%" }, children: /* @__PURE__ */ jsxs(Form.Root, { children: [
+    /* @__PURE__ */ jsxs(Form.Field, { name: "date", children: [
+      /* @__PURE__ */ jsx(Form.Label, { variant: "caption", children: "\uB0A0\uC9DC" }),
+      /* @__PURE__ */ jsx(
+        DatePickerButton,
+        {
+          onChange: onChangeDate,
+          selected: values.date,
+          size: { initial: "large", xs: "medium" }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Grid,
+      {
+        align: "center",
+        columns: {
+          initial: "1fr 0 1fr",
+          xs: "1fr auto 1fr"
+        },
+        gapX: "3",
+        gapY: "2",
+        justify: "center",
+        mb: { initial: "5", xs: "4" },
+        mt: "5",
+        width: "100%",
+        children: [
+          /* @__PURE__ */ jsx(Form.Field, { name: "startTime", children: /* @__PURE__ */ jsx(Form.Label, { variant: "caption", children: "\uC2DC\uC791 \uC2DC\uAC04" }) }),
+          /* @__PURE__ */ jsx("div", {}),
+          /* @__PURE__ */ jsx(Form.Field, { name: "endTime", children: /* @__PURE__ */ jsx(Form.Label, { variant: "caption", children: "\uC885\uB8CC \uC2DC\uAC04" }) }),
+          /* @__PURE__ */ jsx(
+            TimeSelect,
+            {
+              onValueChange: onChangeStartTime,
+              size: { initial: "3", xs: "2" },
+              value: values.startTime
+            }
+          ),
+          /* @__PURE__ */ jsx(ResponseDisplay, { initial: /* @__PURE__ */ jsx("div", {}), xs: /* @__PURE__ */ jsx(Separator, {}) }),
+          /* @__PURE__ */ jsx(
+            TimeSelect,
+            {
+              onValueChange: onChangeEndTime,
+              size: { initial: "3", xs: "2" },
+              value: values.endTime
+            }
+          ),
+          /* @__PURE__ */ jsx(Form.Field, { name: "startEndTime", style: { gridColumn: "1/span 3" }, children: /* @__PURE__ */ jsx(Form.Message, { forceMatch: Boolean(timeError), children: timeError }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", children: [
+      /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { onClick: onClickCancel, type: "button", variant: "outline", children: "\uCDE8\uC18C\uD558\uAE30" }) }),
+      /* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { onClick: onClickSave, type: "button", children: "\uC800\uC7A5\uD558\uAE30" }) })
+    ] })
+  ] }) });
+}
+
+export {
+  EditCoachingTime
+};
+//# sourceMappingURL=chunk-36O5PZEJ.js.map

package/dist/chunk-36O5PZEJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app/platform/edit-coaching-time.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport {\n  Button,\n  Flex,\n  Form,\n  Grid,\n  Separator,\n  Box,\n  toast,\n  Dialog,\n} from '../../atoms';\nimport { DatePickerButton, TimeSelect } from '../../molecules';\nimport { getTimeOption, parseTimeOption } from '../../utils';\nimport { ResponseDisplay } from '../../layouts';\n\nexport interface EditCoachingTimeProps {\n  defaultStartAt?: Date;\n  defaultEndAt?: Date;\n  onClickSave?: (startAt: Date, endAt: Date) => void;\n  onClickCancel?: () => void;\n  sessionNumber?: number;\n}\n\ninterface Values {\n  startTime: string;\n  endTime: string;\n  date: Date;\n}\n\nconst getValueFromDefaultValue = (args: {\n  startAt?: Date;\n  endAt?: Date;\n}): Values => {\n  return {\n    startTime: args.startAt ? getTimeOption(args.startAt) : '00:00',\n    endTime: args.endAt ? getTimeOption(args.endAt) : '00:00',\n    date: args.startAt || new Date(),\n  };\n};\n\nconst getDateFromValue = (date: Date, time: string): Date => {\n  const { hour, minute } = parseTimeOption(time);\n  return new Date(\n    date.getFullYear(),\n    date.getMonth(),\n    date.getDate(),\n    hour,\n    minute\n  );\n};\n\nexport function EditCoachingTime(\n  props: EditCoachingTimeProps\n): React.ReactElement {\n  const { defaultEndAt, defaultStartAt, onClickCancel } = props;\n\n  const [values, setValues] = useState<Values>(() => {\n    return getValueFromDefaultValue({\n      startAt: defaultStartAt,\n      endAt: defaultEndAt,\n    });\n  });\n\n  const [timeError, setTimeError] = useState('');\n\n  const checkTimeError = useCallback(\n    (startTime: string, endTime: string): boolean => {\n      const error =\n        startTime >= endTime\n          ? '시작시간을 종료시간보다 빠르게 선택해주세요.'\n          : '';\n      if (error) {\n        setTimeError(error);\n        return false;\n      }\n      return true;\n    },\n    []\n  );\n\n  const onChangeStartTime = useCallback(\n    (v: string) => {\n      checkTimeError(v, values.endTime);\n      setValues((prev) => ({\n        ...prev,\n        startTime: v,\n      }));\n    },\n    [checkTimeError, values.endTime]\n  );\n\n  const onChangeEndTime = useCallback(\n    (v: string) => {\n      checkTimeError(values.startTime, v);\n      setValues((prev) => ({\n        ...prev,\n        endTime: v,\n      }));\n    },\n    [checkTimeError, values.startTime]\n  );\n\n  const onChangeDate = useCallback((date: Date | null) => {\n    date &&\n      setValues((prev) => ({\n        ...prev,\n        date,\n      }));\n  }, []);\n\n  const onClickSave = useCallback(() => {\n    if (checkTimeError(values.startTime, values.endTime)) {\n      const startAt = getDateFromValue(values.date, values.startTime);\n      const endAt = getDateFromValue(values.date, values.endTime);\n      props.onClickSave && props.onClickSave(startAt, endAt);\n    } else {\n      toast.error('입력 값이 유효하지 않습니다.');\n    }\n  }, [checkTimeError, props, values.date, values.endTime, values.startTime]);\n\n  return (\n    <Box width={{ initial: '100%' }}>\n      <Form.Root>\n        <Form.Field name=\"date\">\n          <Form.Label variant=\"caption\">날짜</Form.Label>\n          <DatePickerButton\n            onChange={onChangeDate}\n            selected={values.date}\n            size={{ initial: 'large', xs: 'medium' }}\n          />\n        </Form.Field>\n        <Grid\n          align=\"center\"\n          columns={{\n            initial: '1fr 0 1fr',\n            xs: '1fr auto 1fr',\n          }}\n          gapX=\"3\"\n          gapY=\"2\"\n          justify=\"center\"\n          mb={{ initial: '5', xs: '4' }}\n          mt=\"5\"\n          width=\"100%\"\n        >\n          <Form.Field name=\"startTime\">\n            <Form.Label variant=\"caption\">시작 시간</Form.Label>\n          </Form.Field>\n          <div />\n          <Form.Field name=\"endTime\">\n            <Form.Label variant=\"caption\">종료 시간</Form.Label>\n          </Form.Field>\n          <TimeSelect\n            onValueChange={onChangeStartTime}\n            size={{ initial: '3', xs: '2' }}\n            value={values.startTime}\n          />\n          <ResponseDisplay initial={<div />} xs={<Separator />} />\n\n          <TimeSelect\n            onValueChange={onChangeEndTime}\n            size={{ initial: '3', xs: '2' }}\n            value={values.endTime}\n          />\n          <Form.Field name=\"startEndTime\" style={{ gridColumn: '1/span 3' }}>\n            <Form.Message forceMatch={Boolean(timeError)}>\n              {timeError}\n            </Form.Message>\n          </Form.Field>\n        </Grid>\n        <Flex gap=\"3\" justify=\"end\">\n          <Dialog.Close>\n            <Button onClick={onClickCancel} type=\"button\" variant=\"outline\">\n              취소하기\n            </Button>\n          </Dialog.Close>\n          <Dialog.Close>\n            <Button onClick={onClickSave} type=\"button\">\n              저장하기\n            </Button>\n          </Dialog.Close>\n        </Flex>\n      </Form.Root>\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-3A53I2GY.js

@@ -0,0 +1,169 @@
+import {
+  Typo
+} from "./chunk-52MVZ6AN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Avatar
+} from "./chunk-3SSSCLJ5.js";
+import {
+  CheckIcon
+} from "./chunk-OXXF2CUB.js";
+
+// src/molecules/stepper.tsx
+import { createContext, Children, useContext, useMemo } from "react";
+import { Separator } from "@radix-ui/themes";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StepContext = createContext({
+  active: false,
+  completed: false,
+  index: 0
+});
+function Root(props) {
+  const {
+    activeStep = 0,
+    children,
+    width,
+    minWidth,
+    maxWidth,
+    direction = "vertical"
+  } = props;
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      gap: "3",
+      style: {
+        width,
+        minWidth,
+        maxWidth
+      },
+      children: Children.map(children, (child, index) => {
+        return /* @__PURE__ */ jsx(
+          StepContext.Provider,
+          {
+            value: {
+              active: index === activeStep,
+              completed: index < activeStep,
+              index,
+              direction
+            },
+            children: child
+          }
+        );
+      })
+    }
+  );
+}
+function Step(props) {
+  const { Icon, children } = props;
+  const {
+    active,
+    completed,
+    index,
+    direction = "vertical"
+  } = useContext(StepContext);
+  const connector = index > 0 ? /* @__PURE__ */ jsx(
+    Separator,
+    {
+      style: {
+        width: `calc(100% - 40px)`,
+        position: "absolute",
+        top: 16,
+        right: `calc(50% + 26px)`
+      }
+    }
+  ) : null;
+  const InnerStep = useMemo(() => {
+    if (active) {
+      return ActiveStep;
+    }
+    if (completed) {
+      return CompleteStep;
+    }
+    return IncompleteStep;
+  }, [completed, active]);
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      align: "center",
+      direction: direction === "horizontal" ? "row" : "column",
+      gap: "4",
+      position: "relative",
+      style: { flex: 1 },
+      children: [
+        connector,
+        /* @__PURE__ */ jsx(InnerStep, { Icon, children })
+      ]
+    }
+  );
+}
+function CompleteStep(props) {
+  const { Icon, children } = props;
+  const { completed, active } = useContext(StepContext);
+  const background = "var(--accent-a4)";
+  const border = "1px solid var(--accent-7)";
+  const color = "var(--accent-contrast)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ jsx(CheckIcon, { fill: color, height: 16, width: 16 }),
+        radius: "full",
+        size: "medium",
+        style: {
+          border,
+          background
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typo, { align: "center", variant: "caption", children })
+  ] });
+}
+function IncompleteStep(props) {
+  const { Icon, children } = props;
+  const { completed, active, index } = useContext(StepContext);
+  const background = "var(--gray-5)";
+  const color = "var(--gray-a11)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ jsx(Typo, { style: { color }, children: index + 1 }),
+        radius: "full",
+        size: "medium",
+        style: {
+          background
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typo, { align: "center", style: { color }, variant: "caption", children })
+  ] });
+}
+function ActiveStep(props) {
+  const { Icon, children } = props;
+  const { completed, active, index } = useContext(StepContext);
+  const background = "var(--accent-10)";
+  const color = "var(--accent-contrast)";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        fallback: /* @__PURE__ */ jsx(Typo, { style: { color }, weight: "bold", children: index + 1 }),
+        radius: "full",
+        size: "medium",
+        style: { background }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typo, { align: "center", variant: "caption", weight: "bold", children })
+  ] });
+}
+var Stepper = {
+  Root,
+  Step
+};
+
+export {
+  Stepper
+};
+//# sourceMappingURL=chunk-3A53I2GY.js.map

package/dist/chunk-3A53I2GY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/molecules/stepper.tsx"],"sourcesContent":["import React, { createContext, Children, useContext, useMemo } from 'react';\nimport { Separator } from '@radix-ui/themes';\nimport { Flex } from '../atoms/flex';\nimport { Avatar } from '../atoms/avatar';\nimport { CheckIcon } from '../icon';\nimport { Typo } from '../atoms/typo';\n\ninterface StepState extends Pick<StepperProps, 'direction'> {\n  active: boolean;\n  completed: boolean;\n  index: number;\n}\n\nconst StepContext = createContext<StepState>({\n  active: false,\n  completed: false,\n  index: 0,\n});\n\ninterface StepperProps {\n  // 활성화된 스텝 인덱스. 0부터 시작\n  activeStep?: number;\n  children?: React.ReactElement | React.ReactElement[];\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  /** icon과 children의 배치 방향. 기본 값 vertical */\n  direction?: 'horizontal' | 'vertical';\n}\n\nfunction Root(props: StepperProps): React.ReactElement {\n  const {\n    activeStep = 0,\n    children,\n    width,\n    minWidth,\n    maxWidth,\n    direction = 'vertical',\n  } = props;\n\n  return (\n    <Flex\n      gap=\"3\"\n      style={{\n        width,\n        minWidth,\n        maxWidth,\n      }}\n    >\n      {Children.map(children, (child, index) => {\n        return (\n          <StepContext.Provider\n            value={{\n              active: index === activeStep,\n              completed: index < activeStep,\n              index,\n              direction,\n            }}\n          >\n            {child}\n          </StepContext.Provider>\n        );\n      })}\n    </Flex>\n  );\n}\n\ninterface StepProps {\n  children?: React.ReactNode;\n  /** 아이콘 커스텀 필요시 사용 */\n  Icon?: (args: { completed: boolean; active: boolean }) => React.ReactElement;\n}\n\nfunction Step(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const {\n    active,\n    completed,\n    index,\n    direction = 'vertical',\n  } = useContext(StepContext);\n\n  const connector =\n    index > 0 ? (\n      <Separator\n        style={{\n          width: `calc(100% - 40px)`,\n          position: 'absolute',\n          top: 16,\n          right: `calc(50% + 26px)`,\n        }}\n      />\n    ) : null;\n\n  const InnerStep = useMemo<(props: StepProps) => React.ReactElement>(() => {\n    if (active) {\n      return ActiveStep;\n    }\n    if (completed) {\n      return CompleteStep;\n    }\n    return IncompleteStep;\n  }, [completed, active]);\n\n  return (\n    <Flex\n      align=\"center\"\n      direction={direction === 'horizontal' ? 'row' : 'column'}\n      gap=\"4\"\n      position=\"relative\"\n      style={{ flex: 1 }}\n    >\n      {connector}\n      <InnerStep Icon={Icon}>{children}</InnerStep>\n    </Flex>\n  );\n}\n\nfunction CompleteStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active } = useContext(StepContext);\n  const background = 'var(--accent-a4)';\n  const border = '1px solid var(--accent-7)';\n  const color = 'var(--accent-contrast)';\n\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={<CheckIcon fill={color} height={16} width={16} />}\n          radius=\"full\"\n          size=\"medium\"\n          style={{\n            border,\n            background,\n          }}\n        />\n      )}\n      <Typo align=\"center\" variant=\"caption\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nfunction IncompleteStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active, index } = useContext(StepContext);\n  const background = 'var(--gray-5)';\n  const color = 'var(--gray-a11)';\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={<Typo style={{ color }}>{index + 1}</Typo>}\n          radius=\"full\"\n          size=\"medium\"\n          style={{\n            background,\n          }}\n        />\n      )}\n      <Typo align=\"center\" style={{ color }} variant=\"caption\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nfunction ActiveStep(props: StepProps): React.ReactElement {\n  const { Icon, children } = props;\n  const { completed, active, index } = useContext(StepContext);\n  const background = 'var(--accent-10)';\n  const color = 'var(--accent-contrast)';\n\n  return (\n    <>\n      {Icon ? (\n        <Icon active={active} completed={completed} />\n      ) : (\n        <Avatar\n          fallback={\n            <Typo style={{ color }} weight=\"bold\">\n              {index + 1}\n            </Typo>\n          }\n          radius=\"full\"\n          size=\"medium\"\n          style={{ background }}\n        />\n      )}\n      <Typo align=\"center\" variant=\"caption\" weight=\"bold\">\n        {children}\n      </Typo>\n    </>\n  );\n}\n\nexport const Stepper = {\n  Root,\n  Step,\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-3AKDXL7S.js

@@ -0,0 +1,63 @@
+import {
+  Heading
+} from "./chunk-HK224ADT.js";
+import {
+  Card
+} from "./chunk-2ZQK7NTN.js";
+import {
+  Badge
+} from "./chunk-EWD4AO5N.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  Typo
+} from "./chunk-52MVZ6AN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+
+// src/app/platform/session-review-simple-read.tsx
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SubTitleWrapper({
+  children,
+  title
+}) {
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "2", children: [
+    /* @__PURE__ */ jsx(Heading, { mb: "2", variant: "heading5", weight: "regular", children: title }),
+    /* @__PURE__ */ jsx(Box, { children })
+  ] });
+}
+function SessionReviewSimpleRead({
+  helpfulness,
+  review
+}) {
+  const helpfulnessMeta = useMemo(() => {
+    if (helpfulness) {
+      return {
+        text: "\uB124",
+        color: "success"
+      };
+    }
+    if (typeof helpfulness === "undefined") {
+      return {
+        text: "-",
+        color: "neutral"
+      };
+    }
+    return {
+      text: "\uC544\uB2C8\uC694",
+      color: "error"
+    };
+  }, [helpfulness]);
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "5", children: [
+    /* @__PURE__ */ jsx(SubTitleWrapper, { title: "\uC774\uBC88 \uCF54\uCE6D\uC774 \uBAA9\uD45C \uB2EC\uC131\uC5D0 \uB3C4\uC6C0\uC774 \uB418\uC5C8\uB098\uC694?", children: /* @__PURE__ */ jsx(Badge, { color: helpfulnessMeta.color, children: helpfulnessMeta.text }) }),
+    /* @__PURE__ */ jsx(SubTitleWrapper, { title: "\uC138\uC158 \uD6C4\uAE30", children: /* @__PURE__ */ jsx(Card, { children: review ? /* @__PURE__ */ jsx(Typo, { as: "p", children: review }) : /* @__PURE__ */ jsx(Typo, { color: "gray", children: "\uC785\uB825\uB41C \uD6C4\uAE30\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) }) })
+  ] }) });
+}
+
+export {
+  SessionReviewSimpleRead
+};
+//# sourceMappingURL=chunk-3AKDXL7S.js.map

package/dist/chunk-3AKDXL7S.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app/platform/session-review-simple-read.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { BadgeProps } from '../../atoms';\nimport { Badge, Box, Card, Flex, Heading, Typo } from '../../atoms';\n\nexport interface SessionReviewSimpleReadProps {\n  helpfulness?: boolean;\n  review?: string;\n}\n\nfunction SubTitleWrapper({\n  children,\n  title,\n}: {\n  children: React.ReactNode;\n  title: string;\n}): JSX.Element {\n  return (\n    <Flex direction=\"column\" gap=\"2\">\n      <Heading mb=\"2\" variant=\"heading5\" weight=\"regular\">\n        {title}\n      </Heading>\n\n      <Box>{children}</Box>\n    </Flex>\n  );\n}\n\nexport function SessionReviewSimpleRead({\n  helpfulness,\n  review,\n}: SessionReviewSimpleReadProps): React.ReactElement {\n  const helpfulnessMeta = useMemo<{\n    text: string;\n    color: BadgeProps['color'];\n  }>(() => {\n    if (helpfulness) {\n      return {\n        text: '네',\n        color: 'success',\n      };\n    }\n    if (typeof helpfulness === 'undefined') {\n      return {\n        text: '-',\n        color: 'neutral',\n      };\n    }\n    return {\n      text: '아니요',\n      color: 'error',\n    };\n  }, [helpfulness]);\n\n  return (\n    <Box>\n      <Flex direction=\"column\" gap=\"5\">\n        <SubTitleWrapper title=\"이번 코칭이 목표 달성에 도움이 되었나요?\">\n          <Badge color={helpfulnessMeta.color}>{helpfulnessMeta.text}</Badge>\n        </SubTitleWrapper>\n        <SubTitleWrapper title=\"세션 후기\">\n          <Card>\n            {review ? (\n              <Typo as=\"p\">{review}</Typo>\n            ) : (\n              <Typo color=\"gray\">입력된 후기가 없습니다.</Typo>\n            )}\n          </Card>\n        </SubTitleWrapper>\n      </Flex>\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,eAAe;AAiB3B,SACE,KADF;AARJ,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AACF,GAGgB;AACd,SACE,qBAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,wBAAC,WAAQ,IAAG,KAAI,SAAQ,YAAW,QAAO,WACvC,iBACH;AAAA,IAEA,oBAAC,OAAK,UAAS;AAAA,KACjB;AAEJ;AAEO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AACF,GAAqD;AACnD,QAAM,kBAAkB,QAGrB,MAAM;AACP,QAAI,aAAa;AACf,aAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AACA,QAAI,OAAO,gBAAgB,aAAa;AACtC,aAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,oBAAC,OACC,+BAAC,QAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,wBAAC,mBAAgB,OAAM,gHACrB,8BAAC,SAAM,OAAO,gBAAgB,OAAQ,0BAAgB,MAAK,GAC7D;AAAA,IACA,oBAAC,mBAAgB,OAAM,6BACrB,8BAAC,QACE,mBACC,oBAAC,QAAK,IAAG,KAAK,kBAAO,IAErB,oBAAC,QAAK,OAAM,QAAO,6EAAa,GAEpC,GACF;AAAA,KACF,GACF;AAEJ;","names":[]}