@tipp/ui 2.3.15 → 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.map +1 -1
- package/dist/app/index.js +56 -56
- package/dist/app/platform/coach-question-list.js +26 -26
- package/dist/app/platform/contents-card.js +26 -26
- package/dist/app/platform/curriculum-card.js +2 -2
- package/dist/app/platform/edit-coaching-time.cjs.map +1 -1
- package/dist/app/platform/edit-coaching-time.js +44 -44
- package/dist/app/platform/edit-service-type.cjs.map +1 -1
- package/dist/app/platform/edit-service-type.js +44 -44
- package/dist/app/platform/goal-manage-card-edit.cjs.map +1 -1
- package/dist/app/platform/goal-manage-card-edit.js +45 -45
- package/dist/app/platform/goal-manage-card-read.js +26 -26
- package/dist/app/platform/on-offline-radio-card.cjs.map +1 -1
- package/dist/app/platform/on-offline-radio-card.js +44 -44
- package/dist/app/platform/report-card.js +26 -26
- package/dist/app/platform/reservation-card.cjs.map +1 -1
- package/dist/app/platform/reservation-card.js +45 -45
- package/dist/app/platform/session-card.cjs.map +1 -1
- package/dist/app/platform/session-card.js +45 -45
- package/dist/app/platform/session-review-simple-read.js +26 -26
- package/dist/app/platform/userInfos/coaching-customer-info/index.js +28 -28
- package/dist/app/platform/userInfos/coaching-customer-info/large.js +26 -26
- package/dist/app/platform/userInfos/coaching-customer-info/medium.js +26 -26
- package/dist/app/platform/userInfos/coaching-customer-info/small.js +25 -25
- package/dist/app/platform/userInfos/session-user-info-detail.js +25 -25
- package/dist/app/platform/userInfos/utils.js +25 -25
- package/dist/atoms/index.js +60 -60
- package/dist/chunk-2GTKMGHS.js +70 -0
- package/dist/chunk-2GTKMGHS.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-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-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-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-BJLJNTF2.js +218 -0
- package/dist/chunk-BJLJNTF2.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-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-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-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-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-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-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-TJQUUR4N.js +54 -0
- package/dist/chunk-TJQUUR4N.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-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/context/index.js +1 -1
- package/dist/index.cjs +9 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +107 -107
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/index.js +7 -7
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-body.js +6 -6
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-radio.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-option.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-text.js +1 -1
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.js +3 -3
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.js +10 -10
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/start-review.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/curriculum-review.js +11 -11
- package/dist/molecules/curriculumV2/CurriculumContents/index.js +12 -12
- package/dist/molecules/curriculumV2/CurriculumSidebar/index.js +1 -1
- package/dist/molecules/curriculumV2/index.js +19 -19
- package/dist/molecules/description-json-render.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 +3 -2
- package/dist/molecules/dynamic-form.cjs +32 -29
- package/dist/molecules/dynamic-form.cjs.map +1 -1
- package/dist/molecules/dynamic-form.js +4 -3
- package/dist/molecules/expand-table/index.js +1 -1
- package/dist/molecules/index.cjs +9 -9
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +40 -40
- package/dist/molecules/learning-post.js +2 -2
- package/dist/molecules/stepper.js +2 -2
- package/dist/molecules/tag-selector.js +3 -3
- package/package.json +1 -1
- package/src/molecules/dynamic-field.tsx +11 -9
- package/src/molecules/dynamic-form.tsx +1 -1
|
@@ -0,0 +1,218 @@
|
|
|
1
|
+
import {
|
|
2
|
+
DynamicFormField
|
|
3
|
+
} from "./chunk-7MB2G5XF.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, { 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-XUTNPV7E.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>{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":[]}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import {
|
|
2
|
+
getCalloutIconComponent
|
|
3
|
+
} from "./chunk-3INEXJIV.js";
|
|
4
|
+
import {
|
|
5
|
+
List
|
|
6
|
+
} from "./chunk-JIJLOKVN.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-YWEWWXKM.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,39 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Card
|
|
3
|
+
} from "./chunk-RP2RGCAW.js";
|
|
4
|
+
import {
|
|
5
|
+
Box
|
|
6
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
7
|
+
import {
|
|
8
|
+
Flex
|
|
9
|
+
} from "./chunk-25HMMI7R.js";
|
|
10
|
+
import {
|
|
11
|
+
Heading
|
|
12
|
+
} from "./chunk-BESTU2AY.js";
|
|
13
|
+
import {
|
|
14
|
+
Typo
|
|
15
|
+
} from "./chunk-PMJIFLDT.js";
|
|
16
|
+
import {
|
|
17
|
+
__spreadValues
|
|
18
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
19
|
+
|
|
20
|
+
// src/app/platform/coach-question-list.tsx
|
|
21
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
22
|
+
function QuestionItem({ question, answer }) {
|
|
23
|
+
return /* @__PURE__ */ jsxs(Box, { children: [
|
|
24
|
+
/* @__PURE__ */ jsx(Heading, { mb: "2", variant: "heading5", children: question }),
|
|
25
|
+
/* @__PURE__ */ jsx(Card, { children: answer ? /* @__PURE__ */ jsx(Typo, { as: "p", children: answer }) : /* @__PURE__ */ jsx(Typo, { color: "gray", children: "\uB4F1\uB85D\uB41C \uB2F5\uBCC0\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." }) })
|
|
26
|
+
] }, question);
|
|
27
|
+
}
|
|
28
|
+
function CoachQuestionList({
|
|
29
|
+
questions
|
|
30
|
+
}) {
|
|
31
|
+
return /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "8", children: questions.map((question) => {
|
|
32
|
+
return /* @__PURE__ */ jsx(QuestionItem, __spreadValues({}, question), question.question);
|
|
33
|
+
}) });
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
export {
|
|
37
|
+
CoachQuestionList
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=chunk-YYWEFK4H.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/app/platform/coach-question-list.tsx"],"sourcesContent":["import React from 'react';\nimport { Box, Card, Flex, Heading, Typo } from '../../atoms';\n\ninterface Question {\n answer: string;\n question: string;\n}\nexport interface CoachQuestionListProps {\n questions: Question[];\n}\n\nfunction QuestionItem({ question, answer }: Question): React.ReactNode {\n return (\n <Box key={question}>\n <Heading mb=\"2\" variant=\"heading5\">\n {question}\n </Heading>\n <Card>\n {answer ? (\n <Typo as=\"p\">{answer}</Typo>\n ) : (\n <Typo color=\"gray\">등록된 답변이 없습니다.</Typo>\n )}\n </Card>\n </Box>\n );\n}\n\nexport function CoachQuestionList({\n questions,\n}: CoachQuestionListProps): React.ReactNode {\n return (\n <Flex direction=\"column\" gap=\"8\">\n {questions.map((question) => {\n return <QuestionItem key={question.question} {...question} />;\n })}\n </Flex>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAaI,SACE,KADF;AAFJ,SAAS,aAAa,EAAE,UAAU,OAAO,GAA8B;AACrE,SACE,qBAAC,OACC;AAAA,wBAAC,WAAQ,IAAG,KAAI,SAAQ,YACrB,oBACH;AAAA,IACA,oBAAC,QACE,mBACC,oBAAC,QAAK,IAAG,KAAK,kBAAO,IAErB,oBAAC,QAAK,OAAM,QAAO,6EAAa,GAEpC;AAAA,OAVQ,QAWV;AAEJ;AAEO,SAAS,kBAAkB;AAAA,EAChC;AACF,GAA4C;AAC1C,SACE,oBAAC,QAAK,WAAU,UAAS,KAAI,KAC1B,oBAAU,IAAI,CAAC,aAAa;AAC3B,WAAO,oBAAC,iCAAyC,WAAvB,SAAS,QAAwB;AAAA,EAC7D,CAAC,GACH;AAEJ;","names":[]}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import {
|
|
2
|
+
RadioButtonCard
|
|
3
|
+
} from "./chunk-CSKNBWPB.js";
|
|
4
|
+
import {
|
|
5
|
+
Box
|
|
6
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
7
|
+
import {
|
|
8
|
+
Flex
|
|
9
|
+
} from "./chunk-25HMMI7R.js";
|
|
10
|
+
import {
|
|
11
|
+
Typo
|
|
12
|
+
} from "./chunk-PMJIFLDT.js";
|
|
13
|
+
import {
|
|
14
|
+
__spreadProps,
|
|
15
|
+
__spreadValues
|
|
16
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
17
|
+
|
|
18
|
+
// src/app/platform/on-offline-radio-card.tsx
|
|
19
|
+
import { BackpackIcon, GlobeIcon } from "@radix-ui/react-icons";
|
|
20
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
21
|
+
var SERVICE_TYPE = {
|
|
22
|
+
onlineCoaching: "onlineCoaching",
|
|
23
|
+
offlineCoaching: "offlineCoaching"
|
|
24
|
+
};
|
|
25
|
+
var breakpoint = "sm";
|
|
26
|
+
function HideSmallBox(props) {
|
|
27
|
+
return /* @__PURE__ */ jsx(Box, { display: { initial: "none", [breakpoint]: "block" }, children: props.children });
|
|
28
|
+
}
|
|
29
|
+
function OnOfflineRadioCard(props) {
|
|
30
|
+
const Wrapper = props.response ? HideSmallBox : (p) => p.children;
|
|
31
|
+
const columns = props.response ? { initial: "2", [breakpoint]: "1" } : "1";
|
|
32
|
+
const justify = props.response ? { initial: "center", [breakpoint]: "between" } : "between";
|
|
33
|
+
return /* @__PURE__ */ jsxs(
|
|
34
|
+
RadioButtonCard.Root,
|
|
35
|
+
__spreadProps(__spreadValues({
|
|
36
|
+
RadioWrapper: Wrapper,
|
|
37
|
+
columns,
|
|
38
|
+
gap: "2",
|
|
39
|
+
justify
|
|
40
|
+
}, props), {
|
|
41
|
+
children: [
|
|
42
|
+
/* @__PURE__ */ jsx(RadioButtonCard.Item, { value: SERVICE_TYPE.onlineCoaching, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
|
|
43
|
+
/* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(GlobeIcon, {}) }),
|
|
44
|
+
/* @__PURE__ */ jsx(Typo, { children: "\uC628\uB77C\uC778" })
|
|
45
|
+
] }) }),
|
|
46
|
+
/* @__PURE__ */ jsx(RadioButtonCard.Item, { value: SERVICE_TYPE.offlineCoaching, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
|
|
47
|
+
/* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(BackpackIcon, {}) }),
|
|
48
|
+
/* @__PURE__ */ jsx(Typo, { children: "\uC624\uD504\uB77C\uC778" })
|
|
49
|
+
] }) })
|
|
50
|
+
]
|
|
51
|
+
})
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export {
|
|
56
|
+
OnOfflineRadioCard
|
|
57
|
+
};
|
|
58
|
+
//# sourceMappingURL=chunk-Z5JV7JGZ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/app/platform/on-offline-radio-card.tsx"],"sourcesContent":["import React from 'react';\nimport { BackpackIcon, GlobeIcon } from '@radix-ui/react-icons';\nimport type { RadioButtonCardRootProps } from '../../molecules';\nimport { RadioButtonCard } from '../../molecules';\nimport { Box, Flex, Typo } from '../../atoms';\n\nconst SERVICE_TYPE = {\n onlineCoaching: 'onlineCoaching',\n offlineCoaching: 'offlineCoaching',\n} as const;\n\nconst breakpoint = 'sm';\n\nfunction HideSmallBox(props: {\n children: React.ReactNode;\n}): React.ReactNode {\n return (\n <Box display={{ initial: 'none', [breakpoint]: 'block' }}>\n {props.children}\n </Box>\n );\n}\n\nexport function OnOfflineRadioCard(\n props: RadioButtonCardRootProps & {\n response?: boolean;\n }\n): React.ReactNode {\n const Wrapper = props.response\n ? HideSmallBox\n : (p: { children: React.ReactNode }): React.ReactNode => p.children;\n const columns = props.response ? { initial: '2', [breakpoint]: '1' } : '1';\n const justify = props.response\n ? { initial: 'center', [breakpoint]: 'between' }\n : 'between';\n\n return (\n <RadioButtonCard.Root\n RadioWrapper={Wrapper}\n columns={columns}\n gap=\"2\"\n justify={justify}\n {...props}\n >\n <RadioButtonCard.Item value={SERVICE_TYPE.onlineCoaching}>\n <Flex align=\"center\" gap=\"2\">\n <Wrapper>\n <GlobeIcon />\n </Wrapper>\n <Typo>온라인</Typo>\n </Flex>\n </RadioButtonCard.Item>\n <RadioButtonCard.Item value={SERVICE_TYPE.offlineCoaching}>\n <Flex align=\"center\" gap=\"2\">\n <Wrapper>\n <BackpackIcon />\n </Wrapper>\n <Typo>오프라인</Typo>\n </Flex>\n </RadioButtonCard.Item>\n </RadioButtonCard.Root>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AACA,SAAS,cAAc,iBAAiB;AAgBpC,cA4BI,YA5BJ;AAXJ,IAAM,eAAe;AAAA,EACnB,gBAAgB;AAAA,EAChB,iBAAiB;AACnB;AAEA,IAAM,aAAa;AAEnB,SAAS,aAAa,OAEF;AAClB,SACE,oBAAC,OAAI,SAAS,EAAE,SAAS,QAAQ,CAAC,UAAU,GAAG,QAAQ,GACpD,gBAAM,UACT;AAEJ;AAEO,SAAS,mBACd,OAGiB;AACjB,QAAM,UAAU,MAAM,WAClB,eACA,CAAC,MAAsD,EAAE;AAC7D,QAAM,UAAU,MAAM,WAAW,EAAE,SAAS,KAAK,CAAC,UAAU,GAAG,IAAI,IAAI;AACvE,QAAM,UAAU,MAAM,WAClB,EAAE,SAAS,UAAU,CAAC,UAAU,GAAG,UAAU,IAC7C;AAEJ,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,cAAc;AAAA,MACd;AAAA,MACA,KAAI;AAAA,MACJ;AAAA,OACI,QALL;AAAA,MAOC;AAAA,4BAAC,gBAAgB,MAAhB,EAAqB,OAAO,aAAa,gBACxC,+BAAC,QAAK,OAAM,UAAS,KAAI,KACvB;AAAA,8BAAC,WACC,8BAAC,aAAU,GACb;AAAA,UACA,oBAAC,QAAK,gCAAG;AAAA,WACX,GACF;AAAA,QACA,oBAAC,gBAAgB,MAAhB,EAAqB,OAAO,aAAa,iBACxC,+BAAC,QAAK,OAAM,UAAS,KAAI,KACvB;AAAA,8BAAC,WACC,8BAAC,gBAAa,GAChB;AAAA,UACA,oBAAC,QAAK,sCAAI;AAAA,WACZ,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
import {
|
|
2
|
+
CurriculumReviewSteps_default
|
|
3
|
+
} from "./chunk-5VPNBYFV.js";
|
|
4
|
+
import {
|
|
5
|
+
useCurriculumContext
|
|
6
|
+
} from "./chunk-ZFWZAZPG.js";
|
|
7
|
+
import {
|
|
8
|
+
Dialog
|
|
9
|
+
} from "./chunk-AH4A53SZ.js";
|
|
10
|
+
import {
|
|
11
|
+
IconButton
|
|
12
|
+
} from "./chunk-XK6VEVOK.js";
|
|
13
|
+
import {
|
|
14
|
+
Box
|
|
15
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
16
|
+
import {
|
|
17
|
+
Typo
|
|
18
|
+
} from "./chunk-PMJIFLDT.js";
|
|
19
|
+
import {
|
|
20
|
+
Flex
|
|
21
|
+
} from "./chunk-25HMMI7R.js";
|
|
22
|
+
import {
|
|
23
|
+
Button
|
|
24
|
+
} from "./chunk-ZVDAEY5Q.js";
|
|
25
|
+
import {
|
|
26
|
+
__spreadValues
|
|
27
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
28
|
+
|
|
29
|
+
// src/molecules/curriculumV2/CurriculumContents/curriculum-review.tsx
|
|
30
|
+
import { useCallback, useMemo, useState } from "react";
|
|
31
|
+
import { Cross1Icon } from "@radix-ui/react-icons";
|
|
32
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
33
|
+
function CurriculumReview(props) {
|
|
34
|
+
const { item, sectionTitle } = props;
|
|
35
|
+
const { description, buttonTitle } = item;
|
|
36
|
+
const {
|
|
37
|
+
curriculum,
|
|
38
|
+
onReviewSubmit: _onReviewSubmit,
|
|
39
|
+
onReviewValueChange: _onReviewValueChange,
|
|
40
|
+
curriculumReviewAnswers,
|
|
41
|
+
tempCurriculumReviewAnswers,
|
|
42
|
+
curriculumCompleteMap
|
|
43
|
+
} = useCurriculumContext();
|
|
44
|
+
const [open, setOpen] = useState(false);
|
|
45
|
+
const [isChanged, setIsChanged] = useState(false);
|
|
46
|
+
const [closeDialogOpen, setCloseDialogOpen] = useState(false);
|
|
47
|
+
const onReviewValueChange = useCallback(
|
|
48
|
+
({
|
|
49
|
+
reviewId,
|
|
50
|
+
answer
|
|
51
|
+
}) => {
|
|
52
|
+
if (curriculumReviewAnswers[reviewId] === answer[reviewId]) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
setIsChanged(true);
|
|
56
|
+
_onReviewValueChange({ reviewId, answer });
|
|
57
|
+
},
|
|
58
|
+
[_onReviewValueChange, curriculumReviewAnswers]
|
|
59
|
+
);
|
|
60
|
+
const onReviewSubmit = useCallback(
|
|
61
|
+
(values) => {
|
|
62
|
+
return _onReviewSubmit({ reviewId: item.uuid, answer: values }).then(
|
|
63
|
+
(result) => {
|
|
64
|
+
setIsChanged(false);
|
|
65
|
+
return result;
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
|
+
},
|
|
69
|
+
[item.uuid, _onReviewSubmit]
|
|
70
|
+
);
|
|
71
|
+
const onClickEndReview = useCallback(() => {
|
|
72
|
+
setOpen(false);
|
|
73
|
+
}, []);
|
|
74
|
+
const onClickCloseDrawer = useCallback(() => {
|
|
75
|
+
if (isChanged) {
|
|
76
|
+
setCloseDialogOpen(true);
|
|
77
|
+
} else {
|
|
78
|
+
setOpen(false);
|
|
79
|
+
}
|
|
80
|
+
}, [isChanged]);
|
|
81
|
+
const mode = useMemo(() => {
|
|
82
|
+
return item.questions.every(
|
|
83
|
+
(question) => curriculumReviewAnswers[question.uuid] && curriculumReviewAnswers[question.uuid] !== ""
|
|
84
|
+
) ? "edit" : "create";
|
|
85
|
+
}, [curriculumReviewAnswers, item.questions]);
|
|
86
|
+
const defaultValues = useMemo(() => {
|
|
87
|
+
const allAnswers = __spreadValues(__spreadValues({}, tempCurriculumReviewAnswers), curriculumReviewAnswers);
|
|
88
|
+
return item.questions.reduce((acc, question) => {
|
|
89
|
+
acc[question.uuid] = allAnswers[question.uuid] || "";
|
|
90
|
+
return acc;
|
|
91
|
+
}, {});
|
|
92
|
+
}, [curriculumReviewAnswers, item.questions, tempCurriculumReviewAnswers]);
|
|
93
|
+
const done = useMemo(() => {
|
|
94
|
+
return Boolean(curriculumCompleteMap[item.uuid]);
|
|
95
|
+
}, [curriculumCompleteMap, item.uuid]);
|
|
96
|
+
const bgColor = done ? "var(--color-panel-solid)" : void 0;
|
|
97
|
+
return /* @__PURE__ */ jsxs(Dialog.Root, { onOpenChange: setOpen, open, children: [
|
|
98
|
+
/* @__PURE__ */ jsxs(
|
|
99
|
+
Flex,
|
|
100
|
+
{
|
|
101
|
+
align: "center",
|
|
102
|
+
direction: "column",
|
|
103
|
+
height: "100%",
|
|
104
|
+
justify: "center",
|
|
105
|
+
px: "3",
|
|
106
|
+
py: "3",
|
|
107
|
+
style: {
|
|
108
|
+
backgroundImage: `url(https://tipp-coaching-live.s3.ap-northeast-2.amazonaws.com/images/curriculum_review_bg.png)`,
|
|
109
|
+
backgroundPosition: "center",
|
|
110
|
+
backgroundSize: "cover",
|
|
111
|
+
backgroundRepeat: "no-repeat"
|
|
112
|
+
},
|
|
113
|
+
width: "100%",
|
|
114
|
+
children: [
|
|
115
|
+
/* @__PURE__ */ jsx(Typo, { color: "gray", weight: "bold", children: curriculum.title }),
|
|
116
|
+
/* @__PURE__ */ jsx(Typo, { align: "center", as: "p", color: "gray", children: description }),
|
|
117
|
+
/* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsx(
|
|
118
|
+
Button,
|
|
119
|
+
{
|
|
120
|
+
mt: "3",
|
|
121
|
+
style: { minWidth: 232, backgroundColor: bgColor },
|
|
122
|
+
variant: done ? "outline" : "solid",
|
|
123
|
+
children: /* @__PURE__ */ jsx(Typo, { truncate: true, children: done ? "\uB098\uC758 \uC751\uB2F5 \uB2E4\uC2DC\uBCF4\uAE30" : buttonTitle })
|
|
124
|
+
}
|
|
125
|
+
) })
|
|
126
|
+
]
|
|
127
|
+
}
|
|
128
|
+
),
|
|
129
|
+
/* @__PURE__ */ jsx(
|
|
130
|
+
Dialog.Content,
|
|
131
|
+
{
|
|
132
|
+
height: "100%",
|
|
133
|
+
hideCloseButton: true,
|
|
134
|
+
style: { borderRadius: 0, padding: 0 },
|
|
135
|
+
title: "",
|
|
136
|
+
width: "100%",
|
|
137
|
+
children: /* @__PURE__ */ jsxs(
|
|
138
|
+
Flex,
|
|
139
|
+
{
|
|
140
|
+
align: "center",
|
|
141
|
+
height: "100%",
|
|
142
|
+
justify: "center",
|
|
143
|
+
pb: "3",
|
|
144
|
+
position: "relative",
|
|
145
|
+
width: "100%",
|
|
146
|
+
children: [
|
|
147
|
+
/* @__PURE__ */ jsx(
|
|
148
|
+
CurriculumReviewSteps_default,
|
|
149
|
+
{
|
|
150
|
+
contents: item,
|
|
151
|
+
curriculum,
|
|
152
|
+
defaultValues,
|
|
153
|
+
done,
|
|
154
|
+
mode,
|
|
155
|
+
onClickEndReview,
|
|
156
|
+
onReviewValueChange,
|
|
157
|
+
onSubmit: onReviewSubmit,
|
|
158
|
+
title: sectionTitle
|
|
159
|
+
}
|
|
160
|
+
),
|
|
161
|
+
/* @__PURE__ */ jsx(Box, { position: "absolute", right: "16px", top: "16px", children: /* @__PURE__ */ jsxs(
|
|
162
|
+
IconButton,
|
|
163
|
+
{
|
|
164
|
+
color: "gray",
|
|
165
|
+
onClick: onClickCloseDrawer,
|
|
166
|
+
variant: "ghost",
|
|
167
|
+
children: [
|
|
168
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "none", md: "block" }, children: /* @__PURE__ */ jsx(Cross1Icon, { height: 20, width: 20 }) }),
|
|
169
|
+
/* @__PURE__ */ jsx(Box, { display: { initial: "block", md: "none" }, children: /* @__PURE__ */ jsx(Cross1Icon, { height: 16, width: 16 }) })
|
|
170
|
+
]
|
|
171
|
+
}
|
|
172
|
+
) }),
|
|
173
|
+
/* @__PURE__ */ jsx(Dialog.Root, { onOpenChange: setCloseDialogOpen, open: closeDialogOpen, children: /* @__PURE__ */ jsx(
|
|
174
|
+
Dialog.Content,
|
|
175
|
+
{
|
|
176
|
+
buttons: /* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", children: [
|
|
177
|
+
/* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { color: "gray", variant: "outline", children: "\uB3CC\uC544\uAC00\uAE30" }) }),
|
|
178
|
+
/* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { color: "red", onClick: onClickEndReview, children: "\uB098\uAC00\uAE30" }) })
|
|
179
|
+
] }),
|
|
180
|
+
title: "\uC791\uC131\uC744 \uC911\uB2E8\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?",
|
|
181
|
+
children: /* @__PURE__ */ jsx(Typo, { children: "\uD398\uC774\uC9C0\uC5D0\uC11C \uBC97\uC5B4\uB098\uBA74 \uC791\uC131\uD55C \uB0B4\uC6A9\uC774 \uC800\uC7A5\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4." })
|
|
182
|
+
}
|
|
183
|
+
) })
|
|
184
|
+
]
|
|
185
|
+
}
|
|
186
|
+
)
|
|
187
|
+
}
|
|
188
|
+
)
|
|
189
|
+
] });
|
|
190
|
+
}
|
|
191
|
+
var curriculum_review_default = CurriculumReview;
|
|
192
|
+
|
|
193
|
+
export {
|
|
194
|
+
curriculum_review_default
|
|
195
|
+
};
|
|
196
|
+
//# sourceMappingURL=chunk-ZMXFJ3AZ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/curriculum-review.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { Box } from '@/atoms/box';\nimport { Button } from '@/atoms/button';\nimport { Dialog } from '@/atoms/dialog';\nimport { Flex } from '@/atoms/flex';\nimport { IconButton } from '@/atoms/icon-button';\nimport { Typo } from '@/atoms/typo';\nimport { type CurriculumReviewContents } from '@/types/curriculumContents.type';\nimport { useCurriculumContext } from '../curriculum-context';\nimport CurriculumReviewSteps from './CurriculumReviewSteps';\n\ninterface CurriculumReviewProps {\n item: CurriculumReviewContents;\n sectionTitle: string | undefined;\n}\n\nfunction CurriculumReview(props: CurriculumReviewProps): React.ReactNode {\n const { item, sectionTitle } = props;\n const { description, buttonTitle } = item;\n const {\n curriculum,\n onReviewSubmit: _onReviewSubmit,\n onReviewValueChange: _onReviewValueChange,\n curriculumReviewAnswers,\n tempCurriculumReviewAnswers,\n curriculumCompleteMap,\n } = useCurriculumContext();\n const [open, setOpen] = useState(false);\n const [isChanged, setIsChanged] = useState(false);\n const [closeDialogOpen, setCloseDialogOpen] = useState(false);\n\n const onReviewValueChange = useCallback(\n ({\n reviewId,\n answer,\n }: {\n reviewId: string;\n answer: Record<string, string>;\n }) => {\n if (curriculumReviewAnswers[reviewId] === answer[reviewId]) {\n return;\n }\n\n setIsChanged(true);\n _onReviewValueChange({ reviewId, answer });\n },\n [_onReviewValueChange, curriculumReviewAnswers]\n );\n\n const onReviewSubmit = useCallback(\n (values: Record<string, string>) => {\n return _onReviewSubmit({ reviewId: item.uuid, answer: values }).then(\n (result) => {\n setIsChanged(false);\n return result;\n }\n );\n },\n [item.uuid, _onReviewSubmit]\n );\n\n const onClickEndReview = useCallback(() => {\n setOpen(false);\n }, []);\n\n const onClickCloseDrawer = useCallback(() => {\n if (isChanged) {\n setCloseDialogOpen(true);\n } else {\n setOpen(false);\n }\n }, [isChanged]);\n\n const mode = useMemo(() => {\n return item.questions.every(\n (question) =>\n curriculumReviewAnswers[question.uuid] &&\n curriculumReviewAnswers[question.uuid] !== ''\n )\n ? 'edit'\n : 'create';\n }, [curriculumReviewAnswers, item.questions]);\n\n const defaultValues = useMemo(() => {\n const allAnswers = {\n ...tempCurriculumReviewAnswers,\n ...curriculumReviewAnswers,\n };\n\n return item.questions.reduce<Record<string, string>>((acc, question) => {\n acc[question.uuid] = allAnswers[question.uuid] || '';\n return acc;\n }, {});\n }, [curriculumReviewAnswers, item.questions, tempCurriculumReviewAnswers]);\n\n const done = useMemo(() => {\n return Boolean(curriculumCompleteMap[item.uuid]);\n }, [curriculumCompleteMap, item.uuid]);\n\n const bgColor = done ? 'var(--color-panel-solid)' : undefined;\n\n return (\n <Dialog.Root onOpenChange={setOpen} open={open}>\n <Flex\n align=\"center\"\n direction=\"column\"\n height=\"100%\"\n justify=\"center\"\n px=\"3\"\n py=\"3\"\n style={{\n backgroundImage: `url(https://tipp-coaching-live.s3.ap-northeast-2.amazonaws.com/images/curriculum_review_bg.png)`,\n backgroundPosition: 'center',\n backgroundSize: 'cover',\n backgroundRepeat: 'no-repeat',\n }}\n width=\"100%\"\n >\n <Typo color=\"gray\" weight=\"bold\">\n {curriculum.title}\n </Typo>\n <Typo align=\"center\" as=\"p\" color=\"gray\">\n {description}\n </Typo>\n\n <Dialog.Trigger>\n <Button\n mt=\"3\"\n style={{ minWidth: 232, backgroundColor: bgColor }}\n variant={done ? 'outline' : 'solid'}\n >\n <Typo truncate>{done ? '나의 응답 다시보기' : buttonTitle}</Typo>\n </Button>\n </Dialog.Trigger>\n </Flex>\n <Dialog.Content\n height=\"100%\"\n hideCloseButton\n style={{ borderRadius: 0, padding: 0 }}\n title=\"\"\n width=\"100%\"\n >\n <Flex\n align=\"center\"\n height=\"100%\"\n justify=\"center\"\n pb=\"3\"\n position=\"relative\"\n width=\"100%\"\n >\n <CurriculumReviewSteps\n contents={item}\n curriculum={curriculum}\n defaultValues={defaultValues}\n done={done}\n mode={mode}\n onClickEndReview={onClickEndReview}\n onReviewValueChange={onReviewValueChange}\n onSubmit={onReviewSubmit}\n title={sectionTitle}\n />\n {/* 닫기 버튼 */}\n <Box position=\"absolute\" right=\"16px\" top=\"16px\">\n <IconButton\n color=\"gray\"\n onClick={onClickCloseDrawer}\n variant=\"ghost\"\n >\n <Box display={{ initial: 'none', md: 'block' }}>\n <Cross1Icon height={20} width={20} />\n </Box>\n <Box display={{ initial: 'block', md: 'none' }}>\n <Cross1Icon height={16} width={16} />\n </Box>\n </IconButton>\n </Box>\n\n {/* 진짜 닫겠습니까 모달 */}\n <Dialog.Root onOpenChange={setCloseDialogOpen} open={closeDialogOpen}>\n <Dialog.Content\n buttons={\n <Flex gap=\"3\" justify=\"end\">\n <Dialog.Close asChild>\n <Button color=\"gray\" variant=\"outline\">\n 돌아가기\n </Button>\n </Dialog.Close>\n <Dialog.Close>\n <Button color=\"red\" onClick={onClickEndReview}>\n 나가기\n </Button>\n </Dialog.Close>\n </Flex>\n }\n title=\"작성을 중단하시겠습니까?\"\n >\n <Typo>페이지에서 벗어나면 작성한 내용이 저장되지 않습니다.</Typo>\n </Dialog.Content>\n </Dialog.Root>\n </Flex>\n </Dialog.Content>\n </Dialog.Root>\n );\n}\n\nexport default CurriculumReview;\n"],"mappings":"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","names":[]}
|
package/dist/context/index.js
CHANGED
|
@@ -4,12 +4,12 @@ import {
|
|
|
4
4
|
useDynamicForm
|
|
5
5
|
} from "../chunk-NCSMSA3X.js";
|
|
6
6
|
import "../chunk-2OMSNCRH.js";
|
|
7
|
+
import "../chunk-BESTU2AY.js";
|
|
7
8
|
import {
|
|
8
9
|
UIStateContext,
|
|
9
10
|
UIStateProvider,
|
|
10
11
|
useUIState
|
|
11
12
|
} from "../chunk-PT57HCAI.js";
|
|
12
|
-
import "../chunk-BESTU2AY.js";
|
|
13
13
|
import "../chunk-PMJIFLDT.js";
|
|
14
14
|
import "../chunk-LDBWASUA.js";
|
|
15
15
|
import "../chunk-CRTRMMJ7.js";
|