@edu-tosel/design 1.0.163 → 1.0.164

package/layout/template/Regexam/Banner.js

@@ -1,31 +1,182 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
+import { useState, useEffect } from "react";
 export default function Banner() {
-    const container = {
-        sizes: "w-full h-screen",
-        displays: "flex justify-center items-center",
-        spacings: "px-5",
-        textstyles: "antialiased",
-        backgrounds: "bg-[url('/images/olympiad/img-oly-bg-a.png')] bg-cover bg-center",
+    const [isHidden, setIsHidden] = useState(false);
+    useEffect(() => {
+        const handleScroll = () => {
+            if (window.scrollY > 50) {
+                setIsHidden(true);
+            }
+            else {
+                setIsHidden(false);
+            }
+        };
+        window.addEventListener("scroll", handleScroll);
+        return () => {
+            window.removeEventListener("scroll", handleScroll);
+        };
+    }, []);
+    const handleScroll = () => {
+        window.scrollBy({
+            top: window.innerHeight,
+            behavior: "smooth",
+        });
     };
-    const explainer = {
-        textstyles: "text-xl md:text-2xl font-pretendard-medium text-gray-light mix-blend-difference sm:text-green-dark sm:mix-blend-normal",
+    const container = {
+        sizes: "relative w-full md:h-screen",
+        displays: "flex justify-center items-center flex-col",
+        spacings: "md:px-10 md:pt-0 px-5 pt-5",
+        textstyles: "antialiased font-pretendard-var",
+        backgrounds: "bg-white bg-cover bg-center",
     };
     const brandTextCore = {
-        textstyles: "text-7xl md:text-8xl font-pretendard-bold text-green-dark leading-none mt-6 mix-blend-plus-darker",
+        spacings: "mb-6",
+        sizes: "xm:h-20 h-12",
         animations: "duration-300",
     };
     const brandTextSub = {
-        textstyles: "text-2xl md:text-3xl font-pretendard-bold text-green-dark",
+        textstyles: "text-lg lg:text-xl font-pretendard-bold text-gray-dark",
         animations: "duration-300",
     };
+    const explainer = {
+        textstyles: "lg:text-lg font-medium text-gray-dark text-base",
+    };
+    //button styling
     const AdvertButton = {
+        displays: "relative overflow-hidden flex justify-center items-center",
         sizes: "h-fit w-full xxxs:w-fit rounded-lg",
-        backgrounds: "bg-green-light",
-        textstyles: "text-lg text-green-dark font-pretendard-medium text-center",
-        spacings: "px-3 py-2 mt-30 xxxs:mt-16",
-        hoveractions: "hover:bg-green-dark hover:text-white",
-        animations: "duration-300",
+        textstyles: "text-lg font-pretendard-medium text-center text-crimson-burgundy hover:text-white",
+        spacings: "px-3 py-2 md:mt-16 mt-10",
+        animations: "group duration-300",
+    };
+    //before hover gradient
+    const buttonBackground1 = {
+        displays: "absolute inset-0",
+        backgrounds: "bg-gradient-to-r from-crimson-burgundy/10 to-green-dark/10",
+    };
+    //after hover gradient
+    const buttonBackground2 = {
+        displays: "absolute inset-0",
+        backgrounds: "bg-gradient-to-r from-crimson-burgundy to-green-dark",
+        animation: "transition-opacity duration-300 opacity-0 group-hover:opacity-100",
+    };
+    const buttonText = {
+        textstyles: "text-lg font-pretendard-medium text-center relative z-10",
+    };
+    const carouselWrapper = {
+        sizes: "ml:w-200 md:w-[calc(100vw-376px)] w-full md:h-full h-fit xxs:max-h-80 rounded-lg flex",
+        spacings: "md:mt-0 mt-20 md:m-0 mb-5",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: "flex flex-col w-full justify-start max-w-6xl", children: [_jsxs("div", { className: cn(explainer), children: ["\uD559\uC0DD\uC774\uB77C\uBA74, ", _jsx("br", {}), "\uC804\uAD6D \uC5B4\uB514\uC5D0\uC11C\uB098 \uCC38\uC5EC \uAC00\uB2A5\uD55C"] }), _jsx("div", { className: cn(brandTextCore), children: "VOCA" }), _jsx("div", { className: cn(brandTextSub), children: "\uC62C\uB9BC\uD53C\uC544\uB4DC" }), _jsx("a", { href: "https://olympiad.tosel.co.kr/dashboard", className: cn(AdvertButton), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] }) }));
+    const scrollGuideWrapper = {
+        display: "absolute hidden md:flex flex-col justify-center items-center",
+        sizes: "w-full",
+        spacings: "bottom-0 mb-10",
+        scrollAction: `transition-opacity duration-500 ${isHidden ? "opacity-0" : "opacity-100"}`,
+    };
+    const scrollGuideText = {
+        sizes: "w-full",
+        textstyles: "font-medium text-green-dark text-base",
+        spacings: "text-center",
+    };
+    const scrollGuideButton = {
+        sizes: "w-10 h-10 mt-10",
+        backgrounds: "bg-white group hover:bg-green-dark",
+        other: "animate-bounce bg-white p-1 w-10 h-10 ring-1 ring-slate-900/5 shadow-lg rounded-full flex items-center justify-center",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex flex-col md:flex-row w-full max-w-6xl justify-between items-center", children: [_jsxs("div", { className: "flex flex-col w-full md:w-fit h-full shrink-0 justify-start", children: [_jsx("div", { className: cn(brandTextSub), children: "about" }), _jsx("div", { className: cn(brandTextCore), children: _jsx("img", { src: "/images/logos/logo-tosel-main.svg", alt: "", className: "h-full" }) }), _jsxs("div", { className: cn(explainer), children: ["15,000\uC5EC\uAC1C\uC758 \uD559\uAD50\uC640 \uD559\uC6D0\uC774 \uC120\uD0DD\uD55C ", _jsx("br", {}), "\uB300\uD55C\uBBFC\uAD6D \uB300\uD45C \uC601\uC5B4 \uC778\uC99D\uC2DC\uD5D8"] }), _jsxs("div", { onClick: () => window.location.href = `https://olympiad.tosel.co.kr/dashboard`, className: cn(AdvertButton), children: [_jsx("div", { className: cn(buttonBackground1) }), _jsx("div", { className: cn(buttonBackground2) }), _jsx("div", { className: cn(buttonText), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] })] }), _jsx("div", { className: cn(carouselWrapper), children: _jsx(InfiniteCarousel, {}) })] }), _jsxs("div", { className: cn(scrollGuideWrapper), children: [_jsx("div", { className: cn(scrollGuideText), children: "\uC790\uC138\uD55C \uB0B4\uC6A9\uC744 \uBCF4\uB824\uBA74 \uC544\uB798\uB85C \uC2A4\uD06C\uB864 \uD574\uBCF4\uC138\uC694" }), _jsx("div", { className: cn(scrollGuideButton), onClick: handleScroll, children: _jsx("svg", { className: "w-6 h-6 text-green-dark group-hover:text-white", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }) })] })] }));
 }
+const InfiniteCarousel = () => {
+    const slides = [
+        {
+            title: "Cocoon",
+            subtitle: "영어를 시작하는 단계",
+            img: "https://resource.tosel.co.kr/images/img-character-co.png",
+            colorT: "text-cocoon-green",
+            colorB: "bg-cocoon-green/10",
+        },
+        {
+            title: "Pre-Starter",
+            subtitle: "영어를 시작하는 단계",
+            img: "https://resource.tosel.co.kr/images/img-character-ps.png",
+            colorT: "text-ps-pink",
+            colorB: "bg-ps-pink/10",
+        },
+        {
+            title: "Starter",
+            subtitle: "밑바탕을 다지는 단계",
+            img: "https://resource.tosel.co.kr/images/img-character-st.png",
+            colorT: "text-st-orange",
+            colorB: "bg-st-orange/10",
+        },
+        {
+            title: "Basic",
+            subtitle: "영어실력의 도전 단계",
+            img: "https://resource.tosel.co.kr/images/img-character-ba.png",
+            colorT: "text-ba-yellow",
+            colorB: "bg-ba-yellow/10",
+        },
+        {
+            title: "Junior",
+            subtitle: "영어의 실전 단계",
+            img: "https://resource.tosel.co.kr/images/img-character-jr.png",
+            colorT: "text-jr-blue",
+            colorB: "bg-jr-blue/10",
+        },
+        {
+            title: "High Junior",
+            subtitle: "영어의 고급화 단계",
+            img: "https://resource.tosel.co.kr/images/img-character-hj.png",
+            colorT: "text-hj-blue",
+            colorB: "bg-hj-blue/10",
+        },
+        {
+            title: "Advanced",
+            subtitle: "영어의 고급화 단계",
+            img: "https://resource.tosel.co.kr/images/img-character-adv.png",
+            colorT: "text-gray-dark",
+            colorB: "bg-white",
+        },
+    ];
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const totalSlides = slides.length;
+    const nextSlide = () => {
+        setCurrentIndex((prevIndex) => (prevIndex + 1) % totalSlides);
+    };
+    const prevSlide = () => {
+        setCurrentIndex((prevIndex) => (prevIndex - 1 + totalSlides) % totalSlides);
+    };
+    useEffect(() => {
+        const interval = setInterval(nextSlide, 3000);
+        return () => clearInterval(interval);
+    }, []);
+    const card = {
+        displays: "flex items-center",
+        sizes: "w-full h-full md:max-h-80",
+        spacings: "p-5",
+    };
+    const title = {
+        textStyles: "font-bold sm:text-xl text-lg",
+    };
+    const subTitle = {
+        textStyles: "font-medium sm:text-sm text-xs text-gray-medium",
+    };
+    const levelBar = {
+        displays: "flex flex-row justify-start",
+        sizes: "w-full h-4 rounded-full",
+        backgroudns: "bg-white shadow-main",
+        spacings: "mt-10",
+    };
+    const levelFill = {
+        sizes: "h-full rounded-full",
+        backgrounds: "bg-gradient-to-r from-crimson-burgundy to-green-dark",
+    };
+    return (_jsx("div", { className: "w-full h-full xs:max-h-80 overflow-hidden rounded-lg shadow-main", children: _jsx("div", { className: "flex w-full xs:max-h-80 transition-transform duration-500", style: {
+                transform: `translateX(-${currentIndex * 100}%)`,
+            }, children: slides.map((slide, index) => {
+                const widthPercentage = ((index + 1) / slides.length) * 100;
+                return (_jsx("div", { className: cn(card, `${slide.colorB}`), style: { flex: "0 0 100%" }, children: _jsxs("div", { className: "flex xxs:flex-row flex-col-reverse items-center justify-center h-full w-full", children: [_jsxs("div", { className: "flex flex-col justify-center items-start w-full p-5", children: [_jsx("div", { className: "text-xl font-black text-crimson-burgundy mb-6", children: index + 1 }), _jsx("div", { className: cn(title, `${slide.colorT}`), children: slide.title }), _jsx("div", { className: cn(subTitle), children: slide.subtitle }), _jsx("div", { className: cn(levelBar), children: _jsx("div", { className: cn(levelFill), style: {
+                                                width: `${widthPercentage}%`,
+                                            } }) })] }), _jsx("div", { className: "w-9/12 md:w-full h-full max-h-80", children: _jsx("img", { src: slide.img, alt: "" }) })] }) }, index));
+            }) }) }));
+};

package/layout/template/Regexam/Evaluation.d.ts

@@ -0,0 +1,3 @@
+export default function Evaluation(): import("react/jsx-runtime").JSX.Element;
+export declare function GaugeTest(): import("react/jsx-runtime").JSX.Element;
+export declare function FourSection(): import("react/jsx-runtime").JSX.Element;

package/layout/template/Regexam/Evaluation.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function Evaluation() {
+    const container = {
+        displays: "flex flex-col justify-center items-center",
+        sizes: "w-full h-fit",
+        spacings: "pt-20 md:px-10 px-5 pb-20",
+    };
+    //controlls max-w
+    const mainWrapper = {
+        displays: "flex flex-col",
+        sizes: "w-full max-w-6xl",
+    };
+    const titleWrapper = {
+        displays: "flex flex-col gap-0",
+        sizes: "w-full h-fit",
+        spacings: "pb-8",
+    };
+    const sectionTitle = {
+        sizes: "w-full h-fit",
+        textStyles: "font-bold text-crimson-burgundy text-xl xxs:text-2xl lg:text-3xl",
+    };
+    const sectionSubTitle = {
+        sizes: "w-full h-fit",
+        textStyles: "font-medium text-gray-medium text-sm md:text-base",
+    };
+    const grayBox = {
+        sizes: "w-full h-fit rounded-2xl",
+        spacings: "p-5 xxs:p-8 md:p-10  my-0 xs:my-10",
+        backgrounds: "bg-gray-light/50",
+        textstyles: "font-medium text-gray-dark text-base md:text-lg leading-loose",
+    };
+    const explainBoxWrapper = {
+        displays: "flex flex-col md:flex-row",
+        sizes: "w-full",
+        spacings: "gap-10 mt-10",
+    };
+    const explainBox = {
+        displays: "flex flex-col",
+        sizes: "w-full",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(mainWrapper), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(sectionTitle), children: "\uD1A0\uC140\uC758 \uD3C9\uAC00\uBC29\uC2DD" }), _jsx("div", { className: cn(sectionSubTitle), children: "TOSEL\uC740 PBT\uB97C \uD1B5\uD574 \uAC04\uC811/\uC9C1\uC811\uD3C9\uAC00\uB97C \uBAA8\uB450 \uC2E4\uC2DC\uD569\uB2C8\uB2E4." })] }), _jsx("div", { className: cn(grayBox), children: "TOSEL\uC740 \uAC01\uAE09 \uD559\uAD50 \uAD50\uACFC\uACFC\uC815\uACFC \uC5F0\uB839\uBCC4 \uC778\uC9C0\uB2E8\uACC4\uB97C \uACE0\uB824\uD558\uC5EC \uB2E8\uACC4\uBCC4 \uB09C\uC774\uB3C4\uC640 \uBB38\uD56D\uC73C\uB85C \uC601\uC5B4 \uC219\uB2EC \uC815\uB3C4\uB97C \uCE21\uC815\uD558\uB294 \uC601\uC5B4 \uC0AC\uC6A9\uC790 \uC911\uC2EC\uC758 \uB9DE\uCDA4\uC2DD \uC601\uC5B4\uB2A5\uB825\uC778\uC99D \uC2DC\uD5D8\uC81C\uB3C4\uB85C, \uC778\uC9C0\uC801-\uD559\uBB38\uC801 \uC5B8\uC5B4 \uC0AC\uC6A9\uC758 \uC720\uCC3D\uC131 (Congnitive-Academic Language Proficientcy, CALP)\uACFC \uAE30\uBCF8\uC801-\uAC1C\uC778\uC801 \uC758\uC0AC\uC18C\uD1B5\uB2A5\uB825 (Basic Interpersonal Communication Skill, BICS)\uC744 \uC5C4\uBC00\uD788 \uAD6C\uBD84\uD558\uC5EC \uC218\uD5D8\uC790\uC758 \uC5B8\uC5B4\uB2A5\uB825\uC744 \uAC00\uC7A5 \uCE5C\uBC00\uD558\uAC8C \uD3C9\uAC00\uD558\uB294 \uC2DC\uD5D8\uC785\uB2C8\uB2E4." }), _jsxs("div", { className: cn(explainBoxWrapper), children: [_jsxs("div", { className: cn(explainBox), children: [_jsx("div", { className: "font-bold text-gray-dark text-xl", children: "\uC778\uC9C0\uB2E8\uACC4\uB97C \uACE0\uB824\uD55C \uD3C9\uAC00" }), _jsx("div", { className: "w-full h-0.5 bg-gradient-to-r from-crimson-burgundy to-green-dark mt-1" }), _jsx("div", { className: "mt-5 font-medium text-gray-dark text-base md:text-lg leading-normal", children: "TOSEL\uC740 \uC5F0\uB839\uBCC4 \uC778\uC9C0 \uB2E8\uACC4\uB97C \uACE0\uB824\uD558\uC5EC 7\uB2E8\uACC4\uB85C \uC138\uBD84\uD654\uB418\uC5B4 \uC788\uC2B5\uB2C8\uB2E4. \uC218\uB2A5 \uCD9C\uC81C\uC704\uC6D0\uC774 \uC9C1\uC811 \uAC1C\uBC1C\uD55C \uC9C1\uC811\uD3C9\uAC00 \uBC0F \uAC04\uC811\uD3C9\uAC00 \uBC29\uC2DD\uC73C\uB85C, \uC5B8\uC5B4\uC758 4\uC694\uC18C \uBAA8\uB450\uB97C \uD3C9\uAC00\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." }), _jsx(GaugeTest, {})] }), _jsxs("div", { className: cn(explainBox), children: [_jsx("div", { className: "font-bold text-gray-dark text-xl", children: "\uC5B8\uC5B4\uC758 \uB124\uAC00\uC9C0 \uC694\uC18C \uD3C9\uAC00" }), _jsx("div", { className: "w-full h-0.5 bg-gradient-to-r from-crimson-burgundy to-green-dark mt-1" }), _jsx("div", { className: "mt-5 font-medium text-gray-dark text-base md:text-lg leading-normal", children: "TOSEL\uC740 \uC5B8\uC5B4\uC758 \uB124 \uAC00\uC9C0 \uC694\uC18C\uC778 \uC77D\uAE30, \uB4E3\uAE30, \uB9D0\uD558\uAE30, \uC4F0\uAE30 \uC601\uC5ED\uC744 \uBAA8\uB450 \uD3C9\uAC00\uD569\uB2C8\uB2E4." }), _jsx(FourSection, {})] })] })] }) }));
+}
+import { useState, useRef } from 'react';
+const snapPoints = [10, 25, 40, 55, 70, 85, 100];
+const contentMap = {
+    10: { name: "Cocoon", age: "3-5세의 미취학 아동 대상", code: "K5-K7", detail: "기본적인 의사소통 능력" },
+    25: { name: "Pre-Starter", age: "초등학교 1-2학년 대상", code: "P1-P2", detail: "친숙한 주제에 대한 단어, 짧은 대화, 기본 표현 능력" },
+    40: { name: "Starter", age: "초등학교 3-4학년 대상", code: "P3-P4", detail: "흔히 접하는 주제에 대한 짧은 문장 이해, 실질적인 영어 기초 의사소통 능력" },
+    55: { name: "Basic", age: "초등학교 5-6학년 대상", code: "P5-P6", detail: "개인정보, 일상활동, 미래계획, 과거경험에 대한 구어/문어 형태의 의사소통 능력" },
+    70: { name: "Junior", age: "중학생 대상", code: "M1-M3", detail: "일반적인 주제에 대한 실용문, 짧은 단락 이해, 일상대화 관련 의사소통 능력" },
+    85: { name: "High-Junior", age: "고등학생 대상", code: "H1-H3", detail: "넓은 범위의 사회/학문 분야 중문과 복잡한 문장 등의 다양한 문장구조의 사용 능력" },
+    100: { name: "Advanced", age: "대학생, 성인 대상", code: "Adult", detail: "대학/대학원에서의 수학능력 및 취업, 직업근무환경에 필요한 실용영어능력에 대한 평가" },
+};
+export function GaugeTest() {
+    const [value, setValue] = useState(10);
+    const [isDragging, setIsDragging] = useState(false);
+    const gaugeRef = useRef(null);
+    const handleDrag = (clientX) => {
+        if (gaugeRef.current) {
+            const rect = gaugeRef.current.getBoundingClientRect();
+            const offsetX = clientX - rect.left;
+            let newValue = Math.round((offsetX / rect.width) * 100);
+            newValue = Math.max(10, Math.min(newValue, 100));
+            newValue = snapPoints.reduce((prev, curr) => Math.abs(curr - newValue) < Math.abs(prev - newValue) ? curr : prev);
+            setValue(newValue);
+        }
+    };
+    const handleMouseMove = (e) => {
+        if (isDragging) {
+            handleDrag(e.clientX);
+        }
+    };
+    const handleTouchMove = (e) => {
+        if (isDragging) {
+            handleDrag(e.touches[0].clientX);
+        }
+    };
+    const handleMouseDown = () => {
+        setIsDragging(true);
+    };
+    const handleMouseUp = () => {
+        setIsDragging(false);
+    };
+    const handleTouchStart = () => {
+        setIsDragging(true);
+    };
+    const handleTouchEnd = () => {
+        setIsDragging(false);
+    };
+    const displayContent = () => {
+        const content = contentMap[value];
+        return content ? (_jsxs("div", { className: "flex flex-col w-full justify-center items-start", children: [_jsx("div", { className: "font-bold text-xl text-crimson-burgundy w-full", children: content.name }), _jsxs("div", { className: "font-medium text-sm text-crimson-burgundy", children: [content.age, " / ", content.code] }), _jsx("div", { className: "w-full text-sm xs:text-base font-medium mt-5 text-gray-dark", children: content.detail })] })) : null;
+    };
+    const container = {
+        displays: "flex flex-col items-center",
+        sizes: "gap-y-4 rounded-lg xs:p-8 p-4",
+        bacgrounds: "shadow-main bg-white",
+        spacings: "mt-8"
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "w-full flex justify-center items-center font-medium text-green-dark text-xs", children: "\uC544\uB798\uC758 \uAC8C\uC774\uC9C0\uB97C \uC6C0\uC9C1\uC5EC\uBCF4\uC138\uC694" }), _jsx("div", { className: "w-full max-w-xl p-1 rounded-full bg-gray-light", children: _jsxs("div", { ref: gaugeRef, className: "relative w-full h-8 bg-gray-light rounded-full cursor-pointer", onMouseMove: handleMouseMove, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onClick: (e) => handleDrag(e.clientX), onTouchMove: handleTouchMove, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: [snapPoints.map((point) => (_jsx("div", { className: "absolute w-1 h-1 bg-gray-medium rounded-full top-4", style: { left: `${point - 3}%`, transform: 'translate(-50%, -50%)' } }, point))), _jsx("div", { className: "shadow-green absolute top-0 h-full bg-gradient-to-r from-green-dark to-crimson-burgundy rounded-full transition-all duration-300", style: { width: `${value}%` } }), _jsx("div", { className: "absolute top-1/2 left-0 transform -translate-x-1/2 -translate-y-1/2 xs:w-6 xs:h-6 w-3 h-3 bg-white rounded-full transition-all duration-300", style: { left: `${value}%`, marginLeft: "-16px" } })] }) }), _jsx("div", { className: "text-lg font-bold w-full mt-5", children: displayContent() })] }));
+}
+export function FourSection() {
+    const graphWrapper = {
+        sizes: "relative w-full h-fit overflow-visible mt-8",
+    };
+    const xExplainer = {
+        displays: "absolute flex flex-row top-0 ml-6",
+        sizes: "w-[calc(100%-24px)] h-6",
+    };
+    const yExplainer = {
+        displays: "absolute flex flex-col top-6",
+        sizes: "h-[calc(100%-24px)] w-6",
+    };
+    const graphContainer = {
+        sizes: "w-[calc(100%-24px)] h-fit rounded-lg",
+        displays: "grid grid-cols-2 relative",
+        backgrounds: "bg-gradient-to-r from-crimson-burgundy/10 to-green-dark/10 hover:shadow-main duration-300",
+        spacings: "mt-6 ml-6",
+    };
+    const cell = {
+        displays: "flex flex-col gap-1 justify-center items-center",
+        spacings: "py-4",
+    };
+    const title = {
+        textstyles: "font-bold text-lg text-gray-dark",
+    };
+    const subtitle = {
+        textstyles: "font-medium text-base text-gray-medium",
+    };
+    return (_jsxs("div", { className: cn(graphWrapper), children: [_jsxs("div", { className: cn(graphContainer), children: [_jsxs("div", { className: cn(cell), children: [_jsx("div", { className: cn(title), children: "\uC4F0\uAE30" }), _jsx("div", { className: cn(subtitle), children: "Writing" })] }), _jsxs("div", { className: cn(cell), children: [_jsx("div", { className: cn(title), children: "\uB9D0\uD558\uAE30" }), _jsx("div", { className: cn(subtitle), children: "Speaking" })] }), _jsxs("div", { className: cn(cell), children: [_jsx("div", { className: cn(title), children: "\uC77D\uAE30" }), _jsx("div", { className: cn(subtitle), children: "Reading" })] }), _jsxs("div", { className: cn(cell), children: [_jsx("div", { className: cn(title), children: "\uB4E3\uAE30" }), _jsx("div", { className: cn(subtitle), children: "Listening" })] }), _jsx("div", { className: "absolute w-full h-full top-0 bottom-0", children: _jsx("div", { className: "h-full w-[1px] m-auto bg-white" }) }), _jsx("div", { className: "absolute flex w-full h-full top-0 bottom-0 justify-center items-center", children: _jsx("div", { className: "w-full h-[1px] my-auto bg-white" }) })] }), _jsxs("div", { className: cn(xExplainer), children: [_jsx("div", { className: "w-full h-full flex font-medium text-xs text-gray-medium text-center items-center justify-center", children: "\uBB38\uC790\uC5B8\uC5B4" }), _jsx("div", { className: "w-full h-full flex font-medium text-xs text-gray-medium text-center items-center justify-center", children: "\uC74C\uC131\uC5B8\uC5B4" })] }), _jsxs("div", { className: cn(yExplainer), children: [_jsx("div", { className: "w-full h-full flex font-medium text-xs text-gray-medium text-center items-center justify-center", children: _jsx("div", { className: "rotate-[270deg]", children: "\uAC04\uC811\uD3C9\uAC00" }) }), _jsx("div", { className: "w-full h-full flex font-medium text-xs text-gray-medium text-center items-center justify-center", children: _jsx("div", { className: "rotate-[270deg]", children: "\uC9C1\uC811\uD3C9\uAC00" }) })] })] }));
+}

package/layout/template/Regexam/OfflineExam.d.ts

@@ -0,0 +1,2 @@
+export default function OfflineExam(): import("react/jsx-runtime").JSX.Element;
+export declare function TableComponent(): import("react/jsx-runtime").JSX.Element;

package/layout/template/Regexam/OfflineExam.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { cn } from "../../../util";
+import { useResponsive } from "../../../hook";
+gsap.registerPlugin(ScrollTrigger);
+export default function OfflineExam() {
+    const isMD = useResponsive("md");
+    const isXL = useResponsive("xl");
+    const scrollWrapperRef = useRef(null);
+    useEffect(() => {
+        if (!isMD)
+            return; // isMD가 true일 때 gsap 실행 방지
+        const ctx = gsap.context(() => {
+            const scrollWrapper = scrollWrapperRef.current;
+            if (scrollWrapper) {
+                const scrollTrigger = ScrollTrigger.create({
+                    trigger: scrollWrapper,
+                    start: "top-=80 top",
+                    end: "bottom+=80 bottom",
+                    pin: true,
+                    markers: false,
+                    onLeave: () => {
+                        console.log("Scroll completed, navigate to the next component");
+                    },
+                });
+                return () => {
+                    scrollTrigger.kill();
+                };
+            }
+        });
+        return () => ctx.revert();
+    }, [isMD]);
+    const container = {
+        displays: "flex flex-col justify-center items-center",
+        sizes: "w-full h-fit min-h-screen",
+        spacings: "pt-20 md:px-10 px-5 pb-20",
+        backgrounds: "bg-gray-light/50",
+    };
+    //controlls max-w
+    const mainWrapper = {
+        displays: "flex flex-col md:flex-row",
+        sizes: "w-full max-w-6xl",
+    };
+    const titleWrapper = {
+        displays: "flex flex-col gap-0",
+        sizes: "w-full h-auto",
+        spacings: "mb-5 md:mb-0",
+    };
+    const sectionTitle = {
+        sizes: "w-full h-fit",
+        textStyles: "font-bold text-crimson-burgundy text-xl xxs:text-2xl lg:text-3xl",
+    };
+    const sectionSubTitle = {
+        sizes: "w-full h-fit",
+        textStyles: "font-medium text-gray-medium text-sm md:text-base",
+    };
+    const grayBox = {
+        sizes: "w-full h-fit rounded-2xl",
+        spacings: "p-5 xxs:p-8 md:p-10  my-0 xs:my-10",
+        backgrounds: "bg-gray-light/50",
+        textstyles: "font-medium text-gray-dark text-base md:text-lg leading-loose",
+    };
+    const scrollWrapper = {
+        displays: "flex flex-col flex-shrink-0",
+        sizes: "md:w-[calc(100vw-376px)] ml:w-[calc(100%-472px)] w-full",
+        spacings: "gap-10",
+    };
+    const miniBox = {
+        displays: "flex flex-col",
+        sizes: "w-full h-fit rounded-lg p-5",
+        backgrounds: "bg-gray-light",
+    };
+    const miniTitle = {
+        textStyles: "font-bold text-gray-dark text-lg xxs:text-xl",
+    };
+    const miniDivider = {
+        sizes: "w-full h-0.5 mt-1",
+        colors: "bg-gradient-to-r from-crimson-burgundy to-green-dark",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(mainWrapper), children: [_jsxs("div", { className: cn(titleWrapper), ref: scrollWrapperRef, children: [_jsx("div", { className: cn(sectionTitle), children: "\uC815\uAE30\uC2DC\uD5D8 \uC548\uB0B4" }), _jsx("div", { className: cn(sectionSubTitle), children: "\uC5F0 4\uD68C, \uC624\uD504\uB77C\uC778\uC73C\uB85C \uAC1C\uCD5C\uB418\uB294 \uD1A0\uC140 \uC815\uAE30\uC2DC\uD5D8\uC785\uB2C8\uB2E4." })] }), _jsxs("div", { className: cn(scrollWrapper), children: [_jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC2DC\uD5D8\uAD6C\uC131" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TableComponent, {}) })] }), _jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC2DC\uD5D8\uC9C4\uD589" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TableComponent, {}) })] }), _jsxs("div", { className: cn(miniBox), children: [_jsx("div", { className: cn(miniTitle), children: "\uC2DC\uD5D8\uAD6C\uC131" }), _jsx("div", { className: cn(miniDivider) }), _jsx("div", { className: "h-full w-full mt-5", children: _jsx(TableComponent, {}) })] })] })] }) }));
+}
+export function TableComponent() {
+    const data = [
+        { id: 1, level: "Cocon", age: "미취학 아동, 5-7세", info: "S1: 15문항/15분  S2: 15문항/15분", totalScore: "100점" },
+        { id: 2, level: "Pre-Starter", age: "초등학교 1-2학년", info: "S1: 15문항/15분  S2: 20문항/25분", totalScore: "100점" },
+        { id: 3, level: "Starter", age: "초등학교 3-4학년", info: "S1: 20문항/15분  S2: 20문항/25분", totalScore: "100점" },
+        { id: 4, level: "Basic", age: "초등학교 5-6학년", info: "S1: 30문항/20분  S2: 30문항/30분", totalScore: "100점" },
+        { id: 5, level: "Junior", age: "중학생", info: "S1: 30문항/20분  S2: 30문항/30분", totalScore: "100점" },
+        { id: 6, level: "High Junior", age: "고등학생", info: "S1: 30문항/25분  S2: 35문항/35분", totalScore: "100점" },
+        { id: 7, level: "Advanced", age: "대학생 및 성인", info: "S1: 70문항/45분  S2: 70문항/55분", totalScore: "990점" },
+    ];
+    const rowStyle = {
+        spacings: "p-2",
+        textStylings: "font-medium text-xs text-gray-medium"
+    };
+    return (_jsx("div", { className: "overflow-auto w-full scrollbar-hidden rounded-lg", children: _jsxs("div", { className: "min-w-[640px] w-full", children: [_jsxs("div", { className: "flex bg-gradient-to-r from-green-dark to-crimson-burgundy text-white font-semibold text-xs", children: [_jsx("div", { className: "sticky left-0 bg-green-dark p-2 flex-[1] shadow-main", children: "\uB808\uBCA8" }), _jsx("div", { className: "p-2 flex-[2]", children: "\uCD9C\uC81C\uC218\uC900" }), _jsx("div", { className: "p-2 flex-[3]", children: "\uBB38\uD56D \uC218, \uC2DC\uAC04" }), _jsx("div", { className: "p-2 flex-[1]", children: "\uCD1D\uC810" })] }), data.map((item) => (_jsxs("div", { className: "flex bg-white/60 font-medium text-xs text-gray-medium", children: [_jsx("div", { className: "sticky left-0 bg-white p-2 flex-[1] text-gray-dark", children: item.level }), _jsx("div", { className: "p-2 flex-[2]", children: item.age }), _jsx("div", { className: "p-2 flex-[3]", children: item.info }), _jsx("div", { className: "p-2 flex-[1]", children: item.totalScore })] }, item.id)))] }) }));
+}

package/layout/template/Regexam/Regexam.layout.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { Regexam } from "../../../layout";
 import { cn } from "../../../util";
@@ -9,5 +9,5 @@ export default function RegexamLayout() {
         textoptions: "break-keep antialiased",
         cursor: "cursor-default",
     };
-    return (_jsx("div", { className: cn(container), children: _jsx(Regexam.Banner, {}) }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx(Regexam.Banner, {}), _jsx(Regexam.Evaluation, {}), _jsx(Regexam.OfflineExam, {})] }));
 }

package/layout/template/Regexam/index.d.ts

@@ -1,5 +1,9 @@
 import Banner from "./Banner";
+import Evaluation from "./Evaluation";
+import OfflineExam from "./OfflineExam";
 declare const Regexam: {
     Banner: typeof Banner;
+    Evaluation: typeof Evaluation;
+    OfflineExam: typeof OfflineExam;
 };
 export default Regexam;

package/layout/template/Regexam/index.js

@@ -1,5 +1,9 @@
 import Banner from "./Banner";
+import Evaluation from "./Evaluation";
+import OfflineExam from "./OfflineExam";
 const Regexam = {
     Banner,
+    Evaluation,
+    OfflineExam,
 };
 export default Regexam;

package/layout/template/Ticket/Layout.d.ts

@@ -1,5 +1,5 @@
 import { TicketProps } from "./Ticket";
 interface TicketLayoutProps extends TicketProps {
 }
-export default function Layout({ exam, name, birthday, level, code, }: TicketLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default function Layout({ exam, name, birthday, level, code, profileImageUrl, }: TicketLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/layout/template/Ticket/Layout.js

@@ -4,14 +4,17 @@ import { cn } from "../../../util";
 import { Label } from "../../../widget";
 import Ticket from "./Ticket";
 import { useRef } from "react";
-export default function Layout({ exam, name, birthday, level, code, }) {
+export default function Layout({ exam, name, birthday, level, code, profileImageUrl, }) {
     const container = {
         displays: "flex justify-center items-center",
-        sizes: "w-full min-h-screen",
+        sizes: "w-full min-h-screen overflow-y-scroll",
+        backgrounds: "bg-gray-light",
     };
     const body = {
-        positions: "relative",
-        displays: "flex gap-x-3.5",
+        positions: "relative justify-center items-center sm:items-start",
+        displays: "flex sm:flex-row flex-col",
+        sizes: "w-full h-fit",
+        spacings: "gap-x-10 m-5",
     };
     const ref = useRef(null);
     const handlePrint = useReactToPrint({
@@ -23,26 +26,28 @@ export default function Layout({ exam, name, birthday, level, code, }) {
                         birthday,
                         level,
                         code,
-                    } }), _jsxs("div", { children: [_jsx(Label.Button, { title: "OMR \uC778\uC1C4", onClick: () => { }, option: {
-                                width: "sm",
-                                height: "xs",
-                                background: "bg-green-dark",
-                                text: "text-white",
-                            } }), _jsx(Label.Button, { title: "\uC9C0\uB3C4\uB85C \uBCF4\uAE30", onClick: () => { }, option: {
-                                width: "sm",
-                                height: "xs",
-                                background: "bg-green-dark",
-                                text: "text-white",
-                            } }), _jsx(Label.Button, { title: "\uC790\uC138\uD788 \uBCF4\uAE30", onClick: () => { }, option: {
-                                width: "sm",
-                                height: "xs",
-                                background: "bg-green-dark",
-                                text: "text-white",
-                            } }), _jsx(Label.Button, { title: "\uC218\uD5D8\uD45C \uCD9C\uB825\uD558\uAE30", onClick: handlePrint, option: {
-                                width: "md",
-                                height: "sm",
-                                background: "bg-white",
-                                boundary: "border-2 border-green-dark",
-                                text: "text-green-dark",
-                            } })] })] }) }));
+                        profileImageUrl,
+                    } }), _jsxs("div", { className: "relative w-48 flex flex-row md:flex-col md:h-[700px] gap-4 h-full justify-start mt-5 items-center", children: [_jsx("div", { className: "md:flex hidden", children: _jsx(Label.Button, { title: "\uC218\uD5D8\uD45C \uCD9C\uB825\uD558\uAE30", onClick: handlePrint, option: {
+                                    width: "md",
+                                    height: "sm",
+                                    background: "bg-white shadow-main",
+                                    text: "text-green-dark font-pretendard-var font-medium",
+                                } }) }), _jsxs("div", { className: "sm:absolute hidden sm:flex flex-col gap-4 left-0 top-36", children: [_jsxs("div", { className: "flex-col font-pretendard-var flex", children: [_jsxs("div", { className: "flex flex-row font-bold text-base leading-tight", children: [_jsx("div", { className: "text-crimson-burgundy", children: "OMR \uC791\uC131" }), _jsx("div", { className: "text-gray-dark", children: ", \uC5F0\uC2B5\uD558\uC168\uB098\uC694?" })] }), _jsx("div", { className: "text-gray-dark font-medium text-xs break-keep", children: "\uB9C8\uD0B9\uD39C\uC73C\uB85C \uC791\uC131\uBC95\uC744 \uBBF8\uB9AC \uC5F0\uC2B5\uD574\uBCF4\uC138\uC694!" })] }), _jsx(Label.Button, { title: "OMR \uC778\uC1C4", onClick: () => { }, option: {
+                                        width: "sm",
+                                        height: "xs",
+                                        background: "bg-green-dark",
+                                        text: "text-white font-pretendard-var font-medium",
+                                    } })] }), _jsxs("div", { className: "sm:absolute flex flex-col gap-4 left-0 top-80", children: [_jsxs("div", { className: "flex-col font-pretendard-var hidden sm:flex", children: [_jsxs("div", { className: "flex flex-row font-bold text-base leading-tight", children: [_jsx("div", { className: "text-crimson-burgundy", children: "\uACE0\uC0AC\uC7A5 \uC704\uCE58" }), _jsx("div", { className: "text-gray-dark", children: "\uB97C \uD655\uC778\uD574\uC8FC\uC138\uC694" })] }), _jsx("div", { className: "text-gray-dark font-medium text-xs break-keep", children: exam.address })] }), _jsx(Label.Button, { title: "\uC9C0\uB3C4\uC5D0\uC11C \uBCF4\uAE30", onClick: () => {
+                                        window.open(`https://map.kakao.com/?map_type=TYPE_MAP&itemId=168362793&q=${exam.address}&urlLevel=3&urlX=507920&urlY=1136302`);
+                                    }, option: {
+                                        width: "sm",
+                                        height: "xs",
+                                        background: "bg-green-dark",
+                                        text: "text-white font-pretendard-var font-medium",
+                                    } })] }), _jsxs("div", { className: "sm:absolute flex flex-col gap-4 left-0 top-128", children: [_jsxs("div", { className: "flex-col font-pretendard-var hidden sm:flex", children: [_jsxs("div", { className: "flex flex-row font-bold text-base leading-tight", children: [_jsx("div", { className: "text-crimson-burgundy", children: "\uC900\uBE44\uBB3C" }), _jsx("div", { className: "text-gray-dark", children: "\uB3C4 \uD655\uC778\uD574\uC8FC\uC138\uC694" })] }), _jsx("div", { className: "text-gray-dark font-medium text-xs break-keep", children: "\uB9C8\uD0B9\uD39C\uC73C\uB85C \uC791\uC131\uBC95\uC744 \uBBF8\uB9AC \uC5F0\uC2B5\uD574\uBCF4\uC138\uC694!" })] }), _jsx(Label.Button, { title: "\uC2DC\uD5D8 \uADDC\uC815 \uD655\uC778", onClick: () => { }, option: {
+                                        width: "sm",
+                                        height: "xs",
+                                        background: "bg-green-dark",
+                                        text: "text-white font-pretendard-var font-medium",
+                                    } })] })] })] }) }));
 }

package/layout/template/Ticket/Ticket.d.ts

@@ -4,10 +4,12 @@ export interface TicketProps {
         hall: string;
         room: string;
         date: string;
+        address: string;
         startedAt: number;
         endedAt: number;
     };
     name: string;
+    profileImageUrl?: string;
     birthday: string;
     level: string;
     code: string;

package/layout/template/Ticket/Ticket.js

@@ -3,11 +3,53 @@ import { forwardRef } from "react";
 import { cn } from "../../../util";
 import moment from "moment-timezone";
 function Ticket({ props }, ref) {
-    const { title, date, startedAt, endedAt } = props.exam;
+    const { title, date, hall, room, startedAt, endedAt } = props.exam;
+    //수험번호 섹션 디자인을 위한 배열
+    const numberArray = props.code.split("").map(Number);
+    numberArray.splice(3, 0, null);
+    numberArray.splice(7, 0, null);
     const container = {
-        sizes: "w-[340px] h-[700px]",
-        boundaries: "border-2",
+        sizes: "w-full max-w-[340px] xs:w-[340px] h-[700px] flex flex-col justify-start",
+        spacings: "p-5 print:m-10",
+        boundaries: "border-1 border-gray-medium shadow-main",
+        backgrounds: "bg-white",
     };
-    return (_jsxs("div", { ref: ref, className: cn(container), children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx("div", { className: "text-sm", children: date }), _jsx("div", { className: "text-sm", children: moment.unix(startedAt).format("YYYY-MM-DD") }), _jsx("div", { className: "text-sm", children: moment.unix(startedAt).format("YYYY년 MM월 DD일") })] }));
+    const logoWrapper = {
+        displays: "flex flex-row justify-between w-full mb-3",
+    };
+    const svgController = {
+        sizes: "h-8",
+    };
+    const titleDivider = {
+        sizes: "w-full h-0.5",
+        backgrounds: "bg-gradient-to-r from-crimson-burgundy to-green-dark",
+    };
+    const cellWrapper = {
+        displays: "flex flex-row",
+        sizes: "w-full",
+        boundaries: "border-1 border-gray-medium",
+    };
+    const cellTitleLarge = {
+        displays: "flex justify-center items-center shrink-0",
+        sizes: "w-21 h-6",
+        textstyles: "text-2xs font-medium",
+        backgrounds: "bg-gray-light",
+    };
+    const cellTitleSmall = {
+        displays: "flex justify-center items-center shrink-0",
+        sizes: "w-16 h-6",
+        textstyles: "text-2xs font-medium",
+        backgrounds: "bg-gray-light",
+    };
+    const cellText = {
+        sizes: "w-full",
+        displays: "flex justify-center items-center",
+        textstyles: "text-2xs font-medium text-black",
+    };
+    return (_jsxs("div", { ref: ref, className: cn(container), children: [_jsxs("div", { className: cn(logoWrapper), children: [_jsx("img", { className: cn(svgController), src: "/images/logos/logo-itc-main.svg", alt: "" }), _jsx("img", { className: cn(svgController), src: "/images/logos/logo-tosel-main.svg", alt: "" })] }), _jsxs("div", { className: "flex flex-col w-full gap-2.5", children: [_jsx("div", { className: cn(titleDivider) }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-lg font-bold leading-none", children: "\uC218 \uD5D8 \uD45C" }), _jsx("div", { className: "text-sm font-medium leading-none", children: title })] }), _jsx("div", { className: cn(titleDivider) })] }), _jsxs("div", { className: "flex flex-col gap-5 mt-5", children: [_jsxs("div", { className: "flex flex-col gap-0", children: [_jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleLarge), children: "\uC218\uD5D8\uBC88\uD638" }), _jsx("div", { className: "w-full flex flex-row divide-x-[1px] divide-dashed divide-gray-medium/50", children: numberArray.map((num, index) => (_jsx("div", { className: `flex justify-center items-center text-xs font-medium ${num === null
+                                                ? "w-2.5 shrink-0 bg-gray-light"
+                                                : "w-full bg-white"}`, children: num !== null ? num : "" }, index))) })] }), _jsxs("div", { className: "font-medium text-2xs", children: ["*OMR (1)\uBC88 \uD56D\uBAA9\uC5D0 \uD574\uB2F9\uBC88\uD638\uB97C \uB530\uB77C\uC11C \uC368\uC8FC\uC138\uC694.", " "] })] }), _jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleLarge), children: "\uB808\uBCA8" }), _jsx("div", { className: cn(cellText), children: props.level })] }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsxs("div", { className: "flex flex-col gap-0 h-full w-21 border-1 border-gray-medium shrink-0", children: [_jsx("div", { className: "h-full w-full bg-cover", style: {
+                                            backgroundImage: `url(${props.profileImageUrl ?? ''})`,
+                                        } }), _jsx("div", { className: cn(cellTitleLarge, "w-full"), children: "\uC0AC\uC9C4" })] }), _jsxs("div", { className: "flex flex-col gap-2 w-full", children: [_jsxs("div", { className: "flex flex-col gap-0", children: [_jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uC774\uB984" }), _jsx("div", { className: cn(cellText), children: props.name })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uC0DD\uB144\uC6D4\uC77C" }), _jsx("div", { className: cn(cellText), children: props.birthday })] })] }), _jsxs("div", { className: "flex flex-col gap-0", children: [_jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uACE0\uC0AC\uC7A5" }), _jsx("div", { className: cn(cellText), children: hall })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uACE0\uC0AC\uC2E4" }), _jsx("div", { className: cn(cellText), children: room })] })] })] })] }), _jsxs("div", { className: "flex flex-col gap-0", children: [_jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleLarge, "bg-green-dark/10"), children: "\uC2DC\uD5D8\uC77C\uC790" }), _jsx("div", { className: cn(cellText), children: moment.unix(startedAt).format("YYYY년 MM월 DD일") })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleLarge, "bg-green-dark/10"), children: "\uC785\uC2E4 \uC644\uB8CC\uC2DC\uAC04" }), _jsx("div", { className: cn(cellText), children: moment.unix(startedAt).format("HH시 mm분") })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleLarge, "bg-green-dark/10"), children: "\uC885\uB8CC\uC2DC\uAC04" }), _jsx("div", { className: cn(cellText), children: moment.unix(endedAt).format("HH시 mm분") })] }), _jsxs("div", { className: "flex flex-col mt-1", children: [_jsx("div", { className: "font-medium text-2xs leading-tight", children: "*\uC785\uC2E4\uC2DC\uAC04 \uC774\uD6C4\uC5D0\uB294 \uC785\uC2E4\uC774 \uC81C\uD55C\uB429\uB2C8\uB2E4." }), _jsx("div", { className: "font-medium text-2xs leading-tight", children: "*\uACE0\uC0AC\uC7A5 \uC5EC\uAC74\uC5D0 \uB530\uB77C \uD1F4\uC2E4\uC2DC\uAC04\uC740 \uC870\uAE08\uC529 \uC0C1\uC774\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." })] })] }), _jsx("div", { className: "w-full border-b-1 border-dashed border-gray-medium" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "font-bold text-sm leading-tight", children: "\uC751\uC2DC\uC790 \uC720\uC758\uC0AC\uD56D" }), _jsxs("ul", { className: "list-outside list-decimal ml-4 font-medium text-2xs", children: [_jsxs("li", { className: "mb-1", children: ["\uB2E4\uC74C\uC758 \uBB3C\uD488\uC744 \uAF2D \uC900\uBE44\uD574\uC8FC\uC138\uC694:", _jsx("br", {}), " \uCEF4\uD4E8\uD130\uC6A9 \uC0AC\uC778\uD39C / \uC218\uC815 \uD14C\uC774\uD504 / \uC218\uD5D8\uD45C / \uAC80\uC815 \uBCFC\uD39C"] }), _jsxs("li", { className: "mb-1", children: ["\uACE0\uC0AC\uC7A5 \uC704\uCE58\uB97C \uBBF8\uB9AC \uD655\uC778\uD574\uC8FC\uC138\uC694:", _jsx("br", {}), " \uC218\uD5D8\uD45C\uC5D0 \uAE30\uC7AC\uB41C \uACE0\uC0AC\uC7A5, \uACE0\uC0AC\uC2E4 \uC815\uBCF4\uB97C \uD655\uC778\uD574\uC8FC\uC138\uC694."] }), _jsxs("li", { children: ["\uD559\uBD80\uBAA8 \uCD9C\uC785 \uD1B5\uC81C:", _jsx("br", {}), "\uACE0\uC0AC\uC2E4 \uB0B4\uBD80\uC5D0\uB294 \uD559\uBD80\uBAA8\uC758 \uCD9C\uC785\uC774 \uC5C4\uACA9\uD788 \uD1B5\uC81C\uB429\uB2C8\uB2E4."] })] })] })] })] }));
 }
 export default forwardRef(Ticket);

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

@@ -40,7 +40,7 @@ export default function Footer() {
     const socialIconControl = {
         siezes: "h-6",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(logoWrapper), children: [_jsx("img", { className: cn(svgController), src: "/images/logos/logo-tosel-main.svg", alt: "" }), _jsx("img", { className: cn(svgController), src: "/images/logos/logo-itc-main.svg", alt: "" })] }), _jsxs("div", { className: "flex flex-wrap justify-between items-center border-b-1 border-gray-dark pb-4 mt-5 font-medium gap-y-1", children: [_jsx("div", { children: "Copyright TOSEL. \u24D2 All Rights Reserved." }), _jsx("div", { className: "flex gap-5", children: buttons.map((button, index) => (_jsxs("div", { onClick: button.onClick, className: "cursor-default", children: [button.title, " "] }, index))) })] }), _jsxs("div", { className: cn(infoSet), children: [_jsx("div", { className: cn(infoTitle), children: "\uACE0\uAC1D\uBB38\uC758" }), _jsxs("div", { className: cn(info), children: ["\uB300\uD45C\uBC88\uD638 | 02-923-0505", _jsx("br", {}), " \uAC1C\uC778\uBB38\uC758 | tosel_cs@tosel.co.kr ", _jsx("br", {}), "\uB2E8\uCCB4\uBB38\uC758 | tosel_academy@tosel.co.kr"] })] }), _jsxs("div", { className: cn(infoSet), children: [_jsx("div", { className: cn(infoTitle), children: "\uAD6D\uC81C\uD1A0\uC140\uC704\uC6D0\uD68C" }), _jsxs("div", { className: cn(info), children: ["\uC0AC\uC5C5\uC790 \uB4F1\uB85D\uBC88\uD638 : 209-81-55585 | \uB300\uD45C : \uC624\uC2B9\uC5F0 ", _jsx("br", {}), "\uC6F9\uC11C\uBE44\uC2A4: \uC8FC\uC2DD\uD68C\uC0AC \uC5D0\uB4C0\uD1A0\uC140 | \uD1B5\uC2E0\uD310\uB9E4\uC5C5\uC2E0\uACE0\uBC88\uD638: \uC81C 2012-\uC11C\uC6B8\uC131\uBD81-0083\uD638", _jsx("br", {}), " \uC11C\uC6B8\uC2DC \uC131\uBD81\uAD6C \uC548\uC554\uB85C 145 \uACE0\uB824\uB300\uD559\uAD50 \uB77C\uC774\uC2DC\uC6C0 4\uCE35", _jsx("br", {}), " Lyceum Korea University, 145 Anam Ro, Seongbuk-Gu, Seoul, Korea 02841"] })] }), _jsxs("div", { className: cn(iconWrapper), children: [_jsx("a", { onClick: () => (location.href = "https://blog.naver.com/ebs1503"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/naver.svg", alt: "" }) }) }), _jsx("a", { onClick: () => (location.href = "https://www.instagram.com/tosel_official/"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/instagram.svg", alt: "" }) }) }), _jsx("a", { onClick: () => (location.href = "https://www.youtube.com/@tosel_official"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/youtube.svg", alt: "" }) }) })] })] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(logoWrapper), children: [_jsx("img", { className: cn(svgController), src: "/images/logos/logo-tosel-main.svg", alt: "" }), _jsx("img", { className: cn(svgController), src: "/images/logos/logo-itc-main.svg", alt: "" })] }), _jsxs("div", { className: "flex flex-wrap justify-between items-center border-b-1 border-gray-dark pb-4 mt-5 font-medium gap-y-1", children: [_jsx("div", { children: "Copyright TOSEL. \u24D2 All Rights Reserved." }), _jsx("div", { className: "flex gap-5", children: buttons.map((button, index) => (_jsxs("div", { onClick: button.onClick, className: "cursor-default", children: [button.title, " "] }, index))) })] }), _jsxs("div", { className: cn(infoSet), children: [_jsx("div", { className: cn(infoTitle), children: "\uACE0\uAC1D\uBB38\uC758" }), _jsxs("div", { className: cn(info), children: ["\u203B\uAC1C\uC778\uC815\uBCF4 \uBCF4\uD638 \uC815\uCC45\uC5D0 \uB530\uB77C, \uBAA8\uB4E0 \uACF5\uC2DD \uBB38\uC758\uB294 \uC774\uBA54\uC77C\uC744 \uD1B5\uD574\uC11C\uB9CC \uC811\uC218 \uAC00\uB2A5\uD569\uB2C8\uB2E4.", _jsx("br", {}), "\uB300\uD45C\uBC88\uD638 | 02-923-0505", _jsx("br", {}), "\uAC1C\uC778\uBB38\uC758 | tosel_cs@tosel.co.kr ", _jsx("br", {}), "\uB2E8\uCCB4\uBB38\uC758 | tosel_academy@tosel.co.kr"] })] }), _jsxs("div", { className: cn(infoSet), children: [_jsx("div", { className: cn(infoTitle), children: "\uAD6D\uC81C\uD1A0\uC140\uC704\uC6D0\uD68C" }), _jsxs("div", { className: cn(info), children: ["\uC0AC\uC5C5\uC790 \uB4F1\uB85D\uBC88\uD638 : 209-81-55585 | \uB300\uD45C : \uC624\uC2B9\uC5F0 ", _jsx("br", {}), "\uC6F9\uC11C\uBE44\uC2A4: \uC8FC\uC2DD\uD68C\uC0AC \uC5D0\uB4C0\uD1A0\uC140 | \uD1B5\uC2E0\uD310\uB9E4\uC5C5\uC2E0\uACE0\uBC88\uD638: \uC81C 2012-\uC11C\uC6B8\uC131\uBD81-0083\uD638", _jsx("br", {}), " \uC11C\uC6B8\uC2DC \uC131\uBD81\uAD6C \uC548\uC554\uB85C 145 \uACE0\uB824\uB300\uD559\uAD50 \uB77C\uC774\uC2DC\uC6C0 4\uCE35", _jsx("br", {}), " Lyceum Korea University, 145 Anam Ro, Seongbuk-Gu, Seoul, Korea 02841"] })] }), _jsxs("div", { className: cn(iconWrapper), children: [_jsx("a", { onClick: () => (location.href = "https://blog.naver.com/ebs1503"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/naver.svg", alt: "" }) }) }), _jsx("a", { onClick: () => (location.href = "https://www.instagram.com/tosel_official/"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/instagram.svg", alt: "" }) }) }), _jsx("a", { onClick: () => (location.href = "https://www.youtube.com/@tosel_official"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/youtube.svg", alt: "" }) }) })] })] }) }));
 }
 const buttons = [
     // {

package/layout/template/home/layout/Navigation.js

@@ -4,7 +4,6 @@ import { animated, useTransition } from "react-spring";
 import SVG from "../../../../asset/SVG";
 import { cn, compareDates, convertDateToString } from "../../../../util";
 import { useActionStore } from "../../../../store";
-import { LineBreaks } from "../../../../text";
 import { useResponsive } from "../../../../hook";
 export default function Navigation({ browser, calendar, notice, event, }) {
     const { flag } = useActionStore();
@@ -22,7 +21,7 @@ export default function Navigation({ browser, calendar, notice, event, }) {
     const overlayCoverTransition = useTransition(isHidden, {
         from: { width: "0%" },
         enter: { width: "100%" },
-        config: { duration: 500 },
+        config: { duration: 200 },
     });
     useEffect(() => {
         if (isHidden) {
@@ -47,12 +46,12 @@ export default function Navigation({ browser, calendar, notice, event, }) {
         sizes: "h-screen w-[400px]",
         boundaries: "md:pl-[56px]",
         styles: "bg-black/20  backdrop-blur-sm",
-        shadows: "shadow-main",
+        shadows: "shadow-main transition",
     };
     const itemBody = {
         positions: "absolute bottom-16 md:static md:bottom-auto md:flex md:flex-col",
-        sizes: "w-full md:w-[400px] h-80 md:h-screen",
-        styles: "bg-white ",
+        sizes: "w-full md:w-[400px] h-fit md:h-screen min-h-50",
+        styles: "bg-white",
     };
     const iconWrapper = {
         displays: "flex justify-center items-center",
@@ -68,12 +67,12 @@ export default function Navigation({ browser, calendar, notice, event, }) {
     });
     const scrollTitleWrapper = {
         displays: "w-full h-fit",
-        spacings: "p-5",
+        spacings: "p-5 pb-0",
     };
     const scrollTitle = {
         textStyles: "text-lg font-bold text-green-dark",
     };
-    return (_jsxs(_Fragment, { children: [overlayCoverTransition((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..." })] }))), overlayPopTransition((styles, item) => type &&
+    return (_jsxs(_Fragment, { children: [overlayCoverTransition((styles, item) => item && (_jsx(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: _jsxs("div", { className: "flex flex-col justify-center items-center overflow-hidden gap-y-14 transition-none", children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel", width: 368.56, height: 80.07 }), _jsx("div", { children: "dashboard loading..." })] }) }))), overlayPopTransition((styles, item) => type &&
                 item && (_jsx(animated.div, { style: styles, className: cn(itemContainer), children: _jsxs("div", { className: cn(itemBody), onClick: (e) => e.stopPropagation(), children: [_jsx("div", { className: cn(scrollTitleWrapper), children: _jsx("div", { className: cn(scrollTitle), children: navigationTypeString[type] }) }), _jsx(NavigationItem, { type: type, calendar: calendar, notice: notice, event: event })] }) }))), _jsx("div", { className: "fixed bottom-0 md:top-1/2 md:-translate-y-1/2 flex justify-center items-center z-45", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: cn(container), children: [_jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("calendar"), children: _jsx(SVG.Icon.Calendar, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("notification"), children: _jsx(SVG.Icon.Notification, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("search"), children: _jsx(SVG.Icon.Search, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("browser"), children: _jsx(SVG.Icon.Browser, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("event"), children: _jsx(SVG.Icon.Event, { size: isMobile ? "md" : "lg" }) })] }) })] }));
 }
 const navigationTypeString = {
@@ -84,11 +83,19 @@ const navigationTypeString = {
 function NavigationItem({ type, calendar, notice, event, }) {
     //scroll action
     const container = {
-        displays: "relative flex flex-row md:flex-col",
-        sizss: "h-full",
+        displays: "relative h-full overflow-hidden",
+    };
+    const scrollWrapper = {
+        displays: "flex flex-row md:flex-col",
+        sizss: "h-fit md:h-full",
         scrollActions: "scrollbar-hidden overflow-x-scroll md:overflow-y-scroll snap-x md:snap-none",
         spacings: "p-5 gap-5 scroll-pl-5",
     };
+    const softBox = {
+        displays: "absolute top-0 left-0",
+        sizes: "w-full h-5",
+        backgrounds: "bg-gradient-to-b from-white to-white/0",
+    };
     //card title styling
     const titleWrapper = {
         displays: "flex flex-row justify-between",
@@ -102,21 +109,23 @@ function NavigationItem({ type, calendar, notice, event, }) {
         sizes: "w-fit h-fit rounded-md",
         textstyles: "font-medium text-xs text-white",
     };
-    const CardBox = {
-        displays: "flex flex-row",
-        sizes: "w-[360px] h-[fit] rounded-[8px]",
-        spacings: "p-5",
-    };
     const dateWrapper = {
-        displays: "flex flex-row gap-3",
+        displays: "flex flex-row gap-3 justify-start items-center",
+    };
+    const paragraphText = {
+        textStyles: "font-medium text-sm font-gray-dark text-gray-dark",
+        spacings: "leading-normal align-bottom",
     };
-    const dateText = {
-        textStyles: "font-bold font-pretendar-var font-sm font-gray-dark",
-        spacings: "leading-normal",
+    const svgAttributes = {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 16 16",
+        className: "size-4 fill-gray-medium",
     };
-    const iconWrapper = {};
     const item = {
-        displays: "flex-shrink-0 flex flex-col md:justify-start snap-start",
+        displays: "flex-shrink-0 flex flex-col md:justify-start snap-start self-auto",
+        animations: "duration-300 hover:shadow-green",
+        sizes: "w-[360px] h-[184px] rounded-[8px]",
     };
     const [currentTime, setCurrentTime] = useState(new Date());
     const [scheduleState, setScheduleState] = useState(calendar.schedules.map(() => ({
@@ -145,13 +154,13 @@ function NavigationItem({ type, calendar, notice, event, }) {
         setScheduleState(updatedScheduleState);
     }, [currentTime, calendar.schedules]);
     if (type === "calendar")
-        return (_jsx("div", { className: cn(container), children: calendar.schedules.map(({ applyEnd, title, onClick }, index) => {
-                const { isBeforeStart, dDayStart, isBeforeEnd, dDayEnd } = scheduleState[index];
-                return (_jsxs("div", { onClick: onClick, className: cn(item, "w-[360px] h-[184px] rounded-[8px] p-5 bg-gray-light/30 border-1 border-gray-light"), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(titleText), children: title }), _jsx("div", { children: isBeforeStart ? (_jsxs("div", { className: cn(tag, "bg-red-burgundy"), children: ["\uC811\uC218\uAE4C\uC9C0 ", dDayStart] })) : isBeforeEnd ? (_jsx("div", { className: cn(tag, "bg-green-dark"), children: "\uC811\uC218\uC911" })) : (_jsx("div", { className: cn(tag, "bg-gray-medium/30"), children: "\uB9C8\uAC10" })) })] }), !isBeforeStart && isBeforeEnd ? (_jsxs("div", { className: "text-xs", children: ["\uC811\uC218 \uB9C8\uAC10\uAE4C\uC9C0 ", dDayEnd] })) : (""), _jsx("div", { children: _jsx("div", { className: "text-[16px] font-bold text-gray-dark", children: convertDateToString(applyEnd) }) })] }));
-            }) }));
+        return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(scrollWrapper), children: calendar.schedules.map(({ applyEnd, testStart, gradeOpen, title, onClick }, index) => {
+                        const { isBeforeStart, dDayStart, isBeforeEnd, dDayEnd } = scheduleState[index];
+                        return (_jsxs("div", { onClick: onClick, className: cn(item, "rounded-[8px] p-5 bg-gray-light/30 border-1 border-gray-light"), children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(titleText), children: title }), _jsx("div", { children: isBeforeStart ? (_jsxs("div", { className: cn(tag, "bg-red-burgundy"), children: ["\uC811\uC218\uAE4C\uC9C0 ", dDayStart] })) : isBeforeEnd ? (_jsx("div", { className: cn(tag, "bg-green-dark"), children: "\uC811\uC218 \uC911" })) : (_jsx("div", { className: cn(tag, "bg-gray-medium/30"), children: "\uB9C8\uAC10" })) })] }), !isBeforeStart && isBeforeEnd ? (_jsxs("div", { className: "text-xs", children: ["\uC811\uC218 \uB9C8\uAC10\uAE4C\uC9C0 ", dDayEnd] })) : (""), _jsx("div", { className: "w-full h-0.5 bg-gray-medium" })] }), _jsxs("div", { className: "flex flex-col gap-1 w-full h-fit mt-4", children: [_jsxs("div", { className: cn(dateWrapper), children: [_jsxs("svg", { ...svgAttributes, children: [_jsx("path", { "fill-rule": "evenodd", d: "M11.986 3H12a2 2 0 0 1 2 2v6a2 2 0 0 1-1.5 1.937V7A2.5 2.5 0 0 0 10 4.5H4.063A2 2 0 0 1 6 3h.014A2.25 2.25 0 0 1 8.25 1h1.5a2.25 2.25 0 0 1 2.236 2ZM10.5 4v-.75a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75V4h3Z", "clip-rule": "evenodd" }), _jsx("path", { "fill-rule": "evenodd", d: "M2 7a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7Zm6.585 1.08a.75.75 0 0 1 .336 1.005l-1.75 3.5a.75.75 0 0 1-1.16.234l-1.75-1.5a.75.75 0 0 1 .977-1.139l1.02.875 1.321-2.64a.75.75 0 0 1 1.006-.336Z", "clip-rule": "evenodd" })] }), _jsx("div", { className: cn(paragraphText), children: "\uC811\uC218\uB9C8\uAC10" }), _jsx("div", { className: cn(paragraphText), children: convertDateToString(applyEnd) })] }), _jsxs("div", { className: cn(dateWrapper), children: [_jsx("svg", { ...svgAttributes, children: _jsx("path", { "fill-rule": "evenodd", d: "M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z", "clip-rule": "evenodd" }) }), _jsx("div", { className: cn(paragraphText), children: "\uC2DC\uD5D8\uC77C\uC790" }), _jsx("div", { className: cn(paragraphText), children: convertDateToString(testStart) })] }), _jsxs("div", { className: cn(dateWrapper), children: [_jsxs("svg", { ...svgAttributes, children: [_jsx("path", { "fill-rule": "evenodd", d: "M10 3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v9a2 2 0 0 0 2 2h8a2 2 0 0 1-2-2V3ZM4 4h4v2H4V4Zm4 3.5H4V9h4V7.5Zm-4 3h4V12H4v-1.5Z", "clip-rule": "evenodd" }), _jsx("path", { d: "M13 5h-1.5v6.25a1.25 1.25 0 1 0 2.5 0V6a1 1 0 0 0-1-1Z" })] }), _jsx("div", { className: cn(paragraphText), children: "\uC131\uC801\uBC1C\uD45C" }), _jsx("div", { className: cn(paragraphText), children: convertDateToString(gradeOpen) })] })] })] }));
+                    }) }), _jsx("div", { className: cn(softBox) })] }));
     if (type === "notification")
-        return (_jsx("div", { className: cn(container), children: notice.announcements.map(({ title, date, description, onClick }) => (_jsxs("div", { onClick: onClick, className: cn(item, "h-[140px] box-shadow rounded-[10px] p-7.5"), children: [_jsxs("div", { children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: date }), _jsx("div", { className: "text-[20px] font-bold text-gray-dark", children: title })] }), _jsx(LineBreaks, { texts: description, className: "text-gray-dark text-[18px]" })] }))) }));
+        return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(scrollWrapper), children: notice.announcements.map(({ title, date, description, onClick }) => (_jsxs("div", { onClick: onClick, className: cn(item, "h-fit shadow-main p-5 "), children: [_jsxs("div", { children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: date }), _jsx("div", { className: cn(titleText, "mb-2"), children: title })] }), _jsx("p", { className: cn(paragraphText, "truncate h-fit"), children: description })] }))) }), _jsx("div", { className: cn(softBox) })] }));
     if (type === "event")
-        return (_jsx("div", { className: cn(container), children: event.events.map(({ title, thumbnail, onClick }) => (_jsx("div", { onClick: onClick, className: cn(item, "w-full  box-shadow rounded-[10px] p-7.5"), children: _jsx("div", { className: "image-container pt-[15px]", children: _jsx("img", { src: thumbnail, alt: title, className: "w-full" }) }) }))) }));
+        return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(scrollWrapper), children: event.events.map(({ title, thumbnail, onClick }) => (_jsx("div", { onClick: onClick, className: cn(item, " shadow-main rounded-[10px] overflow-hidden"), children: _jsx("div", { className: "image-container", children: _jsx("img", { src: thumbnail, alt: title, className: "w-full bg-cover" }) }) }))) }), _jsx("div", { className: cn(softBox) })] }));
     return null;
 }

package/package.json

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

package/tailwind.config.ts

@@ -98,7 +98,7 @@ export default {
         "silver-pale": "#DFD8CA",
 
         // Brand Colors
-        "cocoon-green": "#00E35B",
+        "cocoon-green": "#B1CE83",
         "ps-pink": "#E3006E",
         "ps-pink-light": "#FFBADB",
         "st-orange": "#ED6A00",

package/version.txt

@@ -1 +1 @@
-1.0.163
+1.0.164