@edu-tosel/design 1.0.137 → 1.0.139
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/asset/html/gomito-promotion.html +117 -0
- package/asset/html/speaking-series-promotion.html +59 -0
- package/layout/index.d.ts +1 -0
- package/layout/index.js +1 -0
- package/layout/template/Gomito.d.ts +1 -0
- package/layout/template/Gomito.js +4 -0
- package/layout/template/SpeakingSeries.d.ts +1 -0
- package/layout/template/SpeakingSeries.js +4 -0
- package/layout/template/home/Notice.d.ts +3 -8
- package/layout/template/home/Notice.js +94 -40
- package/layout/template/home/Promotion.d.ts +2 -0
- package/layout/template/home/Promotion.js +7 -7
- package/layout/template/home/Service.d.ts +2 -1
- package/layout/template/home/Service.js +4 -4
- package/package.json +1 -1
- package/version.txt +1 -1
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
|
|
6
|
+
<title>Document</title>
|
|
7
|
+
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
|
|
8
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div style="background-color: #f6f6f6; max-width: 796px;" class="p-6 m-0 h-auto w-full rounded-2xl sm:p-16 break-keep">
|
|
12
|
+
<div class="flex flex-row items-center">
|
|
13
|
+
<div class="w-16"><img src="https://resource.tosel.co.kr/images/img-icon-KU.png" alt="" class="object-cover"></div>
|
|
14
|
+
<div>
|
|
15
|
+
<div class="text-sm text-black break-keep">고려대학교 | 미래교육원</div>
|
|
16
|
+
<div class="text-2xl text-red-800 font-bold">토셀 전문가 과정</div>
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="flex flex-col-reverse sm:flex-row ">
|
|
20
|
+
<div class="text-base w-full h-fit mt-0 rounded-lg bg-stone-200 p-4 sm:w-80 sm:flex-none sm:mt-6" >
|
|
21
|
+
<div class="flex flex-row p-1">
|
|
22
|
+
<div class="text-red-800 font-bold text-sm sm:text-base">대상</div>
|
|
23
|
+
<div class="ml-4 text-stone-500 font-bold text-sm sm:text-base">토셀 랩 지정교육기관 / 희망기관 학원장 및 소속 강사진</div>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="flex flex-row p-1">
|
|
26
|
+
<div class="text-red-800 font-bold text-sm sm:text-base">혜택</div>
|
|
27
|
+
<div class="ml-4 text-stone-500 font-bold text-sm sm:text-base">
|
|
28
|
+
<div>고려대학교 총장 및 미래교육원장 명의 수료증 발급</div>
|
|
29
|
+
<div>다양한 기관 및 교수진과의 네트워크</div>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="flex flex-row p-1">
|
|
33
|
+
<div class="text-red-800 font-bold text-sm sm:text-base">목적</div>
|
|
34
|
+
<div class="ml-4 text-stone-500 font-bold text-sm sm:text-base">TOSEL 교육과정을 기반으로 한 영어교육 전문가 양성</div>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="w-auto block ml-4 sm:w-full"><img src="https://resource.tosel.co.kr/images/img-gomito-teacher.png" alt="스피킹시리즈이미지"></div>
|
|
38
|
+
</div>
|
|
39
|
+
<div>
|
|
40
|
+
<div class="text-xl font-bold text-red-800 mt-8">왜 토셀에서 배워야 할까요?</div>
|
|
41
|
+
<div class="text-sm font-medium text-stone-500 mt-1 sm:text-base">20년간 영어평가시장을 선도해온 토셀은 축적된 데이터를 기반으로 수준 높은 수업을 제공합니다</div>
|
|
42
|
+
<div class="text-sm font-medium text-stone-500 mt-1 sm:text-base">남다른 관점으로, 토셀 컨텐츠를 활용할 수 있는 확실한 방법을 알려드립니다</div>
|
|
43
|
+
<div class="w-full h-fit overflow-hidden rounded-xl mt-8">
|
|
44
|
+
<img src="https://resource.tosel.co.kr/images/img-koreauniversity.png" alt="">
|
|
45
|
+
</div>
|
|
46
|
+
<div class="text-xl font-bold text-red-800 mt-8">남다른 토셀의 혜택</div>
|
|
47
|
+
<div class="text-sm font-medium text-stone-500 mt-1 sm:text-base">고려대학교 미래교육원과 함께하는 TOSEL 전문가 과정</div>
|
|
48
|
+
<div class="text-sm font-medium text-stone-500 mt-1 sm:text-base">참여하면 이런 혜택이 있어요</div>
|
|
49
|
+
<div class="flex flex-wrap w-full gap-4 mt-4">
|
|
50
|
+
<div class="flex-1 bg-stone-200 min-w-60 h-30 p-4 rounded-lg flex flex-row border-2 border-stone-300">
|
|
51
|
+
<div>
|
|
52
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 stroke-stone-800">
|
|
53
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" />
|
|
54
|
+
</svg>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="flex flex-col ml-4 text-stone-500">
|
|
57
|
+
<div class="font-bold text-base text-stone-800 sm:text-lg">다양한 네트워킹 기회</div>
|
|
58
|
+
<div class="font-medium text-sm mt-2">교수진, 각 기관과의 네트워킹 기회가 주어집니다.</div>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="flex-1 bg-stone-200 min-w-60 h-30 p-4 rounded-lg flex flex-row border-2 border-stone-300">
|
|
62
|
+
<div>
|
|
63
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 stroke-stone-800">
|
|
64
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
|
|
65
|
+
</svg>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="flex flex-col ml-4 text-stone-500">
|
|
68
|
+
<div class="font-bold text-base text-stone-800 sm:text-lg">공신력 강화</div>
|
|
69
|
+
<div class="font-medium text-sm mt-2">고려대학교 총장 명의의 수료증이 발급됩니다.</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="flex-1 bg-stone-200 min-w-60 h-30 p-4 rounded-lg flex flex-row border-2 border-stone-300">
|
|
73
|
+
<div>
|
|
74
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 stroke-stone-800">
|
|
75
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
|
|
76
|
+
</svg>
|
|
77
|
+
|
|
78
|
+
</div>
|
|
79
|
+
<div class="flex flex-col ml-4 text-stone-500">
|
|
80
|
+
<div class="font-bold text-base text-stone-800 sm:text-lg">영어 교육 커리큘럼</div>
|
|
81
|
+
<div class="font-medium text-sm mt-2">토셀 컨텐츠를 활용할 수 있는 커리큘럼을 배울 수 있습니다</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
<div class="flex-1 bg-stone-200 min-w-60 h-30 p-4 rounded-lg flex flex-row border-2 border-stone-300">
|
|
85
|
+
<div>
|
|
86
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 stroke-stone-800">
|
|
87
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
|
|
88
|
+
</svg>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="flex flex-col ml-4 text-stone-500">
|
|
91
|
+
<div class="font-bold text-base text-stone-800 sm:text-lg">전문지식 습득</div>
|
|
92
|
+
<div class="font-medium text-sm mt-2">일반적 영어교수법에 대한 전문지식을 강화합니다</div>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
<div class="text-xl font-bold text-red-800 mt-8">지금 바로 신청하세요</div>
|
|
97
|
+
<div class="text-sm font-medium text-stone-500 mt-1 sm:text-base">9월에 개강하는 전문가 과정에 지원가능해요</div>
|
|
98
|
+
<div class="w-full h-fit p-4 bg-red-800 rounded-lg mt-4 flex flex-col gap-2">
|
|
99
|
+
<div class="flex flex-row gap-4">
|
|
100
|
+
<div class="text-base text-white font-bold">전형기간</div>
|
|
101
|
+
<div class="text-base text-white">2024년 8월 24일까지</div>
|
|
102
|
+
</div>
|
|
103
|
+
<div class="flex flex-row gap-4">
|
|
104
|
+
<div class="text-base text-white font-bold">전형방법</div>
|
|
105
|
+
<div class="text-base text-white">서류 및 면접전형</div>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="flex flex-row gap-4">
|
|
108
|
+
<div class="text-base text-white font-bold">합격자 발표</div>
|
|
109
|
+
<div class="text-base text-white">2024년 8월 26일</div>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
<div class="text-xs mt-1 text-red-800">*정원충족에 따라 차후 개강 여부가 결정될 수 있습니다</div>
|
|
113
|
+
<div class="text-sm mt-4 text-red-800 text-center p-4 bg-stone-200 rounded-lg">관련문의: tosel_lab@tosel.co.kr</div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</body>
|
|
117
|
+
</html>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
|
|
6
|
+
<title>Document</title>
|
|
7
|
+
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
|
|
8
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div style="background-color: #f6f6f6; max-width: 796px;" class="p-6 m-0 h-auto w-full rounded-2xl">
|
|
12
|
+
<div style="margin-bottom: 12px;" class="flex flex-row items-center">
|
|
13
|
+
<div style="width:fit-content; height: fit-content; padding: 4px 8px; border-radius: 6px; margin-right: 8px;" class="bg-black text-white text-sm sm:text-base">신규출간</div>
|
|
14
|
+
<div class="text-xl font-bold sm:text-3xl">Speaking Series</div>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="bg-black h-0.5 mb-4"></div>
|
|
17
|
+
<div class="flex flex-col sm:flex-row">
|
|
18
|
+
<div class="flex flex-col m-0 mb-2 sm:mr-4 sm:my-auto sm:w-auto sm:ml-4">
|
|
19
|
+
<div class="text-base font-bold break-keep sm:text-xl">토셀의 노하우가 담긴 새로운 시리즈</div>
|
|
20
|
+
<div class="text-sm break-keep mt-0 sm:text-base sm:mt-4">토셀 스피킹 시리즈를 만나보세요</div>
|
|
21
|
+
<div class="text-sm break-keep sm:text-base">[사전구매 이벤트] 진행중</div>
|
|
22
|
+
</div>
|
|
23
|
+
<img src="https://resource.tosel.co.kr/images/img-ss.png" alt="스피킹시리즈이미지" class="w-auto sm:w-2/3 sm:max-w-sm sm:ml-auto">
|
|
24
|
+
</div>
|
|
25
|
+
<div style="background-color: #f0f0f0;" class="w-auto rounded-xl p-4 mt-4 sm:p-6">
|
|
26
|
+
<div class="text-base font-bold break-keep sm:text-xl">📖 토셀 스피킹은 이런 책이에요</div>
|
|
27
|
+
<ul class="list-disc ml-4 text-sm mt-2 break-keep sm:text-lg sm:mt-4">
|
|
28
|
+
<li>수준별 학습이 가능한 레벨체계</li>
|
|
29
|
+
<li>교과과정을 연계한 설계로 내신과 수행평가 대비</li>
|
|
30
|
+
<li>단어-문법-표현-대화로 이어지는 단계적 학습</li>
|
|
31
|
+
<li>전국 Speaking 올림피아드 공식 대비 교재</li>
|
|
32
|
+
</ul>
|
|
33
|
+
</div>
|
|
34
|
+
<div style="background-color: #f0f0f0;" class="w-auto rounded-xl p-4 mt-4 sm:p-6">
|
|
35
|
+
<div class="text-base font-bold break-keep sm:text-xl">👍 사전구매 혜택</div>
|
|
36
|
+
<div class="text-sm mt-2 break-keep sm:text-lg sm:mt-4">토셀 굿즈 4종 증정</div>
|
|
37
|
+
<div class="flex gap-4 mt-4 flex-wrap">
|
|
38
|
+
<div class="relative bg-white flex-1 rounded-lg min-w-60 overflow-hidden border-2">
|
|
39
|
+
<div class="absolute top-2 left-2 bg-black text-white text-sm rounded-md px-2 py-1 opacity-35 sm:text-base sm:top-4 sm:left-4">단어노트 5권</div>
|
|
40
|
+
<img src="https://resource.tosel.co.kr/images/goods-vocanote.png" alt="스피킹교재이미지" class="object-cover" >
|
|
41
|
+
</div>
|
|
42
|
+
<div class="relative bg-white flex-1 rounded-lg min-w-60 overflow-hidden border-2">
|
|
43
|
+
<div class="absolute top-2 left-2 bg-black text-white text-sm rounded-md px-2 py-1 opacity-35 sm:text-base sm:top-4 sm:left-4">오답노트 5권</div>
|
|
44
|
+
<img src="https://resource.tosel.co.kr/images/goods-checknote.png" alt="스피킹교재이미지" class="object-cover" >
|
|
45
|
+
</div>
|
|
46
|
+
<div class="relative bg-white flex-1 rounded-lg min-w-60 overflow-hidden border-2">
|
|
47
|
+
<div class="absolute top-2 left-2 bg-black text-white text-sm rounded-md px-2 py-1 opacity-35 sm:text-base sm:top-4 sm:left-4">책받침 5개</div>
|
|
48
|
+
<img src="https://resource.tosel.co.kr/images/goods-hardcover.png" alt="스피킹교재이미지" class="object-cover" >
|
|
49
|
+
</div>
|
|
50
|
+
<div class="relative bg-white flex-1 rounded-lg min-w-60 overflow-hidden border-2">
|
|
51
|
+
<div class="absolute top-2 left-2 bg-black text-white text-sm rounded-md px-2 py-1 opacity-35 sm:text-base sm:top-4 sm:left-4">토셀 캘린더</div>
|
|
52
|
+
<img src="https://resource.tosel.co.kr/images/goods-calendar2024.png" alt="스피킹교재이미지" class="object-cover" >
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
<div style="background-color:#f0f0f0;" class="w-auto h-auto text-center p-4 mt-8 text-sm rounded-2xl">🛍 지금 토셀 북스토어에서 만날 수 있어요!</div>
|
|
57
|
+
</div>
|
|
58
|
+
</body>
|
|
59
|
+
</html>
|
package/layout/index.d.ts
CHANGED
|
@@ -14,3 +14,4 @@ export { default as Shelf } from "./template/Shelf";
|
|
|
14
14
|
export { default as Tab } from "./template/Tab";
|
|
15
15
|
export { default as TextBox } from "./template/TextBox";
|
|
16
16
|
export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
|
|
17
|
+
export { default as Gomito } from "./template/Gomito";
|
package/layout/index.js
CHANGED
|
@@ -14,3 +14,4 @@ export { default as Shelf } from "./template/Shelf";
|
|
|
14
14
|
export { default as Tab } from "./template/Tab";
|
|
15
15
|
export { default as TextBox } from "./template/TextBox";
|
|
16
16
|
export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
|
|
17
|
+
export { default as Gomito } from "./template/Gomito";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function Gomito(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export default function Gomito() {
|
|
3
|
+
return (_jsxs("div", { className: "max-w-[796px] bg-[#F6F6F6] p-6 m-0 h-auto w-full rounded-2xl sm:p-16 break-keep", children: [_jsxs("div", { className: "flex flex-row items-center", children: [_jsx("div", { className: "w-16", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/img-icon-KU.png", alt: "", className: "object-cover" }) }), _jsxs("div", { children: [_jsx("div", { className: "text-sm text-black break-keep", children: "\uACE0\uB824\uB300\uD559\uAD50 | \uBBF8\uB798\uAD50\uC721\uC6D0" }), _jsx("div", { className: "text-2xl text-red-800 font-bold", children: "\uD1A0\uC140 \uC804\uBB38\uAC00 \uACFC\uC815" })] })] }), _jsxs("div", { className: "flex flex-col-reverse sm:flex-row ", children: [_jsxs("div", { className: "text-base w-full h-fit mt-0 rounded-lg bg-stone-200 p-4 sm:w-80 sm:flex-none sm:mt-6", children: [_jsxs("div", { className: "flex flex-row p-1", children: [_jsx("div", { className: "text-red-800 font-bold text-sm sm:text-base", children: "\uB300\uC0C1" }), _jsx("div", { className: "ml-4 text-stone-500 font-bold text-sm sm:text-base", children: "\uD1A0\uC140 \uB7A9 \uC9C0\uC815\uAD50\uC721\uAE30\uAD00 / \uD76C\uB9DD\uAE30\uAD00 \uD559\uC6D0\uC7A5 \uBC0F \uC18C\uC18D \uAC15\uC0AC\uC9C4" })] }), _jsxs("div", { className: "flex flex-row p-1", children: [_jsx("div", { className: "text-red-800 font-bold text-sm sm:text-base", children: "\uD61C\uD0DD" }), _jsxs("div", { className: "ml-4 text-stone-500 font-bold text-sm sm:text-base", children: [_jsx("div", { children: "\uACE0\uB824\uB300\uD559\uAD50 \uCD1D\uC7A5 \uBC0F \uBBF8\uB798\uAD50\uC721\uC6D0\uC7A5 \uBA85\uC758 \uC218\uB8CC\uC99D \uBC1C\uAE09" }), _jsx("div", { children: "\uB2E4\uC591\uD55C \uAE30\uAD00 \uBC0F \uAD50\uC218\uC9C4\uACFC\uC758 \uB124\uD2B8\uC6CC\uD06C" })] })] }), _jsxs("div", { className: "flex flex-row p-1", children: [_jsx("div", { className: "text-red-800 font-bold text-sm sm:text-base", children: "\uBAA9\uC801" }), _jsx("div", { className: "ml-4 text-stone-500 font-bold text-sm sm:text-base", children: "TOSEL \uAD50\uC721\uACFC\uC815\uC744 \uAE30\uBC18\uC73C\uB85C \uD55C \uC601\uC5B4\uAD50\uC721 \uC804\uBB38\uAC00 \uC591\uC131" })] })] }), _jsx("div", { className: "w-auto block ml-4 sm:w-full", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/img-gomito-teacher.png", alt: "\uC2A4\uD53C\uD0B9\uC2DC\uB9AC\uC988\uC774\uBBF8\uC9C0" }) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xl font-bold text-red-800 mt-8", children: "\uC65C \uD1A0\uC140\uC5D0\uC11C \uBC30\uC6CC\uC57C \uD560\uAE4C\uC694?" }), _jsx("div", { className: "text-sm font-medium text-stone-500 mt-1 sm:text-base", children: "20\uB144\uAC04 \uC601\uC5B4\uD3C9\uAC00\uC2DC\uC7A5\uC744 \uC120\uB3C4\uD574\uC628 \uD1A0\uC140\uC740 \uCD95\uC801\uB41C \uB370\uC774\uD130\uB97C \uAE30\uBC18\uC73C\uB85C \uC218\uC900 \uB192\uC740 \uC218\uC5C5\uC744 \uC81C\uACF5\uD569\uB2C8\uB2E4" }), _jsx("div", { className: "text-sm font-medium text-stone-500 mt-1 sm:text-base", children: "\uB0A8\uB2E4\uB978 \uAD00\uC810\uC73C\uB85C, \uD1A0\uC140 \uCEE8\uD150\uCE20\uB97C \uD65C\uC6A9\uD560 \uC218 \uC788\uB294 \uD655\uC2E4\uD55C \uBC29\uBC95\uC744 \uC54C\uB824\uB4DC\uB9BD\uB2C8\uB2E4" }), _jsx("div", { className: "w-full h-fit overflow-hidden rounded-xl mt-8", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/img-koreauniversity.png", alt: "" }) }), _jsx("div", { className: "text-xl font-bold text-red-800 mt-8", children: "\uB0A8\uB2E4\uB978 \uD1A0\uC140\uC758 \uD61C\uD0DD" }), _jsx("div", { className: "text-sm font-medium text-stone-500 mt-1 sm:text-base", children: "\uACE0\uB824\uB300\uD559\uAD50 \uBBF8\uB798\uAD50\uC721\uC6D0\uACFC \uD568\uAED8\uD558\uB294 TOSEL \uC804\uBB38\uAC00 \uACFC\uC815" }), _jsx("div", { className: "text-sm font-medium text-stone-500 mt-1 sm:text-base", children: "\uCC38\uC5EC\uD558\uBA74 \uC774\uB7F0 \uD61C\uD0DD\uC774 \uC788\uC5B4\uC694" }), _jsxs("div", { className: "flex flex-wrap w-full gap-4 mt-4", children: [_jsxs("div", { className: "flex-1 bg-stone-200 min-w-60 h-30 p-4 rounded-lg flex flex-row border-2 border-stone-300", 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 stroke-stone-800", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" }) }) }), _jsxs("div", { className: "flex flex-col ml-4 text-stone-500", children: [_jsx("div", { className: "font-bold text-base text-stone-800 sm:text-lg", children: "\uB2E4\uC591\uD55C \uB124\uD2B8\uC6CC\uD0B9 \uAE30\uD68C" }), _jsx("div", { className: "font-medium text-sm mt-2", children: "\uAD50\uC218\uC9C4, \uAC01 \uAE30\uAD00\uACFC\uC758 \uB124\uD2B8\uC6CC\uD0B9 \uAE30\uD68C\uAC00 \uC8FC\uC5B4\uC9D1\uB2C8\uB2E4." })] })] }), _jsxs("div", { className: "flex-1 bg-stone-200 min-w-60 h-30 p-4 rounded-lg flex flex-row border-2 border-stone-300", 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 stroke-stone-800", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" }) }) }), _jsxs("div", { className: "flex flex-col ml-4 text-stone-500", children: [_jsx("div", { className: "font-bold text-base text-stone-800 sm:text-lg", children: "\uACF5\uC2E0\uB825 \uAC15\uD654" }), _jsx("div", { className: "font-medium text-sm mt-2", children: "\uACE0\uB824\uB300\uD559\uAD50 \uCD1D\uC7A5 \uBA85\uC758\uC758 \uC218\uB8CC\uC99D\uC774 \uBC1C\uAE09\uB429\uB2C8\uB2E4." })] })] }), _jsxs("div", { className: "flex-1 bg-stone-200 min-w-60 h-30 p-4 rounded-lg flex flex-row border-2 border-stone-300", 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 stroke-stone-800", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" }) }) }), _jsxs("div", { className: "flex flex-col ml-4 text-stone-500", children: [_jsx("div", { className: "font-bold text-base text-stone-800 sm:text-lg", children: "\uC601\uC5B4 \uAD50\uC721 \uCEE4\uB9AC\uD058\uB7FC" }), _jsx("div", { className: "font-medium text-sm mt-2", children: "\uD1A0\uC140 \uCEE8\uD150\uCE20\uB97C \uD65C\uC6A9\uD560 \uC218 \uC788\uB294 \uCEE4\uB9AC\uD058\uB7FC\uC744 \uBC30\uC6B8 \uC218 \uC788\uC2B5\uB2C8\uB2E4" })] })] }), _jsxs("div", { className: "flex-1 bg-stone-200 min-w-60 h-30 p-4 rounded-lg flex flex-row border-2 border-stone-300", 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 stroke-stone-800", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" }) }) }), _jsxs("div", { className: "flex flex-col ml-4 text-stone-500", children: [_jsx("div", { className: "font-bold text-base text-stone-800 sm:text-lg", children: "\uC804\uBB38\uC9C0\uC2DD \uC2B5\uB4DD" }), _jsx("div", { className: "font-medium text-sm mt-2", children: "\uC77C\uBC18\uC801 \uC601\uC5B4\uAD50\uC218\uBC95\uC5D0 \uB300\uD55C \uC804\uBB38\uC9C0\uC2DD\uC744 \uAC15\uD654\uD569\uB2C8\uB2E4" })] })] })] }), _jsx("div", { className: "text-xl font-bold text-red-800 mt-8", children: "\uC9C0\uAE08 \uBC14\uB85C \uC2E0\uCCAD\uD558\uC138\uC694" }), _jsx("div", { className: "text-sm font-medium text-stone-500 mt-1 sm:text-base", children: "9\uC6D4\uC5D0 \uAC1C\uAC15\uD558\uB294 \uC804\uBB38\uAC00 \uACFC\uC815\uC5D0 \uC9C0\uC6D0\uAC00\uB2A5\uD574\uC694" }), _jsxs("div", { className: "w-full h-fit p-4 bg-red-800 rounded-lg mt-4 flex flex-col gap-2", children: [_jsxs("div", { className: "flex flex-row gap-4", children: [_jsx("div", { className: "text-base text-white font-bold", children: "\uC804\uD615\uAE30\uAC04" }), _jsx("div", { className: "text-base text-white", children: "2024\uB144 8\uC6D4 24\uC77C\uAE4C\uC9C0" })] }), _jsxs("div", { className: "flex flex-row gap-4", children: [_jsx("div", { className: "text-base text-white font-bold", children: "\uC804\uD615\uBC29\uBC95" }), _jsx("div", { className: "text-base text-white", children: "\uC11C\uB958 \uBC0F \uBA74\uC811\uC804\uD615" })] }), _jsxs("div", { className: "flex flex-row gap-4", children: [_jsx("div", { className: "text-base text-white font-bold", children: "\uD569\uACA9\uC790 \uBC1C\uD45C" }), _jsx("div", { className: "text-base text-white", children: "2024\uB144 8\uC6D4 26\uC77C" })] })] }), _jsx("div", { className: "text-xs mt-1 text-red-800", children: "*\uC815\uC6D0\uCDA9\uC871\uC5D0 \uB530\uB77C \uCC28\uD6C4 \uAC1C\uAC15 \uC5EC\uBD80\uAC00 \uACB0\uC815\uB420 \uC218 \uC788\uC2B5\uB2C8\uB2E4" }), _jsx("div", { className: "text-sm mt-4 text-red-800 text-center p-4 bg-stone-200 rounded-lg", children: "\uAD00\uB828\uBB38\uC758: tosel_lab@tosel.co.kr" })] })] }));
|
|
4
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function SpeakingSeries(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,14 +1,9 @@
|
|
|
1
|
-
import { Titles } from "../../../interface";
|
|
2
|
-
|
|
3
|
-
className: string;
|
|
4
|
-
}
|
|
5
|
-
export default function Notice({ banners, option, }: {
|
|
1
|
+
import { Titles, OnClick } from "../../../interface";
|
|
2
|
+
export default function Notice({ banners, }: {
|
|
6
3
|
banners: BannerProps[];
|
|
7
|
-
option?: Partial<NoticeOptions>;
|
|
8
4
|
}): import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
type Tag = "REG" | "OLY";
|
|
10
5
|
interface BannerProps {
|
|
11
|
-
|
|
6
|
+
onClick?: OnClick;
|
|
12
7
|
titles: Titles;
|
|
13
8
|
}
|
|
14
9
|
export {};
|
|
@@ -1,49 +1,103 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import SVG from "../../../asset/SVG";
|
|
3
2
|
import { cn } from "../../../util";
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import { useRef } from "react";
|
|
4
|
+
export default function Notice({ banners, }) {
|
|
5
|
+
const scrollContainerRef = useRef(null);
|
|
6
|
+
const cardWidth = 320; //card width
|
|
7
|
+
const handleScroll = (direction) => {
|
|
8
|
+
if (scrollContainerRef.current) {
|
|
9
|
+
const scrollAmount = cardWidth;
|
|
10
|
+
const currentScrollLeft = scrollContainerRef.current.scrollLeft;
|
|
11
|
+
const newScrollLeft = direction === "left"
|
|
12
|
+
? Math.max(currentScrollLeft - scrollAmount, 0)
|
|
13
|
+
: currentScrollLeft + scrollAmount;
|
|
14
|
+
scrollContainerRef.current.scrollTo({
|
|
15
|
+
left: newScrollLeft,
|
|
16
|
+
behavior: "smooth",
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
const bgWrapper = {
|
|
21
|
+
displays: "flex",
|
|
22
|
+
sizes: "h-fit w-full mt-10",
|
|
23
|
+
bacgrounds: "bg-gray-light/80",
|
|
24
|
+
};
|
|
6
25
|
const container = {
|
|
7
|
-
positions: "relative",
|
|
8
|
-
backgrounds: "bg-[#F7F7F7]",
|
|
26
|
+
positions: "relative z-10 group mt-10",
|
|
9
27
|
displays: "flex flex-col",
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
+
textstyles: "break-keep antialiased",
|
|
29
|
+
};
|
|
30
|
+
const deckTitlePositioning = {
|
|
31
|
+
displays: "flex flex-row ml:justify-center ml:itmes-center",
|
|
32
|
+
sizes: "w-full",
|
|
33
|
+
};
|
|
34
|
+
const deckTitle = {
|
|
35
|
+
displays: "pl-5",
|
|
36
|
+
sizes: "max-w-300 w-full",
|
|
37
|
+
textstyles: "font-pretendard-var font-bold text-2xl text-gray-dark",
|
|
38
|
+
};
|
|
39
|
+
const cardPositioning = {
|
|
40
|
+
displays: "flex flex-nowrap",
|
|
41
|
+
sizes: "w-screen",
|
|
42
|
+
};
|
|
43
|
+
const cardWrapper = {
|
|
44
|
+
sizes: "w-full overflow-x-auto scroll-smooth scrollbar-hidden scroll-px-4",
|
|
45
|
+
display: "flex flex-nowrap vertical-top",
|
|
46
|
+
spacings: "px-5 pt-4 md:pt-6 pb-12",
|
|
47
|
+
snap: "snap-x snap-mandatory scroll-ms-0",
|
|
48
|
+
};
|
|
49
|
+
//adjust the responsive right margin of scroller
|
|
50
|
+
const cardDeck = {
|
|
51
|
+
displays: "inline-flex",
|
|
52
|
+
spacings: "gap-5 ml:mr-[calc(100vw-1200px)]",
|
|
53
|
+
};
|
|
54
|
+
const buttonPositioning = {
|
|
55
|
+
displays: "hidden flex-row md:flex",
|
|
56
|
+
sizes: "w-full h-full",
|
|
57
|
+
spacings: "px-2",
|
|
58
|
+
positions: "absolute top-0 left-0 justify-between items-center opacity-0 group-hover:opacity-100 duration-300",
|
|
59
|
+
hovering: "group pointer-events-none",
|
|
60
|
+
};
|
|
61
|
+
const hoverButton = {
|
|
62
|
+
sizes: "rounded-full w-12 h-12 scale-50 group-hover:scale-100",
|
|
63
|
+
animation: "duration-300 ",
|
|
64
|
+
test: "bg-gray-medium/20 hover:bg-gray-medium/50 pointer-events-auto backdrop-blur-sm fill-red-500",
|
|
65
|
+
};
|
|
66
|
+
return (_jsx("div", { className: cn(bgWrapper), children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsx("div", { className: cn(deckTitle), children: "\uACF5\uC9C0\uC0AC\uD56D" }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) }) }) }), _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: "" }) })] })] }) }));
|
|
28
67
|
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
68
|
+
function Banner({ onClick, titles }) {
|
|
69
|
+
//ghost card snaps to the end of the viewport
|
|
70
|
+
const ghostCard = {
|
|
71
|
+
displays: "flex",
|
|
72
|
+
spacings: "ms-0 ps-0 ",
|
|
73
|
+
scroll: "snap-start",
|
|
74
|
+
};
|
|
75
|
+
//adjust the responsive left margin of scroller
|
|
76
|
+
//adjust the card size
|
|
77
|
+
const card = {
|
|
78
|
+
graphics: "shadow-main",
|
|
79
|
+
sizes: "w-65 h-40 xxxs:w-76 md:w-80 md:h-40 rounded-lg md:rounded-lg",
|
|
37
80
|
backgrounds: "bg-white",
|
|
38
|
-
|
|
39
|
-
|
|
81
|
+
hover: "hover:shadow-main-hover hover:scale-[1.03]",
|
|
82
|
+
position: "ml:translate-x-[calc(50vw-600px)]",
|
|
83
|
+
transition: "duration-300",
|
|
84
|
+
displays: "relative display-block overflow-hidden",
|
|
85
|
+
fonts: "font-pretendard-var",
|
|
40
86
|
};
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
87
|
+
const titleBox = {
|
|
88
|
+
container: {
|
|
89
|
+
positions: "relative flex flex-col z-10 gap-2",
|
|
90
|
+
sizes: "w-full h-fit",
|
|
91
|
+
paddings: "p-7",
|
|
92
|
+
},
|
|
93
|
+
title: {
|
|
94
|
+
fonts: "text-lg font-bold md:text-xl",
|
|
95
|
+
colors: titles.titleColor ?? "text-gray-dark ",
|
|
96
|
+
},
|
|
97
|
+
subtitle: {
|
|
98
|
+
fonts: "text-sm font-medium ",
|
|
99
|
+
colors: titles.subtitleColor ?? "text-gray-medium",
|
|
100
|
+
},
|
|
47
101
|
};
|
|
48
|
-
return (
|
|
102
|
+
return (_jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), onClick: onClick, children: _jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.title), children: titles.title }), _jsx("div", { className: cn(titleBox.subtitle), children: titles.subtitle })] }) }) }));
|
|
49
103
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { OnClick } from "../../../interface";
|
|
1
2
|
interface PromotionOptions {
|
|
2
3
|
className: string;
|
|
3
4
|
}
|
|
@@ -6,6 +7,7 @@ export default function Promotion({ banners, option, }: {
|
|
|
6
7
|
option?: Partial<PromotionOptions>;
|
|
7
8
|
}): import("react/jsx-runtime").JSX.Element;
|
|
8
9
|
interface BannerProps {
|
|
10
|
+
onClick?: OnClick;
|
|
9
11
|
image: {
|
|
10
12
|
src: string;
|
|
11
13
|
location?: string;
|
|
@@ -14,7 +14,7 @@ export default function Promotion({ banners, option, }) {
|
|
|
14
14
|
: currentScrollLeft + scrollAmount;
|
|
15
15
|
scrollContainerRef.current.scrollTo({
|
|
16
16
|
left: newScrollLeft,
|
|
17
|
-
behavior: "smooth"
|
|
17
|
+
behavior: "smooth",
|
|
18
18
|
});
|
|
19
19
|
}
|
|
20
20
|
};
|
|
@@ -58,11 +58,11 @@ export default function Promotion({ banners, option, }) {
|
|
|
58
58
|
const hoverButton = {
|
|
59
59
|
sizes: "rounded-full w-12 h-12 scale-50 group-hover:scale-100",
|
|
60
60
|
animation: "duration-300 ",
|
|
61
|
-
test: "bg-gray-medium/20 hover:bg-gray-medium/50 pointer-events-auto backdrop-blur-sm fill-red-500"
|
|
61
|
+
test: "bg-gray-medium/20 hover:bg-gray-medium/50 pointer-events-auto backdrop-blur-sm fill-red-500",
|
|
62
62
|
};
|
|
63
63
|
return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsx("div", { className: cn(deckTitle), children: "\uC0C8\uB85C\uC6B4 \uC18C\uC2DD" }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.image.src))) }) }) }), _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: "" }) })] })] }));
|
|
64
64
|
}
|
|
65
|
-
function Banner({ image, option }) {
|
|
65
|
+
function Banner({ onClick, image, option }) {
|
|
66
66
|
const { background } = option ?? {};
|
|
67
67
|
//ghost card snaps to the end of the viewport
|
|
68
68
|
const ghostCard = {
|
|
@@ -74,19 +74,19 @@ function Banner({ image, option }) {
|
|
|
74
74
|
//adjust the card size
|
|
75
75
|
const card = {
|
|
76
76
|
graphics: "shadow-main",
|
|
77
|
-
sizes: "w-65 h-40 xxxs:w-76 xxxs:h-47.5 md:w-120 md:h-75 rounded-
|
|
77
|
+
sizes: "w-65 h-40 xxxs:w-76 xxxs:h-47.5 md:w-120 md:h-75 rounded-xl md:rounded-2xl",
|
|
78
78
|
backgrounds: background,
|
|
79
79
|
hover: "hover:shadow-main-hover hover:scale-[1.03]",
|
|
80
80
|
position: "ml:translate-x-[calc(50vw-600px)]",
|
|
81
81
|
transition: "duration-300",
|
|
82
82
|
displays: "relative display-block overflow-hidden",
|
|
83
|
-
fonts: "font-pretendard-var"
|
|
83
|
+
fonts: "font-pretendard-var",
|
|
84
84
|
};
|
|
85
85
|
const imageWrapper = {
|
|
86
86
|
sizes: "w-full h-full",
|
|
87
87
|
displays: "absolute",
|
|
88
88
|
positions: "bottom-0 left-0",
|
|
89
|
-
background: `bg-cover bg-center
|
|
89
|
+
background: `bg-cover bg-center`,
|
|
90
90
|
};
|
|
91
|
-
return (_jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), children: _jsx("div", { className: cn(imageWrapper), style: { backgroundImage: `url(${image?.src})` } }) }) }));
|
|
91
|
+
return (_jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), onClick: onClick, children: _jsx("div", { className: cn(imageWrapper), style: { backgroundImage: `url(${image?.src})` } }) }) }));
|
|
92
92
|
}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { Titles } from "../../../interface";
|
|
1
|
+
import { OnClick, Titles } from "../../../interface";
|
|
2
2
|
export default function Service({ banners }: {
|
|
3
3
|
banners: BannerProps[];
|
|
4
4
|
}): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
interface BannerProps {
|
|
6
6
|
titles: Titles;
|
|
7
|
+
onClick?: OnClick;
|
|
7
8
|
image?: {
|
|
8
9
|
src: string;
|
|
9
10
|
isBlur?: boolean;
|
|
@@ -48,7 +48,7 @@ export default function Service({ banners }) {
|
|
|
48
48
|
spacings: "gap-5 ml:mr-[calc(100vw-1200px)]",
|
|
49
49
|
};
|
|
50
50
|
const buttonPositioning = {
|
|
51
|
-
displays: "
|
|
51
|
+
displays: "hidden flex-row md:flex",
|
|
52
52
|
sizes: "w-full h-full",
|
|
53
53
|
spacings: "px-2",
|
|
54
54
|
positions: "absolute top-0 left-0 justify-between items-center opacity-0 group-hover:opacity-100 duration-300",
|
|
@@ -61,7 +61,7 @@ export default function Service({ banners }) {
|
|
|
61
61
|
};
|
|
62
62
|
return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsx("div", { className: cn(deckTitle), children: "\uD1A0\uC140\uC758 \uCC28\uBCC4\uD654\uB41C \uC11C\uBE44\uC2A4" }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) }) }) }), _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: "" }) })] })] }));
|
|
63
63
|
}
|
|
64
|
-
function Banner({ titles, image, option }) {
|
|
64
|
+
function Banner({ titles, onClick, image, option }) {
|
|
65
65
|
const { background } = option ?? {};
|
|
66
66
|
//ghost card snaps to the end of the viewport
|
|
67
67
|
const ghostCard = {
|
|
@@ -73,7 +73,7 @@ function Banner({ titles, image, option }) {
|
|
|
73
73
|
//adjust the card size
|
|
74
74
|
const card = {
|
|
75
75
|
graphics: "shadow-main",
|
|
76
|
-
sizes: "h-100 w-65 xxxs:w-76 md:w-100 md:h-125 rounded-
|
|
76
|
+
sizes: "h-100 w-65 xxxs:w-76 md:w-100 md:h-125 rounded-xl md:rounded-2xl",
|
|
77
77
|
backgrounds: background,
|
|
78
78
|
hover: "hover:shadow-main-hover hover:scale-[1.03]",
|
|
79
79
|
position: "ml:translate-x-[calc(50vw-600px)]",
|
|
@@ -102,5 +102,5 @@ function Banner({ titles, image, option }) {
|
|
|
102
102
|
positions: "bottom-0 left-0",
|
|
103
103
|
background: `bg-cover bg-center`,
|
|
104
104
|
};
|
|
105
|
-
return (_jsx("div", { className: cn(ghostCard), children: _jsxs("div", { className: cn(card), children: [_jsx("div", { className: cn(imageWrapper), style: { backgroundImage: `url(${image?.src})` } }), _jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.subtitle), children: titles.subtitle }), _jsx("div", { className: cn(titleBox.title), children: titles.title })] })] }) }));
|
|
105
|
+
return (_jsx("div", { className: cn(ghostCard), children: _jsxs("div", { className: cn(card), onClick: onClick, children: [_jsx("div", { className: cn(imageWrapper), style: { backgroundImage: `url(${image?.src})` } }), _jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.subtitle), children: titles.subtitle }), _jsx("div", { className: cn(titleBox.title), children: titles.title })] })] }) }));
|
|
106
106
|
}
|
package/package.json
CHANGED
package/version.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
1.0.
|
|
1
|
+
1.0.139
|