@tipp/ui 2.1.29 → 2.1.30
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 +5 -2
- package/dist/app/index.cjs.map +1 -1
- package/dist/app/index.js +6 -6
- package/dist/app/platform/edit-coaching-time.cjs +5 -2
- package/dist/app/platform/edit-coaching-time.cjs.map +1 -1
- package/dist/app/platform/edit-coaching-time.js +3 -3
- package/dist/app/platform/edit-service-type.cjs +5 -2
- package/dist/app/platform/edit-service-type.cjs.map +1 -1
- package/dist/app/platform/edit-service-type.js +2 -2
- package/dist/app/platform/goal-manage-card-edit.cjs +5 -2
- package/dist/app/platform/goal-manage-card-edit.cjs.map +1 -1
- package/dist/app/platform/goal-manage-card-edit.js +3 -3
- package/dist/app/platform/on-offline-radio-card.cjs +5 -2
- package/dist/app/platform/on-offline-radio-card.cjs.map +1 -1
- package/dist/app/platform/on-offline-radio-card.js +2 -2
- package/dist/app/platform/reservation-card.cjs +5 -2
- package/dist/app/platform/reservation-card.cjs.map +1 -1
- package/dist/app/platform/reservation-card.js +3 -3
- package/dist/app/platform/session-card.cjs +5 -2
- package/dist/app/platform/session-card.cjs.map +1 -1
- package/dist/app/platform/session-card.js +4 -4
- package/dist/chunk-26D5QIDQ.js +174 -0
- package/dist/chunk-26D5QIDQ.js.map +1 -0
- package/dist/chunk-2GLHYOET.js +144 -0
- package/dist/chunk-2GLHYOET.js.map +1 -0
- package/dist/chunk-2TXMPG5S.js +145 -0
- package/dist/chunk-2TXMPG5S.js.map +1 -0
- package/dist/chunk-3QM2WUAX.js +281 -0
- package/dist/chunk-3QM2WUAX.js.map +1 -0
- package/dist/chunk-5DJ2LHPL.js +144 -0
- package/dist/chunk-5DJ2LHPL.js.map +1 -0
- package/dist/chunk-5K4VOWNF.js +84 -0
- package/dist/chunk-5K4VOWNF.js.map +1 -0
- package/dist/chunk-6327I3ZH.js +196 -0
- package/dist/chunk-6327I3ZH.js.map +1 -0
- package/dist/chunk-6D5RCEOQ.js +281 -0
- package/dist/chunk-6D5RCEOQ.js.map +1 -0
- package/dist/chunk-6KZBQD4O.js +231 -0
- package/dist/chunk-6KZBQD4O.js.map +1 -0
- package/dist/chunk-6Q6OHG2C.js +74 -0
- package/dist/chunk-6Q6OHG2C.js.map +1 -0
- package/dist/chunk-7S2RDGXN.js +101 -0
- package/dist/chunk-7S2RDGXN.js.map +1 -0
- package/dist/chunk-7SAWHUJA.js +89 -0
- package/dist/chunk-7SAWHUJA.js.map +1 -0
- package/dist/chunk-7UPCR2IQ.js +281 -0
- package/dist/chunk-7UPCR2IQ.js.map +1 -0
- package/dist/chunk-7WEVW6IN.js +28 -0
- package/dist/chunk-7WEVW6IN.js.map +1 -0
- package/dist/chunk-A4ZOVTFX.js +117 -0
- package/dist/chunk-A4ZOVTFX.js.map +1 -0
- package/dist/chunk-A75LCRKO.js +45 -0
- package/dist/chunk-A75LCRKO.js.map +1 -0
- package/dist/chunk-AJRM2CRN.js +281 -0
- package/dist/chunk-AJRM2CRN.js.map +1 -0
- package/dist/chunk-AY2MOPIM.js +64 -0
- package/dist/chunk-AY2MOPIM.js.map +1 -0
- package/dist/chunk-AZXDKQTU.js +49 -0
- package/dist/chunk-AZXDKQTU.js.map +1 -0
- package/dist/chunk-B35ENQ53.js +174 -0
- package/dist/chunk-B35ENQ53.js.map +1 -0
- package/dist/chunk-BMVBU4ZS.js +192 -0
- package/dist/chunk-BMVBU4ZS.js.map +1 -0
- package/dist/chunk-BQ2C4JPD.js +231 -0
- package/dist/chunk-BQ2C4JPD.js.map +1 -0
- package/dist/chunk-BQ4YWXRL.js +51 -0
- package/dist/chunk-BQ4YWXRL.js.map +1 -0
- package/dist/chunk-BUU2P46X.js +145 -0
- package/dist/chunk-BUU2P46X.js.map +1 -0
- package/dist/chunk-C4IWE6EG.js +169 -0
- package/dist/chunk-C4IWE6EG.js.map +1 -0
- package/dist/chunk-C7HMJBJA.js +53 -0
- package/dist/chunk-C7HMJBJA.js.map +1 -0
- package/dist/chunk-D4GJM3C3.js +69 -0
- package/dist/chunk-D4GJM3C3.js.map +1 -0
- package/dist/chunk-DE6WTN3Q.js +144 -0
- package/dist/chunk-DE6WTN3Q.js.map +1 -0
- package/dist/chunk-DOA3BJLX.js +144 -0
- package/dist/chunk-DOA3BJLX.js.map +1 -0
- package/dist/chunk-EL53KVY4.js +144 -0
- package/dist/chunk-EL53KVY4.js.map +1 -0
- package/dist/chunk-ERXU77DA.js +281 -0
- package/dist/chunk-ERXU77DA.js.map +1 -0
- package/dist/chunk-EWFUZOWN.js +281 -0
- package/dist/chunk-EWFUZOWN.js.map +1 -0
- package/dist/chunk-FAZOROOU.js +68 -0
- package/dist/chunk-FAZOROOU.js.map +1 -0
- package/dist/chunk-FENPJ55R.js +230 -0
- package/dist/chunk-FENPJ55R.js.map +1 -0
- package/dist/chunk-FNV6FVQA.js +61 -0
- package/dist/chunk-FNV6FVQA.js.map +1 -0
- package/dist/chunk-FWRJFBQW.js +57 -0
- package/dist/chunk-FWRJFBQW.js.map +1 -0
- package/dist/chunk-FY47YMFM.js +145 -0
- package/dist/chunk-FY47YMFM.js.map +1 -0
- package/dist/chunk-GWJMQBPR.js +231 -0
- package/dist/chunk-GWJMQBPR.js.map +1 -0
- package/dist/chunk-H2NGLG6A.js +363 -0
- package/dist/chunk-H2NGLG6A.js.map +1 -0
- package/dist/chunk-H5UOKPYZ.js +79 -0
- package/dist/chunk-H5UOKPYZ.js.map +1 -0
- package/dist/chunk-HPEQBAHB.js +165 -0
- package/dist/chunk-HPEQBAHB.js.map +1 -0
- package/dist/chunk-I3CMYMBL.js +233 -0
- package/dist/chunk-I3CMYMBL.js.map +1 -0
- package/dist/chunk-IME3WMKT.js +63 -0
- package/dist/chunk-IME3WMKT.js.map +1 -0
- package/dist/chunk-IPF2UOFH.js +63 -0
- package/dist/chunk-IPF2UOFH.js.map +1 -0
- package/dist/chunk-ITUS6SKB.js +64 -0
- package/dist/chunk-ITUS6SKB.js.map +1 -0
- package/dist/chunk-IZHU33JE.js +174 -0
- package/dist/chunk-IZHU33JE.js.map +1 -0
- package/dist/chunk-JEO4YX65.js +63 -0
- package/dist/chunk-JEO4YX65.js.map +1 -0
- package/dist/chunk-JSOXMJ6K.js +43 -0
- package/dist/chunk-JSOXMJ6K.js.map +1 -0
- package/dist/chunk-KO66SUJN.js +174 -0
- package/dist/chunk-KO66SUJN.js.map +1 -0
- package/dist/chunk-KTCFIAAM.js +281 -0
- package/dist/chunk-KTCFIAAM.js.map +1 -0
- package/dist/chunk-LEUTTEBC.js +63 -0
- package/dist/chunk-LEUTTEBC.js.map +1 -0
- package/dist/chunk-M2SQB6ZY.js +23 -0
- package/dist/chunk-M2SQB6ZY.js.map +1 -0
- package/dist/chunk-NVNCLLYC.js +63 -0
- package/dist/chunk-NVNCLLYC.js.map +1 -0
- package/dist/chunk-OV5F3JZH.js +54 -0
- package/dist/chunk-OV5F3JZH.js.map +1 -0
- package/dist/chunk-P2VBB4C5.js +65 -0
- package/dist/chunk-P2VBB4C5.js.map +1 -0
- package/dist/chunk-P5ARB7KK.js +174 -0
- package/dist/chunk-P5ARB7KK.js.map +1 -0
- package/dist/chunk-PKZ4JCB2.js +231 -0
- package/dist/chunk-PKZ4JCB2.js.map +1 -0
- package/dist/chunk-QQ4ZK4BW.js +37 -0
- package/dist/chunk-QQ4ZK4BW.js.map +1 -0
- package/dist/chunk-QTVX2ERL.js +99 -0
- package/dist/chunk-QTVX2ERL.js.map +1 -0
- package/dist/chunk-QZJHGU4X.js +145 -0
- package/dist/chunk-QZJHGU4X.js.map +1 -0
- package/dist/chunk-R77BOAW5.js +151 -0
- package/dist/chunk-R77BOAW5.js.map +1 -0
- package/dist/chunk-RPCKPFRL.js +145 -0
- package/dist/chunk-RPCKPFRL.js.map +1 -0
- package/dist/chunk-RTVZMGDC.js +144 -0
- package/dist/chunk-RTVZMGDC.js.map +1 -0
- package/dist/chunk-SLBSIRB6.js +58 -0
- package/dist/chunk-SLBSIRB6.js.map +1 -0
- package/dist/chunk-UIGZ3PK5.js +63 -0
- package/dist/chunk-UIGZ3PK5.js.map +1 -0
- package/dist/chunk-UKKISPC5.js +145 -0
- package/dist/chunk-UKKISPC5.js.map +1 -0
- package/dist/chunk-UPZMRMK7.js +29 -0
- package/dist/chunk-UPZMRMK7.js.map +1 -0
- package/dist/chunk-UXOYDVHH.js +63 -0
- package/dist/chunk-UXOYDVHH.js.map +1 -0
- package/dist/chunk-UZUQQLTU.js +63 -0
- package/dist/chunk-UZUQQLTU.js.map +1 -0
- package/dist/chunk-VBLQSRLF.js +63 -0
- package/dist/chunk-VBLQSRLF.js.map +1 -0
- package/dist/chunk-VDKHCZHN.js +63 -0
- package/dist/chunk-VDKHCZHN.js.map +1 -0
- package/dist/chunk-VE737SXT.js +30 -0
- package/dist/chunk-VE737SXT.js.map +1 -0
- package/dist/chunk-VL652LU6.js +281 -0
- package/dist/chunk-VL652LU6.js.map +1 -0
- package/dist/chunk-VO7GWTGE.js +163 -0
- package/dist/chunk-VO7GWTGE.js.map +1 -0
- package/dist/chunk-W3DLS557.js +144 -0
- package/dist/chunk-W3DLS557.js.map +1 -0
- package/dist/chunk-WB2EZAD2.js +87 -0
- package/dist/chunk-WB2EZAD2.js.map +1 -0
- package/dist/chunk-WEBCXOO7.js +30 -0
- package/dist/chunk-WEBCXOO7.js.map +1 -0
- package/dist/chunk-WOUU3XWH.js +144 -0
- package/dist/chunk-WOUU3XWH.js.map +1 -0
- package/dist/chunk-WZM6EE5T.js +174 -0
- package/dist/chunk-WZM6EE5T.js.map +1 -0
- package/dist/chunk-X2AK6LTW.js +174 -0
- package/dist/chunk-X2AK6LTW.js.map +1 -0
- package/dist/chunk-X4R5GV7Q.js +125 -0
- package/dist/chunk-X4R5GV7Q.js.map +1 -0
- package/dist/chunk-YL5EYCRV.js +233 -0
- package/dist/chunk-YL5EYCRV.js.map +1 -0
- package/dist/chunk-YNJHVJZH.js +145 -0
- package/dist/chunk-YNJHVJZH.js.map +1 -0
- package/dist/chunk-YOIAYFQM.js +39 -0
- package/dist/chunk-YOIAYFQM.js.map +1 -0
- package/dist/chunk-Z4YM6RFE.js +70 -0
- package/dist/chunk-Z4YM6RFE.js.map +1 -0
- package/dist/chunk-Z5TVNR2U.js +145 -0
- package/dist/chunk-Z5TVNR2U.js.map +1 -0
- package/dist/index.cjs +5 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +6 -6
- package/dist/molecules/date-picker/date-picker-button.cjs +5 -2
- package/dist/molecules/date-picker/date-picker-button.cjs.map +1 -1
- package/dist/molecules/date-picker/date-picker-button.js +2 -2
- package/dist/molecules/date-picker/index.cjs +5 -2
- package/dist/molecules/date-picker/index.cjs.map +1 -1
- package/dist/molecules/date-picker/index.js +1 -1
- package/dist/molecules/index.cjs +5 -2
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +2 -2
- package/package.json +3 -3
- package/src/molecules/date-picker/index.tsx +8 -7
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Popover
|
|
3
|
+
} from "./chunk-5AVBYDPB.js";
|
|
4
|
+
import {
|
|
5
|
+
Heading
|
|
6
|
+
} from "./chunk-34OQDUQR.js";
|
|
7
|
+
import {
|
|
8
|
+
IconButton
|
|
9
|
+
} from "./chunk-O3DNDMV3.js";
|
|
10
|
+
import {
|
|
11
|
+
Box
|
|
12
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
13
|
+
import {
|
|
14
|
+
Flex
|
|
15
|
+
} from "./chunk-25HMMI7R.js";
|
|
16
|
+
import {
|
|
17
|
+
Typo
|
|
18
|
+
} from "./chunk-PARGQUJB.js";
|
|
19
|
+
import {
|
|
20
|
+
Button
|
|
21
|
+
} from "./chunk-AFPH32MF.js";
|
|
22
|
+
import {
|
|
23
|
+
ChevronLeftIcon,
|
|
24
|
+
ChevronRightIcon
|
|
25
|
+
} from "./chunk-V5XKNSCK.js";
|
|
26
|
+
import {
|
|
27
|
+
__objRest,
|
|
28
|
+
__spreadProps,
|
|
29
|
+
__spreadValues
|
|
30
|
+
} from "./chunk-2NMEKWO5.js";
|
|
31
|
+
|
|
32
|
+
// src/molecules/date-picker/index.tsx
|
|
33
|
+
import { forwardRef, useMemo, useState, useEffect, useRef } from "react";
|
|
34
|
+
import ReactDatePicker from "react-datepicker";
|
|
35
|
+
import { ko } from "date-fns/locale";
|
|
36
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
37
|
+
var DatePicker = forwardRef(
|
|
38
|
+
(props, ref) => {
|
|
39
|
+
const _a = props, { fullWidth } = _a, rest = __objRest(_a, ["fullWidth"]);
|
|
40
|
+
const fullWidthClassName = fullWidth ? "full-width" : "";
|
|
41
|
+
const [isYearDropdownOpen, setIsYearDropdownOpen] = useState(false);
|
|
42
|
+
const [isMonthDropdownOpen, setIsMonthDropdownOpen] = useState(false);
|
|
43
|
+
const renderCustomHeader = useMemo(() => {
|
|
44
|
+
const getYears = () => {
|
|
45
|
+
const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
|
|
46
|
+
return Array.from(
|
|
47
|
+
{ length: currentYear + 5 - 1920 },
|
|
48
|
+
(_, index) => 1920 + index
|
|
49
|
+
).filter((year) => {
|
|
50
|
+
if (props.minDate && year < props.minDate.getFullYear()) {
|
|
51
|
+
return false;
|
|
52
|
+
}
|
|
53
|
+
if (props.maxDate && year > props.maxDate.getFullYear()) {
|
|
54
|
+
return false;
|
|
55
|
+
}
|
|
56
|
+
return true;
|
|
57
|
+
});
|
|
58
|
+
};
|
|
59
|
+
return getRenderCustomHeader(__spreadProps(__spreadValues({}, props), {
|
|
60
|
+
years: getYears(),
|
|
61
|
+
isYearDropdownOpen,
|
|
62
|
+
setIsYearDropdownOpen,
|
|
63
|
+
isMonthDropdownOpen,
|
|
64
|
+
setIsMonthDropdownOpen
|
|
65
|
+
}));
|
|
66
|
+
}, [isMonthDropdownOpen, isYearDropdownOpen, props]);
|
|
67
|
+
return /* @__PURE__ */ jsx(Flex, { p: "0", width: "100%", children: /* @__PURE__ */ jsx(
|
|
68
|
+
ReactDatePicker,
|
|
69
|
+
__spreadProps(__spreadValues({
|
|
70
|
+
dateFormat: "yyyy/MM/dd h:mm aa",
|
|
71
|
+
formatWeekDay: (nameOfDay) => {
|
|
72
|
+
return nameOfDay[0];
|
|
73
|
+
},
|
|
74
|
+
locale: ko,
|
|
75
|
+
nextMonthButtonLabel: "\uB2E4\uC74C \uB2EC",
|
|
76
|
+
placeholderText: "YYYY/MM/DD hh:mm AM/PM",
|
|
77
|
+
popperProps: { strategy: "fixed" },
|
|
78
|
+
previousMonthButtonLabel: "\uC774\uC804 \uB2EC",
|
|
79
|
+
ref,
|
|
80
|
+
renderCustomHeader,
|
|
81
|
+
showPopperArrow: false,
|
|
82
|
+
timeCaption: "\uC2DC\uAC04",
|
|
83
|
+
timeFormat: "h:mm aa",
|
|
84
|
+
timeIntervals: 10
|
|
85
|
+
}, rest), {
|
|
86
|
+
calendarClassName: `tipp_datePicker_calendar ${rest.calendarClassName || ""}`,
|
|
87
|
+
wrapperClassName: `tipp_datePicker ${fullWidthClassName} ${rest.wrapperClassName || ""}`
|
|
88
|
+
})
|
|
89
|
+
) });
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
DatePicker.displayName = "DatePicker";
|
|
93
|
+
function DropdownSelector({
|
|
94
|
+
isOpen,
|
|
95
|
+
onOpenChange,
|
|
96
|
+
onSelect,
|
|
97
|
+
options,
|
|
98
|
+
selectedValue,
|
|
99
|
+
suffix
|
|
100
|
+
}) {
|
|
101
|
+
const scrollContainerRef = useRef(null);
|
|
102
|
+
useEffect(() => {
|
|
103
|
+
if (isOpen) {
|
|
104
|
+
queueMicrotask(() => {
|
|
105
|
+
var _a;
|
|
106
|
+
const item = (_a = scrollContainerRef.current) == null ? void 0 : _a.querySelector(
|
|
107
|
+
`[data-year-month-dropdown-tiem="${selectedValue}"]`
|
|
108
|
+
);
|
|
109
|
+
if (item) {
|
|
110
|
+
item.scrollIntoView({ behavior: "instant" });
|
|
111
|
+
}
|
|
112
|
+
});
|
|
113
|
+
}
|
|
114
|
+
}, [isOpen]);
|
|
115
|
+
return /* @__PURE__ */ jsxs(Popover.Root, { onOpenChange, open: isOpen, modal: true, children: [
|
|
116
|
+
/* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(Button, { variant: "ghost", children: /* @__PURE__ */ jsxs(Heading, { variant: "heading4", weight: "regular", children: [
|
|
117
|
+
selectedValue,
|
|
118
|
+
suffix
|
|
119
|
+
] }) }) }),
|
|
120
|
+
/* @__PURE__ */ jsx(Popover.Content, { side: "bottom", children: /* @__PURE__ */ jsx(
|
|
121
|
+
Box,
|
|
122
|
+
{
|
|
123
|
+
maxHeight: "200px",
|
|
124
|
+
overflowY: "auto",
|
|
125
|
+
ref: scrollContainerRef,
|
|
126
|
+
style: { scrollbarWidth: "none" },
|
|
127
|
+
children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "1", children: options.map((item) => /* @__PURE__ */ jsx(
|
|
128
|
+
Button,
|
|
129
|
+
{
|
|
130
|
+
color: "gray",
|
|
131
|
+
"data-year-month-dropdown-tiem": item,
|
|
132
|
+
className: "react-datepicker_dropdown_item",
|
|
133
|
+
onMouseDown: (e) => {
|
|
134
|
+
e.stopPropagation();
|
|
135
|
+
e.preventDefault();
|
|
136
|
+
},
|
|
137
|
+
onClick: () => {
|
|
138
|
+
onSelect(item);
|
|
139
|
+
},
|
|
140
|
+
variant: "transparent",
|
|
141
|
+
children: /* @__PURE__ */ jsxs(Typo, { weight: item === selectedValue ? "bold" : void 0, children: [
|
|
142
|
+
item,
|
|
143
|
+
suffix
|
|
144
|
+
] })
|
|
145
|
+
},
|
|
146
|
+
item
|
|
147
|
+
)) })
|
|
148
|
+
}
|
|
149
|
+
) })
|
|
150
|
+
] });
|
|
151
|
+
}
|
|
152
|
+
var getRenderCustomHeader = (props) => {
|
|
153
|
+
const renderer = (renderCustomHeaderProps) => {
|
|
154
|
+
const {
|
|
155
|
+
date,
|
|
156
|
+
decreaseMonth,
|
|
157
|
+
increaseMonth,
|
|
158
|
+
prevMonthButtonDisabled,
|
|
159
|
+
nextMonthButtonDisabled,
|
|
160
|
+
changeYear,
|
|
161
|
+
changeMonth
|
|
162
|
+
} = renderCustomHeaderProps;
|
|
163
|
+
const {
|
|
164
|
+
years,
|
|
165
|
+
isYearDropdownOpen,
|
|
166
|
+
setIsYearDropdownOpen,
|
|
167
|
+
isMonthDropdownOpen,
|
|
168
|
+
setIsMonthDropdownOpen
|
|
169
|
+
} = props;
|
|
170
|
+
const year = date ? new Date(date).getFullYear() : "-";
|
|
171
|
+
const month = date ? new Date(date).getMonth() + 1 : "-";
|
|
172
|
+
return /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", pl: "2", pr: "2", children: [
|
|
173
|
+
/* @__PURE__ */ jsx(
|
|
174
|
+
IconButton,
|
|
175
|
+
{
|
|
176
|
+
disabled: prevMonthButtonDisabled,
|
|
177
|
+
onClick: decreaseMonth,
|
|
178
|
+
type: "button",
|
|
179
|
+
variant: "ghost",
|
|
180
|
+
children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
|
|
181
|
+
}
|
|
182
|
+
),
|
|
183
|
+
/* @__PURE__ */ jsxs(Flex, { gap: "3", children: [
|
|
184
|
+
/* @__PURE__ */ jsx(
|
|
185
|
+
DropdownSelector,
|
|
186
|
+
{
|
|
187
|
+
isOpen: isYearDropdownOpen,
|
|
188
|
+
onOpenChange: setIsYearDropdownOpen,
|
|
189
|
+
onSelect: (value) => {
|
|
190
|
+
changeYear(value);
|
|
191
|
+
setIsYearDropdownOpen(false);
|
|
192
|
+
},
|
|
193
|
+
options: years,
|
|
194
|
+
selectedValue: year,
|
|
195
|
+
suffix: "\uB144"
|
|
196
|
+
}
|
|
197
|
+
),
|
|
198
|
+
/* @__PURE__ */ jsx(
|
|
199
|
+
DropdownSelector,
|
|
200
|
+
{
|
|
201
|
+
isOpen: isMonthDropdownOpen,
|
|
202
|
+
onOpenChange: setIsMonthDropdownOpen,
|
|
203
|
+
onSelect: (value) => {
|
|
204
|
+
changeMonth(value - 1);
|
|
205
|
+
setIsMonthDropdownOpen(false);
|
|
206
|
+
},
|
|
207
|
+
options: Array.from({ length: 12 }, (_, index) => index + 1),
|
|
208
|
+
selectedValue: month,
|
|
209
|
+
suffix: "\uC6D4"
|
|
210
|
+
}
|
|
211
|
+
)
|
|
212
|
+
] }),
|
|
213
|
+
/* @__PURE__ */ jsx(
|
|
214
|
+
IconButton,
|
|
215
|
+
{
|
|
216
|
+
disabled: nextMonthButtonDisabled,
|
|
217
|
+
onClick: increaseMonth,
|
|
218
|
+
type: "button",
|
|
219
|
+
variant: "ghost",
|
|
220
|
+
children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
|
|
221
|
+
}
|
|
222
|
+
)
|
|
223
|
+
] });
|
|
224
|
+
};
|
|
225
|
+
return renderer;
|
|
226
|
+
};
|
|
227
|
+
|
|
228
|
+
export {
|
|
229
|
+
DatePicker
|
|
230
|
+
};
|
|
231
|
+
//# sourceMappingURL=chunk-6KZBQD4O.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/date-picker/index.tsx"],"sourcesContent":["import type { ElementRef } from 'react';\nimport React, { forwardRef, useMemo, useState, useEffect, useRef } from 'react';\nimport type { DatePickerProps as ReactDatePickerProps } from 'react-datepicker';\nimport ReactDatePicker from 'react-datepicker';\nimport { ko } from 'date-fns/locale';\nimport { Box, Button, Popover, Typo } from '@/atoms';\nimport { IconButton } from '../../atoms/icon-button';\nimport { Flex } from '../../atoms/flex';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../../icon';\nimport { Heading } from '../../atoms/heading';\n\nexport type DatePickerProps = ReactDatePickerProps & {\n fullWidth?: boolean;\n};\ntype DatePickerRef = ElementRef<typeof ReactDatePicker>;\nconst weekDays = [\"일\", \"월\", \"화\", \"수\", \"목\", \"금\", \"토\"];\n\nexport const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(\n (props, ref): React.ReactNode => {\n const { fullWidth, ...rest } = props;\n const fullWidthClassName = fullWidth ? 'full-width' : '';\n const [isYearDropdownOpen, setIsYearDropdownOpen] = useState(false);\n const [isMonthDropdownOpen, setIsMonthDropdownOpen] = useState(false);\n\n const renderCustomHeader = useMemo(() => {\n const getYears = (): number[] => {\n const currentYear = new Date().getFullYear();\n return Array.from(\n { length: currentYear + 5 - 1920 },\n (_, index) => 1920 + index\n ).filter((year) => {\n if (props.minDate && year < props.minDate.getFullYear()) {\n return false;\n }\n if (props.maxDate && year > props.maxDate.getFullYear()) {\n return false;\n }\n return true;\n });\n };\n\n return getRenderCustomHeader({\n ...props,\n years: getYears(),\n isYearDropdownOpen,\n setIsYearDropdownOpen,\n isMonthDropdownOpen,\n setIsMonthDropdownOpen,\n });\n }, [isMonthDropdownOpen, isYearDropdownOpen, props]);\n\n return (\n <Flex p=\"0\" width=\"100%\">\n <ReactDatePicker\n dateFormat=\"yyyy/MM/dd h:mm aa\"\n formatWeekDay={(nameOfDay) => { \n return nameOfDay[0];\n }}\n locale={ko}\n nextMonthButtonLabel=\"다음 달\"\n placeholderText=\"YYYY/MM/DD hh:mm AM/PM\"\n popperProps={{ strategy: 'fixed' }}\n previousMonthButtonLabel=\"이전 달\"\n ref={ref}\n renderCustomHeader={renderCustomHeader}\n showPopperArrow={false}\n timeCaption=\"시간\"\n timeFormat=\"h:mm aa\"\n timeIntervals={10} \n {...rest}\n calendarClassName={`tipp_datePicker_calendar ${rest.calendarClassName || ''}`}\n wrapperClassName={`tipp_datePicker ${fullWidthClassName} ${rest.wrapperClassName || ''}`}\n />\n </Flex>\n );\n }\n);\n\nDatePicker.displayName = 'DatePicker';\n\ninterface DropdownSelectorProps {\n isOpen: boolean;\n onOpenChange: (open: boolean) => void;\n onSelect: (value: number) => void;\n options: number[];\n selectedValue: number | string;\n suffix: string;\n}\n\nfunction DropdownSelector({\n isOpen,\n onOpenChange,\n onSelect,\n options,\n selectedValue,\n suffix,\n}: DropdownSelectorProps): React.JSX.Element {\n\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n useEffect(() => {\n if (isOpen) { \n queueMicrotask(() => {\n const item = scrollContainerRef.current?.querySelector(\n `[data-year-month-dropdown-tiem=\"${selectedValue}\"]`\n );\n if (item) {\n item.scrollIntoView({ behavior: 'instant' });\n }\n });\n }\n }, [isOpen]);\n \n\n return (\n <Popover.Root onOpenChange={onOpenChange} open={isOpen} modal>\n <Popover.Trigger>\n <Button variant=\"ghost\">\n <Heading variant=\"heading4\" weight=\"regular\">\n {selectedValue}\n {suffix}\n </Heading>\n </Button>\n </Popover.Trigger>\n <Popover.Content side=\"bottom\">\n <Box\n maxHeight=\"200px\"\n overflowY=\"auto\"\n ref={scrollContainerRef}\n style={{ scrollbarWidth: 'none' }}\n >\n <Flex direction=\"column\" gap=\"1\">\n {options.map((item: number) => (\n <Button\n color=\"gray\"\n data-year-month-dropdown-tiem={item}\n key={item}\n className={'react-datepicker_dropdown_item'}\n onMouseDown={(e) => {\n e.stopPropagation();\n e.preventDefault();\n }}\n onClick={() => {\n onSelect(item);\n }}\n variant=\"transparent\"\n >\n <Typo weight= {item === selectedValue ? 'bold' : undefined}>\n {item}\n {suffix}\n </Typo>\n </Button>\n ))}\n </Flex>\n </Box>\n </Popover.Content>\n </Popover.Root>\n );\n}\n\nconst getRenderCustomHeader: (\n props: ReactDatePickerProps & {\n years: number[];\n isYearDropdownOpen: boolean;\n setIsYearDropdownOpen: (show: boolean) => void;\n isMonthDropdownOpen: boolean;\n setIsMonthDropdownOpen: (show: boolean) => void;\n }\n) => ReactDatePickerProps['renderCustomHeader'] = (props) => {\n const renderer: ReactDatePickerProps['renderCustomHeader'] = (\n renderCustomHeaderProps\n ) => {\n const {\n date,\n decreaseMonth,\n increaseMonth,\n prevMonthButtonDisabled,\n nextMonthButtonDisabled,\n changeYear,\n changeMonth,\n } = renderCustomHeaderProps;\n const {\n years,\n isYearDropdownOpen,\n setIsYearDropdownOpen,\n isMonthDropdownOpen,\n setIsMonthDropdownOpen,\n } = props;\n\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- date가 undefined일 수 있음\n const year = date ? new Date(date).getFullYear() : '-';\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- date가 undefined일 수 있음\n const month = date ? new Date(date).getMonth() + 1 : '-';\n\n return (\n <Flex align=\"center\" justify=\"between\" pl=\"2\" pr=\"2\">\n <IconButton\n disabled={prevMonthButtonDisabled}\n onClick={decreaseMonth}\n type=\"button\"\n variant=\"ghost\"\n >\n <ChevronLeftIcon />\n </IconButton>\n <Flex gap=\"3\">\n <DropdownSelector\n isOpen={isYearDropdownOpen}\n onOpenChange={setIsYearDropdownOpen}\n onSelect={(value) => {\n changeYear(value);\n setIsYearDropdownOpen(false);\n }}\n options={years}\n selectedValue={year}\n suffix=\"년\"\n />\n <DropdownSelector\n isOpen={isMonthDropdownOpen}\n onOpenChange={setIsMonthDropdownOpen}\n onSelect={(value) => {\n changeMonth(value - 1);\n setIsMonthDropdownOpen(false);\n }}\n options={Array.from({ length: 12 }, (_, index) => index + 1)}\n selectedValue={month}\n suffix=\"월\"\n />\n </Flex>\n\n <IconButton\n disabled={nextMonthButtonDisabled}\n onClick={increaseMonth}\n type=\"button\"\n variant=\"ghost\"\n >\n <ChevronRightIcon />\n </IconButton>\n </Flex>\n );\n };\n return renderer;\n};\n\n// DatePicker.displayName = 'DatePicker';\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import {
|
|
2
|
+
infoList,
|
|
3
|
+
renderDataListItem,
|
|
4
|
+
renderItem,
|
|
5
|
+
sessionList
|
|
6
|
+
} from "./chunk-I2ZOU3LX.js";
|
|
7
|
+
import {
|
|
8
|
+
Grid
|
|
9
|
+
} from "./chunk-EGEQY3KT.js";
|
|
10
|
+
import {
|
|
11
|
+
DataList
|
|
12
|
+
} from "./chunk-VTJZMOSP.js";
|
|
13
|
+
import {
|
|
14
|
+
Heading
|
|
15
|
+
} from "./chunk-34OQDUQR.js";
|
|
16
|
+
import {
|
|
17
|
+
Separator
|
|
18
|
+
} from "./chunk-HYITAA4J.js";
|
|
19
|
+
import {
|
|
20
|
+
Card
|
|
21
|
+
} from "./chunk-HEDMSFPW.js";
|
|
22
|
+
import {
|
|
23
|
+
Box
|
|
24
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
25
|
+
import {
|
|
26
|
+
Flex
|
|
27
|
+
} from "./chunk-25HMMI7R.js";
|
|
28
|
+
import {
|
|
29
|
+
Typo
|
|
30
|
+
} from "./chunk-PARGQUJB.js";
|
|
31
|
+
|
|
32
|
+
// src/app/platform/userInfos/coaching-customer-info/medium.tsx
|
|
33
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
34
|
+
function CoachingCustomerInfoMedium({
|
|
35
|
+
customer,
|
|
36
|
+
session,
|
|
37
|
+
children,
|
|
38
|
+
badge,
|
|
39
|
+
onClickCopy
|
|
40
|
+
}) {
|
|
41
|
+
return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "5", children: [
|
|
42
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
43
|
+
/* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", mb: "1", width: "100%", children: [
|
|
44
|
+
/* @__PURE__ */ jsx(Heading, { variant: "heading2", children: (customer == null ? void 0 : customer.username) || "\uC774\uB984 \uC5C6\uC74C" }),
|
|
45
|
+
badge
|
|
46
|
+
] }),
|
|
47
|
+
/* @__PURE__ */ jsx(Heading, { truncate: true, variant: "heading4", weight: "regular", children: customer == null ? void 0 : customer.company })
|
|
48
|
+
] }),
|
|
49
|
+
children,
|
|
50
|
+
/* @__PURE__ */ jsx(Card, { size: "2", children: /* @__PURE__ */ jsx(DataList.Root, { orientation: "vertical", children: sessionList.map(
|
|
51
|
+
(el) => renderDataListItem({
|
|
52
|
+
info: el,
|
|
53
|
+
data: session,
|
|
54
|
+
onClickCopy
|
|
55
|
+
})
|
|
56
|
+
) }) }),
|
|
57
|
+
/* @__PURE__ */ jsxs(Grid, { align: "center", columns: "auto 1fr", gap: "3", children: [
|
|
58
|
+
/* @__PURE__ */ jsx(Heading, { variant: "heading5", children: "\uACE0\uAC1D \uC815\uBCF4" }),
|
|
59
|
+
/* @__PURE__ */ jsx(Separator, { size: "4" })
|
|
60
|
+
] }),
|
|
61
|
+
/* @__PURE__ */ jsx(Flex, { direction: "column", gap: "4", children: infoList.map((el) => {
|
|
62
|
+
return /* @__PURE__ */ jsx(Typo, { children: renderItem({
|
|
63
|
+
info: el,
|
|
64
|
+
data: customer,
|
|
65
|
+
onClickCopy
|
|
66
|
+
}) }, el.label);
|
|
67
|
+
}) })
|
|
68
|
+
] });
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export {
|
|
72
|
+
CoachingCustomerInfoMedium
|
|
73
|
+
};
|
|
74
|
+
//# sourceMappingURL=chunk-6Q6OHG2C.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/app/platform/userInfos/coaching-customer-info/medium.tsx"],"sourcesContent":["import React from 'react';\nimport {\n Box,\n Card,\n DataList,\n Flex,\n Grid,\n Heading,\n Separator,\n Typo,\n} from '../../../../atoms';\nimport type { CoachingCustomerInfoProps } from '../utils';\nimport {\n infoList,\n renderDataListItem,\n renderItem,\n sessionList,\n} from '../utils';\n\nexport function CoachingCustomerInfoMedium({\n customer,\n session,\n children,\n badge,\n onClickCopy,\n}: CoachingCustomerInfoProps): React.ReactNode {\n return (\n <Flex direction=\"column\" gap=\"5\">\n {/* 이름, 사명 */}\n <Box>\n <Flex align=\"center\" justify=\"between\" mb=\"1\" width=\"100%\">\n <Heading variant=\"heading2\">\n {customer?.username || '이름 없음'}\n </Heading>\n {badge}\n </Flex>\n <Heading truncate variant=\"heading4\" weight=\"regular\">\n {customer?.company}\n </Heading>\n </Box>\n\n {children}\n\n {/* 세션 정보 */}\n <Card size=\"2\">\n <DataList.Root orientation=\"vertical\">\n {sessionList.map((el) =>\n renderDataListItem({\n info: el,\n data: session,\n onClickCopy,\n })\n )}\n </DataList.Root>\n </Card>\n\n {/* 회원 정보 */}\n <Grid align=\"center\" columns=\"auto 1fr\" gap=\"3\">\n <Heading variant=\"heading5\">고객 정보</Heading>\n <Separator size=\"4\" />\n </Grid>\n <Flex direction=\"column\" gap=\"4\">\n {infoList.map((el) => {\n return (\n <Typo key={el.label}>\n {renderItem({\n info: el,\n data: customer,\n onClickCopy,\n })}\n </Typo>\n );\n })}\n </Flex>\n </Flex>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BQ,SACE,KADF;AAXD,SAAS,2BAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA+C;AAC7C,SACE,qBAAC,QAAK,WAAU,UAAS,KAAI,KAE3B;AAAA,yBAAC,OACC;AAAA,2BAAC,QAAK,OAAM,UAAS,SAAQ,WAAU,IAAG,KAAI,OAAM,QAClD;AAAA,4BAAC,WAAQ,SAAQ,YACd,gDAAU,aAAY,6BACzB;AAAA,QACC;AAAA,SACH;AAAA,MACA,oBAAC,WAAQ,UAAQ,MAAC,SAAQ,YAAW,QAAO,WACzC,+CAAU,SACb;AAAA,OACF;AAAA,IAEC;AAAA,IAGD,oBAAC,QAAK,MAAK,KACT,8BAAC,SAAS,MAAT,EAAc,aAAY,YACxB,sBAAY;AAAA,MAAI,CAAC,OAChB,mBAAmB;AAAA,QACjB,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,MACF,CAAC;AAAA,IACH,GACF,GACF;AAAA,IAGA,qBAAC,QAAK,OAAM,UAAS,SAAQ,YAAW,KAAI,KAC1C;AAAA,0BAAC,WAAQ,SAAQ,YAAW,uCAAK;AAAA,MACjC,oBAAC,aAAU,MAAK,KAAI;AAAA,OACtB;AAAA,IACA,oBAAC,QAAK,WAAU,UAAS,KAAI,KAC1B,mBAAS,IAAI,CAAC,OAAO;AACpB,aACE,oBAAC,QACE,qBAAW;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,MACF,CAAC,KALQ,GAAG,KAMd;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ReviewQuestionContentHeader
|
|
3
|
+
} from "./chunk-JSOXMJ6K.js";
|
|
4
|
+
import {
|
|
5
|
+
RadioButtonCard
|
|
6
|
+
} from "./chunk-SLXXCM56.js";
|
|
7
|
+
import {
|
|
8
|
+
Grid
|
|
9
|
+
} from "./chunk-EGEQY3KT.js";
|
|
10
|
+
import {
|
|
11
|
+
Card
|
|
12
|
+
} from "./chunk-HEDMSFPW.js";
|
|
13
|
+
import {
|
|
14
|
+
Box
|
|
15
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
16
|
+
import {
|
|
17
|
+
Flex
|
|
18
|
+
} from "./chunk-25HMMI7R.js";
|
|
19
|
+
import {
|
|
20
|
+
Typo
|
|
21
|
+
} from "./chunk-PARGQUJB.js";
|
|
22
|
+
import {
|
|
23
|
+
Button
|
|
24
|
+
} from "./chunk-AFPH32MF.js";
|
|
25
|
+
|
|
26
|
+
// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-radio.tsx
|
|
27
|
+
import { useCallback, useMemo, useState } from "react";
|
|
28
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
29
|
+
var correctAnswerStyle = {
|
|
30
|
+
backgroundColor: "var(--green-a2)"
|
|
31
|
+
};
|
|
32
|
+
function ReviewQuestionRadio(props) {
|
|
33
|
+
const { question, answer, onChange } = props;
|
|
34
|
+
const [isCheckAnswer, setIsCheckAnswer] = useState(false);
|
|
35
|
+
const checkAnswer = useCallback(() => {
|
|
36
|
+
setIsCheckAnswer(true);
|
|
37
|
+
}, []);
|
|
38
|
+
const isCorrect = isCheckAnswer && Number(answer) === question.correctAnswer;
|
|
39
|
+
const isWrong = isCheckAnswer && Number(answer) !== question.correctAnswer;
|
|
40
|
+
const radioColor = useMemo(() => {
|
|
41
|
+
if (isCorrect) return "green";
|
|
42
|
+
if (isWrong) return "red";
|
|
43
|
+
return void 0;
|
|
44
|
+
}, [isCorrect, isWrong]);
|
|
45
|
+
return /* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "auto 1fr", width: "100%", children: [
|
|
46
|
+
/* @__PURE__ */ jsx(Card, { mb: "4", size: "2", children: /* @__PURE__ */ jsx(
|
|
47
|
+
ReviewQuestionContentHeader,
|
|
48
|
+
{
|
|
49
|
+
icon: question.icon,
|
|
50
|
+
question: question.question,
|
|
51
|
+
title: question.title,
|
|
52
|
+
type: question.type
|
|
53
|
+
}
|
|
54
|
+
) }),
|
|
55
|
+
/* @__PURE__ */ jsxs(Grid, { height: "100%", rows: "1fr auto", width: "100%", children: [
|
|
56
|
+
/* @__PURE__ */ jsx(Box, { position: "relative", children: /* @__PURE__ */ jsx(
|
|
57
|
+
RadioButtonCard.Root,
|
|
58
|
+
{
|
|
59
|
+
color: radioColor,
|
|
60
|
+
onValueChange: onChange,
|
|
61
|
+
style: {
|
|
62
|
+
width: "100%",
|
|
63
|
+
height: "100%",
|
|
64
|
+
overflowY: "auto",
|
|
65
|
+
position: "absolute"
|
|
66
|
+
},
|
|
67
|
+
value: answer,
|
|
68
|
+
children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "2", width: "100%", children: question.options.map((option, i) => {
|
|
69
|
+
const isThisOptionCorrect = isCheckAnswer && i === question.correctAnswer;
|
|
70
|
+
const isThisOptionSelected = isCheckAnswer && i === Number(answer);
|
|
71
|
+
const isThisOptionWrong = isCheckAnswer && isThisOptionSelected && i !== question.correctAnswer;
|
|
72
|
+
const style = (() => {
|
|
73
|
+
if (isThisOptionCorrect) return correctAnswerStyle;
|
|
74
|
+
return {};
|
|
75
|
+
})();
|
|
76
|
+
return /* @__PURE__ */ jsx(
|
|
77
|
+
RadioButtonCard.Item,
|
|
78
|
+
{
|
|
79
|
+
style,
|
|
80
|
+
value: i.toString(),
|
|
81
|
+
children: /* @__PURE__ */ jsxs(Box, { children: [
|
|
82
|
+
/* @__PURE__ */ jsx(Typo, { as: "p", children: option.label }),
|
|
83
|
+
isThisOptionCorrect ? /* @__PURE__ */ jsx(Typo, { color: "green", children: "\uC815\uB2F5\uC785\uB2C8\uB2E4" }) : null,
|
|
84
|
+
isThisOptionWrong ? /* @__PURE__ */ jsx(Typo, { color: "red", children: "\uC815\uB2F5\uC774 \uC544\uB2D9\uB2C8\uB2E4" }) : null
|
|
85
|
+
] })
|
|
86
|
+
},
|
|
87
|
+
`${option.label}-${i}`
|
|
88
|
+
);
|
|
89
|
+
}) })
|
|
90
|
+
}
|
|
91
|
+
) }),
|
|
92
|
+
/* @__PURE__ */ jsx(Flex, { justify: "end", mt: "2", children: /* @__PURE__ */ jsx(Button, { onClick: checkAnswer, children: "\uC815\uB2F5 \uD655\uC778" }) })
|
|
93
|
+
] })
|
|
94
|
+
] });
|
|
95
|
+
}
|
|
96
|
+
var review_question_radio_default = ReviewQuestionRadio;
|
|
97
|
+
|
|
98
|
+
export {
|
|
99
|
+
review_question_radio_default
|
|
100
|
+
};
|
|
101
|
+
//# sourceMappingURL=chunk-7S2RDGXN.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-radio.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from 'react';\nimport { Box, Button, Card, Flex, Grid, Typo } from '@/atoms';\nimport { type CurriculumReviewQuestionRadio } from '@/types/curriculumContents.type'; \nimport { RadioButtonCard } from \"../../../../radio-button-card\";\nimport { ReviewQuestionContentHeader } from './review-comp';\n\ninterface ReviewQuestionRadioProps {\n question: CurriculumReviewQuestionRadio;\n answer: string;\n error?: string;\n onChange: (value: string) => void;\n}\n\nconst correctAnswerStyle: React.CSSProperties = {\n backgroundColor: 'var(--green-a2)',\n};\n\nfunction ReviewQuestionRadio(props: ReviewQuestionRadioProps): React.ReactNode {\n const { question, answer, onChange } = props;\n const [isCheckAnswer, setIsCheckAnswer] = useState(false);\n\n const checkAnswer = useCallback(() => {\n setIsCheckAnswer(true);\n }, []);\n\n const isCorrect = isCheckAnswer && Number(answer) === question.correctAnswer;\n const isWrong = isCheckAnswer && Number(answer) !== question.correctAnswer;\n const radioColor = useMemo(() => {\n if (isCorrect) return 'green';\n if (isWrong) return 'red';\n return undefined;\n }, [isCorrect, isWrong]);\n\n return (\n <Grid height=\"100%\" rows=\"auto 1fr\" width=\"100%\">\n <Card mb=\"4\" size=\"2\">\n <ReviewQuestionContentHeader\n icon={question.icon}\n question={question.question}\n title={question.title}\n type={question.type}\n />\n </Card>\n\n <Grid height=\"100%\" rows=\"1fr auto\" width=\"100%\">\n <Box position=\"relative\">\n <RadioButtonCard.Root\n color={radioColor}\n onValueChange={onChange}\n style={{\n width: '100%',\n height: '100%',\n overflowY: 'auto',\n position: 'absolute',\n }}\n value={answer}\n >\n <Flex direction=\"column\" gap=\"2\" width=\"100%\">\n {question.options.map((option, i) => {\n const isThisOptionCorrect =\n isCheckAnswer && i === question.correctAnswer;\n const isThisOptionSelected =\n isCheckAnswer && i === Number(answer);\n const isThisOptionWrong =\n isCheckAnswer &&\n isThisOptionSelected &&\n i !== question.correctAnswer;\n const style = (() => {\n if (isThisOptionCorrect) return correctAnswerStyle;\n return {};\n })();\n\n return (\n <RadioButtonCard.Item\n // eslint-disable-next-line react/no-array-index-key -- 조합 키로 중복 회피\n key={`${option.label}-${i}`}\n style={style}\n value={i.toString()}\n >\n <Box>\n <Typo as=\"p\">{option.label}</Typo>\n {isThisOptionCorrect ? (\n <Typo color=\"green\">정답입니다</Typo>\n ) : null}\n {isThisOptionWrong ? (\n <Typo color=\"red\">정답이 아닙니다</Typo>\n ) : null}\n </Box>\n </RadioButtonCard.Item>\n );\n })}\n </Flex>\n </RadioButtonCard.Root>\n </Box>\n <Flex justify=\"end\" mt=\"2\">\n <Button onClick={checkAnswer}>정답 확인</Button>\n </Flex>\n </Grid>\n </Grid>\n );\n}\n\nexport default ReviewQuestionRadio;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAgB,aAAa,SAAS,gBAAgB;AAoC9C,cA2CY,YA3CZ;AAvBR,IAAM,qBAA0C;AAAA,EAC9C,iBAAiB;AACnB;AAEA,SAAS,oBAAoB,OAAkD;AAC7E,QAAM,EAAE,UAAU,QAAQ,SAAS,IAAI;AACvC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,QAAM,cAAc,YAAY,MAAM;AACpC,qBAAiB,IAAI;AAAA,EACvB,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,iBAAiB,OAAO,MAAM,MAAM,SAAS;AAC/D,QAAM,UAAU,iBAAiB,OAAO,MAAM,MAAM,SAAS;AAC7D,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,UAAW,QAAO;AACtB,QAAI,QAAS,QAAO;AACpB,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,OAAO,CAAC;AAEvB,SACE,qBAAC,QAAK,QAAO,QAAO,MAAK,YAAW,OAAM,QACxC;AAAA,wBAAC,QAAK,IAAG,KAAI,MAAK,KAChB;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,SAAS;AAAA,QACf,UAAU,SAAS;AAAA,QACnB,OAAO,SAAS;AAAA,QAChB,MAAM,SAAS;AAAA;AAAA,IACjB,GACF;AAAA,IAEA,qBAAC,QAAK,QAAO,QAAO,MAAK,YAAW,OAAM,QACxC;AAAA,0BAAC,OAAI,UAAS,YACZ;AAAA,QAAC,gBAAgB;AAAA,QAAhB;AAAA,UACC,OAAO;AAAA,UACP,eAAe;AAAA,UACf,OAAO;AAAA,YACL,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,UAAU;AAAA,UACZ;AAAA,UACA,OAAO;AAAA,UAEP,8BAAC,QAAK,WAAU,UAAS,KAAI,KAAI,OAAM,QACpC,mBAAS,QAAQ,IAAI,CAAC,QAAQ,MAAM;AACnC,kBAAM,sBACJ,iBAAiB,MAAM,SAAS;AAClC,kBAAM,uBACJ,iBAAiB,MAAM,OAAO,MAAM;AACtC,kBAAM,oBACJ,iBACA,wBACA,MAAM,SAAS;AACjB,kBAAM,SAAS,MAAM;AACnB,kBAAI,oBAAqB,QAAO;AAChC,qBAAO,CAAC;AAAA,YACV,GAAG;AAEH,mBACE;AAAA,cAAC,gBAAgB;AAAA,cAAhB;AAAA,gBAGC;AAAA,gBACA,OAAO,EAAE,SAAS;AAAA,gBAElB,+BAAC,OACC;AAAA,sCAAC,QAAK,IAAG,KAAK,iBAAO,OAAM;AAAA,kBAC1B,sBACC,oBAAC,QAAK,OAAM,SAAQ,4CAAK,IACvB;AAAA,kBACH,oBACC,oBAAC,QAAK,OAAM,OAAM,yDAAQ,IACxB;AAAA,mBACN;AAAA;AAAA,cAZK,GAAG,OAAO,KAAK,IAAI,CAAC;AAAA,YAa3B;AAAA,UAEJ,CAAC,GACH;AAAA;AAAA,MACF,GACF;AAAA,MACA,oBAAC,QAAK,SAAQ,OAAM,IAAG,KACrB,8BAAC,UAAO,SAAS,aAAa,uCAAK,GACrC;AAAA,OACF;AAAA,KACF;AAEJ;AAEA,IAAO,gCAAQ;","names":[]}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import {
|
|
2
|
+
start_review_default
|
|
3
|
+
} from "./chunk-R77BOAW5.js";
|
|
4
|
+
import {
|
|
5
|
+
ReviewQuestion_default
|
|
6
|
+
} from "./chunk-LEUTTEBC.js";
|
|
7
|
+
import {
|
|
8
|
+
complete_review_default
|
|
9
|
+
} from "./chunk-H5UOKPYZ.js";
|
|
10
|
+
import {
|
|
11
|
+
CurriculumReviewProvider,
|
|
12
|
+
useCurriculumReviewContext
|
|
13
|
+
} from "./chunk-WZVJYDVP.js";
|
|
14
|
+
|
|
15
|
+
// src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.tsx
|
|
16
|
+
import { jsx } from "react/jsx-runtime";
|
|
17
|
+
function CurriculumReviewStepsInner() {
|
|
18
|
+
const {
|
|
19
|
+
formik,
|
|
20
|
+
step,
|
|
21
|
+
handleStart,
|
|
22
|
+
handleNext,
|
|
23
|
+
handlePrev,
|
|
24
|
+
onClickReviewMyAnswer,
|
|
25
|
+
handleSubmit,
|
|
26
|
+
currentQuestion,
|
|
27
|
+
currentAnswer,
|
|
28
|
+
currentError,
|
|
29
|
+
reviewContents,
|
|
30
|
+
handleAnswerChange
|
|
31
|
+
} = useCurriculumReviewContext();
|
|
32
|
+
const { questions } = reviewContents;
|
|
33
|
+
if (step === 0) {
|
|
34
|
+
return /* @__PURE__ */ jsx(start_review_default, { onStart: handleStart });
|
|
35
|
+
}
|
|
36
|
+
if (step > 0 && step <= questions.length && currentQuestion) {
|
|
37
|
+
return /* @__PURE__ */ jsx(
|
|
38
|
+
ReviewQuestion_default,
|
|
39
|
+
{
|
|
40
|
+
answer: currentAnswer,
|
|
41
|
+
error: currentError,
|
|
42
|
+
index: step - 1,
|
|
43
|
+
isLast: step === questions.length,
|
|
44
|
+
isLoading: formik.isSubmitting,
|
|
45
|
+
isNextDisabled: currentError !== void 0,
|
|
46
|
+
onChange: handleAnswerChange,
|
|
47
|
+
onNext: handleNext,
|
|
48
|
+
onPrev: handlePrev,
|
|
49
|
+
onSubmit: handleSubmit,
|
|
50
|
+
question: currentQuestion,
|
|
51
|
+
total: questions.length
|
|
52
|
+
}
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
return /* @__PURE__ */ jsx(complete_review_default, { onClickReviewMyAnswer });
|
|
56
|
+
}
|
|
57
|
+
function CurriculumReviewSteps({
|
|
58
|
+
contents,
|
|
59
|
+
title,
|
|
60
|
+
onClickEndReview,
|
|
61
|
+
onSubmit,
|
|
62
|
+
defaultValues,
|
|
63
|
+
curriculum,
|
|
64
|
+
onReviewValueChange,
|
|
65
|
+
mode,
|
|
66
|
+
done
|
|
67
|
+
}) {
|
|
68
|
+
return /* @__PURE__ */ jsx(
|
|
69
|
+
CurriculumReviewProvider,
|
|
70
|
+
{
|
|
71
|
+
curriculum,
|
|
72
|
+
defaultValues,
|
|
73
|
+
done,
|
|
74
|
+
mode,
|
|
75
|
+
onClickEndReview,
|
|
76
|
+
onReviewValueChange,
|
|
77
|
+
onSubmit,
|
|
78
|
+
reviewContents: contents,
|
|
79
|
+
sectionTitle: title,
|
|
80
|
+
children: /* @__PURE__ */ jsx(CurriculumReviewStepsInner, {})
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
}
|
|
84
|
+
var CurriculumReviewSteps_default = CurriculumReviewSteps;
|
|
85
|
+
|
|
86
|
+
export {
|
|
87
|
+
CurriculumReviewSteps_default
|
|
88
|
+
};
|
|
89
|
+
//# sourceMappingURL=chunk-7SAWHUJA.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/index.tsx"],"sourcesContent":["import React from 'react';\nimport { type CurriculumReviewContents } from '@/types/curriculumContents.type';\nimport type { Curriculum } from '@/types'; \nimport {\n CurriculumReviewProvider,\n useCurriculumReviewContext,\n} from './curriculum-review-context';\nimport StartReview from './start-review';\nimport CompleteReview from './complete-review';\nimport ReviewQuestion from './ReviewQuestion';\n \nfunction CurriculumReviewStepsInner(): React.ReactNode {\n const {\n formik,\n step,\n handleStart,\n handleNext,\n handlePrev,\n onClickReviewMyAnswer,\n handleSubmit,\n currentQuestion,\n currentAnswer,\n currentError,\n reviewContents,\n handleAnswerChange,\n } = useCurriculumReviewContext();\n const { questions } = reviewContents;\n\n if (step === 0) {\n return <StartReview onStart={handleStart} />;\n }\n if (step > 0 && step <= questions.length && currentQuestion) {\n return (\n <ReviewQuestion\n answer={currentAnswer}\n error={currentError}\n index={step - 1}\n isLast={step === questions.length}\n isLoading={formik.isSubmitting}\n isNextDisabled={currentError !== undefined}\n onChange={handleAnswerChange}\n onNext={handleNext}\n onPrev={handlePrev}\n onSubmit={handleSubmit}\n question={currentQuestion}\n total={questions.length}\n />\n );\n }\n return <CompleteReview onClickReviewMyAnswer={onClickReviewMyAnswer} />;\n}\n\ninterface CurriculumReviewStepsProps {\n contents: CurriculumReviewContents;\n title: string | undefined;\n onClickEndReview: () => void;\n onSubmit: (values: Record<string, string>) => Promise<boolean>;\n defaultValues?: Record<string, string>;\n curriculum: Curriculum;\n onReviewValueChange: ({\n reviewId,\n answer,\n }: {\n reviewId: string;\n answer: Record<string, string>;\n }) => void;\n mode: 'edit' | 'create';\n done: boolean; \n}\n\nfunction CurriculumReviewSteps({\n contents,\n title,\n onClickEndReview,\n onSubmit,\n defaultValues,\n curriculum,\n onReviewValueChange,\n mode,\n done,\n}: CurriculumReviewStepsProps): React.ReactNode { \n\n return (\n <CurriculumReviewProvider\n curriculum={curriculum}\n defaultValues={defaultValues}\n done={done}\n mode={mode}\n onClickEndReview={onClickEndReview}\n onReviewValueChange={onReviewValueChange}\n onSubmit={onSubmit}\n reviewContents={contents}\n sectionTitle={title}\n >\n <CurriculumReviewStepsInner />\n </CurriculumReviewProvider>\n );\n}\n\nexport default CurriculumReviewSteps;\n"],"mappings":";;;;;;;;;;;;;;;AA6BW;AAlBX,SAAS,6BAA8C;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,2BAA2B;AAC/B,QAAM,EAAE,UAAU,IAAI;AAEtB,MAAI,SAAS,GAAG;AACd,WAAO,oBAAC,wBAAY,SAAS,aAAa;AAAA,EAC5C;AACA,MAAI,OAAO,KAAK,QAAQ,UAAU,UAAU,iBAAiB;AAC3D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,OAAO,OAAO;AAAA,QACd,QAAQ,SAAS,UAAU;AAAA,QAC3B,WAAW,OAAO;AAAA,QAClB,gBAAgB,iBAAiB;AAAA,QACjC,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO,UAAU;AAAA;AAAA,IACnB;AAAA,EAEJ;AACA,SAAO,oBAAC,2BAAe,uBAA8C;AACvE;AAoBA,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgD;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,cAAc;AAAA,MAEd,8BAAC,8BAA2B;AAAA;AAAA,EAC9B;AAEJ;AAEA,IAAO,gCAAQ;","names":[]}
|