@edu-tosel/design 1.0.107 → 1.0.109

package/card/design/NavCard.design.js

@@ -27,6 +27,7 @@ export default function NavCardDesign({ titles, option }) {
         default: "absolute",
         positions: image?.position ?? "bottom-0 right-0",
         sizes: image?.size,
+        displays: "hidden md:block",
     };
     return (_jsxs(Card, { option: option, children: [_jsxs("div", { className: cn(textBox.container), children: [_jsx("div", { className: cn(textBox.title), children: title }), _jsx(LineBreaks, { className: cn(textBox.subtitle), texts: subtitle ?? "" })] }), buttonInLay && (_jsx(Label.Button, { title: buttonInLay.title, onClick: buttonInLay.onClick, option: {
                     className: "absolute bottom-7.5 left-7.5",

package/card/template/ProgressCard/Large.js

@@ -18,7 +18,7 @@ const text = {
 export default function ProgressCardLG({ titles, checks, displays, theme, option, }) {
     const progressBox = {
         positions: "absolute top-7.5 left-7.5",
-        displays: "flex",
+        displays: "hidden lg:flex",
         sizes: "w-150 h-19",
     };
     const stepBox = (flag) => ({
@@ -29,7 +29,7 @@ export default function ProgressCardLG({ titles, checks, displays, theme, option
         texts: flag ? "text-gray-dark" : "text-gray-medium",
     });
     const titleBox = {
-        positions: "absolute top-12 right-12",
+        positions: "absolute top-7.5 md:top-12 right-4 md:right-12",
         displays: "flex flex-col items-end gap-y-3",
     };
     const occupied = Math.round((checks.filter((value) => !!value).length / displays.length) * 100);

package/layout/design/Shelf.design.js

@@ -7,7 +7,7 @@ export default function Shelf({ children, className, option, titles, debug, }) {
     const container = {
         displays: "flex flex-col gap-6",
         sizes: isSize && "w-full h-full lg:h-auto",
-        debug: debug && isDebug(`border-2  border-${debug}`),
+        debug: debug && isDebug(`border-2  ${debug}`),
     };
     const titleBox = {
         container: "flex flex-col h-6 leading-none",

package/layout/template/About/SectionA.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function SectionA() {
-    return (_jsx("div", { className: "w-full min-h-screen bg-[url('/images/aboutus/bg/img-aboutus-cover.png')] flex py-55 justify-center bg-cover bg-center ", children: _jsxs("div", { className: "w-[1200px] h-full flex flex-col gap-8 text-white", children: [_jsx("div", { className: "text-xl", children: "15,000\uC5EC\uAC1C\uC758 \uD559\uAD50\uC640 \uD559\uC6D0\uC758 \uC120\uD0DD" }), _jsxs("div", { className: "text-6xl font-bold", children: ["\uB300\uD55C\uBBFC\uAD6D\uC744 \uB300\uD45C\uD558\uB294", _jsx("br", {}), "\uC601\uC5B4\uC778\uC99D\uC2DC\uD5D8"] }), _jsx("img", { src: "/images/aboutus/p1.png", alt: "", className: "object-fit w-70" })] }) }));
+    return (_jsx("div", { className: "w-full min-h-screen bg-[url('/images/aboutus/bg/img-aboutus-cover-min.png')] flex py-55 justify-center bg-cover bg-center ", children: _jsxs("div", { className: "w-[1200px] h-full flex flex-col gap-8 text-white", children: [_jsx("div", { className: "text-xl", children: "15,000\uC5EC\uAC1C\uC758 \uD559\uAD50\uC640 \uD559\uC6D0\uC758 \uC120\uD0DD" }), _jsxs("div", { className: "text-6xl font-bold", children: ["\uB300\uD55C\uBBFC\uAD6D\uC744 \uB300\uD45C\uD558\uB294", _jsx("br", {}), "\uC601\uC5B4\uC778\uC99D\uC2DC\uD5D8"] }), _jsx("img", { src: "/images/aboutus/p1-min.png", alt: "", className: "object-fit w-70" })] }) }));
 }

package/layout/template/About/SectionB.js

@@ -18,5 +18,5 @@ export default function SectionB() {
             value: "39.3만 개 +",
         },
     ];
-    return (_jsx("div", { className: " w-full min-h-screen bg-[url('/images/aboutus/bg/img-aboutus-sectionb-bg.png')] flex items-center justify-center justify-center bg-cover bg-center flex-col", children: _jsxs("div", { className: "w-[1200px] h-full flex flex-col text-white", children: [_jsxs("div", { className: "flex flex-col gap-2 mb-16", children: [_jsx("div", { className: "text-2xl font-bold", children: "80\uB9CC \uB204\uC801 \uC751\uC2DC\uC790\uAC00 \uBCF4\uB0B4\uB294 \uC2E0\uB8B0" }), _jsxs("div", { className: "text-sm", children: ["\uD1A0\uC140\uC740 20\uB144\uC774 \uB118\uB294 \uC2DC\uAC04\uB3D9\uC548 \uD55C\uAD6D\uD615 \uC601\uC5B4\uC778\uC99D\uD3C9\uAC00\uB97C \uC5F0\uAD6C\uD574\uC654\uACE0,", _jsx("br", {}), "\uD604\uC7AC 80\uB9CC\uBA85\uC774 \uB118\uB294 \uC751\uC2DC\uC790\uB97C \uBC30\uCD9C\uD55C \uB300\uD55C\uBBFC\uAD6D \uB300\uD45C \uC601\uC5B4\uC778\uC99D\uD3C9\uAC00\uB85C \uAC70\uB4ED\uB0AC\uC2B5\uB2C8\uB2E4."] })] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex gap-12 mb-8", children: [_jsxs("div", { className: "flex flex-col w-70", children: [_jsx("div", { className: "text-white/80", children: "\uB204\uC801 \uC815\uAE30\uC2DC\uD5D8 \uC751\uC2DC\uC790" }), _jsx("div", { className: "text-6xl font-bold", children: "83.1\uB9CC +" })] }), _jsxs("div", { className: "flex flex-col ", children: [_jsx("div", { className: "text-white/80", children: "\uC9C0\uD544\uACE0\uC0AC \uAC1C\uCD5C" }), _jsx("div", { className: "text-6xl font-bold", children: "1.4\uCC9C\uD68C" })] })] }), _jsxs("div", { className: "flex gap-12 mb-4", children: [_jsxs("div", { className: "flex flex-col w-70", children: [_jsx("div", { className: "text-white/80", children: "\uB204\uC801 \uC774\uC6A9\uAE30\uAD00 \uC218" }), _jsx("div", { className: "text-6xl font-bold", children: "2.9\uB9CC +" })] }), _jsxs("div", { className: "flex flex-col ", children: [_jsx("div", { className: "text-white/80", children: "\uC120\uBCC4\uB41C \uC131\uC801 \uB370\uC774\uD130" }), _jsx("div", { className: "text-6xl font-bold", children: "39.3\uB9CC \uAC1C +" })] })] }), _jsx("div", { className: "text-2xs text-white/80", children: "2024\uB144 8\uC6D4 \uAE30\uC900" })] })] }) }));
+    return (_jsx("div", { className: " w-full min-h-screen bg-[url('/images/aboutus/bg/img-aboutus-sectionb-bg-min.png')] flex items-center justify-center justify-center bg-cover bg-center flex-col", children: _jsxs("div", { className: "w-[1200px] h-full flex flex-col text-white", children: [_jsxs("div", { className: "flex flex-col gap-2 mb-16", children: [_jsx("div", { className: "text-2xl font-bold", children: "80\uB9CC \uB204\uC801 \uC751\uC2DC\uC790\uAC00 \uBCF4\uB0B4\uB294 \uC2E0\uB8B0" }), _jsxs("div", { className: "text-sm", children: ["\uD1A0\uC140\uC740 20\uB144\uC774 \uB118\uB294 \uC2DC\uAC04\uB3D9\uC548 \uD55C\uAD6D\uD615 \uC601\uC5B4\uC778\uC99D\uD3C9\uAC00\uB97C \uC5F0\uAD6C\uD574\uC654\uACE0,", _jsx("br", {}), "\uD604\uC7AC 80\uB9CC\uBA85\uC774 \uB118\uB294 \uC751\uC2DC\uC790\uB97C \uBC30\uCD9C\uD55C \uB300\uD55C\uBBFC\uAD6D \uB300\uD45C \uC601\uC5B4\uC778\uC99D\uD3C9\uAC00\uB85C \uAC70\uB4ED\uB0AC\uC2B5\uB2C8\uB2E4."] })] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex gap-12 mb-8", children: [_jsxs("div", { className: "flex flex-col w-70", children: [_jsx("div", { className: "text-white/80", children: "\uB204\uC801 \uC815\uAE30\uC2DC\uD5D8 \uC751\uC2DC\uC790" }), _jsx("div", { className: "text-6xl font-bold", children: "83.1\uB9CC +" })] }), _jsxs("div", { className: "flex flex-col ", children: [_jsx("div", { className: "text-white/80", children: "\uC9C0\uD544\uACE0\uC0AC \uAC1C\uCD5C" }), _jsx("div", { className: "text-6xl font-bold", children: "1.4\uCC9C\uD68C" })] })] }), _jsxs("div", { className: "flex gap-12 mb-4", children: [_jsxs("div", { className: "flex flex-col w-70", children: [_jsx("div", { className: "text-white/80", children: "\uB204\uC801 \uC774\uC6A9\uAE30\uAD00 \uC218" }), _jsx("div", { className: "text-6xl font-bold", children: "2.9\uB9CC +" })] }), _jsxs("div", { className: "flex flex-col ", children: [_jsx("div", { className: "text-white/80", children: "\uC120\uBCC4\uB41C \uC131\uC801 \uB370\uC774\uD130" }), _jsx("div", { className: "text-6xl font-bold", children: "39.3\uB9CC \uAC1C +" })] })] }), _jsx("div", { className: "text-2xs text-white/80", children: "2024\uB144 8\uC6D4 \uAE30\uC900" })] })] }) }));
 }

package/layout/template/About/SectionC.js

@@ -6,19 +6,19 @@ export default function SectionC() {
     const [isOpen, setIsOpen] = useState(false);
     const members = [
         {
-            imgSource: "/images/aboutus/section-c/img-aboutus-board-LKS.jpg",
+            imgSource: "/images/aboutus/section-c/img-aboutus-board-LKS-min.jpg",
             name: "이기수",
             position: "명예총재",
             description: "17대 고려대학교 총장",
         },
         {
-            imgSource: "/images/aboutus/section-c/img-aboutus-board-LHY.png",
+            imgSource: "/images/aboutus/section-c/img-aboutus-board-LHY-min.png",
             name: "이호열",
             position: "위원장",
             description: "국제토셀위원회 위원장",
         },
         {
-            imgSource: "/images/aboutus/section-c/img-aboutus-board-KID.png",
+            imgSource: "/images/aboutus/section-c/img-aboutus-board-KID-min.png",
             name: "김임득",
             position: "출제위원장",
             description: "초대 수능출제위원장",

package/layout/template/About/SectionCD.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function SectionCD() {
-    return (_jsx("div", { className: "w-full min-h-screen bg-[url('/images/aboutus/bg/img-aboutus-sectionc2-bg.jpg')] flex justify-center items-end pb-24 bg-cover bg-center", children: _jsxs("div", { className: "w-[1200px] h-[304px] bg-black/50 z-10 flex flex-col gap-2.5 px-8 py-12 text-center rounded-xl", style: { backdropFilter: "blur(40px)" }, children: [_jsx("div", { className: "text-4xl text-white/50", children: "Our Mission" }), _jsxs("div", { className: "text-white text-2xl font-bold", children: ["\uD1A0\uC140\uC740 \uC5F0\uB839\uBCC4 \uC778\uC9C0\uB2E8\uACC4\uB97C \uACE0\uB824\uD558\uC5EC \uC5B8\uC5B4\uB2A5\uB825\uC744 \uAC00\uC7A5 \uCE5C\uBC00\uD558\uAC8C \uD3C9\uAC00\uD569\uB2C8\uB2E4.", " ", _jsx("br", {}), "\uBE44\uC601\uC5B4\uAD8C \uD559\uC0DD\uB4E4\uC5D0\uAC8C \uC54C\uB9DE\uC740 \uD3C9\uAC00\uC81C\uB3C4\uB97C \uD1B5\uD574,", _jsx("br", {}), "\uB204\uAD6C\uB098 \uC601\uC5B4\uB97C \uB3C4\uC804\uD560 \uC218 \uC788\uAC8C \uB9CC\uB4DC\uB294 \uAC83\uC774 \uD1A0\uC140\uC758 \uC874\uC7AC \uC774\uC720\uC785\uB2C8\uB2E4."] })] }) }));
+    return (_jsx("div", { className: "w-full min-h-screen bg-[url('/images/aboutus/bg/img-aboutus-sectionc2-bg-min.jpg')] flex justify-center items-end pb-24 bg-cover bg-center", children: _jsxs("div", { className: "w-[1200px] h-[304px] bg-black/50 z-10 flex flex-col gap-2.5 px-8 py-12 text-center rounded-xl", style: { backdropFilter: "blur(40px)" }, children: [_jsx("div", { className: "text-4xl text-white/50", children: "Our Mission" }), _jsxs("div", { className: "text-white text-2xl font-bold", children: ["\uD1A0\uC140\uC740 \uC5F0\uB839\uBCC4 \uC778\uC9C0\uB2E8\uACC4\uB97C \uACE0\uB824\uD558\uC5EC \uC5B8\uC5B4\uB2A5\uB825\uC744 \uAC00\uC7A5 \uCE5C\uBC00\uD558\uAC8C \uD3C9\uAC00\uD569\uB2C8\uB2E4.", " ", _jsx("br", {}), "\uBE44\uC601\uC5B4\uAD8C \uD559\uC0DD\uB4E4\uC5D0\uAC8C \uC54C\uB9DE\uC740 \uD3C9\uAC00\uC81C\uB3C4\uB97C \uD1B5\uD574,", _jsx("br", {}), "\uB204\uAD6C\uB098 \uC601\uC5B4\uB97C \uB3C4\uC804\uD560 \uC218 \uC788\uAC8C \uB9CC\uB4DC\uB294 \uAC83\uC774 \uD1A0\uC140\uC758 \uC874\uC7AC \uC774\uC720\uC785\uB2C8\uB2E4."] })] }) }));
 }

package/layout/template/About/SectionECards.js

@@ -5,7 +5,7 @@ export default function SectionECards() {
     const [activeCardIndex, setActiveCardIndex] = useState(null);
     const cardComponents = (onClicks) => [
         {
-            imgSource: "img-aboutus-sectione-exam.jpg",
+            imgSource: "img-aboutus-sectione-exam-min.jpg",
             type: "시험 및 평가",
             title1: "언제나 믿을 수 있는",
             title2: "인증평가 제도를 만들어갑니다.",
@@ -13,7 +13,7 @@ export default function SectionECards() {
             onClick: onClicks[0],
         },
         {
-            imgSource: "img-aboutus-sectione-reportcard.jpg",
+            imgSource: "img-aboutus-sectione-reportcard-min.jpg",
             type: "고도화 성적표",
             title1: "점수, 그 이상의 의미를",
             title2: "헤아릴 수 있어야 합니다",
@@ -21,7 +21,7 @@ export default function SectionECards() {
             onClick: onClicks[1],
         },
         {
-            imgSource: "img-aboutus-sectione-toselbooks.jpg",
+            imgSource: "img-aboutus-sectione-toselbooks-min.jpg",
             type: "토셀 교재",
             title1: "영어학습에서 가장 중요한 것,",
             title2: "단계별 학습과 성장",
@@ -29,7 +29,7 @@ export default function SectionECards() {
             onClick: onClicks[2],
         },
         {
-            imgSource: "img-aboutus-sectione-olympiad.jpg",
+            imgSource: "img-aboutus-sectione-olympiad-min.jpg",
             type: "올림피아드",
             title1: "올림피아드, 누구나 도전하고",
             title2: "성장하는 발판이 됩니다.",
@@ -37,7 +37,7 @@ export default function SectionECards() {
             onClick: onClicks[3],
         },
         {
-            imgSource: "img-aboutus-sectione-tosellab.jpg",
+            imgSource: "img-aboutus-sectione-tosellab-min.jpg",
             type: "TOSEL Lab",
             title1: "영어 교육 시스템의 새로운 미래를",
             title2: "제시합니다",
@@ -45,7 +45,7 @@ export default function SectionECards() {
             onClick: onClicks[4],
         },
         {
-            imgSource: "img-aboutus-sectione-expert.jpg",
+            imgSource: "img-aboutus-sectione-expert-min.jpg",
             type: "전문가 과정",
             title1: "좋은 선생님이 토셀과 함께",
             title2: "성장할 수 있도록",

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 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: "" })] })] })] }));
+    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-min.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-min.png", className: "w-60", alt: "" }), _jsx("img", { src: "/images/aboutus/section-e/logo-KAFLE@4x-min.png", className: "w-60", alt: "" }), _jsx("img", { src: "/images/aboutus/section-e/logo-PKETA@4x-min.png", className: "w-60", alt: "" })] })] })] }));
 }

package/layout/template/About/SectionG.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import SelectLG from "../../../widget/template/Select/Select.LG";
 export default function SectionG() {
     const datas = [
         {
@@ -27,5 +29,21 @@ export default function SectionG() {
             title: "경찰 임용시험 가산점 받는 자격증, TOSEL",
         },
     ];
-    return (_jsx("div", { className: "w-full h-auto min-w-[800px] py-30 flex flex-col gap-20 justify-center text-green-dark items-center", children: _jsxs("div", { className: "w-[1200px] ", children: [_jsxs("div", { className: "text-6xl font-bold flex justify-between items-center text-center", children: [_jsx("div", { children: "\uC5B8\uB860 \uC18D\uC758 \uD1A0\uC140" }), _jsx("div", { className: "text-sm ", children: "items five" })] }), datas.map((data, index) => (_jsx("div", { className: "w-full flex text-center flex-col border-b-1 border-gray-light/50", children: _jsxs("div", { className: "w-full h-30 py-8 flex flex-col gap-3", children: [_jsxs("div", { className: "flex gap-3 items-center", children: [_jsx("div", { className: "font-semibold", children: data.company }), _jsx("div", { className: "text-sm text-gray-medium", children: data.date })] }), _jsx("div", { className: "text-xl font-semibold text-left text-black font-light", children: data.title })] }) }, index)))] }) }));
+    const [selectedYear, setSelectedYear] = useState(2018);
+    const filteredDatas = selectedYear === 0
+        ? datas
+        : datas.filter((data) => parseInt(data.date.split(".")[0], 10) === selectedYear);
+    return (_jsx("div", { className: "w-full h-auto min-h-[800px] min-w-[800px] py-30 flex flex-col gap-20 text-green-dark items-center", children: _jsxs("div", { className: "w-[1200px] ", children: [_jsxs("div", { className: "text-6xl font-bold flex justify-between items-center text-center", children: [_jsx("div", { children: "\uC5B8\uB860 \uC18D\uC758 \uD1A0\uC140" }), _jsx("div", { className: "text-sm border-1 border-green-dark rounded-xl", children: _jsx(SelectLG, { state: [selectedYear, setSelectedYear], placeholder: "\uBAA8\uB450\uBCF4\uAE30", selectOptions: [
+                                    [0, "모두보기"],
+                                    [2023, "2023"],
+                                    [2022, "2022"],
+                                    [2021, "2021"],
+                                    [2020, "2020"],
+                                    [2019, "2019"],
+                                    [2018, "2018"],
+                                    [2017, "2017"],
+                                    [2016, "2016"],
+                                    [2015, "2015"],
+                                    [2014, "2014"],
+                                ] }) })] }), filteredDatas.map((data, index) => (_jsx("div", { className: "w-full flex text-center flex-col border-b-1 border-gray-light/50 hover:bg-white/10", children: _jsxs("div", { className: "w-full h-30 py-8 flex flex-col gap-3", children: [_jsxs("div", { className: "flex gap-3 items-center", children: [_jsx("div", { className: "font-semibold", children: data.company }), _jsx("div", { className: "text-sm text-gray-medium", children: data.date })] }), _jsx("div", { className: "text-xl font-semibold text-left text-black font-light", children: data.title })] }) }, index)))] }) }));
 }

package/layout/template/Shelf.js

@@ -17,7 +17,7 @@ function Shelf({ titles, debug, children }) {
 }
 function Wrap({ className, titles, children, debug, option, }) {
     const container = {
-        displays: "flex flex-row flex-wrap",
+        displays: "flex flex-col lg:flex-row flex-wrap",
         gaps: gap[option?.gap ?? "xy"],
         className,
     };
@@ -39,7 +39,7 @@ function Row({ titles, children, className, debug, }) {
 }
 function Col({ titles, children, debug, className, }) {
     const container = {
-        displays: "flex flex-col flex-wrap",
+        displays: "flex flex-col lg:flex-wrap",
         className: className ?? "gap-y-7.5",
     };
     return (_jsx(ShelfDesign, { titles: titles, className: cn(container), option: {

package/layout/template/dashboard/Header.js

@@ -19,20 +19,16 @@ export function Header({ title, logo, notification, menu, option, }) {
         styles: "px-5 xl:px-8 2xl:px-16 box-shadow",
         className,
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? _jsx(_Fragment, { children: logo }) : _jsx("div", { className: "text-2xl", children: "TOSEL" }), _jsx("div", { className: "hidden lg:flex text-3xl font-pretendard-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsxs(Action.Show, { actions: [
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? _jsx(_Fragment, { children: logo }) : _jsx("div", { className: "text-2xl", children: "TOSEL" }), _jsx("div", { className: "hidden lg:flex text-3xl font-pretendard-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsx(Action.Show, { actions: [
                         ["notification", _jsx(Notification, { notifications: notifications })],
                         [menu ? "menu" : false, menu && _jsx(Menu, { ...menu })],
-                    ], children: [_jsx(SVG.Notification, { flag: flag, onClick: () => {
-                                setIsOwn(true);
-                                onClick && onClick();
-                                return setView("notification");
-                            }, color: iconColor }), menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
-                                setIsOwn(true);
-                                return setView("menu");
-                            }, color: iconColor })) : (_jsx(Label.Button, { title: "\uB300\uC2DC\uBCF4\uB4DC", onClick: () => option?.onClick && option.onClick(), option: {
-                                width: "sm",
-                                height: "xs",
-                                background: gradient.bg.greenToRed,
-                                text: "text-white",
-                            } }))] }) })] }));
+                    ], children: menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
+                            setIsOwn(true);
+                            return setView("menu");
+                        }, color: iconColor })) : (_jsx(Label.Button, { title: "\uB300\uC2DC\uBCF4\uB4DC", onClick: () => option?.onClick && option.onClick(), option: {
+                            width: "sm",
+                            height: "xs",
+                            background: gradient.bg.greenToRed,
+                            text: "text-white",
+                        } })) }) })] }));
 }

package/layout/template/dashboard/Navigation.js

@@ -3,7 +3,7 @@ import { cn } from "../../../util";
 function Container({ children }) {
     const container = {
         positions: "fixed xl:static bottom-0 left-0 z-40",
-        displays: "hidden lg:flex flex-row xl:flex-col",
+        displays: "flex flex-row xl:flex-col",
         sizes: "w-full xl:w-auto",
     };
     return (_jsxs("div", { className: cn(container), children: [children, _jsx(Copyright, {})] }));

package/layout/template/home/Navigation.js

@@ -12,7 +12,7 @@ export default function Navigation({ clickBrowser, }) {
         styles: "rounded-r-xl",
     };
     const transition = useTransition(!flag, {
-        from: { width: 80, height: 424 },
+        from: { width: 80, height: 100 },
         leave: { width: 0, height: screen.height, duration: 500 },
     });
     const overlayTransition = useTransition(flag, {
@@ -29,5 +29,5 @@ export default function Navigation({ clickBrowser, }) {
             return () => clearTimeout(timer);
         }
     }, [flag]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-screen fixed top-0 left-0 flex justify-center items-center z-45", children: transition((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), children: [_jsx(SVG.Icon.Calendar, {}), _jsx(SVG.Icon.Notification, {}), _jsx(SVG.Icon.Search, {}), _jsx(SVG.Icon.Browser, { onClick: () => setFlag(!flag) }), _jsx(SVG.Icon.Gift, {})] }))) }), overlayTransition((styles, item) => item && (_jsxs(animated.div, { style: styles, className: "bg-white h-screen fixed top-0 left-0 z-40 flex flex-col justify-center items-center overflow-hidden gap-y-14", children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel", width: 368.56, height: 80.07 }), _jsx("div", { children: "dashboard loading..." })] })))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-screen fixed top-0 left-0 flex justify-center items-center z-45", children: transition((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(container), children: _jsx(SVG.Icon.Browser, { onClick: () => setFlag(!flag) }) }))) }), overlayTransition((styles, item) => item && (_jsxs(animated.div, { style: styles, className: "bg-white h-screen fixed top-0 left-0 z-40 flex flex-col justify-center items-center overflow-hidden gap-y-14", children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel", width: 368.56, height: 80.07 }), _jsx("div", { children: "dashboard loading..." })] })))] }));
 }

package/layout/template/home/Service.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import SVG from "../../../asset/SVG";
 import { cn, gradient } from "../../../util";
 export default function Service({ banners }) {
     const container = {
@@ -20,7 +19,7 @@ export default function Service({ banners }) {
         backgrounds: gradient.bg.greenToRed,
         styles: " rounded-full",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "font-pretendard-bold text-green-dark text-3xl", children: "\uD1A0\uC140\uC758 \uCC28\uBCC4\uD654\uB41C \uC11C\uBE44\uC2A4" }), _jsx("div", { className: cn(body), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) }), _jsxs("div", { className: cn(buttonBox), children: [_jsx(SVG.Symbol.LessThan, { onClick: () => { } }), _jsx(SVG.Symbol.GreaterThan, { onClick: () => { } })] })] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "font-pretendard-bold text-green-dark text-3xl", children: "\uD1A0\uC140\uC758 \uCC28\uBCC4\uD654\uB41C \uC11C\uBE44\uC2A4" }), _jsx("div", { className: cn(body), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) })] }));
 }
 function Banner({ titles, image, option }) {
     const { background } = option ?? {};

package/layout/template/home/layout/Carousel.js

@@ -37,7 +37,7 @@ export default function Carousel({ contents, }) {
         positions: "absolute bottom-0 left-0",
         displays: "flex justify-between items-center",
         sizes: "w-23.25 h-6.25 bg-gray-dark rounded-full",
-        paddings: "px-1.5",
+        paddings: "px-1.5 ml-7.5",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "relative w-64 h-50 flex flex-col", children: [_jsx("div", { className: cn(tagBox), children: TagStyles[tag].title }), _jsx("div", { className: "font-pretendard-bold text-2xl mt-2", children: titles.title }), _jsx(LineBreaks, { className: "mt-7.5", texts: titles.subtitle }), _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: () => setIndex((index - 1 + contents.length) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "text-white", children: [index + 1, "/", contents.length] }), _jsx("button", { onClick: () => setIndex((index + 1) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] })] }), image && (_jsx("img", { src: image, alt: "carousel-image", className: "absolute bottom-0 right-0" }))] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "relative w-64 h-50 flex flex-col pl-7.5", children: [_jsx("div", { className: cn(tagBox), children: TagStyles[tag].title }), _jsx("div", { className: "font-pretendard-bold text-2xl mt-2", children: titles.title }), _jsx(LineBreaks, { className: "mt-7.5", texts: titles.subtitle }), _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: () => setIndex((index - 1 + contents.length) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "text-white", children: [index + 1, "/", contents.length] }), _jsx("button", { onClick: () => setIndex((index + 1) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] })] }), image && (_jsx("img", { src: image, alt: "carousel-image", className: "absolute bottom-0 right-0 w-3/5 " }))] }) }));
 }

package/layout/template/home/layout/Footer.js

@@ -11,7 +11,7 @@ export default function Footer() {
         sizes: "w-full max-w-290",
         paddings: "py-8.5 px-7.5",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "flex items-center gap-9.5", children: [_jsx("img", { src: "/images/logos/tosel.png", width: 147, height: 31.93 }), _jsx("img", { src: "/images/logos/itc-script.png", width: 122, height: 51 })] }), _jsxs("div", { className: "flex justify-between items-center border-b-1 border-gray-dark pb-4 mt-11.5", children: [_jsx("div", { children: "Copyright TOSEL. \u24D2 All Rights Reserved." }), _jsx("div", { className: "flex gap-5", children: buttons.map((button, index) => (_jsx("div", { children: button.title }, index))) })] }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("div", { children: "\uC11C\uC6B8\uC2DC \uC131\uBD81\uAD6C \uC548\uC554\uB85C 145 \uACE0\uB824\uB300\uD559\uAD50 \uB77C\uC774\uC2DC\uC6C0 4\uCE35" }), _jsx("div", { children: "Lyceum Korea University, 145 Anam Ro, Seongbuk-Gu, Seoul, Korea 02841" })] })] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "flex items-center gap-9.5", children: [_jsx("img", { src: "/images/logos/tosel.png", width: 147, height: 31.93 }), _jsx("img", { src: "/images/logos/itc-script.png", width: 122, height: 51 })] }), _jsxs("div", { className: "flex justify-between items-center border-b-1 border-gray-dark pb-4 mt-11.5", children: [_jsx("div", { children: "Copyright TOSEL. \u24D2 All Rights Reserved." }), _jsx("div", { className: "flex gap-5", children: buttons.map((button, index) => (_jsx("div", { children: button.title }, index))) })] }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("div", { children: "\uB300\uD45C\uBC88\uD638 02-923-0505" }), _jsx("div", { children: "\uAC1C\uC778 \uBB38\uC758: tosel_cs@tosel.co.kr" }), _jsx("div", { children: "\uB2E8\uCCB4 \uBB38\uC758: tosel_academy@tosel.co.kr" }), _jsx("div", { children: "\uC11C\uC6B8\uC2DC \uC131\uBD81\uAD6C \uC548\uC554\uB85C 145 \uACE0\uB824\uB300\uD559\uAD50 \uB77C\uC774\uC2DC\uC6C0 4\uCE35" }), _jsx("div", { children: "Lyceum Korea University, 145 Anam Ro, Seongbuk-Gu, Seoul, Korea 02841" })] })] }) }));
 }
 const buttons = [
     {

package/layout/template/home/layout/Header.js

@@ -5,19 +5,19 @@ export default function Header({ logo, rightButton, contents, }) {
     const container = {
         displays: "flex justify-center items-center",
         sizes: "w-full",
-        styles: "bg-white box-shadow",
+        styles: "bg-white box-shadow border-2 border-red-500",
     };
     const body = {
-        displays: "flex items-center justify-between",
+        displays: "flex items-center justify-center md:justify-between",
         className: "w-full max-w-[1200px] h-15",
-        boundaries: "px-12",
+        boundaries: "md:px-12",
     };
     const buttonBox = {
-        fonts: "text-[16px] leading-tight",
+        fonts: "text-[11px] md:text-[16px] leading-tight",
         texts: "text-gray-dark",
         boundaries: "px-2.5",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsx("div", { onClick: logo.onClick, children: logo.node }), _jsxs("div", { className: "flex items-center gap-x-12", children: [_jsx("div", { className: "flex items-center gap-2.5", children: contents.map((button, index) => (_jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }, index))) }), rightButton && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsx("div", { className: "hidden md:block", onClick: logo.onClick, children: logo.node }), _jsxs("div", { className: "flex items-center gap-x-12", children: [_jsx("div", { className: "flex items-center gap-2.5", children: contents.map((button, index) => (_jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }, index))) }), rightButton && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
                                 width: "2xs",
                                 height: "4xs",
                                 background: gradient.bg.greenToRed,

package/layout/template/home/layout/index.js

@@ -6,7 +6,7 @@ export default function Layout({ contents, children, logo, rightButton, }) {
     const container = {
         displays: "flex flex-col",
         sizes: "w-full min-h-screen",
-        overflows: "overflow-x-hidden",
+        overflows: "overflow-x-hidden ",
     };
     return (_jsxs("div", { className: cn(container), children: [_jsx(Header, { logo: logo, rightButton: rightButton, contents: contents }), children, _jsx(Footer, {})] }));
 }

package/layout/template/sign/Box.js

@@ -2,14 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../../util";
 function Box({ sizes, children, className }) {
     const container = {
-        sizes: sizes ?? "w-112.5 p-5",
+        sizes: sizes ?? "w-112.5 p-5 ",
         style: "box-shadow bg-white rounded-xl",
         className,
     };
     return _jsx("div", { className: cn(container), children: children });
 }
 function Fix({ children, className }) {
-    return (_jsx(Box, { className: className, sizes: "w-112.5 h-67.5 pt-10.25 px-5 pb-5", children: children }));
+    return (_jsx(Box, { className: className, sizes: "w-full max-w-112.5 h-65 xs:h-67.5 pt-8 xs:pt-10.25 px-2.5 xs:px-5 pb-2.5 xs:pb-5", children: children }));
 }
 Box.Fix = Fix;
 export default Box;

package/layout/template/sign/Button.js

@@ -15,7 +15,7 @@ function Button({ title, onClick, disabled, size }) {
         }, className: cn(container), children: title }));
 }
 function Inner({ title, onClick }) {
-    return _jsx(Button, { title: title, onClick: onClick, size: "w-102.5 h-13.5" });
+    return (_jsx(Button, { title: title, onClick: onClick, size: "w-full sm:w-102.5 h-13.5" }));
 }
 function Selection({ buttons, state }) {
     const [value, setValue] = state;

package/package.json

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

package/tailwind.config.ts

@@ -203,6 +203,7 @@ export default {
         57.5: "14.375rem",
         62: "15.5rem",
         64: "16rem",
+        65: "16.25rem",
         67.5: "16.875rem",
         68: "17rem",
         69: "17.25rem",

package/version.txt

@@ -1 +1 @@
-1.0.107
+1.0.109

package/widget/template/Input/Form.js

@@ -30,7 +30,7 @@ export default function InputForm({ title, state, placeholder, isValid, type, bu
     };
     const inputBox = {
         styles: styleByFlag(),
-        sizes: "w-102.5 h-13.5",
+        sizes: "w-full sm:w-102.5 h-13.5",
         paddings: `${placeholder && "pt-3"} pl-5`,
         fonts: "text-sm",
         boundaries: "rounded-md outline-none",