@edu-tosel/design 1.0.261 → 1.0.263

package/board/design/Board.design.js

@@ -15,25 +15,26 @@ const heightSize = {
     xs: "h-20",
     sm: "h-24",
     md: "h-28",
-    lg: "h-full xl:h-171.5 xl:min-h-0",
-    xl: "h-full xl:h-171.5 xl:min-h-0",
+    lg: "h-full xl:h-full",
+    xl: "h-full xl:h-full",
     "2xl": "h-40",
-    full: "min-h-screen h-full",
+    full: "min-h-auto h-full",
     auto: "h-auto",
 };
 export function Board({ children, action, option, debug, buttons, }) {
     const { shows } = action ?? {};
     const { width, height, isRounded, className, noMobile, background, boundary, } = option ?? {};
     const container = {
-        positions: "relative",
+        positions: "relative flex-col justify-start",
         width: widthSize[width ?? "full"],
         noMobile: noMobile && "hidden xl:block",
         debug: debug && isDebug(`border-2  border-${debug}`),
+        height: "h-[calc(100%-56px)]",
     };
     const body = {
         positions: "relative",
         sizes: `w-full ${heightSize[height ?? "xl"]}`,
-        background: `${background ?? "bg-white"} `,
+        background: `${background ?? "bg-white/50"} `,
         styles: "text-black overflow-hidden",
         rounded: `rounded-none ${isRounded ? "xl:rounded-xl" : ""}`,
         boundary: boundary ?? "border-0",

package/board/design/Header.design.js

@@ -6,17 +6,13 @@ export default function BoardHeader({ titles, tag, option, }) {
     const { selects, inputs } = tag ?? {};
     const { background, text, boundary } = option ?? {};
     const container = {
-        positions: "fixed top-15 xl:top-0 left-0 z-30 xl:relative flex items-center",
+        positions: "top-0 left-0 z-30 relative flex items-center",
         paddings: "px-7.5",
         backgrounds: background ?? "bg-white",
         texts: text ?? "text-black",
-        sizes: "w-full h-19",
+        sizes: "w-full h-15",
         boundary: boundary ?? "border-b-2 border-green-dark ",
         rounded: "xl:rounded-t-xl",
     };
-    const block = {
-        displays: "xl:hidden block ",
-        sizes: "w-full h-19",
-    };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [icon && _jsx("img", { src: icon, className: "fill-blue-500" }), _jsx("div", { className: `text-2xl font-pretendard-bold ${titleColor}`, children: title })] }), _jsxs("div", { className: "relative flex items-center ml-auto gap-4", children: [selects?.map(({ selectOptions, option, state }) => (_jsx(Select, { option: option, selectOptions: selectOptions, state: state }, title))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }), _jsx("div", { className: cn(block) })] }));
+    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)))] })] }) }));
 }

package/board/template/CanvasBoard.js

@@ -4,11 +4,14 @@ import { cn } from "../../util";
 import { Board } from "../design/Board.design";
 import BoardHeader from "../design/Header.design";
 export default function CanvasBoard({ header, children, action, buttons, option, }) {
+    const scrollWrapper = {
+        sizes: "w-full",
+    };
     const body = {
         displays: "flex flex-col lg:flex-row lg:flex-wrap gap-7.5",
-        sizes: "h-full",
-        paddings: `${header ? "pb-55 xl:pb-25" : "pb-36 xl:pb-6"} px-2 xs:px-4 xl:px-7.5 pt-2 xs:pt-4 xl:pt-7.5`,
-        styles: "overflow-y-scroll",
+        sizes: "h-[calc(100%-60px)]",
+        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",
         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/card/design/NavCard.design.js

@@ -9,8 +9,9 @@ export default function NavCardDesign({ titles, option }) {
     const flag = !buttonInLay && width === "xl";
     const textBox = {
         container: {
-            positons: `absolute z-10 ${flag ? "left-12 top-0" : "top-7.5 left-7.5"}`,
+            positons: `absolute z-10 top-0 left-0  ${flag ? "p-0 pl-12" : "p-7.5"}`,
             sizes: flag && "h-full",
+            width: "w-full",
             displays: `flex flex-col ${flag ? "gap-7.5 justify-center" : "gap-2.5"}`,
             styles: `${color ?? "text-gray-dim"}`,
         },
@@ -30,7 +31,7 @@ export default function NavCardDesign({ titles, option }) {
         className: image?.className,
     };
     return (_jsxs(Card, { option: option, children: [_jsxs("div", { className: cn(textBox.container), children: [_jsx("div", { className: cn(textBox.title), children: title }), _jsx(LineBreaks, { className: cn(textBox.subtitle), texts: subtitle ?? "" })] }), buttonInLay && (_jsx(Label.Button, { title: buttonInLay.title, onClick: buttonInLay.onClick, option: {
-                    className: "absolute bottom-7.5 left-7.5",
+                    className: "absolute bottom-7.5 right-7.5",
                     disabled: buttonInLay.disabled,
                     background: buttonInLay?.background,
                     text: buttonInLay?.text,

package/card/design/StickCard.design.d.ts

@@ -0,0 +1,2 @@
+import { StickCardProps } from "../../interface";
+export default function StickCardDesign({ titles, buttonInLay, option, }: StickCardProps): import("react/jsx-runtime").JSX.Element;

package/card/design/StickCard.design.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
+import { useResponsive } from "../../hook";
+export default function StickCardDesign({ titles, buttonInLay, option, }) {
+    const { title, subtitle, color, titleColor, subtitleColor } = titles;
+    const { background } = option ?? {};
+    const isXS = useResponsive("xs");
+    const container = {
+        display: "flex justify-between items-center ",
+        sizes: "w-full h-15 rounded-xl",
+        backgrounds: background ?? "bg-white",
+        shadow: "shadow-main",
+        spacings: "px-2 md:px-5",
+        cursor: "cursor-default",
+    };
+    const titleWrapper = {
+        display: "flex flex-shrink justify-start items-center",
+        sizes: "w-full h-full",
+        spacings: "gap-2 md:gap-5",
+        //debug: "bg-green-500",
+    };
+    const titleText = {
+        sizes: "w-fit shrink-0",
+        mainstyle: "font-bold",
+        optional: titleColor ?? "text-green-dark",
+    };
+    const subtitleText = {
+        sizes: "w-full",
+        mainstyle: "font-medium truncate",
+        optional: subtitleColor ?? "text-gray-dark",
+    };
+    const buttonStyles = {
+        display: "flex justify-start items-center",
+        sizes: "w-fit h-8 rounded-md shrink-0 px-4",
+        textStyles: "text-center text-xs text-white",
+        backgrounds: buttonInLay?.background ?? "bg-green-dark",
+        cursor: "cursor-pointer",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsx("div", { className: cn(titleText), children: title }), isXS && _jsx("div", { className: cn(subtitleText), children: subtitle })] }), buttonInLay && (_jsx("div", { className: cn(buttonStyles), children: buttonInLay.title }))] }));
+}

package/card/index.d.ts

@@ -9,3 +9,4 @@ export { default as ProgressCard } from "./template/ProgressCard";
 export { default as RollCard } from "./template/RollCard";
 export { default as TableCard } from "./template/TableCard";
 export { default as SubmitCard } from "./template/SubmitCard";
+export { default as StickCard } from "./template/StickCard";

package/card/index.js

@@ -9,3 +9,4 @@ export { default as ProgressCard } from "./template/ProgressCard";
 export { default as RollCard } from "./template/RollCard";
 export { default as TableCard } from "./template/TableCard";
 export { default as SubmitCard } from "./template/SubmitCard";
+export { default as StickCard } from "./template/StickCard";

package/card/template/NavCard.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import NavCardDesign from "../design/NavCard.design";
+import { StickCard } from "..";
 function Banner({ titles, option }) {
     return (_jsx(NavCardDesign, { titles: titles, option: {
             ...option,
@@ -41,7 +42,7 @@ function BannerAndButtonInLay({ banner, buttonInLay, }) {
         ...buttonInLay,
         option: { ...buttonInLay.option, noShadow: true },
     };
-    return (_jsxs("div", { className: "flex w-full", children: [_jsx("div", { className: "box-shadow rounded-xl w-full", children: _jsx(Banner, { ...bannerProps }) }), _jsx("div", { className: "box-shadow rounded-xl", children: _jsx(ButtonInLay, { ...buttonInLayProps }) })] }));
+    return (_jsxs("div", { className: "flex md:flex-row flex-col w-full", children: [_jsx("div", { className: "rounded-xl w-full", children: _jsx(Banner, { ...bannerProps }) }), _jsx("div", { className: "rounded-xl md:block hidden", children: _jsx(ButtonInLay, { ...buttonInLayProps }) }), _jsx("div", { className: "rounded-xl block md:hidden", children: _jsx(StickCard, { buttonInLay: buttonInLay.buttonInLay, titles: buttonInLay.titles, option: buttonInLay.option }) })] }));
 }
 const NavCard = {
     Banner,

package/card/template/ProgressCard/Large.js

@@ -16,9 +16,14 @@ const text = {
     blue: "text-blue-navy",
 };
 export default function ProgressCardLG({ titles, checks, displays, theme, option, }) {
+    const contentsWrapper = {
+        displays: "flex flex-col justify-center items-center",
+        sizes: "w-full h-full",
+        spacings: "gap-5",
+    };
     const progressBox = {
-        positions: "absolute top-7.5 left-7.5",
-        displays: "hidden lg:flex",
+        positions: "px-5 xl:p-0 xl:absolute top-7.5 left-7.5",
+        displays: "hidden sm:flex justify-start items-center",
         sizes: "w-150 h-19",
     };
     const stepBox = (flag) => ({
@@ -29,16 +34,16 @@ export default function ProgressCardLG({ titles, checks, displays, theme, option
         texts: flag ? "text-gray-dark" : "text-gray-medium",
     });
     const titleBox = {
-        positions: "absolute top-7.5 md:top-12 right-4 md:right-12",
-        displays: "flex flex-col items-end gap-y-3",
+        positions: " xl:absolute top-7.5 md:top-12 right-4 md:right-12",
+        displays: "flex flex-col sm:flex-row gap-x-5 xl:flex-col items-center xl:items-end gap-y-3",
     };
     const occupied = Math.round((checks.filter((value) => !!value).length / displays.length) * 100);
-    return (_jsxs(CardDesign, { option: {
+    return (_jsx(CardDesign, { option: {
             ...option,
-            width: "3xl",
+            width: "full",
             height: "2xs",
-        }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title }, index) => (_jsxs("div", { className: cn(stepBox(checks[index])), children: [_jsx("div", { children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: theme })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-xl leading-none font-pretendard-bold ${text[theme ?? "green"]}`, children: titles.title }), _jsxs("div", { className: "flex gap-x-3", children: [_jsx("div", { className: "text-base leading-none", children: titles.subtitle }), titles && titles.link && (_jsx("div", { onClick: () => {
-                                    if (titles.link)
-                                        window.location.href = titles.link.path;
-                                }, className: "text-base leading-none underline text-gray-medium", children: titles.link.title }))] })] }), _jsx("div", { className: "absolute bottom-0 left-0 bg-gray-light w-full h-2.5", children: _jsx("div", { className: `h-full ${widthSizes[occupied]} ${bg[theme ?? "green"]}` }) })] }));
+        }, children: _jsxs("div", { className: cn(contentsWrapper), children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title }, index) => (_jsxs("div", { className: cn(stepBox(checks[index])), children: [_jsx("div", { children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: theme })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-xl leading-none font-pretendard-bold ${text[theme ?? "green"]}`, children: titles.title }), _jsxs("div", { className: "flex gap-x-3", children: [_jsx("div", { className: "text-base leading-none", children: titles.subtitle }), titles && titles.link && (_jsx("div", { onClick: () => {
+                                        if (titles.link)
+                                            window.location.href = titles.link.path;
+                                    }, className: "text-base leading-none underline text-gray-medium", children: titles.link.title }))] })] }), _jsx("div", { className: "absolute bottom-0 left-0 bg-gray-light w-full h-2.5", children: _jsx("div", { className: `h-full ${widthSizes[occupied]} ${bg[theme ?? "green"]}` }) })] }) }));
 }

package/card/template/StickCard.d.ts

@@ -0,0 +1,3 @@
+import { StickCardProps } from "./../../interface";
+declare function CustomCard(props: StickCardProps): import("react/jsx-runtime").JSX.Element;
+export default CustomCard;

package/card/template/StickCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import StickCardDesign from "../design/StickCard.design";
+function CustomCard(props) {
+    return _jsx(StickCardDesign, { ...props });
+}
+export default CustomCard;

package/hook/index.d.ts

@@ -6,3 +6,4 @@ export { default as useScroll } from "./useScroll";
 export { default as useSmoothScroll } from "./useSmoothScroll";
 export { default as useVisibilityObserver } from "./useVisibilityObserver";
 export { default as usePageLoaded } from "./usePageLoaded";
+export { default as useBussinessHours } from "./useBussinessHours";

package/hook/index.js

@@ -6,3 +6,4 @@ export { default as useScroll } from "./useScroll";
 export { default as useSmoothScroll } from "./useSmoothScroll";
 export { default as useVisibilityObserver } from "./useVisibilityObserver";
 export { default as usePageLoaded } from "./usePageLoaded";
+export { default as useBussinessHours } from "./useBussinessHours";

package/hook/useBussinessHours.d.ts

@@ -0,0 +1,2 @@
+declare function useBusinessHours(): boolean;
+export default useBusinessHours;

package/hook/useBussinessHours.js

@@ -0,0 +1,26 @@
+import { useState, useEffect } from "react";
+function useBusinessHours() {
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+        function checkBusinessHours() {
+            // 한국 표준시 (KST) 기준 현재 시간 가져오기
+            const now = new Date();
+            const kstTime = new Date(now.toLocaleString("en-US", { timeZone: "Asia/Seoul" }));
+            const dayOfWeek = kstTime.getDay(); // 0: 일요일, 1: 월요일, ..., 6: 토요일
+            const hour = kstTime.getHours(); // 0 - 23 시
+            const isCurrentlyOpen = dayOfWeek >= 1 && dayOfWeek <= 5 && hour >= 10 && hour < 17;
+            console.log("현재 KST:", kstTime.toString());
+            console.log("요일 (0=일요일):", dayOfWeek);
+            console.log("시간 (0-23):", hour);
+            console.log("영업 여부:", isCurrentlyOpen);
+            setIsOpen(isCurrentlyOpen);
+        }
+        // 처음에 한 번 실행하고, 1분마다 체크
+        checkBusinessHours();
+        const intervalId = setInterval(checkBusinessHours, 60000);
+        // 컴포넌트 언마운트 시 인터벌 정리
+        return () => clearInterval(intervalId);
+    }, []);
+    return isOpen;
+}
+export default useBusinessHours;

package/interface/Card.d.ts

@@ -6,6 +6,7 @@ import { ButtonWidgetOption, SelectSwitchWidgetOption, SelectToggleWidgetOption
 import { ReactNode } from "react";
 import { ActionProps } from "./Action";
 import { LabelWidget } from "./widget";
+import { Level } from "../_test/interface";
 interface CardOption {
     className?: string;
     boundary?: string;
@@ -79,6 +80,12 @@ export interface NavCardProps extends Omit<CardProps, "children"> {
         image?: NavCardImage;
     };
 }
+export interface StickCardProps {
+    titles: Titles;
+    level?: Level;
+    buttonInLay?: ButtonInLay;
+    option?: CardOption;
+}
 export interface NavCardBannerProps extends NavCardProps {
 }
 export interface NavCardButtonProps extends NavCardProps {

package/interface/Layout.d.ts

@@ -33,6 +33,7 @@ export interface DashboardHeaderProps {
     logo?: ReactNode;
     notification: NotificationProps;
     menu?: MenuProps;
+    isOpen?: boolean;
     option?: {
         onClick?: OnClick;
         background?: string;

package/interface/Shelf.d.ts

@@ -1,15 +1,15 @@
 import { Button, Titles } from "./Property";
 import { ActionProps } from "./Action";
-interface Option<T> {
+interface Option {
     titleSize?: string;
     subtitleSize?: string;
     overflowScroll?: boolean;
-    width?: T;
-    height?: number;
+    width?: string;
+    height?: string;
     gap?: "xy" | "x" | "y" | "none";
     isSize?: boolean;
 }
-export interface ShelfProps<T> {
+export interface ShelfProps {
     children: React.ReactNode;
     action?: ActionProps & {
         tabs?: Button[];
@@ -17,6 +17,6 @@ export interface ShelfProps<T> {
     titles?: Titles;
     debug?: string;
     className?: string;
-    option?: Option<T>;
+    option?: Option;
 }
 export {};

package/layout/design/Shelf.design.d.ts

@@ -1,2 +1,2 @@
 import { ShelfProps } from "../../interface";
-export default function Shelf<T extends string | number>({ children, className, option, titles, debug, }: ShelfProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function Shelf({ children, className, option, titles, debug, }: ShelfProps): import("react/jsx-runtime").JSX.Element;

package/layout/design/Shelf.design.js

@@ -3,10 +3,12 @@ import { LineBreaks } from "../../text";
 import { cn, isDebug } from "../../util";
 export default function Shelf({ children, className, option, titles, debug, }) {
     const { title, titleColor } = titles ?? {};
-    const { titleSize, subtitleSize, isSize } = option ?? {};
+    const { titleSize, subtitleSize, isSize, width, height } = option ?? {};
     const container = {
         displays: "flex flex-col gap-6",
-        sizes: isSize && "w-full h-full lg:h-auto",
+        optionHeight: width ?? "w-full",
+        optionWidth: height ?? "h-fit",
+        sizes: isSize && "w-full h-fit",
         debug: debug && isDebug(`border-2  ${debug}`),
     };
     const titleBox = {
@@ -21,7 +23,7 @@ export default function Shelf({ children, className, option, titles, debug, }) {
         },
     };
     const childrenBox = {
-        sizes: "w-full h-full",
+        sizes: "w-full h-fit",
         className,
     };
     return (_jsxs("div", { className: cn(container), children: [titles && (_jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.title), children: title }), _jsx(LineBreaks, { className: cn(titleBox.subtitle), texts: titles?.subtitle })] })), _jsx("div", { className: cn(childrenBox), children: children })] }));

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

@@ -0,0 +1,13 @@
+export interface RegionalInfo {
+    headquarterName: string;
+    assignedCities: string[];
+}
+export interface AgencyInfoProps {
+    manager: string;
+    positionTitle?: string;
+    managerCode?: string;
+    phoneNumber: string;
+    officeAddress: string;
+    regions: RegionalInfo[];
+}
+export declare const exampleAgencyInfo: AgencyInfoProps;

package/layout/template/Contact/Contact.js

@@ -0,0 +1,16 @@
+//예시데이터
+export const exampleAgencyInfo = {
+    manager: "John Doe",
+    phoneNumber: "010-1234-5678",
+    officeAddress: "123 Gangnam-daero, Gangnam-gu, Seoul, Korea",
+    regions: [
+        {
+            headquarterName: "Seoul HQ",
+            assignedCities: ["Seoul", "Incheon"],
+        },
+        {
+            headquarterName: "Busan HQ",
+            assignedCities: ["Busan", "Ulsan"],
+        },
+    ],
+};

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

@@ -0,0 +1,7 @@
+import { AgencyInfoProps } from "./Contact";
+interface AgencyListProps {
+    agencies: AgencyInfoProps[];
+}
+export default function ContactAgencies({ agencies }: AgencyListProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgencyList({ agencies }: AgencyListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Contact/ContactAgency.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, formatMobileNum, copyToClipboard } from "../../../util";
+import Header from "./Header";
+import { useResponsive, useBussinessHours } from "../../../hook";
+import { useState } from "react";
+import { getChoseong } from "es-hangul";
+import Action from "../Action";
+export default function ContactAgencies({ agencies }) {
+    const isXXXS = useResponsive("xxxs");
+    const isOpen = useBussinessHours();
+    // const isOpen = true;
+    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-start items-center",
+        sizes: "w-full max-w-[1200px] h-full min-h-fit",
+        spacings: "px-2 pt-20 pb-5 md:px-5",
+    };
+    const titleWrapper = {
+        displays: "flex flex-col justify-center items-center",
+        sizes: "w-full h-fit",
+        spacings: "mb-10",
+    };
+    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 infoBox = {
+        displays: "relative flex flex-col justify-center items-center overflow-hidden",
+        sizes: "w-fit h-fit rounded-lg",
+        spacings: "gap-2 py-5 px-8 my-5",
+        textStyles: "font-medium text-lg",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx(Header, {}), _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: "\uC9C0\uC5ED\uBCF8\uBD80 \uB2F4\uB2F9\uC790 \uBC0F \uC5F0\uB77D\uCC98" }), _jsxs("div", { className: cn(subtitleStyling), children: ["\uC9C0\uC5ED\uBCC4 \uBCF8\uBD80\uC815\uBCF4\uB97C \uCC3E\uC544\uBCF4\uC138\uC694 ", _jsx("br", {}), " \uCE5C\uC808\uD558\uAC8C \uB3C4\uC640\uB4DC\uB9B4\uAC8C\uC694"] }), isOpen ? (_jsxs("div", { className: cn(infoBox, " text-green-dark"), children: [_jsx("div", { className: "absolute top-0 left-0 w-full h-full animate-pulse bg-green-light z-0" }), _jsxs("div", { className: "w-full text-xs flex flex-row gap-2 justify-center z-10", children: [_jsx("span", { children: "\uC0C1\uB2F4 \uAC00\uB2A5\uD55C \uC2DC\uAC04\uC774\uC5D0\uC694" }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", className: "size-4", children: _jsx("path", { "fill-rule": "evenodd", d: "M1 8c0-3.43 3.262-6 7-6s7 2.57 7 6-3.262 6-7 6c-.423 0-.838-.032-1.241-.094-.9.574-1.941.948-3.06 1.06a.75.75 0 0 1-.713-1.14c.232-.378.395-.804.469-1.26C1.979 11.486 1 9.86 1 8Z", "clip-rule": "evenodd" }) })] }), _jsxs("div", { className: "flex flex-col xxxs:flex-row justify-center items-center gap-2 z-10", children: [_jsx("div", { children: "\uC6D4 ~ \uAE08" }), isXXXS && _jsx("div", { children: "|" }), _jsx("div", { children: "10\uC2DC ~ 17\uC2DC" })] })] })) : (_jsxs("div", { className: cn(infoBox, "bg-gray-dark text-gray-light"), children: [_jsxs("div", { className: "w-full text-xs flex flex-row gap-2", children: [_jsx("span", { children: "\uC9C0\uAE08\uC740 \uC0C1\uB2F4\uC2DC\uAC04\uC774 \uC544\uB2C8\uC5D0\uC694." }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", fill: "currentColor", className: "size-4", children: _jsx("path", { d: "M14.438 10.148c.19-.425-.321-.787-.748-.601A5.5 5.5 0 0 1 6.453 2.31c.186-.427-.176-.938-.6-.748a6.501 6.501 0 1 0 8.585 8.586Z" }) })] }), _jsxs("div", { className: "flex flex-col xxxs:flex-row justify-center items-center gap-2", children: [_jsx("div", { children: "\uC6D4 ~ \uAE08" }), isXXXS && _jsx("div", { children: "|" }), _jsx("div", { children: "10\uC2DC ~ 17\uC2DC" })] })] }))] }), _jsx(AgencyList, { agencies: agencies })] })] }));
+}
+export function AgencyList({ agencies }) {
+    const [searchTerm, setSearchTerm] = useState(""); // 검색어 상태
+    // 한글을 포함한 검색어로 필터링하는 함수
+    const filterAgencies = (agencies, searchTerm) => {
+        const normalizeText = (text) => {
+            return text.replace(/\s+/g, "").toLowerCase(); // 띄어쓰기 제거 및 소문자 변환
+        };
+        10;
+        const isHangul = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(searchTerm); // 검색어에 한글 포함 여부 체크
+        const normalizedSearchTerm = normalizeText(searchTerm); // 입력값 정규화
+        const normalizedSearchChoseong = isHangul
+            ? getChoseong(searchTerm).toLowerCase() // 초성 정규화
+            : normalizedSearchTerm;
+        // 1단계: 정확한 일치 또는 부분 문자열 검색
+        const exactMatchFilter = agencies.filter((agency) => {
+            const managerMatch = normalizeText(agency.manager).includes(normalizedSearchTerm);
+            const regionMatch = agency.regions.some((region) => {
+                const headquarterMatch = normalizeText(region.headquarterName).includes(normalizedSearchTerm);
+                const cityMatch = region.assignedCities.some((regionName) => normalizeText(regionName).includes(normalizedSearchTerm));
+                return headquarterMatch || cityMatch;
+            });
+            return managerMatch || regionMatch;
+        });
+        // 2단계: 초성 또는 정규화된 일반 검색 (1단계 결과가 없는 경우 실행)
+        if (exactMatchFilter.length > 0) {
+            return exactMatchFilter;
+        }
+        return agencies.filter((agency) => {
+            const managerMatch = isHangul
+                ? getChoseong(agency.manager)
+                    .toLowerCase()
+                    .includes(normalizedSearchChoseong)
+                : normalizeText(agency.manager).includes(normalizedSearchTerm);
+            const regionMatch = agency.regions.some((region) => {
+                const headquarterMatch = isHangul
+                    ? getChoseong(region.headquarterName)
+                        .toLowerCase()
+                        .includes(normalizedSearchChoseong)
+                    : normalizeText(region.headquarterName).includes(normalizedSearchTerm);
+                const cityMatch = region.assignedCities.some((regionName) => isHangul
+                    ? getChoseong(regionName)
+                        .toLowerCase()
+                        .includes(normalizedSearchChoseong)
+                    : normalizeText(regionName).includes(normalizedSearchTerm));
+                return headquarterMatch || cityMatch;
+            });
+            return managerMatch || regionMatch;
+        });
+    };
+    const handleKeyDown = (event) => {
+        const isComposing = event.nativeEvent.isComposing; // IME 입력 상태 확인
+        if (!isComposing && event.key === "Enter") {
+            console.log("Enter 키 입력됨");
+            event.currentTarget.blur(); // 검색창 포커스 해제
+        }
+    };
+    const filteredAgencies = filterAgencies(agencies, searchTerm);
+    //결과없음 이미지
+    const noResultWrapper = {
+        displays: "flex flex-col justify-center items-center",
+        sizes: "w-full h-fit",
+    };
+    const noResultImg = {
+        spacings: "p-10",
+        sizes: "w-full max-w-80",
+    };
+    const container = {
+        displays: "flex flex-col justify-start items-center",
+        sizes: "w-full h-fit",
+        spacings: "gap-2",
+    };
+    const inputBoxWrapper = {
+        displays: "relative flex flex-row w-full justify-center items-center",
+        sizes: "w-full h-fit",
+        spacings: "px-2",
+    };
+    const inputBox = {
+        sizes: "w-full max-w-100 rounded-md",
+        formattedStyle: "outline-none",
+        backgrounds: "p-4 focus:border-white border-2 border-gray-300  ",
+        placeHolder: "지역 / 본부장명 검색",
+        animation: "focus:shadow-green duration-300",
+    };
+    const chartWrapper = {
+        displays: "grid grid-cols-1 md:grid-cols-2",
+        sizes: "w-full h-fit",
+        spacings: "px-2 py-5 gap-2 md:gap-5",
+    };
+    const agencyCardWrapper = {
+        displays: "relative flex flex-col justify-start items-center",
+        sizes: "w-full h-fit md:h-90 rounded-lg",
+        spacings: "p-5",
+        backgrounds: "bg-gray-light/50",
+        animations: "hover:scale-101 duration-300 hover:shadow-green",
+    };
+    const tag = {
+        displays: "flex justify-center items-center",
+        sizes: "h-fit w-fit rounded-sm",
+        spacings: "px-1",
+        textStyles: "font-medium text-sm",
+    };
+    const cardHeader = {
+        displays: "flex flex-col justify-start items-center",
+        sizes: "w-full h-fit ",
+        textStyles: "font-medium text-gray-medium text-lg",
+    };
+    const actionButton = {
+        displays: "flex items-center justify-center",
+        spacings: "py-2 px-3 gap-2",
+        sizes: "w-full rounded-lg md:w-fit",
+        textStyles: "font-medium text-center",
+        basicColor: "bg-none text-gray-medium",
+        boundaries: "border-1 border-gray-medium/30",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(inputBoxWrapper), children: _jsxs("div", { className: "flex justify-center items-center w-full max-w-100 relative", children: [_jsx("input", { type: "text", placeholder: inputBox.placeHolder, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onKeyDown: handleKeyDown, className: cn(inputBox) }), _jsx("div", { className: "absolute top-0 right-0 flex justify-end items-center h-full mr-4 text-green-light", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "size-6", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" }) }) })] }) }), _jsx(Action.Replace, { actions: [
+                    [
+                        filteredAgencies.length === 0,
+                        _jsxs("div", { className: cn(noResultWrapper), children: [_jsx("div", { className: cn(noResultImg), children: _jsx("img", { src: "/images/legacy/img-legacy-noresult.png", alt: "\uACB0\uACFC \uC5C6\uC74C" }) }), _jsx("div", { className: "text-sm text-center w-full font-medium", children: "\uC774\uB7F0, \uAC80\uC0C9\uACB0\uACFC\uAC00 \uC5C6\uC5B4\uC694" })] }),
+                    ],
+                ], children: _jsx("div", { className: cn(chartWrapper), children: filteredAgencies.map((e, index) => (_jsxs("div", { className: cn(agencyCardWrapper), children: [_jsxs("div", { className: cn(cardHeader), children: [_jsxs("div", { className: "flex flex-col xxs:flex-row justify-start items-start xxs:justify-between xxs:items-center w-full", children: [_jsxs("div", { className: "w-full flex gap-2 items-end", children: [_jsx("span", { className: "text-xl w-fit text-gray-dark font-semibold", children: e.manager }), e.positionTitle ?? ""] }), _jsx("div", { className: "flex md:flex-row flex-wrap gap-2 w-fit shrink-0", children: e.regions.map((f, index) => (_jsx("div", { className: cn(tag, "bg-gray-medium/50 text-white "), children: f.headquarterName }, index))) })] }), _jsxs("div", { className: "flex flex-col justify-start items-center w-full gap-2 leading-tight mt-4", children: [_jsxs("div", { className: "w-full", children: ["\uC8FC\uC18C | ", e.officeAddress] }), _jsxs("div", { className: "w-full", children: ["\uC804\uD654\uBC88\uD638 | ", e.phoneNumber] })] })] }), _jsx("div", { className: "w-full h-0 border-1 bg-gray-light my-5" }), _jsxs("div", { className: "flex flex-col w-full justify-center items-center h-fit", children: [_jsx("div", { className: "flex w-full items-center justify-start text-lg font-medium text-gray-medium", children: "\uB2F4\uB2F9\uC9C0\uC5ED:" }), e.regions.length < 3 ? (_jsx("div", { className: "flex flex-col justify-start items-center w-full gap-3 mt-3", children: e.regions.map((g, index) => (_jsx("div", { className: "flex flex-wrap justify-start items-center w-full gap-1", children: g.assignedCities.map((h, index) => (_jsx("div", { className: cn(tag, "bg-green-light text-green-dark"), children: h }, index))) }, index))) })) : (_jsx("div", { className: "w-full flex flex-wrap gap-1", children: e.regions.map((g) => g.assignedCities.map((h, index) => (_jsx("div", { className: cn(tag, "bg-green-light text-green-dark"), children: h }, index)))) }))] }), _jsxs("div", { className: "flex flex-col w-full h-fit justify-center items-center mt-5 gap-2 md:flex-row md:absolute md:bottom-5 md:right-5 md:justify-end", children: [_jsxs("div", { className: cn(actionButton, "hover:bg-green-dark hover:text-white duration-300"), onClick: () => (window.location.href = `tel:${formatMobileNum(e.phoneNumber)}`), children: [_jsx("span", { children: "\uBB38\uC758\uD558\uAE30" }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-4", children: _jsx("path", { "fill-rule": "evenodd", d: "M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z", "clip-rule": "evenodd" }) })] }), e.managerCode && (_jsxs("div", { className: cn(actionButton, "hover:bg-gray-light hover:text-gray-dark duration-300"), onClick: () => copyToClipboard(e.managerCode, `코드(${e.managerCode})가 복사되었습니다`), children: [_jsx("span", { children: "\uC601\uC5C5\uCF54\uB4DC" }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-4", children: _jsx("path", { "fill-rule": "evenodd", d: "M3 4.875C3 3.839 3.84 3 4.875 3h4.5c1.036 0 1.875.84 1.875 1.875v4.5c0 1.036-.84 1.875-1.875 1.875h-4.5A1.875 1.875 0 0 1 3 9.375v-4.5ZM4.875 4.5a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375h-4.5Zm7.875.375c0-1.036.84-1.875 1.875-1.875h4.5C20.16 3 21 3.84 21 4.875v4.5c0 1.036-.84 1.875-1.875 1.875h-4.5a1.875 1.875 0 0 1-1.875-1.875v-4.5Zm1.875-.375a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375h-4.5ZM6 6.75A.75.75 0 0 1 6.75 6h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75A.75.75 0 0 1 6 7.5v-.75Zm9.75 0A.75.75 0 0 1 16.5 6h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75ZM3 14.625c0-1.036.84-1.875 1.875-1.875h4.5c1.036 0 1.875.84 1.875 1.875v4.5c0 1.035-.84 1.875-1.875 1.875h-4.5A1.875 1.875 0 0 1 3 19.125v-4.5Zm1.875-.375a.375.375 0 0 0-.375.375v4.5c0 .207.168.375.375.375h4.5a.375.375 0 0 0 .375-.375v-4.5a.375.375 0 0 0-.375-.375h-4.5Zm7.875-.75a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75Zm6 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75ZM6 16.5a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75Zm9.75 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75Zm-3 3a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75Zm6 0a.75.75 0 0 1 .75-.75h.75a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-.75.75h-.75a.75.75 0 0 1-.75-.75v-.75Z", "clip-rule": "evenodd" }) })] }))] })] }, index))) }) })] }));
+}

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

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export default function ContactMain(): import("react/jsx-runtime").JSX.Element;
+export declare function HelpCard({ title, subtitle, children, }: {
+    title: string;
+    subtitle: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

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/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.261",
+  "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.261
+1.0.263