@edu-tosel/design 1.0.132 → 1.0.133

package/layout/template/Olympiad/Conditions.js

@@ -1,11 +1,47 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
 export default function Conditions() {
     const container = {
-        sizes: "w-full h-screen",
-        displays: "flex justify-center items-center",
-        spacings: "px-5",
-        textstyles: "antialiased font-pretendard-var",
+        sizes: "w-full h-fit",
+        spacings: "my-20 lg:my-40",
+        displays: "flex flex-col justify-center items-center",
+        graphics: "antialiased",
+        text: "break-keep",
     };
-    return _jsx("div", { className: cn(container), children: "\u314E\u3147" });
+    const cardPositioning = {
+        displays: "flex flex-nowrap",
+        sizes: "w-screen",
+    };
+    const cardWrapper = {
+        sizes: `w-full overflow-x-auto scroll-smooth scrollbar-hidden scroll-pl-4`,
+        display: "flex flex-nowrap vertical-top",
+        spacings: "p-5",
+        snap: "snap-x snap-mandatory scroll-ms-0",
+    };
+    const cardDeck = {
+        displays: "inline-flex",
+        spacings: "gap-5 ml:mr-[calc(100vw-1200px)]",
+    };
+    const ghostCard = {
+        sizes: "h-100 ",
+        displays: "flex",
+        spacings: "ms-0 ps-0 last:[calc(50vw-520px)]",
+        animations: "duration-300",
+        scroll: "snap-start last:snap-end",
+    };
+    //control size of the card
+    const card = {
+        graphics: "shadow-main",
+        sizes: "h-100 w-80 rounded-2xl",
+        backgrounds: "bg-red",
+        hover: "hover:shadow-main-hover",
+        position: "ml:translate-x-[calc(50vw-600px)]",
+        transition: "duration-200",
+        displays: "display-block",
+    };
+    const sectiontitle = {
+        textstyles: "text-xl text-center text-green-dark mb-10 font-pretendard-bold md:text-2xl",
+        animations: "duration-300",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(sectiontitle), children: "\uD559\uC0DD\uC774\uB77C\uBA74 \uB204\uAD6C\uB098 \uB3C4\uC804\uD560 \uC218 \uC788\uC5B4\uC694" }), _jsx("div", { className: "h-0.5 w-1/4 mb-8 bg-green-dark rounded-lg" }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), children: _jsxs("div", { className: cn(cardDeck), children: [_jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), children: "1" }) }), _jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), children: "1" }) }), _jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), children: "1" }) }), _jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), children: "1" }) }), _jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), children: "1" }) }), _jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), children: "1" }) }), _jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), children: "1" }) }), _jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), children: "1" }) }), _jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), children: "1" }) })] }) }) })] }));
 }

package/layout/template/Olympiad/Features.js

@@ -23,7 +23,7 @@ export default function Features() {
         sizes: "w-full h-fit max-w-md",
         displays: "flex flex-col items-center md:grow",
         spacings: "py-4",
-        animations: "duration-300",
+        animations: "duration-300 hover:scale-105",
     };
     const boxTitle = {
         textstyles: "font-pretendard-bold text-lg text-center text-green-dark my-4 md:text-xl",

package/layout/template/Olympiad/Olympiad.layout.js

@@ -7,6 +7,7 @@ export default function OlympiadLayout() {
     const container = {
         sizes: "min-h-screen  w-full",
         textoptions: "break-keep",
+        cursor: "cursor-default",
         // test: "border-4 border-red-500",
     };
     //   const { scroll } = useScroll();

package/layout/template/Olympiad/Prizes.js

@@ -45,5 +45,5 @@ export default function Prizes() {
     const prizeDetail = {
         textstyles: "font-pretendard-medium",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(medalHandler), children: _jsx("img", { src: "images/olympiad/img-oly-prize-medal.png", alt: "" }) }), _jsxs("div", { className: cn(sectionTitleBreaker), children: [_jsx("div", { className: cn(sectionTitle), children: "\uACE0\uB824\uB300\uD559\uAD50 \uAE30\uAD00\uC7A5\uC0C1\uC744" }), _jsx("div", { className: cn(sectionTitle), children: "\uC218\uC0C1\uD560 \uC218 \uC788\uB294 \uAE30\uD68C" })] }), _jsx("div", { className: "h-0.5 w-1/4 my-10 bg-green-dark rounded-lg" }), _jsx("div", { className: cn(prizeWrapper), children: _jsxs("div", { className: cn(prizeSet), children: [_jsx("div", { className: "px-8 max-w-lg flex flex-col md:max-w-2xl", children: _jsx("img", { src: "images/olympiad/img-oly-prize-certificate.png", alt: "\uCEF4\uD4E8\uD130\uB85C \uBB38\uC81C\uB97C \uD478\uB294 \uC5EC\uC131", className: "rounded-xl overflow-hidden shadow-xl" }) }), _jsxs("div", { className: cn(prizeExplainWrapper), children: [_jsxs("div", { className: cn(prizeExplainSet), children: [_jsx("div", { className: cn(prizeTitle), children: "\uB300\uC0C1" }), _jsx("div", { className: cn(prizeDetail), children: "\uACE0\uB824\uB300\uD559\uAD50 \uACBD\uC601\uB300\uD559 \uD559\uC7A5\uC0C1" })] }), _jsxs("div", { className: cn(prizeExplainSet), children: [_jsx("div", { className: cn(prizeTitle), children: "\uAE08\uC0C1/\uC740\uC0C1/\uB3D9\uC0C1" }), _jsx("div", { className: cn(prizeDetail), children: "\uACE0\uB824\uB300\uD559\uAD50 \uC5B8\uC5B4\uC815\uBCF4\uC5F0\uAD6C\uC18C \uC18C\uC7A5\uC0C1" })] }), _jsxs("div", { className: cn(prizeExplainSet), children: [_jsx("div", { className: cn(prizeTitle), children: "\uC7A5\uB824\uC0C1" }), _jsx("div", { className: cn(prizeDetail), children: "\uACE0\uB824\uB300\uD559\uAD50 \uAD6D\uC81C\uD1A0\uC140\uC704\uC6D0\uD68C \uC704\uC6D0\uC7A5\uC0C1" })] })] })] }) })] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(medalHandler), children: _jsx("img", { src: "images/olympiad/img-oly-prize-medal.png", alt: "" }) }), _jsxs("div", { className: cn(sectionTitleBreaker), children: [_jsx("div", { className: cn(sectionTitle), children: "\uACE0\uB824\uB300\uD559\uAD50 \uAE30\uAD00\uC7A5\uC0C1\uC744" }), _jsx("div", { className: cn(sectionTitle), children: "\uC218\uC0C1\uD560 \uC218 \uC788\uB294 \uAE30\uD68C" })] }), _jsx("div", { className: "h-0.5 w-1/4 my-10 bg-green-dark rounded-lg" }), _jsx("div", { className: cn(prizeWrapper), children: _jsxs("div", { className: cn(prizeSet), children: [_jsx("div", { className: "px-8 max-w-lg flex flex-col md:max-w-2xl", children: _jsx("img", { src: "images/olympiad/img-oly-prize-certificate.png", alt: "\uCEF4\uD4E8\uD130\uB85C \uBB38\uC81C\uB97C \uD478\uB294 \uC5EC\uC131", className: "rounded-xl overflow-hidden shadow-main hover:shadow-main-hover duration-300 hover:scale-105" }) }), _jsxs("div", { className: cn(prizeExplainWrapper), children: [_jsxs("div", { className: cn(prizeExplainSet), children: [_jsx("div", { className: cn(prizeTitle), children: "\uB300\uC0C1" }), _jsx("div", { className: cn(prizeDetail), children: "\uACE0\uB824\uB300\uD559\uAD50 \uACBD\uC601\uB300\uD559 \uD559\uC7A5\uC0C1" })] }), _jsxs("div", { className: cn(prizeExplainSet), children: [_jsx("div", { className: cn(prizeTitle), children: "\uAE08\uC0C1/\uC740\uC0C1/\uB3D9\uC0C1" }), _jsx("div", { className: cn(prizeDetail), children: "\uACE0\uB824\uB300\uD559\uAD50 \uC5B8\uC5B4\uC815\uBCF4\uC5F0\uAD6C\uC18C \uC18C\uC7A5\uC0C1" })] }), _jsxs("div", { className: cn(prizeExplainSet), children: [_jsx("div", { className: cn(prizeTitle), children: "\uC7A5\uB824\uC0C1" }), _jsx("div", { className: cn(prizeDetail), children: "\uACE0\uB824\uB300\uD559\uAD50 \uAD6D\uC81C\uD1A0\uC140\uC704\uC6D0\uD68C \uC704\uC6D0\uC7A5\uC0C1" })] })] })] }) })] }));
 }

package/layout/template/home/Promotion.js

@@ -1,41 +1,92 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import SVG from "../../../asset/SVG";
-import { cn, gradient } from "../../../util";
+import { cn } from "../../../util";
+import { useRef } from "react";
 export default function Promotion({ banners, option, }) {
     const { className } = option ?? {};
+    const scrollContainerRef = useRef(null);
+    const cardWidth = 480; //card width
+    const handleScroll = (direction) => {
+        if (scrollContainerRef.current) {
+            const scrollAmount = cardWidth;
+            const currentScrollLeft = scrollContainerRef.current.scrollLeft;
+            const newScrollLeft = direction === "left"
+                ? Math.max(currentScrollLeft - scrollAmount, 0)
+                : currentScrollLeft + scrollAmount;
+            scrollContainerRef.current.scrollTo({
+                left: newScrollLeft,
+                behavior: "smooth"
+            });
+        }
+    };
     const container = {
-        positions: "relative",
+        positions: "relative z-10 group mt-20",
         displays: "flex flex-col",
-        boundaries: "pl-80",
-        className,
-    };
-    const body = {
-        displays: "flex flex-row gap-x-5",
-        sizes: "w-fit",
-        boundaries: "mt-7.5",
-        styles: "overflow-x-hidden",
-    };
-    const buttonBox = {
-        displays: "flex justify-between items-center",
-        sizes: "w-18 h-7.5",
-        boundaries: "mt-5 px-5",
-        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: "\uD504\uB85C\uBAA8\uC158" }), _jsx("div", { className: cn(body), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.image.src))) }), _jsxs("div", { className: cn(buttonBox), children: [_jsx(SVG.Symbol.LessThan, { onClick: () => { } }), _jsx(SVG.Symbol.GreaterThan, { onClick: () => { } })] })] }));
+        textstyles: "break-keep antialiased",
+        // test: "border-red-500 border-4",
+    };
+    const deckTitlePositioning = {
+        displays: "flex flex-row ml:justify-center ml:itmes-center",
+        sizes: "w-full",
+    };
+    const deckTitle = {
+        displays: "pl-5",
+        sizes: "max-w-300 w-full",
+        textstyles: "font-pretendard-var font-bold text-2xl text-green-dark",
+    };
+    const cardPositioning = {
+        displays: "flex flex-nowrap",
+        sizes: "w-screen",
+    };
+    const cardWrapper = {
+        sizes: "w-full overflow-x-auto scroll-smooth scrollbar-hidden scroll-px-4",
+        display: "flex flex-nowrap vertical-top",
+        spacings: "px-5 pt-4 md:pt-6 pb-12",
+        snap: "snap-x snap-mandatory scroll-ms-0",
+    };
+    //adjust the responsive right margin of scroller
+    const cardDeck = {
+        displays: "inline-flex",
+        spacings: "gap-5 ml:mr-[calc(100vw-1200px)]",
+    };
+    const buttonPositioning = {
+        displays: "hidden flex-row md:flex",
+        sizes: "w-full h-full",
+        spacings: "px-2",
+        positions: "absolute top-0 left-0 justify-between items-center opacity-0 group-hover:opacity-100 duration-300",
+        hovering: "group pointer-events-none",
+    };
+    const hoverButton = {
+        sizes: "rounded-full w-12 h-12 scale-50 group-hover:scale-100",
+        animation: "duration-300 ",
+        test: "bg-gray-medium/20 hover:bg-gray-medium/50 pointer-events-auto backdrop-blur-sm fill-red-500"
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsx("div", { className: cn(deckTitle), children: "\uC0C8\uB85C\uC6B4 \uC18C\uC2DD" }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.image.src))) }) }) }), _jsxs("div", { className: cn(buttonPositioning), children: [_jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("left"), children: _jsx("img", { src: "images/home/handle-left.svg", alt: "" }) }), _jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("right"), children: _jsx("img", { src: "images/home/handle-right.svg", alt: "" }) })] })] }));
 }
 function Banner({ image, option }) {
-    const { background, boundary } = option ?? {};
-    const container = {
-        positions: "relative",
-        sizes: "w-260 h-125",
-        backgrounds: background ?? "bg-white",
-        boundaries: boundary ?? "border-2 border-gray-light ",
-        styles: "rounded-xl overflow-hidden",
+    const { background } = option ?? {};
+    //ghost card snaps to the end of the viewport
+    const ghostCard = {
+        displays: "flex",
+        spacings: "ms-0 ps-0 ",
+        scroll: "snap-start",
+    };
+    //adjust the responsive left margin of scroller
+    //adjust the card size
+    const card = {
+        graphics: "shadow-main",
+        sizes: "w-65 h-40 xxxs:w-76 xxxs:h-47.5 md:w-120 md:h-75 rounded-2xl md:rounded-xl",
+        backgrounds: background,
+        hover: "hover:shadow-main-hover hover:scale-[1.03]",
+        position: "ml:translate-x-[calc(50vw-600px)]",
+        transition: "duration-300",
+        displays: "relative display-block overflow-hidden",
+        fonts: "font-pretendard-var"
     };
-    const imageBox = {
-        positions: "absolute",
-        locations: image.location ?? "bottom-0 right-0",
+    const imageWrapper = {
+        sizes: "w-full h-full",
+        displays: "absolute",
+        positions: "bottom-0 left-0",
+        background: `bg-cover bg-center`
     };
-    return (_jsx("div", { className: cn(container), children: _jsx("img", { src: image.src, alt: "banner-promotion", className: cn(imageBox) }) }));
+    return (_jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), children: _jsx("div", { className: cn(imageWrapper), style: { backgroundImage: `url(${image?.src})` } }) }) }));
 }

package/layout/template/home/Service.d.ts

@@ -6,7 +6,6 @@ interface BannerProps {
     titles: Titles;
     image?: {
         src: string;
-        location?: string;
         isBlur?: boolean;
     };
     option?: {

package/layout/template/home/Service.js

@@ -1,52 +1,106 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn, gradient } from "../../../util";
+import { useRef } from "react";
+import { cn } from "../../../util";
 export default function Service({ banners }) {
+    const scrollContainerRef = useRef(null);
+    const cardWidth = 400; // card width
+    const handleScroll = (direction) => {
+        if (scrollContainerRef.current) {
+            const scrollAmount = cardWidth;
+            const currentScrollLeft = scrollContainerRef.current.scrollLeft;
+            const newScrollLeft = direction === "left"
+                ? Math.max(currentScrollLeft - scrollAmount, 0)
+                : currentScrollLeft + scrollAmount;
+            scrollContainerRef.current.scrollTo({
+                left: newScrollLeft,
+                behavior: "smooth",
+            });
+        }
+    };
     const container = {
-        positions: "relative",
+        positions: "relative z-10 group",
         displays: "flex flex-col",
-        boundaries: "pl-80",
-    };
-    const body = {
-        displays: "flex flex-row gap-x-5",
-        sizes: "w-fit",
-        boundaries: "mt-7.5",
-        styles: "overflow-x-hidden",
-    };
-    const buttonBox = {
-        displays: "flex justify-between items-center",
-        sizes: "w-18 h-7.5",
-        boundaries: "mt-5 px-5",
-        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))) })] }));
+        textstyles: "break-keep antialiased",
+        // test: "border-red-500 border-4",
+    };
+    const deckTitlePositioning = {
+        displays: "flex flex-row ml:justify-center ml:itmes-center",
+        sizes: "w-full",
+    };
+    const deckTitle = {
+        displays: "pl-5",
+        sizes: "max-w-300 w-full",
+        textstyles: "font-pretendard-var font-bold text-2xl text-green-dark",
+    };
+    const cardPositioning = {
+        displays: "flex flex-nowrap",
+        sizes: "w-screen",
+    };
+    const cardWrapper = {
+        sizes: "w-full overflow-x-auto scroll-smooth scrollbar-hidden scroll-px-4",
+        display: "flex flex-nowrap vertical-top",
+        spacings: "px-5 pt-4 md:pt-6 pb-12",
+        snap: "snap-x snap-mandatory scroll-ms-0",
+    };
+    //adjust the responsive right margin of scroller
+    const cardDeck = {
+        displays: "inline-flex",
+        spacings: "gap-5 ml:mr-[calc(100vw-1200px)]",
+    };
+    const buttonPositioning = {
+        displays: "hidden flex-row md:flex",
+        sizes: "w-full h-full",
+        spacings: "px-2",
+        positions: "absolute top-0 left-0 justify-between items-center opacity-0 group-hover:opacity-100 duration-300",
+        hovering: "group pointer-events-none",
+    };
+    const hoverButton = {
+        sizes: "rounded-full w-12 h-12 scale-50 group-hover:scale-100",
+        animation: "duration-300 ",
+        test: "bg-gray-medium/20 hover:bg-gray-medium/50 pointer-events-auto backdrop-blur-sm fill-red-500",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsx("div", { className: cn(deckTitle), children: "\uD1A0\uC140\uC758 \uCC28\uBCC4\uD654\uB41C \uC11C\uBE44\uC2A4" }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) }) }) }), _jsxs("div", { className: cn(buttonPositioning), children: [_jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("left"), children: _jsx("img", { src: "images/home/handle-left.svg", alt: "" }) }), _jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("right"), children: _jsx("img", { src: "images/home/handle-right.svg", alt: "" }) })] })] }));
 }
 function Banner({ titles, image, option }) {
     const { background } = option ?? {};
-    const container = {
-        positions: "relative",
-        displays: "flex flex-col",
-        sizes: "w-93 h-125",
-        backgrounds: background ?? "bg-gray-light",
-        styles: "rounded-md overflow-hidden",
+    //ghost card snaps to the end of the viewport
+    const ghostCard = {
+        displays: "flex",
+        spacings: "ms-0 ps-0 ",
+        scroll: "snap-start",
+    };
+    //adjust the responsive left margin of scroller
+    //adjust the card size
+    const card = {
+        graphics: "shadow-main",
+        sizes: "h-100 w-65 xxxs:w-76 md:w-100 md:h-125 rounded-2xl md:rounded-xl",
+        backgrounds: background,
+        hover: "hover:shadow-main-hover hover:scale-[1.03]",
+        position: "ml:translate-x-[calc(50vw-600px)]",
+        transition: "duration-300",
+        displays: "relative display-block overflow-hidden",
+        fonts: "font-pretendard-var",
     };
     const titleBox = {
         container: {
-            positions: "relative z-10",
-            paddings: "pt-12 pl-12",
+            positions: "relative flex flex-col z-10",
+            sizes: "w-full h-fit",
+            paddings: "p-7",
         },
         title: {
-            fonts: "text-2xl font-pretendard-bold",
+            fonts: "text-xl font-bold md:text-2xl",
             colors: titles.titleColor ?? "text-gray-dark ",
         },
         subtitle: {
-            fonts: "text-lg font-pretendard-bold ",
+            fonts: "text-xs font-medium ",
             colors: titles.subtitleColor ?? "text-gray-medium",
         },
     };
-    const imageBox = {
-        positions: "absolute z-0",
-        locations: image?.location ?? "bottom-0 right-0",
+    const imageWrapper = {
+        sizes: "w-full h-full",
+        displays: "absolute",
+        positions: "bottom-0 left-0",
+        background: `bg-cover bg-center`,
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.subtitle), children: titles.subtitle }), _jsx("div", { className: cn(titleBox.title), children: titles.title })] }), image && _jsx("img", { src: image?.src, alt: "banner", className: cn(imageBox) }), image?.isBlur && (_jsx("div", { className: "absolute bg-gradient-to-br from-white to-transparent z-0  w-full h-full" }))] }));
+    return (_jsx("div", { className: cn(ghostCard), children: _jsxs("div", { className: cn(card), children: [_jsx("div", { className: cn(imageWrapper), style: { backgroundImage: `url(${image?.src})` } }), _jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.subtitle), children: titles.subtitle }), _jsx("div", { className: cn(titleBox.title), children: titles.title })] })] }) }));
 }

package/layout/template/home/Shortcut.js

@@ -2,14 +2,31 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
 export default function ShortcutBanner({ shortcuts, }) {
     const container = {
-        displays: "flex gap-x-10 justify-center items-center",
-        sizes: "w-full h-57.5",
+        displays: "flex justify-center items-center",
+        spacings: "px-5 pt-16 pb-24"
+    };
+    const buttonWrapper = {
+        displays: "flex justify-center items-center flex-wrap",
+        sizes: "max-w-70 h-fit sm:max-w-full sm:w-full",
+        spacings: "gap-x-6 gap-y-4 xxxs:gap-x-10 sm:gap-x-6 md:gap-x-10",
+        graphics: "antialiased",
+    };
+    const buttonSet = {
+        displays: "group flex flex-col justify-center items-center",
+        sizes: "w-16 hover:scale-110",
+        animation: "duration-300",
+        spacings: "gap-2"
     };
     const tagBox = {
         displays: "flex justify-center items-center",
-        sizes: "w-16 h-6.25 ",
-        fonts: "text-xs font-pretendard-bold",
-        styles: "bg-gray-light rounded-md",
+        sizes: "w-full h-6.25 ",
+        fonts: "text-xs font-pretendard-var font-medium text-gray-medium group-hover:text-green-dark",
+        styles: "bg-gray-light/40 group-hover:bg-green-light rounded-md",
+        sapcings: "",
+    };
+    const iconContainer = {
+        sizes: "w-16 h-16 rounded-lg",
+        background: "group-hover:bg-gray-light/40"
     };
-    return (_jsx("div", { className: cn(container), children: shortcuts.map((shortcut) => (_jsxs("button", { onClick: shortcut.onClick, className: "flex flex-col gap-y-3.75", children: [_jsx("img", { src: shortcut.icon, alt: "shortcut-icon", width: 64, height: 64 }), _jsx("div", { className: cn(tagBox), children: shortcut.title })] }, shortcut.title))) }));
+    return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(buttonWrapper), children: shortcuts.map((shortcut) => (_jsxs("button", { onClick: shortcut.onClick, className: cn(buttonSet), children: [_jsx("div", { className: cn(iconContainer), children: _jsx("img", { src: shortcut.icon, alt: shortcut.title }) }), _jsx("div", { className: cn(tagBox), children: shortcut.title })] }, shortcut.title))) }) }));
 }

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

@@ -80,11 +80,14 @@ export default function Carousel({ contents, }) {
         styles: "rounded-md",
     };
     const buttonBox = {
-        positions: !isMD && "absolute bottom-5 left-5 sm:bottom-10 sm:left-10",
         animations: "duration-500",
-        displays: "justify-center items-center gap-1 flex",
-        sizes: "w-23.25 h-6.25 bg-gray-dark rounded-full",
-        paddings: "px-1.5 mt-12",
+        displays: "justify-center items-center gap-1 flex z-10",
+        sizes: "w-30 h-10 md:h-6.25 md:w-23.25 bg-gray-dark rounded-full",
+        paddings: "px-1.5 mt-0 mb-5 md:mt-12 ",
     };
-    return (_jsx("div", { onClick: contents[index].onClick, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "duration-500 w-fit h-fit flex flex-col mt-4 xxs:mt-8 xxs:flex-row xxs:gap-8 md:flex-col md:flex-none md:w-72 md:pl-7.5 md:gap-6 md:mt-0", children: [_jsxs("div", { className: cn(titleSet), children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl md:text-2xl", children: titles.title })] }), _jsx(LineBreaks, { className: "w-fit flex flex-col justify-center text-sm my-2 xxs:mt-0 md:text-base", texts: titles.subtitle }), _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: handlePrev, className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "flex flex-row gap-2 justify-center items-center", children: [_jsx("div", { className: "text-white w-2 text-sm", children: index + 1 }), _jsx("div", { className: "w-0.5 h-3 bg-gray-medium" }), _jsx("div", { className: "text-white w-2 text-sm", children: contents.length })] }), _jsx("button", { onClick: handleNext, className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] })] }), _jsx("div", { className: "h-full overflow-hidden w-fit", children: image && (_jsx(animated.img, { src: image, alt: "carousel-image", onLoad: () => setLoaded(true), className: "object-cover h-full", style: transitionStyles })) })] }) }));
+    const buttonBoxPosition = {
+        display: "absolute flex justify-center items-center md:static md:justify-start",
+        sizes: "w-full h-fit left-0 bottom-0 z-10",
+    };
+    return (_jsx("div", { onClick: contents[index].onClick, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "duration-500 w-fit h-fit flex flex-col mt-4 xxs:mt-8 xxs:flex-row xxs:gap-8 md:flex-col md:flex-none md:w-72 md:pl-7.5 md:gap-6 md:mt-0", children: [_jsxs("div", { className: cn(titleSet), children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl md:text-2xl", children: titles.title })] }), _jsx(LineBreaks, { className: "w-fit flex flex-col justify-center text-sm my-2 xxs:mt-0 md:text-base", texts: titles.subtitle }), _jsx("div", { className: cn(buttonBoxPosition), children: _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: handlePrev, className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "flex flex-row md:gap-2 gap-4 justify-center items-center", children: [_jsx("div", { className: "text-white w-2 text-sm", children: index + 1 }), _jsx("div", { className: "w-0.5 h-3 bg-gray-medium" }), _jsx("div", { className: "text-white w-2 text-sm", children: contents.length })] }), _jsx("button", { onClick: handleNext, className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] }) })] }), _jsx("div", { className: "h-full overflow-hidden w-fit", children: image && (_jsx(animated.img, { src: image, alt: "carousel-image", onLoad: () => setLoaded(true), className: "object-cover h-full z-0", style: transitionStyles })) })] }) }));
 }

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

@@ -3,15 +3,44 @@ import { cn } from "../../../../util";
 export default function Footer() {
     const container = {
         displays: "flex justify-center items-center",
-        sizes: "w-full h-114",
-        backgrounds: "bg-gray-light",
-        styles: "text-gray-dark",
+        sizes: "w-full h-fit",
+        backgrounds: "bg-[#FBFBFB]",
+        textstyles: "text-gray-medium font-pretendard-var text-sm break-keep antialiased",
     };
     const body = {
         sizes: "w-full max-w-290",
-        paddings: "py-8.5 px-7.5",
+        paddings: "py-20 px-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: "\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 logoWrapper = {
+        displays: "flex flex-row gap-6",
+    };
+    const svgController = {
+        sizes: "h-8",
+    };
+    //general web info of TOSEL
+    const infoSet = {
+        diaplay: "flex flex-col gap-1 my-8 w-full",
+    };
+    const infoTitle = {
+        textstyling: "text-base font-bold",
+    };
+    const info = {
+        textstyling: "leading-normal text-sm",
+    };
+    //social button styling
+    const iconWrapper = {
+        displays: "flex items-center gap-3 mt-8",
+    };
+    const iconBox = {
+        sizes: "w-9 h-9 rounded-md",
+        displays: "flex justify-center items-center",
+        backgrounds: "bg-gray-medium/30 hover:bg-gray-medium",
+        animation: "duration-200"
+    };
+    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) => (_jsx("div", { 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: ["\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", { 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", { 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", { 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/Header.js

@@ -6,7 +6,8 @@ export default function Header({ logo, rightButton, contents, }) {
         positions: "fixed top-0 left-0 z-40",
         displays: "flex justify-center items-center",
         sizes: "w-full",
-        styles: "bg-white  box-shadow ",
+        styles: "bg-white  box-shadow",
+        textstyles: "antialiased",
     };
     const body = {
         displays: "flex items-center justify-center md:justify-between",

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

@@ -1 +1,18 @@
-export default function Layout(): import("react/jsx-runtime").JSX.Element;
+import { Button as _Button } from "../../../interface";
+type EventType = "event" | "notice";
+interface Event {
+    id: number;
+    type: EventType;
+    thumbnail: string;
+    createdAt: string;
+    startedAt?: string;
+    expiredAt?: string;
+    endData?: string;
+    title: string;
+    content: string;
+    button?: _Button;
+}
+export default function Layout({ events }: {
+    events: Event[];
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/promotion/Layout.js

@@ -2,69 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from "react";
 import { IoIosSearch } from "react-icons/io";
 import dayjs from "dayjs";
-import { BsCreditCard } from "react-icons/bs";
-export default function Layout() {
-    const eventsData = [
-        {
-            id: 1,
-            img: "/images/promotion/promotion1.png",
-            type: "0",
-            startDate: "2024-05-01",
-            endDate: "2024-12-31",
-            title: "5월 토셀 랩 세미나 개최",
-            body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
-        },
-        {
-            id: 2,
-            img: "/images/promotion/promotion2.png",
-            type: "0",
-            regDate: "2024-09-01",
-            startDate: "2024-09-01",
-            endDate: "2024-09-30",
-            title: "83회 명예의 전당 등재자라면? 지금 바로 인터뷰에 참여해보세요",
-            body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
-        },
-        {
-            id: 3,
-            img: "/images/promotion/promotion3.png",
-            type: "1",
-            regDate: "2024-09-01",
-            startDate: "0000-00-00",
-            endDate: "0000-00-00",
-            title: "소셜 로그인 이벤트! 네이버 계정 연동하고 쿠폰 받아가세요",
-            body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
-        },
-        {
-            id: 4,
-            img: "/images/promotion/promotion4.png",
-            type: "2",
-            regDate: "2024-09-01",
-            startDate: "0000-00-00",
-            endDate: "0000-00-00",
-            title: "인사혁신처, 지방공기업 등에 TOSEL 확대 적용 발표",
-            body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
-        },
-        {
-            id: 5,
-            img: "/images/promotion/promotion5.png",
-            type: "0",
-            regDate: "2024-09-01",
-            startDate: "2024-10-01",
-            endData: "2024-10-31",
-            title: "24년도 하반기 고려대학교 미래교육원 토셀 전문가 과정 모집",
-            body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
-        },
-        {
-            id: 6,
-            img: "/images/promotion/promotion6.png",
-            type: "2",
-            regDate: "2024-09-01",
-            startDate: "0000-00-00",
-            endDate: "0000-00-00",
-            title: "토셀, 경찰대학교 편입학전형 / 졸업인증 평가 반영",
-            body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
-        },
-    ];
+import { cn, isHTMLString } from "../../../util";
+export default function Layout({ events }) {
     const [selectedEvent, setSelectedEvent] = useState(null);
     const [filter, setFilter] = useState("모두보기");
     const [searchQuery, setSearchQuery] = useState("");
@@ -76,57 +15,61 @@ export default function Layout() {
     };
     const getStatusText = (event) => {
         const now = dayjs();
-        const startDate = dayjs(event.startDate);
-        const endDate = event.endDate ? dayjs(event.endDate) : dayjs(event.endData);
-        if (event.type === "0") {
-            if (now.isBefore(startDate)) {
-                return (_jsx("span", { className: "px-2 py-1 text-2xs font-semibold rounded-md bg-green-dark text-white", children: "\uC624\uD508\uC608\uC815" }));
-            }
-            else if (now.isAfter(endDate)) {
-                return (_jsx("span", { className: "px-2 py-1 text-2xs font-semibold rounded-md bg-gray-light text-gray-mid", children: "\uB9C8\uAC10" }));
+        const startedAt = dayjs(event.startedAt);
+        const expiredAt = event.expiredAt
+            ? dayjs(event.expiredAt)
+            : dayjs(event.endData);
+        if (event.type === "event") {
+            if (event.expiredAt) {
+                if (now.isBefore(startedAt)) {
+                    return (_jsx("span", { className: "px-2 py-1 text-2xs font-semibold rounded-md bg-green-dark text-white", children: "\uC624\uD508\uC608\uC815" }));
+                }
+                else if (now.isAfter(expiredAt)) {
+                    return (_jsx("span", { className: "px-2 py-1 text-2xs font-semibold rounded-md bg-gray-light text-gray-mid", children: "\uB9C8\uAC10" }));
+                }
+                else {
+                    const diff = expiredAt.diff(now, "day");
+                    return (_jsxs("span", { className: "px-2 py-1 text-2xs font-semibold rounded-md bg-green-dark/10 text-green-dark", children: ["\uC9C4\uD589\uC911 | D-", diff] }));
+                }
             }
             else {
-                const diff = endDate.diff(now, "day");
-                return (_jsxs("span", { className: "px-2 py-1 text-2xs font-semibold rounded-md bg-green-dark/10 text-green-dark", children: ["\uC9C4\uD589\uC911 | D-", diff] }));
+                return (_jsx("div", { className: "w-[63px] h-[22px] rounded-md bg-black flex items-center justify-center", style: {
+                        background: "linear-gradient(269deg, rgba(118, 0, 35, 0.10) 0%, rgba(16, 86, 82, 0.10) 100%)",
+                    }, children: _jsx("div", { className: "px-2 py-1 text-2xs font-semibold rounded-md", style: {
+                            background: "linear-gradient(269deg, rgba(118, 0, 35) 0%, rgba(16, 86, 82) 100%)",
+                            WebkitBackgroundClip: "text",
+                            WebkitTextFillColor: "transparent",
+                        }, children: "\uC0C1\uC2DC \uC774\uBCA4\uD2B8" }) }));
             }
         }
-        else if (event.type === "1") {
-            return (_jsx("div", { className: "w-[63px] h-[22px] rounded-md bg-black flex items-center justify-center", style: {
-                    background: "linear-gradient(269deg, rgba(118, 0, 35, 0.10) 0%, rgba(16, 86, 82, 0.10) 100%)",
-                }, children: _jsx("div", { className: "px-2 py-1 text-2xs font-semibold rounded-md", style: {
-                        background: "linear-gradient(269deg, rgba(118, 0, 35) 0%, rgba(16, 86, 82) 100%)",
-                        WebkitBackgroundClip: "text",
-                        WebkitTextFillColor: "transparent",
-                    }, children: "\uC0C1\uC2DC \uC774\uBCA4\uD2B8" }) }));
-        }
-        else if (event.type === "2") {
+        else if (event.type === "notice") {
             return (_jsx("span", { className: "px-2 py-1 text-2xs font-semibold rounded-md bg-blue-navy/10 text-blue-navy", children: "\uD1A0\uC140 \uC18C\uC2DD" }));
         }
         else {
             return "";
         }
     };
-    const filteredEvents = eventsData
+    const filteredEvents = events
         .filter((event) => {
         const now = dayjs();
-        const startDate = dayjs(event.startDate);
-        const endDate = event.endDate
-            ? dayjs(event.endDate)
-            : dayjs(event.endData);
+        const startedAt = dayjs(event.startedAt);
+        const expiredAt = dayjs(event.expiredAt);
         if (filter === "모두보기")
             return true;
         if (filter === "진행 중") {
-            return (event.type === "0" && now.isAfter(startDate) && now.isBefore(endDate));
+            return (event.startedAt && now.isAfter(startedAt) && now.isBefore(expiredAt));
         }
         if (filter === "예정된") {
-            return event.type === "0" && now.isBefore(startDate);
+            return event.startedAt && now.isBefore(startedAt);
         }
         if (filter === "토셀소식")
-            return event.type === "2";
+            return event.type === "notice";
         return false;
     })
         .filter((event) => event.title.includes(searchQuery));
-    return (_jsxs("div", { className: "min-h-screen w-full mx-auto", children: [_jsx("img", { src: "/images/promotion/promotionHeader.png", alt: "" }), _jsx("div", { className: "mmd:max-w-300 h-full flex flex-col mx-auto px-10", children: selectedEvent ? (_jsxs("div", { className: "flex flex-col mmd:flex-row", children: [_jsx("div", { className: "min-w-[320px] h-auto p-5 mmd:sticky mmd:top-20 mmd:self-start", children: _jsxs("div", { className: "w-full h-auto rounded-xl sm:flex mmd:flex-col", children: [_jsx("div", { className: "w-full mmd:h-50 overflow-hidden", children: _jsx("img", { src: selectedEvent.img, alt: "", className: "rounded-xl h-full object-cover w-full" }) }), _jsxs("div", { className: "w-full h-auto pt-5 sm:p-5 mmd:p-0 mmd:pt-5 gap-3 flex flex-col", children: [_jsx("div", { className: "flex items-center", children: getStatusText(selectedEvent) }), _jsx("div", { className: "text-sm font-bold text-gray-dark flex items-center mb-2", children: selectedEvent.title }), _jsxs("div", { className: "w-full h-12 flex items-center justify-center rounded-md text-white cursor-pointer font-bold gap-3 text-sm xs:text-md", style: {
-                                                    background: "linear-gradient(269deg, rgba(118, 0, 35) 0%, rgba(16, 86, 82) 100%)",
-                                                }, children: [_jsx(BsCreditCard, { className: "text-lg xs:text-xl" }), "\uC5F0\uB3D9\uD558\uACE0 \uCFE0\uD3F0\uBC1B\uAE30"] })] })] }, selectedEvent.id) }), _jsxs("div", { className: "flex-grow p-5", children: [_jsx("div", { children: _jsx("img", { src: selectedEvent.body, className: "w-full rounded-xl object-cover", alt: "" }) }), _jsx("button", { onClick: handleBackToList, className: "p-5 bg-green-dark/5 text-green-dark rounded-xl flex items-center justify-center hover:bg-green-dark/20 transition-all", children: "\uBAA9\uB85D\uC73C\uB85C \uB3CC\uC544\uAC00\uAE30" })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between min-h-14.5 border-b-1", children: [_jsxs("div", { className: "w-full mb-5 h-9 sm:w-80 sm:h-9.5 flex items-center bg-[#f0f0f0]/10 rounded-xl", children: [_jsx(IoIosSearch, { className: "text-xl text-green-dark mr-3" }), _jsx("input", { type: "text", placeholder: "\uD0A4\uC6CC\uB4DC\uB97C \uC785\uB825\uD558\uC138\uC694.", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full h-full text-sm bg-[#f0f0f0]/10 placeholder:text-[#7f7f7f] placeholder:font-light outline-none" })] }), _jsx("div", { className: "flex h-9 pb-5 sm:pb-0 sm:h-9.5 items-center sm:justify-center ", children: ["모두보기", "진행 중", "예정된", "토셀소식"].map((item) => (_jsx("div", { className: `text-xs sm:text-2xs md:text-xs p-2 sm:p-3 flex items-center justify-center cursor-pointer rounded-lg ${filter === item ? "bg-green-dark/10 text-green-dark" : ""}`, onClick: () => setFilter(item), children: item }, item))) })] }), _jsx("div", { className: "pt-5 flex grid sm:grid-cols-2 mmd:grid-cols-3 gap-5 rounded-xl", children: filteredEvents.map((event) => (_jsxs("div", { onClick: () => handleCardClick(event), className: "w-full max-h-84 shadow-md rounded-xl cursor-pointer box-shadow-green transition-all duration-500", children: [_jsx("div", { className: "w-full max-h-50 rounded-t-xl overflow-hidden relative", children: _jsx("img", { src: event.img, alt: "", className: "w-full" }) }), _jsxs("div", { className: "w-full min-h-34 p-8 gap-3 flex flex-col", children: [_jsx("div", { className: "flex items-center", children: getStatusText(event) }), _jsx("div", { className: "text-sm font-bold text-gray-dark flex items-center", children: event.title })] })] }, event.id))) })] })) })] }));
+    const button = () => ({
+        sizes: "w-full h-12 flex items-center justify-center rounded-md text-white cursor-pointer font-bold gap-3 text-sm xs:text-md",
+        backgrounds: "bg-gradient-to-l from-[#760023] to-[#105652]",
+    });
+    return (_jsx("div", { className: "min-h-screen w-full mx-auto", children: _jsx("div", { className: "mmd:max-w-300 h-full flex flex-col mx-auto px-10", children: selectedEvent ? (_jsxs("div", { className: "flex flex-col mmd:flex-row", children: [_jsx("div", { className: "min-w-[320px] h-auto p-5 mmd:sticky mmd:top-20 mmd:self-start", children: _jsxs("div", { className: "w-full h-auto rounded-xl sm:flex mmd:flex-col", children: [_jsx("div", { className: "w-full mmd:h-50 overflow-hidden", children: _jsx("img", { src: selectedEvent.thumbnail, alt: "", className: "rounded-xl h-full object-cover w-full" }) }), _jsxs("div", { className: "w-full h-auto pt-5 sm:p-5 mmd:p-0 mmd:pt-5 gap-3 flex flex-col", children: [_jsx("div", { className: "flex items-center", children: getStatusText(selectedEvent) }), _jsx("div", { className: "text-sm font-bold text-gray-dark flex items-center mb-2", children: selectedEvent.title }), selectedEvent.button && (_jsx("div", { onClick: selectedEvent.button.onClick, className: cn(button()), children: selectedEvent.button?.title }))] })] }, selectedEvent.id) }), _jsxs("div", { className: "flex-grow p-5", children: [_jsx("div", { children: isHTMLString(selectedEvent.content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: selectedEvent.content }, className: "w-full rounded-xl object-cover overflow-hidden" })) : (_jsx("div", { children: selectedEvent.content })) }), _jsx("button", { onClick: handleBackToList, className: "p-5 bg-green-dark/5 text-green-dark rounded-xl flex items-center justify-center hover:bg-green-dark/20 transition-all", children: "\uBAA9\uB85D\uC73C\uB85C \uB3CC\uC544\uAC00\uAE30" })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between min-h-14.5 border-b-1", children: [_jsxs("div", { className: "w-full mb-5 h-9 sm:w-80 sm:h-9.5 flex items-center bg-[#f0f0f0]/10 rounded-xl", children: [_jsx(IoIosSearch, { className: "text-xl text-green-dark mr-3" }), _jsx("input", { type: "text", placeholder: "\uD0A4\uC6CC\uB4DC\uB97C \uC785\uB825\uD558\uC138\uC694.", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full h-full text-sm bg-[#f0f0f0]/10 placeholder:text-[#7f7f7f] placeholder:font-light outline-none" })] }), _jsx("div", { className: "flex h-9 pb-5 sm:pb-0 sm:h-9.5 items-center sm:justify-center ", children: ["모두보기", "진행 중", "예정된", "토셀소식"].map((item) => (_jsx("div", { className: `text-xs sm:text-2xs md:text-xs p-2 sm:p-3 flex items-center justify-center cursor-pointer rounded-lg ${filter === item ? "bg-green-dark/10 text-green-dark" : ""}`, onClick: () => setFilter(item), children: item }, item))) })] }), _jsx("div", { className: "pt-5 flex grid sm:grid-cols-2 mmd:grid-cols-3 gap-5 rounded-xl", children: filteredEvents.map((event) => (_jsxs("div", { onClick: () => handleCardClick(event), className: "w-full max-h-84 shadow-md rounded-xl cursor-pointer box-shadow-green transition-all duration-500", children: [_jsx("div", { className: "w-full max-h-50 rounded-t-xl overflow-hidden relative", children: _jsx("img", { src: event.thumbnail, alt: "", className: "w-full" }) }), _jsxs("div", { className: "w-full min-h-34 p-8 gap-3 flex flex-col", children: [_jsx("div", { className: "flex items-center", children: getStatusText(event) }), _jsx("div", { className: "text-sm font-bold text-gray-dark flex items-center", children: event.title })] })] }, event.id))) })] })) }) }));
 }

package/package.json

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

package/tailwind.config.ts

@@ -1,5 +1,6 @@
 import tailwindcssAnimate from "tailwindcss-animate";
 import type { Config } from "tailwindcss";
+import type { PluginAPI } from "tailwindcss/types/config";
 
 // import twElements from "tw-elements/dist/plugin";
 // import tailwindcssDirectionalShadows from "tailwindcss-directional-shadows";
@@ -26,6 +27,13 @@ export default {
       backgroundImage: {
         "image-space": "url('/images/space/space.png')",
       },
+      scrollbar: {
+        hidden: "hidden",
+      },
+      boxShadow: {
+        main: "0 2px 10px 0px rgba(0, 0, 0, 0.14)",
+        "main-hover": "0 10px 12px 0px rgba(0, 0, 0, 0.3)",
+      },
       keyframes: {
         slideBackground: {
           "0%, 100%": { backgroundPosition: "left center" },
@@ -622,6 +630,25 @@ export default {
       pattern: /delay-.*/,
     },
   ],
-  plugins: [tailwindcssAnimate],
+  plugins: [
+    tailwindcssAnimate,
+    function ({ addUtilities }: PluginAPI) {
+      addUtilities(
+        {
+          ".scrollbar-hidden::-webkit-scrollbar": {
+            display: "none", // For WebKit browsers
+          },
+          ".scrollbar-hidden": {
+            "-ms-overflow-style": "none", // For Internet Explorer and Edge
+            "scrollbar-width": "none", // For Firefox
+          },
+        },
+        {
+          respectPrefix: false,
+          respectImportant: false,
+        }
+      );
+    },
+  ],
   darkMode: "selector",
 } satisfies Config;

package/version.txt

@@ -1 +1 @@
-1.0.132
+1.0.133