@edu-tosel/design 1.0.194 → 1.0.195
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/layout/template/Books/SectionA.js +149 -43
- package/package.json +1 -1
- package/version.txt +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useRef } from "react";
|
|
3
3
|
import gsap from "gsap";
|
|
4
4
|
import ScrollTrigger from "gsap/ScrollTrigger";
|
|
@@ -14,57 +14,115 @@ const bookData = [
|
|
|
14
14
|
description: "Reading 학습을 위한 토셀의 학습 시리즈입니다. 독해 & 실용문 연습을 위한 지문과 Comprehension 문항이 수록되어, 이해도 확인 및 정확한 진단이 가능합니다. 숙지한 독해 지문을 원어민 음성으로 들으며 리딩을 위한 완벽한 학습 커리큘럼을 마련해보세요.",
|
|
15
15
|
levelLow: "PS",
|
|
16
16
|
levelHigh: "HJ",
|
|
17
|
-
link: "",
|
|
17
|
+
link: "https://smartstore.naver.com/tosel/category/bde68e05417e4db99a86ebbd4aa3e925?cp=1",
|
|
18
18
|
},
|
|
19
19
|
{
|
|
20
20
|
id: 2,
|
|
21
21
|
type: "학습 시리즈",
|
|
22
22
|
title: "Story Series",
|
|
23
|
-
imgSrc: "https://resource.tosel.co.kr/images/
|
|
24
|
-
description: "이야기 지문과 단어를 함께 연결지어 학생들의 독해 능력을
|
|
23
|
+
imgSrc: "https://resource.tosel.co.kr/images/book_mockup_SY1_BA.png",
|
|
24
|
+
description: "독해능력을 기를 수 있는 Story Series 입니다. 이야기 지문과 단어를 함께 연결지어 학생들의 독해 능력을 평가합니다. 재미있는 스토리와 함께 다양한 문제를 풀어가며 독해실력을 집중적으로 향상시켜 보세요.",
|
|
25
25
|
levelLow: "PS",
|
|
26
|
-
levelHigh: "
|
|
27
|
-
link: "",
|
|
26
|
+
levelHigh: "HJ",
|
|
27
|
+
link: "https://smartstore.naver.com/tosel/category/cd8df3ab036942f7a3ea6e14a7ab3a9a?cp=1",
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
id: 3,
|
|
31
31
|
type: "학습 시리즈",
|
|
32
32
|
title: "Listening Series",
|
|
33
|
-
imgSrc: "https://resource.tosel.co.kr/images/
|
|
34
|
-
description: "
|
|
33
|
+
imgSrc: "https://resource.tosel.co.kr/images/LSJU_mockup.png",
|
|
34
|
+
description: "Listening을 익힐수 있는 토셀의 학습교재 입니다. 초등/중등 교과과정을 연계한 말하기&듣기 학습을 세분화된 레벨로 만나보세요. 기출문제 연습과 최신 수능 출제 문법을 포함하여, 수능/내신 대비가 가능합니다.",
|
|
35
35
|
levelLow: "PS",
|
|
36
36
|
levelHigh: "HJ",
|
|
37
|
-
link: "",
|
|
37
|
+
link: "https://smartstore.naver.com/tosel/category/2f11488810464cb5bbe77b004965f4ae?cp=1",
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
id: 4,
|
|
41
41
|
type: "학습 시리즈",
|
|
42
|
-
title: "
|
|
43
|
-
imgSrc: "https://resource.tosel.co.kr/images/
|
|
44
|
-
description: "
|
|
42
|
+
title: "Speaking Series",
|
|
43
|
+
imgSrc: "https://resource.tosel.co.kr/images/book_mockup_SP_PS.png",
|
|
44
|
+
description: "2024년 출간된 토셀의 Speaking 학습 교재입니다. 레벨에 맞게 문장 구성요소를 단계적으로 학습할 수 있도록 구성되어있습니다. 실제 TOSEL 시험의 빈출 문항은 물론, Grammar, Voca, Listening 교재와의 높은 연계율을 고려하여 고안되었습니다.",
|
|
45
45
|
levelLow: "PS",
|
|
46
46
|
levelHigh: "HJ",
|
|
47
|
-
link: "",
|
|
47
|
+
link: "https://smartstore.naver.com/tosel/category/28dc52dc67a3443ea010812d40accb69?cp=1",
|
|
48
48
|
},
|
|
49
49
|
{
|
|
50
50
|
id: 5,
|
|
51
51
|
type: "학습 시리즈",
|
|
52
52
|
title: "Grammar Series",
|
|
53
|
-
imgSrc: "https://resource.tosel.co.kr/images/
|
|
54
|
-
description: "
|
|
53
|
+
imgSrc: "https://resource.tosel.co.kr/images/book_mockup_GR1_ST.png",
|
|
54
|
+
description: "초등/중등 교과과정과 연계된 문법을 다룬 학습 시리즈입니다. TOSEL 기출문제와 최신 수능 출제 문법을 포함해 수능/내신을 대비할 수 있습니다. 또한 신전 감각 향상과 점검을 위한 기출 문제가 같이 수록되어있어 개념 학습부터 실전 응용까지 다룰 수 있는 교재입니다.",
|
|
55
55
|
levelLow: "PS",
|
|
56
56
|
levelHigh: "HJ",
|
|
57
|
-
link: "",
|
|
57
|
+
link: "https://smartstore.naver.com/tosel/category/c88067049a904b8e8d78ada305b2779b?cp=1",
|
|
58
58
|
},
|
|
59
59
|
{
|
|
60
60
|
id: 6,
|
|
61
61
|
type: "학습 시리즈",
|
|
62
62
|
title: "VOCA Series",
|
|
63
|
-
imgSrc: "https://resource.tosel.co.kr/images/
|
|
64
|
-
description: "
|
|
63
|
+
imgSrc: "https://resource.tosel.co.kr/images/book_mockup_VC_HJ_noshadow.png",
|
|
64
|
+
description: "단어 학습을 위한 학습교재 시리즈입니다. TOSEL 시험을 기준으로 빈출 지표를 활용한 예문과 문제가 구성되어있습니다. 실제 TOSEL 지문을 예문으로 활용하여 보다 실용적인 연계 학습 환경을 제공합니다. ",
|
|
65
|
+
levelLow: "PS",
|
|
66
|
+
levelHigh: "HJ",
|
|
67
|
+
link: "https://smartstore.naver.com/tosel/category/78551dca50de4636bc212c46543d4137?cp=1",
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
id: 7,
|
|
71
|
+
type: "시험 대비 교재",
|
|
72
|
+
title: "유형분석집",
|
|
73
|
+
imgSrc: "https://resource.tosel.co.kr/images/book_mockup_YH1_ST.png",
|
|
74
|
+
description: "최근 TOSEL 시험의 문항들을 유형별로 소개하는 지침서입니다. 국내외 15,000여개 학교/학원 단체 응시 인원 중 엄선한 100만명 이상의 성적 데이터를 기반으로 속성 분석 프로그램을 이용해 문제 유형을 분류하였습니다.",
|
|
75
|
+
levelLow: "PS",
|
|
76
|
+
levelHigh: "HJ",
|
|
77
|
+
link: "https://smartstore.naver.com/tosel/category/00590516c9ea4041b17bcea6527850ed?cp=1",
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
id: 8,
|
|
81
|
+
type: "시험 대비 교재",
|
|
82
|
+
title: "예상문제집",
|
|
83
|
+
imgSrc: "https://resource.tosel.co.kr/images/book_mockup_YS_JR.png",
|
|
84
|
+
description: "TOSEL의 최신 유형을 반영한 실전 모의고사가 5회 수록된 시험대비 교재입니다. TOSEL 기출문제 중 정답률에 따라 분류하여 평이한 정답률을 가진 문항으로 구성되어 있습니다. 필수 어휘를 포함한 모의고사 빈출 어휘가 수록되어 있어, 일반적인 시험 문제에 대비할 수 있습니다.",
|
|
85
|
+
levelLow: "PS",
|
|
86
|
+
levelHigh: "JR",
|
|
87
|
+
link: "https://smartstore.naver.com/tosel/category/263ed55441ee47fc994b7e2e7d77c37f?cp=1",
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
id: 9,
|
|
91
|
+
type: "시험 대비 교재",
|
|
92
|
+
title: "실전문제집 1 & 2",
|
|
93
|
+
imgSrc: "https://resource.tosel.co.kr/images/book_mockup_SJ2_BA.png",
|
|
94
|
+
description: "TOSEL의 최신 유형을 반영한 실전 모의고사가 5회 수록된 시험대비 교재입니다. 실전 감각 향상을 고려하여 난이별 TOSEL 출제 문항이 수록되어있습니다. 필수 어휘를 포함한 모의고사 빈출 어휘가 수록되어 있어, 일반적인 시험 문제에 대비할 수 있습니다.",
|
|
65
95
|
levelLow: "PS",
|
|
66
96
|
levelHigh: "HJ",
|
|
67
|
-
link: "",
|
|
97
|
+
link: "https://smartstore.naver.com/tosel/category/50ea23099a1344d99b0902bfb65305aa?cp=1",
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
id: 10,
|
|
101
|
+
type: "시험 대비 교재",
|
|
102
|
+
title: "심화문제집",
|
|
103
|
+
imgSrc: "https://resource.tosel.co.kr/images/book_mockup_SH_ST.png",
|
|
104
|
+
description: "응시생들이 가장 많이 틀린 최신 유형이 수록된 모의고사 5회 분량의 문제집입니다. 실제 정답률 분석을 통해 다수의 수험자가 오답을 선택한 핵심 원인이 설명되어 있으며, 심화 문제 및 만점 전략을 제시합니다. ",
|
|
105
|
+
levelLow: "PS",
|
|
106
|
+
levelHigh: "JR",
|
|
107
|
+
link: "https://smartstore.naver.com/tosel/category/f3c92dd261b7497aace96620f760aacd?cp=1",
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
id: 11,
|
|
111
|
+
type: "시험 대비 교재",
|
|
112
|
+
title: "Cocoon 유형분석집",
|
|
113
|
+
imgSrc: "https://resource.tosel.co.kr/images/book_mockup_YH_CO.png",
|
|
114
|
+
description: "코쿤은 한국의 교육 커리큘럼에 맞는 TOSEL 시험평가제도의 시작단계입니다. 연령예 맞는 시험문제 구성으로 5-7세의 미취학 아동들이 즐겁게 학습할 수 있도록 구성한 교재입니다. 다른 TOSEL 시험과 마찬가지로 실제 Cocoon을 응시할 경우 성적분석자료를 제공합니다.",
|
|
115
|
+
levelLow: "CO",
|
|
116
|
+
link: "https://smartstore.naver.com/tosel/products/6654890597",
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
id: 12,
|
|
120
|
+
type: "시험 대비 교재",
|
|
121
|
+
title: "Advanced 공식실전서",
|
|
122
|
+
imgSrc: "https://resource.tosel.co.kr/images/book_mockup_GS_AD.png",
|
|
123
|
+
description: "대학 편입학/졸업자격, 공무원 임용, 기업체 및 국가자격증 시험 등에 반영되는 TOSEL Advanced 시험의 공식 실전서입니다. 삽입된 OMR 부록을 활용해 실제 시험상황과 동일한 조건의 연습시험이 가능합니다.",
|
|
124
|
+
levelLow: "CO",
|
|
125
|
+
link: "https://smartstore.naver.com/tosel/products/10668962060",
|
|
68
126
|
},
|
|
69
127
|
];
|
|
70
128
|
let divIndex = 0;
|
|
@@ -83,10 +141,10 @@ export default function SectionA() {
|
|
|
83
141
|
const cardHeight = isXM ? 560 : 400;
|
|
84
142
|
console.log(isMD);
|
|
85
143
|
console.log(cardHeight);
|
|
144
|
+
//훅 스크롤에 따라 해당하는 책을 디스플레이
|
|
86
145
|
const bookScroller = () => {
|
|
87
146
|
if (bookScrollRef.current) {
|
|
88
147
|
const scrollAmount = cardHeight;
|
|
89
|
-
const currentScrollTop = bookScrollRef.current.scrollTop;
|
|
90
148
|
const newScrollTop = scrollAmount * divIndex;
|
|
91
149
|
bookScrollRef.current.scrollTo({
|
|
92
150
|
top: newScrollTop,
|
|
@@ -101,6 +159,28 @@ export default function SectionA() {
|
|
|
101
159
|
const bookWrapper = bookRef.current;
|
|
102
160
|
const sectionEndPoint = `${50 * vh}px`;
|
|
103
161
|
const bookScrollEndPoint = `${((bookNumber + 1) * 100 + 40) * vh}px`;
|
|
162
|
+
// 스크롤 방지 함수
|
|
163
|
+
const preventScroll = (e) => {
|
|
164
|
+
if (bookScrollRef.current &&
|
|
165
|
+
bookScrollRef.current.contains(e.target)) {
|
|
166
|
+
e.preventDefault(); // 스크롤 방지
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
// 터치스크린에서 스크롤 방지 함수
|
|
170
|
+
const preventTouchScroll = (e) => {
|
|
171
|
+
if (bookScrollRef.current &&
|
|
172
|
+
bookScrollRef.current.contains(e.target)) {
|
|
173
|
+
e.preventDefault(); // 터치스크롤 방지
|
|
174
|
+
}
|
|
175
|
+
};
|
|
176
|
+
// bookScrollRef에 wheel 이벤트 리스너 추가
|
|
177
|
+
if (bookScrollRef.current) {
|
|
178
|
+
bookScrollRef.current.addEventListener("wheel", preventScroll, {
|
|
179
|
+
passive: false,
|
|
180
|
+
});
|
|
181
|
+
bookScrollRef.current.addEventListener("touchstart", preventTouchScroll, { passive: false });
|
|
182
|
+
bookScrollRef.current.addEventListener("touchmove", preventTouchScroll, { passive: false });
|
|
183
|
+
}
|
|
104
184
|
if (scrollWrapper && bookWrapper) {
|
|
105
185
|
// 첫 번째 ScrollTrigger: stickyRef를 고정하고 mainTitle의 투명도와 크기 조정
|
|
106
186
|
const scrollTrigger = ScrollTrigger.create({
|
|
@@ -125,6 +205,7 @@ export default function SectionA() {
|
|
|
125
205
|
},
|
|
126
206
|
});
|
|
127
207
|
}
|
|
208
|
+
// 배경 그라디언트를 투명하게 만드는 애니메이션
|
|
128
209
|
if (bgRef.current) {
|
|
129
210
|
gsap.to(bgRef.current, {
|
|
130
211
|
opacity: 0,
|
|
@@ -137,6 +218,7 @@ export default function SectionA() {
|
|
|
137
218
|
},
|
|
138
219
|
});
|
|
139
220
|
}
|
|
221
|
+
// 교재몰 바로가기 버튼의 위치를 스크롤이 시작되면 하단으로 조정
|
|
140
222
|
if (buttonRef.current) {
|
|
141
223
|
const tween = gsap.to(buttonRef.current, {
|
|
142
224
|
bottom: "60px",
|
|
@@ -150,7 +232,7 @@ export default function SectionA() {
|
|
|
150
232
|
toggleActions: "play play play reverse",
|
|
151
233
|
},
|
|
152
234
|
});
|
|
153
|
-
//
|
|
235
|
+
// 책 이미지 전환 훅
|
|
154
236
|
refs.current.forEach((ref) => {
|
|
155
237
|
if (ref) {
|
|
156
238
|
gsap.to(ref, {
|
|
@@ -166,13 +248,11 @@ export default function SectionA() {
|
|
|
166
248
|
markers: false,
|
|
167
249
|
onEnter: () => {
|
|
168
250
|
divIndex++;
|
|
169
|
-
//handleScroll("down");
|
|
170
251
|
bookScroller();
|
|
171
252
|
console.log(`onEnter: ${divIndex}`);
|
|
172
253
|
},
|
|
173
254
|
onLeaveBack: () => {
|
|
174
255
|
divIndex--;
|
|
175
|
-
//handleScroll("up");
|
|
176
256
|
bookScroller();
|
|
177
257
|
console.log(`onLeaveBack: ${divIndex}`);
|
|
178
258
|
},
|
|
@@ -188,11 +268,17 @@ export default function SectionA() {
|
|
|
188
268
|
end: `${bookScrollEndPoint} bottom`,
|
|
189
269
|
pin: true,
|
|
190
270
|
pinSpacing: false,
|
|
191
|
-
markers:
|
|
271
|
+
markers: false,
|
|
192
272
|
});
|
|
193
273
|
return () => {
|
|
194
274
|
scrollTrigger.kill();
|
|
195
275
|
bookTrigger.kill();
|
|
276
|
+
// 이벤트 리스너 제거
|
|
277
|
+
if (bookScrollRef.current) {
|
|
278
|
+
bookScrollRef.current.removeEventListener("wheel", preventScroll);
|
|
279
|
+
bookScrollRef.current.removeEventListener("touchstart", preventTouchScroll);
|
|
280
|
+
bookScrollRef.current.removeEventListener("touchmove", preventTouchScroll);
|
|
281
|
+
}
|
|
196
282
|
};
|
|
197
283
|
}
|
|
198
284
|
});
|
|
@@ -213,6 +299,7 @@ export default function SectionA() {
|
|
|
213
299
|
sizes: "w-full h-[100vh]",
|
|
214
300
|
displays: "flex flex-col justify-center items-center fixed",
|
|
215
301
|
positions: "top-0 left-0 z-100",
|
|
302
|
+
animations: "pointer-events-none",
|
|
216
303
|
};
|
|
217
304
|
const buttonStyling = {
|
|
218
305
|
sizes: "w-fit h-fit rounded-2xl",
|
|
@@ -220,7 +307,7 @@ export default function SectionA() {
|
|
|
220
307
|
display: "flex flex-row gap-2",
|
|
221
308
|
textStyling: "font-bold text-green-dark",
|
|
222
309
|
backgrounds: "shadow-main bg-white",
|
|
223
|
-
animation: "duration-300 hover:bg-green-dark hover:text-white",
|
|
310
|
+
animation: "duration-300 hover:bg-green-dark hover:text-white pointer-events-auto",
|
|
224
311
|
};
|
|
225
312
|
const TitleWrapper = {
|
|
226
313
|
spacings: "pt-[20vh] z-5",
|
|
@@ -236,7 +323,7 @@ export default function SectionA() {
|
|
|
236
323
|
};
|
|
237
324
|
const bookWrapper = {
|
|
238
325
|
displays: "flex flex-col justify-center items-center -translate-y-[40vh]",
|
|
239
|
-
sizes: "p-10 w-full h-screen ",
|
|
326
|
+
sizes: "p-10 w-full h-screen z-1 pointer-events-none",
|
|
240
327
|
};
|
|
241
328
|
const bookExplainWrapper = {
|
|
242
329
|
displays: "flex flex-col md:flex-row justify-center items-center",
|
|
@@ -253,24 +340,28 @@ export default function SectionA() {
|
|
|
253
340
|
};
|
|
254
341
|
return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(absoluteWrapperBottom, "bg-gradient-to-tr from-crimson-burgundy to-green-dark"), ref: bgRef }), _jsx("div", { className: cn(absoluteWrapperTop), children: _jsxs("div", { className: cn(buttonStyling), ref: buttonRef, onClick: () => {
|
|
255
342
|
window.location.href = "https://smartstore.naver.com/tosel";
|
|
256
|
-
}, children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-6", children: _jsx("path", { d: "M2.25 2.25a.75.75 0 0 0 0 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 0 0-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 0 0 0-1.5H5.378A2.25 2.25 0 0 1 7.5 15h11.218a.75.75 0 0 0 .674-.421 60.358 60.358 0 0 0 2.96-7.228.75.75 0 0 0-.525-.965A60.864 60.864 0 0 0 5.68 4.509l-.232-.867A1.875 1.875 0 0 0 3.636 2.25H2.25ZM3.75 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM16.5 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" }) }) }), "\uAD50\uC7AC\uBAB0 \uBC14\uB85C\uAC00\uAE30"] }) }), _jsxs("div", { className: cn(TitleWrapper), ref: stickyRef, children: [_jsx("div", { className: cn(miniTitle), ref: subTitleRef, children: "\uB2F9\uC2E0\uC774 \uBBFF\uC744 \uC218 \uC788\uB294 \uC601\uC5B4\uAD50\uC7AC" }), _jsxs("div", { className: cn(mainTitle), ref: mainTitleRef, children: [_jsx("div", { className: "flex justify-center items-center w-40 md:w-80 ml:w-120", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/img-logo-tosel-darkmode.svg", alt: "", className: "max-w-full h-auto" }) }), _jsx("div", { className: "h-full w-0.5 bg-white" }), _jsx("div", { children: " books " })] })] }), _jsx("div", { className: cn(bookWrapper), ref: bookRef, children: _jsx("div", { className: cn("w-72 h-100 xm:w-100 xm:h-140 bg-white backdrop-blur-md z-10 rounded-xl shadow-main overflow-y-scroll scrollbar-hidden snap-y snap-mandatory"), ref: bookScrollRef, children: _jsx(ScrollBookComponent, {}) }) }), bookData.map((item, index) => {
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
343
|
+
}, children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-6", children: _jsx("path", { d: "M2.25 2.25a.75.75 0 0 0 0 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 0 0-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 0 0 0-1.5H5.378A2.25 2.25 0 0 1 7.5 15h11.218a.75.75 0 0 0 .674-.421 60.358 60.358 0 0 0 2.96-7.228.75.75 0 0 0-.525-.965A60.864 60.864 0 0 0 5.68 4.509l-.232-.867A1.875 1.875 0 0 0 3.636 2.25H2.25ZM3.75 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM16.5 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" }) }) }), "\uAD50\uC7AC\uBAB0 \uBC14\uB85C\uAC00\uAE30"] }) }), _jsxs("div", { className: cn(TitleWrapper), ref: stickyRef, children: [_jsx("div", { className: cn(miniTitle), ref: subTitleRef, children: "\uB2F9\uC2E0\uC774 \uBBFF\uC744 \uC218 \uC788\uB294 \uC601\uC5B4\uAD50\uC7AC" }), _jsxs("div", { className: cn(mainTitle), ref: mainTitleRef, children: [_jsx("div", { className: "flex justify-center items-center w-40 md:w-80 ml:w-120", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/img-logo-tosel-darkmode.svg", alt: "", className: "max-w-full h-auto" }) }), _jsx("div", { className: "h-full w-0.5 bg-white" }), _jsx("div", { children: " books " })] })] }), _jsx("div", { className: cn(bookWrapper), ref: bookRef, children: _jsx("div", { className: cn("md:pointer-events-none w-72 h-100 xm:w-100 xm:h-140 bg-white backdrop-blur-md z-10 rounded-xl shadow-main overflow-y-scroll scrollbar-hidden snap-y snap-mandatory"), ref: bookScrollRef, children: _jsx(ScrollBookComponent, {}) }) }), _jsx("div", { className: "", children: bookData.map((item, index) => {
|
|
344
|
+
// item.levelLow 값을 LevelKey로 변환하기 전에 유효성 검사
|
|
345
|
+
const lowLevelStyle = getLevelStyle(item.levelLow); // 안전하게 캐스팅
|
|
346
|
+
const highLevelStyle = getLevelStyle(item.levelHigh); // 이 부분도 마찬가지로
|
|
347
|
+
return (_jsxs("div", { className: cn(bookExplainWrapper), ref: (el) => {
|
|
348
|
+
if (el) {
|
|
349
|
+
refs.current[index] = el;
|
|
350
|
+
}
|
|
351
|
+
}, children: [_jsx("div", { className: cn(bookTextWrapper), children: _jsxs("div", { className: cn(bookTextBox, item.type == "학습 시리즈"
|
|
352
|
+
? "md:bg-gray-light/50 text-hj-blue"
|
|
353
|
+
: "md:bg-gray-light/50 text-crimson-burgundy"), children: [_jsx("div", { children: item.title }), _jsx("div", { className: "text-base text-gray-medium", children: item.type }), isMD && (_jsxs("div", { className: "w-fit h-fit flex flex-col lg:flex-row gap-2 mt-5 lg:items-center items-start", children: [_jsx("div", { className: `w-fit h-fit px-2 py-1 text-xs xm:text-sm rounded-md font-bold ${lowLevelStyle.textColor} ${lowLevelStyle.bgColor}`, children: lowLevelStyle.name }), item.levelHigh && (_jsxs("div", { className: "flex flex-row gap-2 items-center lg:m-0 ml-5", children: ["~", _jsx("div", { className: `w-fit h-fit px-2 py-1 text-xs xm:text-sm rounded-md font-bold ${highLevelStyle.textColor} ${highLevelStyle.bgColor}`, children: highLevelStyle.name })] }))] }))] }) }), isMD ? (_jsx("div", { className: "h-full w-72 xm:w-120 shrink-0" })) : (_jsx("div", { className: "h-100 w-full shrink-0" })), _jsx("div", { className: "h-full w-full pt-5 flex flex-col justify-start md:justify-center items-center md:items-end md:pr-5 pr-0", children: isMD ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "text-base font-bold text-gray-medium w-full text-start", children: ["About", " ", _jsx("span", { className: cn("ml-2", item.type == "학습 시리즈"
|
|
354
|
+
? "text-hj-blue"
|
|
355
|
+
: "text-crimson-burgundy"), children: item.title })] }), _jsx("div", { className: cn("text-base p-5 rounded-lg text-gray-dark font-medium mt-5 w-full", item.type == "학습 시리즈"
|
|
356
|
+
? "bg-blue-pastel/30"
|
|
357
|
+
: "bg-crimson-burgundy/5"), children: item.description })] })) : (_jsxs("div", { className: "w-fit h-fit flex flex-row gap-2", children: [_jsx("div", { className: `w-fit h-fit px-2 py-1 text-sm rounded-md font-bold ${lowLevelStyle.textColor} ${lowLevelStyle.bgColor}`, children: lowLevelStyle.name }), item.levelHigh && (_jsxs(_Fragment, { children: [_jsx("span", { children: "~" }), _jsx("div", { className: `w-fit h-fit px-2 py-1 text-sm rounded-md font-bold ${highLevelStyle.textColor} ${highLevelStyle.bgColor}`, children: highLevelStyle.name })] }))] })) })] }, item.id));
|
|
358
|
+
}) })] }));
|
|
268
359
|
}
|
|
269
360
|
const levelStyles = {
|
|
270
361
|
CO: {
|
|
271
362
|
name: "cocoon",
|
|
272
|
-
textColor: "text-
|
|
273
|
-
bgColor: "bg-
|
|
363
|
+
textColor: "text-co-green",
|
|
364
|
+
bgColor: "bg-co-green-light",
|
|
274
365
|
},
|
|
275
366
|
PS: {
|
|
276
367
|
name: "Pre-Starter",
|
|
@@ -299,14 +390,15 @@ const levelStyles = {
|
|
|
299
390
|
},
|
|
300
391
|
AD: {
|
|
301
392
|
name: "Advanced",
|
|
302
|
-
textColor: "text-
|
|
303
|
-
bgColor: "bg-
|
|
393
|
+
textColor: "text-crimson-burgundy",
|
|
394
|
+
bgColor: "bg-crimson-burgundy/10",
|
|
304
395
|
},
|
|
305
396
|
};
|
|
306
397
|
const getLevelStyle = (level) => {
|
|
307
398
|
return levelStyles[level];
|
|
308
399
|
};
|
|
309
400
|
export function ScrollBookComponent() {
|
|
401
|
+
const isMD = useResponsive("md");
|
|
310
402
|
const container = {
|
|
311
403
|
sizes: "w-full h-fit relative",
|
|
312
404
|
displyas: "flex flex-col",
|
|
@@ -318,7 +410,21 @@ export function ScrollBookComponent() {
|
|
|
318
410
|
imgStyling: " z-10 p-20",
|
|
319
411
|
scrollActions: "snap-start",
|
|
320
412
|
};
|
|
413
|
+
const toggleWrapper = {
|
|
414
|
+
displays: "absolute flex flex-col justify-center items-center",
|
|
415
|
+
sizes: "w-full h-full",
|
|
416
|
+
spacings: "top-0 left-0 p-5",
|
|
417
|
+
animations: "group pointer-events-auto bg-white/30 opacity-0 hover:opacity-100 duration-300 hover:backdrop-blur-sm",
|
|
418
|
+
};
|
|
419
|
+
const infoButton = {
|
|
420
|
+
displays: "flex flex-col justify-center items-center",
|
|
421
|
+
sizes: "gap-2 w-20 h-20 rounded-lg",
|
|
422
|
+
colors: "bg-white text-green-dark hover:bg-green-dark hover:text-white",
|
|
423
|
+
animations: "duration-300 shadow-main pointer-events-auto",
|
|
424
|
+
};
|
|
321
425
|
return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(imageWrapper), children: _jsx("div", { className: "absolute top-0 left-0 w-full h-full bg-contain bg-no-repeat bg-center", style: {
|
|
322
426
|
backgroundImage: `url(https://resource.tosel.co.kr/images/SP-COVER-PS.png)`,
|
|
323
|
-
} }) }), bookData.map((item) => (
|
|
427
|
+
} }) }), bookData.map((item) => (_jsxs("div", { className: cn(imageWrapper), children: [_jsx("div", { className: "absolute top-12 left-12 w-[calc(100%-96px)] h-[calc(100%-96px)] bg-contain bg-no-repeat bg-center", style: { backgroundImage: `url(${item.imgSrc})` } }), isMD && (_jsx("div", { className: cn(toggleWrapper), children: _jsxs("div", { className: cn(infoButton), onClick: () => {
|
|
428
|
+
window.location.href = item.link;
|
|
429
|
+
}, 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-8", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" }) }), _jsx("div", { className: "font-medium text-xs", children: "\uB354 \uC54C\uC544\uBCF4\uAE30" })] }) }))] }, item.id)))] }));
|
|
324
430
|
}
|
package/package.json
CHANGED
package/version.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
1.0.
|
|
1
|
+
1.0.195
|