@tipp/ui 2.3.14 → 2.3.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/app/index.cjs +182 -159
- package/dist/app/index.cjs.map +1 -1
- package/dist/app/index.js +100 -98
- package/dist/app/platform/coach-question-list.js +31 -31
- package/dist/app/platform/contents-card.js +31 -31
- package/dist/app/platform/curriculum-card.js +5 -5
- package/dist/app/platform/edit-coaching-time.cjs +39 -16
- package/dist/app/platform/edit-coaching-time.cjs.map +1 -1
- package/dist/app/platform/edit-coaching-time.js +76 -74
- package/dist/app/platform/edit-service-type.cjs +41 -16
- package/dist/app/platform/edit-service-type.cjs.map +1 -1
- package/dist/app/platform/edit-service-type.js +77 -75
- package/dist/app/platform/goal-manage-card-edit.cjs +47 -22
- package/dist/app/platform/goal-manage-card-edit.cjs.map +1 -1
- package/dist/app/platform/goal-manage-card-edit.js +76 -74
- package/dist/app/platform/goal-manage-card-read.js +31 -31
- package/dist/app/platform/on-offline-radio-card.cjs +45 -22
- package/dist/app/platform/on-offline-radio-card.cjs.map +1 -1
- package/dist/app/platform/on-offline-radio-card.js +76 -74
- package/dist/app/platform/report-card.js +31 -31
- package/dist/app/platform/reservation-card.cjs +58 -33
- package/dist/app/platform/reservation-card.cjs.map +1 -1
- package/dist/app/platform/reservation-card.js +77 -75
- package/dist/app/platform/session-card.cjs +78 -55
- package/dist/app/platform/session-card.cjs.map +1 -1
- package/dist/app/platform/session-card.js +79 -77
- package/dist/app/platform/session-review-simple-read.js +31 -31
- package/dist/app/platform/userInfos/coaching-customer-info/index.js +36 -36
- package/dist/app/platform/userInfos/coaching-customer-info/large.js +31 -31
- package/dist/app/platform/userInfos/coaching-customer-info/medium.js +31 -31
- package/dist/app/platform/userInfos/coaching-customer-info/small.js +31 -31
- package/dist/app/platform/userInfos/session-user-info-detail.js +31 -31
- package/dist/app/platform/userInfos/utils.js +30 -30
- package/dist/atoms/bullet-text.js +2 -2
- package/dist/atoms/dialog.js +2 -2
- package/dist/atoms/field-error-wrapper.js +2 -2
- package/dist/atoms/index.js +62 -62
- package/dist/atoms/list.js +2 -2
- package/dist/atoms/pagination.js +3 -3
- package/dist/chunk-2GTKMGHS.js +70 -0
- package/dist/chunk-2GTKMGHS.js.map +1 -0
- package/dist/chunk-2GWB6C4M.js +63 -0
- package/dist/chunk-2GWB6C4M.js.map +1 -0
- package/dist/chunk-2OVAPUSZ.js +218 -0
- package/dist/chunk-2OVAPUSZ.js.map +1 -0
- package/dist/chunk-33FHBMD2.js +89 -0
- package/dist/chunk-33FHBMD2.js.map +1 -0
- package/dist/chunk-3IDHQODC.js +99 -0
- package/dist/chunk-3IDHQODC.js.map +1 -0
- package/dist/chunk-3INEXJIV.js +37 -0
- package/dist/chunk-3INEXJIV.js.map +1 -0
- package/dist/chunk-3UOA73MU.js +196 -0
- package/dist/chunk-3UOA73MU.js.map +1 -0
- package/dist/chunk-4F2XOUIR.js +51 -0
- package/dist/chunk-4F2XOUIR.js.map +1 -0
- package/dist/chunk-4GDCXSDS.js +87 -0
- package/dist/chunk-4GDCXSDS.js.map +1 -0
- package/dist/chunk-52IAQ2FT.js +233 -0
- package/dist/chunk-52IAQ2FT.js.map +1 -0
- package/dist/chunk-54POQFUI.js +98 -0
- package/dist/chunk-54POQFUI.js.map +1 -0
- package/dist/chunk-5FBWB2W4.js +57 -0
- package/dist/chunk-5FBWB2W4.js.map +1 -0
- package/dist/chunk-5VPNBYFV.js +89 -0
- package/dist/chunk-5VPNBYFV.js.map +1 -0
- package/dist/chunk-6DAL2GRI.js +196 -0
- package/dist/chunk-6DAL2GRI.js.map +1 -0
- package/dist/chunk-6INLPCD5.js +30 -0
- package/dist/chunk-6INLPCD5.js.map +1 -0
- package/dist/chunk-6LJJRIWT.js +49 -0
- package/dist/chunk-6LJJRIWT.js.map +1 -0
- package/dist/chunk-6WT3VRAP.js +144 -0
- package/dist/chunk-6WT3VRAP.js.map +1 -0
- package/dist/chunk-7MB2G5XF.js +145 -0
- package/dist/chunk-7MB2G5XF.js.map +1 -0
- package/dist/chunk-7XUN3OQT.js +1 -0
- package/dist/chunk-7XUN3OQT.js.map +1 -0
- package/dist/chunk-A2DBM6WR.js +51 -0
- package/dist/chunk-A2DBM6WR.js.map +1 -0
- package/dist/chunk-AB5USZGJ.js +101 -0
- package/dist/chunk-AB5USZGJ.js.map +1 -0
- package/dist/chunk-AJWRR5KG.js +74 -0
- package/dist/chunk-AJWRR5KG.js.map +1 -0
- package/dist/chunk-ALFE4BOS.js +139 -0
- package/dist/chunk-ALFE4BOS.js.map +1 -0
- package/dist/chunk-AULDM6SL.js +89 -0
- package/dist/chunk-AULDM6SL.js.map +1 -0
- package/dist/chunk-BJLJNTF2.js +218 -0
- package/dist/chunk-BJLJNTF2.js.map +1 -0
- package/dist/chunk-CMFHPI3J.js +51 -0
- package/dist/chunk-CMFHPI3J.js.map +1 -0
- package/dist/chunk-DAZY7DRP.js +145 -0
- package/dist/chunk-DAZY7DRP.js.map +1 -0
- package/dist/chunk-DXD774YC.js +145 -0
- package/dist/chunk-DXD774YC.js.map +1 -0
- package/dist/chunk-EAMKUF7R.js +75 -0
- package/dist/chunk-EAMKUF7R.js.map +1 -0
- package/dist/chunk-EMNEV6EN.js +139 -0
- package/dist/chunk-EMNEV6EN.js.map +1 -0
- package/dist/chunk-ETKTERDA.js +51 -0
- package/dist/chunk-ETKTERDA.js.map +1 -0
- package/dist/chunk-FFAGYBAB.js +64 -0
- package/dist/chunk-FFAGYBAB.js.map +1 -0
- package/dist/chunk-FVNVGFTT.js +218 -0
- package/dist/chunk-FVNVGFTT.js.map +1 -0
- package/dist/chunk-FXQYWO4P.js +57 -0
- package/dist/chunk-FXQYWO4P.js.map +1 -0
- package/dist/chunk-G4DOK5DQ.js +64 -0
- package/dist/chunk-G4DOK5DQ.js.map +1 -0
- package/dist/chunk-G6ZTIOUH.js +54 -0
- package/dist/chunk-G6ZTIOUH.js.map +1 -0
- package/dist/chunk-GN7UAKYU.js +145 -0
- package/dist/chunk-GN7UAKYU.js.map +1 -0
- package/dist/chunk-GTB6HEJR.js +218 -0
- package/dist/chunk-GTB6HEJR.js.map +1 -0
- package/dist/chunk-JO5OXSQV.js +363 -0
- package/dist/chunk-JO5OXSQV.js.map +1 -0
- package/dist/chunk-JOUSZBPX.js +196 -0
- package/dist/chunk-JOUSZBPX.js.map +1 -0
- package/dist/chunk-JOXWMJKW.js +64 -0
- package/dist/chunk-JOXWMJKW.js.map +1 -0
- package/dist/chunk-JQU3CE4K.js +174 -0
- package/dist/chunk-JQU3CE4K.js.map +1 -0
- package/dist/chunk-K7NSOSIE.js +1 -0
- package/dist/chunk-K7NSOSIE.js.map +1 -0
- package/dist/chunk-KD3SPRXH.js +37 -0
- package/dist/chunk-KD3SPRXH.js.map +1 -0
- package/dist/chunk-KEKNMQJK.js +69 -0
- package/dist/chunk-KEKNMQJK.js.map +1 -0
- package/dist/chunk-KGPXD5VO.js +228 -0
- package/dist/chunk-KGPXD5VO.js.map +1 -0
- package/dist/chunk-KMNAZCXO.js +117 -0
- package/dist/chunk-KMNAZCXO.js.map +1 -0
- package/dist/chunk-KPE4JB42.js +218 -0
- package/dist/chunk-KPE4JB42.js.map +1 -0
- package/dist/chunk-MFAW7E6L.js +69 -0
- package/dist/chunk-MFAW7E6L.js.map +1 -0
- package/dist/chunk-MLOC57ZN.js +64 -0
- package/dist/chunk-MLOC57ZN.js.map +1 -0
- package/dist/chunk-MRW2RO32.js +163 -0
- package/dist/chunk-MRW2RO32.js.map +1 -0
- package/dist/chunk-MYELL2V2.js +63 -0
- package/dist/chunk-MYELL2V2.js.map +1 -0
- package/dist/chunk-N7WM36NN.js +64 -0
- package/dist/chunk-N7WM36NN.js.map +1 -0
- package/dist/chunk-NMOPWSEY.js +145 -0
- package/dist/chunk-NMOPWSEY.js.map +1 -0
- package/dist/chunk-NWCLGWD7.js +218 -0
- package/dist/chunk-NWCLGWD7.js.map +1 -0
- package/dist/chunk-ONUWABWT.js +169 -0
- package/dist/chunk-ONUWABWT.js.map +1 -0
- package/dist/chunk-PTCXWBAB.js +218 -0
- package/dist/chunk-PTCXWBAB.js.map +1 -0
- package/dist/chunk-PXSZVAKR.js +68 -0
- package/dist/chunk-PXSZVAKR.js.map +1 -0
- package/dist/chunk-PZXLZLQH.js +64 -0
- package/dist/chunk-PZXLZLQH.js.map +1 -0
- package/dist/chunk-QOA6EEKP.js +89 -0
- package/dist/chunk-QOA6EEKP.js.map +1 -0
- package/dist/chunk-R3VOZZ5O.js +63 -0
- package/dist/chunk-R3VOZZ5O.js.map +1 -0
- package/dist/chunk-S3ITGMDG.js +218 -0
- package/dist/chunk-S3ITGMDG.js.map +1 -0
- package/dist/chunk-SFYV52JB.js +151 -0
- package/dist/chunk-SFYV52JB.js.map +1 -0
- package/dist/chunk-SLV7LKTR.js +51 -0
- package/dist/chunk-SLV7LKTR.js.map +1 -0
- package/dist/chunk-TJQUUR4N.js +54 -0
- package/dist/chunk-TJQUUR4N.js.map +1 -0
- package/dist/chunk-TTVJOFG5.js +30 -0
- package/dist/chunk-TTVJOFG5.js.map +1 -0
- package/dist/chunk-TYQOHHL5.js +63 -0
- package/dist/chunk-TYQOHHL5.js.map +1 -0
- package/dist/chunk-VRY3HFX6.js +45 -0
- package/dist/chunk-VRY3HFX6.js.map +1 -0
- package/dist/chunk-WU6EJCDT.js +196 -0
- package/dist/chunk-WU6EJCDT.js.map +1 -0
- package/dist/chunk-X6YSDRES.js +165 -0
- package/dist/chunk-X6YSDRES.js.map +1 -0
- package/dist/chunk-XU2LW3CT.js +43 -0
- package/dist/chunk-XU2LW3CT.js.map +1 -0
- package/dist/chunk-XUTNPV7E.js +218 -0
- package/dist/chunk-XUTNPV7E.js.map +1 -0
- package/dist/chunk-YWEWWXKM.js +51 -0
- package/dist/chunk-YWEWWXKM.js.map +1 -0
- package/dist/chunk-YYWEFK4H.js +39 -0
- package/dist/chunk-YYWEFK4H.js.map +1 -0
- package/dist/chunk-Z5JV7JGZ.js +58 -0
- package/dist/chunk-Z5JV7JGZ.js.map +1 -0
- package/dist/chunk-ZMXFJ3AZ.js +196 -0
- package/dist/chunk-ZMXFJ3AZ.js.map +1 -0
- package/dist/chunk-ZP5VSS77.js +89 -0
- package/dist/chunk-ZP5VSS77.js.map +1 -0
- package/dist/context/index.js +5 -5
- package/dist/index.cjs +310 -248
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +155 -145
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/index.js +18 -18
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-comp.js +4 -4
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-body.js +11 -11
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-footer.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-header.js +3 -3
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-layout.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-radio.js +6 -6
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-option.js +5 -5
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-text.js +5 -5
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.js +5 -5
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/complete-review.js +4 -4
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.js +21 -21
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/start-review.js +6 -6
- package/dist/molecules/curriculumV2/CurriculumContents/curriculum-ai-traning.js +3 -3
- package/dist/molecules/curriculumV2/CurriculumContents/curriculum-review.js +23 -23
- package/dist/molecules/curriculumV2/CurriculumContents/index.js +26 -26
- package/dist/molecules/curriculumV2/CurriculumSidebar/Items/curriculum-item-title.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumSidebar/Items/section-item.js +4 -4
- package/dist/molecules/curriculumV2/CurriculumSidebar/index.js +8 -8
- package/dist/molecules/curriculumV2/CurriculumSidebar/sidebar-item.js +6 -6
- package/dist/molecules/curriculumV2/curriculum-sub-nav.js +4 -4
- package/dist/molecules/curriculumV2/curriculum-v2-layout.js +2 -2
- package/dist/molecules/curriculumV2/index.js +34 -34
- package/dist/molecules/date-picker/date-picker-button.js +6 -6
- package/dist/molecules/date-picker/index.js +5 -5
- package/dist/molecules/description-json-render.cjs +722 -0
- package/dist/molecules/description-json-render.cjs.map +1 -0
- package/dist/molecules/description-json-render.d.cts +27 -0
- package/dist/molecules/description-json-render.d.ts +27 -0
- package/dist/molecules/description-json-render.js +30 -0
- package/dist/molecules/description-json-render.js.map +1 -0
- package/dist/molecules/download-card.js +2 -2
- package/dist/molecules/dynamic-field.cjs +71 -68
- package/dist/molecules/dynamic-field.cjs.map +1 -1
- package/dist/molecules/dynamic-field.js +6 -5
- package/dist/molecules/dynamic-form.cjs +32 -29
- package/dist/molecules/dynamic-form.cjs.map +1 -1
- package/dist/molecules/dynamic-form.js +7 -6
- package/dist/molecules/expand-table/index.js +5 -5
- package/dist/molecules/force-refresh.js +2 -2
- package/dist/molecules/ghost-post.js +4 -4
- package/dist/molecules/index.cjs +67 -9
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.d.cts +1 -0
- package/dist/molecules/index.d.ts +1 -0
- package/dist/molecules/index.js +76 -71
- package/dist/molecules/learning-post.js +6 -6
- package/dist/molecules/navigation.js +3 -3
- package/dist/molecules/one-on-one-guide-list.js +3 -3
- package/dist/molecules/stepper.js +4 -4
- package/dist/molecules/tag-selector.js +5 -5
- package/dist/molecules/time-select.cjs +519 -5
- package/dist/molecules/time-select.cjs.map +1 -1
- package/dist/molecules/time-select.js +18 -2
- package/dist/utils/getCalloutIconComponent.cjs +580 -0
- package/dist/utils/getCalloutIconComponent.cjs.map +1 -0
- package/dist/utils/getCalloutIconComponent.d.cts +11 -0
- package/dist/utils/getCalloutIconComponent.d.ts +11 -0
- package/dist/utils/getCalloutIconComponent.js +25 -0
- package/dist/utils/getCalloutIconComponent.js.map +1 -0
- package/dist/utils/index.cjs +535 -0
- package/dist/utils/index.cjs.map +1 -1
- package/dist/utils/index.d.cts +2 -0
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/index.js +24 -3
- package/package.json +3 -3
- package/src/molecules/description-json-render.tsx +85 -0
- package/src/molecules/dynamic-field.tsx +11 -9
- package/src/molecules/dynamic-form.tsx +1 -1
- package/src/molecules/index.ts +2 -1
- package/src/utils/getCalloutIconComponent.ts +39 -0
- package/src/utils/index.ts +1 -0
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import {
|
|
2
|
+
DatePicker
|
|
3
|
+
} from "./chunk-52IAQ2FT.js";
|
|
4
|
+
import {
|
|
5
|
+
TextField
|
|
6
|
+
} from "./chunk-6NPTJBFE.js";
|
|
7
|
+
import {
|
|
8
|
+
Box
|
|
9
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
10
|
+
import {
|
|
11
|
+
Button
|
|
12
|
+
} from "./chunk-ZVDAEY5Q.js";
|
|
13
|
+
import {
|
|
14
|
+
CalendarIcon
|
|
15
|
+
} from "./chunk-W5TPOFOO.js";
|
|
16
|
+
import {
|
|
17
|
+
__objRest,
|
|
18
|
+
__spreadProps,
|
|
19
|
+
__spreadValues
|
|
20
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
21
|
+
|
|
22
|
+
// src/molecules/date-picker/date-picker-button.tsx
|
|
23
|
+
import { useMemo } from "react";
|
|
24
|
+
import { format } from "date-fns";
|
|
25
|
+
import { clsx } from "clsx";
|
|
26
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
27
|
+
function DatePickerButton(props) {
|
|
28
|
+
const _a = props, { size, format: formatProps, disabled } = _a, rest = __objRest(_a, ["size", "format", "disabled"]);
|
|
29
|
+
const placeholder = rest.placeholder || "\uB0A0\uC9DC\uB97C \uC120\uD0DD\uD574\uC8FC\uC138\uC694";
|
|
30
|
+
const buttonProps = useMemo(() => {
|
|
31
|
+
const variant = "outline";
|
|
32
|
+
const color = "gray";
|
|
33
|
+
return { size, color, variant, disabled };
|
|
34
|
+
}, [disabled, size]);
|
|
35
|
+
const selectFormat = useMemo(() => {
|
|
36
|
+
if (formatProps) return formatProps;
|
|
37
|
+
return (date) => {
|
|
38
|
+
return date ? format(date, "yyyy\uB144 MM\uC6D4 dd\uC77C") : "";
|
|
39
|
+
};
|
|
40
|
+
}, [formatProps]);
|
|
41
|
+
const className = useMemo(() => {
|
|
42
|
+
return clsx(
|
|
43
|
+
"date-picker-button",
|
|
44
|
+
(disabled || props.readOnly) && "disabled"
|
|
45
|
+
);
|
|
46
|
+
}, [disabled, props.readOnly]);
|
|
47
|
+
const placeholderVisible = useMemo(() => {
|
|
48
|
+
return rest.selected ? "" : "placeholder-visible";
|
|
49
|
+
}, [rest.selected]);
|
|
50
|
+
return /* @__PURE__ */ jsx(Box, { p: "0", width: "100%", children: /* @__PURE__ */ jsx(
|
|
51
|
+
DatePicker,
|
|
52
|
+
__spreadProps(__spreadValues({
|
|
53
|
+
customInput: /* @__PURE__ */ jsx(Button, __spreadProps(__spreadValues({ asChild: true, className, type: "button" }, buttonProps), { children: /* @__PURE__ */ jsxs(
|
|
54
|
+
TextField.Root,
|
|
55
|
+
{
|
|
56
|
+
className: placeholderVisible,
|
|
57
|
+
placeholder: placeholder || "",
|
|
58
|
+
value: rest.selected ? selectFormat(rest.selected) : placeholder,
|
|
59
|
+
children: [
|
|
60
|
+
/* @__PURE__ */ jsx(TextField.Slot, { className: "hide-slot" }),
|
|
61
|
+
/* @__PURE__ */ jsx(TextField.Slot, { children: /* @__PURE__ */ jsx(CalendarIcon, {}) })
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
) })),
|
|
65
|
+
wrapperClassName: "full-width"
|
|
66
|
+
}, rest), {
|
|
67
|
+
disabled
|
|
68
|
+
})
|
|
69
|
+
) });
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export {
|
|
73
|
+
DatePickerButton
|
|
74
|
+
};
|
|
75
|
+
//# sourceMappingURL=chunk-EAMKUF7R.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/date-picker/date-picker-button.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { format } from 'date-fns';\nimport { clsx } from 'clsx';\nimport type { ButtonProps } from '@/atoms/button.type';\nimport { Button } from '@/atoms/button';\nimport { TextField } from '@/atoms/text-field';\nimport { Box } from '@/atoms/box';\nimport { CalendarIcon } from '../../icon';\nimport type { DatePickerProps } from '.';\nimport { DatePicker } from '.';\n\nexport type DatePickerButtonProps = DatePickerProps & {\n placeholder?: string;\n format?: (date: Date) => string;\n size?: ButtonProps['size'];\n};\n\nexport function DatePickerButton(\n props: DatePickerButtonProps\n): React.ReactNode {\n const { size, format: formatProps, disabled, ...rest } = props;\n const placeholder = rest.placeholder || '날짜를 선택해주세요';\n\n const buttonProps = useMemo(() => {\n const variant: ButtonProps['variant'] = 'outline';\n const color: ButtonProps['color'] = 'gray';\n return { size, color, variant, disabled };\n }, [disabled, size]);\n\n const selectFormat = useMemo(() => {\n if (formatProps) return formatProps;\n return (date?: Date) => {\n return date ? format(date, 'yyyy년 MM월 dd일') : '';\n };\n }, [formatProps]);\n\n const className = useMemo(() => {\n return clsx(\n 'date-picker-button',\n (disabled || props.readOnly) && 'disabled'\n );\n }, [disabled, props.readOnly]);\n\n const placeholderVisible = useMemo(() => {\n return rest.selected ? '' : 'placeholder-visible';\n }, [rest.selected]);\n\n return (\n <Box p=\"0\" width=\"100%\">\n <DatePicker\n customInput={\n <Button asChild className={className} type=\"button\" {...buttonProps}>\n <TextField.Root\n className={placeholderVisible}\n placeholder={placeholder || ''}\n value={rest.selected ? selectFormat(rest.selected) : placeholder}\n >\n <TextField.Slot className=\"hide-slot\" />\n <TextField.Slot>\n <CalendarIcon />\n </TextField.Slot>\n </TextField.Root>\n </Button>\n }\n wrapperClassName=\"full-width\"\n {...rest}\n disabled={disabled}\n />\n </Box>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,eAAe;AAC/B,SAAS,cAAc;AACvB,SAAS,YAAY;AAkDT,SAKE,KALF;AAnCL,SAAS,iBACd,OACiB;AACjB,QAAyD,YAAjD,QAAM,QAAQ,aAAa,SApBrC,IAoB2D,IAAT,iBAAS,IAAT,CAAxC,QAAM,UAAqB;AACnC,QAAM,cAAc,KAAK,eAAe;AAExC,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,UAAkC;AACxC,UAAM,QAA8B;AACpC,WAAO,EAAE,MAAM,OAAO,SAAS,SAAS;AAAA,EAC1C,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,YAAa,QAAO;AACxB,WAAO,CAAC,SAAgB;AACtB,aAAO,OAAO,OAAO,MAAM,8BAAe,IAAI;AAAA,IAChD;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,YAAY,QAAQ,MAAM;AAC9B,WAAO;AAAA,MACL;AAAA,OACC,YAAY,MAAM,aAAa;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,QAAQ,CAAC;AAE7B,QAAM,qBAAqB,QAAQ,MAAM;AACvC,WAAO,KAAK,WAAW,KAAK;AAAA,EAC9B,GAAG,CAAC,KAAK,QAAQ,CAAC;AAElB,SACE,oBAAC,OAAI,GAAE,KAAI,OAAM,QACf;AAAA,IAAC;AAAA;AAAA,MACC,aACE,oBAAC,uCAAO,SAAO,MAAC,WAAsB,MAAK,YAAa,cAAvD,EACC;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACC,WAAW;AAAA,UACX,aAAa,eAAe;AAAA,UAC5B,OAAO,KAAK,WAAW,aAAa,KAAK,QAAQ,IAAI;AAAA,UAErD;AAAA,gCAAC,UAAU,MAAV,EAAe,WAAU,aAAY;AAAA,YACtC,oBAAC,UAAU,MAAV,EACC,8BAAC,gBAAa,GAChB;AAAA;AAAA;AAAA,MACF,IACF;AAAA,MAEF,kBAAiB;AAAA,OACb,OAhBL;AAAA,MAiBC;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useDynamicForm
|
|
3
|
+
} from "./chunk-NCSMSA3X.js";
|
|
4
|
+
import {
|
|
5
|
+
TextArea
|
|
6
|
+
} from "./chunk-5XYPLDI5.js";
|
|
7
|
+
import {
|
|
8
|
+
TextField
|
|
9
|
+
} from "./chunk-6NPTJBFE.js";
|
|
10
|
+
import {
|
|
11
|
+
Select
|
|
12
|
+
} from "./chunk-X2GMDZ7M.js";
|
|
13
|
+
import {
|
|
14
|
+
RadioGroup
|
|
15
|
+
} from "./chunk-6DJOIRMF.js";
|
|
16
|
+
import {
|
|
17
|
+
CheckboxGroup
|
|
18
|
+
} from "./chunk-W7X7KSJP.js";
|
|
19
|
+
import {
|
|
20
|
+
Checkbox
|
|
21
|
+
} from "./chunk-VYCYVN3L.js";
|
|
22
|
+
import {
|
|
23
|
+
Flex
|
|
24
|
+
} from "./chunk-25HMMI7R.js";
|
|
25
|
+
import {
|
|
26
|
+
__spreadProps,
|
|
27
|
+
__spreadValues
|
|
28
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
29
|
+
|
|
30
|
+
// src/molecules/dynamic-field.tsx
|
|
31
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
32
|
+
function DynamicFormField({
|
|
33
|
+
field
|
|
34
|
+
}) {
|
|
35
|
+
const {
|
|
36
|
+
getFieldValue,
|
|
37
|
+
getFieldError,
|
|
38
|
+
getFieldTouched,
|
|
39
|
+
setFieldValue,
|
|
40
|
+
handleChange,
|
|
41
|
+
handleBlur,
|
|
42
|
+
readonly
|
|
43
|
+
} = useDynamicForm();
|
|
44
|
+
const { name, type } = field;
|
|
45
|
+
const value = getFieldValue(name);
|
|
46
|
+
const error = getFieldError(name);
|
|
47
|
+
const touched = getFieldTouched(name);
|
|
48
|
+
const hasError = Boolean(error && touched);
|
|
49
|
+
const commonProps = {
|
|
50
|
+
name,
|
|
51
|
+
value: String(value || ""),
|
|
52
|
+
onChange: readonly ? void 0 : handleChange,
|
|
53
|
+
onBlur: readonly ? void 0 : handleBlur,
|
|
54
|
+
error: hasError,
|
|
55
|
+
disabled: readonly
|
|
56
|
+
};
|
|
57
|
+
switch (type) {
|
|
58
|
+
case "short_text":
|
|
59
|
+
case "email":
|
|
60
|
+
return /* @__PURE__ */ jsx(
|
|
61
|
+
TextField.Root,
|
|
62
|
+
__spreadProps(__spreadValues({}, commonProps), {
|
|
63
|
+
placeholder: field.placeholder,
|
|
64
|
+
type: type === "short_text" ? "text" : type
|
|
65
|
+
})
|
|
66
|
+
);
|
|
67
|
+
case "number":
|
|
68
|
+
return /* @__PURE__ */ jsx(
|
|
69
|
+
TextField.Root,
|
|
70
|
+
__spreadProps(__spreadValues({}, commonProps), {
|
|
71
|
+
inputMode: "numeric",
|
|
72
|
+
pattern: "[0-9]*",
|
|
73
|
+
placeholder: field.placeholder,
|
|
74
|
+
type: "number"
|
|
75
|
+
})
|
|
76
|
+
);
|
|
77
|
+
case "long_text":
|
|
78
|
+
return /* @__PURE__ */ jsx(TextArea, __spreadProps(__spreadValues({ rows: 4 }, commonProps), { placeholder: field.placeholder }));
|
|
79
|
+
case "dropdown":
|
|
80
|
+
return /* @__PURE__ */ jsxs(
|
|
81
|
+
Select.Root,
|
|
82
|
+
{
|
|
83
|
+
disabled: readonly,
|
|
84
|
+
onValueChange: readonly ? void 0 : (newValue) => {
|
|
85
|
+
void setFieldValue(name, newValue);
|
|
86
|
+
},
|
|
87
|
+
value,
|
|
88
|
+
children: [
|
|
89
|
+
/* @__PURE__ */ jsx(Select.Trigger, { placeholder: field.placeholder }),
|
|
90
|
+
/* @__PURE__ */ jsx(Select.Content, { children: field.options.map((option) => /* @__PURE__ */ jsx(Select.Item, { value: String(option.value), children: option.label }, option.value)) })
|
|
91
|
+
]
|
|
92
|
+
}
|
|
93
|
+
);
|
|
94
|
+
case "choice":
|
|
95
|
+
return /* @__PURE__ */ jsx(
|
|
96
|
+
RadioGroup.Root,
|
|
97
|
+
{
|
|
98
|
+
disabled: readonly,
|
|
99
|
+
onValueChange: readonly ? void 0 : (newValue) => {
|
|
100
|
+
void setFieldValue(name, newValue);
|
|
101
|
+
},
|
|
102
|
+
orientation: field.orientation,
|
|
103
|
+
value: String(value || ""),
|
|
104
|
+
children: field.options.map((option) => /* @__PURE__ */ jsx(RadioGroup.Item, { value: String(option.value), children: option.label }, option.value))
|
|
105
|
+
}
|
|
106
|
+
);
|
|
107
|
+
case "choices":
|
|
108
|
+
return /* @__PURE__ */ jsx(
|
|
109
|
+
CheckboxGroup.Root,
|
|
110
|
+
{
|
|
111
|
+
disabled: readonly,
|
|
112
|
+
onValueChange: readonly ? void 0 : (newValue) => {
|
|
113
|
+
void setFieldValue(name, newValue);
|
|
114
|
+
},
|
|
115
|
+
orientation: field.orientation,
|
|
116
|
+
value: Array.isArray(value) ? value.map(String) : [],
|
|
117
|
+
children: field.options.map((option) => /* @__PURE__ */ jsx(CheckboxGroup.Item, { value: String(option.value), children: option.label }, option.value))
|
|
118
|
+
}
|
|
119
|
+
);
|
|
120
|
+
case "yes_no":
|
|
121
|
+
return /* @__PURE__ */ jsx(Flex, { gap: "2", children: /* @__PURE__ */ jsx(
|
|
122
|
+
Checkbox,
|
|
123
|
+
{
|
|
124
|
+
checked: Boolean(value),
|
|
125
|
+
disabled: readonly,
|
|
126
|
+
onCheckedChange: readonly ? void 0 : (checked) => {
|
|
127
|
+
void setFieldValue(name, checked);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
) });
|
|
131
|
+
default:
|
|
132
|
+
return null;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
export {
|
|
137
|
+
DynamicFormField
|
|
138
|
+
};
|
|
139
|
+
//# sourceMappingURL=chunk-EMNEV6EN.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/dynamic-field.tsx"],"sourcesContent":["\nimport { Flex } from '@/atoms/flex';\nimport { Typo } from '@/atoms/typo';\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 type { DynamicFormFieldSchema } from '../types/dynamic-form-schema-generated';\n\ninterface DynamicFormFieldRendererProps {\n field: DynamicFormFieldSchema;\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 readonly,\n } = useDynamicForm();\n const { name, type } = 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: readonly ? undefined : handleChange,\n onBlur: readonly ? undefined : handleBlur,\n error: hasError,\n disabled: readonly,\n };\n\n switch (type) {\n case 'short_text':\n case 'email':\n return (\n <TextField.Root \n {...commonProps} \n placeholder={field.placeholder}\n type={type === 'short_text' ? 'text' : type}\n />\n );\n case 'number':\n return (\n <TextField.Root\n {...commonProps}\n inputMode=\"numeric\"\n pattern=\"[0-9]*\"\n placeholder={field.placeholder}\n type=\"number\"\n />\n );\n case 'long_text':\n return <TextArea rows={4} {...commonProps} placeholder={field.placeholder} />;\n\n case 'dropdown':\n return (\n <Select.Root\n disabled={readonly}\n onValueChange={readonly ? undefined : (newValue: string) => {\n void setFieldValue(name, newValue);\n }}\n value={value as string}\n >\n <Select.Trigger placeholder={field.placeholder} />\n <Select.Content>\n {field.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 'choice':\n return (\n <RadioGroup.Root\n disabled={readonly}\n onValueChange={readonly ? undefined : (newValue: string) => {\n void setFieldValue(name, newValue);\n }}\n orientation={field.orientation}\n value={String(value || '')}\n >\n {field.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 'choices':\n return (\n <CheckboxGroup.Root\n disabled={readonly}\n onValueChange={readonly ? undefined : (newValue: string[]) => {\n void setFieldValue(name, newValue);\n }}\n orientation={field.orientation}\n value={Array.isArray(value) ? value.map(String) : []}\n >\n {field.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 'yes_no':\n return (\n <Flex gap=\"2\">\n <Checkbox\n checked={Boolean(value)}\n disabled={readonly}\n onCheckedChange={readonly ? undefined : (checked: boolean) => {\n void setFieldValue(name, checked);\n }}\n /> \n </Flex>\n );\n\n default:\n return null;\n }\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import {
|
|
2
|
+
getCalloutIconComponent
|
|
3
|
+
} from "./chunk-3INEXJIV.js";
|
|
4
|
+
import {
|
|
5
|
+
List
|
|
6
|
+
} from "./chunk-WV2HN6H4.js";
|
|
7
|
+
import {
|
|
8
|
+
Callout
|
|
9
|
+
} from "./chunk-B6XJN6EC.js";
|
|
10
|
+
import {
|
|
11
|
+
Box
|
|
12
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
13
|
+
import {
|
|
14
|
+
Typo
|
|
15
|
+
} from "./chunk-PMJIFLDT.js";
|
|
16
|
+
|
|
17
|
+
// src/molecules/description-json-render.tsx
|
|
18
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
19
|
+
function DescriptionJsonRender(props) {
|
|
20
|
+
const { value } = props;
|
|
21
|
+
return /* @__PURE__ */ jsx(Fragment, { children: value.values.map((block, index) => {
|
|
22
|
+
if (block.type === "bullet-list") {
|
|
23
|
+
return (
|
|
24
|
+
// eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용
|
|
25
|
+
/* @__PURE__ */ jsx(Box, { mb: "2", pl: "4", children: /* @__PURE__ */ jsx(List.Root, { preSpace: "small", children: block.value.map((v, i) => (
|
|
26
|
+
// eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용
|
|
27
|
+
/* @__PURE__ */ jsx(List.Item, { children: v }, `${index}-${i}`)
|
|
28
|
+
)) }) }, `${block.type}-${index}`)
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
if (block.type === "callout") {
|
|
32
|
+
const Icon = getCalloutIconComponent(block.icon);
|
|
33
|
+
return (
|
|
34
|
+
// eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용
|
|
35
|
+
/* @__PURE__ */ jsx(Box, { mb: "2", children: /* @__PURE__ */ jsxs(Callout.Root, { children: [
|
|
36
|
+
/* @__PURE__ */ jsx(Callout.Icon, { children: /* @__PURE__ */ jsx(Icon, {}) }),
|
|
37
|
+
/* @__PURE__ */ jsx(Callout.Text, { children: block.value })
|
|
38
|
+
] }) }, `${block.type}-${index}`)
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
return (
|
|
42
|
+
// eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용
|
|
43
|
+
/* @__PURE__ */ jsx(Typo, { mb: "2", weight: "regular", children: block.value }, `${block.type}-${index}`)
|
|
44
|
+
);
|
|
45
|
+
}) });
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export {
|
|
49
|
+
DescriptionJsonRender
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=chunk-ETKTERDA.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/description-json-render.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@/atoms/box';\nimport { Callout } from '@/atoms/call-out';\nimport { List } from '@/atoms/list';\nimport { Typo } from '@/atoms/typo';\nimport { getCalloutIconComponent } from '@/utils/getCalloutIconComponent';\n\nexport type DescriptionBlockType = 'callout' | 'typo' | 'bullet-list';\n\nexport interface DescriptionCalloutBlock {\n type: 'callout';\n icon: string;\n value: string;\n}\n\nexport interface DescriptionTypoBlock {\n type: 'typo';\n value: string;\n}\n\nexport interface DescriptionBulletListBlock {\n type: 'bullet-list';\n value: string[];\n}\n\nexport type DescriptionBlock =\n | DescriptionCalloutBlock\n | DescriptionTypoBlock\n | DescriptionBulletListBlock;\n\nexport interface Description {\n version: number;\n values: DescriptionBlock[];\n}\n\nexport interface DescriptionJsonRenderProps {\n value: Description;\n}\n\nexport function DescriptionJsonRender(\n props: DescriptionJsonRenderProps\n): React.ReactElement {\n const { value } = props;\n return (\n <>\n {value.values.map((block, index) => {\n if (block.type === 'bullet-list') {\n return (\n // eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용\n <Box key={`${block.type}-${index}`} mb=\"2\" pl=\"4\">\n <List.Root preSpace=\"small\">\n {block.value.map((v, i) => (\n // eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용\n <List.Item key={`${index}-${i}`}>{v}</List.Item>\n ))}\n </List.Root>\n </Box>\n );\n }\n\n if (block.type === 'callout') {\n const Icon = getCalloutIconComponent(block.icon);\n return (\n // eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용\n <Box key={`${block.type}-${index}`} mb=\"2\">\n <Callout.Root>\n <Callout.Icon>\n <Icon />\n </Callout.Icon>\n <Callout.Text>{block.value}</Callout.Text>\n </Callout.Root>\n </Box>\n );\n }\n\n return (\n // eslint-disable-next-line react/no-array-index-key -- 블록 타입과 인덱스를 키로 사용\n <Typo key={`${block.type}-${index}`} mb=\"2\" weight=\"regular\">\n {block.value}\n </Typo>\n );\n })}\n </>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA4CI,mBASc,KAYJ,YArBV;AALG,SAAS,sBACd,OACoB;AACpB,QAAM,EAAE,MAAM,IAAI;AAClB,SACE,gCACG,gBAAM,OAAO,IAAI,CAAC,OAAO,UAAU;AAClC,QAAI,MAAM,SAAS,eAAe;AAChC;AAAA;AAAA,QAEE,oBAAC,OAAmC,IAAG,KAAI,IAAG,KAC5C,8BAAC,KAAK,MAAL,EAAU,UAAS,SACjB,gBAAM,MAAM,IAAI,CAAC,GAAG;AAAA;AAAA,UAEnB,oBAAC,KAAK,MAAL,EAAiC,eAAlB,GAAG,KAAK,IAAI,CAAC,EAAO;AAAA,SACrC,GACH,KANQ,GAAG,MAAM,IAAI,IAAI,KAAK,EAOhC;AAAA;AAAA,IAEJ;AAEA,QAAI,MAAM,SAAS,WAAW;AAC5B,YAAM,OAAO,wBAAwB,MAAM,IAAI;AAC/C;AAAA;AAAA,QAEE,oBAAC,OAAmC,IAAG,KACrC,+BAAC,QAAQ,MAAR,EACC;AAAA,8BAAC,QAAQ,MAAR,EACC,8BAAC,QAAK,GACR;AAAA,UACA,oBAAC,QAAQ,MAAR,EAAc,gBAAM,OAAM;AAAA,WAC7B,KANQ,GAAG,MAAM,IAAI,IAAI,KAAK,EAOhC;AAAA;AAAA,IAEJ;AAEA;AAAA;AAAA,MAEE,oBAAC,QAAoC,IAAG,KAAI,QAAO,WAChD,gBAAM,SADE,GAAG,MAAM,IAAI,IAAI,KAAK,EAEjC;AAAA;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import {
|
|
2
|
+
curriculum_ai_traning_default
|
|
3
|
+
} from "./chunk-3PE6OFB3.js";
|
|
4
|
+
import {
|
|
5
|
+
curriculum_review_default
|
|
6
|
+
} from "./chunk-WU6EJCDT.js";
|
|
7
|
+
import {
|
|
8
|
+
curriculum_video_default
|
|
9
|
+
} from "./chunk-QGKQ3IX7.js";
|
|
10
|
+
import {
|
|
11
|
+
useCurriculumContext
|
|
12
|
+
} from "./chunk-ZFWZAZPG.js";
|
|
13
|
+
import {
|
|
14
|
+
Typo
|
|
15
|
+
} from "./chunk-PMJIFLDT.js";
|
|
16
|
+
import {
|
|
17
|
+
Flex
|
|
18
|
+
} from "./chunk-25HMMI7R.js";
|
|
19
|
+
import {
|
|
20
|
+
InfoCircledIcon
|
|
21
|
+
} from "./chunk-W5TPOFOO.js";
|
|
22
|
+
|
|
23
|
+
// src/molecules/curriculumV2/CurriculumContents/index.tsx
|
|
24
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
25
|
+
function CurriculumBody() {
|
|
26
|
+
const { selectedItem, selectedSectionTitle } = useCurriculumContext();
|
|
27
|
+
switch (selectedItem.type) {
|
|
28
|
+
case "video":
|
|
29
|
+
return /* @__PURE__ */ jsx(curriculum_video_default, { item: selectedItem });
|
|
30
|
+
case "review":
|
|
31
|
+
return /* @__PURE__ */ jsx(
|
|
32
|
+
curriculum_review_default,
|
|
33
|
+
{
|
|
34
|
+
item: selectedItem,
|
|
35
|
+
sectionTitle: selectedSectionTitle == null ? void 0 : selectedSectionTitle.title
|
|
36
|
+
}
|
|
37
|
+
);
|
|
38
|
+
case "aiTraining":
|
|
39
|
+
return /* @__PURE__ */ jsx(curriculum_ai_traning_default, { item: selectedItem });
|
|
40
|
+
default:
|
|
41
|
+
return /* @__PURE__ */ jsxs(
|
|
42
|
+
Flex,
|
|
43
|
+
{
|
|
44
|
+
align: "center",
|
|
45
|
+
direction: "column",
|
|
46
|
+
gap: "2",
|
|
47
|
+
height: "100%",
|
|
48
|
+
justify: "center",
|
|
49
|
+
width: "100%",
|
|
50
|
+
children: [
|
|
51
|
+
/* @__PURE__ */ jsx(InfoCircledIcon, { height: 24, width: 24 }),
|
|
52
|
+
/* @__PURE__ */ jsx(Typo, { children: "\uCEE8\uD150\uCE20\uB97C \uB85C\uB529 \uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4" }),
|
|
53
|
+
/* @__PURE__ */ jsx(Typo, { align: "center", color: "gray", variant: "caption", children: `[debug info]
|
|
54
|
+
${JSON.stringify(selectedItem)}` })
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
export {
|
|
62
|
+
CurriculumBody
|
|
63
|
+
};
|
|
64
|
+
//# sourceMappingURL=chunk-FFAGYBAB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Flex } from '@/atoms/flex';\nimport { Typo } from '@/atoms/typo';\nimport { InfoCircledIcon } from '@/icon';\nimport { useCurriculumContext } from '../curriculum-context';\nimport CurriculumVideo from './curriculum-video';\nimport CurriculumReview from './curriculum-review';\nimport CurriculumAiTraning from './curriculum-ai-traning';\n\nexport function CurriculumBody(): React.ReactNode {\n const { selectedItem, selectedSectionTitle } = useCurriculumContext();\n\n switch (selectedItem.type) {\n case 'video':\n return <CurriculumVideo item={selectedItem} />;\n case 'review':\n return (\n <CurriculumReview\n item={selectedItem}\n sectionTitle={selectedSectionTitle?.title}\n />\n );\n case 'aiTraining':\n return <CurriculumAiTraning item={selectedItem}/>\n default:\n return (\n <Flex\n align=\"center\"\n direction=\"column\"\n gap=\"2\"\n height=\"100%\"\n justify=\"center\"\n width=\"100%\"\n >\n <InfoCircledIcon height={24} width={24} />\n <Typo>컨텐츠를 로딩 할 수 없습니다</Typo>\n <Typo align=\"center\" color=\"gray\" variant=\"caption\">\n {`[debug info]\n ${JSON.stringify(selectedItem)}`}\n </Typo>\n </Flex>\n );\n }\n} "],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAca,cAYL,YAZK;AALN,SAAS,iBAAkC;AAChD,QAAM,EAAE,cAAc,qBAAqB,IAAI,qBAAqB;AAEpE,UAAQ,aAAa,MAAM;AAAA,IACzB,KAAK;AACH,aAAO,oBAAC,4BAAgB,MAAM,cAAc;AAAA,IAC9C,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,cAAc,6DAAsB;AAAA;AAAA,MACtC;AAAA,IAEF,KAAK;AACH,aAAO,oBAAC,iCAAoB,MAAM,cAAa;AAAA,IACnD;AACE,aACE;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,mBAAgB,QAAQ,IAAI,OAAO,IAAI;AAAA,YACxC,oBAAC,QAAK,0FAAgB;AAAA,YACtB,oBAAC,QAAK,OAAM,UAAS,OAAM,QAAO,SAAQ,WACvC;AAAA,cACC,KAAK,UAAU,YAAY,CAAC,IAChC;AAAA;AAAA;AAAA,MACF;AAAA,EAEN;AACF;","names":[]}
|
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
import {
|
|
2
|
+
DynamicFormField
|
|
3
|
+
} from "./chunk-EMNEV6EN.js";
|
|
4
|
+
import {
|
|
5
|
+
DynamicFormProvider,
|
|
6
|
+
useDynamicForm
|
|
7
|
+
} from "./chunk-NCSMSA3X.js";
|
|
8
|
+
import {
|
|
9
|
+
Form
|
|
10
|
+
} from "./chunk-2OMSNCRH.js";
|
|
11
|
+
import {
|
|
12
|
+
Typo
|
|
13
|
+
} from "./chunk-PMJIFLDT.js";
|
|
14
|
+
import {
|
|
15
|
+
__async
|
|
16
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
17
|
+
|
|
18
|
+
// src/molecules/dynamic-form.tsx
|
|
19
|
+
import { useMemo, useCallback, useEffect } from "react";
|
|
20
|
+
import { useFormik } from "formik";
|
|
21
|
+
import * as Yup from "yup";
|
|
22
|
+
import { Box } from "@radix-ui/themes";
|
|
23
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
24
|
+
function scrollToFirstError(errors, _fields) {
|
|
25
|
+
const firstErrorFieldName = Object.keys(errors)[0];
|
|
26
|
+
if (!firstErrorFieldName) return;
|
|
27
|
+
let fieldElement = document.querySelector(`[name="${firstErrorFieldName}"]`);
|
|
28
|
+
if (!fieldElement) {
|
|
29
|
+
fieldElement = document.querySelector(`[data-field-name="${firstErrorFieldName}"]`);
|
|
30
|
+
}
|
|
31
|
+
if (!fieldElement) {
|
|
32
|
+
fieldElement = document.querySelector(`[data-error-field="${firstErrorFieldName}"]`);
|
|
33
|
+
}
|
|
34
|
+
if (fieldElement) {
|
|
35
|
+
fieldElement.scrollIntoView({
|
|
36
|
+
behavior: "smooth",
|
|
37
|
+
block: "nearest"
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
function DynamicFormRoot({
|
|
42
|
+
fields,
|
|
43
|
+
initialValues = {},
|
|
44
|
+
onSubmit,
|
|
45
|
+
children,
|
|
46
|
+
readonly = false,
|
|
47
|
+
formStyle
|
|
48
|
+
}) {
|
|
49
|
+
const validationSchema = useMemo(() => {
|
|
50
|
+
const schema = {};
|
|
51
|
+
fields.forEach((field) => {
|
|
52
|
+
if (field.validation) {
|
|
53
|
+
const validation = createYupValidation(field, field.validation);
|
|
54
|
+
if (validation) {
|
|
55
|
+
schema[field.name] = validation;
|
|
56
|
+
}
|
|
57
|
+
} else if (field.required) {
|
|
58
|
+
if (field.type === "choices") {
|
|
59
|
+
schema[field.name] = Yup.array().min(1, `${field.label}\uC744(\uB97C) \uD558\uB098 \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`).required(`${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`);
|
|
60
|
+
} else if (field.type === "yes_no") {
|
|
61
|
+
schema[field.name] = Yup.boolean().oneOf([true], `${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`);
|
|
62
|
+
} else {
|
|
63
|
+
schema[field.name] = Yup.string().required(
|
|
64
|
+
`${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
return Object.keys(schema).length > 0 ? Yup.object(schema) : void 0;
|
|
70
|
+
}, [fields]);
|
|
71
|
+
const handleSubmit = useCallback((values) => __async(null, null, function* () {
|
|
72
|
+
yield onSubmit(values);
|
|
73
|
+
}), [onSubmit]);
|
|
74
|
+
const formik = useFormik({
|
|
75
|
+
initialValues: fields.reduce((acc, field) => {
|
|
76
|
+
if (field.type === "choices") {
|
|
77
|
+
acc[field.name] = initialValues[field.name] || [];
|
|
78
|
+
} else if (field.type === "yes_no") {
|
|
79
|
+
acc[field.name] = initialValues[field.name] || false;
|
|
80
|
+
} else {
|
|
81
|
+
acc[field.name] = initialValues[field.name] || "";
|
|
82
|
+
}
|
|
83
|
+
return acc;
|
|
84
|
+
}, {}),
|
|
85
|
+
validationSchema,
|
|
86
|
+
validateOnBlur: true,
|
|
87
|
+
validateOnChange: true,
|
|
88
|
+
onSubmit: handleSubmit
|
|
89
|
+
});
|
|
90
|
+
useEffect(() => {
|
|
91
|
+
if (formik.submitCount > 0 && Object.keys(formik.errors).length > 0) {
|
|
92
|
+
const timeoutId = setTimeout(() => {
|
|
93
|
+
scrollToFirstError(formik.errors, fields);
|
|
94
|
+
}, 100);
|
|
95
|
+
return () => {
|
|
96
|
+
clearTimeout(timeoutId);
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
}, [formik.submitCount, formik.errors, fields]);
|
|
100
|
+
return /* @__PURE__ */ jsx(DynamicFormProvider, { fields, formStyle, formik, readonly, children });
|
|
101
|
+
}
|
|
102
|
+
function DynamicFormFieldList({
|
|
103
|
+
fields: fieldsProp,
|
|
104
|
+
labelVariant
|
|
105
|
+
}) {
|
|
106
|
+
const { formik, fields: fieldsFromContext, readonly } = useDynamicForm();
|
|
107
|
+
const fields = fieldsProp || fieldsFromContext;
|
|
108
|
+
return /* @__PURE__ */ jsx(Fragment, { children: fields.map((field) => {
|
|
109
|
+
const errorMessage = !readonly && formik.touched[field.name] && formik.errors[field.name] ? String(formik.errors[field.name]) : void 0;
|
|
110
|
+
return /* @__PURE__ */ jsx(
|
|
111
|
+
Box,
|
|
112
|
+
{
|
|
113
|
+
"data-error-field": errorMessage ? field.name : void 0,
|
|
114
|
+
"data-field-name": field.name,
|
|
115
|
+
mb: "2",
|
|
116
|
+
children: /* @__PURE__ */ jsxs(
|
|
117
|
+
Form.FormItem,
|
|
118
|
+
{
|
|
119
|
+
errorMessage,
|
|
120
|
+
label: field.label,
|
|
121
|
+
labelVariant,
|
|
122
|
+
name: field.name,
|
|
123
|
+
required: field.required,
|
|
124
|
+
children: [
|
|
125
|
+
/* @__PURE__ */ jsx(DynamicFormField, { field }),
|
|
126
|
+
field.description ? /* @__PURE__ */ jsx(Typo, { color: "gray", variant: "caption", children: field.description }) : null
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
)
|
|
130
|
+
},
|
|
131
|
+
field.name
|
|
132
|
+
);
|
|
133
|
+
}) });
|
|
134
|
+
}
|
|
135
|
+
var DynamicForm = {
|
|
136
|
+
Root: DynamicFormRoot,
|
|
137
|
+
FieldList: DynamicFormFieldList
|
|
138
|
+
};
|
|
139
|
+
function createYupValidation(field, validation) {
|
|
140
|
+
if (!validation) return void 0;
|
|
141
|
+
let schema;
|
|
142
|
+
if (field.type === "number") {
|
|
143
|
+
schema = Yup.number();
|
|
144
|
+
} else if (field.type === "email") {
|
|
145
|
+
schema = Yup.string().email(
|
|
146
|
+
validation.message || "\uC62C\uBC14\uB978 \uC774\uBA54\uC77C \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4"
|
|
147
|
+
);
|
|
148
|
+
} else if (field.type === "choices") {
|
|
149
|
+
schema = Yup.array();
|
|
150
|
+
} else if (field.type === "yes_no") {
|
|
151
|
+
schema = Yup.boolean();
|
|
152
|
+
} else {
|
|
153
|
+
schema = Yup.string();
|
|
154
|
+
}
|
|
155
|
+
if (validation.min !== void 0) {
|
|
156
|
+
if (field.type === "number") {
|
|
157
|
+
schema = schema.min(
|
|
158
|
+
validation.min,
|
|
159
|
+
validation.message || `\uCD5C\uC18C ${validation.min}\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
|
|
160
|
+
);
|
|
161
|
+
} else if (field.type === "choices") {
|
|
162
|
+
schema = schema.min(
|
|
163
|
+
validation.min,
|
|
164
|
+
validation.message || `\uCD5C\uC18C ${validation.min}\uAC1C \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`
|
|
165
|
+
);
|
|
166
|
+
} else if (field.type === "yes_no") {
|
|
167
|
+
} else {
|
|
168
|
+
schema = schema.min(
|
|
169
|
+
validation.min,
|
|
170
|
+
validation.message || `\uCD5C\uC18C ${validation.min}\uC790 \uC774\uC0C1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
|
|
171
|
+
);
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
if (validation.max !== void 0) {
|
|
175
|
+
if (field.type === "number") {
|
|
176
|
+
schema = schema.max(
|
|
177
|
+
validation.max,
|
|
178
|
+
validation.message || `\uCD5C\uB300 ${validation.max}\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4`
|
|
179
|
+
);
|
|
180
|
+
} else if (field.type === "choices") {
|
|
181
|
+
schema = schema.max(
|
|
182
|
+
validation.max,
|
|
183
|
+
validation.message || `\uCD5C\uB300 ${validation.max}\uAC1C\uAE4C\uC9C0 \uC120\uD0DD \uAC00\uB2A5\uD569\uB2C8\uB2E4`
|
|
184
|
+
);
|
|
185
|
+
} else if (field.type === "yes_no") {
|
|
186
|
+
} else {
|
|
187
|
+
schema = schema.max(
|
|
188
|
+
validation.max,
|
|
189
|
+
validation.message || `\uCD5C\uB300 ${validation.max}\uC790 \uC774\uD558\uC5EC\uC57C \uD569\uB2C8\uB2E4`
|
|
190
|
+
);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
if (validation.pattern) {
|
|
194
|
+
if (field.type === "yes_no") {
|
|
195
|
+
} else {
|
|
196
|
+
schema = schema.matches(
|
|
197
|
+
new RegExp(validation.pattern),
|
|
198
|
+
validation.message || "\uC62C\uBC14\uB978 \uD615\uC2DD\uC774 \uC544\uB2D9\uB2C8\uB2E4"
|
|
199
|
+
);
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
if (field.required) {
|
|
203
|
+
if (field.type === "yes_no") {
|
|
204
|
+
schema = schema.oneOf([true], validation.message || `${field.label}\uC5D0 \uB3D9\uC758\uD574\uC8FC\uC138\uC694`);
|
|
205
|
+
} else if (field.type === "choices") {
|
|
206
|
+
schema = schema.min(1, validation.message || `${field.label}\uC744(\uB97C) \uD558\uB098 \uC774\uC0C1 \uC120\uD0DD\uD574\uC8FC\uC138\uC694`);
|
|
207
|
+
} else {
|
|
208
|
+
schema = schema.required(validation.message || `${field.label}\uC740(\uB294) \uD544\uC218\uC785\uB2C8\uB2E4`);
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
return schema;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
export {
|
|
215
|
+
DynamicForm,
|
|
216
|
+
createYupValidation
|
|
217
|
+
};
|
|
218
|
+
//# sourceMappingURL=chunk-FVNVGFTT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/dynamic-form.tsx"],"sourcesContent":["import React, { useMemo, useCallback, useEffect } from 'react';\nimport { useFormik, type FormikProps } from 'formik';\nimport * as Yup from 'yup';\nimport { Box } from '@radix-ui/themes';\nimport { Typo } from '@/atoms/typo';\nimport {\n DynamicFormProvider,\n useDynamicForm,\n} from '@/context/dynamic-form-context';\nimport type {\n DynamicFormFieldSchema,\n ValidationRule,\n} from '@/types/dynamic-form-schema-generated';\nimport { Form } from './form/form';\nimport { DynamicFormField } from './dynamic-field';\n\nexport interface DynamicFormProps {\n fields: DynamicFormFieldSchema[];\n initialValues?: Record<string, unknown>;\n onSubmit: (values: Record<string, unknown>) => void | Promise<void>;\n children: React.ReactNode;\n readonly?: boolean;\n formStyle?: React.CSSProperties;\n}\n\n/**\n * 첫 번째 에러 필드로 스크롤하는 함수\n */\nfunction scrollToFirstError(errors: Record<string, unknown>, _fields: DynamicFormFieldSchema[]): void {\n const firstErrorFieldName = Object.keys(errors)[0];\n if (!firstErrorFieldName) return;\n\n // 해당 필드의 DOM 요소를 찾기 (여러 선택자 시도)\n let fieldElement = document.querySelector(`[name=\"${firstErrorFieldName}\"]`);\n \n // input 요소를 찾지 못한 경우, 해당 필드의 컨테이너를 찾기\n if (!fieldElement) {\n fieldElement = document.querySelector(`[data-field-name=\"${firstErrorFieldName}\"]`);\n }\n \n // 여전히 찾지 못한 경우, FormItem의 에러 메시지 영역을 찾기\n if (!fieldElement) {\n fieldElement = document.querySelector(`[data-error-field=\"${firstErrorFieldName}\"]`);\n }\n\n if (fieldElement) {\n fieldElement.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n });\n }\n}\n\nfunction DynamicFormRoot({\n fields,\n initialValues = {},\n onSubmit,\n children,\n readonly = false,\n formStyle,\n}: DynamicFormProps): React.ReactElement {\n const validationSchema = useMemo(() => {\n const schema: Record<string, Yup.Schema<unknown>> = {};\n fields.forEach((field) => {\n if (field.validation) {\n const validation = createYupValidation(field, field.validation);\n if (validation) {\n schema[field.name] = validation;\n }\n } else if (field.required) {\n // choices 타입은 배열 스키마로 처리\n if (field.type === 'choices') {\n schema[field.name] = Yup.array()\n .min(1, `${field.label}을(를) 하나 이상 선택해주세요`)\n .required(`${field.label}은(는) 필수입니다`);\n } else if (field.type === 'yes_no') {\n // yes_no 타입은 boolean 스키마로 처리\n schema[field.name] = Yup.boolean().oneOf([true], `${field.label}에 동의해주세요`);\n } else {\n // choice, dropdown, short_text, long_text, number, email 타입은 문자열 스키마로 처리\n schema[field.name] = Yup.string().required(\n `${field.label}은(는) 필수입니다`\n );\n }\n }\n });\n return Object.keys(schema).length > 0 ? Yup.object(schema) : undefined;\n }, [fields]);\n\n const handleSubmit = useCallback(async (values: Record<string, unknown>) => {\n await onSubmit(values);\n }, [onSubmit]);\n\n const formik: FormikProps<Record<string, unknown>> = useFormik({\n initialValues: fields.reduce<Record<string, unknown>>((acc, field) => {\n if (field.type === 'choices') {\n acc[field.name] = initialValues[field.name] || [];\n } else if (field.type === 'yes_no') {\n acc[field.name] = initialValues[field.name] || false;\n } else {\n acc[field.name] = initialValues[field.name] || '';\n }\n return acc;\n }, {}),\n validationSchema,\n validateOnBlur: true,\n validateOnChange: true,\n onSubmit: handleSubmit,\n });\n\n // submit 시 validation 에러가 있으면 첫 번째 에러 필드로 스크롤\n useEffect(() => {\n if (formik.submitCount > 0 && Object.keys(formik.errors).length > 0) {\n // 약간의 지연을 두어 DOM 업데이트 후 스크롤 실행\n const timeoutId = setTimeout(() => {\n scrollToFirstError(formik.errors, fields);\n }, 100);\n \n return () => {\n clearTimeout(timeoutId);\n };\n }\n }, [formik.submitCount, formik.errors, fields]);\n\n return (\n <DynamicFormProvider fields={fields} formStyle={formStyle} formik={formik} readonly={readonly}>\n {children}\n </DynamicFormProvider>\n );\n}\n\ninterface DynamicFormFieldListProps {\n fields?: DynamicFormFieldSchema[];\n labelVariant?: 'title' | 'body' | 'caption';\n}\nfunction DynamicFormFieldList({\n fields: fieldsProp,\n labelVariant,\n}: DynamicFormFieldListProps): React.ReactElement {\n const { formik, fields: fieldsFromContext, readonly } = useDynamicForm();\n const fields = fieldsProp || fieldsFromContext;\n\n return (\n <>\n {fields.map((field) => {\n const errorMessage =\n !readonly && formik.touched[field.name] && formik.errors[field.name]\n ? String(formik.errors[field.name])\n : undefined;\n\n return (\n <Box\n data-error-field={errorMessage ? field.name : undefined}\n data-field-name={field.name}\n key={field.name}\n mb=\"2\"\n >\n <Form.FormItem\n errorMessage={errorMessage}\n label={field.label}\n labelVariant={labelVariant}\n name={field.name}\n required={field.required}\n >\n <DynamicFormField field={field} />\n {field.description ? <Typo color=\"gray\" variant=\"caption\">{field.description}</Typo> : null}\n </Form.FormItem>\n </Box>\n );\n })}\n </>\n );\n}\n\nexport const DynamicForm = {\n Root: DynamicFormRoot,\n FieldList: DynamicFormFieldList,\n};\n\nexport function createYupValidation(\n field: DynamicFormFieldSchema,\n validation?: ValidationRule\n): Yup.Schema<unknown> | undefined {\n if (!validation) return undefined;\n\n let schema: Yup.Schema<unknown>;\n\n // field.type을 기준으로 기본 스키마 생성\n if (field.type === 'number') {\n schema = Yup.number();\n } else if (field.type === 'email') {\n schema = Yup.string().email(\n validation.message || '올바른 이메일 형식이 아닙니다'\n );\n } else if (field.type === 'choices') {\n schema = Yup.array();\n } else if (field.type === 'yes_no') {\n schema = Yup.boolean();\n } else {\n // choice, dropdown, short_text, long_text 타입은 문자열 스키마로 처리\n schema = Yup.string();\n }\n\n if (validation.min !== undefined) {\n if (field.type === 'number') {\n schema = (schema as Yup.NumberSchema).min(\n validation.min,\n validation.message || `최소 ${validation.min}이어야 합니다`\n );\n } else if (field.type === 'choices') {\n schema = (schema as ReturnType<typeof Yup.array>).min(\n validation.min,\n validation.message || `최소 ${validation.min}개 이상 선택해주세요`\n );\n } else if (field.type === 'yes_no') {\n // yes_no 타입은 boolean이므로 min/max 검증 불가\n // 대신 required 검증만 적용\n } else {\n schema = (schema as Yup.StringSchema).min(\n validation.min,\n validation.message || `최소 ${validation.min}자 이상이어야 합니다`\n );\n }\n }\n\n if (validation.max !== undefined) {\n if (field.type === 'number') {\n schema = (schema as Yup.NumberSchema).max(\n validation.max,\n validation.message || `최대 ${validation.max}이어야 합니다`\n );\n } else if (field.type === 'choices') {\n schema = (schema as ReturnType<typeof Yup.array>).max(\n validation.max,\n validation.message || `최대 ${validation.max}개까지 선택 가능합니다`\n );\n } else if (field.type === 'yes_no') {\n // yes_no 타입은 boolean이므로 min/max 검증 불가\n // 대신 required 검증만 적용\n } else {\n schema = (schema as Yup.StringSchema).max(\n validation.max,\n validation.message || `최대 ${validation.max}자 이하여야 합니다`\n );\n }\n }\n\n if (validation.pattern) {\n if (field.type === 'yes_no') {\n // yes_no 타입은 boolean이므로 pattern 검증 불가\n // 대신 required 검증만 적용\n } else {\n schema = (schema as Yup.StringSchema).matches(\n new RegExp(validation.pattern),\n validation.message || '올바른 형식이 아닙니다'\n );\n }\n }\n\n // field.required가 true인 경우 required 검증 추가\n if (field.required) {\n if (field.type === 'yes_no') {\n schema = (schema as Yup.BooleanSchema).oneOf([true], validation.message || `${field.label}에 동의해주세요`);\n } else if (field.type === 'choices') {\n schema = (schema as ReturnType<typeof Yup.array>).min(1, validation.message || `${field.label}을(를) 하나 이상 선택해주세요`);\n } else {\n schema = (schema as Yup.StringSchema).required(validation.message || `${field.label}은(는) 필수입니다`);\n }\n }\n\n return schema;\n}\n"],"mappings":"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","names":[]}
|