@edu-tosel/design 1.0.141 → 1.0.142

package/layout/index.d.ts

@@ -6,6 +6,7 @@ export { default as Home } from "./template/home";
 export * from "./template/dashboard";
 export { default as Event } from "./template/Event";
 export { default as Olympiad } from "./template/Olympiad";
+export { default as Regexam } from "./template/Regexam";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";
@@ -15,3 +16,4 @@ export { default as Tab } from "./template/Tab";
 export { default as TextBox } from "./template/TextBox";
 export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
 export { default as Gomito } from "./template/Gomito";
+export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";

package/layout/index.js

@@ -6,6 +6,7 @@ export { default as Home } from "./template/home";
 export * from "./template/dashboard";
 export { default as Event } from "./template/Event";
 export { default as Olympiad } from "./template/Olympiad";
+export { default as Regexam } from "./template/Regexam";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";
@@ -15,3 +16,4 @@ export { default as Tab } from "./template/Tab";
 export { default as TextBox } from "./template/TextBox";
 export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
 export { default as Gomito } from "./template/Gomito";
+export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";

package/layout/template/Event/{Container.d.ts → Event.d.ts}

@@ -1,8 +1,8 @@
 import { Button as _Button } from "../../../interface";
-type EventType = "event" | "notice";
-interface Event {
+type EventCategory = "event" | "notice";
+export interface Event {
     id: number;
-    type: EventType;
+    category: EventCategory;
     thumbnail: string;
     createdAt: string;
     startedAt?: string;
@@ -12,7 +12,4 @@ interface Event {
     content: string;
     button?: _Button;
 }
-export default function Container({ events }: {
-    events: Event[];
-}): import("react/jsx-runtime").JSX.Element;
 export {};

package/layout/template/Event/Event.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+import { Event } from "./Event";
+import { OnClick } from "../../../interface";
+interface EventProps {
+    events: (Event & {
+        onClick?: OnClick;
+    })[];
+}
+export default function Many({ events }: EventProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Event/Many.js

@@ -0,0 +1,29 @@
+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 { LineBreaks } from "../../../text";
+import { StatusText } from "./StatusText";
+export default function Many({ events }) {
+    const [filter, setFilter] = useState("모두보기");
+    const [searchQuery, setSearchQuery] = useState("");
+    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.category === "notice";
+        return false;
+    })
+        .filter((event) => event.title.includes(searchQuery));
+    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: _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  grid sm:grid-cols-2 mmd:grid-cols-3 gap-5 rounded-xl", children: filteredEvents.map((event) => (_jsxs("div", { onClick: event.onClick, 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: _jsx(StatusText, { event: event }) }), _jsx(LineBreaks, { className: "text-sm font-bold text-gray-dark flex items-center", texts: event.title })] })] }, event.id))) })] }) }) }));
+}

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

@@ -0,0 +1,6 @@
+import { Event } from "./Event";
+interface EventProps {
+    event: Event;
+}
+export default function One({ event }: EventProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Event/One.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, isHTMLString } from "../../../util";
+import { StatusText } from "./StatusText";
+export default function One({ event }) {
+    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 (_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: event.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: _jsx(StatusText, { event: event }) }), _jsx("div", { className: "text-sm font-bold text-gray-dark flex items-center mb-2", children: event.title }), event.button && (_jsx("div", { onClick: event.button.onClick, className: cn(button()), children: event.button?.title }))] })] }, event.id) }), _jsxs("div", { className: "flex-grow p-5", children: [_jsx("div", { children: isHTMLString(event.content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: event.content }, className: "w-full rounded-xl object-cover overflow-hidden" })) : (_jsx("div", { children: event.content })) }), _jsx("button", { onClick: () => history.back(), 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" })] })] }));
+}

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

@@ -0,0 +1,4 @@
+import { Event } from "./Event";
+export declare const StatusText: ({ event }: {
+    event: Event;
+}) => React.ReactNode;

package/layout/template/Event/StatusText.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import dayjs from "dayjs";
+export const StatusText = ({ event }) => {
+    const now = dayjs();
+    const startedAt = dayjs(event.startedAt);
+    const expiredAt = event.expiredAt
+        ? dayjs(event.expiredAt)
+        : dayjs(event.endData);
+    if (event.category === "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.category === "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 "";
+    }
+};

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

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

package/layout/template/Event/index.js

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

package/layout/template/Olympiad/Conditions.js

@@ -1,47 +1,168 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { cn } from "../../../util";
+import { getMaxBday } from "../../../util/getMaxBday";
 export default function Conditions() {
+    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 = {
-        sizes: "w-full h-fit",
-        spacings: "my-20 lg:my-40",
+        positions: "relative z-10 group mt-10 md:mt-20 mb-16 md:mb-40",
+        displays: "flex flex-col",
+        textstyles: "break-keep antialiased font-pretendard-var",
+    };
+    const deckTitlePositioning = {
         displays: "flex flex-col justify-center items-center",
-        graphics: "antialiased",
-        text: "break-keep",
+        sizes: "w-full",
+    };
+    const deckTitle = {
+        textstyles: "text-xl text-center text-green-dark font-pretendard-bold md:text-2xl",
+        animations: "duration-300",
+    };
+    const subTitle = {
+        textstyles: "text-xs sm:text-sm md:text-base font-pretendard-medium text-green-dark",
+        animations: "duration-300",
+        spacings: "mb-10",
     };
     const cardPositioning = {
         displays: "flex flex-nowrap",
-        sizes: "w-screen",
+        sizes: "w-full",
     };
     const cardWrapper = {
-        sizes: `w-full overflow-x-auto scroll-smooth scrollbar-hidden scroll-pl-4`,
+        sizes: "w-full overflow-x-auto scroll-smooth scrollbar-hidden scroll-px-4",
         display: "flex flex-nowrap vertical-top",
-        spacings: "p-5",
+        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: [_jsxs("div", { className: cn(deckTitlePositioning), children: [_jsx("div", { className: cn(deckTitle), children: "\uC5F0\uB839\uBCC4 \uCC38\uAC00\uAE30\uC900" }), _jsx("div", { className: cn(subTitle), children: "\uD559\uC0DD\uC774\uB77C\uBA74, \uB204\uAD6C\uB098 \uCC38\uAC00\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), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: Object.entries(levelStyles).map(([key, { name, description, maxBday, majorColor, imgSrc }]) => (_jsx(LevelCard, { name: name, description: description, maxBday: maxBday, majorColor: majorColor, imgSrc: imgSrc }, key))) }) }) }), _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: "" }) })] })] }));
+}
+const levelStyles = {
+    PS: {
+        name: "Pre-Starter",
+        description: "초등학교 2학년까지 참가 가능",
+        maxBday: getMaxBday().PS,
+        majorColor: "text-ps-pink",
+        imgSrc: "/images/olympiad/img-oly-book-ps.png",
+    },
+    ST: {
+        name: "Starter",
+        description: "초등학교 4학년까지 참가 가능",
+        maxBday: getMaxBday().ST,
+        majorColor: "text-st-orange",
+        imgSrc: "/images/olympiad/img-oly-book-st.png",
+    },
+    BA: {
+        name: "Basic",
+        description: "초등학교 6학년까지 참가 가능",
+        maxBday: getMaxBday().BA,
+        majorColor: "text-ba-yellow",
+        imgSrc: "/images/olympiad/img-oly-book-ba.png",
+    },
+    JR: {
+        name: "Junior",
+        description: "중학교 3학년까지 참가 가능",
+        maxBday: getMaxBday().JR,
+        majorColor: "text-jr-blue",
+        imgSrc: "/images/olympiad/img-oly-book-jr.png",
+    },
+    HJ: {
+        name: "High Junior",
+        description: "고등학교 3학년까지 참가 가능",
+        maxBday: getMaxBday().HJ,
+        majorColor: "text-hj-blue",
+        imgSrc: "/images/olympiad/img-oly-book-hj.png",
+    },
+};
+const LevelCard = ({ name, description, maxBday, majorColor, imgSrc, }) => {
     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",
+        spacings: "ms-0 ps-0 ",
+        scroll: "snap-start",
     };
-    //control size of the card
+    //adjust the responsive left margin of scroller
+    //adjust the card size
     const card = {
-        graphics: "shadow-main",
-        sizes: "h-100 w-80 rounded-2xl",
-        backgrounds: "bg-red",
-        hover: "hover:shadow-main-hover",
+        graphics: "shadow-main group/book",
+        sizes: "h-100 w-65 xxxs:w-76 md:w-100 md:h-125 rounded-xl md:rounded-2xl",
+        hover: "hover:shadow-main-hover hover:scale-[1.03]",
         position: "ml:translate-x-[calc(50vw-600px)]",
-        transition: "duration-200",
-        displays: "display-block",
+        transition: "duration-300",
+        displays: "relative display-block overflow-hidden",
+        fonts: "font-pretendard-var",
+        // styling varies by level
+        // colors: majorColor ? "hover:bg-" + majorColor + "/10" : "hover:bg-white",
     };
-    const sectiontitle = {
-        textstyles: "text-xl text-center text-green-dark mb-10 font-pretendard-bold md:text-2xl",
-        animations: "duration-300",
+    const imageWrapper = {
+        sizes: "w-full h-full p-10",
+        displays: "absolute flex justify-center items-center",
+        positions: "bottom-0 left-0",
+        background: "bg-[#f6f6f6]",
     };
-    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" }) })] }) }) })] }));
-}
+    // const bookTagWrapper = {
+    //   sizes: "w-full h-full p-10",
+    //   displays: "absolute flex justify-center items-center",
+    //   positions: "bottom-0 left-0",
+    //   clickEvent: "pointer-events-auto",
+    // };
+    // const bookTag = {
+    //   sizes: "w-fit h-fit rounded-md",
+    //   spacings: "py-1 px-2",
+    //   textStyles: "font-medium text-white",
+    //   background: "bg-green-dark",
+    //   opacity: "opacity-0 group-hover/book:opacity-100",
+    //   animation: "duration-300",
+    // };
+    const contentsWrapper = {
+        sizes: "w-full h-full",
+        displays: "relative flex flex-col gap-4 justify-between items-start",
+        spacings: "p-4 md:p-8",
+    };
+    const titleWrapper = {
+        displays: "flex flex-col justify-center items-center gap-0",
+        sizes: "w-full",
+    };
+    const title = {
+        textStyles: "text-lg font-bold",
+        textColor: majorColor ?? "text-gray-dark",
+        sizes: "w-fit h-fit rounded-md",
+        spacings: "py-1 px-2",
+    };
+    const subtitle = {
+        textStyles: "text-sm font-medium",
+        textColor: "text-gray-medium",
+    };
+    const dateText = {
+        textStyles: "text-sm font-medium md:text-base",
+        textColor: "text-gray-dark",
+    };
+    return (_jsx("div", { className: cn(ghostCard), children: _jsxs("div", { className: cn(card), children: [_jsx("div", { className: cn(imageWrapper), children: _jsx("div", { style: { backgroundImage: imgSrc ? `url(${imgSrc})` : undefined }, className: "w-full h-70 bg-cover bg-center" }) }), _jsxs("div", { className: cn(contentsWrapper), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(title), children: name }), _jsx("div", { className: cn(subtitle), children: description })] }), _jsxs("div", { className: cn(dateText), children: [maxBday, "\uC0DD \uC774\uC804\uBD80\uD130 ", _jsx("br", {}), " \uCC38\uC5EC\uD560 \uC218 \uC788\uC5B4\uC694"] })] })] }) }));
+};

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

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

package/layout/template/Regexam/Banner.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function Banner() {
+    const container = {
+        sizes: "w-full h-screen",
+        displays: "flex justify-center items-center",
+        spacings: "px-5",
+        textstyles: "antialiased",
+        backgrounds: "bg-[url('/images/olympiad/img-oly-bg-a.png')] bg-cover bg-center",
+    };
+    const explainer = {
+        textstyles: "text-xl md:text-2xl font-pretendard-medium text-gray-light mix-blend-difference sm:text-green-dark sm:mix-blend-normal",
+    };
+    const brandTextCore = {
+        textstyles: "text-7xl md:text-8xl font-pretendard-bold text-green-dark leading-none mt-6 mix-blend-plus-darker",
+        animations: "duration-300",
+    };
+    const brandTextSub = {
+        textstyles: "text-2xl md:text-3xl font-pretendard-bold text-green-dark",
+        animations: "duration-300",
+    };
+    const AdvertButton = {
+        sizes: "h-fit w-full xxxs:w-fit rounded-lg",
+        backgrounds: "bg-green-light",
+        textstyles: "text-lg text-green-dark font-pretendard-medium text-center",
+        spacings: "px-3 py-2 mt-30 xxxs:mt-16",
+        hoveractions: "hover:bg-green-dark hover:text-white",
+        animations: "duration-300",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: "flex flex-col w-full justify-start max-w-6xl", children: [_jsxs("div", { className: cn(explainer), children: ["\uD559\uC0DD\uC774\uB77C\uBA74, ", _jsx("br", {}), "\uC804\uAD6D \uC5B4\uB514\uC5D0\uC11C\uB098 \uCC38\uC5EC \uAC00\uB2A5\uD55C"] }), _jsx("div", { className: cn(brandTextCore), children: "VOCA" }), _jsx("div", { className: cn(brandTextSub), children: "\uC62C\uB9BC\uD53C\uC544\uB4DC" }), _jsx("a", { href: "https://olympiad.tosel.co.kr/dashboard", className: cn(AdvertButton), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] }) }));
+}

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

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

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Regexam } from "../../../layout";
+import { cn } from "../../../util";
+export default function RegexamLayout() {
+    const ref = useRef(null);
+    const container = {
+        sizes: "min-h-screen w-full",
+        textoptions: "break-keep antialiased",
+        cursor: "cursor-default",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsx(Regexam.Banner, {}) }));
+}

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

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

package/layout/template/Regexam/index.js

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

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

@@ -1,4 +1,5 @@
 import { OnClick } from "../../../interface";
-export default function Navigation({ clickBrowser, }: {
+export default function Navigation({ clickBrowser, elements, }: {
     clickBrowser: OnClick;
+    elements: React.ReactNode[];
 }): import("react/jsx-runtime").JSX.Element;

package/layout/template/home/Navigation.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { animated, useTransition } from "react-spring";
-import SVG from "../../../asset/SVG";
 import { cn } from "../../../util";
-export default function Navigation({ clickBrowser, }) {
+export default function Navigation({ clickBrowser, elements, }) {
     const [flag, setFlag] = useState(false);
     const container = {
         displays: "flex flex-col justify-between items-center",
@@ -29,5 +28,5 @@ export default function Navigation({ clickBrowser, }) {
             return () => clearTimeout(timer);
         }
     }, [flag]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-screen fixed top-0 left-0 flex justify-center items-center z-45", children: transition((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(container), children: _jsx(SVG.Icon.Browser, { onClick: () => setFlag(!flag) }) }))) }), overlayTransition((styles, item) => item && (_jsxs(animated.div, { style: styles, className: "bg-white h-screen fixed top-0 left-0 z-40 flex flex-col justify-center items-center overflow-hidden gap-y-14", children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel", width: 368.56, height: 80.07 }), _jsx("div", { children: "dashboard loading..." })] })))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-screen fixed top-0 left-0 flex justify-center items-center z-45", children: transition((styles, item) => item && (_jsx(animated.div, { style: styles, className: cn(container), children: elements.map((element) => element) }))) }), overlayTransition((styles, item) => item && (_jsxs(animated.div, { style: styles, className: "bg-white h-screen fixed top-0 left-0 z-40 flex flex-col justify-center items-center overflow-hidden gap-y-14", children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel", width: 368.56, height: 80.07 }), _jsx("div", { children: "dashboard loading..." })] })))] }));
 }

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

@@ -35,21 +35,23 @@ export default function Footer() {
         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"
+        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: "" }) }) })] })] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(logoWrapper), children: [_jsx("img", { className: cn(svgController), src: "/images/logos/logo-tosel-main.svg", alt: "" }), _jsx("img", { className: cn(svgController), src: "/images/logos/logo-itc-main.svg", alt: "" })] }), _jsxs("div", { className: "flex flex-wrap justify-between items-center border-b-1 border-gray-dark pb-4 mt-5 font-medium gap-y-1", children: [_jsx("div", { children: "Copyright TOSEL. \u24D2 All Rights Reserved." }), _jsx("div", { className: "flex gap-5", children: buttons.map((button, index) => (_jsxs("div", { onClick: button.onClick, className: "cursor-default", children: [button.title, " "] }, index))) })] }), _jsxs("div", { className: cn(infoSet), children: [_jsx("div", { className: cn(infoTitle), children: "\uACE0\uAC1D\uBB38\uC758" }), _jsxs("div", { className: cn(info), children: ["\uB300\uD45C\uBC88\uD638 | 02-923-0505", _jsx("br", {}), " \uAC1C\uC778\uBB38\uC758 | tosel_cs@tosel.co.kr ", _jsx("br", {}), "\uB2E8\uCCB4\uBB38\uC758 | tosel_academy@tosel.co.kr"] })] }), _jsxs("div", { className: cn(infoSet), children: [_jsx("div", { className: cn(infoTitle), children: "\uAD6D\uC81C\uD1A0\uC140\uC704\uC6D0\uD68C" }), _jsxs("div", { className: cn(info), children: ["\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 = [
-// {
-//   title: "이용약관",
-// },
-// {
-//   title: "개인정보 처리방침",
-// },
-// {
-//   title: "FAQ",
-// },
+    // {
+    //   title: "이용약관",
+    // },
+    // {
+    //   title: "개인정보 처리방침",
+    // },
+    {
+        title: "FAQ",
+        onClick: () => (window.location.href =
+            "https://dull-marmoset-39f.notion.site/TOSEL-FAQ-4054b35db6fc421c9495039e769992a3"),
+    },
 ];

package/package.json

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

package/util/getMaxBday.d.ts

@@ -0,0 +1 @@
+export declare const getMaxBday: () => Record<string, string>;

package/util/getMaxBday.js

@@ -0,0 +1,23 @@
+// utils/getMaxBday.ts
+export const getMaxBday = () => {
+    const maxBday = {};
+    const today = new Date();
+    const currentYear = today.getFullYear();
+    const levelAges = {
+        PS: 5,
+        ST: 10,
+        BA: 15,
+        JR: 20,
+        HJ: 18,
+    };
+    for (const [level, maxAge] of Object.entries(levelAges)) {
+        const maxBirthYear = currentYear - maxAge;
+        const maxBirthDate = new Date(maxBirthYear, 11, 31);
+        const year = maxBirthDate.getFullYear();
+        const month = String(maxBirthDate.getMonth() + 1).padStart(2, "0");
+        const day = String(maxBirthDate.getDate()).padStart(2, "0");
+        const formattedDate = `${year}년 ${month}월 ${day}일`;
+        maxBday[level] = formattedDate;
+    }
+    return maxBday;
+};

package/version.txt

@@ -1 +1 @@
-1.0.141
+1.0.142

package/layout/template/Event/Container.js

@@ -1,75 +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 { 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))) })] })) }) }));
-}