@edu-tosel/design 1.0.261 → 1.0.265

package/board/design/Board.design.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, isDebug } from "../../util";
 import { Action, Label } from "../..";
+import { useGalleryContext } from "../../layout/template/GalleryContext";
 const widthSize = {
     xs: "w-20",
     sm: "w-24",
@@ -15,25 +16,31 @@ 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 isUnderGallery = useGalleryContext();
     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: isUnderGallery
+            ? "h-full xl:h-[calc(100%-30px)]"
+            : buttons
+                ? "h-full xl:h-[calc(100%-100px)]"
+                : "h-full xl:h-[calc(100%-30px)]",
     };
     const body = {
         positions: "relative",
         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: header ? "h-[calc(100%-60px)]" : "h-full",
+        paddings: `${header ? "pb-5" : "pb-36 xl:pb-6"} px-2 xs:px-4 xl:px-7.5 pt-2 xs:pt-4 xl:pt-7.5`,
+        scrollStyles: "overflow-y-scroll scrollbar-hidden",
         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/Board.d.ts

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

package/interface/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;