@edu-tosel/design 1.0.265 → 1.0.267

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { animated, useTransition } from "react-spring";
 import SVG from "../../../../asset/SVG";
-import { cn, compareDates, convertDateToString } from "../../../../util";
+import { cn, compareDates, convertDateToString, search, } from "../../../../util";
 import { useActionStore } from "../../../../store";
 import { useResponsive } from "../../../../hook";
 export default function Navigation({ browser, calendar, notice, event, }) {
@@ -14,15 +14,31 @@ export default function Navigation({ browser, calendar, notice, event, }) {
         displays: "flex flex-row md:flex-col justify-center gap-x-8 sm:gap-x-12 gap-y-5 items-center",
         sizes: !isOpen ? "h-16 md:h-80  md:rounded-r-xl" : "h-16 md:h-screen",
         widths: !isHidden
-            ? "w-screen md:w-[56px] duration-100"
+            ? "w-screen md:w-[56px] duration-300"
             : "w-0 duration-100",
         backgrounds: "bg-gradient-to-r md:bg-gradient-to-b from-green-dark to-crimson-burgundy",
     };
     const overlayCoverTransition = useTransition(isHidden, {
         from: { width: "0%" },
         enter: { width: "100%" },
-        config: { duration: 200 },
+        config: { duration: 100 },
     });
+    // Scroll Lock 처리
+    useEffect(() => {
+        const preventScroll = (e) => e.preventDefault();
+        if (isOpen) {
+            document.body.style.overflow = "hidden";
+            document.addEventListener("touchmove", preventScroll, { passive: false });
+        }
+        else {
+            document.body.style.overflow = "";
+            document.removeEventListener("touchmove", preventScroll);
+        }
+        return () => {
+            document.body.style.overflow = "";
+            document.removeEventListener("touchmove", preventScroll);
+        };
+    }, [isOpen]);
     useEffect(() => {
         if (isHidden) {
             const timer = setTimeout(() => {
@@ -41,50 +57,64 @@ export default function Navigation({ browser, calendar, notice, event, }) {
             setIsHidden(true);
         return setIsOpen(true);
     };
-    const itemContainer = {
-        positions: "fixed top-0 left-0 z-40 ",
-        sizes: "h-screen w-[400px]",
+    const blurContainer = {
+        positions: "fixed inset-0 z-40",
+        sizes: "h-screen w-full",
         boundaries: "md:pl-[56px]",
-        styles: "bg-black/20  backdrop-blur-sm",
-        shadows: "shadow-main transition",
+        styles: "bg-black/20 backdrop-blur-sm",
+        shadows: "shadow-main",
+        animation: isOpen
+            ? "opacity-100 pointer-events-auto"
+            : "opacity-0 pointer-events-none",
     };
     const itemBody = {
         positions: "absolute bottom-16 md:static md:bottom-auto md:flex md:flex-col",
-        sizes: "w-full md:w-[400px] h-fit md:h-screen min-h-50",
+        sizes: "w-full md:w-[400px] h-fit md:h-screen min-h-50 ",
         styles: "bg-white",
+        animation: "duration-300",
+        boundaries: "rounded-t-lg rounded-b-none md:rounded-r-lg md:rounded-l-none",
     };
     const iconWrapper = {
         displays: "flex justify-center items-center",
         sizes: "w-8 h-8 rounded-md",
         animations: "hover:bg-white/20",
     };
+    const itemsContainer = {
+        displays: "relative h-fit md:h-full overflow-hidden duration-300",
+    };
     const isMobile = useResponsive("md");
     const overlayPopTransition = useTransition(!isHidden && isOpen, {
-        from: { width: "0%" },
-        enter: { width: "100%" },
-        leave: { width: "0%" },
-        config: { duration: isMobile ? 100 : 0 },
+        from: { width: "100%", opacity: 0, pointerEvent: "none" },
+        enter: { width: "100%", opacity: 1, pointerEvent: "auto" },
+        leave: { width: "100%", opacity: 0, pointerEvent: "none" },
+        config: { duration: 100 },
+        delay: 100,
     });
     const scrollTitleWrapper = {
-        displays: "w-full h-fit",
+        displays: "relative",
+        sizes: "w-full h-fit",
         spacings: "p-5 pb-0",
     };
     const scrollTitle = {
         textStyles: "text-lg font-bold text-green-dark",
     };
+    const itemBodyTransition = useTransition(isOpen && !isMobile, {
+        from: { transform: "translateY(100%)", opacity: 0 },
+        enter: { transform: "translateY(0%)", opacity: 1 },
+        leave: { transform: "translateY(100%)", opacity: 0 },
+        config: { duration: 300 },
+    });
     return (_jsxs(_Fragment, { children: [overlayCoverTransition((styles, item) => item && (_jsx(animated.div, { style: styles, className: "bg-white h-screen fixed top-0 left-0 z-40 flex flex-col justify-center items-center overflow-hidden gap-y-14 ", children: _jsxs("div", { className: "flex flex-col justify-center items-center overflow-hidden gap-y-14 transition-none", children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel", width: 368.56, height: 80.07 }), _jsx("div", { children: "dashboard loading..." })] }) }))), overlayPopTransition((styles, item) => type &&
-                item && (_jsx(animated.div, { style: styles, className: cn(itemContainer), children: _jsxs("div", { className: cn(itemBody), onClick: (e) => e.stopPropagation(), children: [_jsx("div", { className: cn(scrollTitleWrapper), children: _jsx("div", { className: cn(scrollTitle), children: navigationTypeString[type] }) }), _jsx(NavigationItem, { type: type, calendar: calendar, notice: notice, event: event })] }) }))), _jsx("div", { className: "fixed bottom-0 md:top-1/2 md:-translate-y-1/2 flex justify-center items-center z-45", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: cn(container), children: [_jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("calendar"), children: _jsx(SVG.Icon.Calendar, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("notification"), children: _jsx(SVG.Icon.Notification, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("search"), children: _jsx(SVG.Icon.Search, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("browser"), children: _jsx(SVG.Icon.Browser, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("event"), children: _jsx(SVG.Icon.Event, { size: isMobile ? "md" : "lg" }) })] }) })] }));
+                item && (_jsx(animated.div, { style: styles, className: cn(blurContainer), children: _jsxs("div", { className: cn(itemBody), onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: cn(scrollTitleWrapper), children: [_jsx("div", { className: cn(scrollTitle), children: navigationTypeString[type] }), _jsx("div", { className: "" })] }), _jsx("div", { className: cn(itemsContainer), children: _jsx(NavigationItem, { type: type, calendar: calendar, notice: notice, event: event }) })] }) }))), _jsx("div", { className: "fixed bottom-0 md:top-1/2 md:-translate-y-1/2 flex justify-center items-center z-45", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: cn(container), children: [_jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("calendar"), children: _jsx(SVG.Icon.Calendar, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("notification"), children: _jsx(SVG.Icon.Notification, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("search"), children: _jsx(SVG.Icon.Search, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("browser"), children: _jsx(SVG.Icon.Browser, { size: isMobile ? "md" : "lg" }) }), _jsx("div", { className: cn(iconWrapper), onClick: () => handleOpen("event"), children: _jsx(SVG.Icon.Event, { size: isMobile ? "md" : "lg" }) })] }) })] }));
 }
 const navigationTypeString = {
     calendar: "시험 접수 일정",
     notification: "공지사항",
     event: "이벤트",
+    search: "검색하기",
 };
 function NavigationItem({ type, calendar, notice, event, }) {
     //scroll action
-    const container = {
-        displays: "relative h-full overflow-hidden",
-    };
     const scrollWrapper = {
         displays: "flex flex-row md:flex-col",
         sizss: "h-fit md:h-full",
@@ -154,13 +184,78 @@ function NavigationItem({ type, calendar, notice, event, }) {
         setScheduleState(updatedScheduleState);
     }, [currentTime, calendar.schedules]);
     if (type === "calendar")
-        return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(scrollWrapper), children: calendar.schedules.map(({ applyEnd, testStart, gradeOpen, title, onClick }, index) => {
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(scrollWrapper), children: calendar.schedules.map(({ applyEnd, testStart, gradeOpen, title, onClick }, index) => {
                         const { isBeforeStart, dDayStart, isBeforeEnd, dDayEnd } = scheduleState[index];
                         return (_jsxs("div", { onClick: onClick, className: cn(item, "rounded-[8px] p-5 bg-gray-light/30 border-1 border-gray-light"), children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(titleText), children: title }), _jsx("div", { children: isBeforeStart ? (_jsxs("div", { className: cn(tag, "bg-red-burgundy"), children: ["\uC811\uC218\uAE4C\uC9C0 ", dDayStart] })) : isBeforeEnd ? (_jsx("div", { className: cn(tag, "bg-green-dark"), children: "\uC811\uC218 \uC911" })) : (_jsx("div", { className: cn(tag, "bg-gray-medium/30"), children: "\uB9C8\uAC10" })) })] }), !isBeforeStart && isBeforeEnd ? (_jsxs("div", { className: "text-xs", children: ["\uC811\uC218 \uB9C8\uAC10\uAE4C\uC9C0 ", dDayEnd] })) : (""), _jsx("div", { className: "w-full h-0.5 bg-gray-medium" })] }), _jsxs("div", { className: "flex flex-col gap-1 w-full h-fit mt-4", children: [_jsxs("div", { className: cn(dateWrapper), children: [_jsxs("svg", { ...svgAttributes, children: [_jsx("path", { "fill-rule": "evenodd", d: "M11.986 3H12a2 2 0 0 1 2 2v6a2 2 0 0 1-1.5 1.937V7A2.5 2.5 0 0 0 10 4.5H4.063A2 2 0 0 1 6 3h.014A2.25 2.25 0 0 1 8.25 1h1.5a2.25 2.25 0 0 1 2.236 2ZM10.5 4v-.75a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75V4h3Z", "clip-rule": "evenodd" }), _jsx("path", { "fill-rule": "evenodd", d: "M2 7a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7Zm6.585 1.08a.75.75 0 0 1 .336 1.005l-1.75 3.5a.75.75 0 0 1-1.16.234l-1.75-1.5a.75.75 0 0 1 .977-1.139l1.02.875 1.321-2.64a.75.75 0 0 1 1.006-.336Z", "clip-rule": "evenodd" })] }), _jsx("div", { className: cn(paragraphText), children: "\uC811\uC218\uB9C8\uAC10" }), _jsx("div", { className: cn(paragraphText), children: convertDateToString(applyEnd) })] }), _jsxs("div", { className: cn(dateWrapper), children: [_jsx("svg", { ...svgAttributes, children: _jsx("path", { "fill-rule": "evenodd", d: "M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z", "clip-rule": "evenodd" }) }), _jsx("div", { className: cn(paragraphText), children: "\uC2DC\uD5D8\uC77C\uC790" }), _jsx("div", { className: cn(paragraphText), children: convertDateToString(testStart) })] }), _jsxs("div", { className: cn(dateWrapper), children: [_jsxs("svg", { ...svgAttributes, children: [_jsx("path", { "fill-rule": "evenodd", d: "M10 3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v9a2 2 0 0 0 2 2h8a2 2 0 0 1-2-2V3ZM4 4h4v2H4V4Zm4 3.5H4V9h4V7.5Zm-4 3h4V12H4v-1.5Z", "clip-rule": "evenodd" }), _jsx("path", { d: "M13 5h-1.5v6.25a1.25 1.25 0 1 0 2.5 0V6a1 1 0 0 0-1-1Z" })] }), _jsx("div", { className: cn(paragraphText), children: "\uC131\uC801\uBC1C\uD45C" }), _jsx("div", { className: cn(paragraphText), children: convertDateToString(gradeOpen) })] })] })] }));
                     }) }), _jsx("div", { className: cn(softBox) })] }));
     if (type === "notification")
-        return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(scrollWrapper), children: notice.announcements.map(({ title, date, description, onClick }) => (_jsxs("div", { onClick: onClick, className: cn(item, "h-fit shadow-main p-5 "), children: [_jsxs("div", { children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: date }), _jsx("div", { className: cn(titleText, "mb-2"), children: title })] }), _jsx("p", { className: cn(paragraphText, "truncate h-fit"), children: description })] }))) }), _jsx("div", { className: cn(softBox) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(scrollWrapper), children: notice.announcements.map(({ title, date, description, onClick }) => (_jsxs("div", { onClick: onClick, className: cn(item, "h-fit shadow-main p-5 "), children: [_jsxs("div", { children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: date }), _jsx("div", { className: cn(titleText, "mb-2"), children: title })] }), _jsx("p", { className: cn(paragraphText, "truncate h-fit"), children: description })] }))) }), _jsx("div", { className: cn(softBox) })] }));
     if (type === "event")
-        return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(scrollWrapper), children: event.events.map(({ title, thumbnail, onClick }) => (_jsx("div", { onClick: onClick, className: cn(item, " shadow-main rounded-[10px] overflow-hidden"), children: _jsx("div", { className: "image-container", children: _jsx("img", { src: thumbnail, alt: title, className: "w-full bg-cover" }) }) }))) }), _jsx("div", { className: cn(softBox) })] }));
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(scrollWrapper), children: event.events.map(({ title, thumbnail, onClick }) => (_jsx("div", { onClick: onClick, className: cn(item, " shadow-main rounded-[10px] overflow-hidden"), children: _jsx("div", { className: "image-container", children: _jsx("img", { src: thumbnail, alt: title, className: "w-full bg-cover" }) }) }))) }), _jsx("div", { className: cn(softBox) })] }));
+    if (type === "search")
+        return _jsx(SearchComponent, {});
     return null;
 }
+function SearchComponent() {
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, []);
+    const handleClear = () => {
+        setSearchText("");
+        if (inputRef.current)
+            inputRef.current.focus();
+    };
+    const [searchText, setSearchText] = useState("");
+    const isEmpty = "" === searchText;
+    const { choseongMatch, entireMatch } = search(searchText);
+    const handleItemClick = (url) => {
+        window.location.href = url;
+    };
+    const scrollWrapper = {
+        displays: "flex flex-col",
+        sizss: "h-full",
+        scrollActions: "scrollbar-hidden overflow-y-scroll snap-none",
+        spacings: "py-5 gap-5 scroll-pl-5",
+    };
+    const softBox = {
+        displays: "absolute top-[61px] left-0",
+        sizes: "w-full h-5",
+        backgrounds: "bg-gradient-to-b from-white to-white/0",
+    };
+    const searchBarHeader = {
+        displays: "relative flex items-center",
+        sizes: "w-full h-fit",
+        spacings: "gap-4 px-5 py-4",
+        boundaries: "border-b-1",
+        //debug: "border-red-500 border-2",
+    };
+    const inputBox = {
+        displays: "flex items-center",
+        sizes: "w-full h-7 rounded-sm",
+        boundaries: "outline-none",
+        textStyles: "font-regular",
+        placeHolderStyles: "placeholder-slate-300 caret-slate-300",
+        //debug: "border-red-500 border-2",
+    };
+    const linkBox = {
+        displays: "flex items-center justify-between",
+        sizes: "w-full h-fit",
+        spacings: "px-5 py-3",
+        backgrounds: "hover:bg-slate-50 active:bg-slate-50",
+    };
+    //결과없음 이미지
+    const noResultWrapper = {
+        displays: "flex flex-col justify-center items-center",
+        sizes: "w-full h-fit",
+    };
+    const noResultImg = {
+        spacings: "px-10",
+        sizes: "w-full max-w-80",
+    };
+    return (_jsxs("div", { className: "h-[calc(100vh-300px)] md:h-full w-full", children: [_jsxs("header", { className: cn(searchBarHeader), children: [!isEmpty && (_jsx("div", { className: "absolute w-[calc(100%-40px)] flex justify-end text-gray-medium pointer-events-none", children: _jsx("div", { className: "h-fit w-fit p-1 pointer-events-auto cursor-pointer", onClick: handleClear, children: _jsx(SVG.MiniClose, {}) }) })), _jsxs("form", { className: "flex flex-auto gap-4 min-w-0 w-full", children: [_jsx("label", { className: "h-6 w-6 mt-0.5 text-green-dark", children: _jsx(SVG.Search, {}) }), _jsx("input", { type: "text", className: cn(inputBox), placeholder: "\uBB34\uC5C7\uC774\uB4E0 \uCC3E\uC544\uBCF4\uC138\uC694", value: searchText, ref: inputRef, onChange: (e) => {
+                                    setSearchText(e.target.value);
+                                } })] })] }), _jsx("div", { className: cn(scrollWrapper), children: !isEmpty ? (choseongMatch.length === 0 && entireMatch.length === 0 ? (_jsxs("div", { className: cn(noResultWrapper), children: [_jsx("div", { className: cn(noResultImg), children: _jsx("img", { src: "https://resource.tosel.co.kr/images/images/no-result.png", alt: "\uACB0\uACFC \uC5C6\uC74C" }) }), _jsx("div", { className: "text-sm text-center w-full font-medium text-green-dark", children: "\uC774\uB7F0, \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC5B4\uC694" }), _jsxs("div", { className: "text-sm text-center w-full font-medium text-green-dark", children: ["'", searchText, "'\uC5D0 \uB300\uD55C \uACB0\uACFC\uAC00 \uD544\uC694\uD55C\uAC00\uC694?"] })] })) : (_jsxs("div", { className: "flex flex-col w-full", children: [entireMatch.map((e) => (_jsxs("div", { className: cn(linkBox), onClick: () => handleItemClick(e[0]), children: [_jsxs("div", { className: "w-full flex justify-start items-center gap-2", children: [_jsx("div", { className: "text-base text-gray-dark font-medium", children: e[1] }), _jsxs("div", { className: "text-sm text-green-dark", children: ["\"", e[2], "\""] })] }), _jsx("div", { className: "w-fit rounded-md shrink-0 text-xs bg-green-dark text-white py-1 px-2", children: "\uC815\uD655\uD788 \uC77C\uCE58!" })] }))), choseongMatch.map((e) => (_jsx("div", { className: cn(linkBox), onClick: () => handleItemClick(e[0]), children: _jsxs("div", { className: "w-full flex justify-start items-center gap-2", children: [_jsx("div", { className: "text-base text-gray-dark font-medium", children: e[1] }), _jsx("div", { className: "text-sm text-gray-medium", children: e[2] })] }) })))] }))) : (_jsxs("div", { className: "flex flex-col w-full justify-center items-start px-5", children: [_jsx("div", { className: "w-full text-green-dark text-base", children: "\uAC80\uC0C9\uC5B4\uB97C \uC785\uB825\uD574\uC8FC\uC138\uC694" }), _jsx("div", { className: "text-green-dark/50 text-sm", children: "\uCD08\uC131\uC73C\uB85C\uB3C4 \uAC80\uC0C9\uD560 \uC218 \uC788\uC5B4\uC694!" })] })) }), _jsx("div", { className: cn(softBox) })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.265",
+  "version": "1.0.267",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -32,7 +32,7 @@
     "react-qr-code": "^2.0.15",
     "react-router-dom": "^6.21.3",
     "react-spring": "^9.7.3",
-    "react-to-print": "^2.15.1",
+    "react-to-print": "^3.0.4",
     "react-transition-group": "^4.4.5",
     "react-youtube": "^10.1.0",
     "recharts": "^2.11.0",

package/util/createSearch.d.ts

@@ -0,0 +1,5 @@
+declare const search: (query: string) => {
+    entireMatch: [string, string, string][];
+    choseongMatch: [string, string, string][];
+};
+export default search;

package/util/createSearch.js

@@ -0,0 +1,235 @@
+import { getChoseong } from "es-hangul";
+const defaultRecord = {
+    //소개 페이지
+    "/about": ["About TOSEL", "About", "토셀소개"],
+    "/about#leadership": [
+        "리더십",
+        "임원",
+        "위원장",
+        "총재",
+        "출제위원장",
+        "이기수",
+        "김임득",
+        "leadership",
+        "board",
+    ],
+    "/about#mission": ["Our Mission", "비전", "목표", "미션", "철학", "가치관"],
+    "/about#history": ["연혁", "역사", "history", "설립연도"],
+    "/about#area": ["분야", "사업분야", "비즈니스", "bussiness"],
+    "/about#partner": [
+        "협업",
+        "파트너",
+        "인증",
+        "고려대학교",
+        "학회인증",
+        "partner",
+        "이용기관",
+    ],
+    "/about#media": ["보도자료", "미디어", "media", "뉴스", "언론 속의 토셀"],
+    //시험소개
+    "/exams": ["시험소개", "레벨", "TOSEL"],
+    "/exams#evaluation": [
+        "평가방식",
+        "연령별 인지단계",
+        "평가 기준",
+        "CALP",
+        "BICS",
+        "언어능력 평가",
+        "PBT",
+        "레벨",
+        "Level",
+    ],
+    "/exams#offlineExam": [
+        "정기시험 안내",
+        "시험 구성",
+        "연간 일정",
+        "당일 일정",
+        "Pre-Starter",
+        "Starter",
+        "Basic",
+        "Junior",
+        "High Junior",
+        "PS",
+        "ST",
+        "BA",
+        "JR",
+        "HJ",
+        "프리스타터",
+        "스타터",
+        "베이직",
+        "주니어",
+        "하이주니어",
+    ],
+    "/exams#types": [
+        "시험 종류",
+        "고사장시험",
+        "가정시험",
+        "학원정기",
+        "특별기관시험",
+        "기관시험",
+        "랩 특별시험",
+    ],
+    //게시판
+    "/events": ["이벤트", "새로운 소식"],
+    "/books": ["교재", "교재안내"],
+    //토셀 북스
+    "https://smartstore.naver.com/tosel": [
+        "토셀북스",
+        "책 구매",
+        "TOSEL Books",
+        "북스토어",
+        "교재구입",
+        "교재몰",
+        "쇼핑",
+        "스마트스토어",
+        "네이버스토어",
+        "구매하기",
+        "문제집",
+    ],
+    //토셀북스-시험대비교재
+    "https://smartstore.naver.com/tosel/category/3345d808450940f3a81077bb29b95e55?cp=1": ["시험대비교재"],
+    "https://smartstore.naver.com/tosel/category/00590516c9ea4041b17bcea6527850ed?cp=1": ["유형분석집"],
+    "https://smartstore.naver.com/tosel/category/263ed55441ee47fc994b7e2e7d77c37f?cp=1": ["예상문제집"],
+    "https://smartstore.naver.com/tosel/category/50ea23099a1344d99b0902bfb65305aa?cp=1": ["실전문제집"],
+    "https://smartstore.naver.com/tosel/category/f3c92dd261b7497aace96620f760aacd?cp=1": ["심화문제집"],
+    "https://smartstore.naver.com/tosel/category/20990897bf944d82861c8a4600b56d82?cp=1": ["기출", "기출연습", "기출세트"],
+    //토셀북스-학습교재
+    "https://smartstore.naver.com/tosel/category/6099b9ce3fec4f2a8111cb5a2fa153c2?cp=1": ["학습교재", "개념학습"],
+    "https://smartstore.naver.com/tosel/category/bde68e05417e4db99a86ebbd4aa3e925?cp=1": ["Reading Series", "리딩", "읽기"],
+    "https://smartstore.naver.com/tosel/category/2f11488810464cb5bbe77b004965f4ae?cp=1": ["Listening Series", "리스닝", "듣기"],
+    "https://smartstore.naver.com/tosel/category/28dc52dc67a3443ea010812d40accb69?cp=1": ["Speaking Series", "스피킹", "말하기"],
+    "https://smartstore.naver.com/tosel/category/78551dca50de4636bc212c46543d4137?cp=1": ["VOCA Series", "보카", "영단어", "단어학습"],
+    "https://smartstore.naver.com/tosel/category/c88067049a904b8e8d78ada305b2779b?cp=1": ["Grammar Series", "그래머", "영문법", "문법"],
+    "https://smartstore.naver.com/tosel/category/cd8df3ab036942f7a3ea6e14a7ab3a9a?cp=1": ["Story Series", "스토리", "읽기"],
+    //토셀북스-레벨별교재
+    "https://smartstore.naver.com/tosel/category/637c92ebd5af435b98c89926ebdcf4d5?cp=1": ["Cocoon 교재", "Cocoon", "코쿤"],
+    "https://smartstore.naver.com/tosel/category/b0fc9b0937854a8baffb9a2bd8c35d0f?cp=1": ["Pre-Starter 교재", "Pre-Starter", "프리스타터", "PS", "초등"],
+    "https://smartstore.naver.com/tosel/category/3db386ace57846d2a52bb95b21b47954?cp=1": ["Starter 교재", "Starter", "스타터", "ST", "초등"],
+    "https://smartstore.naver.com/tosel/category/cd2d05f9b3014ead8b6da998eff17c9b?cp=1": ["Basic 교재", "Basic", "베이직", "BA", "초등"],
+    "https://smartstore.naver.com/tosel/category/52cdb446f4ae45c7a865401f14d3cd6b?cp=1": ["Junior 교재", "Junior", "주니어", "JR", "중등"],
+    "https://smartstore.naver.com/tosel/category/abb1a40e47754d8ebd229daa3d7a0fe9?cp=1": ["High Junior 교재", "하이주니어", "HJ", "고등"],
+    "https://smartstore.naver.com/tosel/category/216102719f724819a9d55f40ab032be5?cp=1": ["Advanced 교재", "어드밴스트", "성인"],
+    //토셀북스-굿즈
+    "https://smartstore.naver.com/tosel/category/19e0ceb5c1d84b09a3b4b8110edb1803?cp=1": ["굿즈", "책받침", "볼펜", "다이어리", "캘린더", "오답노트", "단어장"],
+    // 올림피아드 랜딩페이지
+    "/olympiad": ["올림피아드", "보카", "VOCA", "단어"],
+    "/olympiad#features": [
+        "올림피아드 특징",
+        "특징",
+        "올림피아드",
+        "보카",
+        "VOCA",
+    ],
+    // 토셀랩 랜딩페이지
+    "https://labentry.tosel.co.kr/": ["토셀 랩", "토셀 랩 심사신청", "Lab", "랩"],
+    "/dashboard/academy/students": [
+        "학생 관리",
+        "학생 추가",
+        "원생관리",
+        "원생 삭제",
+        "원생 아이디",
+    ],
+    // 고객센터
+    "https://connect.tosel.co.kr/": [
+        "고객센터",
+        "CS",
+        "홈",
+        "Customer",
+        "문의하기",
+    ],
+    "https://connect.tosel.co.kr/agencies": [
+        "지역본부 정보",
+        "본부장",
+        "영업코드",
+        "전화",
+    ],
+    "https://tosel-faq.notion.site/": [
+        "TOSEL 이용 가이드",
+        "FAQ",
+        "Q&A",
+        "질문",
+        "help center",
+        "헬프 센터",
+        "안내",
+        "도움말",
+    ],
+    "https://tosel-faq.notion.site/150de6b860e280f4a30fe49d8c300584": [
+        "정기시험 관리규정",
+    ],
+    "/dashboard/user/applications": ["접수하기", "정기시험"],
+    "http://localhost:5174/olympiad#features": ["올림피아드 안내"],
+};
+function createSearch({ record, } = {}) {
+    record = record ?? defaultRecord;
+    const recordEntries = Object.entries(record);
+    const isHangul = (str) => /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(str);
+    const entries = recordEntries
+        .map(([key, values]) => values.map((value) => [key, value]))
+        .flat();
+    const choseongEntries = entries.map(([key, value]) => [
+        key,
+        isHangul(value)
+            ? getChoseong(value).replace(/ /g, "")
+            : value.toLowerCase(),
+    ]);
+    const calculateMatchScore = (value, query) => {
+        const queryIndex = value.indexOf(query);
+        if (queryIndex === -1)
+            return 0;
+        // 일치율 = (검색어 길이 / 전체 단어 길이) * 100
+        const matchRatio = (query.length / value.length) * 100;
+        // 점수 계산: 앞에 있을수록 + 검색어 비율이 높을수록 가산점
+        return 100 - queryIndex * 5 + matchRatio * 2;
+    };
+    const search = (query) => {
+        const lowerQuery = query.toLowerCase();
+        const isHangulQuery = isHangul(query);
+        const queryChoseong = isHangulQuery ? getChoseong(query) : "";
+        // **정확한 일치 (Exact Match)**
+        const entireMatch = entries
+            .filter(([_, value]) => {
+            const normalizedValue = value.toLowerCase();
+            return (normalizedValue === lowerQuery ||
+                new RegExp(`\\b${lowerQuery}`).test(normalizedValue));
+        })
+            .map(([key, value]) => [
+            key,
+            record[key]?.[0] ?? value, // 첫 번째 키워드가 없을 경우 value를 기본값으로 사용
+            value,
+        ]);
+        // **초성 매칭 (Choseong Match)**
+        const choseongMatch = isHangulQuery
+            ? choseongEntries
+                .map((value, index) => ({ index, value }))
+                .filter(({ value: [_, value] }) => value.includes(queryChoseong))
+                .map(({ index }) => {
+                const key = entries[index][0];
+                return [
+                    key,
+                    record[key]?.[0] ?? entries[index][1], // 첫 번째 키워드가 없을 경우 대체
+                    entries[index][1],
+                ];
+            })
+            : [];
+        // **중복 제거 (EntireMatch에 포함된 키 제거)**
+        const entireMatchKeys = new Set(entireMatch.map(([key]) => key));
+        const filteredChoseongMatch = choseongMatch.filter(([key]) => !entireMatchKeys.has(key));
+        // **가장 유사한 결과를 먼저 정렬**
+        const sortResults = (results) => {
+            return results
+                .map((item) => ({
+                data: item,
+                score: calculateMatchScore(item[2], query), // 검색어 포함도 계산
+            }))
+                .sort((a, b) => b.score - a.score) // 높은 점수순으로 정렬
+                .map((item) => item.data);
+        };
+        return {
+            entireMatch: sortResults(entireMatch),
+            choseongMatch: sortResults(filteredChoseongMatch),
+        };
+    };
+    return { search };
+}
+const { search } = createSearch();
+export default search;

package/util/handlePrint.d.ts

@@ -1,2 +1,2 @@
-declare const handlePrint: (ref: React.RefObject<HTMLDivElement>) => (event?: unknown, content?: (() => React.ReactInstance | null)) => void;
+declare const handlePrint: (ref: React.RefObject<HTMLDivElement>) => import("react-to-print").UseReactToPrintFn;
 export default handlePrint;

package/util/handlePrint.js

@@ -1,5 +1,5 @@
 import { useReactToPrint } from "react-to-print";
 const handlePrint = (ref) => useReactToPrint({
-    content: () => ref.current,
+    contentRef: ref,
 });
 export default handlePrint;

package/util/index.d.ts

@@ -11,6 +11,7 @@ export { default as copyToClipboard } from "./copyToClipboard";
 export { default as createRecord } from "./createRecord";
 export { default as formatMobileNum } from "./formatPhoneNumberToE164";
 export { default as formatKorPhoneNum } from "./formatKoreanPhoneNumber";
+export { default as search } from "./createSearch";
 export * from "../style/colors";
 export * from "./pattern";
 export * from "./shape";

package/util/index.js

@@ -11,6 +11,7 @@ export { default as copyToClipboard } from "./copyToClipboard";
 export { default as createRecord } from "./createRecord";
 export { default as formatMobileNum } from "./formatPhoneNumberToE164";
 export { default as formatKorPhoneNum } from "./formatKoreanPhoneNumber";
+export { default as search } from "./createSearch";
 export * from "../style/colors";
 export * from "./pattern";
 export * from "./shape";

package/version.txt

@@ -1 +1 @@
-1.0.265
+1.0.267

package/widget/template/Input/index.js

@@ -3,6 +3,8 @@ import { useId, useRef, useState } from "react";
 import { cn } from "../../../util";
 import Obstacle from "../Obstacle";
 import Form from "./Form";
+import { useResponsive } from "../../../hook";
+import Label from "../Label";
 const widthSize = {
     xs: "w-28",
     sm: "w-48",
@@ -13,6 +15,7 @@ const widthSize = {
     full: "w-full",
 };
 function Input({ state, onKeyDown, placeholder, option }) {
+    const isSm = useResponsive("sm");
     const { width, disabled } = option ?? {};
     const [value, setValue] = state;
     const ref = useRef(null);
@@ -42,6 +45,11 @@ function Input({ state, onKeyDown, placeholder, option }) {
         styles: "focus:outline-none bg-transparent",
         pointers: "cursor-default",
     };
+    if (!isSm)
+        return (_jsx(Label.Button, { title: "\uAC80\uC0C9", option: {
+                width: "3xs",
+                height: "2xs",
+            } }));
     return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), onClick: () => ref.current?.focus(), children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M21.8758 21.8748L16.4623 16.4613M16.4623 16.4613C17.9275 14.9961 18.7506 13.0089 18.7506 10.9368C18.7506 8.86474 17.9275 6.87752 16.4623 5.41234C14.9971 3.94715 13.0099 3.12402 10.9378 3.12402C8.86571 3.12402 6.8785 3.94715 5.41331 5.41234C3.94813 6.87752 3.125 8.86474 3.125 10.9368C3.125 13.0089 3.94813 14.9961 5.41331 16.4613C6.8785 17.9265 8.86571 18.7496 10.9378 18.7496C13.0099 18.7496 14.9971 17.9265 16.4623 16.4613Z", stroke: "#105652", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), _jsx("input", { id: id, ref: ref, className: cn(inputBox), type: "text", value: value, onFocus: () => setIsFocus(true), onBlur: () => setIsFocus(false), placeholder: typeof placeholder === "function"
                         ? placeholder()
                         : placeholder ?? "입력해주세요", onKeyDown: onKeyDown && ((e) => onKeyDown(e, value ?? "")), onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }) }));

package/layout/template/About/SectionA.d.ts

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

package/layout/template/About/SectionA.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { cn } from "../../../util";
-import { useVisibilityObserver } from "../../../hook";
-export default function SectionA() {
-    const [isHidden, setIsHidden] = useState(false);
-    useEffect(() => {
-        const handleScroll = () => {
-            if (window.scrollY > 50) {
-                setIsHidden(true);
-            }
-            else {
-                setIsHidden(false);
-            }
-        };
-        window.addEventListener("scroll", handleScroll);
-        return () => {
-            window.removeEventListener("scroll", handleScroll);
-        };
-    }, []);
-    const handleScroll = () => {
-        window.scrollBy({
-            top: window.innerHeight,
-            behavior: "smooth",
-        });
-    };
-    const scrollGuideWrapper = {
-        display: "absolute hidden md:flex flex-col justify-center items-center z-10",
-        sizes: "w-full",
-        spacings: "bottom-0 mb-10",
-        scrollAction: `transition-opacity duration-500 ${isHidden ? "opacity-0" : "opacity-100"}`,
-    };
-    const scrollGuideText = {
-        sizes: "w-full",
-        textstyles: "font-medium text-white text-base",
-        spacings: "text-center",
-    };
-    const scrollGuideButton = {
-        sizes: "w-10 h-10 mt-10",
-        other: "animate-bounce p-1 w-10 h-10 ring-1 ring-slate-900/5 shadow-lg rounded-full flex items-center justify-center",
-    };
-    const titleWrapper = {
-        displays: "flex flex-col justify-center items-center md:items-start",
-        sizes: "w-[1200px] h-full",
-        spacings: "gap-8",
-        textstyles: "text-white",
-        animation: "transform transition-all duration-1000 delay-0 ease-in-out",
-    };
-    const { isVisible, elementRef } = useVisibilityObserver(0.1, true);
-    return (_jsxs("div", { className: "relative w-full h-screen bg-[url('/images/aboutus/bg/img-aboutus-cover-min.png')] flex py-55 justify-center bg-cover bg-center px-5 z-0", children: [_jsxs("div", { className: cn(scrollGuideWrapper), children: [_jsx("div", { className: cn(scrollGuideText), children: "\uC790\uC138\uD55C \uB0B4\uC6A9\uC744 \uBCF4\uB824\uBA74 \uC544\uB798\uB85C \uC2A4\uD06C\uB864 \uD574\uBCF4\uC138\uC694" }), _jsx("div", { className: cn(scrollGuideButton), onClick: handleScroll, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "size-6 text-white", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m19.5 8.25-7.5 7.5-7.5-7.5" }) }) })] }), _jsx("div", { className: "absolute h-screen w-full bg-gradient-to-b from-black/0 to-black z-0 top-0" }), _jsxs("div", { className: cn(titleWrapper, isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"), children: [_jsx("div", { className: "text-lg md:text-xl z-10", ref: elementRef, children: "30,000\uC5EC\uAC1C\uC758 \uD559\uAD50\uC640 \uD559\uC6D0\uC758 \uC120\uD0DD" }), _jsxs("div", { className: "text-[32px] md:text-6xl font-bold text-center md:text-left z-10", children: ["\uB300\uD55C\uBBFC\uAD6D\uC744 \uB300\uD45C\uD558\uB294", _jsx("br", {}), "\uC601\uC5B4\uC778\uC99D\uC2DC\uD5D8"] }), _jsx("img", { src: "/images/aboutus/p1-min.png", alt: "", className: "object-fit w-70 z-10" })] })] }));
-}

package/layout/template/About/SectionB.d.ts

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