@edu-tosel/design 1.0.168 → 1.0.170

package/board/design/Header.design.js

@@ -18,5 +18,5 @@ export default function BoardHeader({ titles, tag, option, }) {
         displays: "xl:hidden block ",
         sizes: "w-full h-19",
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [icon && _jsx("img", { src: icon, className: "fill-blue-500" }), _jsx("div", { className: `text-2xl font-pretendard-bold ${titleColor}`, children: title })] }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ selectOptions, option, state }, index) => (_jsx("div", { className: "flex items-center gap-2", children: _jsx(Select, { option: option, selectOptions: selectOptions, state: state }, title) }, index))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }), _jsx("div", { className: cn(block) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [icon && _jsx("img", { src: icon, className: "fill-blue-500" }), _jsx("div", { className: `text-2xl font-pretendard-bold ${titleColor}`, children: title })] }), _jsxs("div", { className: "relative flex items-center ml-auto gap-4", children: [selects?.map(({ selectOptions, option, state }) => (_jsx(Select, { option: option, selectOptions: selectOptions, state: state }, title))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }), _jsx("div", { className: cn(block) })] }));
 }

package/card/template/ProgressCard/Large.js

@@ -37,5 +37,8 @@ export default function ProgressCardLG({ titles, checks, displays, theme, option
             ...option,
             width: "3xl",
             height: "2xs",
-        }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title }, index) => (_jsxs("div", { className: cn(stepBox(checks[index])), children: [_jsx("div", { children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: theme })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-xl leading-none font-pretendard-bold ${text[theme ?? "green"]}`, children: titles.title }), _jsx("div", { className: "text-base leading-none", children: titles.subtitle })] }), _jsx("div", { className: "absolute bottom-0 left-0 bg-gray-light w-full h-2.5", children: _jsx("div", { className: `h-full ${widthSizes[occupied]} ${bg[theme ?? "green"]}` }) })] }));
+        }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title }, index) => (_jsxs("div", { className: cn(stepBox(checks[index])), children: [_jsx("div", { children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: theme })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-xl leading-none font-pretendard-bold ${text[theme ?? "green"]}`, children: titles.title }), _jsxs("div", { className: "flex gap-x-3", children: [_jsx("div", { className: "text-base leading-none", children: titles.subtitle }), titles && titles.link && (_jsx("div", { onClick: () => {
+                                    if (titles.link)
+                                        window.location.href = titles.link.path;
+                                }, className: "text-base leading-none underline text-gray-medium", children: titles.link.title }))] })] }), _jsx("div", { className: "absolute bottom-0 left-0 bg-gray-light w-full h-2.5", children: _jsx("div", { className: `h-full ${widthSizes[occupied]} ${bg[theme ?? "green"]}` }) })] }));
 }

package/interface/Card.d.ts

@@ -150,7 +150,12 @@ export interface RollCardProps extends Omit<CardProps, "disabled"> {
     disabled?: [boolean, OnClick];
 }
 export interface ProgressCardProps {
-    titles: Titles;
+    titles: Titles & {
+        link?: {
+            title: string;
+            path: string;
+        };
+    };
     checks: boolean[];
     nowFocus?: number | boolean;
     displays: Titles[];

package/layout/template/Regexam/OfflineExam.js

@@ -101,7 +101,7 @@ export function TableComponent() {
     const data = [
         {
             id: 1,
-            level: "Cocon",
+            level: "Cocoon",
             age: "미취학 아동, 5-7세",
             info1: "Section1: 15문항/15분",
             info2: "Section2: 15문항/15분",
@@ -164,7 +164,7 @@ export function AnnualTableComponent() {
             examNumber: "86",
             dDay: "24.11.16",
             regStartDay: "24.08.19",
-            regEndDay: "24.10.22",
+            regEndDay: "24.10.29",
             resultDay: "24.12.05",
         },
         {
@@ -172,28 +172,28 @@ export function AnnualTableComponent() {
             dDay: "25.02.15",
             regStartDay: "24.11.18",
             regEndDay: "25.01.21",
-            resultDay: "24.03.06",
+            resultDay: "25.03.06",
         },
         {
             examNumber: "88",
             dDay: "25.05.17",
             regStartDay: "25.02.17",
             regEndDay: "25.04.22",
-            resultDay: "24.06.05",
+            resultDay: "25.06.05",
         },
         {
             examNumber: "89",
             dDay: "25.08.23",
             regStartDay: "25.05.19",
             regEndDay: "25.07.22",
-            resultDay: "24.09.04",
+            resultDay: "25.09.04",
         },
         {
             examNumber: "90",
             dDay: "25.11.15",
             regStartDay: "25.08.25",
             regEndDay: "25.10.21",
-            resultDay: "24.12.04",
+            resultDay: "25.12.04",
         },
     ];
     return (_jsx("div", { className: "overflow-auto w-full scrollbar-hidden rounded-lg", children: _jsxs("div", { className: "min-w-[480px] w-full", children: [_jsxs("div", { className: "flex bg-gradient-to-r from-green-dark to-crimson-burgundy text-white font-semibold text-sm", children: [_jsx("div", { className: "sticky left-0 bg-green-dark p-2 flex-[1] shadow-main", children: "\uD68C\uCC28" }), _jsx("div", { className: "p-2 flex-[2]", children: "\uC2DC\uD5D8\uC77C\uC790" }), _jsx("div", { className: "p-2 flex-[3]", children: "\uC811\uC218\uAE30\uAC04" }), _jsx("div", { className: "p-2 flex-[2]", children: "\uC131\uC801\uBC1C\uD45C" })] }), data.map((item) => (_jsxs("div", { className: "flex bg-white/60 font-medium text-sm text-gray-medium ", children: [_jsxs("div", { className: "sticky left-0 bg-white/90 p-2 flex-[1] text-gray-dark border-green-dark border-r-1", children: [item.examNumber, "\uD68C"] }), _jsx("div", { className: "p-2 flex-[2] text-green-dark font-bold", children: item.dDay }), _jsxs("div", { className: "p-2 flex-[3] flex-col", children: [item.regStartDay, " ~ ", item.regEndDay] }), _jsx("div", { className: "p-2 flex-[2]", children: item.resultDay })] }, item.examNumber)))] }) }));

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

@@ -9,5 +9,5 @@ export default function RegexamLayout() {
         textoptions: "break-keep antialiased",
         cursor: "cursor-default",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx(Regexam.Banner, {}), _jsx(Regexam.Evaluation, {}), _jsx(Regexam.OfflineExam, {})] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx(Regexam.Banner, {}), _jsx(Regexam.Evaluation, {}), _jsx(Regexam.OfflineExam, {}), _jsx(Regexam.Types, {})] }));
 }

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

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

package/layout/template/Regexam/Types.js

@@ -0,0 +1,313 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../../../util";
+import { useActionStore } from "../../../store";
+import Action from "../Action";
+import { ConfirmModal } from "../../../modal";
+import { useResponsive } from "../../../hook";
+export default function Types() {
+    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 z-10 group pt-10 md:pt-20",
+        displays: "flex flex-col min-h-screen w-full max-w-screen",
+        textstyles: "break-keep antialiased font-pretendard-var",
+        backgrounds: "bg-gradient-to-tr from-crimson-burgundy to-green-dark",
+    };
+    const deckTitlePositioning = {
+        displays: "flex flex-col justify-center items-start",
+        sizes: "w-full max-w-6xl ",
+    };
+    const deckTitle = {
+        textstyles: "text-center text-white font-pretendard-bold text-xl xxs:text-2xl lg:text-3xl",
+        animations: "duration-300",
+    };
+    const subTitle = {
+        textstyles: "text-xs sm:text-sm md:text-base font-pretendard-medium text-white",
+        animations: "duration-300",
+        spacings: "mb-10",
+    };
+    const cardPositioning = {
+        displays: "flex flex-nowrap",
+        sizes: "w-full",
+    };
+    const cardWrapper = {
+        sizes: "w-full overflow-x-auto scroll-smooth scrollbar-hidden scroll-px-[20px]",
+        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 mr-0 md:mr-[56px] xl:mr-[calc(100vw-1200px)]",
+    };
+    const buttonPositioning = {
+        displays: "hidden flex-row md:flex",
+        sizes: "w-full h-full",
+        spacings: "xl:pl-[calc(50vw-600px)] md:pl-[62px] pl-2 pr-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: "flex justify-center items-center px-5", children: _jsxs("div", { className: cn(deckTitlePositioning), children: [_jsx("div", { className: cn(deckTitle), children: "\uB098\uC5D0\uAC8C \uB9DE\uB294 \uC2DC\uD5D8\uC740?" }), _jsx("div", { className: cn(subTitle), children: "\uD1A0\uC140\uC740 \uB2E4\uC591\uD55C \uBC29\uC2DD\uC73C\uB85C \uC815\uAE30\uC2DC\uD5D8\uACFC \uB3D9\uC77C\uD55C \uC218\uC900\uC758 \uC2DC\uD5D8\uC744 \uC81C\uACF5\uD558\uACE0 \uC788\uC5B4\uC694." }), _jsx("div", { className: "h-0.5 w-1/4 mb-8 bg-white rounded-lg" })] }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: Object.entries(examStyles).map(([key, { id, type, name, place, isHallofFame, report, certificate, majorColor, link, imgSrc, buttonText, mainPrice, subPrice, cocoonPrice, },]) => (_jsx(ExamCard, { id: id, type: type, name: name, place: place, isHallofFame: isHallofFame, report: report, certificate: certificate, majorColor: majorColor, link: link, imgSrc: imgSrc, buttonText: buttonText, mainPrice: mainPrice, subPrice: subPrice, cocoonPrice: cocoonPrice }, 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 examStyles = {
+    regPerOfficial: {
+        id: "1",
+        type: "개인접수",
+        name: "고사장 정기시험",
+        place: "고사장에서 진행되는 정기시험",
+        isHallofFame: true,
+        report: "기본제공",
+        certificate: "3,900원",
+        link: "https://new.tosel.org/dashboard/user/applications",
+        majorColor: "text-crimson-burgundy bg-crimson-burgundy",
+        imgSrc: "https://resource.tosel.co.kr/images/img-buidling-official.png",
+        buttonText: "개인 접수하기",
+        mainPrice: "33,000원",
+        subPrice: "39,000원",
+    },
+    regPerHome: {
+        id: "2",
+        type: "개인접수",
+        name: "가정 시험",
+        place: "집에서 보는 정기시험",
+        isHallofFame: false,
+        report: "기본제공",
+        certificate: "7800원",
+        majorColor: "text-crimson-burgundy bg-crimson-burgundy",
+        imgSrc: "https://resource.tosel.co.kr/images/img-buidling-home.png",
+        mainPrice: "33,000원",
+        subPrice: "39,000원",
+    },
+    regGrpOfficial: {
+        id: "3",
+        type: "단체접수",
+        name: "고사장 정기시험",
+        place: "고사장에서 진행되는 정기시험",
+        isHallofFame: true,
+        report: "기본제공",
+        certificate: "기본제공",
+        link: "https://new.tosel.org/dashboard/academy/applications",
+        majorColor: "text-green-dark bg-green-dark",
+        imgSrc: "https://resource.tosel.co.kr/images/img-buidling-official.png",
+        buttonText: "단체 접수하기",
+        mainPrice: "33,000원",
+        subPrice: "39,000원",
+    },
+    regGrpOrganization: {
+        id: "4",
+        type: "단체접수",
+        name: "학원 정기시험",
+        place: "학원에서 진행되는 정기시험",
+        isHallofFame: false,
+        report: "기본제공",
+        certificate: "기본제공",
+        majorColor: "text-green-dark bg-green-dark",
+        imgSrc: "https://resource.tosel.co.kr/images/img-buidling-academy.png",
+        mainPrice: "33,000원",
+        subPrice: "39,000원",
+    },
+    nrgGrpOrganization: {
+        id: "5",
+        type: "단체접수",
+        name: "기관 시험",
+        place: "기관에서 비정기적으로 실시하는 시험",
+        isHallofFame: false,
+        report: "기본제공",
+        certificate: "미제공",
+        link: "https://old.tosel.co.kr/new/receipt/institution",
+        majorColor: "text-green-dark bg-green-dark",
+        imgSrc: "https://resource.tosel.co.kr/images/img-buidling-academy.png",
+        buttonText: "기관시험 신청하기",
+        mainPrice: "33,000원",
+        subPrice: "39,000원",
+        cocoonPrice: "29,000원",
+    },
+    regGrpLab: {
+        id: "6",
+        type: "Lab",
+        name: "토셀 랩 특별시험",
+        place: "지정교육기관에서 진행되는 정기시험",
+        isHallofFame: true,
+        report: "고도화 성적표",
+        certificate: "기본제공",
+        link: "https://labentry.tosel.co.kr/",
+        imgSrc: "https://resource.tosel.co.kr/images/img-buidling-Lab.png",
+        buttonText: "더 알아보기",
+        mainPrice: "33,000원",
+        subPrice: "39,000원",
+    },
+};
+const ExamCard = ({ id, type, name, place, isHallofFame, report, certificate, majorColor, link, imgSrc, buttonText, mainPrice, subPrice, cocoonPrice, }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const imgRef = useRef(null);
+    const { setModal } = useActionStore();
+    const isMD = useResponsive("md");
+    useEffect(() => {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    setIsVisible(true);
+                    observer.disconnect();
+                }
+            });
+        }, { threshold: 0.1 });
+        if (imgRef.current) {
+            observer.observe(imgRef.current);
+        }
+        return () => {
+            if (imgRef.current) {
+                observer.unobserve(imgRef.current);
+            }
+        };
+    }, []);
+    const ghostCard = {
+        displays: "flex flex-col gap-5",
+        spacings: "ms-0 ps-0 ",
+        scroll: "snap-start",
+    };
+    //adjust the responsive left margin of scroller
+    //adjust the card size
+    const card = {
+        graphics: "group/card",
+        sizes: "h-100 w-65 xxxs:w-76 md:w-100 md:h-125 rounded-xl md:rounded-2xl",
+        hover: " hover:scale-[1.03]",
+        position: "xl:translate-x-[calc(50vw-600px)] md:translate-x-[56px]",
+        transition: "duration-300",
+        displays: "relative display-block overflow-hidden",
+        fonts: "font-pretendard-var",
+    };
+    const imageWrapper = {
+        sizes: "w-full h-full p-10",
+        displays: "absolute flex justify-center items-start",
+        positions: "top-0 left-0",
+        background: "bg-white",
+    };
+    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 headline = {
+        displays: "flex flex-row justify-between",
+        sizes: "w-full",
+    };
+    const typetag = {
+        sizes: "w-fit h-fit rounded-md",
+        displays: "flex justify-center items-center",
+        spacings: "p-2",
+        backgrounds: majorColor ?? "bg-blue-navy",
+        text: "font-bold text-sm text-white",
+    };
+    const titleWrapper = {
+        displays: "flex flex-col justify-center items-start gap-0",
+        sizes: "w-full",
+    };
+    const title = {
+        textStyles: "text-lg font-bold",
+        textColor: "text-gray-dark",
+        sizes: "w-fit h-fit rounded-md",
+    };
+    const subtitle = {
+        textStyles: "text-sm font-medium",
+        textColor: "text-gray-medium",
+    };
+    const bottomWrapper = {
+        display: "flex flex-col gap-4 w-full",
+    };
+    const bottomBoxWrapper = {
+        display: "flex flex-col xxxs:flex-row justify-between items-center h-fit w-full gap-4",
+    };
+    const bottomBox = {
+        displays: "flex flex-row",
+        sizes: "w-full h-fit xxxs:min-h-20 rounded-xl",
+        backgrounds: "bg-gray-light/50",
+        textStyle: "text-gray-medium",
+        spacings: "p-3",
+    };
+    const boxContentsWrapper = {
+        displays: "flex flex-row xxxs:flex-col gap-4 xxxs:gap-0",
+    };
+    const miniTitle = {
+        textStyles: "font-bold text-sm",
+    };
+    const button = {
+        displays: "flex justify-center items-center",
+        sizes: "h-12 w-full rounded-lg ",
+        positions: "xl:translate-x-[calc(50vw-600px)] md:translate-x-[56px]",
+        backgrounds: majorColor ? "bg-green-light" : "bg-blue-navy-light",
+        textColors: majorColor ? "text-green-dark" : "text-blue-navy",
+        animations: "duration-300 hover:scale-[1.03] hover:text-white",
+        optional: majorColor ? "hover:bg-green-dark" : "hover:bg-blue-navy",
+    };
+    const buttonTextStyle = {
+        textStyles: "font-bold text-base text-center align-bottom",
+    };
+    const modalContentsWrapper = {
+        displyas: "flex flex-col justify-between gap-5",
+        sizes: "w-full h-65",
+    };
+    return (_jsx(Action.Show, { actions: [
+            [
+                id,
+                _jsx(ConfirmModal, { titles: {
+                        title: "단체 서비스 안내",
+                    }, widgets: [
+                        {
+                            data: (_jsxs("div", { className: cn(modalContentsWrapper), children: [_jsxs("div", { className: "break-keep h-full w-full flex flex-col p-5 justify-center text-center text-base items-center bg-gray-light/50 rounded-lg", children: [_jsx("div", { className: "mb-8", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", className: "size-12 stroke-green-dark/80", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75" }) }) }), _jsxs("span", { children: ["\uB2E8\uCCB4 \uC11C\uBE44\uC2A4 \uC774\uC6A9\uC744 \uC704\uD574\uC11C\uB294", " ", _jsx("span", { className: "text-green-dark font-bold", children: "\uB2E8\uCCB4 \uB4F1\uB85D" }), "\uC774 \uD544\uC694\uD574\uC694! ", _jsx("br", {}), "\uC544\uC9C1 \uB4F1\uB85D\uD558\uC9C0 \uC54A\uC558\uB2E4\uBA74, \uC0AC\uC5C5\uC790\uB4F1\uB85D\uC99D\uC744 \uC900\uBE44\uD558\uACE0 \uB2E8\uCCB4 \uB4F1\uB85D\uC744 \uC9C4\uD589\uD574\uC8FC\uC138\uC694"] })] }), _jsxs("div", { className: "flex flex-row text-xs", children: [_jsx("div", { className: "w-full text-center", children: "\uC544\uC9C1 \uAE30\uAD00 \uB4F1\uB85D\uC744 \uC548\uD588\uB2E4\uBA74?" }), _jsx("div", { className: "w-full text-center", children: "\uC774\uBBF8 \uB2E8\uCCB4\uB4F1\uB85D\uC744 \uD588\uB2E4\uBA74?" })] })] })),
+                        },
+                    ], buttons: [
+                        {
+                            title: "등록하기",
+                            onClick: () => {
+                                window.location.href =
+                                    "https://new.tosel.org/sign-up/academy";
+                            },
+                            option: {
+                                text: "font-pretendard-var font-medium text-green-dark",
+                                background: "bg-green-light",
+                            },
+                        },
+                        {
+                            title: "단체 접수하기",
+                            onClick: () => {
+                                link && (window.location.href = link);
+                            },
+                            option: {
+                                text: "font-pretendard-var font-medium text-white",
+                                background: "bg-green-dark",
+                            },
+                        },
+                    ] }),
+            ],
+        ], children: _jsxs("div", { className: cn(ghostCard), children: [_jsxs("div", { className: cn(card), children: [_jsx("div", { className: cn(imageWrapper), children: _jsx("div", { className: "h-20 xxxs:h-30 md:h-40 flex mt-10 md:mt-16", children: _jsx("img", { ref: imgRef, src: imgSrc, alt: "", className: cn("max-w-full h-auto transform transition-all duration-1000 delay-0 ease-in-out", isVisible
+                                        ? "translate-y-0 opacity-100"
+                                        : "translate-y-10 opacity-0") }) }) }), _jsxs("div", { className: cn(contentsWrapper), children: [_jsxs("div", { className: cn(headline), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(title), children: name }), _jsx("div", { className: cn(subtitle), children: place })] }), _jsx("div", { className: cn(typetag), children: type })] }), _jsxs("div", { className: cn(bottomWrapper), children: [_jsxs("div", { className: cn(bottomBox), children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "size-6", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" }) }) }), _jsxs("div", { className: cn(boxContentsWrapper, "ml-2"), children: [_jsx("div", { className: cn(miniTitle), children: "\uC751\uC2DC\uB8CC" }), _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { children: cocoonPrice && (_jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["cocoon: ", cocoonPrice] })) }), _jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["Pre-Starter ~ Junior: ", mainPrice] }), _jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["High Junior: ", subPrice] })] })] })] }), _jsxs("div", { className: cn(bottomBoxWrapper), children: [_jsxs("div", { className: cn(bottomBox, isHallofFame ? "bg-green-light" : "bg-crimson-burgundy/20"), children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: cn(isHallofFame
+                                                                    ? "size-6 fill-yellow-500"
+                                                                    : "size-6 fill-gray-medium"), children: _jsx("path", { "fill-rule": "evenodd", d: "M5.166 2.621v.858c-1.035.148-2.059.33-3.071.543a.75.75 0 0 0-.584.859 6.753 6.753 0 0 0 6.138 5.6 6.73 6.73 0 0 0 2.743 1.346A6.707 6.707 0 0 1 9.279 15H8.54c-1.036 0-1.875.84-1.875 1.875V19.5h-.75a2.25 2.25 0 0 0-2.25 2.25c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-2.25-2.25h-.75v-2.625c0-1.036-.84-1.875-1.875-1.875h-.739a6.706 6.706 0 0 1-1.112-3.173 6.73 6.73 0 0 0 2.743-1.347 6.753 6.753 0 0 0 6.139-5.6.75.75 0 0 0-.585-.858 47.077 47.077 0 0 0-3.07-.543V2.62a.75.75 0 0 0-.658-.744 49.22 49.22 0 0 0-6.093-.377c-2.063 0-4.096.128-6.093.377a.75.75 0 0 0-.657.744Zm0 2.629c0 1.196.312 2.32.857 3.294A5.266 5.266 0 0 1 3.16 5.337a45.6 45.6 0 0 1 2.006-.343v.256Zm13.5 0v-.256c.674.1 1.343.214 2.006.343a5.265 5.265 0 0 1-2.863 3.207 6.72 6.72 0 0 0 .857-3.294Z", "clip-rule": "evenodd" }) }) }), _jsxs("div", { className: cn(boxContentsWrapper, "ml-2"), children: [_jsx("div", { className: cn(miniTitle), children: "\uBA85\uC608\uC758 \uC804\uB2F9" }), isHallofFame ? (_jsx("div", { className: "text-base text-green-dark font-bold", children: "\uB4F1\uC7AC \uAC00\uB2A5" })) : (_jsx("div", { className: "text-base text-crimson-burgundy font-bold", children: "\uB4F1\uC7AC \uBD88\uAC00" }))] })] }), _jsx("div", { className: cn(bottomBox), children: _jsxs("div", { className: cn(boxContentsWrapper), children: [_jsx("div", { className: cn(miniTitle), children: "\uC131\uC801\uD45C \uBC0F \uC778\uC99D\uC11C" }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["\uC131\uC801\uD45C: ", report] }), _jsxs("div", { className: "text-xs font-medium text-gray-dark", children: ["\uC778\uC99D\uC11C: ", certificate] })] })] }) })] })] })] })] }), link && (_jsx("div", { className: cn(button), onClick: () => {
+                        !isMD
+                            ? alert("모바일 환경입니다. 웹에서 접수해주세요")
+                            : "3" === id // "단체접수" === type 기관시험 접수가 구현되면 교체해주세요
+                                ? setModal(id)
+                                : (window.location.href = link);
+                    }, children: _jsx("div", { className: cn(buttonTextStyle), children: buttonText }) }))] }) }));
+};

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

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

package/layout/template/Regexam/index.js

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

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.168
+1.0.170

package/widget/template/Select/Select.js

@@ -27,7 +27,6 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
     const [index, setIndex] = useState();
     const [uniqueKey] = useState(Math.floor(Math.random() * 1000000));
     useFlag({ state: [false, setIsOpen], safe: "overlay" });
-    // scrollIntoViews
     const listRef = useRef(null);
     const itemRefs = useRef([]);
     useEffect(() => {
@@ -37,7 +36,7 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
     }, [index]);
     const isLong = selectOptions && selectOptions.length >= 4;
     const container = {
-        positions: "",
+        positions: "relative",
         displays: "flex flex-col gap-2",
     };
     const button = {
@@ -49,12 +48,12 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
         animations: "duration-300",
     };
     const input = {
-        positions: "z-30",
-        layouts: cn(button),
+        positions: "absolute z-30",
+        layout: cn(button),
         styles: "focus:outline-1 outline-0 outline-green-dark text-xs pl-1.5 text-gray-medium",
     };
     const body = {
-        positions: "z-30",
+        positions: "absolute z-30",
         displays: "flex flex-col gap-1 shadow-main hover:shadow-green",
         sizes: `${widthSize[option?.width ?? "md"]} min-h-6.5 max-h-[170px]`,
         paddings: "px-1 py-1",
@@ -88,13 +87,13 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
     });
     const bodyTransitions = useTransition(isOpen, {
         from: {
-            top: isLong ? 64 : 32,
+            top: isLong ? 48 : 32,
         },
         enter: {
-            top: isLong ? 64 : 32,
+            top: isLong ? 48 : 32,
         },
         leave: {
-            top: isLong ? 64 : 32,
+            top: isLong ? 48 : 32,
         },
         config: {
             duration: 0,
@@ -105,8 +104,7 @@ export default function Select({ state, selectOptions: selectOptionsInput, place
     }, [flag]);
     return (_jsxs("div", { className: cn(container), id: `select-box-${uniqueKey}`, onClick: (e) => e.stopPropagation(), children: [_jsx("button", { onClick: () => {
                     setIsOpen(!isOpen), console.log(uniqueKey);
-                }, className: cn(button, "border-1 border-gray-light hover:border-none"), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label, "bg-white/0"), children: selectOptions?.find((option) => value === option.value)?.title })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), inputTransition((styles, item) => isLong &&
-                item && (_jsx(animated.input, { style: styles, placeholder: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD558\uC138\uC694", className: cn(input, "shadow-main bg-[#f6f6f6]/50"), onChange: (e) => setSearch(e.target.value) }))), bodyTransitions((styles, item) => {
+                }, className: cn(button, "border-1 border-gray-light hover:border-none"), onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), children: value ? (_jsx("div", { className: cn(label, "bg-white/0"), children: selectOptions?.find((option) => value === option.value)?.title })) : (_jsx("div", { className: "text-xs pl-1", children: placeholder ?? "선택해주세요" })) }), bodyTransitions((styles, item) => {
                 return (item && (_jsx(animated.div, { style: styles, className: cn(body), ref: listRef, children: selectOptions?.map(({ value, title }, order) => (_jsx("section", { children: _jsx("div", { className: cn(labelCoating), onClick: () => {
                                 setValue(value);
                                 setText(String(title));