@edu-tosel/design 1.0.105 → 1.0.107

package/layout/template/About/SectionCLeaf.js

@@ -68,15 +68,10 @@ export default function SectionCLeaf({ selectedData, isOpenState: [isOpen, setIs
         },
         김임득: {
             details: [
-                "고려대학교 법과대학 졸업",
-                "고려대학교 대학원 법학 석사, 법학 박사",
-                "아카데미 TOEFL저자",
-                "고려대학교 언론대학원 최고위과정 주임교수",
-                "고려대학교 문과대학 연구교수",
-                "대한법학교수회 부회장",
-                "한국경영법률학회 부회장",
-                "마르퀴즈 후즈 후 등재인물 선정",
-                "마르퀴즈 평생 공로상 수상",
+                "초대 수능 출제위원장 역임",
+                "한국 영어 교육 학회장 역임",
+                "한국 영어학회 회장 역임",
+                "한양대학교 영어 교육학과 교수 및 교육대학원 원장",
             ],
             introduce: [
                 "저는 국제 TOSEL 위원회 출제위원장으로서 TOSEL 출제 워원장을 맡아 한국의 영어 교육발전에 몸을 담고있습니다.",

package/layout/template/About/SectionD.js

@@ -67,10 +67,10 @@ export default function SectionD() {
     const handleYearClick = (year) => {
         setSelectedYear(year);
     };
-    return (_jsx("div", { className: "w-full min-h-screen bg-gray-light flex pt-30 justify-center", children: _jsxs("div", { className: "w-[1200px] h-full flex flex-col items-center text-center gap-20 text-black", children: [_jsxs("div", { className: "font-semibold text-2xl", children: ["20\uB144 \uC804\uBD80\uD130 \uC9C0\uAE08\uAE4C\uC9C0", _jsx("br", {}), "\uD1A0\uC140\uC740 \uCD5C\uACE0\uC218\uC900\uC744 \uC704\uD55C \uAE38\uC744 \uAC78\uC5B4\uC654\uC2B5\uB2C8\uB2E4."] }), _jsxs("div", { className: "relative flex gap-12", children: [_jsx("div", { className: "flex flex-col gap-12 z-10", children: years.map((year, index) => (_jsxs("div", { className: "w-22 h-6 flex items-center justify-end text-center gap-3 cursor-pointer", onClick: () => handleYearClick(year), children: [_jsx("div", { className: `font-bold text-sm duration-700 transition-all ${selectedYear === year ? "text-black" : "text-[#B9B9B9]"}`, children: year }), _jsx("div", { className: `relative w-3 h-3 rounded-full transition-transform duration-500 ${selectedYear === year
+    return (_jsx("div", { className: "w-full min-h-[1080px] bg-gray-light flex py-30 justify-center", children: _jsxs("div", { className: "w-[1200px] h-full flex flex-col items-center text-center gap-20 text-black", children: [_jsxs("div", { className: "font-semibold text-2xl", children: ["20\uB144 \uC804\uBD80\uD130 \uC9C0\uAE08\uAE4C\uC9C0", _jsx("br", {}), "\uD1A0\uC140\uC740 \uCD5C\uACE0\uC218\uC900\uC744 \uC704\uD55C \uAE38\uC744 \uAC78\uC5B4\uC654\uC2B5\uB2C8\uB2E4."] }), _jsxs("div", { className: "relative flex gap-12", children: [_jsx("div", { className: "flex flex-col gap-12 z-10", children: years.map((year, index) => (_jsxs("div", { className: "w-22 h-6 flex items-center justify-end text-center gap-3 cursor-pointer", onClick: () => handleYearClick(year), children: [_jsx("div", { className: `font-bold text-sm duration-700 transition-all ${selectedYear === year ? "text-black" : "text-[#B9B9B9]"}`, children: year }), _jsx("div", { className: `relative w-3 h-3 rounded-full transition-transform duration-500 ${selectedYear === year
                                             ? "transform scale-[1.3]"
                                             : "transform scale-100 bg-[#B9B9B9]"}`, children: selectedYear === year && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 rounded-full", style: {
                                                         background: "linear-gradient(269deg, rgba(118, 0, 35) 0%, rgba(16, 86, 82) 100%)",
                                                         padding: "2px",
-                                                    } }), _jsx("div", { className: "absolute inset-[2.5px] bg-white rounded-full" })] })) })] }, index))) }), _jsx("div", { className: "relative w-120 h-full", children: _jsx("div", { className: "absolute top-0 left-1/2 transform -translate-x-1/2 w-[480px] z-0", children: years.map((year) => (_jsx("div", { className: `transition-opacity duration-500 ease-in-out ${selectedYear === year ? "opacity-100" : "opacity-0"}`, children: selectedYear === year && (_jsx("div", { className: "flex flex-col gap-6 text-left", children: Object.entries(histories[year]).map(([_, event], idx) => (_jsx("div", { children: Object.entries(event).map(([date, detail]) => (_jsxs("div", { children: [_jsx("div", { className: "text-gray-medium text-sm font-semibold", children: date }), _jsx("div", { className: "text-black text-sm", children: detail })] }, date))) }, idx))) })) }, year))) }) })] })] }) }));
+                                                    } }), _jsx("div", { className: "absolute inset-[2px] bg-white rounded-full" })] })) })] }, index))) }), _jsx("div", { className: "relative w-120 h-full", children: _jsx("div", { className: "absolute top-0 left-1/2 transform -translate-x-1/2 w-[480px] z-0", children: years.map((year) => (_jsx("div", { className: `transition-opacity duration-500 ease-in-out ${selectedYear === year ? "opacity-100" : "opacity-0"}`, children: selectedYear === year && (_jsx("div", { className: "flex flex-col gap-6 text-left", children: Object.entries(histories[year]).map(([_, event], idx) => (_jsx("div", { children: Object.entries(event).map(([date, detail]) => (_jsxs("div", { children: [_jsx("div", { className: "text-gray-medium text-sm font-semibold", children: date }), _jsx("div", { className: "text-black text-sm", children: detail })] }, date))) }, idx))) })) }, year))) }) })] })] }) }));
 }

package/layout/template/About/SectionE.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SectionECards from "./SectionECards";
 export default function SectionE() {
-    return (_jsxs("div", { className: "w-full min-h-screen py-30 flex flex-col gap-30 items-center", children: [_jsxs("div", { className: "flex flex-col items-center justify-center gap-[34px]", children: [_jsx("div", { className: "text-crimson-burgundy text-4xl font-semibold text-center", children: "\uD1A0\uC140\uACFC \uD568\uAED8\uD558\uB294 \uB2F9\uC2E0\uC758 \uC131\uC7A5" }), _jsx("div", { className: "text-black text-semibold text-sm", children: "\uC120\uC0DD\uB2D8\uACFC \uD559\uC0DD, \uBAA8\uB450\uB97C \uC704\uD55C \uC601\uC5B4\uAD50\uC721\uC758 \uC7A5\uC744 \uB9CC\uB4E4\uACE0\uC790 \uD569\uB2C8\uB2E4." })] }), _jsx("div", { className: "w-[1200px] px-5 grid grid-cols-2 gap-[50px]", children: _jsx(SectionECards, {}) })] }));
+    return (_jsxs("div", { className: "w-full min-h-screen py-30 flex flex-col gap-30 items-center", children: [_jsxs("div", { className: "flex flex-col items-center justify-center gap-[34px]", children: [_jsx("div", { className: "text-crimson-burgundy text-4xl font-bold text-center", children: "\uD1A0\uC140\uACFC \uD568\uAED8\uD558\uB294 \uB2F9\uC2E0\uC758 \uC131\uC7A5" }), _jsx("div", { className: "text-black text-semibold text-sm", children: "\uC120\uC0DD\uB2D8\uACFC \uD559\uC0DD, \uBAA8\uB450\uB97C \uC704\uD55C \uC601\uC5B4\uAD50\uC721\uC758 \uC7A5\uC744 \uB9CC\uB4E4\uACE0\uC790 \uD569\uB2C8\uB2E4." })] }), _jsx("div", { className: "w-[1200px] px-5 grid grid-cols-2 gap-[50px]", children: _jsx(SectionECards, {}) })] }));
 }

package/layout/template/About/SectionECards.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
-import { HiOutlinePlusCircle, HiChevronRight } from "react-icons/hi2";
+import { HiOutlinePlusCircle, HiChevronRight, HiOutlineXCircle, } from "react-icons/hi2";
 export default function SectionECards() {
     const [activeCardIndex, setActiveCardIndex] = useState(null);
-    const cardComponents = [
+    const cardComponents = (onClicks) => [
         {
             imgSource: "img-aboutus-sectione-exam.jpg",
             type: "시험 및 평가",
             title1: "언제나 믿을 수 있는",
             title2: "인증평가 제도를 만들어갑니다.",
             description: "비영어권 국가에 맞지 않는 영어인증평가, 이젠 바뀌어야 합니다. 토셀은 그동안  제 2외국어로서 영어학습에 접근하는 학생들이 어려움을 겪었던 평가제도를 혁신하고자 합니다. 학생과 교사에게는 교과과정과 연계하여 친숙한 주제로 학습을 이끌어 나가고,  교육기관 및 회사에게는 믿을 수 있는 영어 능력 평가 인증을 제공합니다.",
+            onClick: onClicks[0],
         },
         {
             imgSource: "img-aboutus-sectione-reportcard.jpg",
@@ -17,6 +18,7 @@ export default function SectionECards() {
             title1: "점수, 그 이상의 의미를",
             title2: "헤아릴 수 있어야 합니다",
             description: "세심한 관심이 필요한 영어 교육에서 토셀은 단순 성적표를 받는 것으로 끝나지 않습니다. 빅데이터 기반의 AI 분석을 통해 부족한 부분에 대한 상세한 분석을 받아보세요.",
+            onClick: onClicks[1],
         },
         {
             imgSource: "img-aboutus-sectione-toselbooks.jpg",
@@ -24,6 +26,7 @@ export default function SectionECards() {
             title1: "영어학습에서 가장 중요한 것,",
             title2: "단계별 학습과 성장",
             description: "연령별 인지 단계를 고려한 학습은 토셀 교재에도 반영이 되어있습니다. 시험 대비 문제집과 더불어, 듣기, 쓰기, 읽기, 문법 등 언어 영역 전반에 대한 학습교재가 레벨에 맞추어 준비되어 있습니다.",
+            onClick: onClicks[2],
         },
         {
             imgSource: "img-aboutus-sectione-olympiad.jpg",
@@ -31,6 +34,7 @@ export default function SectionECards() {
             title1: "올림피아드, 누구나 도전하고",
             title2: "성장하는 발판이 됩니다.",
             description: "노트북만 있다면, 누구든지 응시할 수 있는 영어 올림피아드. 토셀에서는 누구나 경험할 수 있습니다. 꾸준한 영어 학습에 대한 노력을 큰 결실로 맺을 수 있는 기회를 붙잡아보세요.",
+            onClick: onClicks[3],
         },
         {
             imgSource: "img-aboutus-sectione-tosellab.jpg",
@@ -38,6 +42,7 @@ export default function SectionECards() {
             title1: "영어 교육 시스템의 새로운 미래를",
             title2: "제시합니다",
             description: "토셀의 프리미엄 콘텐츠를 한데 모았습니다. 간편한 정산 시스템으로, 이제는 매달 학생수에 비례하여 금액이 청구됩니다. 지금 바로 다양한 혜택을 만나보세요.",
+            onClick: onClicks[4],
         },
         {
             imgSource: "img-aboutus-sectione-expert.jpg",
@@ -45,17 +50,21 @@ export default function SectionECards() {
             title1: "좋은 선생님이 토셀과 함께",
             title2: "성장할 수 있도록",
             description: "고려대학교 미래교육원과 함께하는 TOSEL 전문가 과정은 영어 선생님들의 성장을 위해 운영되고 있습니다. 토셀의 교육방침과 커리큘럼, 학습자료를 더욱 전문적으로 활용할 수 있도록 오픈된 이 강좌는 영어 선생님이라면 누구나 지원하실 수 있습니다.",
+            onClick: onClicks[5],
         },
     ];
     const handleCardClick = (index) => {
         setActiveCardIndex(activeCardIndex === index ? null : index);
     };
-    return (_jsx(_Fragment, { children: cardComponents.map((card, index) => (_jsxs("div", { className: "w-full p-8 bg-cover bg-center h-[666px] rounded-2xl overflow-hidden text-white gap-5 flex flex-col relative", style: {
+    const handleCloseClick = () => {
+        setActiveCardIndex(null);
+    };
+    return (_jsx(_Fragment, { children: cardComponents([]).map((card, index) => (_jsxs("div", { className: "w-full p-8 bg-cover bg-center h-[666px] rounded-2xl overflow-hidden text-white gap-5 flex flex-col relative", style: {
                 backgroundImage: `url("/images/aboutus/section-f/${card.imgSource}")`,
             }, children: [_jsx("div", { className: "text-md font-normal " +
                         `${activeCardIndex === index ? "opacity-0" : "opacity-100"}`, children: card.type }), _jsxs("div", { className: "text-3xl absolute left-[32px] transition-all duration-100 " +
                         `${activeCardIndex === index
                             ? " top-[32px] z-10 text-[24px] font-bold"
                             : "top-[76px] font-semibold"}`, children: [_jsx("div", { children: card.title1 }), _jsx("div", { children: card.title2 })] }), _jsx("div", { className: `text-xl cursor-pointer z-20 absolute left-[32px] top-[180px] ${activeCardIndex === index ? "opacity-0" : "opacity-100"}`, onClick: () => handleCardClick(index), children: _jsx(HiOutlinePlusCircle, {}) }), _jsxs("div", { className: "w-[490px] text-xl font-normal absolute left-[32px] top-[114px] z-10 transition-all duration-700 " +
-                        `${activeCardIndex === index ? "opacity-100" : "opacity-0"}`, children: [card.description, _jsxs("div", { className: "mt-10 text-sm font-light flex items-center gap-1 cursor-pointer", children: ["\uB354 \uC54C\uC544\uBCF4\uAE30 ", _jsx(HiChevronRight, {})] })] }), _jsx("div", { className: `w-full h-full bg-black/50 absolute top-0 left-0 transition-opacity duration-500 ${activeCardIndex === index ? "opacity-100" : "opacity-0"}`, style: { backdropFilter: "blur(5px)" } })] }, index))) }));
+                        `${activeCardIndex === index ? "opacity-100" : "opacity-0"}`, children: [card.description, _jsxs("div", { onClick: card.onClick, className: "mt-10 text-sm font-light flex items-center gap-1 cursor-pointer", children: ["\uB354 \uC54C\uC544\uBCF4\uAE30 ", _jsx(HiChevronRight, {})] })] }), _jsx("div", { className: `w-full h-full bg-black/50 absolute top-0 left-0 transition-opacity duration-500 ${activeCardIndex === index ? "opacity-100" : "opacity-0"}`, style: { backdropFilter: "blur(5px)" } }), _jsx("div", { className: `text-xl cursor-pointer z-20 absolute left-[32px] bottom-[32px] ${activeCardIndex === index ? "opacity-100" : "opacity-0"}`, onClick: handleCloseClick, children: _jsx(HiOutlineXCircle, {}) })] }, index))) }));
 }

package/layout/template/About/SectionF.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function SectionF() {
-    return (_jsxs("div", { className: "w-full h-auto min-w-[800px] py-16 flex flex-col gap-16 justify-center text-black", children: [_jsxs("div", { className: "text-2xl font-semibold flex justify-center items-center text-center", children: ["\uAD6D\uB0B4 \uC8FC\uC694 \uC5B8\uC5B4/\uAD50\uC721 \uAE30\uAD00\uB4E4\uC774", _jsx("br", {}), "\uD1A0\uC140\uACFC \uD568\uAED8\uD569\uB2C8\uB2E4."] }), _jsxs("div", { className: "flex justify-center items-center text-center flex-col gap-2 font-semibold", children: [_jsx("div", { className: "text-sm", children: "\uCD9C\uC81C \uBC0F \uC778\uC99D:" }), _jsx("img", { src: "/images/aboutus/section-f/logo-KU.png", className: "w-[230px]", alt: "" })] }), _jsxs("div", { className: "flex justify-center items-center text-center flex-col font-semibold gap-2", children: [_jsx("div", { className: "text-sm", children: "\uD559\uD68C \uC778\uC99D \uD68D\uB4DD:" }), _jsxs("div", { className: "flex", children: [_jsx("img", { src: "/images/aboutus/section-e/logo-\uD55C\uAD6D\uC74C\uC131\uD559\uD68C@4x.png", className: "w-60", alt: "" }), _jsx("img", { src: "/images/aboutus/section-e/logo-ALAK@4x.png", className: "w-60", alt: "" }), _jsx("img", { src: "/images/aboutus/section-e/logo-KAFLE@4x.png", className: "w-60", alt: "" }), _jsx("img", { src: "/images/aboutus/section-e/logo-PKETA@4x.png", className: "w-60", alt: "" })] })] })] }));
+    return (_jsxs("div", { className: "w-full bg-gray-light h-auto min-w-[800px] py-16 flex flex-col gap-16 justify-center text-black", children: [_jsxs("div", { className: "text-2xl font-semibold flex justify-center items-center text-center", children: ["\uAD6D\uB0B4 \uC8FC\uC694 \uC5B8\uC5B4/\uAD50\uC721 \uAE30\uAD00\uB4E4\uC774", _jsx("br", {}), "\uD1A0\uC140\uACFC \uD568\uAED8\uD569\uB2C8\uB2E4."] }), _jsxs("div", { className: "flex justify-center items-center text-center flex-col gap-2 font-semibold", children: [_jsx("div", { className: "text-sm", children: "\uCD9C\uC81C \uBC0F \uC778\uC99D:" }), _jsx("img", { src: "/images/aboutus/section-f/logo-KU.png", className: "w-[230px]", alt: "" })] }), _jsxs("div", { className: "flex justify-center items-center text-center flex-col font-semibold gap-2", children: [_jsx("div", { className: "text-sm", children: "\uD559\uD68C \uC778\uC99D \uD68D\uB4DD:" }), _jsxs("div", { className: "flex", children: [_jsx("img", { src: "/images/aboutus/section-e/logo-\uD55C\uAD6D\uC74C\uC131\uD559\uD68C@4x.png", className: "w-60", alt: "" }), _jsx("img", { src: "/images/aboutus/section-e/logo-ALAK@4x.png", className: "w-60", alt: "" }), _jsx("img", { src: "/images/aboutus/section-e/logo-KAFLE@4x.png", className: "w-60", alt: "" }), _jsx("img", { src: "/images/aboutus/section-e/logo-PKETA@4x.png", className: "w-60", alt: "" })] })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.105",
+  "version": "1.0.107",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/version.txt

@@ -1 +1 @@
-1.0.105
+1.0.107