@edu-tosel/design 1.0.263 → 1.0.266

package/board/design/Board.design.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, isDebug } from "../../util";
 import { Action, Label } from "../..";
+import { useGalleryContext } from "../../layout/template/GalleryContext";
 const widthSize = {
     xs: "w-20",
     sm: "w-24",
@@ -22,6 +23,7 @@ const heightSize = {
     auto: "h-auto",
 };
 export function Board({ children, action, option, debug, buttons, }) {
+    const isUnderGallery = useGalleryContext();
     const { shows } = action ?? {};
     const { width, height, isRounded, className, noMobile, background, boundary, } = option ?? {};
     const container = {
@@ -29,7 +31,11 @@ export function Board({ children, action, option, debug, buttons, }) {
         width: widthSize[width ?? "full"],
         noMobile: noMobile && "hidden xl:block",
         debug: debug && isDebug(`border-2  border-${debug}`),
-        height: "h-[calc(100%-56px)]",
+        height: isUnderGallery
+            ? "h-full xl:h-[calc(100%-30px)]"
+            : buttons
+                ? "h-full xl:h-[calc(100%-100px)]"
+                : "h-full xl:h-[calc(100%-30px)]",
     };
     const body = {
         positions: "relative",

package/board/template/CanvasBoard.js

@@ -9,9 +9,9 @@ export default function CanvasBoard({ header, children, action, buttons, option,
     };
     const body = {
         displays: "flex flex-col lg:flex-row lg:flex-wrap gap-7.5",
-        sizes: "h-[calc(100%-60px)]",
+        sizes: header ? "h-[calc(100%-60px)]" : "h-full",
         paddings: `${header ? "pb-5" : "pb-36 xl:pb-6"} px-2 xs:px-4 xl:px-7.5 pt-2 xs:pt-4 xl:pt-7.5`,
-        scrollStyles: "overflow-y-scroll scrollbar-hidden",
+        scrollStyles: "overflow-scroll scrollbar-hidden ",
         classNames: option?.className,
     };
     return (_jsxs(Board, { action: action, buttons: buttons, option: { ...option, className: "", isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), _jsx(Action.Replace, { actions: action?.replaces, children: _jsx("div", { className: cn(body), children: children }) })] }));

package/globals.css

@@ -267,3 +267,10 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
+/* related to font rendering in safari engine */
+* {
+  font-synthesis: none !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/interface/Board.d.ts

@@ -21,6 +21,7 @@ export interface BoardProps<B> {
     option?: BoardOption;
     debug?: string;
     buttons?: LabelWidget[];
+    isUnderGallery?: Boolean;
 }
 export interface BoardHeaderProps<B> {
     titles?: Omit<Titles, "subtitle"> & {

package/interface/Shelf.d.ts

@@ -4,6 +4,7 @@ interface Option {
     titleSize?: string;
     subtitleSize?: string;
     overflowScroll?: boolean;
+    display?: string;
     width?: string;
     height?: string;
     gap?: "xy" | "x" | "y" | "none";

package/interface/domain/Tag.d.ts

@@ -1,3 +1,3 @@
-type Tag = "NEW" | "REG" | "RCU";
+type Tag = "NEW" | "REG" | "RCU" | "UDT";
 export declare const tagString: Record<Tag, string>;
 export type { Tag };

package/interface/domain/Tag.js

@@ -1,5 +1,6 @@
 export const tagString = {
     NEW: "신규론칭",
     REG: "정기시험",
-    RCU: "모집 중"
+    RCU: "모집 중",
+    UDT: "새소식",
 };

package/interface/widget/Carousel.d.ts

@@ -1,6 +1,6 @@
 import { OnClick, Titles } from "../Property";
 export type { CarouselContent };
-type Tag = "NEW" | "REG" | "RCU";
+type Tag = "NEW" | "REG" | "RCU" | "UDT";
 interface Option {
     background: string;
     text: string;

package/layout/design/Shelf.design.js

@@ -6,7 +6,7 @@ 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-full",
+        optionHeight: width ?? "w-auto",
         optionWidth: height ?? "h-fit",
         sizes: isSize && "w-full h-fit",
         debug: debug && isDebug(`border-2  ${debug}`),

package/layout/template/Gallery.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GalleryProvider } from "./GalleryContext";
 import Action from "./Action";
 import Tab from "./Tab";
 import { cn } from "../../util";
@@ -8,12 +9,15 @@ export default function Gallery({ action, children, option, }) {
     const container = {
         displays: "relative flex flex-col-reverse xl:flex-col",
         position: "top-0 justify-end xl:justify-start",
-        sizes: "h-[calc(100%)] xl:h-[calc(100%-76px)] w-full",
+        sizes: "w-full",
+        heightOption: action?.tabs
+            ? "h-[calc(100%-56px)] xl:h-[calc(100%-76px)]"
+            : "h-[calc(100%-76px)]",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx(Action.Replace, { actions: action?.replaces, children: _jsx(Action.Show, { actions: action?.shows, children: children }) }), action?.tabs && (_jsx(Tab, { tabs: action?.tabs, option: {
-                    className: cn(tabBox),
-                    text,
-                    background,
-                    boundary,
-                } }))] }));
+    return (_jsx(GalleryProvider, { children: _jsxs("div", { className: cn(container), children: [_jsx(Action.Replace, { actions: action?.replaces, children: _jsx(Action.Show, { actions: action?.shows, children: children }) }), action?.tabs && (_jsx(Tab, { tabs: action?.tabs, option: {
+                        className: cn(tabBox),
+                        text,
+                        background,
+                        boundary,
+                    } }))] }) }));
 }

package/layout/template/GalleryContext.d.ts

@@ -0,0 +1,4 @@
+export declare const useGalleryContext: () => boolean;
+export declare const GalleryProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/layout/template/GalleryContext.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const GalleryContext = createContext(null);
+export const useGalleryContext = () => {
+    const context = useContext(GalleryContext);
+    return context ?? false; // 기본값으로 false 반환
+};
+export const GalleryProvider = ({ children, }) => (_jsx(GalleryContext.Provider, { value: true, children: children }));

package/layout/template/MonthlyProgressReport/Layout.js

@@ -20,7 +20,7 @@ export default function Layout({ props }) {
     };
     const ref = useRef(null);
     const handlePrint = useReactToPrint({
-        content: () => ref.current,
+        contentRef: ref,
     });
     return (_jsx("div", { className: cn(container), children: _jsxs(Action.Show, { actions: [
                 [
@@ -48,5 +48,5 @@ export default function Layout({ props }) {
                                 height: "xs",
                                 background: "bg-blue-navy",
                                 text: "text-white",
-                            }, onClick: handlePrint })] }), _jsx(MonthlyProgressReport.Report, { ref: ref, props: props })] }) }));
+                            }, onClick: () => handlePrint() })] }), _jsx(MonthlyProgressReport.Report, { ref: ref, props: props })] }) }));
 }

package/layout/template/Regexam/OfflineExam.js

@@ -200,5 +200,5 @@ export function AnnualTableComponent() {
     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)))] }) }));
 }
 export function TimeTableComponent() {
-    return (_jsx("div", { className: "overflow-auto w-full scrollbar-hidden", children: _jsxs("div", { className: "min-w-[600px] w-full", children: [_jsxs("div", { className: "flex text-green-dark font-bold text-xs", children: [_jsx("div", { className: "sticky left-0 rounded-md p-2 flex-[2] text-xs" }), _jsx("div", { className: "p-2 flex-[1]" }), _jsx("div", { className: "p-2 flex-[4]", children: "13:10" }), _jsx("div", { className: "p-2 flex-[1]", children: "13:35" }), _jsx("div", { className: "p-2 flex-[2]", children: "13:40" }), _jsx("div", { className: "p-2 flex-[1]", children: "14:20" })] }), _jsxs("div", { className: "flex bg-white/50 text-gray-dark font-semibold text-xs rounded-md", children: [_jsxs("div", { className: "sticky left-0 bg-white/90 rounded-md p-2 flex-[2]", children: ["Pre-Starter ", _jsx("br", {}), " Starter"] }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uC785\uC2E4" }), _jsx("div", { className: "p-2 flex-[4] border-green-dark border-r-1 border-dashed", children: "\uC2DC\uD5D8\uC9C0 \uBC30\uBD80" }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uB300\uAE30" }), _jsx("div", { className: "p-2 flex-[2] border-green-dark border-r-1 border-dashed bg-green-light text-green-dark", children: "\uC2DC\uD5D8\uC9C4\uD589 / 40\uBD84" }), _jsx("div", { className: "p-2 flex-[1]" })] }), _jsxs("div", { className: "flex text-green-dark font-bold text-xs mt-4", children: [_jsx("div", { className: "sticky left-0 rounded-md p-2 flex-[2] text-lg" }), _jsx("div", { className: "p-2 flex-[1]" }), _jsx("div", { className: "p-2 flex-[2]", children: "13:10" }), _jsx("div", { className: "p-2 flex-[1]", children: "13:25" }), _jsx("div", { className: "p-2 flex-[4]", children: "13:30" }), _jsx("div", { className: "p-2 flex-[1]", children: "14:20" })] }), _jsxs("div", { className: "flex bg-white/50 text-gray-dark font-semibold text-xs rounded-md", children: [_jsxs("div", { className: "sticky left-0 bg-white/90 rounded-md p-2 flex-[2]", children: ["Pre-Starter ", _jsx("br", {}), " Starter"] }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uC785\uC2E4" }), _jsx("div", { className: "p-2 flex-[2] border-green-dark border-r-1 border-dashed", children: "\uC2DC\uD5D8\uC9C0 \uBC30\uBD80" }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uB300\uAE30" }), _jsx("div", { className: "p-2 flex-[4] border-green-dark border-r-1 border-dashed bg-green-light text-green-dark", children: "\uC2DC\uD5D8\uC9C4\uD589 / 50\uBD84" }), _jsx("div", { className: "p-2 flex-[1] bg" })] }), _jsxs("div", { className: "flex text-green-dark font-bold text-xs mt-4", children: [_jsx("div", { className: "sticky left-0 rounded-md p-2 flex-[2] text-lg" }), _jsx("div", { className: "p-2 flex-[1]" }), _jsx("div", { className: "p-2 flex-[2]", children: "13:10" }), _jsx("div", { className: "p-2 flex-[1]", children: "13:25" }), _jsx("div", { className: "p-2 flex-[4]", children: "13:30" }), _jsx("div", { className: "p-2 flex-[1] text-right", children: "14:30" })] }), _jsxs("div", { className: "flex bg-white/50 text-gray-dark font-semibold text-xs rounded-md", children: [_jsx("div", { className: "sticky left-0 bg-white/90 rounded-md p-2 flex-[2]", children: "High-Junior" }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uC785\uC2E4" }), _jsx("div", { className: "p-2 flex-[2] border-green-dark border-r-1 border-dashed", children: "\uC2DC\uD5D8\uC9C0 \uBC30\uBD80" }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uB300\uAE30" }), _jsx("div", { className: "p-2 flex-[4] bg-green-light text-green-dark", children: "\uC2DC\uD5D8\uC9C4\uD589 / 60\uBD84" }), _jsx("div", { className: "p-2 flex-[1] bg-green-light  border-green-dark border-r-1 border-dashed" })] })] }) }));
+    return (_jsx("div", { className: "overflow-auto w-full scrollbar-hidden", children: _jsxs("div", { className: "min-w-[600px] w-full", children: [_jsxs("div", { className: "flex text-green-dark font-bold text-xs", children: [_jsx("div", { className: "sticky left-0 rounded-md p-2 flex-[2] text-xs" }), _jsx("div", { className: "p-2 flex-[1]" }), _jsx("div", { className: "p-2 flex-[4]", children: "13:10" }), _jsx("div", { className: "p-2 flex-[1]", children: "13:35" }), _jsx("div", { className: "p-2 flex-[2]", children: "13:40" }), _jsx("div", { className: "p-2 flex-[1]", children: "14:20" })] }), _jsxs("div", { className: "flex bg-white/50 text-gray-dark font-semibold text-xs rounded-md", children: [_jsxs("div", { className: "sticky left-0 bg-white/90 rounded-md p-2 flex-[2]", children: ["Pre-Starter ", _jsx("br", {}), " Starter"] }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uC785\uC2E4" }), _jsx("div", { className: "p-2 flex-[4] border-green-dark border-r-1 border-dashed", children: "\uC2DC\uD5D8\uC9C0 \uBC30\uBD80" }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uB300\uAE30" }), _jsx("div", { className: "p-2 flex-[2] border-green-dark border-r-1 border-dashed bg-green-light text-green-dark", children: "\uC2DC\uD5D8\uC9C4\uD589 / 40\uBD84" }), _jsx("div", { className: "p-2 flex-[1]" })] }), _jsxs("div", { className: "flex text-green-dark font-bold text-xs mt-4", children: [_jsx("div", { className: "sticky left-0 rounded-md p-2 flex-[2] text-lg" }), _jsx("div", { className: "p-2 flex-[1]" }), _jsx("div", { className: "p-2 flex-[2]", children: "13:10" }), _jsx("div", { className: "p-2 flex-[1]", children: "13:25" }), _jsx("div", { className: "p-2 flex-[4]", children: "13:30" }), _jsx("div", { className: "p-2 flex-[1]", children: "14:20" })] }), _jsxs("div", { className: "flex bg-white/50 text-gray-dark font-semibold text-xs rounded-md", children: [_jsxs("div", { className: "sticky left-0 bg-white/90 rounded-md p-2 flex-[2]", children: ["Basic ", _jsx("br", {}), " Junior"] }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uC785\uC2E4" }), _jsx("div", { className: "p-2 flex-[2] border-green-dark border-r-1 border-dashed", children: "\uC2DC\uD5D8\uC9C0 \uBC30\uBD80" }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uB300\uAE30" }), _jsx("div", { className: "p-2 flex-[4] border-green-dark border-r-1 border-dashed bg-green-light text-green-dark", children: "\uC2DC\uD5D8\uC9C4\uD589 / 50\uBD84" }), _jsx("div", { className: "p-2 flex-[1] bg" })] }), _jsxs("div", { className: "flex text-green-dark font-bold text-xs mt-4", children: [_jsx("div", { className: "sticky left-0 rounded-md p-2 flex-[2] text-lg" }), _jsx("div", { className: "p-2 flex-[1]" }), _jsx("div", { className: "p-2 flex-[2]", children: "13:10" }), _jsx("div", { className: "p-2 flex-[1]", children: "13:25" }), _jsx("div", { className: "p-2 flex-[4]", children: "13:30" }), _jsx("div", { className: "p-2 flex-[1] text-right", children: "14:30" })] }), _jsxs("div", { className: "flex bg-white/50 text-gray-dark font-semibold text-xs rounded-md", children: [_jsx("div", { className: "sticky left-0 bg-white/90 rounded-md p-2 flex-[2]", children: "High-Junior" }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uC785\uC2E4" }), _jsx("div", { className: "p-2 flex-[2] border-green-dark border-r-1 border-dashed", children: "\uC2DC\uD5D8\uC9C0 \uBC30\uBD80" }), _jsx("div", { className: "p-2 flex-[1] border-green-dark border-r-1 border-dashed", children: "\uB300\uAE30" }), _jsx("div", { className: "p-2 flex-[4] bg-green-light text-green-dark", children: "\uC2DC\uD5D8\uC9C4\uD589 / 60\uBD84" }), _jsx("div", { className: "p-2 flex-[1] bg-green-light  border-green-dark border-r-1 border-dashed" })] })] }) }));
 }

package/layout/template/Regexam/Types.js

@@ -130,15 +130,15 @@ const examStyles = {
     nrgGrpOrganization: {
         id: "5",
         type: "단체접수",
-        name: "기관 시험",
+        name: "특별기관시험",
         place: "기관에서 비정기적으로 실시하는 시험",
         isHallofFame: false,
         report: "기본제공",
-        certificate: "미제공",
+        certificate: "기본제공",
         link: urlAsset.homepage("/events/28"),
         majorColor: "text-green-dark bg-green-dark",
         imgSrc: urlAsset.resource("/images/img-buidling-academy.png"),
-        buttonText: "기관시험 신청하기",
+        buttonText: "특별기관시험 신청하기",
         mainPrice: "33,000원",
         subPrice: "39,000원",
         cocoonPrice: "29,000원",

package/layout/template/Ticket/Extension.js

@@ -17,9 +17,9 @@ export default function TicketExtension({ props, option }) {
     };
     const ref = useRef(null);
     const handlePrint = useReactToPrint({
-        content: () => ref.current,
+        contentRef: ref,
     });
-    return (_jsxs("div", { className: cn(body), children: [_jsx(Ticket, { ref: ref, props: props }), _jsxs("div", { className: "relative w-48 flex flex-row md:flex-col md:h-[700px] gap-4 h-full justify-start mt-5 items-center", children: [!noPrint && (_jsx("div", { className: "md:flex hidden", children: _jsx(Label.Button, { title: "\uC218\uD5D8\uD45C \uCD9C\uB825\uD558\uAE30", onClick: handlePrint, option: {
+    return (_jsxs("div", { className: cn(body), children: [_jsx(Ticket, { ref: ref, props: props }), _jsxs("div", { className: "relative w-48 flex flex-row md:flex-col md:h-[700px] gap-4 h-full justify-start mt-5 items-center", children: [!noPrint && (_jsx("div", { className: "md:flex hidden", children: _jsx(Label.Button, { title: "\uC218\uD5D8\uD45C \uCD9C\uB825\uD558\uAE30", onClick: () => handlePrint(), option: {
                                 width: "md",
                                 height: "sm",
                                 background: "bg-white shadow-main",

package/layout/template/dashboard/Navigation.js

@@ -1,15 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { useActionStore } from "../../../store";
 import { cn } from "../../../util";
 import Action from "../Action";
 import { useResponsive } from "../../../hook";
 function Container({ children }) {
-    const { events } = useActionStore();
     const isMmd = useResponsive("mmd");
-    useEffect(() => {
-        console.log(events);
-    }, [events]);
     return (_jsx(Action.Show, { actions: [[isMmd || "dashboardMenu", _jsx(Contents, { children: children })]], children: null }));
 }
 function Contents({ children, showAction, }) {

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

@@ -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(() => {
@@ -42,16 +58,20 @@ export default function Navigation({ browser, calendar, notice, event, }) {
         return setIsOpen(true);
     };
     const itemContainer = {
-        positions: "fixed top-0 left-0 z-40 ",
-        sizes: "h-screen w-[400px]",
+        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",
         styles: "bg-white",
+        animation: "duration-300",
     };
     const iconWrapper = {
         displays: "flex justify-center items-center",
@@ -60,10 +80,11 @@ export default function Navigation({ browser, calendar, notice, event, }) {
     };
     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",
@@ -83,7 +104,7 @@ const navigationTypeString = {
 function NavigationItem({ type, calendar, notice, event, }) {
     //scroll action
     const container = {
-        displays: "relative h-full overflow-hidden",
+        displays: "relative h-fit overflow-hidden duration-300",
     };
     const scrollWrapper = {
         displays: "flex flex-row md:flex-col",

package/package.json

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

package/util/createSearch.d.ts

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

package/util/createSearch.js

@@ -0,0 +1,51 @@
+import { getChoseong } from "es-hangul";
+const record = {
+    "/": ["새로운 소식", "공지사항", "서비스"],
+    "/about": ["리더십", "위원장", "총재", "언론", "학회"],
+    "/exams": [
+        "시험 종류",
+        "Cocoon",
+        "Pre-Starter",
+        "Starter",
+        "Basic",
+        "Junior",
+        "High Junior",
+        "고사장 정기시험",
+        "가정시험",
+        "토셀 랩 특별시험",
+    ],
+    "/books": ["교재", "교재몰"],
+    "https://labentry.tosel.co.kr/": ["토셀 랩", "토셀 랩 심사신청"],
+    "/dashboard/academy/students": [
+        "학생",
+        "학생 관리",
+        "학생 추가",
+        "원생 관리",
+        "원생 삭제",
+        "원생 아이디",
+    ],
+};
+export default function createSearch({ record, }) {
+    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,
+    ]);
+    const search = (query) => {
+        const entireMatch = entries.filter(([_, value]) => value.includes(query));
+        const queryChoseong = getChoseong(query);
+        const choseongIndexes = choseongEntries
+            .map((value, index) => ({ index, value }))
+            .filter(({ value: [_, value] }) => value.includes(queryChoseong))
+            .map(({ index }) => index);
+        const choseongMatch = choseongIndexes.map((index) => entries[index]);
+        return { entireMatch, choseongMatch };
+    };
+    return { search };
+}
+const { search } = createSearch({ record });
+console.log(search("관리"));

package/util/formatKoreanPhoneNumber.d.ts

@@ -0,0 +1 @@
+export default function formatKoreanPhoneNumber(phoneNumber: string): string;

package/util/formatKoreanPhoneNumber.js

@@ -0,0 +1,23 @@
+export default function formatKoreanPhoneNumber(phoneNumber) {
+    const cleanedNumber = phoneNumber.replace(/[^\d]/g, "");
+    if (/^02\d{7,8}$/.test(cleanedNumber)) {
+        return cleanedNumber.length === 9
+            ? `${cleanedNumber.slice(0, 2)}-${cleanedNumber.slice(2, 5)}-${cleanedNumber.slice(5)}`
+            : `${cleanedNumber.slice(0, 2)}-${cleanedNumber.slice(2, 6)}-${cleanedNumber.slice(6)}`;
+    }
+    else if (/^0[3-9]\d{8}$/.test(cleanedNumber)) {
+        return `${cleanedNumber.slice(0, 3)}-${cleanedNumber.slice(3, 7)}-${cleanedNumber.slice(7)}`;
+    }
+    else if (/^010\d{8}$/.test(cleanedNumber)) {
+        return `${cleanedNumber.slice(0, 3)}-${cleanedNumber.slice(3, 7)}-${cleanedNumber.slice(7)}`;
+    }
+    else if (/^1\d{4,9}$/.test(cleanedNumber)) {
+        return `${cleanedNumber.slice(0, 4)}-${cleanedNumber.slice(4)}`;
+    }
+    return phoneNumber;
+}
+// console.log(formatKoreanPhoneNumber("01012345678")); // 010-1234-5678
+// console.log(formatKoreanPhoneNumber("0212345678"));  // 02-123-4567
+// console.log(formatKoreanPhoneNumber("0311234567"));  // 031-123-4567
+// console.log(formatKoreanPhoneNumber("15881234"));    // 1588-1234
+// console.log(formatKoreanPhoneNumber("03011123456")); // 030-111-23456

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

@@ -10,6 +10,8 @@ export { default as convertDateToString } from "./convertDateToString";
 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 createSearch } from "./createSearch";
 export * from "../style/colors";
 export * from "./pattern";
 export * from "./shape";

package/util/index.js

@@ -10,6 +10,8 @@ export { default as convertDateToString } from "./convertDateToString";
 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 createSearch } from "./createSearch";
 export * from "../style/colors";
 export * from "./pattern";
 export * from "./shape";

package/version.txt

@@ -1 +1 @@
-1.0.263
+1.0.266