@edu-tosel/design 1.0.260 → 1.0.263

package/layout/template/Contact/ContactMain.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, copyToClipboard } from "../../../util";
+import Header from "./Header";
+export default function ContactMain() {
+    const container = {
+        display: "relative flex flex-col justify-start items-center",
+        sizes: "w-full h-screen",
+        text: "break-keep",
+        cursor: "cursor-default",
+    };
+    const contentsWrapper = {
+        displays: "flex flex-col justify-center items-center",
+        sizes: "w-full max-w-[1200px] h-full min-h-fit",
+        spacings: "px-2 pt-20 pb-5 md:px-5",
+    };
+    const cardWrapper = {
+        displays: "flex flex-col md:flex-row justify-center items-center",
+        sizes: "w-full h-fit",
+        spacings: "gap-5 px-0 md:mt-0 mt-5",
+    };
+    const titleWrapper = {
+        displays: "flex flex-col justify-center items-center",
+        sizes: "w-full h-fit",
+        spacings: "mb-20",
+    };
+    const titleStyling = {
+        textStyles: "font-bold text-2xl text-gray-dark text-center",
+    };
+    const subtitleStyling = {
+        textStyles: "font-medium text-sm text-gray-medium text-center",
+    };
+    const button = {
+        display: "flex justify-center items-center shrink-0",
+        sizes: "h-10 w-fit rounded-lg",
+        spacings: "px-4",
+        textStyle: "text-sm font-medium text-center",
+        cursor: "cursor-pointer",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx(Header, { isHome: true }), _jsxs("div", { className: cn(contentsWrapper), children: [_jsx("div", { className: "w-40", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/homepage/img-contact-main-small.png", alt: "" }) }), _jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(titleStyling), children: "\uBB34\uC2A8 \uBB38\uC81C\uAC00 \uC788\uB098\uC694?" }), _jsx("div", { className: cn(subtitleStyling), children: "\uB2E4\uC74C\uACFC \uAC19\uC740 \uBC29\uBC95\uC73C\uB85C \uD574\uACB0\uD574\uBCF4\uC138\uC694" })] }), _jsxs("div", { className: cn(cardWrapper), children: [_jsx(HelpCard, { title: "\uC9C0\uC5ED\uBCF8\uBD80 \uC5F0\uB77D\uCC98", subtitle: "\uC9C0\uC5ED\uBCF8\uBD80\uC5D0 \uC9C1\uC811 \uC5F0\uB77D\uD558\uACE0 \uC2F6\uB2E4\uBA74?", children: _jsxs("div", { className: "flex flex-col justify-center items-center w-full bg-white/80 rounded-lg h-fit min-h-30 mt-5 gap-5 py-5", children: [_jsx("div", { className: "w-full h-fit flex justify-center items-center text-green-dark", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "size-10", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z" }) }) }), _jsx("div", { className: cn(button, "bg-green-dark text-white hover:shadow-green hover:scale-103 duration-300"), onClick: () => {
+                                                window.location.href = "/contact/agencies";
+                                            }, children: "\uC9C0\uC5ED\uBCF8\uBD80 \uCC3E\uAE30" })] }) }), _jsx(HelpCard, { title: "\uC790\uC8FC \uBB3B\uB294 \uC9C8\uBB38", subtitle: "\uC790\uC8FC\uBB3B\uB294 \uC9C8\uBB38\uC744 \uBAA8\uC544\uBD24\uC5B4\uC694", children: _jsxs("div", { className: "flex flex-col justify-center items-center w-full bg-white/80 rounded-lg h-fit min-h-30 mt-10 gap-5 py-5", children: [_jsx("div", { className: "w-full h-fit flex justify-center items-center text-green-dark", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "size-10", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" }) }) }), _jsx("div", { className: cn(button, "bg-green-dark text-white hover:shadow-green hover:scale-103 duration-300"), onClick: () => {
+                                                window.location.href = "https://tosel-faq.notion.site/";
+                                            }, children: "\uB3C4\uC6C0\uB9D0 \uBC14\uB85C\uAC00\uAE30" })] }) }), _jsx(HelpCard, { title: "\uC9C1\uC811 \uBB38\uC758\uD558\uAE30", subtitle: "\uC774\uBA54\uC77C\uC744 \uD1B5\uD574 \uBCF8\uC0AC\uB85C \uBB38\uC758\uD560 \uC218 \uC788\uC5B4\uC694.", children: _jsxs("div", { className: "w-full h-full flex flex-col sm:flex-row md:flex-col justify-center items-center gap-5", children: [_jsxs("div", { className: "relative w-full flex flex-col  bg-white/80 rounded-lg py-2 gap-2 overflow-hidden", onClick: () => copyToClipboard("cs_tosel@tosel.co.kr", "개인 CS 이메일 주소가 복사되었습니다."), children: [_jsx("div", { className: "leading-none w-full text-center mt-2 font-bold text-green-dark", children: "\uAC1C\uC778" }), _jsx("div", { className: "leading-none w-full text-center mt-2 font-medium text-gray-medium", children: "tosel_cs@tosel.co.kr" }), _jsx("div", { className: "absolute flex justify-center items-center top-0 left-0 w-full h-full hover:bg-white/50 hover:backdrop-blur-sm duration-300 group", children: _jsx("div", { className: cn(button, "bg-green-dark text-green-light opacity-0 group-hover:opacity-100 duration-300"), children: "\uC8FC\uC18C\uBCF5\uC0AC" }) })] }), _jsxs("div", { className: "relative w-full flex flex-col  bg-white/80 rounded-lg py-2 gap-2 overflow-hidden", onClick: () => copyToClipboard("cs_academy@tosel.co.kr", "단체 CS 이메일 주소가 복사되었습니다."), children: [_jsx("div", { className: "leading-none w-full text-center mt-2 font-bold text-green-dark", children: "\uB2E8\uCCB4" }), _jsx("div", { className: "leading-none w-full text-center mt-2 font-medium text-gray-medium text-sm", children: "tosel_academy@tosel.co.kr" }), _jsx("div", { className: "absolute flex justify-center items-center top-0 left-0 w-full h-full hover:bg-white/50 hover:backdrop-blur-sm duration-300 group", children: _jsx("div", { className: cn(button, "bg-green-dark text-green-light opacity-0 group-hover:opacity-100 duration-300"), children: "\uC8FC\uC18C\uBCF5\uC0AC" }) })] })] }) })] })] })] }));
+}
+export function HelpCard({ title, subtitle, children, }) {
+    const card = {
+        display: "flex flex-col justify-center items-center",
+        sizes: "w-full md:w-60 h-90 md:rounded-lg rounded-xl",
+        backgrounds: "bg-gray-light/50",
+        hoverAction: "hover:shadow-green duration-300 hover:scale-101",
+        spacings: "p-5",
+    };
+    const titleBox = {
+        display: "flex justify-center items-center",
+        sizes: "w-full h-fit shrink-0",
+        spacings: "px-5 py-2",
+        textStyle: "font-bold text-gray-medium text-base md:text-lg text-center",
+    };
+    const subTitleBox = {
+        display: "flex justify-center items-center",
+        sizes: "w-full h-fit shrink-0",
+        spacings: "px-5 py-2",
+        textStyle: "font-medium text-gray-medium text-xs md:text-sm text-center",
+    };
+    return (_jsxs("div", { className: cn(card), children: [_jsx("div", { className: cn(titleBox), children: title }), _jsx("div", { className: cn(subTitleBox), children: subtitle }), _jsx("div", { className: "h-full w-full", children: children })] }));
+}

package/layout/template/Contact/Header.d.ts

@@ -0,0 +1,3 @@
+export default function Header({ isHome }: {
+    isHome?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/Contact/Header.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useResponsive } from "../../../hook";
+import { cn, copyToClipboard } from "../../../util";
+export default function Header({ isHome }) {
+    const isXS = useResponsive("xs");
+    const isXXS = useResponsive("xxs");
+    const container = {
+        display: "fixed flex flex-col justify-center items-center",
+        sizes: "w-full h-fit",
+        backgrounds: "bg-white/10 backdrop-blur-sm",
+        cursor: "cursor-default",
+        positions: "top-0 left-0 z-40",
+    };
+    const headWrapper = {
+        display: "flex justify-between items-center",
+        sizes: "w-full h-15 max-w-[1200px]",
+        spacings: "px-5",
+    };
+    const button = {
+        display: "flex justify-center items-center shrink-0",
+        sizes: "h-10 w-fit rounded-lg",
+        spacings: "px-4",
+        textStyle: "text-sm font-medium text-center",
+        cursor: "cursor-pointer",
+    };
+    const leftWrapper = {
+        display: "flex gap-2 justify-center items-center",
+    };
+    const rightWrapper = {
+        display: "flex gap-2",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(headWrapper), children: [_jsxs("div", { className: cn(leftWrapper), children: [_jsx("div", { className: "h-fit w-fit", children: _jsx("img", { src: "https://tosel.gcdn.ntruss.com/images/img-favicon-main.png", alt: "", className: "size-8" }) }), _jsx("div", { className: "font-medium text-lg", children: "\uACE0\uAC1D\uC13C\uD130" })] }), _jsxs("div", { className: cn(rightWrapper), children: [isXXS && (_jsx("div", { className: cn(button, "hover:bg-gray-light text-gray-medium duration-300"), onClick: () => copyToClipboard("cs_tosel@tosel.co.kr", "이메일 주소가 복사되었습니다."), children: "cs_tosel@tosel.co.kr" })), _jsx("div", { className: cn(button, "bg-gray-light text-gray-medium hover:bg-green-light hover:text-green-dark "), onClick: () => {
+                                window.location.href = isHome
+                                    ? "https://new.tosel.org"
+                                    : "../contact";
+                            }, children: isHome ? "홈페이지로" : "CS 홈으로" })] })] }) }));
+}

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

@@ -0,0 +1,7 @@
+import Main from "./ContactMain";
+import Agencies from "./ContactAgency";
+declare const Contact: {
+    Main: typeof Main;
+    Agencies: typeof Agencies;
+};
+export default Contact;

package/layout/template/Contact/index.js

@@ -0,0 +1,7 @@
+import Main from "./ContactMain";
+import Agencies from "./ContactAgency";
+const Contact = {
+    Main,
+    Agencies,
+};
+export default Contact;

package/layout/template/Gallery.js

@@ -4,10 +4,13 @@ import Tab from "./Tab";
 import { cn } from "../../util";
 export default function Gallery({ action, children, option, }) {
     const { text, background, boundary } = option ?? {};
-    const tabBox = {
-        positions: "xl:absolute xl:-bottom-18 xl:left-0 z-5",
+    const tabBox = {};
+    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",
     };
-    return (_jsxs("div", { className: "relative w-full flex", children: [_jsx(Action.Replace, { actions: action?.replaces, children: _jsx(Action.Show, { actions: action?.shows, children: children }) }), action?.tabs && (_jsx(Tab, { tabs: action?.tabs, option: {
+    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,

package/layout/template/Regexam/Banner.js

@@ -85,7 +85,7 @@ export default function Banner() {
         backgrounds: "bg-white group hover:bg-green-dark",
         other: "animate-bounce bg-white p-1 w-10 h-10 ring-1 ring-slate-900/5 shadow-lg rounded-full flex items-center justify-center",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex flex-col md:flex-row w-full max-w-6xl justify-between items-center", children: [_jsxs("div", { className: "flex flex-col w-full md:w-fit h-full shrink-0 justify-start", children: [_jsx("div", { className: cn(brandTextSub), children: "about" }), _jsx("div", { className: cn(brandTextCore), children: _jsx("img", { src: "/images/logos/logo-tosel-main.svg", alt: "", className: "h-full" }) }), _jsxs("div", { className: cn(explainer), children: ["15,000\uC5EC\uAC1C\uC758 \uD559\uAD50\uC640 \uD559\uC6D0\uC774 \uC120\uD0DD\uD55C ", _jsx("br", {}), "\uB300\uD55C\uBBFC\uAD6D \uB300\uD45C \uC601\uC5B4 \uC778\uC99D\uC2DC\uD5D8"] }), _jsxs("div", { onClick: () => (window.location.href = urlAsset.homepage("/dashboard")), className: cn(AdvertButton), children: [_jsx("div", { className: cn(buttonBackground1) }), _jsx("div", { className: cn(buttonBackground2) }), _jsx("div", { className: cn(buttonText), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] })] }), _jsx("div", { className: cn(carouselWrapper), children: _jsx(InfiniteCarousel, {}) })] }), _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", { className: "w-6 h-6 text-green-dark group-hover:text-white", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }) })] })] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex flex-col md:flex-row w-full max-w-6xl justify-between items-center", children: [_jsxs("div", { className: "flex flex-col w-full md:w-fit h-full shrink-0 justify-start", children: [_jsx("div", { className: cn(brandTextSub), children: "about" }), _jsx("div", { className: cn(brandTextCore), children: _jsx("img", { src: "/images/logos/logo-tosel-main.svg", alt: "", className: "h-full" }) }), _jsxs("div", { className: cn(explainer), children: ["29,000\uC5EC\uAC1C\uC758 \uD559\uAD50\uC640 \uD559\uC6D0\uC774 \uC120\uD0DD\uD55C ", _jsx("br", {}), "\uB300\uD55C\uBBFC\uAD6D \uB300\uD45C \uC601\uC5B4 \uC778\uC99D\uC2DC\uD5D8"] }), _jsxs("div", { onClick: () => (window.location.href = urlAsset.homepage("/dashboard")), className: cn(AdvertButton), children: [_jsx("div", { className: cn(buttonBackground1) }), _jsx("div", { className: cn(buttonBackground2) }), _jsx("div", { className: cn(buttonText), children: "\uC9C0\uAE08 \uC811\uC218\uD558\uAE30" })] })] }), _jsx("div", { className: cn(carouselWrapper), children: _jsx(InfiniteCarousel, {}) })] }), _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", { className: "w-6 h-6 text-green-dark group-hover:text-white", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }) })] })] }));
 }
 const InfiniteCarousel = () => {
     const slides = [

package/layout/template/Shelf.d.ts

@@ -1,8 +1,10 @@
 import { ShelfProps } from "../../interface/Shelf";
-declare function Shelf({ titles, debug, children }: ShelfProps<string | number>): import("react/jsx-runtime").JSX.Element;
+declare function Shelf({ titles, debug, children }: ShelfProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Shelf {
-    var Wrap: ({ className, titles, children, debug, option, }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
-    var Row: ({ titles, children, className, debug, }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
-    var Col: ({ titles, children, debug, className, }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
+    var Wrap: ({ className, titles, children, debug, option }: ShelfProps) => import("react/jsx-runtime").JSX.Element;
+    var Row: ({ titles, children, className, debug }: ShelfProps) => import("react/jsx-runtime").JSX.Element;
+    var Col: ({ titles, children, debug, className }: ShelfProps) => import("react/jsx-runtime").JSX.Element;
+    var Fourthird: ({ titles, children, debug, className }: ShelfProps) => import("react/jsx-runtime").JSX.Element;
+    var Quarter: ({ titles, children, debug, className }: ShelfProps) => import("react/jsx-runtime").JSX.Element;
 }
 export default Shelf;

package/layout/template/Shelf.js

@@ -15,18 +15,20 @@ function Shelf({ titles, debug, children }) {
             titleSize: "text-lg xl:text-2xl",
         }, children: children }));
 }
-function Wrap({ className, titles, children, debug, option, }) {
+function Wrap({ className, titles, children, debug, option }) {
     const container = {
-        displays: "flex flex-col lg:flex-row flex-wrap",
+        displays: "flex flex-wrap",
         gaps: gap[option?.gap ?? "xy"],
         className,
     };
     return (_jsx(ShelfDesign, { titles: titles, className: cn(container), option: {
             titleSize: "text-lg xl:text-2xl",
             subtitleSize: "text-sm",
+            width: "w-full",
+            isSize: true,
         }, debug: debug, children: children }));
 }
-function Row({ titles, children, className, debug, }) {
+function Row({ titles, children, className, debug }) {
     const container = {
         displays: "flex flex-col lg:flex-row",
         className: className ?? "gap-x-7.5",
@@ -35,19 +37,45 @@ function Row({ titles, children, className, debug, }) {
             titleSize: "text-lg xl:text-2xl",
             subtitleSize: "text-sm",
             isSize: true,
+            width: "w-full",
+        }, debug: debug, children: children }));
+}
+function Col({ titles, children, debug, className }) {
+    const container = {
+        displays: "flex flex-col w-full lg:flex-wrap",
+        className: className ?? "gap-y-7.5",
+    };
+    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), option: {
+            titleSize: "text-lg xl:text-2xl",
+            subtitleSize: "text-sm",
+        }, debug: debug, children: children }));
+}
+function Fourthird({ titles, children, debug, className }) {
+    const container = {
+        displays: "flex flex-col",
+        className: className ?? "gap-y-7.5",
+    };
+    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), option: {
+            titleSize: "text-lg xl:text-2xl",
+            subtitleSize: "text-sm",
+            width: "basis-[990px] flex-grow w-full",
+            height: "h-fit",
         }, debug: debug, children: children }));
 }
-function Col({ titles, children, debug, className, }) {
+function Quarter({ titles, children, debug, className }) {
     const container = {
-        displays: "flex flex-col lg:flex-wrap",
+        displays: "flex flex-col",
         className: className ?? "gap-y-7.5",
     };
     return (_jsx(ShelfDesign, { titles: titles, className: cn(container), option: {
             titleSize: "text-lg xl:text-2xl",
             subtitleSize: "text-sm",
+            width: "flex-grow basis-[450px] max-w-full min-w-[450px]",
         }, debug: debug, children: children }));
 }
 Shelf.Wrap = Wrap;
 Shelf.Row = Row;
 Shelf.Col = Col;
+Shelf.Fourthird = Fourthird;
+Shelf.Quarter = Quarter;
 export default Shelf;

package/layout/template/Tab.js

@@ -15,15 +15,15 @@ export default function Tab({ tabs, option, state, }) {
         ? state
         : useState(tabs.map((_, i) => i === 0));
     const container = {
-        className,
-        positions: "absolute",
-        displays: "hidden sm:flex xl:items-center xl:gap-2.5",
-        sizes: "w-auto ",
-        paddings: "p-2.5",
-        backgrounds: boundary ?? "bg-gray-light",
-        styles: "rounded-xl ",
+        displays: "flex shrink-0",
+        sizes: "w-full xl:w-fit h-fit",
+        spacings: "xl:mt-2.5 p-2.5 gap-2.5",
+        backgrounds: boundary ?? "bg-white/50 xl:bg-white/30",
+        styles: "rounded-0 xl:rounded-xl",
+        scrollStyling: "overflow-y-scroll scrollbar-hidden",
     };
     const button = {
+        displays: "flex shrink-0 justify-center items-center",
         styles: "rounded-md duration-500 ",
         sizes: `${heightSize[height ?? "lg"]} ${widthSize[width ?? "lg"]}`,
         font: text ?? "text-green-dark",

package/layout/template/dashboard/Header.d.ts

@@ -1,2 +1,2 @@
 import { DashboardHeaderProps } from "../../../interface";
-export declare function Header({ title, logo, notification, menu, option, }: DashboardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ title, logo, notification, menu, option, isOpen, }: DashboardHeaderProps): import("react/jsx-runtime").JSX.Element;

package/layout/template/dashboard/Header.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn, gradient } from "../../../util";
 import { useActionStore } from "../../../store";
 import Menu from "./Menu";
@@ -6,29 +6,55 @@ import { Action } from "../..";
 import Notification from "./Notification";
 import SVG from "../../../asset/SVG";
 import { Label } from "../../../widget";
-export function Header({ title, logo, notification, menu, option, }) {
+import { useState } from "react";
+import { useResponsive } from "../../../hook";
+export function Header({ title, logo, notification, menu, option, isOpen, }) {
     const { setView, setIsOwn } = useActionStore();
     const { notifications, flag, onClick } = notification;
     const { text, background, className, iconColor } = option ?? {};
+    const [isExpanded, setIsExpanded] = useState(false);
+    const toggleMenu = () => {
+        setIsExpanded(!isExpanded);
+        setView("dashboardMenu");
+    };
+    const isSM = useResponsive("sm");
     const container = {
-        positions: "fixed xl:static top-0 left-0 z-40",
-        displays: "flex items-center justify-between ",
+        positions: "fixed top-0 left-0 z-45",
+        displays: "flex items-center justify-between gap-0 xl:gap-7.5",
         sizes: "h-15 w-full",
         background: `${background ?? "bg-white"}`,
         text: `${text ?? "text-black"} `,
-        styles: "px-5 xl:px-8 2xl:px-16 box-shadow",
+        styles: "px-5 xl:px-8 2xl:px-16 shadow-main",
         className,
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? _jsx(_Fragment, { children: logo }) : _jsx("div", { className: "text-2xl", children: "TOSEL" }), _jsx("div", { className: "hidden lg:flex text-3xl font-pretendard-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsx(Action.Show, { actions: [
-                        ["notification", _jsx(Notification, { notifications: notifications })],
-                        [menu ? "menu" : false, menu && _jsx(Menu, { ...menu })],
-                    ], children: menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
-                            setIsOwn(true);
-                            return setView("menu");
-                        }, color: iconColor })) : (_jsx(Label.Button, { title: "\uB85C\uADF8\uC778", onClick: () => option?.onClick && option.onClick(), option: {
-                            width: "sm",
-                            height: "xs",
-                            background: gradient.bg.greenToRed,
-                            text: "text-white",
-                        } })) }) })] }));
+    const leftHeaderWrapper = {
+        displays: "flex flex-row justify-start items-center",
+        sizes: "w-[184px] h-fit shrink-0",
+        spacings: "gap-3",
+    };
+    const menuButton = {
+        displays: "flex mmd:hidden justify-center items-center",
+        spacings: "p-2",
+    };
+    const rightHeaderWrapper = {
+        displays: "flex flex-row justify-end sm:justify-between items-center",
+        sizes: "h-fit w-full",
+    };
+    const titleStyling = {
+        displays: "flex",
+        font: "font-pretendard-var font-bold text-2xl leading-none",
+        spacings: "pl-5",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(leftHeaderWrapper), children: [_jsx("div", { className: cn(menuButton), onClick: () => toggleMenu(), children: _jsx("div", { className: "w-6 h-6", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: [!isOpen && (_jsx("path", { id: "menu", fill: "currentColor", d: "M4.118 6.2h16a1.2 1.2 0 100-2.4h-16a1.2 1.2 0 100 2.4m16 4.6h-16a1.2 1.2 0 100 2.4h16a1.2 1.2 0 100-2.4m0 7h-16a1.2 1.2 0 100 2.4h16a1.2 1.2 0 100-2.4", "fill-rule": "evenodd" })), isOpen && (_jsx("path", { id: "close", fill: "currentColor", "fill-rule": "evenodd", d: "M13.815 12l5.651-5.651a1.2 1.2 0 00-1.697-1.698l-5.651 5.652-5.652-5.652a1.201 1.201 0 00-1.697 1.698L10.421 12l-5.652 5.651a1.202 1.202 0 00.849 2.049c.307 0 .614-.117.848-.351l5.652-5.652 5.651 5.652a1.198 1.198 0 001.697 0 1.2 1.2 0 000-1.698L13.815 12z" }))] }) }) }), logo ? _jsx(_Fragment, { children: logo }) : _jsx("div", { className: "text-2xl", children: "TOSEL" })] }), _jsxs("div", { className: cn(rightHeaderWrapper), children: [isSM && _jsx("div", { className: cn(titleStyling), children: title }), _jsx("div", { className: "relative flex gap-5.25", children: _jsx(Action.Show, { actions: [
+                                ["notification", _jsx(Notification, { notifications: notifications })],
+                                [menu ? "menu" : false, menu && _jsx(Menu, { ...menu })],
+                            ], children: menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
+                                    setIsOwn(true);
+                                    return setView("menu");
+                                }, color: iconColor })) : (_jsx(Label.Button, { title: "\uB85C\uADF8\uC778", onClick: () => option?.onClick && option.onClick(), option: {
+                                    width: "sm",
+                                    height: "xs",
+                                    background: gradient.bg.greenToRed,
+                                    text: "text-white",
+                                } })) }) })] })] }));
 }

package/layout/template/dashboard/Layout.js

@@ -5,23 +5,28 @@ import { cn } from "../../../util";
 import { useActionStore } from "../../../store";
 import Navigation from "./Navigation";
 export default function Layout({ header, navigations, children, option, }) {
-    const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useActionStore();
+    const { events, flag, setFlag, isOwn, setIsOwn, clearView } = useActionStore();
     const { title, option: headerOption, logo, notification, menu } = header;
     const { background } = option ?? {};
+    const isOpen = events.some((event) => event.event === "dashboardMenu");
     useEffect(() => {
         if (isOwn)
             return setIsOwn(false);
         return clearView();
     }, [flag]);
     const container = {
-        sizes: "min-h-screen h-screen xl:h-auto",
+        sizes: "h-screen",
         background: `${background ?? "bg-gray-light"} `,
         styles: "font-pretendard-medium",
     };
+    const spacer = {
+        displays: "flex shrink-0",
+        sizes: "w-full h-15 xl:h-22.5",
+    };
     const body = {
-        sizes: "h-full ",
-        displays: "flex gap-12 xl:gap-7.5 ",
-        paddings: "pt-15 xl:pl-2 2xl:pl-12 2xl:pr-11.25 xl:pt-7.5",
+        sizes: "h-[calc(100%-60px)] xl:h-[calc(100%-90px)]",
+        displays: "flex gap-0 xl:gap-7.5 relative",
+        paddings: "xl:px-5 2xl:pl-12 2xl:pr-11.25",
     };
-    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, notification: notification, menu: menu, option: headerOption, logo: logo }), _jsxs("div", { className: cn(body), children: [_jsx(Navigation.Container, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
+    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, notification: notification, menu: menu, option: headerOption, isOpen: isOpen, logo: logo }), _jsx("div", { className: cn(spacer) }), _jsxs("div", { className: cn(body), children: [_jsx(Navigation.Container, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
 }

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

@@ -1,5 +1,6 @@
+import { ReactNode } from "react";
 declare function Container({ children }: {
-    children: React.ReactNode;
+    children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
 declare const Navigation: {
     Container: typeof Container;

package/layout/template/dashboard/Navigation.js

@@ -1,10 +1,27 @@
 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, }) {
     const container = {
-        positions: "fixed xl:static bottom-0 left-0 z-40",
-        displays: "flex flex-row xl:flex-col",
-        sizes: "w-full xl:w-auto",
+        positions: "absolute mmd:relative top-0 left-0 shrink-0 mmd:flex ",
+        displays: "flex-col",
+        spacings: "z-40",
+        sizes: showAction?.isVisible
+            ? "w-[204px] h-full"
+            : "w-0 overflow-hidden h-full",
+        animations: "duration-300",
+        colors: "bg-white/50 mmd:bg-white/0 backdrop-blur shadow-main mmd:shadow-none",
     };
     return (_jsxs("div", { className: cn(container), children: [children, _jsx(Copyright, {})] }));
 }

package/layout/template/dashboard/buttonClassNames.js

@@ -5,8 +5,8 @@ const buttonClassNames = (href, nowPath, color) => {
     const { isDark } = useActionStore();
     const [bg, [text, selectedText]] = color ?? ["white", ["white", "black"]];
     const container = {
-        displays: "flex flex-row items-center justify-center xl:justify-start gap-2.5",
-        sizes: " w-full xl:w-51 h-11 ",
+        displays: "flex flex-row items-center justify-start gap-2.5",
+        sizes: " w-full xl:w-51 h-11",
         styles: "xl:rounded-lg xl:pl-5 font-pretendard-bold",
     };
     const toggle = checkPathMatch(href, nowPath)

package/layout/template/dashboard/style.js

@@ -1,8 +1,9 @@
 import { checkPathMatch, cn } from "../../../util";
 const navigatorStyle = ({ href, nowPath, background = "bg-white", text = "text-white", }) => {
     const style = {
-        displays: "flex flex-row items-center justify-center xl:justify-start gap-2.5",
+        displays: "flex flex-row items-center justify-start gap-2.5",
         sizes: " w-full xl:w-51 h-11 ",
+        spacings: "pl-5 xl:p-0",
         styles: "xl:rounded-lg xl:pl-5 font-pretendard-bold",
         texts: checkPathMatch(href, nowPath)
             ? [background, text].join(" ")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.260",
+  "version": "1.0.263",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -19,6 +19,7 @@
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.1",
     "dayjs": "^1.11.12",
+    "es-hangul": "^2.2.4",
     "gsap": "^3.12.5",
     "moment-timezone": "^0.5.45",
     "react": "^18.2.0",

package/tailwind.config.ts

@@ -75,7 +75,6 @@ export default {
           to: { width: "0%" },
         },
       },
-
       animation: {
         grow: "grow 0.2s ease-in-out forwards",
         shrink: "shrink 0.2s ease-in-out forwards",
@@ -431,6 +430,7 @@ export default {
       },
       scale: {
         101: "1.01",
+        103: "1.03",
         110: "1.1",
         120: "1.2",
         200: "2",
@@ -681,6 +681,18 @@ export default {
             "-ms-overflow-style": "none", // For Internet Explorer and Edge
             "scrollbar-width": "none", // For Firefox
           },
+          ".scrollbar-custom": {
+            /* Fully custom scrollbar style */
+            "&::-webkit-scrollbar": {
+              width: "8px",
+            },
+
+            "&::-webkit-scrollbar-thumb": {
+              backgroundColor: "#BABABA",
+              borderRadius: "10px",
+              margin: "4px",
+            },
+          },
           ".page-break": {
             "@media print": {
               "page-break-before": "always",

package/util/copyToClipboard.d.ts

@@ -1 +1 @@
-export default function copyToClipboard(value: string | undefined): void;
+export default function copyToClipboard(value: string | undefined, customMessage?: string): void;

package/util/copyToClipboard.js

@@ -1,16 +1,17 @@
-export default function copyToClipboard(value) {
+export default function copyToClipboard(value, customMessage) {
     const textToCopy = value ?? "";
     if (textToCopy) {
         navigator.clipboard
             .writeText(textToCopy)
             .then(() => {
-            alert(`클립보드에 복사되었습니다.`); // 복사된 값을 alert로 출력
+            const message = customMessage ?? `클립보드에 복사되었습니다: ${textToCopy}`;
+            alert(message); // 복사 성공 메시지 출력
         })
             .catch((err) => {
             console.error("복사에 실패했습니다:", err);
         });
     }
     else {
-        alert("서비스 준비 중입니다."); // 값이 없을 경우 alert로 알림
+        alert("서비스 준비 중입니다."); // 값이 없을 경우 기본 메시지 출력
     }
 }

package/util/formatPhoneNumberToE164.d.ts

@@ -0,0 +1 @@
+export default function formatPhoneNumberToE164(phoneNumber: string, countryCode?: string): string;

package/util/formatPhoneNumberToE164.js

@@ -0,0 +1,18 @@
+export default function formatPhoneNumberToE164(phoneNumber, countryCode = "KR") {
+    const countryCodes = {
+        KR: "+82",
+        US: "+1",
+        JP: "+81",
+        CN: "+86",
+    };
+    const defaultAreaCodes = {
+        KR: "0",
+    };
+    const cleanedNumber = phoneNumber.replace(/[^\d]/g, "");
+    const countryCodePrefix = countryCodes[countryCode] || "+82";
+    const defaultAreaCode = defaultAreaCodes[countryCode] || "0";
+    const normalizedNumber = cleanedNumber.startsWith(defaultAreaCode)
+        ? cleanedNumber.slice(defaultAreaCode.length)
+        : cleanedNumber;
+    return `${countryCodePrefix}${normalizedNumber}`;
+}

package/util/index.d.ts

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

package/util/index.js

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

package/version.txt

@@ -1 +1 @@
-1.0.260
+1.0.263