@tipp/ui 2.2.8 → 2.2.9

package/dist/chunk-JH2IOFCQ.js

@@ -0,0 +1,193 @@
+import {
+  TextArea
+} from "./chunk-5XYPLDI5.js";
+import {
+  TextField
+} from "./chunk-6NPTJBFE.js";
+import {
+  RadioGroup
+} from "./chunk-6DJOIRMF.js";
+import {
+  Select
+} from "./chunk-X2GMDZ7M.js";
+import {
+  CheckboxGroup
+} from "./chunk-W7X7KSJP.js";
+import {
+  Checkbox
+} from "./chunk-VYCYVN3L.js";
+import {
+  useDynamicForm
+} from "./chunk-6X73VRHP.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CRTRMMJ7.js";
+
+// src/atoms/number-input.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var NumberInput = forwardRef(
+  (props, ref) => {
+    const _a = props, { onChange, onInput, onKeyDown } = _a, rest = __objRest(_a, ["onChange", "onInput", "onKeyDown"]);
+    const handleNumberInput = (e) => {
+      const input = e.currentTarget;
+      const filteredValue = input.value.replace(/[^\d.-]/g, "");
+      if (input.value !== filteredValue) {
+        input.value = filteredValue;
+        if (onChange) {
+          onChange(e);
+        }
+      }
+      if (onInput) {
+        onInput(e);
+      }
+    };
+    const handleNumberKeyDown = (e) => {
+      if (e.nativeEvent.isComposing) {
+        e.preventDefault();
+        return;
+      }
+      const allowedKeys = [
+        "Backspace",
+        "Delete",
+        "Tab",
+        "Escape",
+        "Enter",
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "Home",
+        "End"
+      ];
+      if (allowedKeys.includes(e.key)) {
+        if (onKeyDown) {
+          onKeyDown(e);
+        }
+        return;
+      }
+      if ((e.ctrlKey || e.metaKey) && ["a", "c", "v", "x"].includes(e.key.toLowerCase())) {
+        if (onKeyDown) {
+          onKeyDown(e);
+        }
+        return;
+      }
+      if (!/^[\d.-]$/.test(e.key)) {
+        e.preventDefault();
+        return;
+      }
+      if (onKeyDown) {
+        onKeyDown(e);
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      TextField.Root,
+      __spreadValues({
+        ref,
+        inputMode: "numeric",
+        onInput: handleNumberInput,
+        onKeyDown: handleNumberKeyDown,
+        type: "text"
+      }, rest)
+    );
+  }
+);
+NumberInput.displayName = "NumberInput";
+
+// src/molecules/dynamic-field.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function DynamicFormField({
+  field
+}) {
+  const {
+    getFieldValue,
+    getFieldError,
+    getFieldTouched,
+    setFieldValue,
+    handleChange,
+    handleBlur
+  } = useDynamicForm();
+  const { name, type, placeholder, options, orientation = "vertical" } = field;
+  const value = getFieldValue(name);
+  const error = getFieldError(name);
+  const touched = getFieldTouched(name);
+  const hasError = Boolean(error && touched);
+  const commonProps = {
+    name,
+    value: String(value || ""),
+    onChange: handleChange,
+    onBlur: handleBlur,
+    placeholder,
+    error: hasError
+  };
+  switch (type) {
+    case "text":
+    case "email":
+    case "password":
+      return /* @__PURE__ */ jsx2(TextField.Root, __spreadProps(__spreadValues({}, commonProps), { type }));
+    case "number":
+      return /* @__PURE__ */ jsx2(NumberInput, __spreadValues({}, commonProps));
+    case "textarea":
+      return /* @__PURE__ */ jsx2(TextArea, __spreadProps(__spreadValues({}, commonProps), { rows: 4 }));
+    case "select":
+      return /* @__PURE__ */ jsxs(
+        Select.Root,
+        {
+          onValueChange: (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          value,
+          children: [
+            /* @__PURE__ */ jsx2(Select.Trigger, { placeholder }),
+            /* @__PURE__ */ jsx2(Select.Content, { children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsx2(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
+          ]
+        }
+      );
+    case "radio":
+      return /* @__PURE__ */ jsx2(
+        RadioGroup.Root,
+        {
+          onValueChange: (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          orientation,
+          value: String(value || ""),
+          children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsx2(RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ jsx2(
+        CheckboxGroup.Root,
+        {
+          onValueChange: (newValue) => {
+            void setFieldValue(name, newValue);
+          },
+          orientation,
+          value: Array.isArray(value) ? value.map(String) : [],
+          children: options == null ? void 0 : options.map((option) => /* @__PURE__ */ jsx2(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
+        }
+      );
+    case "single-checkbox":
+      return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "8px" }, children: [
+        /* @__PURE__ */ jsx2(
+          Checkbox,
+          {
+            checked: Boolean(value),
+            onCheckedChange: (checked) => {
+              void setFieldValue(name, checked);
+            }
+          }
+        ),
+        field.description ? /* @__PURE__ */ jsx2("div", { style: { fontSize: "14px", color: "#666", lineHeight: "1.4" }, children: field.description }) : null
+      ] });
+    default:
+      return null;
+  }
+}
+
+export {
+  DynamicFormField
+};
+//# sourceMappingURL=chunk-JH2IOFCQ.js.map

package/dist/chunk-JH2IOFCQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/number-input.tsx","../src/molecules/dynamic-field.tsx"],"sourcesContent":["import { TextField } from './text-field';\nimport type { RootProps } from './text-field';\nimport { forwardRef } from 'react';\n\nexport interface NumberInputProps extends Omit<RootProps, 'type' | 'inputMode'> {\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(\n  (props, ref) => {\n    const { onChange, onInput, onKeyDown, ...rest } = props;\n\n    const handleNumberInput = (\n      e: React.FormEvent<HTMLInputElement>\n    ): void => {\n      const input = e.currentTarget;\n      // 숫자, 마이너스, 점만 허용\n      const filteredValue = input.value.replace(/[^\\d.-]/g, '');\n      if (input.value !== filteredValue) {\n        input.value = filteredValue;\n        if (onChange) {\n          onChange(e as React.ChangeEvent<HTMLInputElement>);\n        }\n      }\n      if (onInput) {\n        onInput(e);\n      }\n    };\n\n    const handleNumberKeyDown = (\n      e: React.KeyboardEvent<HTMLInputElement>\n    ): void => {\n      // 한글 입력 방지 (IME 조합 중인 경우)\n      if (e.nativeEvent.isComposing) {\n        e.preventDefault();\n        return;\n      }\n\n      // 특수키는 허용 (backspace, delete, tab, escape, enter, arrow keys 등)\n      const allowedKeys = [\n        'Backspace',\n        'Delete',\n        'Tab',\n        'Escape',\n        'Enter',\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ];\n\n      if (allowedKeys.includes(e.key)) {\n        if (onKeyDown) {\n          onKeyDown(e);\n        }\n        return;\n      }\n\n      // Ctrl/Cmd + A, C, V, X 허용 (복사, 붙여넣기, 전체선택 등)\n      if (\n        (e.ctrlKey || e.metaKey) &&\n        ['a', 'c', 'v', 'x'].includes(e.key.toLowerCase())\n      ) {\n        if (onKeyDown) {\n          onKeyDown(e);\n        }\n        return;\n      }\n\n      // 숫자, 마이너스, 점만 허용\n      if (!/^[\\d.-]$/.test(e.key)) {\n        e.preventDefault();\n        return;\n      }\n\n      if (onKeyDown) {\n        onKeyDown(e);\n      }\n    };\n\n    return (\n      <TextField.Root\n        ref={ref}\n        inputMode=\"numeric\"\n        onInput={handleNumberInput}\n        onKeyDown={handleNumberKeyDown}\n        type=\"text\"\n        {...rest}\n      />\n    );\n  }\n);\n\nNumberInput.displayName = 'NumberInput';\n\n","import type * as Yup from 'yup';\nimport { useDynamicForm } from '../context/dynamic-form-context';\nimport { TextField } from '../atoms/text-field';\nimport { TextArea } from '../atoms/text-area';\nimport { Select } from '../atoms/select';\nimport { CheckboxGroup } from '../atoms/check-box-group';\nimport { RadioGroup } from '../atoms/radio-group';\nimport { Checkbox } from '../atoms/check-box';\nimport { NumberInput } from '../atoms/number-input';\n\nexport type FieldType =\n  | 'text'\n  | 'number'\n  | 'email'\n  | 'password'\n  | 'textarea'\n  | 'select'\n  | 'radio'\n  | 'checkbox'\n  | 'single-checkbox';\n\nexport interface FieldOption {\n  label: string;\n  value: string | number;\n}\n\nexport interface DynamicFormField {\n  name: string;\n  type: FieldType;\n  label: string;\n  placeholder?: string;\n  description?: string;\n  required?: boolean;\n  options?: FieldOption[];\n  validation?: Yup.Schema<unknown>;\n  orientation?: 'horizontal' | 'vertical';\n}\n\ninterface DynamicFormFieldRendererProps {\n  field: DynamicFormField;\n}\n\nexport function DynamicFormField({\n  field,\n}: DynamicFormFieldRendererProps): React.ReactElement | null {\n  const {\n    getFieldValue,\n    getFieldError,\n    getFieldTouched,\n    setFieldValue,\n    handleChange,\n    handleBlur,\n  } = useDynamicForm();\n  const { name, type, placeholder, options, orientation = 'vertical' } = field;\n\n  const value = getFieldValue(name);\n  const error = getFieldError(name);\n  const touched = getFieldTouched(name);\n  const hasError = Boolean(error && touched);\n\n  const commonProps = {\n    name,\n    value: String(value || ''),\n    onChange: handleChange,\n    onBlur: handleBlur,\n    placeholder,\n    error: hasError,\n  };\n\n  switch (type) {\n    case 'text':\n    case 'email':\n    case 'password':\n      return <TextField.Root {...commonProps} type={type} />;\n    case 'number':\n      return <NumberInput {...commonProps} />;\n    case 'textarea':\n      return <TextArea {...commonProps} rows={4} />;\n\n    case 'select':\n      return (\n        <Select.Root\n          onValueChange={(newValue: string) => {\n            void setFieldValue(name, newValue);\n          }}\n          value={value as string}\n        >\n          <Select.Trigger placeholder={placeholder} />\n          <Select.Content>\n            {options?.map((option) => (\n              <Select.Item key={option.value} value={String(option.value)}>\n                {option.label}\n              </Select.Item>\n            ))}\n          </Select.Content>\n        </Select.Root>\n      );\n\n    case 'radio':\n      return (\n        <RadioGroup.Root\n          onValueChange={(newValue: string) => {\n            void setFieldValue(name, newValue);\n          }}\n          orientation={orientation}\n          value={String(value || '')}\n        >\n          {options?.map((option) => (\n            <RadioGroup.Item key={option.value} value={String(option.value)}>\n              {option.label}\n            </RadioGroup.Item>\n          ))}\n        </RadioGroup.Root>\n      );\n\n    case 'checkbox':\n      return (\n        <CheckboxGroup.Root\n          onValueChange={(newValue: string[]) => {\n            void setFieldValue(name, newValue);\n          }}\n          orientation={orientation}\n          value={Array.isArray(value) ? value.map(String) : []}\n        >\n          {options?.map((option) => (\n            <CheckboxGroup.Item key={option.value} value={String(option.value)}>\n              {option.label}\n            </CheckboxGroup.Item>\n          ))}\n        </CheckboxGroup.Root>\n      );\n\n    case 'single-checkbox':\n      return (\n        <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>\n          <Checkbox\n            checked={Boolean(value)}\n            onCheckedChange={(checked: boolean) => {\n              void setFieldValue(name, checked);\n            }}\n          />\n          {field.description ? (\n            <div style={{ fontSize: '14px', color: '#666', lineHeight: '1.4' }}>\n              {field.description}\n            </div>\n          ) : null}\n        </div>\n      );\n\n    default:\n      return null;\n  }\n}\n"],"mappings":"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","names":["jsx"]}

package/dist/chunk-JITOJJ2U.js

@@ -0,0 +1,99 @@
+import {
+  Separator
+} from "./chunk-HYITAA4J.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Badge
+} from "./chunk-U3BQT7ZO.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  ArrowRightIcon,
+  TimerIcon
+} from "./chunk-V5XKNSCK.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+import {
+  Heading
+} from "./chunk-BESTU2AY.js";
+
+// src/app/platform/curriculum-card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CurriculumCard(props) {
+  const {
+    title,
+    imgTitle,
+    imgSrc,
+    description,
+    runningTime,
+    bgColor,
+    onClick
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      columns: { initial: "1", sm: "275px 1fr" },
+      gapX: "5",
+      gapY: "2",
+      onClick,
+      style: { cursor: "pointer" },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            height: "165px",
+            p: "3",
+            style: {
+              backgroundImage: `url(${imgSrc})`,
+              backgroundColor: bgColor,
+              backgroundPositionX: "right",
+              backgroundPositionY: "bottom",
+              backgroundRepeat: "no-repeat",
+              backgroundSize: "contain",
+              backgroundAttachment: "local"
+            },
+            width: "100%",
+            children: /* @__PURE__ */ jsx(Heading, { style: { whiteSpace: "break-spaces" }, variant: "heading3", children: imgTitle })
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", children: [
+          /* @__PURE__ */ jsxs(Grid, { columns: { initial: "1", xs: "1fr auto" }, gapY: "3", children: [
+            /* @__PURE__ */ jsx(Heading, { variant: "heading4", children: title }),
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                size: "medium",
+                style: { justifySelf: "flex-start" },
+                variant: "outline",
+                children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "1", children: [
+                  /* @__PURE__ */ jsx(TimerIcon, {}),
+                  runningTime
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Box, { style: { marginBottom: "auto" }, children: /* @__PURE__ */ jsx("ul", { style: { margin: 0, paddingLeft: 20 }, children: description == null ? void 0 : description.map((el) => {
+            return /* @__PURE__ */ jsx("li", { style: { marginBottom: 8 }, children: /* @__PURE__ */ jsx(Heading, { truncate: true, variant: "heading5", weight: "regular", children: el }) }, el);
+          }) }) }),
+          /* @__PURE__ */ jsx(Separator, { size: "4" }),
+          /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", justify: "end", children: [
+            /* @__PURE__ */ jsx(Typo, { color: "gray", children: "\uAC15\uC758 \uB4E3\uACE0 \uCF54\uCE58\uB2D8\uACFC \uBB34\uC81C\uD55C Q&A" }),
+            /* @__PURE__ */ jsx(ArrowRightIcon, { color: "gray" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  CurriculumCard
+};
+//# sourceMappingURL=chunk-JITOJJ2U.js.map

package/dist/chunk-JITOJJ2U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app/platform/curriculum-card.tsx"],"sourcesContent":["import React from 'react';\nimport { Badge } from '@/atoms/badge';\nimport { Box } from '@/atoms/box';\nimport { Grid } from '@/atoms/grid';\nimport { Heading } from '@/atoms/heading';\nimport { Typo } from '@/atoms/typo';\nimport { Separator } from '@/atoms/separator';\nimport { Flex } from '@/atoms/flex';\nimport { ArrowRightIcon, TimerIcon } from '@/icon';\n\nexport interface CurriculumCardProps {\n  title?: string;\n  imgTitle?: string;\n  imgSrc?: string;\n  description?: string[];\n  runningTime?: string;\n  bgColor?: string;\n  onClick?: () => void;\n}\n\nexport function CurriculumCard(props: CurriculumCardProps): React.ReactNode {\n  const {\n    title,\n    imgTitle,\n    imgSrc,\n    description,\n    runningTime,\n    bgColor,\n    onClick,\n  } = props;\n  return (\n    <Grid\n      columns={{ initial: '1', sm: '275px 1fr' }}\n      gapX=\"5\"\n      gapY=\"2\"\n      onClick={onClick}\n      style={{ cursor: 'pointer' }}\n    >\n      {/* 섬네일 */}\n      <Box\n        height=\"165px\"\n        p=\"3\"\n        style={{\n          backgroundImage: `url(${imgSrc})`,\n          backgroundColor: bgColor,\n          backgroundPositionX: 'right',\n          backgroundPositionY: 'bottom',\n          backgroundRepeat: 'no-repeat',\n          backgroundSize: 'contain',\n          backgroundAttachment: 'local',\n        }}\n        width=\"100%\"\n      >\n        <Heading style={{ whiteSpace: 'break-spaces' }} variant=\"heading3\">\n          {imgTitle}\n        </Heading>\n      </Box>\n      {/* 텍스트 */}\n      <Flex direction=\"column\" gap=\"3\">\n        {/* 제목 */}\n        <Grid columns={{ initial: '1', xs: '1fr auto' }} gapY=\"3\">\n          <Heading variant=\"heading4\">{title}</Heading>\n          <Badge\n            size=\"medium\"\n            style={{ justifySelf: 'flex-start' }}\n            variant=\"outline\"\n          >\n            <Flex align=\"center\" gap=\"1\">\n              <TimerIcon />\n              {runningTime}\n            </Flex>\n          </Badge>\n        </Grid>\n        {/* 설명 */}\n        <Box style={{ marginBottom: 'auto' }}>\n          <ul style={{ margin: 0, paddingLeft: 20 }}>\n            {description?.map((el) => {\n              return (\n                <li key={el} style={{ marginBottom: 8 }}>\n                  <Heading truncate variant=\"heading5\" weight=\"regular\">\n                    {el}\n                  </Heading>\n                </li>\n              );\n            })}\n          </ul>\n        </Box>\n        <Separator size=\"4\" />\n        <Flex align=\"center\" gap=\"2\" justify=\"end\">\n          <Typo color=\"gray\">강의 듣고 코치님과 무제한 Q&A</Typo>\n          <ArrowRightIcon color=\"gray\" />\n        </Flex>\n      </Flex>\n    </Grid>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDQ,cAcI,YAdJ;AAjCD,SAAS,eAAe,OAA6C;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,EAAE,SAAS,KAAK,IAAI,YAAY;AAAA,MACzC,MAAK;AAAA,MACL,MAAK;AAAA,MACL;AAAA,MACA,OAAO,EAAE,QAAQ,UAAU;AAAA,MAG3B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,QAAO;AAAA,YACP,GAAE;AAAA,YACF,OAAO;AAAA,cACL,iBAAiB,OAAO,MAAM;AAAA,cAC9B,iBAAiB;AAAA,cACjB,qBAAqB;AAAA,cACrB,qBAAqB;AAAA,cACrB,kBAAkB;AAAA,cAClB,gBAAgB;AAAA,cAChB,sBAAsB;AAAA,YACxB;AAAA,YACA,OAAM;AAAA,YAEN,8BAAC,WAAQ,OAAO,EAAE,YAAY,eAAe,GAAG,SAAQ,YACrD,oBACH;AAAA;AAAA,QACF;AAAA,QAEA,qBAAC,QAAK,WAAU,UAAS,KAAI,KAE3B;AAAA,+BAAC,QAAK,SAAS,EAAE,SAAS,KAAK,IAAI,WAAW,GAAG,MAAK,KACpD;AAAA,gCAAC,WAAQ,SAAQ,YAAY,iBAAM;AAAA,YACnC;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,OAAO,EAAE,aAAa,aAAa;AAAA,gBACnC,SAAQ;AAAA,gBAER,+BAAC,QAAK,OAAM,UAAS,KAAI,KACvB;AAAA,sCAAC,aAAU;AAAA,kBACV;AAAA,mBACH;AAAA;AAAA,YACF;AAAA,aACF;AAAA,UAEA,oBAAC,OAAI,OAAO,EAAE,cAAc,OAAO,GACjC,8BAAC,QAAG,OAAO,EAAE,QAAQ,GAAG,aAAa,GAAG,GACrC,qDAAa,IAAI,CAAC,OAAO;AACxB,mBACE,oBAAC,QAAY,OAAO,EAAE,cAAc,EAAE,GACpC,8BAAC,WAAQ,UAAQ,MAAC,SAAQ,YAAW,QAAO,WACzC,cACH,KAHO,EAIT;AAAA,UAEJ,IACF,GACF;AAAA,UACA,oBAAC,aAAU,MAAK,KAAI;AAAA,UACpB,qBAAC,QAAK,OAAM,UAAS,KAAI,KAAI,SAAQ,OACnC;AAAA,gCAAC,QAAK,OAAM,QAAO,uFAAkB;AAAA,YACrC,oBAAC,kBAAe,OAAM,QAAO;AAAA,aAC/B;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-JJQWM7EB.js

@@ -0,0 +1,117 @@
+import {
+  Skeleton
+} from "./chunk-5H3YPCZK.js";
+import {
+  Inset
+} from "./chunk-XQOL7UBI.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  DropdownMenu
+} from "./chunk-D4U2MCJG.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Button
+} from "./chunk-TSXRCXC6.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  DotsVerticalIcon
+} from "./chunk-V5XKNSCK.js";
+import {
+  Heading
+} from "./chunk-BESTU2AY.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+
+// src/app/platform/contents-card.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ContentsCard = forwardRef(
+  ({
+    title,
+    description,
+    imageSrc,
+    footer,
+    dropdownItems,
+    onClickCard,
+    isLoading = false
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        onClick: onClickCard,
+        ref,
+        style: {
+          height: "100%",
+          width: "100%",
+          display: "grid",
+          cursor: "pointer",
+          maxHeight: "450px"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Inset, { clip: "padding-box", pb: "0", side: "top", children: /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              height: "210px",
+              style: {
+                backgroundImage: `url(${imageSrc})`,
+                backgroundSize: "cover",
+                backgroundPosition: "center"
+              },
+              width: "100%"
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", p: "4", pb: "3", children: [
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Heading, { mb: "3", variant: "heading5", children: title }) }),
+              /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Typo, { as: "p", variant: "caption", children: description }) })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Grid,
+              {
+                align: "center",
+                columns: "1fr auto",
+                justify: "between",
+                pt: "2",
+                style: { marginTop: "auto" },
+                width: "100%",
+                children: [
+                  /* @__PURE__ */ jsx(Skeleton, { loading: isLoading, children: /* @__PURE__ */ jsx(Flex, { gap: "3", overflow: "hidden", children: footer }) }),
+                  Boolean(dropdownItems == null ? void 0 : dropdownItems.length) && /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
+                    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { children: /* @__PURE__ */ jsx(Button, { size: "large", variant: "transparent", children: /* @__PURE__ */ jsx(DotsVerticalIcon, { color: "gray", height: "20px", width: "20px" }) }) }),
+                    /* @__PURE__ */ jsx(DropdownMenu.Content, { children: dropdownItems == null ? void 0 : dropdownItems.map((item) => /* @__PURE__ */ jsx(
+                      DropdownMenu.Item,
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          item.onClick();
+                        },
+                        children: item.label
+                      },
+                      item.label
+                    )) })
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+ContentsCard.displayName = "ContentsCard";
+
+export {
+  ContentsCard
+};
+//# sourceMappingURL=chunk-JJQWM7EB.js.map

package/dist/chunk-JJQWM7EB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app/platform/contents-card.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Heading } from '@/atoms/heading';\nimport { Button } from '@/atoms/button';\nimport { DropdownMenu } from '@/atoms/dropdown-menu';\nimport { Box } from '@/atoms/box';\nimport { Flex } from '@/atoms/flex';\nimport { Grid } from '@/atoms/grid';\nimport { Skeleton } from '@/atoms/skeleton';\nimport { Typo } from '@/atoms/typo';\nimport { DotsVerticalIcon } from '@/icon';\nimport { Card, Inset } from '@/atoms';\n\nexport interface ContentsCardProps {\n  title?: React.ReactNode;\n  description?: string;\n  id?: string;\n  imageSrc?: string | null;\n  imageAlt?: string;\n  footer?: React.ReactNode;\n  dropdownItems?: {\n    label: string;\n    onClick: () => void;\n  }[];\n  onClickCard?: () => void;\n  isLoading?: boolean;\n}\n\nexport const ContentsCard = forwardRef<HTMLDivElement, ContentsCardProps>(\n  (\n    {\n      title,\n      description,\n      imageSrc,\n      footer,\n      dropdownItems,\n      onClickCard,\n      isLoading = false,\n    },\n    ref\n  ): React.ReactNode => {\n    return (\n      <Card\n        onClick={onClickCard}\n        ref={ref}\n        style={{\n          height: '100%',\n          width: '100%',\n          display: 'grid',\n          cursor: 'pointer',\n          maxHeight: '450px',\n        }}\n      >\n        {/* 섬네일 */}\n        <Inset clip=\"padding-box\" pb=\"0\" side=\"top\">\n          <Skeleton loading={isLoading}>\n            <Box\n              height=\"210px\"\n              style={{\n                backgroundImage: `url(${imageSrc})`,\n                backgroundSize: 'cover',\n                backgroundPosition: 'center',\n              }}\n              width=\"100%\"\n            />\n          </Skeleton>\n        </Inset>\n        {/* 제목, 설명 */}\n        <Flex direction=\"column\" p=\"4\" pb=\"3\">\n          <Box>\n            <Skeleton loading={isLoading}>\n              <Heading mb=\"3\" variant=\"heading5\">\n                {title}\n              </Heading>\n            </Skeleton>\n            <Skeleton loading={isLoading}>\n              <Typo as=\"p\" variant=\"caption\">\n                {description}\n              </Typo>\n            </Skeleton>\n          </Box>\n          <Grid\n            align=\"center\"\n            columns=\"1fr auto\"\n            justify=\"between\"\n            pt=\"2\"\n            style={{ marginTop: 'auto' }}\n            width=\"100%\"\n          >\n            <Skeleton loading={isLoading}>\n              <Flex gap=\"3\" overflow=\"hidden\">\n                {footer}\n              </Flex>\n            </Skeleton>\n            {Boolean(dropdownItems?.length) && (\n              <DropdownMenu.Root>\n                <DropdownMenu.Trigger>\n                  <Button size=\"large\" variant=\"transparent\">\n                    <DotsVerticalIcon color=\"gray\" height=\"20px\" width=\"20px\" />\n                  </Button>\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                  {dropdownItems?.map((item) => (\n                    <DropdownMenu.Item\n                      key={item.label}\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        item.onClick();\n                      }}\n                    >\n                      {item.label}\n                    </DropdownMenu.Item>\n                  ))}\n                </DropdownMenu.Content>\n              </DropdownMenu.Root>\n            )}\n          </Grid>\n        </Flex>\n      </Card>\n    );\n  }\n);\nContentsCard.displayName = 'ContentsCard';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,kBAAkB;AAuDtB,cAaF,YAbE;AA5BL,IAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,EACd,GACA,QACoB;AACpB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA,OAAO;AAAA,UACL,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,WAAW;AAAA,QACb;AAAA,QAGA;AAAA,8BAAC,SAAM,MAAK,eAAc,IAAG,KAAI,MAAK,OACpC,8BAAC,YAAS,SAAS,WACjB;AAAA,YAAC;AAAA;AAAA,cACC,QAAO;AAAA,cACP,OAAO;AAAA,gBACL,iBAAiB,OAAO,QAAQ;AAAA,gBAChC,gBAAgB;AAAA,gBAChB,oBAAoB;AAAA,cACtB;AAAA,cACA,OAAM;AAAA;AAAA,UACR,GACF,GACF;AAAA,UAEA,qBAAC,QAAK,WAAU,UAAS,GAAE,KAAI,IAAG,KAChC;AAAA,iCAAC,OACC;AAAA,kCAAC,YAAS,SAAS,WACjB,8BAAC,WAAQ,IAAG,KAAI,SAAQ,YACrB,iBACH,GACF;AAAA,cACA,oBAAC,YAAS,SAAS,WACjB,8BAAC,QAAK,IAAG,KAAI,SAAQ,WAClB,uBACH,GACF;AAAA,eACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,SAAQ;AAAA,gBACR,IAAG;AAAA,gBACH,OAAO,EAAE,WAAW,OAAO;AAAA,gBAC3B,OAAM;AAAA,gBAEN;AAAA,sCAAC,YAAS,SAAS,WACjB,8BAAC,QAAK,KAAI,KAAI,UAAS,UACpB,kBACH,GACF;AAAA,kBACC,QAAQ,+CAAe,MAAM,KAC5B,qBAAC,aAAa,MAAb,EACC;AAAA,wCAAC,aAAa,SAAb,EACC,8BAAC,UAAO,MAAK,SAAQ,SAAQ,eAC3B,8BAAC,oBAAiB,OAAM,QAAO,QAAO,QAAO,OAAM,QAAO,GAC5D,GACF;AAAA,oBACA,oBAAC,aAAa,SAAb,EACE,yDAAe,IAAI,CAAC,SACnB;AAAA,sBAAC,aAAa;AAAA,sBAAb;AAAA,wBAEC,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAgB;AAClB,+BAAK,QAAQ;AAAA,wBACf;AAAA,wBAEC,eAAK;AAAA;AAAA,sBAND,KAAK;AAAA,oBAOZ,IAEJ;AAAA,qBACF;AAAA;AAAA;AAAA,YAEJ;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;","names":[]}

package/dist/chunk-JKJ37HEA.js

@@ -0,0 +1,74 @@
+import {
+  infoList,
+  renderDataListItem,
+  renderItem,
+  sessionList
+} from "./chunk-MXZFDDUU.js";
+import {
+  Separator
+} from "./chunk-HYITAA4J.js";
+import {
+  Grid
+} from "./chunk-EGEQY3KT.js";
+import {
+  Card
+} from "./chunk-RP2RGCAW.js";
+import {
+  DataList
+} from "./chunk-VTJZMOSP.js";
+import {
+  Box
+} from "./chunk-4Y5BEXVN.js";
+import {
+  Flex
+} from "./chunk-25HMMI7R.js";
+import {
+  Heading
+} from "./chunk-BESTU2AY.js";
+import {
+  Typo
+} from "./chunk-PMJIFLDT.js";
+
+// src/app/platform/userInfos/coaching-customer-info/medium.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function CoachingCustomerInfoMedium({
+  customer,
+  session,
+  children,
+  badge,
+  onClickCopy
+}) {
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "5", children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", mb: "1", width: "100%", children: [
+        /* @__PURE__ */ jsx(Heading, { variant: "heading2", children: (customer == null ? void 0 : customer.username) || "\uC774\uB984 \uC5C6\uC74C" }),
+        badge
+      ] }),
+      /* @__PURE__ */ jsx(Heading, { truncate: true, variant: "heading4", weight: "regular", children: customer == null ? void 0 : customer.company })
+    ] }),
+    children,
+    /* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsx(DataList.Root, { orientation: "vertical", children: sessionList.map(
+      (el) => renderDataListItem({
+        info: el,
+        data: session,
+        onClickCopy
+      })
+    ) }) }),
+    /* @__PURE__ */ jsxs(Grid, { align: "center", columns: "auto 1fr", gap: "3", children: [
+      /* @__PURE__ */ jsx(Heading, { variant: "heading5", children: "\uACE0\uAC1D \uC815\uBCF4" }),
+      /* @__PURE__ */ jsx(Separator, { size: "4" })
+    ] }),
+    /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "4", children: infoList.map((el) => {
+      return /* @__PURE__ */ jsx(Typo, { children: renderItem({
+        info: el,
+        data: customer,
+        onClickCopy
+      }) }, el.label);
+    }) })
+  ] });
+}
+
+export {
+  CoachingCustomerInfoMedium
+};
+//# sourceMappingURL=chunk-JKJ37HEA.js.map

package/dist/chunk-JKJ37HEA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app/platform/userInfos/coaching-customer-info/medium.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  Box,\n  Card,\n  DataList,\n  Flex,\n  Grid,\n  Heading,\n  Separator,\n  Typo,\n} from '../../../../atoms';\nimport type { CoachingCustomerInfoProps } from '../utils';\nimport {\n  infoList,\n  renderDataListItem,\n  renderItem,\n  sessionList,\n} from '../utils';\n\nexport function CoachingCustomerInfoMedium({\n  customer,\n  session,\n  children,\n  badge,\n  onClickCopy,\n}: CoachingCustomerInfoProps): React.ReactNode {\n  return (\n    <Flex direction=\"column\" gap=\"5\">\n      {/* 이름, 사명 */}\n      <Box>\n        <Flex align=\"center\" justify=\"between\" mb=\"1\" width=\"100%\">\n          <Heading variant=\"heading2\">\n            {customer?.username || '이름 없음'}\n          </Heading>\n          {badge}\n        </Flex>\n        <Heading truncate variant=\"heading4\" weight=\"regular\">\n          {customer?.company}\n        </Heading>\n      </Box>\n\n      {children}\n\n      {/* 세션 정보 */}\n      <Card size=\"2\">\n        <DataList.Root orientation=\"vertical\">\n          {sessionList.map((el) =>\n            renderDataListItem({\n              info: el,\n              data: session,\n              onClickCopy,\n            })\n          )}\n        </DataList.Root>\n      </Card>\n\n      {/* 회원 정보 */}\n      <Grid align=\"center\" columns=\"auto 1fr\" gap=\"3\">\n        <Heading variant=\"heading5\">고객 정보</Heading>\n        <Separator size=\"4\" />\n      </Grid>\n      <Flex direction=\"column\" gap=\"4\">\n        {infoList.map((el) => {\n          return (\n            <Typo key={el.label}>\n              {renderItem({\n                info: el,\n                data: customer,\n                onClickCopy,\n              })}\n            </Typo>\n          );\n        })}\n      </Flex>\n    </Flex>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BQ,SACE,KADF;AAXD,SAAS,2BAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+C;AAC7C,SACE,qBAAC,QAAK,WAAU,UAAS,KAAI,KAE3B;AAAA,yBAAC,OACC;AAAA,2BAAC,QAAK,OAAM,UAAS,SAAQ,WAAU,IAAG,KAAI,OAAM,QAClD;AAAA,4BAAC,WAAQ,SAAQ,YACd,gDAAU,aAAY,6BACzB;AAAA,QACC;AAAA,SACH;AAAA,MACA,oBAAC,WAAQ,UAAQ,MAAC,SAAQ,YAAW,QAAO,WACzC,+CAAU,SACb;AAAA,OACF;AAAA,IAEC;AAAA,IAGD,oBAAC,QAAK,MAAK,KACT,8BAAC,SAAS,MAAT,EAAc,aAAY,YACxB,sBAAY;AAAA,MAAI,CAAC,OAChB,mBAAmB;AAAA,QACjB,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,MACF,CAAC;AAAA,IACH,GACF,GACF;AAAA,IAGA,qBAAC,QAAK,OAAM,UAAS,SAAQ,YAAW,KAAI,KAC1C;AAAA,0BAAC,WAAQ,SAAQ,YAAW,uCAAK;AAAA,MACjC,oBAAC,aAAU,MAAK,KAAI;AAAA,OACtB;AAAA,IACA,oBAAC,QAAK,WAAU,UAAS,KAAI,KAC1B,mBAAS,IAAI,CAAC,OAAO;AACpB,aACE,oBAAC,QACE,qBAAW;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,MACF,CAAC,KALQ,GAAG,KAMd;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;","names":[]}