@edu-tosel/design 1.0.266 → 1.0.267

package/asset/SVG.d.ts

@@ -10,6 +10,8 @@ import TOSEL from "./svg/TOSEL";
 import HallofFame from "./svg/HallofFame";
 import Print from "./svg/Print";
 import User from "./svg/User";
+import Search from "./svg/Search";
+import MiniClose from "./svg/MiniClose";
 declare const SVG: {
     TOSEL: typeof TOSEL;
     Close: typeof Close;
@@ -63,5 +65,7 @@ declare const SVG: {
     };
     HallofFame: typeof HallofFame;
     User: typeof User;
+    Search: typeof Search;
+    MiniClose: typeof MiniClose;
 };
 export default SVG;

package/asset/SVG.js

@@ -15,6 +15,8 @@ import Collab from "./svg/Collab";
 import HallofFame from "./svg/HallofFame";
 import Print from "./svg/Print";
 import User from "./svg/User";
+import Search from "./svg/Search";
+import MiniClose from "./svg/MiniClose";
 const SVG = {
     TOSEL,
     Close,
@@ -33,5 +35,7 @@ const SVG = {
     Collab,
     HallofFame,
     User,
+    Search,
+    MiniClose,
 };
 export default SVG;

package/asset/SVG.tsx

@@ -15,6 +15,8 @@ import Collab from "./svg/Collab";
 import HallofFame from "./svg/HallofFame";
 import Print from "./svg/Print";
 import User from "./svg/User";
+import Search from "./svg/Search";
+import MiniClose from "./svg/MiniClose";
 
 const SVG = {
   TOSEL,
@@ -34,6 +36,8 @@ const SVG = {
   Collab,
   HallofFame,
   User,
+  Search,
+  MiniClose,
 };
 
 export default SVG;

package/asset/svg/MiniClose.d.ts

@@ -0,0 +1,4 @@
+import { OnClick } from "../../interface";
+export default function MiniClose({ onClick }: {
+    onClick?: OnClick;
+}): import("react/jsx-runtime").JSX.Element;

package/asset/svg/MiniClose.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function MiniClose({ onClick }) {
+    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-5", children: _jsx("path", { "fill-rule": "evenodd", d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z", "clip-rule": "evenodd" }) }));
+}

package/asset/svg/MiniClose.tsx

@@ -0,0 +1,19 @@
+import { OnClick } from "../../interface";
+
+export default function MiniClose({ onClick }: { onClick?: OnClick }) {
+  return (
+    <svg
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      className="size-5"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+}

package/asset/svg/Search.d.ts

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

package/asset/svg/Search.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Search() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: [_jsx("path", { "vector-effect": "non-scaling-stroke", d: "m19 19-3.5-3.5", stroke: "#475569", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), _jsx("circle", { "vector-effect": "non-scaling-stroke", cx: "11", cy: "11", r: "6", stroke: "#475569", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })] }));
+}

package/asset/svg/Search.tsx

@@ -0,0 +1,24 @@
+export default function Search() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+      <path
+        vector-effect="non-scaling-stroke"
+        d="m19 19-3.5-3.5"
+        stroke="#475569"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <circle
+        vector-effect="non-scaling-stroke"
+        cx="11"
+        cy="11"
+        r="6"
+        stroke="#475569"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

package/board/design/Header.design.d.ts

@@ -1,2 +1,2 @@
 import { BoardHeaderProps } from "../../interface/Board";
-export default function BoardHeader<B>({ titles, tag, option, }: BoardHeaderProps<B>): import("react/jsx-runtime").JSX.Element;
+export default function BoardHeader<B>({ titles, tag, widgets, option, }: BoardHeaderProps<B>): import("react/jsx-runtime").JSX.Element;

package/board/design/Header.design.js

@@ -1,18 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { Input, Select } from "../../widget";
-export default function BoardHeader({ titles, tag, option, }) {
+export default function BoardHeader({ titles, tag, widgets, option, }) {
     const { title, icon, titleColor } = titles ?? {};
     const { selects, inputs } = tag ?? {};
     const { background, text, boundary } = option ?? {};
     const container = {
         positions: "top-0 left-0 z-30 relative flex items-center",
-        paddings: "px-7.5",
+        paddings: "px-3.5 md:px-7.5",
         backgrounds: background ?? "bg-white",
         texts: text ?? "text-black",
         sizes: "w-full h-15",
         boundary: boundary ?? "border-b-2 border-green-dark ",
         rounded: "xl:rounded-t-xl",
     };
-    return (_jsx(_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)))] })] }) }));
+    return (_jsx(_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: [widgets?.map((Widget, index) => (_jsx(HeaderWidgetRender, { ...Widget }, index))), selects?.map(({ selectOptions, option, state }) => (_jsx(Select, { option: option, selectOptions: selectOptions, state: state }, title))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }) }));
+}
+function HeaderWidgetRender(props) {
+    if (props.type === "input") {
+        return _jsx(Input, { ...props.data });
+    }
+    if (props.type === "select") {
+        return _jsx(Select, { ...props.data });
+    }
+    return null;
 }

package/globals.css

@@ -82,8 +82,6 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 .box-shadow-sm {
   box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
 }
-.border-gradient-green-to-red {
-}
 
 .x-shape {
   position: relative;
@@ -274,3 +272,10 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.stacking-context {
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
+  mask-image: radial-gradient(white, black);
+  -webkit-mask-composite: destination-in;
+  mask-composite: intersect;
+}

package/interface/Board.d.ts

@@ -21,8 +21,17 @@ export interface BoardProps<B> {
     option?: BoardOption;
     debug?: string;
     buttons?: LabelWidget[];
-    isUnderGallery?: Boolean;
+    isUnderGallery?: boolean;
 }
+interface HeaderInputWidget {
+    type: "input";
+    data: InputWidget;
+}
+interface HeaderSelectWidget<B> {
+    type: "select";
+    data: SelectWidget<B>;
+}
+export type HeaderWidgetType<B> = HeaderInputWidget | HeaderSelectWidget<B>;
 export interface BoardHeaderProps<B> {
     titles?: Omit<Titles, "subtitle"> & {
         icon?: string;
@@ -31,6 +40,7 @@ export interface BoardHeaderProps<B> {
         selects?: SelectWidget<B>[];
         inputs?: InputWidget[];
     };
+    widgets?: HeaderWidgetType<B>[];
     option?: {
         background?: string;
         text?: string;

package/layout/design/Shelf.design.js

@@ -6,8 +6,8 @@ export default function Shelf({ children, className, option, titles, debug, }) {
     const { titleSize, subtitleSize, isSize, width, height } = option ?? {};
     const container = {
         displays: "flex flex-col gap-6",
-        optionHeight: width ?? "w-auto",
-        optionWidth: height ?? "h-fit",
+        optionWidth: width ?? "w-full xl:w-auto",
+        optionHeight: height ?? "h-fit",
         sizes: isSize && "w-full h-fit",
         debug: debug && isDebug(`border-2  ${debug}`),
     };

package/layout/index.d.ts

@@ -1,13 +1,9 @@
 export { default as Action } from "./template/Action";
-export { default as About } from "./template/About";
 export { default as Announcement } from "./template/Announcement";
 export { default as Archive } from "./template/Archive";
-export { default as Books } from "./template/Books";
 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 Legacy } from "./template/Legacy";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";
@@ -16,10 +12,5 @@ export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
 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 RegexamLayout } from "./template/Regexam/Regexam.layout";
-export { default as BooksLayout } from "./template/Books/Books.layout";
 export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
-export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";
-export { default as Transcript } from "./template/Transcript";
 export { default as Ticket } from "./template/Ticket";

package/layout/index.js

@@ -1,13 +1,9 @@
 export { default as Action } from "./template/Action";
-export { default as About } from "./template/About";
 export { default as Announcement } from "./template/Announcement";
 export { default as Archive } from "./template/Archive";
-export { default as Books } from "./template/Books";
 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 Legacy } from "./template/Legacy";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";
@@ -16,10 +12,5 @@ export { default as Row } from "./template/Row";
 export { default as Shelf } from "./template/Shelf";
 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 RegexamLayout } from "./template/Regexam/Regexam.layout";
-export { default as BooksLayout } from "./template/Books/Books.layout";
 export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
-export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";
-export { default as Transcript } from "./template/Transcript";
 export { default as Ticket } from "./template/Ticket";

package/layout/template/home/Promotion.js

@@ -87,6 +87,7 @@ function Banner({ onClick, image, option }) {
         displays: "absolute",
         positions: "bottom-0 left-0",
         background: `bg-cover bg-center`,
+        boundaries: "rounded-xl md:rounded-2xl",
     };
     return (_jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), onClick: onClick, children: _jsx("div", { className: cn(imageWrapper), style: { backgroundImage: `url(${image?.src})` } }) }) }));
 }

package/layout/template/home/Service.js

@@ -101,6 +101,7 @@ function Banner({ titles, onClick, image, option }) {
         displays: "absolute",
         positions: "bottom-0 left-0",
         background: `bg-cover bg-center`,
+        boundaries: "rounded-xl md:rounded-2xl",
     };
     return (_jsx("div", { className: cn(ghostCard), children: _jsxs("div", { className: cn(card), onClick: onClick, children: [_jsx("div", { className: cn(imageWrapper), style: { backgroundImage: `url(${image?.src})` } }), _jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.subtitle), children: titles.subtitle }), _jsx("div", { className: cn(titleBox.title), children: titles.title })] })] }) }));
 }

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

@@ -62,9 +62,23 @@ export default function Carousel({ contents, }) {
         background,
         animations: "duration-300",
     };
+    const titleWrapper = {
+        displays: "flex flex-col xxs:flex-row xxs:items-center md:items-start md:flex-col",
+        sizes: "w-full h-fit xxs:w-fit md:w-72",
+        spacings: "mt-4 px-5 xxs:mt-8 xxs:gap-8 md:p-0 md:mt-0 md:gap-6 md:pl-7.5",
+        animations: "duration-500",
+        //debug: "border-red-500 border-2",
+    };
     const titleSet = {
-        displays: "flex items-center lex gap-4 flex-row xxs:gap-4 xxs:items-start xxs:flex-col md:gap-2",
+        displays: "flex flex gap-4 flex-row justify-start xxs:justify-center xxs:gap-4 xxs:items-start xxs:flex-col xxs:shrink-0  md:gap-2",
         sizes: "w-fit md:w-full h-fit",
+        //debug: "border-2 border-green-500",
+    };
+    const subtitleStyles = {
+        displays: "flex flex-col justify-center",
+        sizes: "w-full h-10 xxs:w-fit xxs:h-fit",
+        spacings: "my-2 xxs:mt-0",
+        textStyles: "text-sm md:text-base break-keep",
     };
     const body = {
         displays: "flex flex-none flex-col items-center justify-center md:flex-row",
@@ -73,21 +87,26 @@ export default function Carousel({ contents, }) {
         animations: "duration-500",
     };
     const tagBox = {
-        displays: "flex justify-center items-center",
+        displays: "flex justify-center items-center shrink-0",
         sizes: "w-fit h-fit px-2 py-1 md:px-2.5 md:py-1.5",
         background: tag.background,
         fonts: "text-white font-pretendard-medium text-sm md:text-base leading-none",
         styles: "rounded-md",
     };
+    const buttonBoxPosition = {
+        display: "absolute flex justify-center items-center md:static md:justify-start",
+        sizes: "w-full h-fit left-0 bottom-0 z-10",
+        spacings: "ml-0 md:ml-10 xm:ml-0",
+    };
     const buttonBox = {
+        displays: "relative justify-center items-center gap-1 flex z-10",
         animations: "duration-500",
-        displays: "justify-center items-center gap-1 flex z-10",
-        sizes: "w-30 h-10 md:h-6.25 md:w-23.25 bg-gray-dark rounded-full",
+        sizes: "w-34 h-10 md:h-6.25 md:w-26 bg-gray-dark rounded-full",
         paddings: "px-1.5 mt-0 mb-5 md:mt-12 ",
     };
-    const buttonBoxPosition = {
-        display: "absolute flex justify-center items-center md:static md:justify-start ",
-        sizes: "w-full h-fit left-0 bottom-0 z-10",
+    const handlePosition = {
+        displays: "absolute flex justify-between items-center",
+        sizes: "w-full h-full",
     };
-    return (_jsx("div", { onClick: contents[index].onClick, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "duration-500 w-fit h-fit flex flex-col mt-4 xxs:mt-8 xxs:flex-row xxs:gap-8 md:flex-col md:flex-none md:w-72 md:pl-7.5 md:gap-6 md:mt-0", children: [_jsxs("div", { className: cn(titleSet), children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl md:text-2xl", children: titles.title })] }), _jsx(LineBreaks, { className: "w-fit flex flex-col justify-center text-sm my-2 xxs:mt-0 md:text-base", texts: titles.subtitle }), _jsx("div", { className: cn(buttonBoxPosition), onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: handlePrev, className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "flex flex-row md:gap-2 gap-4 justify-center items-center", children: [_jsx("div", { className: "text-white w-2 text-sm", children: index + 1 }), _jsx("div", { className: "w-0.5 h-3 bg-gray-medium" }), _jsx("div", { className: "text-white w-2 text-sm", children: contents.length })] }), _jsx("button", { onClick: handleNext, className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] }) })] }), _jsx("div", { className: "h-full overflow-hidden w-fit image-container", children: image && (_jsx(animated.img, { src: image, alt: "carousel-image", onLoad: () => setLoaded(true), className: "object-cover h-full z-0", style: transitionStyles })) })] }) }));
+    return (_jsx("div", { onClick: contents[index].onClick, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsxs("div", { className: cn(titleSet), children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl md:text-2xl", children: titles.title })] }), _jsx(LineBreaks, { className: cn(subtitleStyles), texts: titles.subtitle }), _jsx("div", { className: cn(buttonBoxPosition), onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: cn(buttonBox), children: [_jsxs("div", { className: cn(handlePosition), children: [_jsx("button", { onClick: handlePrev, className: "w-10 md:w-6 h-full flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsx("button", { onClick: handleNext, className: "w-10 md:w-6 h-full flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] }), _jsxs("div", { className: "flex flex-row md:gap-2 gap-4 justify-center items-center", children: [_jsx("div", { className: "text-white w-4 text-sm text-center", children: index + 1 }), _jsx("div", { className: "w-0.5 h-3 bg-gray-medium" }), _jsx("div", { className: "text-white w-4 text-sm text-center", children: contents.length })] })] }) })] }), _jsx("div", { className: "h-full overflow-hidden w-fit image-container", children: image && (_jsx(animated.img, { src: image, alt: "carousel-image", onLoad: () => setLoaded(true), className: "object-cover h-full z-0", style: transitionStyles })) })] }) }));
 }

package/layout/template/home/layout/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, }) {
@@ -57,7 +57,7 @@ export default function Navigation({ browser, calendar, notice, event, }) {
             setIsHidden(true);
         return setIsOpen(true);
     };
-    const itemContainer = {
+    const blurContainer = {
         positions: "fixed inset-0 z-40",
         sizes: "h-screen w-full",
         boundaries: "md:pl-[56px]",
@@ -69,15 +69,19 @@ export default function Navigation({ browser, calendar, notice, event, }) {
     };
     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: "100%", opacity: 0, pointerEvent: "none" },
@@ -87,25 +91,30 @@ export default function Navigation({ browser, calendar, notice, event, }) {
         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-fit overflow-hidden duration-300",
-    };
     const scrollWrapper = {
         displays: "flex flex-row md:flex-col",
         sizss: "h-fit md:h-full",
@@ -175,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.266",
+  "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

@@ -1,8 +1,5 @@
-export default function createSearch({ record, }: {
-    record: Record<string, string[]>;
-}): {
-    search: (query: string) => {
-        entireMatch: [string, string][];
-        choseongMatch: [string, string][];
-    };
+declare const search: (query: string) => {
+    entireMatch: [string, string, string][];
+    choseongMatch: [string, string, string][];
 };
+export default search;