@edu-tosel/design 1.0.132 → 1.0.134

package/layout/index.d.ts

@@ -4,7 +4,7 @@ export { default as Announcement } from "./template/Announcement";
 export { default as Archive } from "./template/Archive";
 export { default as Home } from "./template/home";
 export * from "./template/dashboard";
-export { default as Promotion } from "./template/Promotion";
+export { default as Event } from "./template/Event";
 export { default as Olympiad } from "./template/Olympiad";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";

package/layout/index.js

@@ -4,7 +4,7 @@ export { default as Announcement } from "./template/Announcement";
 export { default as Archive } from "./template/Archive";
 export { default as Home } from "./template/home";
 export * from "./template/dashboard";
-export { default as Promotion } from "./template/Promotion";
+export { default as Event } from "./template/Event";
 export { default as Olympiad } from "./template/Olympiad";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";

package/layout/template/BbsLayout.d.ts

@@ -1,6 +1,7 @@
 export interface BbsLayoutProps {
     title: string;
+    topRight?: React.ReactNode;
     icon?: React.ReactNode;
     children: React.ReactNode;
 }
-export default function BbsLayout({ title, icon, children }: BbsLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default function BbsLayout({ title, icon, topRight, children, }: BbsLayoutProps): import("react/jsx-runtime").JSX.Element;

package/layout/template/BbsLayout.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
-export default function BbsLayout({ title, icon, children }) {
+export default function BbsLayout({ title, icon, topRight, children, }) {
     const container = {
         displays: "flex flex-col items-center",
         sizes: "w-full min-h-screen",
@@ -10,9 +10,9 @@ export default function BbsLayout({ title, icon, children }) {
         sizes: "w-full max-w-[1200px]",
     };
     const header = {
-        displays: "flex justify-start items-end",
+        displays: "flex justify-between items-end",
         sizes: "w-full  h-[188px]",
-        boundaries: "pl-12 pb-10",
+        boundaries: "px-12 pb-10",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsx("div", { className: cn(header), children: _jsxs("div", { className: "flex gap-x-5 items-center", children: [icon, _jsx("div", { className: "text-[40px] leading-none font-pretendard-bold text-green-dark", children: title })] }) }), children] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(header), children: [_jsxs("div", { className: "flex gap-x-5 items-center", children: [icon, _jsx("div", { className: "text-[40px] leading-none font-pretendard-bold text-green-dark", children: title })] }), topRight] }), children] }) }));
 }

package/layout/template/Event/Container.d.ts

@@ -0,0 +1,18 @@
+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 Container({ events }: {
+    events: Event[];
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Event/Container.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { IoIosSearch } from "react-icons/io";
+import dayjs from "dayjs";
+import { cn, isHTMLString } from "../../../util";
+export default function Container({ events }) {
+    const [selectedEvent, setSelectedEvent] = useState(null);
+    const [filter, setFilter] = useState("모두보기");
+    const [searchQuery, setSearchQuery] = useState("");
+    const handleCardClick = (event) => {
+        setSelectedEvent(event);
+    };
+    const handleBackToList = () => {
+        setSelectedEvent(null);
+    };
+    const getStatusText = (event) => {
+        const now = dayjs();
+        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 {
+                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 === "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 = events
+        .filter((event) => {
+        const now = dayjs();
+        const startedAt = dayjs(event.startedAt);
+        const expiredAt = dayjs(event.expiredAt);
+        if (filter === "모두보기")
+            return true;
+        if (filter === "진행 중") {
+            return (event.startedAt && now.isAfter(startedAt) && now.isBefore(expiredAt));
+        }
+        if (filter === "예정된") {
+            return event.startedAt && now.isBefore(startedAt);
+        }
+        if (filter === "토셀소식")
+            return event.type === "notice";
+        return false;
+    })
+        .filter((event) => event.title.includes(searchQuery));
+    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/layout/template/Event/Layout.d.ts

@@ -0,0 +1,5 @@
+import { BbsLayoutProps } from "../BbsLayout";
+interface LayoutProps extends Omit<BbsLayoutProps, "title"> {
+}
+export default function Layout({ topRight, children }: LayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Event/Layout.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BbsLayout from "../BbsLayout";
+export default function Layout({ topRight, children }) {
+    return (_jsx(BbsLayout, { title: "\uC774\uBCA4\uD2B8", topRight: topRight, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", children: _jsx("path", { d: "M42 22.5V39C42 39.7957 41.6839 40.5587 41.1213 41.1213C40.5587 41.6839 39.7956 42 39 42H10.5C9.70435 42 8.94129 41.6839 8.37868 41.1213C7.81607 40.5587 7.5 39.7957 7.5 39V22.5M24 9.75C24 8.71165 23.6921 7.69662 23.1152 6.83326C22.5383 5.9699 21.7184 5.29699 20.7591 4.89963C19.7998 4.50227 18.7442 4.39831 17.7258 4.60088C16.7074 4.80345 15.7719 5.30347 15.0377 6.03769C14.3035 6.77192 13.8034 7.70738 13.6009 8.72578C13.3983 9.74418 13.5023 10.7998 13.8996 11.7591C14.297 12.7184 14.9699 13.5383 15.8333 14.1152C16.6966 14.6921 17.7116 15 18.75 15H24M24 9.75V15M24 9.75C24 8.71165 24.3079 7.69662 24.8848 6.83326C25.4617 5.9699 26.2816 5.29699 27.2409 4.89963C28.2002 4.50227 29.2558 4.39831 30.2742 4.60088C31.2926 4.80345 32.2281 5.30347 32.9623 6.03769C33.6965 6.77192 34.1966 7.70738 34.3991 8.72578C34.6017 9.74418 34.4977 10.7998 34.1004 11.7591C33.703 12.7184 33.0301 13.5383 32.1667 14.1152C31.3034 14.6921 30.2884 15 29.25 15H24M24 15V42M6.75 22.5H42.75C43.992 22.5 45 21.492 45 20.25V17.25C45 16.008 43.992 15 42.75 15H6.75C5.508 15 4.5 16.008 4.5 17.25V20.25C4.5 21.492 5.508 22.5 6.75 22.5Z", stroke: "#105652", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), children: children }));
+}

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

@@ -0,0 +1,7 @@
+import Container from "./Container";
+import Layout from "./Layout";
+declare const Event: {
+    Container: typeof Container;
+    Layout: typeof Layout;
+};
+export default Event;

package/layout/template/Event/index.js

@@ -0,0 +1,7 @@
+import Container from "./Container";
+import Layout from "./Layout";
+const Event = {
+    Container,
+    Layout,
+};
+export default Event;

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", { 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.132",
+  "version": "1.0.134",
   "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.134

package/layout/template/Promotion.d.ts

@@ -1,5 +0,0 @@
-import Layout from "./promotion/Layout";
-declare const Promotion: {
-    Layout: typeof Layout;
-};
-export default Promotion;

package/layout/template/Promotion.js

@@ -1,5 +0,0 @@
-import Layout from "./promotion/Layout";
-const Promotion = {
-    Layout,
-};
-export default Promotion;

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

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

package/layout/template/promotion/Layout.js

@@ -1,132 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-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",
-        },
-    ];
-    const [selectedEvent, setSelectedEvent] = useState(null);
-    const [filter, setFilter] = useState("모두보기");
-    const [searchQuery, setSearchQuery] = useState("");
-    const handleCardClick = (event) => {
-        setSelectedEvent(event);
-    };
-    const handleBackToList = () => {
-        setSelectedEvent(null);
-    };
-    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" }));
-            }
-            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] }));
-            }
-        }
-        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") {
-            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
-        .filter((event) => {
-        const now = dayjs();
-        const startDate = dayjs(event.startDate);
-        const endDate = event.endDate
-            ? dayjs(event.endDate)
-            : dayjs(event.endData);
-        if (filter === "모두보기")
-            return true;
-        if (filter === "진행 중") {
-            return (event.type === "0" && now.isAfter(startDate) && now.isBefore(endDate));
-        }
-        if (filter === "예정된") {
-            return event.type === "0" && now.isBefore(startDate);
-        }
-        if (filter === "토셀소식")
-            return event.type === "2";
-        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))) })] })) })] }));
-}