@tipp/ui 2.3.8 → 2.3.9
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 +21 -21
- package/dist/app/platform/edit-coaching-time.cjs.map +1 -1
- package/dist/app/platform/edit-coaching-time.js +18 -18
- package/dist/app/platform/edit-service-type.cjs.map +1 -1
- package/dist/app/platform/edit-service-type.js +18 -18
- package/dist/app/platform/goal-manage-card-edit.cjs.map +1 -1
- package/dist/app/platform/goal-manage-card-edit.js +18 -18
- package/dist/app/platform/on-offline-radio-card.cjs.map +1 -1
- package/dist/app/platform/on-offline-radio-card.js +18 -18
- package/dist/app/platform/reservation-card.cjs.map +1 -1
- package/dist/app/platform/reservation-card.js +18 -18
- package/dist/app/platform/session-card.cjs.map +1 -1
- package/dist/app/platform/session-card.js +18 -18
- package/dist/chunk-53LB62DW.js +165 -0
- package/dist/chunk-53LB62DW.js.map +1 -0
- package/dist/chunk-5ZIFEE7H.js +75 -0
- package/dist/chunk-5ZIFEE7H.js.map +1 -0
- package/dist/chunk-6D2NJ4JA.js +196 -0
- package/dist/chunk-6D2NJ4JA.js.map +1 -0
- package/dist/chunk-6NKDS27F.js +89 -0
- package/dist/chunk-6NKDS27F.js.map +1 -0
- package/dist/chunk-7N6VN2FK.js +70 -0
- package/dist/chunk-7N6VN2FK.js.map +1 -0
- package/dist/chunk-GU75W4O2.js +228 -0
- package/dist/chunk-GU75W4O2.js.map +1 -0
- package/dist/chunk-HKW45LNY.js +99 -0
- package/dist/chunk-HKW45LNY.js.map +1 -0
- package/dist/chunk-IEMRHLQ3.js +69 -0
- package/dist/chunk-IEMRHLQ3.js.map +1 -0
- package/dist/chunk-IG2TTPNN.js +233 -0
- package/dist/chunk-IG2TTPNN.js.map +1 -0
- package/dist/chunk-IMMHRXM2.js +363 -0
- package/dist/chunk-IMMHRXM2.js.map +1 -0
- package/dist/chunk-LAZUFZRZ.js +198 -0
- package/dist/chunk-LAZUFZRZ.js.map +1 -0
- package/dist/chunk-MQMW3XXD.js +117 -0
- package/dist/chunk-MQMW3XXD.js.map +1 -0
- package/dist/chunk-O63J4YET.js +169 -0
- package/dist/chunk-O63J4YET.js.map +1 -0
- package/dist/chunk-PLXD7ZKF.js +54 -0
- package/dist/chunk-PLXD7ZKF.js.map +1 -0
- package/dist/chunk-PPCORTMH.js +87 -0
- package/dist/chunk-PPCORTMH.js.map +1 -0
- package/dist/chunk-PZYP6MUR.js +174 -0
- package/dist/chunk-PZYP6MUR.js.map +1 -0
- package/dist/chunk-QT3MU3ZI.js +192 -0
- package/dist/chunk-QT3MU3ZI.js.map +1 -0
- package/dist/chunk-QYBSBW7T.js +64 -0
- package/dist/chunk-QYBSBW7T.js.map +1 -0
- package/dist/chunk-RCTSFOT7.js +145 -0
- package/dist/chunk-RCTSFOT7.js.map +1 -0
- package/dist/chunk-SDKOCP5V.js +125 -0
- package/dist/chunk-SDKOCP5V.js.map +1 -0
- package/dist/chunk-SW3F2AU5.js +63 -0
- package/dist/chunk-SW3F2AU5.js.map +1 -0
- package/dist/chunk-TMM2Z7GY.js +68 -0
- package/dist/chunk-TMM2Z7GY.js.map +1 -0
- package/dist/chunk-VWUWH2YW.js +64 -0
- package/dist/chunk-VWUWH2YW.js.map +1 -0
- package/dist/chunk-VZDOBBRZ.js +144 -0
- package/dist/chunk-VZDOBBRZ.js.map +1 -0
- package/dist/chunk-W747CDDK.js +79 -0
- package/dist/chunk-W747CDDK.js.map +1 -0
- package/dist/chunk-XUSCUT5R.js +100 -0
- package/dist/chunk-XUSCUT5R.js.map +1 -0
- package/dist/index.cjs +41 -35
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -0
- package/dist/index.js +36 -36
- package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.js +2 -2
- package/dist/molecules/curriculumV2/CurriculumContents/curriculum-review.js +3 -3
- package/dist/molecules/curriculumV2/CurriculumContents/index.js +5 -5
- package/dist/molecules/curriculumV2/CurriculumSidebar/index.js +3 -3
- package/dist/molecules/curriculumV2/CurriculumSidebar/sidebar-item.js +2 -2
- package/dist/molecules/curriculumV2/index.js +13 -13
- package/dist/molecules/expand-table/index.cjs +41 -35
- package/dist/molecules/expand-table/index.cjs.map +1 -1
- package/dist/molecules/expand-table/index.js +1 -1
- package/dist/molecules/index.cjs +41 -35
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +29 -29
- package/dist/molecules/time-select.js +1 -1
- package/dist/utils/index.js +3 -3
- package/package.json +1 -1
- package/src/molecules/expand-table/index.tsx +29 -18
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ReviewQuestionContentHeader
|
|
3
|
+
} from "./chunk-COKJ53M5.js";
|
|
4
|
+
import {
|
|
5
|
+
TextArea
|
|
6
|
+
} from "./chunk-5XYPLDI5.js";
|
|
7
|
+
import {
|
|
8
|
+
Grid
|
|
9
|
+
} from "./chunk-EGEQY3KT.js";
|
|
10
|
+
import {
|
|
11
|
+
Box
|
|
12
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
13
|
+
import {
|
|
14
|
+
Typo
|
|
15
|
+
} from "./chunk-PMJIFLDT.js";
|
|
16
|
+
import {
|
|
17
|
+
Callout
|
|
18
|
+
} from "./chunk-B6XJN6EC.js";
|
|
19
|
+
import {
|
|
20
|
+
Card
|
|
21
|
+
} from "./chunk-RP2RGCAW.js";
|
|
22
|
+
import {
|
|
23
|
+
BellIcon
|
|
24
|
+
} from "./chunk-W5TPOFOO.js";
|
|
25
|
+
|
|
26
|
+
// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.tsx
|
|
27
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
28
|
+
function ReviewQuestionText(props) {
|
|
29
|
+
const { question, answer, onChange } = props;
|
|
30
|
+
const minLengthNotMet = question.minLength && answer.length < question.minLength;
|
|
31
|
+
const remainingLength = question.minLength && answer.length < question.minLength ? question.minLength - answer.length : 0;
|
|
32
|
+
return /* @__PURE__ */ jsx(
|
|
33
|
+
Card,
|
|
34
|
+
{
|
|
35
|
+
size: "2",
|
|
36
|
+
style: {
|
|
37
|
+
width: "100%",
|
|
38
|
+
height: "100%"
|
|
39
|
+
},
|
|
40
|
+
children: /* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "1fr auto", children: [
|
|
41
|
+
/* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "auto 1fr", width: "100%", children: [
|
|
42
|
+
/* @__PURE__ */ jsx(
|
|
43
|
+
ReviewQuestionContentHeader,
|
|
44
|
+
{
|
|
45
|
+
icon: question.icon,
|
|
46
|
+
question: question.question,
|
|
47
|
+
title: question.title,
|
|
48
|
+
type: question.type
|
|
49
|
+
}
|
|
50
|
+
),
|
|
51
|
+
/* @__PURE__ */ jsx(
|
|
52
|
+
TextArea,
|
|
53
|
+
{
|
|
54
|
+
mt: "2",
|
|
55
|
+
onChange: (e) => {
|
|
56
|
+
onChange(e.target.value);
|
|
57
|
+
},
|
|
58
|
+
placeholder: question.placeholder,
|
|
59
|
+
value: answer
|
|
60
|
+
}
|
|
61
|
+
)
|
|
62
|
+
] }),
|
|
63
|
+
minLengthNotMet ? /* @__PURE__ */ jsxs(Box, { mt: "2", children: [
|
|
64
|
+
/* @__PURE__ */ jsx(Typo, { align: "right", as: "p", color: "red", variant: "caption", children: `${remainingLength}\uC790 \uB354 \uC791\uC131\uD574\uC8FC\uC138\uC694.` }),
|
|
65
|
+
question.minLengthInfoMessage ? /* @__PURE__ */ jsxs(
|
|
66
|
+
Callout.Root,
|
|
67
|
+
{
|
|
68
|
+
color: "iris",
|
|
69
|
+
mt: "2",
|
|
70
|
+
style: { alignItems: "center" },
|
|
71
|
+
children: [
|
|
72
|
+
/* @__PURE__ */ jsx(Callout.Icon, { children: /* @__PURE__ */ jsx(BellIcon, {}) }),
|
|
73
|
+
/* @__PURE__ */ jsx(Callout.Text, { children: /* @__PURE__ */ jsx(Typo, { as: "p", variant: "caption", children: question.minLengthInfoMessage }) })
|
|
74
|
+
]
|
|
75
|
+
}
|
|
76
|
+
) : null
|
|
77
|
+
] }) : null
|
|
78
|
+
] })
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
var review_question_text_default = ReviewQuestionText;
|
|
83
|
+
|
|
84
|
+
export {
|
|
85
|
+
review_question_text_default
|
|
86
|
+
};
|
|
87
|
+
//# sourceMappingURL=chunk-PPCORTMH.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-text.tsx"],"sourcesContent":["import React from 'react';\nimport { Box } from '@/atoms/box';\nimport { Card } from '@/atoms/card';\nimport { Grid } from '@/atoms/grid';\nimport { TextArea } from '@/atoms/text-area';\nimport { Typo } from '@/atoms/typo';\nimport { BellIcon } from '@/icon';\nimport { type CurriculumReviewQuestionText } from '@/types/curriculumContents.type';\nimport { Callout } from '@/atoms/call-out';\nimport { ReviewQuestionContentHeader } from './review-comp';\n\ninterface ReviewQuestionTextProps {\n question: CurriculumReviewQuestionText;\n answer: string;\n error?: string;\n onChange: (value: string) => void;\n}\n\nfunction ReviewQuestionText(props: ReviewQuestionTextProps): React.ReactNode {\n const { question, answer, onChange } = props;\n\n const minLengthNotMet =\n question.minLength && answer.length < question.minLength;\n\n const remainingLength =\n question.minLength && answer.length < question.minLength\n ? question.minLength - answer.length\n : 0;\n\n return (\n <Card\n size=\"2\"\n style={{\n width: '100%',\n height: '100%',\n }}\n >\n <Grid height=\"100%\" rows=\"1fr auto\">\n <Grid height=\"100%\" rows=\"auto 1fr\" width=\"100%\">\n <ReviewQuestionContentHeader\n icon={question.icon}\n question={question.question}\n title={question.title}\n type={question.type}\n />\n\n <TextArea\n mt=\"2\"\n onChange={(e) => {\n onChange(e.target.value);\n }}\n placeholder={question.placeholder}\n value={answer}\n />\n </Grid>\n {minLengthNotMet ? (\n <Box mt=\"2\">\n <Typo align=\"right\" as=\"p\" color=\"red\" variant=\"caption\">\n {`${remainingLength}자 더 작성해주세요.`}\n </Typo>\n {question.minLengthInfoMessage ? (\n <Callout.Root\n color=\"iris\"\n mt=\"2\"\n style={{ alignItems: 'center' }}\n >\n <Callout.Icon>\n <BellIcon />\n </Callout.Icon>\n <Callout.Text>\n <Typo as=\"p\" variant=\"caption\">\n {question.minLengthInfoMessage}\n </Typo>\n </Callout.Text>\n </Callout.Root>\n ) : null}\n </Box>\n ) : null}\n </Grid>\n </Card>\n );\n}\n\nexport default ReviewQuestionText;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsCQ,SACE,KADF;AApBR,SAAS,mBAAmB,OAAiD;AAC3E,QAAM,EAAE,UAAU,QAAQ,SAAS,IAAI;AAEvC,QAAM,kBACJ,SAAS,aAAa,OAAO,SAAS,SAAS;AAEjD,QAAM,kBACJ,SAAS,aAAa,OAAO,SAAS,SAAS,YAC3C,SAAS,YAAY,OAAO,SAC5B;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,MACV;AAAA,MAEA,+BAAC,QAAK,QAAO,QAAO,MAAK,YACvB;AAAA,6BAAC,QAAK,QAAO,QAAO,MAAK,YAAW,OAAM,QACxC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,SAAS;AAAA,cACf,UAAU,SAAS;AAAA,cACnB,OAAO,SAAS;AAAA,cAChB,MAAM,SAAS;AAAA;AAAA,UACjB;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,UAAU,CAAC,MAAM;AACf,yBAAS,EAAE,OAAO,KAAK;AAAA,cACzB;AAAA,cACA,aAAa,SAAS;AAAA,cACtB,OAAO;AAAA;AAAA,UACT;AAAA,WACF;AAAA,QACC,kBACC,qBAAC,OAAI,IAAG,KACN;AAAA,8BAAC,QAAK,OAAM,SAAQ,IAAG,KAAI,OAAM,OAAM,SAAQ,WAC5C,aAAG,eAAe,uDACrB;AAAA,UACC,SAAS,uBACR;AAAA,YAAC,QAAQ;AAAA,YAAR;AAAA,cACC,OAAM;AAAA,cACN,IAAG;AAAA,cACH,OAAO,EAAE,YAAY,SAAS;AAAA,cAE9B;AAAA,oCAAC,QAAQ,MAAR,EACC,8BAAC,YAAS,GACZ;AAAA,gBACA,oBAAC,QAAQ,MAAR,EACC,8BAAC,QAAK,IAAG,KAAI,SAAQ,WAClB,mBAAS,sBACZ,GACF;AAAA;AAAA;AAAA,UACF,IACE;AAAA,WACN,IACE;AAAA,SACN;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,+BAAQ;","names":[]}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
import {
|
|
2
|
+
DatePickerButton
|
|
3
|
+
} from "./chunk-5ZIFEE7H.js";
|
|
4
|
+
import {
|
|
5
|
+
TimeSelect
|
|
6
|
+
} from "./chunk-7PF6I4RN.js";
|
|
7
|
+
import {
|
|
8
|
+
getTimeOption,
|
|
9
|
+
parseTimeOption
|
|
10
|
+
} from "./chunk-NWJSLIQ3.js";
|
|
11
|
+
import {
|
|
12
|
+
toast
|
|
13
|
+
} from "./chunk-EEKOTWBE.js";
|
|
14
|
+
import {
|
|
15
|
+
Form
|
|
16
|
+
} from "./chunk-2OMSNCRH.js";
|
|
17
|
+
import {
|
|
18
|
+
Separator
|
|
19
|
+
} from "./chunk-HYITAA4J.js";
|
|
20
|
+
import {
|
|
21
|
+
Grid
|
|
22
|
+
} from "./chunk-EGEQY3KT.js";
|
|
23
|
+
import {
|
|
24
|
+
Dialog
|
|
25
|
+
} from "./chunk-AH4A53SZ.js";
|
|
26
|
+
import {
|
|
27
|
+
Box
|
|
28
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
29
|
+
import {
|
|
30
|
+
Flex
|
|
31
|
+
} from "./chunk-25HMMI7R.js";
|
|
32
|
+
import {
|
|
33
|
+
Button
|
|
34
|
+
} from "./chunk-ZVDAEY5Q.js";
|
|
35
|
+
import {
|
|
36
|
+
__spreadProps,
|
|
37
|
+
__spreadValues
|
|
38
|
+
} from "./chunk-CRTRMMJ7.js";
|
|
39
|
+
|
|
40
|
+
// src/app/platform/edit-coaching-time.tsx
|
|
41
|
+
import { useCallback, useState } from "react";
|
|
42
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
43
|
+
var getValueFromDefaultValue = (args) => {
|
|
44
|
+
return {
|
|
45
|
+
startTime: args.startAt ? getTimeOption(args.startAt) : "00:00",
|
|
46
|
+
endTime: args.endAt ? getTimeOption(args.endAt) : "00:00",
|
|
47
|
+
date: args.startAt || /* @__PURE__ */ new Date()
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
var getDateFromValue = (date, time) => {
|
|
51
|
+
const { hour, minute } = parseTimeOption(time);
|
|
52
|
+
return new Date(
|
|
53
|
+
date.getFullYear(),
|
|
54
|
+
date.getMonth(),
|
|
55
|
+
date.getDate(),
|
|
56
|
+
hour,
|
|
57
|
+
minute
|
|
58
|
+
);
|
|
59
|
+
};
|
|
60
|
+
function EditCoachingTime(props) {
|
|
61
|
+
const { defaultEndAt, defaultStartAt, onClickCancel } = props;
|
|
62
|
+
const [values, setValues] = useState(() => {
|
|
63
|
+
return getValueFromDefaultValue({
|
|
64
|
+
startAt: defaultStartAt,
|
|
65
|
+
endAt: defaultEndAt
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
const [timeError, setTimeError] = useState("");
|
|
69
|
+
const checkTimeError = useCallback(
|
|
70
|
+
(startTime, endTime) => {
|
|
71
|
+
const error = startTime >= endTime ? "\uC2DC\uC791\uC2DC\uAC04\uC744 \uC885\uB8CC\uC2DC\uAC04\uBCF4\uB2E4 \uBE60\uB974\uAC8C \uC120\uD0DD\uD574\uC8FC\uC138\uC694." : "";
|
|
72
|
+
if (error) {
|
|
73
|
+
setTimeError(error);
|
|
74
|
+
return false;
|
|
75
|
+
}
|
|
76
|
+
return true;
|
|
77
|
+
},
|
|
78
|
+
[]
|
|
79
|
+
);
|
|
80
|
+
const onChangeStartTime = useCallback(
|
|
81
|
+
(v) => {
|
|
82
|
+
checkTimeError(v, values.endTime);
|
|
83
|
+
setValues((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
84
|
+
startTime: v
|
|
85
|
+
}));
|
|
86
|
+
},
|
|
87
|
+
[checkTimeError, values.endTime]
|
|
88
|
+
);
|
|
89
|
+
const onChangeEndTime = useCallback(
|
|
90
|
+
(v) => {
|
|
91
|
+
checkTimeError(values.startTime, v);
|
|
92
|
+
setValues((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
93
|
+
endTime: v
|
|
94
|
+
}));
|
|
95
|
+
},
|
|
96
|
+
[checkTimeError, values.startTime]
|
|
97
|
+
);
|
|
98
|
+
const onChangeDate = useCallback((date) => {
|
|
99
|
+
date && setValues((prev) => __spreadProps(__spreadValues({}, prev), {
|
|
100
|
+
date
|
|
101
|
+
}));
|
|
102
|
+
}, []);
|
|
103
|
+
const onClickSave = useCallback(() => {
|
|
104
|
+
if (checkTimeError(values.startTime, values.endTime)) {
|
|
105
|
+
const startAt = getDateFromValue(values.date, values.startTime);
|
|
106
|
+
const endAt = getDateFromValue(values.date, values.endTime);
|
|
107
|
+
props.onClickSave && props.onClickSave(startAt, endAt);
|
|
108
|
+
} else {
|
|
109
|
+
toast.error("\uC785\uB825 \uAC12\uC774 \uC720\uD6A8\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.");
|
|
110
|
+
}
|
|
111
|
+
}, [checkTimeError, props, values.date, values.endTime, values.startTime]);
|
|
112
|
+
return /* @__PURE__ */ jsx(Box, { width: { initial: "100%" }, children: /* @__PURE__ */ jsxs(Form.Root, { children: [
|
|
113
|
+
/* @__PURE__ */ jsxs(Form.Field, { name: "date", children: [
|
|
114
|
+
/* @__PURE__ */ jsx(Form.Label, { variant: "caption", children: "\uB0A0\uC9DC" }),
|
|
115
|
+
/* @__PURE__ */ jsx(
|
|
116
|
+
DatePickerButton,
|
|
117
|
+
{
|
|
118
|
+
maxDate: /* @__PURE__ */ new Date(),
|
|
119
|
+
onChange: onChangeDate,
|
|
120
|
+
selected: values.date,
|
|
121
|
+
size: { initial: "large", xs: "medium" }
|
|
122
|
+
}
|
|
123
|
+
)
|
|
124
|
+
] }),
|
|
125
|
+
/* @__PURE__ */ jsxs(
|
|
126
|
+
Grid,
|
|
127
|
+
{
|
|
128
|
+
align: "center",
|
|
129
|
+
columns: {
|
|
130
|
+
initial: "1fr 0 1fr",
|
|
131
|
+
xs: "1fr auto 1fr"
|
|
132
|
+
},
|
|
133
|
+
gapX: "3",
|
|
134
|
+
gapY: "2",
|
|
135
|
+
justify: "center",
|
|
136
|
+
mb: { initial: "5", xs: "4" },
|
|
137
|
+
mt: "5",
|
|
138
|
+
width: "100%",
|
|
139
|
+
children: [
|
|
140
|
+
/* @__PURE__ */ jsx(Form.Field, { name: "startTime", children: /* @__PURE__ */ jsx(Form.Label, { variant: "caption", children: "\uC2DC\uC791 \uC2DC\uAC04" }) }),
|
|
141
|
+
/* @__PURE__ */ jsx("div", {}),
|
|
142
|
+
/* @__PURE__ */ jsx(Form.Field, { name: "endTime", children: /* @__PURE__ */ jsx(Form.Label, { variant: "caption", children: "\uC885\uB8CC \uC2DC\uAC04" }) }),
|
|
143
|
+
/* @__PURE__ */ jsx(
|
|
144
|
+
TimeSelect,
|
|
145
|
+
{
|
|
146
|
+
onValueChange: onChangeStartTime,
|
|
147
|
+
size: { initial: "3", xs: "2" },
|
|
148
|
+
value: values.startTime
|
|
149
|
+
}
|
|
150
|
+
),
|
|
151
|
+
/* @__PURE__ */ jsx(Box, { overflow: "hidden", children: /* @__PURE__ */ jsx(Separator, {}) }),
|
|
152
|
+
/* @__PURE__ */ jsx(
|
|
153
|
+
TimeSelect,
|
|
154
|
+
{
|
|
155
|
+
onValueChange: onChangeEndTime,
|
|
156
|
+
size: { initial: "3", xs: "2" },
|
|
157
|
+
value: values.endTime
|
|
158
|
+
}
|
|
159
|
+
),
|
|
160
|
+
/* @__PURE__ */ jsx(Form.Field, { name: "startEndTime", style: { gridColumn: "1/span 3" }, children: /* @__PURE__ */ jsx(Form.Message, { forceMatch: Boolean(timeError), children: timeError }) })
|
|
161
|
+
]
|
|
162
|
+
}
|
|
163
|
+
),
|
|
164
|
+
/* @__PURE__ */ jsxs(Flex, { gap: "3", justify: "end", children: [
|
|
165
|
+
/* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { onClick: onClickCancel, type: "button", variant: "outline", children: "\uCDE8\uC18C\uD558\uAE30" }) }),
|
|
166
|
+
/* @__PURE__ */ jsx(Dialog.Close, { children: /* @__PURE__ */ jsx(Button, { onClick: onClickSave, type: "button", children: "\uC800\uC7A5\uD558\uAE30" }) })
|
|
167
|
+
] })
|
|
168
|
+
] }) });
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
export {
|
|
172
|
+
EditCoachingTime
|
|
173
|
+
};
|
|
174
|
+
//# sourceMappingURL=chunk-PZYP6MUR.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/app/platform/edit-coaching-time.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport {\n Button,\n Flex,\n Form,\n Grid,\n Separator,\n Box,\n toast,\n Dialog,\n} from '../../atoms';\nimport { DatePickerButton, TimeSelect } from '../../molecules';\nimport { getTimeOption, parseTimeOption } from '../../utils';\n\nexport interface EditCoachingTimeProps {\n defaultStartAt?: Date;\n defaultEndAt?: Date;\n onClickSave?: (startAt: Date, endAt: Date) => void;\n onClickCancel?: () => void;\n sessionNumber?: number;\n}\n\ninterface Values {\n startTime: string;\n endTime: string;\n date: Date;\n}\n\nconst getValueFromDefaultValue = (args: {\n startAt?: Date;\n endAt?: Date;\n}): Values => {\n return {\n startTime: args.startAt ? getTimeOption(args.startAt) : '00:00',\n endTime: args.endAt ? getTimeOption(args.endAt) : '00:00',\n date: args.startAt || new Date(),\n };\n};\n\nconst getDateFromValue = (date: Date, time: string): Date => {\n const { hour, minute } = parseTimeOption(time);\n return new Date(\n date.getFullYear(),\n date.getMonth(),\n date.getDate(),\n hour,\n minute\n );\n};\n\nexport function EditCoachingTime(\n props: EditCoachingTimeProps\n): React.ReactNode {\n const { defaultEndAt, defaultStartAt, onClickCancel } = props;\n\n const [values, setValues] = useState<Values>(() => {\n return getValueFromDefaultValue({\n startAt: defaultStartAt,\n endAt: defaultEndAt,\n });\n });\n\n const [timeError, setTimeError] = useState('');\n\n const checkTimeError = useCallback(\n (startTime: string, endTime: string): boolean => {\n const error =\n startTime >= endTime\n ? '시작시간을 종료시간보다 빠르게 선택해주세요.'\n : '';\n if (error) {\n setTimeError(error);\n return false;\n }\n return true;\n },\n []\n );\n\n const onChangeStartTime = useCallback(\n (v: string) => {\n checkTimeError(v, values.endTime);\n setValues((prev) => ({\n ...prev,\n startTime: v,\n }));\n },\n [checkTimeError, values.endTime]\n );\n\n const onChangeEndTime = useCallback(\n (v: string) => {\n checkTimeError(values.startTime, v);\n setValues((prev) => ({\n ...prev,\n endTime: v,\n }));\n },\n [checkTimeError, values.startTime]\n );\n\n const onChangeDate = useCallback((date: Date | null) => {\n date &&\n setValues((prev) => ({\n ...prev,\n date,\n }));\n }, []);\n\n const onClickSave = useCallback(() => {\n if (checkTimeError(values.startTime, values.endTime)) {\n const startAt = getDateFromValue(values.date, values.startTime);\n const endAt = getDateFromValue(values.date, values.endTime);\n props.onClickSave && props.onClickSave(startAt, endAt);\n } else {\n toast.error('입력 값이 유효하지 않습니다.');\n }\n }, [checkTimeError, props, values.date, values.endTime, values.startTime]);\n\n return (\n <Box width={{ initial: '100%' }}>\n <Form.Root>\n <Form.Field name=\"date\">\n <Form.Label variant=\"caption\">날짜</Form.Label>\n <DatePickerButton\n maxDate={new Date()}\n onChange={onChangeDate}\n selected={values.date}\n size={{ initial: 'large', xs: 'medium' }}\n />\n </Form.Field>\n <Grid\n align=\"center\"\n columns={{\n initial: '1fr 0 1fr',\n xs: '1fr auto 1fr',\n }}\n gapX=\"3\"\n gapY=\"2\"\n justify=\"center\"\n mb={{ initial: '5', xs: '4' }}\n mt=\"5\"\n width=\"100%\"\n >\n <Form.Field name=\"startTime\">\n <Form.Label variant=\"caption\">시작 시간</Form.Label>\n </Form.Field>\n <div />\n <Form.Field name=\"endTime\">\n <Form.Label variant=\"caption\">종료 시간</Form.Label>\n </Form.Field>\n <TimeSelect\n onValueChange={onChangeStartTime}\n size={{ initial: '3', xs: '2' }}\n value={values.startTime}\n />\n <Box overflow=\"hidden\">\n <Separator />\n </Box>\n\n <TimeSelect\n onValueChange={onChangeEndTime}\n size={{ initial: '3', xs: '2' }}\n value={values.endTime}\n />\n <Form.Field name=\"startEndTime\" style={{ gridColumn: '1/span 3' }}>\n <Form.Message forceMatch={Boolean(timeError)}>\n {timeError}\n </Form.Message>\n </Form.Field>\n </Grid>\n <Flex gap=\"3\" justify=\"end\">\n <Dialog.Close>\n <Button onClick={onClickCancel} type=\"button\" variant=\"outline\">\n 취소하기\n </Button>\n </Dialog.Close>\n <Dialog.Close>\n <Button onClick={onClickSave} type=\"button\">\n 저장하기\n </Button>\n </Dialog.Close>\n </Flex>\n </Form.Root>\n </Box>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Row
|
|
3
|
+
} from "./chunk-JCG2AUFJ.js";
|
|
4
|
+
import {
|
|
5
|
+
Spinner
|
|
6
|
+
} from "./chunk-FR2GDOU2.js";
|
|
7
|
+
import {
|
|
8
|
+
Pagination
|
|
9
|
+
} from "./chunk-SDKOCP5V.js";
|
|
10
|
+
import {
|
|
11
|
+
Typo
|
|
12
|
+
} from "./chunk-PMJIFLDT.js";
|
|
13
|
+
import {
|
|
14
|
+
Flex
|
|
15
|
+
} from "./chunk-25HMMI7R.js";
|
|
16
|
+
import {
|
|
17
|
+
TriangleArrowUpIcon
|
|
18
|
+
} from "./chunk-2O45FRFQ.js";
|
|
19
|
+
import {
|
|
20
|
+
TriangleArrowDownIcon
|
|
21
|
+
} from "./chunk-776WBOKL.js";
|
|
22
|
+
|
|
23
|
+
// src/molecules/expand-table/index.tsx
|
|
24
|
+
import {
|
|
25
|
+
flexRender,
|
|
26
|
+
getCoreRowModel,
|
|
27
|
+
useReactTable,
|
|
28
|
+
getSortedRowModel,
|
|
29
|
+
createColumnHelper,
|
|
30
|
+
getPaginationRowModel
|
|
31
|
+
} from "@tanstack/react-table";
|
|
32
|
+
import { useCallback, useMemo, useState } from "react";
|
|
33
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
34
|
+
function ExpandTable(props) {
|
|
35
|
+
const {
|
|
36
|
+
data,
|
|
37
|
+
columns,
|
|
38
|
+
ExpandComp,
|
|
39
|
+
placeholder,
|
|
40
|
+
onRowClick,
|
|
41
|
+
tableStyle,
|
|
42
|
+
showPagination = true,
|
|
43
|
+
isLoading,
|
|
44
|
+
pageIndex = 0,
|
|
45
|
+
pageSize = 10,
|
|
46
|
+
siblingCount = 2,
|
|
47
|
+
getRowStyle,
|
|
48
|
+
getCellStyle
|
|
49
|
+
} = props;
|
|
50
|
+
const defaultAlign = "left";
|
|
51
|
+
const [pagination, setPagination] = useState({
|
|
52
|
+
pageIndex: pageIndex || 0,
|
|
53
|
+
pageSize: pageSize || 9999
|
|
54
|
+
});
|
|
55
|
+
const [sorting, setSorting] = useState([]);
|
|
56
|
+
const { getRowModel, getHeaderGroups, setPageIndex } = useReactTable({
|
|
57
|
+
data: data || [],
|
|
58
|
+
columns,
|
|
59
|
+
getCoreRowModel: getCoreRowModel(),
|
|
60
|
+
getSortedRowModel: getSortedRowModel(),
|
|
61
|
+
state: {
|
|
62
|
+
sorting,
|
|
63
|
+
pagination
|
|
64
|
+
},
|
|
65
|
+
onSortingChange: setSorting,
|
|
66
|
+
getPaginationRowModel: getPaginationRowModel(),
|
|
67
|
+
onPaginationChange: setPagination
|
|
68
|
+
});
|
|
69
|
+
const gridTemplateColumns = useMemo(() => {
|
|
70
|
+
return columns.map((col) => {
|
|
71
|
+
var _a;
|
|
72
|
+
if ((_a = col.meta) == null ? void 0 : _a.autoSize) return `minmax(${col.size || 50}px, 1fr)`;
|
|
73
|
+
return `${col.size || 150}px`;
|
|
74
|
+
}).join(" ");
|
|
75
|
+
}, [columns]);
|
|
76
|
+
const rowModels = getRowModel();
|
|
77
|
+
const onChangePagination = useCallback(
|
|
78
|
+
(page) => {
|
|
79
|
+
setPageIndex(page - 1);
|
|
80
|
+
},
|
|
81
|
+
[setPageIndex]
|
|
82
|
+
);
|
|
83
|
+
const helpCompRender = useCallback(
|
|
84
|
+
(rowLength) => {
|
|
85
|
+
if (isLoading) {
|
|
86
|
+
return /* @__PURE__ */ jsx(
|
|
87
|
+
Flex,
|
|
88
|
+
{
|
|
89
|
+
align: "center",
|
|
90
|
+
height: "100%",
|
|
91
|
+
justify: "center",
|
|
92
|
+
p: "5",
|
|
93
|
+
width: "100%",
|
|
94
|
+
children: /* @__PURE__ */ jsx(Spinner, {})
|
|
95
|
+
}
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
if (rowLength === 0) {
|
|
99
|
+
return /* @__PURE__ */ jsx("div", { className: "tr", children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ jsx(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder");
|
|
100
|
+
}
|
|
101
|
+
return null;
|
|
102
|
+
},
|
|
103
|
+
[isLoading, placeholder]
|
|
104
|
+
);
|
|
105
|
+
const pageCount = useMemo(() => {
|
|
106
|
+
if (!data) return 0;
|
|
107
|
+
return Math.ceil(data.length / pageSize);
|
|
108
|
+
}, [data, pageSize]);
|
|
109
|
+
return /* @__PURE__ */ jsxs("div", { className: "expand-table-wrapper", children: [
|
|
110
|
+
/* @__PURE__ */ jsxs("div", { className: "expand-table", style: tableStyle, children: [
|
|
111
|
+
/* @__PURE__ */ jsx("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
|
|
112
|
+
"div",
|
|
113
|
+
{
|
|
114
|
+
className: "tr",
|
|
115
|
+
style: { gridTemplateColumns },
|
|
116
|
+
children: headerGroup.headers.map((header) => {
|
|
117
|
+
var _a;
|
|
118
|
+
const sortable = header.column.getCanSort();
|
|
119
|
+
const sortedState = header.column.getIsSorted();
|
|
120
|
+
const justifyContent = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.align) || defaultAlign;
|
|
121
|
+
return /* @__PURE__ */ jsx("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ jsxs(
|
|
122
|
+
"button",
|
|
123
|
+
{
|
|
124
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
125
|
+
style: sortable ? { cursor: "pointer" } : { cursor: "default" },
|
|
126
|
+
type: "button",
|
|
127
|
+
children: [
|
|
128
|
+
/* @__PURE__ */ jsx(Typo, { as: "div", variant: "body", children: flexRender(
|
|
129
|
+
header.column.columnDef.header,
|
|
130
|
+
header.getContext()
|
|
131
|
+
) }),
|
|
132
|
+
sortable ? /* @__PURE__ */ jsxs(
|
|
133
|
+
Flex,
|
|
134
|
+
{
|
|
135
|
+
direction: "column",
|
|
136
|
+
style: { marginLeft: "var(--space-2)" },
|
|
137
|
+
children: [
|
|
138
|
+
/* @__PURE__ */ jsx(
|
|
139
|
+
TriangleArrowUpIcon,
|
|
140
|
+
{
|
|
141
|
+
color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
142
|
+
}
|
|
143
|
+
),
|
|
144
|
+
/* @__PURE__ */ jsx(
|
|
145
|
+
TriangleArrowDownIcon,
|
|
146
|
+
{
|
|
147
|
+
color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
148
|
+
}
|
|
149
|
+
)
|
|
150
|
+
]
|
|
151
|
+
}
|
|
152
|
+
) : null
|
|
153
|
+
]
|
|
154
|
+
}
|
|
155
|
+
) }, header.id);
|
|
156
|
+
})
|
|
157
|
+
},
|
|
158
|
+
headerGroup.id
|
|
159
|
+
)) }),
|
|
160
|
+
/* @__PURE__ */ jsx("div", { className: "tbody", children: helpCompRender(rowModels.rows.length) || rowModels.rows.map((row) => {
|
|
161
|
+
return /* @__PURE__ */ jsx(
|
|
162
|
+
Row,
|
|
163
|
+
{
|
|
164
|
+
ExpandComp,
|
|
165
|
+
defaultAlign,
|
|
166
|
+
getCellStyle,
|
|
167
|
+
getRowStyle,
|
|
168
|
+
gridTemplateColumns,
|
|
169
|
+
onRowClick,
|
|
170
|
+
row
|
|
171
|
+
},
|
|
172
|
+
`row_${row.id}`
|
|
173
|
+
);
|
|
174
|
+
}) })
|
|
175
|
+
] }),
|
|
176
|
+
showPagination ? /* @__PURE__ */ jsx(Flex, { justify: "end", pt: "3", width: "100%", children: /* @__PURE__ */ jsx(
|
|
177
|
+
Pagination,
|
|
178
|
+
{
|
|
179
|
+
count: pageCount,
|
|
180
|
+
onChange: onChangePagination,
|
|
181
|
+
page: pagination.pageIndex + 1,
|
|
182
|
+
siblingCount
|
|
183
|
+
}
|
|
184
|
+
) }) : null
|
|
185
|
+
] });
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
export {
|
|
189
|
+
createColumnHelper,
|
|
190
|
+
ExpandTable
|
|
191
|
+
};
|
|
192
|
+
//# sourceMappingURL=chunk-QT3MU3ZI.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/expand-table/index.tsx"],"sourcesContent":["import type {\n ColumnDef,\n SortingState,\n RowData,\n Row as RowType,\n PaginationState,\n} from '@tanstack/react-table';\nimport type { CSSProperties } from 'react';\nimport {\n flexRender,\n getCoreRowModel,\n useReactTable,\n getSortedRowModel,\n createColumnHelper,\n getPaginationRowModel,\n} from '@tanstack/react-table';\nimport React, { useCallback, useMemo, useState } from 'react'; \nimport { Flex } from '@/atoms/flex';\nimport { Pagination } from '@/atoms/pagination';\nimport { Spinner } from '@/atoms/spinner';\nimport { Typo } from '@/atoms/typo';\nimport { TriangleArrowDownIcon } from '../../icons/down';\nimport { TriangleArrowUpIcon } from '../../icons/up';\nimport { Row, type ExpandComp, type OnRowClick } from './row';\n\nexport type { ExpandComp, OnRowClick, ColumnDef, RowType as Row };\nexport { createColumnHelper };\n\nexport interface ExpandTableProps<Datum extends RowData> {\n /** 렌더할 데이터 배열 */\n data?: Datum[];\n /** 테이블 컬럼의 메타 데이터 */\n columns: ColumnDef<Datum>[];\n /** Row의 open이 true인 경우 하단의 collapse에 렌더할 컴포넌트 */\n ExpandComp?: ExpandComp<Datum>;\n /** 데이테가 없을 시 화면에 표시할 컴포넌트 */\n placeholder?: React.ReactNode;\n /** 행 클릭 시 실행할 콜백 */\n onRowClick?: OnRowClick<Datum>;\n getRowStyle?: (data: Datum) => CSSProperties;\n getCellStyle?: (data: Datum) => CSSProperties;\n tableStyle?: CSSProperties;\n isLoading?: boolean;\n\n /** pagination - 표시 유무, 기본값 true */\n showPagination?: boolean;\n /** pagination - 현재 선택된 페이지, 0부터 시작 */\n pageIndex?: number;\n /** pagination - 한 페이지에 표시될 컬럼 개수, 기본값 10 */\n pageSize?: number;\n /** pagination - */\n siblingCount?: number;\n}\n\nexport function ExpandTable<Datum extends RowData>(\n props: ExpandTableProps<Datum>\n): React.ReactNode {\n const {\n data,\n columns,\n ExpandComp,\n placeholder,\n onRowClick,\n tableStyle,\n showPagination = true,\n isLoading,\n pageIndex = 0,\n pageSize = 10,\n siblingCount = 2,\n getRowStyle,\n getCellStyle,\n } = props;\n const defaultAlign = 'left';\n const [pagination, setPagination] = useState<PaginationState>({\n pageIndex: pageIndex || 0,\n pageSize: pageSize || 9999,\n });\n\n const [sorting, setSorting] = useState<SortingState>([]);\n const { getRowModel, getHeaderGroups, setPageIndex } = useReactTable({\n data: data || [],\n columns,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n state: {\n sorting,\n pagination,\n },\n onSortingChange: setSorting,\n getPaginationRowModel: getPaginationRowModel(),\n onPaginationChange: setPagination,\n });\n\n const gridTemplateColumns = useMemo<string>(() => {\n return columns\n .map((col) => {\n if (col.meta?.autoSize) return `minmax(${col.size || 50}px, 1fr)`;\n return `${col.size || 150}px`;\n })\n .join(' ');\n }, [columns]);\n\n const rowModels = getRowModel();\n\n const onChangePagination = useCallback(\n (page: number) => {\n setPageIndex(page - 1);\n },\n [setPageIndex]\n );\n\n const helpCompRender = useCallback(\n (rowLength: number) => {\n if (isLoading) {\n return (\n <Flex\n align=\"center\"\n height=\"100%\"\n justify=\"center\"\n p=\"5\"\n width=\"100%\"\n >\n <Spinner />\n </Flex>\n );\n }\n if (rowLength === 0) {\n return (\n <div className=\"tr\" key=\"expand_placeholder\">\n <Flex align=\"center\" justify=\"center\">\n {placeholder || (\n <Typo color=\"gray\" mb=\"6\" mt=\"6\" variant=\"body\">\n 데이터가 없습니다\n </Typo>\n )}\n </Flex>\n </div>\n );\n }\n return null;\n },\n [isLoading, placeholder]\n );\n\n const pageCount = useMemo(() => {\n if (!data) return 0;\n return Math.ceil(data.length / pageSize);\n }, [data, pageSize]);\n\n return (\n <div className=\"expand-table-wrapper\">\n <div className=\"expand-table\" style={tableStyle}>\n <div className=\"thead\">\n {getHeaderGroups().map((headerGroup) => (\n <div\n className=\"tr\"\n key={headerGroup.id}\n style={{ gridTemplateColumns }}\n >\n {headerGroup.headers.map((header) => {\n const sortable = header.column.getCanSort();\n const sortedState = header.column.getIsSorted();\n const justifyContent =\n header.column.columnDef.meta?.align || defaultAlign;\n\n return (\n <div className={`${justifyContent} th`} key={header.id}>\n <button\n onClick={header.column.getToggleSortingHandler()}\n style={\n sortable ? { cursor: 'pointer' } : { cursor: 'default' }\n }\n type=\"button\"\n >\n <Typo as=\"div\" variant=\"body\">\n {flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n </Typo>\n {sortable ? (\n <Flex\n direction=\"column\"\n style={{ marginLeft: 'var(--space-2)' }}\n >\n <TriangleArrowUpIcon\n color={\n sortedState === 'asc'\n ? 'var(--iris-10)'\n : 'var(--iris-6)'\n }\n />\n <TriangleArrowDownIcon\n color={\n sortedState === 'desc'\n ? 'var(--iris-10)'\n : 'var(--iris-6)'\n }\n />\n </Flex>\n ) : null}\n </button>\n </div>\n );\n })}\n </div>\n ))}\n </div>\n <div className=\"tbody\">\n {/* 조건에 따라 placeholder 또는 loading 렌더*/}\n {helpCompRender(rowModels.rows.length) ||\n rowModels.rows.map((row) => {\n return (\n <Row\n ExpandComp={ExpandComp}\n defaultAlign={defaultAlign}\n getCellStyle={getCellStyle}\n getRowStyle={getRowStyle}\n gridTemplateColumns={gridTemplateColumns}\n key={`row_${row.id}`}\n onRowClick={onRowClick}\n row={row}\n />\n );\n })}\n </div>\n </div>\n {showPagination ? (\n <Flex justify=\"end\" pt=\"3\" width=\"100%\">\n <Pagination\n count={pageCount}\n onChange={onChangePagination}\n page={pagination.pageIndex + 1}\n siblingCount={siblingCount}\n />\n </Flex>\n ) : null}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import {
|
|
2
|
+
curriculum_review_default
|
|
3
|
+
} from "./chunk-6D2NJ4JA.js";
|
|
4
|
+
import {
|
|
5
|
+
curriculum_video_default
|
|
6
|
+
} from "./chunk-QGKQ3IX7.js";
|
|
7
|
+
import {
|
|
8
|
+
curriculum_ai_traning_default
|
|
9
|
+
} from "./chunk-7N6VN2FK.js";
|
|
10
|
+
import {
|
|
11
|
+
useCurriculumContext
|
|
12
|
+
} from "./chunk-IYQJIEVM.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-QYBSBW7T.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":[]}
|