@edu-tosel/design 1.0.169 → 1.0.170

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.
@@ -37,5 +37,8 @@ export default function ProgressCardLG({ titles, checks, displays, theme, option
37
37
  ...option,
38
38
  width: "3xl",
39
39
  height: "2xs",
40
- }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title }, index) => (_jsxs("div", { className: cn(stepBox(checks[index])), children: [_jsx("div", { children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: theme })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-xl leading-none font-pretendard-bold ${text[theme ?? "green"]}`, children: titles.title }), _jsx("div", { className: "text-base leading-none", children: titles.subtitle })] }), _jsx("div", { className: "absolute bottom-0 left-0 bg-gray-light w-full h-2.5", children: _jsx("div", { className: `h-full ${widthSizes[occupied]} ${bg[theme ?? "green"]}` }) })] }));
40
+ }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title }, index) => (_jsxs("div", { className: cn(stepBox(checks[index])), children: [_jsx("div", { children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: theme })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-xl leading-none font-pretendard-bold ${text[theme ?? "green"]}`, children: titles.title }), _jsxs("div", { className: "flex gap-x-3", children: [_jsx("div", { className: "text-base leading-none", children: titles.subtitle }), titles && titles.link && (_jsx("div", { onClick: () => {
41
+ if (titles.link)
42
+ window.location.href = titles.link.path;
43
+ }, className: "text-base leading-none underline text-gray-medium", children: titles.link.title }))] })] }), _jsx("div", { className: "absolute bottom-0 left-0 bg-gray-light w-full h-2.5", children: _jsx("div", { className: `h-full ${widthSizes[occupied]} ${bg[theme ?? "green"]}` }) })] }));
41
44
  }
@@ -150,7 +150,12 @@ export interface RollCardProps extends Omit<CardProps, "disabled"> {
150
150
  disabled?: [boolean, OnClick];
151
151
  }
152
152
  export interface ProgressCardProps {
153
- titles: Titles;
153
+ titles: Titles & {
154
+ link?: {
155
+ title: string;
156
+ path: string;
157
+ };
158
+ };
154
159
  checks: boolean[];
155
160
  nowFocus?: number | boolean;
156
161
  displays: Titles[];
@@ -101,7 +101,7 @@ export function TableComponent() {
101
101
  const data = [
102
102
  {
103
103
  id: 1,
104
- level: "Cocon",
104
+ level: "Cocoon",
105
105
  age: "미취학 아동, 5-7세",
106
106
  info1: "Section1: 15문항/15분",
107
107
  info2: "Section2: 15문항/15분",
@@ -164,7 +164,7 @@ export function AnnualTableComponent() {
164
164
  examNumber: "86",
165
165
  dDay: "24.11.16",
166
166
  regStartDay: "24.08.19",
167
- regEndDay: "24.10.22",
167
+ regEndDay: "24.10.29",
168
168
  resultDay: "24.12.05",
169
169
  },
170
170
  {
@@ -172,28 +172,28 @@ export function AnnualTableComponent() {
172
172
  dDay: "25.02.15",
173
173
  regStartDay: "24.11.18",
174
174
  regEndDay: "25.01.21",
175
- resultDay: "24.03.06",
175
+ resultDay: "25.03.06",
176
176
  },
177
177
  {
178
178
  examNumber: "88",
179
179
  dDay: "25.05.17",
180
180
  regStartDay: "25.02.17",
181
181
  regEndDay: "25.04.22",
182
- resultDay: "24.06.05",
182
+ resultDay: "25.06.05",
183
183
  },
184
184
  {
185
185
  examNumber: "89",
186
186
  dDay: "25.08.23",
187
187
  regStartDay: "25.05.19",
188
188
  regEndDay: "25.07.22",
189
- resultDay: "24.09.04",
189
+ resultDay: "25.09.04",
190
190
  },
191
191
  {
192
192
  examNumber: "90",
193
193
  dDay: "25.11.15",
194
194
  regStartDay: "25.08.25",
195
195
  regEndDay: "25.10.21",
196
- resultDay: "24.12.04",
196
+ resultDay: "25.12.04",
197
197
  },
198
198
  ];
199
199
  return (_jsx("div", { className: "overflow-auto w-full scrollbar-hidden rounded-lg", children: _jsxs("div", { className: "min-w-[480px] w-full", children: [_jsxs("div", { className: "flex bg-gradient-to-r from-green-dark to-crimson-burgundy text-white font-semibold text-sm", children: [_jsx("div", { className: "sticky left-0 bg-green-dark p-2 flex-[1] shadow-main", children: "\uD68C\uCC28" }), _jsx("div", { className: "p-2 flex-[2]", children: "\uC2DC\uD5D8\uC77C\uC790" }), _jsx("div", { className: "p-2 flex-[3]", children: "\uC811\uC218\uAE30\uAC04" }), _jsx("div", { className: "p-2 flex-[2]", children: "\uC131\uC801\uBC1C\uD45C" })] }), data.map((item) => (_jsxs("div", { className: "flex bg-white/60 font-medium text-sm text-gray-medium ", children: [_jsxs("div", { className: "sticky left-0 bg-white/90 p-2 flex-[1] text-gray-dark border-green-dark border-r-1", children: [item.examNumber, "\uD68C"] }), _jsx("div", { className: "p-2 flex-[2] text-green-dark font-bold", children: item.dDay }), _jsxs("div", { className: "p-2 flex-[3] flex-col", children: [item.regStartDay, " ~ ", item.regEndDay] }), _jsx("div", { className: "p-2 flex-[2]", children: item.resultDay })] }, item.examNumber)))] }) }));
@@ -9,5 +9,5 @@ export default function RegexamLayout() {
9
9
  textoptions: "break-keep antialiased",
10
10
  cursor: "cursor-default",
11
11
  };
12
- return (_jsxs("div", { className: cn(container), children: [_jsx(Regexam.Banner, {}), _jsx(Regexam.Evaluation, {}), _jsx(Regexam.OfflineExam, {})] }));
12
+ return (_jsxs("div", { className: cn(container), children: [_jsx(Regexam.Banner, {}), _jsx(Regexam.Evaluation, {}), _jsx(Regexam.OfflineExam, {}), _jsx(Regexam.Types, {})] }));
13
13
  }
@@ -0,0 +1 @@
1
+ export default function Types(): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,313 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useEffect, useRef, useState } from "react";
3
+ import { cn } from "../../../util";
4
+ import { useActionStore } from "../../../store";
5
+ import Action from "../Action";
6
+ import { ConfirmModal } from "../../../modal";
7
+ import { useResponsive } from "../../../hook";
8
+ export default function Types() {
9
+ const scrollContainerRef = useRef(null);
10
+ const cardWidth = 400; // card width
11
+ const handleScroll = (direction) => {
12
+ if (scrollContainerRef.current) {
13
+ const scrollAmount = cardWidth;
14
+ const currentScrollLeft = scrollContainerRef.current.scrollLeft;
15
+ const newScrollLeft = direction === "left"
16
+ ? Math.max(currentScrollLeft - scrollAmount, 0)
17
+ : currentScrollLeft + scrollAmount;
18
+ scrollContainerRef.current.scrollTo({
19
+ left: newScrollLeft,
20
+ behavior: "smooth",
21
+ });
22
+ }
23
+ };
24
+ const container = {
25
+ positions: "relative z-10 group pt-10 md:pt-20",
26
+ displays: "flex flex-col min-h-screen w-full max-w-screen",
27
+ textstyles: "break-keep antialiased font-pretendard-var",
28
+ backgrounds: "bg-gradient-to-tr from-crimson-burgundy to-green-dark",
29
+ };
30
+ const deckTitlePositioning = {
31
+ displays: "flex flex-col justify-center items-start",
32
+ sizes: "w-full max-w-6xl ",
33
+ };
34
+ const deckTitle = {
35
+ textstyles: "text-center text-white font-pretendard-bold text-xl xxs:text-2xl lg:text-3xl",
36
+ animations: "duration-300",
37
+ };
38
+ const subTitle = {
39
+ textstyles: "text-xs sm:text-sm md:text-base font-pretendard-medium text-white",
40
+ animations: "duration-300",
41
+ spacings: "mb-10",
42
+ };
43
+ const cardPositioning = {
44
+ displays: "flex flex-nowrap",
45
+ sizes: "w-full",
46
+ };
47
+ const cardWrapper = {
48
+ sizes: "w-full overflow-x-auto scroll-smooth scrollbar-hidden scroll-px-[20px]",
49
+ display: "flex flex-nowrap vertical-top",
50
+ spacings: "px-5 pt-4 md:pt-6 pb-12",
51
+ snap: "snap-x snap-mandatory scroll-ms-0",
52
+ };
53
+ //adjust the responsive right margin of scroller
54
+ const cardDeck = {
55
+ displays: "inline-flex",
56
+ spacings: "gap-5 mr-0 md:mr-[56px] xl:mr-[calc(100vw-1200px)]",
57
+ };
58
+ const buttonPositioning = {
59
+ displays: "hidden flex-row md:flex",
60
+ sizes: "w-full h-full",
61
+ spacings: "xl:pl-[calc(50vw-600px)] md:pl-[62px] pl-2 pr-2",
62
+ positions: "absolute top-0 left-0 justify-between items-center opacity-0 group-hover:opacity-100 duration-300",
63
+ hovering: "group pointer-events-none",
64
+ };
65
+ const hoverButton = {
66
+ sizes: "rounded-full w-12 h-12 scale-50 group-hover:scale-100",
67
+ animation: "duration-300 ",
68
+ test: "bg-gray-medium/20 hover:bg-gray-medium/50 pointer-events-auto backdrop-blur-sm fill-red-500",
69
+ };
70
+ return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "flex justify-center items-center px-5", children: _jsxs("div", { className: cn(deckTitlePositioning), children: [_jsx("div", { className: cn(deckTitle), children: "\uB098\uC5D0\uAC8C \uB9DE\uB294 \uC2DC\uD5D8\uC740?" }), _jsx("div", { className: cn(subTitle), children: "\uD1A0\uC140\uC740 \uB2E4\uC591\uD55C \uBC29\uC2DD\uC73C\uB85C \uC815\uAE30\uC2DC\uD5D8\uACFC \uB3D9\uC77C\uD55C \uC218\uC900\uC758 \uC2DC\uD5D8\uC744 \uC81C\uACF5\uD558\uACE0 \uC788\uC5B4\uC694." }), _jsx("div", { className: "h-0.5 w-1/4 mb-8 bg-white rounded-lg" })] }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: Object.entries(examStyles).map(([key, { id, type, name, place, isHallofFame, report, certificate, majorColor, link, imgSrc, buttonText, mainPrice, subPrice, cocoonPrice, },]) => (_jsx(ExamCard, { id: id, type: type, name: name, place: place, isHallofFame: isHallofFame, report: report, certificate: certificate, majorColor: majorColor, link: link, imgSrc: imgSrc, buttonText: buttonText, mainPrice: mainPrice, subPrice: subPrice, cocoonPrice: cocoonPrice }, key))) }) }) }), _jsxs("div", { className: cn(buttonPositioning), children: [_jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("left"), children: _jsx("img", { src: "images/home/handle-left.svg", alt: "" }) }), _jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("right"), children: _jsx("img", { src: "images/home/handle-right.svg", alt: "" }) })] })] }));
71
+ }
72
+ const examStyles = {
73
+ regPerOfficial: {
74
+ id: "1",
75
+ type: "개인접수",
76
+ name: "고사장 정기시험",
77
+ place: "고사장에서 진행되는 정기시험",
78
+ isHallofFame: true,
79
+ report: "기본제공",
80
+ certificate: "3,900원",
81
+ link: "https://new.tosel.org/dashboard/user/applications",
82
+ majorColor: "text-crimson-burgundy bg-crimson-burgundy",
83
+ imgSrc: "https://resource.tosel.co.kr/images/img-buidling-official.png",
84
+ buttonText: "개인 접수하기",
85
+ mainPrice: "33,000원",
86
+ subPrice: "39,000원",
87
+ },
88
+ regPerHome: {
89
+ id: "2",
90
+ type: "개인접수",
91
+ name: "가정 시험",
92
+ place: "집에서 보는 정기시험",
93
+ isHallofFame: false,
94
+ report: "기본제공",
95
+ certificate: "7800원",
96
+ majorColor: "text-crimson-burgundy bg-crimson-burgundy",
97
+ imgSrc: "https://resource.tosel.co.kr/images/img-buidling-home.png",
98
+ mainPrice: "33,000원",
99
+ subPrice: "39,000원",
100
+ },
101
+ regGrpOfficial: {
102
+ id: "3",
103
+ type: "단체접수",
104
+ name: "고사장 정기시험",
105
+ place: "고사장에서 진행되는 정기시험",
106
+ isHallofFame: true,
107
+ report: "기본제공",
108
+ certificate: "기본제공",
109
+ link: "https://new.tosel.org/dashboard/academy/applications",
110
+ majorColor: "text-green-dark bg-green-dark",
111
+ imgSrc: "https://resource.tosel.co.kr/images/img-buidling-official.png",
112
+ buttonText: "단체 접수하기",
113
+ mainPrice: "33,000원",
114
+ subPrice: "39,000원",
115
+ },
116
+ regGrpOrganization: {
117
+ id: "4",
118
+ type: "단체접수",
119
+ name: "학원 정기시험",
120
+ place: "학원에서 진행되는 정기시험",
121
+ isHallofFame: false,
122
+ report: "기본제공",
123
+ certificate: "기본제공",
124
+ majorColor: "text-green-dark bg-green-dark",
125
+ imgSrc: "https://resource.tosel.co.kr/images/img-buidling-academy.png",
126
+ mainPrice: "33,000원",
127
+ subPrice: "39,000원",
128
+ },
129
+ nrgGrpOrganization: {
130
+ id: "5",
131
+ type: "단체접수",
132
+ name: "기관 시험",
133
+ place: "기관에서 비정기적으로 실시하는 시험",
134
+ isHallofFame: false,
135
+ report: "기본제공",
136
+ certificate: "미제공",
137
+ link: "https://old.tosel.co.kr/new/receipt/institution",
138
+ majorColor: "text-green-dark bg-green-dark",
139
+ imgSrc: "https://resource.tosel.co.kr/images/img-buidling-academy.png",
140
+ buttonText: "기관시험 신청하기",
141
+ mainPrice: "33,000원",
142
+ subPrice: "39,000원",
143
+ cocoonPrice: "29,000원",
144
+ },
145
+ regGrpLab: {
146
+ id: "6",
147
+ type: "Lab",
148
+ name: "토셀 랩 특별시험",
149
+ place: "지정교육기관에서 진행되는 정기시험",
150
+ isHallofFame: true,
151
+ report: "고도화 성적표",
152
+ certificate: "기본제공",
153
+ link: "https://labentry.tosel.co.kr/",
154
+ imgSrc: "https://resource.tosel.co.kr/images/img-buidling-Lab.png",
155
+ buttonText: "더 알아보기",
156
+ mainPrice: "33,000원",
157
+ subPrice: "39,000원",
158
+ },
159
+ };
160
+ const ExamCard = ({ id, type, name, place, isHallofFame, report, certificate, majorColor, link, imgSrc, buttonText, mainPrice, subPrice, cocoonPrice, }) => {
161
+ const [isVisible, setIsVisible] = useState(false);
162
+ const imgRef = useRef(null);
163
+ const { setModal } = useActionStore();
164
+ const isMD = useResponsive("md");
165
+ useEffect(() => {
166
+ const observer = new IntersectionObserver((entries) => {
167
+ entries.forEach((entry) => {
168
+ if (entry.isIntersecting) {
169
+ setIsVisible(true);
170
+ observer.disconnect();
171
+ }
172
+ });
173
+ }, { threshold: 0.1 });
174
+ if (imgRef.current) {
175
+ observer.observe(imgRef.current);
176
+ }
177
+ return () => {
178
+ if (imgRef.current) {
179
+ observer.unobserve(imgRef.current);
180
+ }
181
+ };
182
+ }, []);
183
+ const ghostCard = {
184
+ displays: "flex flex-col gap-5",
185
+ spacings: "ms-0 ps-0 ",
186
+ scroll: "snap-start",
187
+ };
188
+ //adjust the responsive left margin of scroller
189
+ //adjust the card size
190
+ const card = {
191
+ graphics: "group/card",
192
+ sizes: "h-100 w-65 xxxs:w-76 md:w-100 md:h-125 rounded-xl md:rounded-2xl",
193
+ hover: " hover:scale-[1.03]",
194
+ position: "xl:translate-x-[calc(50vw-600px)] md:translate-x-[56px]",
195
+ transition: "duration-300",
196
+ displays: "relative display-block overflow-hidden",
197
+ fonts: "font-pretendard-var",
198
+ };
199
+ const imageWrapper = {
200
+ sizes: "w-full h-full p-10",
201
+ displays: "absolute flex justify-center items-start",
202
+ positions: "top-0 left-0",
203
+ background: "bg-white",
204
+ };
205
+ const contentsWrapper = {
206
+ sizes: "w-full h-full",
207
+ displays: "relative flex flex-col gap-4 justify-between items-start",
208
+ spacings: "p-4 md:p-8",
209
+ };
210
+ const headline = {
211
+ displays: "flex flex-row justify-between",
212
+ sizes: "w-full",
213
+ };
214
+ const typetag = {
215
+ sizes: "w-fit h-fit rounded-md",
216
+ displays: "flex justify-center items-center",
217
+ spacings: "p-2",
218
+ backgrounds: majorColor ?? "bg-blue-navy",
219
+ text: "font-bold text-sm text-white",
220
+ };
221
+ const titleWrapper = {
222
+ displays: "flex flex-col justify-center items-start gap-0",
223
+ sizes: "w-full",
224
+ };
225
+ const title = {
226
+ textStyles: "text-lg font-bold",
227
+ textColor: "text-gray-dark",
228
+ sizes: "w-fit h-fit rounded-md",
229
+ };
230
+ const subtitle = {
231
+ textStyles: "text-sm font-medium",
232
+ textColor: "text-gray-medium",
233
+ };
234
+ const bottomWrapper = {
235
+ display: "flex flex-col gap-4 w-full",
236
+ };
237
+ const bottomBoxWrapper = {
238
+ display: "flex flex-col xxxs:flex-row justify-between items-center h-fit w-full gap-4",
239
+ };
240
+ const bottomBox = {
241
+ displays: "flex flex-row",
242
+ sizes: "w-full h-fit xxxs:min-h-20 rounded-xl",
243
+ backgrounds: "bg-gray-light/50",
244
+ textStyle: "text-gray-medium",
245
+ spacings: "p-3",
246
+ };
247
+ const boxContentsWrapper = {
248
+ displays: "flex flex-row xxxs:flex-col gap-4 xxxs:gap-0",
249
+ };
250
+ const miniTitle = {
251
+ textStyles: "font-bold text-sm",
252
+ };
253
+ const button = {
254
+ displays: "flex justify-center items-center",
255
+ sizes: "h-12 w-full rounded-lg ",
256
+ positions: "xl:translate-x-[calc(50vw-600px)] md:translate-x-[56px]",
257
+ backgrounds: majorColor ? "bg-green-light" : "bg-blue-navy-light",
258
+ textColors: majorColor ? "text-green-dark" : "text-blue-navy",
259
+ animations: "duration-300 hover:scale-[1.03] hover:text-white",
260
+ optional: majorColor ? "hover:bg-green-dark" : "hover:bg-blue-navy",
261
+ };
262
+ const buttonTextStyle = {
263
+ textStyles: "font-bold text-base text-center align-bottom",
264
+ };
265
+ const modalContentsWrapper = {
266
+ displyas: "flex flex-col justify-between gap-5",
267
+ sizes: "w-full h-65",
268
+ };
269
+ return (_jsx(Action.Show, { actions: [
270
+ [
271
+ id,
272
+ _jsx(ConfirmModal, { titles: {
273
+ title: "단체 서비스 안내",
274
+ }, widgets: [
275
+ {
276
+ data: (_jsxs("div", { className: cn(modalContentsWrapper), children: [_jsxs("div", { className: "break-keep h-full w-full flex flex-col p-5 justify-center text-center text-base items-center bg-gray-light/50 rounded-lg", children: [_jsx("div", { className: "mb-8", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", className: "size-12 stroke-green-dark/80", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75" }) }) }), _jsxs("span", { children: ["\uB2E8\uCCB4 \uC11C\uBE44\uC2A4 \uC774\uC6A9\uC744 \uC704\uD574\uC11C\uB294", " ", _jsx("span", { className: "text-green-dark font-bold", children: "\uB2E8\uCCB4 \uB4F1\uB85D" }), "\uC774 \uD544\uC694\uD574\uC694! ", _jsx("br", {}), "\uC544\uC9C1 \uB4F1\uB85D\uD558\uC9C0 \uC54A\uC558\uB2E4\uBA74, \uC0AC\uC5C5\uC790\uB4F1\uB85D\uC99D\uC744 \uC900\uBE44\uD558\uACE0 \uB2E8\uCCB4 \uB4F1\uB85D\uC744 \uC9C4\uD589\uD574\uC8FC\uC138\uC694"] })] }), _jsxs("div", { className: "flex flex-row text-xs", children: [_jsx("div", { className: "w-full text-center", children: "\uC544\uC9C1 \uAE30\uAD00 \uB4F1\uB85D\uC744 \uC548\uD588\uB2E4\uBA74?" }), _jsx("div", { className: "w-full text-center", children: "\uC774\uBBF8 \uB2E8\uCCB4\uB4F1\uB85D\uC744 \uD588\uB2E4\uBA74?" })] })] })),
277
+ },
278
+ ], buttons: [
279
+ {
280
+ title: "등록하기",
281
+ onClick: () => {
282
+ window.location.href =
283
+ "https://new.tosel.org/sign-up/academy";
284
+ },
285
+ option: {
286
+ text: "font-pretendard-var font-medium text-green-dark",
287
+ background: "bg-green-light",
288
+ },
289
+ },
290
+ {
291
+ title: "단체 접수하기",
292
+ onClick: () => {
293
+ link && (window.location.href = link);
294
+ },
295
+ option: {
296
+ text: "font-pretendard-var font-medium text-white",
297
+ background: "bg-green-dark",
298
+ },
299
+ },
300
+ ] }),
301
+ ],
302
+ ], children: _jsxs("div", { className: cn(ghostCard), children: [_jsxs("div", { className: cn(card), children: [_jsx("div", { className: cn(imageWrapper), children: _jsx("div", { className: "h-20 xxxs:h-30 md:h-40 flex mt-10 md:mt-16", children: _jsx("img", { ref: imgRef, src: imgSrc, alt: "", className: cn("max-w-full h-auto transform transition-all duration-1000 delay-0 ease-in-out", isVisible
303
+ ? "translate-y-0 opacity-100"
304
+ : "translate-y-10 opacity-0") }) }) }), _jsxs("div", { className: cn(contentsWrapper), children: [_jsxs("div", { className: cn(headline), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(title), children: name }), _jsx("div", { className: cn(subtitle), children: place })] }), _jsx("div", { className: cn(typetag), children: type })] }), _jsxs("div", { className: cn(bottomWrapper), children: [_jsxs("div", { className: cn(bottomBox), children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "size-6", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" }) }) }), _jsxs("div", { className: cn(boxContentsWrapper, "ml-2"), children: [_jsx("div", { className: cn(miniTitle), children: "\uC751\uC2DC\uB8CC" }), _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { children: cocoonPrice && (_jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["cocoon: ", cocoonPrice] })) }), _jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["Pre-Starter ~ Junior: ", mainPrice] }), _jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["High Junior: ", subPrice] })] })] })] }), _jsxs("div", { className: cn(bottomBoxWrapper), children: [_jsxs("div", { className: cn(bottomBox, isHallofFame ? "bg-green-light" : "bg-crimson-burgundy/20"), children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: cn(isHallofFame
305
+ ? "size-6 fill-yellow-500"
306
+ : "size-6 fill-gray-medium"), children: _jsx("path", { "fill-rule": "evenodd", d: "M5.166 2.621v.858c-1.035.148-2.059.33-3.071.543a.75.75 0 0 0-.584.859 6.753 6.753 0 0 0 6.138 5.6 6.73 6.73 0 0 0 2.743 1.346A6.707 6.707 0 0 1 9.279 15H8.54c-1.036 0-1.875.84-1.875 1.875V19.5h-.75a2.25 2.25 0 0 0-2.25 2.25c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-2.25-2.25h-.75v-2.625c0-1.036-.84-1.875-1.875-1.875h-.739a6.706 6.706 0 0 1-1.112-3.173 6.73 6.73 0 0 0 2.743-1.347 6.753 6.753 0 0 0 6.139-5.6.75.75 0 0 0-.585-.858 47.077 47.077 0 0 0-3.07-.543V2.62a.75.75 0 0 0-.658-.744 49.22 49.22 0 0 0-6.093-.377c-2.063 0-4.096.128-6.093.377a.75.75 0 0 0-.657.744Zm0 2.629c0 1.196.312 2.32.857 3.294A5.266 5.266 0 0 1 3.16 5.337a45.6 45.6 0 0 1 2.006-.343v.256Zm13.5 0v-.256c.674.1 1.343.214 2.006.343a5.265 5.265 0 0 1-2.863 3.207 6.72 6.72 0 0 0 .857-3.294Z", "clip-rule": "evenodd" }) }) }), _jsxs("div", { className: cn(boxContentsWrapper, "ml-2"), children: [_jsx("div", { className: cn(miniTitle), children: "\uBA85\uC608\uC758 \uC804\uB2F9" }), isHallofFame ? (_jsx("div", { className: "text-base text-green-dark font-bold", children: "\uB4F1\uC7AC \uAC00\uB2A5" })) : (_jsx("div", { className: "text-base text-crimson-burgundy font-bold", children: "\uB4F1\uC7AC \uBD88\uAC00" }))] })] }), _jsx("div", { className: cn(bottomBox), children: _jsxs("div", { className: cn(boxContentsWrapper), children: [_jsx("div", { className: cn(miniTitle), children: "\uC131\uC801\uD45C \uBC0F \uC778\uC99D\uC11C" }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["\uC131\uC801\uD45C: ", report] }), _jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["\uC778\uC99D\uC11C: ", certificate] })] })] }) })] })] })] })] }), link && (_jsx("div", { className: cn(button), onClick: () => {
307
+ !isMD
308
+ ? alert("모바일 환경입니다. 웹에서 접수해주세요")
309
+ : "3" === id // "단체접수" === type 기관시험 접수가 구현되면 교체해주세요
310
+ ? setModal(id)
311
+ : (window.location.href = link);
312
+ }, children: _jsx("div", { className: cn(buttonTextStyle), children: buttonText }) }))] }) }));
313
+ };
@@ -1,9 +1,11 @@
1
1
  import Banner from "./Banner";
2
2
  import Evaluation from "./Evaluation";
3
3
  import OfflineExam from "./OfflineExam";
4
+ import Types from "./Types";
4
5
  declare const Regexam: {
5
6
  Banner: typeof Banner;
6
7
  Evaluation: typeof Evaluation;
7
8
  OfflineExam: typeof OfflineExam;
9
+ Types: typeof Types;
8
10
  };
9
11
  export default Regexam;
@@ -1,9 +1,11 @@
1
1
  import Banner from "./Banner";
2
2
  import Evaluation from "./Evaluation";
3
3
  import OfflineExam from "./OfflineExam";
4
+ import Types from "./Types";
4
5
  const Regexam = {
5
6
  Banner,
6
7
  Evaluation,
7
8
  OfflineExam,
9
+ Types,
8
10
  };
9
11
  export default Regexam;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@edu-tosel/design",
3
- "version": "1.0.169",
3
+ "version": "1.0.170",
4
4
  "description": "UI components for International TOSEL Committee",
5
5
  "keywords": [
6
6
  "jsx",
package/version.txt CHANGED
@@ -1 +1 @@
1
- 1.0.169
1
+ 1.0.170