@edu-tosel/design 1.0.349 → 1.0.351

package/layout/template/Action.js

@@ -3,7 +3,7 @@ import React, { Fragment } from "react";
 import { useActionStore } from "../../store";
 function Show({ actions, children }) {
     const { events } = useActionStore();
-    return (_jsxs(_Fragment, { children: [children, actions?.map(([flag, Component], index) => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "no-scrollbar", children: children }), actions?.map(([flag, Component], index) => {
                 const isVisible = typeof flag === "boolean"
                     ? flag
                     : events?.some(({ event }) => event === flag);

package/layout/template/home/Announcement.js

@@ -80,7 +80,7 @@ export default function Announcement({ banners, browse }) {
     //adjust the responsive right margin of scroller
     const cardDeck = {
         displays: "inline-flex",
-        spacings: "gap-5 xl:mr-[calc(100vw-900px)]",
+        spacings: "gap-5 xl:mr-[calc(100vw-1200px)]",
     };
     const buttonPositioning = {
         displays: "flex flex-row",
@@ -120,7 +120,7 @@ function Banner({ onClick, titles }) {
         sizes: "w-65 h-40 xxxs:w-76 md:w-80 md:h-40 rounded-lg md:rounded-lg",
         backgrounds: "bg-white",
         hover: "hover:shadow-main-hover hover:scale-[1.03]",
-        position: "xl:translate-x-[calc(50vw-770px)] md:translate-x-[56px]",
+        position: "xl:translate-x-[calc(50vw-665px)] md:translate-x-[56px]",
         transition: "duration-300",
         displays: "relative display-block overflow-hidden",
         fonts: "font-pretendard-var",

package/layout/template/home/NewsPaper.js

@@ -76,7 +76,7 @@ export default function NewsPaper({ banners, browse, option, }) {
     //adjust the responsive right margin of scroller
     const cardDeck = {
         displays: "inline-flex",
-        spacings: "gap-5 xl:mr-[calc(100vw-900px)]",
+        spacings: "gap-5 xl:mr-[calc(100vw-1200px)]",
     };
     const buttonPositioning = {
         displays: "flex flex-row",
@@ -117,7 +117,7 @@ function Banner({ onClick, image, option }) {
         sizes: "w-65 h-40 xxxs:w-76 xxxs:h-47.5 md:w-120 md:h-75 rounded-xl md:rounded-2xl",
         backgrounds: background,
         hover: "hover:shadow-main-hover hover:scale-[1.03]",
-        position: "xl:translate-x-[calc(50vw-770px)] md:translate-x-[56px]",
+        position: "xl:translate-x-[calc(50vw-665px)] md:translate-x-[56px]",
         transition: "duration-300",
         displays: "relative display-block overflow-hidden",
         fonts: "font-pretendard-var",

package/layout/template/home/Service.js

@@ -75,7 +75,7 @@ export default function Service({ banners }) {
     //adjust the responsive right margin of scroller
     const cardDeck = {
         displays: "inline-flex",
-        spacings: "gap-5 xl:mr-[calc(100vw-900px)]",
+        spacings: "gap-5 xl:mr-[calc(100vw-1200px)]",
     };
     const buttonPositioning = {
         displays: "flex flex-row",
@@ -111,7 +111,7 @@ function Banner({ titles, onClick, image, option }) {
         sizes: "h-100 w-65 xxxs:w-76 md:w-100 md:h-125 rounded-xl md:rounded-2xl",
         backgrounds: background,
         hover: "hover:shadow-main-hover hover:scale-[1.03]",
-        position: "xl:translate-x-[calc(50vw-770px)] md:translate-x-[56px]",
+        position: "xl:translate-x-[calc(50vw-665px)] md:translate-x-[56px]",
         transition: "duration-300",
         displays: "relative display-block overflow-hidden",
         fonts: "font-pretendard-var",

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

@@ -1,10 +1,37 @@
 import { ReactNode } from "react";
 import { Button as _Button, OnClick } from "../../../../interface";
+type MenuItem = {
+    title: string;
+    description?: string;
+    tag?: {
+        title: string;
+        background?: string;
+    };
+    onClick?: OnClick;
+};
+type MenuData = {
+    title: {
+        title: string;
+        image?: string;
+        description?: string;
+        button?: {
+            title: string;
+            style?: string;
+            align?: "left" | "right" | "center";
+            onClick?: OnClick;
+        };
+    };
+    content: MenuItem[];
+};
+type ExtendedButton = _Button & {
+    menu?: MenuData;
+};
 export default function Header({ logo, rightButton, contents, }: {
     logo: {
         node: ReactNode;
         onClick?: OnClick;
     };
     rightButton?: React.ReactNode;
-    contents: _Button[];
+    contents: ExtendedButton[];
 }): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/home/layout/Header.js

@@ -1,4 +1,4 @@
-import { 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 { useState, useEffect, useRef } from "react";
 import { cn } from "../../../../util";
 import { useResponsive } from "../../../../hook";
@@ -6,13 +6,49 @@ import { gsap } from "gsap";
 export default function Header({ logo, rightButton, contents, }) {
     const [isExpanded, setIsExpanded] = useState(false);
     const [isInitialized, setIsInitialized] = useState(false);
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+    const [mobileMenuIndex, setMobileMenuIndex] = useState(null);
     const headerRef = useRef(null);
     const menuContentRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const mobileMenuRef = useRef(null);
+    const hoverTimeoutRef = useRef(null);
     const toggleHeight = () => {
         setIsExpanded(!isExpanded);
+        if (!isExpanded) {
+            setMobileMenuIndex(null);
+        }
+    };
+    const handleMobileMenuClick = (index, e) => {
+        e?.stopPropagation(); // 이벤트 전파 방지
+        const button = contents[index];
+        if (button?.menu) {
+            // 메뉴가 있으면 토글 (함수형 업데이트 사용)
+            setMobileMenuIndex((prevIndex) => {
+                const newIndex = prevIndex === index ? null : index;
+                return newIndex;
+            });
+        }
+        else {
+            // 메뉴가 없으면 onClick 실행하고 닫기
+            button?.onClick?.();
+            setIsExpanded(false);
+        }
+    };
+    const closeMobileMenu = () => {
+        setIsExpanded(false);
+        setMobileMenuIndex(null);
     };
     const handleClickOutside = (event) => {
         const menuElement = document.getElementById("buttonArea");
+        const mobileMenuElement = mobileMenuRef.current;
+        // 모바일 메뉴가 열려있고, 클릭이 모바일 메뉴 내부나 버튼 영역이면 닫지 않음
+        if (isExpanded && !isMD) {
+            if (mobileMenuElement?.contains(event.target) ||
+                menuElement?.contains(event.target)) {
+                return;
+            }
+        }
         if (menuElement && !menuElement.contains(event.target)) {
             setIsExpanded(false);
         }
@@ -136,7 +172,7 @@ export default function Header({ logo, rightButton, contents, }) {
         boundaries: "border-gray-light md:border-t-0 border-t-2",
         visibility: isMD
             ? "opacity-100 visible"
-            : "opacity-0 invisible md:opacity-100 md:visible",
+            : "hidden md:opacity-100 md:visible",
     };
     const essenstialsWrapper = {
         displays: "flex flex-row items-center h-15",
@@ -147,5 +183,62 @@ export default function Header({ logo, rightButton, contents, }) {
     const menuButton = {
         displays: "flex justify-center items-center p-2",
     };
-    return (_jsx("div", { ref: headerRef, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(leftWrapper), children: [_jsx("div", { onClick: logo.onClick, children: logo.node }), _jsxs("div", { className: cn(essenstialsWrapper), id: "buttonArea", children: [rightButton && rightButton, _jsx("button", { onClick: toggleHeight, className: cn(menuButton), children: _jsx("div", { className: "w-6 h-6", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: [!isExpanded && (_jsx("path", { id: "menu", fill: "#B0B8C1", 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" })), isExpanded && (_jsx("path", { id: "close", fill: "#B0B8C1", "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" }))] }) }) })] })] }), _jsxs("div", { ref: menuContentRef, className: cn(rightWrapper), children: [_jsx("div", { className: cn(buttonBoxWrapper), children: contents.map((button, index) => (_jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }, index))) }), _jsx("div", { className: "hidden md:block", children: rightButton && rightButton })] })] }) }));
+    // 드롭다운 메뉴 애니메이션
+    useEffect(() => {
+        if (!dropdownRef.current)
+            return;
+        if (hoveredIndex !== null && contents[hoveredIndex]?.menu) {
+            gsap.fromTo(dropdownRef.current, { opacity: 0, y: -10 }, { opacity: 1, y: 0, duration: 0.2, ease: "power2.out" });
+        }
+    }, [hoveredIndex, contents]);
+    const handleMouseEnter = (index) => {
+        if (contents[index]?.menu && isMD) {
+            // 기존 타이머가 있으면 취소
+            if (hoverTimeoutRef.current) {
+                clearTimeout(hoverTimeoutRef.current);
+                hoverTimeoutRef.current = null;
+            }
+            setHoveredIndex(index);
+        }
+    };
+    const handleMouseLeave = () => {
+        // 약간의 지연을 주어 드롭다운으로 이동할 시간을 줌
+        hoverTimeoutRef.current = setTimeout(() => {
+            setHoveredIndex(null);
+        }, 100);
+    };
+    const handleDropdownMouseEnter = () => {
+        // 드롭다운에 마우스가 들어오면 타이머 취소
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+    };
+    const handleDropdownMouseLeave = () => {
+        setHoveredIndex(null);
+    };
+    // 컴포넌트 언마운트 시 타이머 정리
+    useEffect(() => {
+        return () => {
+            if (hoverTimeoutRef.current) {
+                clearTimeout(hoverTimeoutRef.current);
+            }
+        };
+    }, []);
+    const activeMenu = hoveredIndex !== null ? contents[hoveredIndex]?.menu : null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: headerRef, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(leftWrapper), children: [_jsx("div", { onClick: logo.onClick, children: logo.node }), _jsxs("div", { className: cn(essenstialsWrapper), id: "buttonArea", children: [rightButton && rightButton, _jsx("button", { onClick: toggleHeight, className: cn(menuButton), children: _jsx("div", { className: "w-6 h-6", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: [!isExpanded && (_jsx("path", { id: "menu", fill: "#B0B8C1", 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" })), isExpanded && (_jsx("path", { id: "close", fill: "#B0B8C1", "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" }))] }) }) })] })] }), _jsxs("div", { ref: menuContentRef, className: cn(rightWrapper), children: [_jsx("div", { className: cn(buttonBoxWrapper), children: contents.map((button, index) => (_jsx("div", { className: "relative", onMouseEnter: () => handleMouseEnter(index), onMouseLeave: handleMouseLeave, children: _jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }) }, index))) }), _jsx("div", { className: "hidden md:block", children: rightButton && rightButton })] })] }) }), activeMenu && hoveredIndex !== null && isMD && (_jsx("div", { ref: dropdownRef, className: "fixed top-[60px] left-0 w-full bg-white shadow-lg z-50 border-t border-gray-200 hidden md:block", onMouseEnter: handleDropdownMouseEnter, onMouseLeave: handleDropdownMouseLeave, style: { maxWidth: "100vw" }, children: _jsx("div", { className: "max-w-[1200px] mx-auto px-6 md:px-12 py-4", children: _jsxs("div", { className: "flex flex-col md:flex-row gap-4 md:gap-4 lg:gap-6", children: [_jsx("div", { className: "flex-shrink-0 w-full md:w-64 lg:w-80", children: _jsxs("div", { className: "flex flex-col gap-1.5", children: [activeMenu.title.image && (_jsx("div", { className: "mb-0.5", children: _jsx("img", { src: activeMenu.title.image, alt: activeMenu.title.title, className: "w-full object-contain" }) })), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("h3", { className: "text-xl md:text-2xl font-bold text-blue-600", children: activeMenu.title.title }), activeMenu.title.description && (_jsx("p", { className: "text-gray-600 text-xs leading-relaxed", children: activeMenu.title.description }))] }), activeMenu.title.button && (_jsx("div", { className: cn("mt-0.5 flex", activeMenu.title.button.align === "right" ? "justify-end" : "", activeMenu.title.button.align === "center" ? "justify-center" : "", activeMenu.title.button.align === "left" ? "justify-start" : ""), children: _jsx("button", { onClick: () => activeMenu.title.button?.onClick?.(), className: cn(activeMenu.title.button.style ||
+                                                    "px-4 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-xs font-medium"), children: activeMenu.title.button.title }) }))] }) }), _jsx("div", { className: "flex-1", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 md:gap-x-6 gap-y-3 h-full pt-0 md:pt-4 pl-0 md:pl-4 lg:pl-8", children: activeMenu.content.map((item, itemIndex) => (_jsxs("div", { className: "cursor-pointer group", onClick: () => item.onClick?.(), children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [_jsx("h4", { className: "text-base md:text-lg font-semibold text-gray-900 group-hover:text-blue-600 transition-colors", children: item.title }), item.tag && (_jsx("span", { className: cn("px-2 py-0.5 text-xs font-medium text-white rounded-full whitespace-nowrap", item.tag.background || "bg-blue-600"), children: item.tag.title }))] }), item.description && (_jsx("p", { className: "text-xs text-gray-600 leading-relaxed", children: item.description }))] }, itemIndex))) }) })] }) }) })), isExpanded && !isMD && (_jsxs("div", { ref: mobileMenuRef, className: "fixed inset-0 bg-white z-50 overflow-hidden flex flex-col", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "bg-white px-4 py-3 flex items-center justify-between", children: [_jsx("div", { className: "flex items-center gap-4", children: _jsx("img", { src: "/images/logos/tosel.png", alt: "Tosel", className: "h-7" }) }), _jsx("button", { onClick: closeMobileMenu, className: "text-black w-6 h-6 flex items-center justify-center", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: _jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }), _jsx("div", { className: "flex-1 overflow-y-scroll", children: _jsx("div", { className: "border-b border-gray-200", children: contents.map((button, index) => (_jsxs("div", { children: [_jsxs("button", { onClick: (e) => handleMobileMenuClick(index, e), className: "w-full px-4 py-4 flex items-center justify-between border-b border-gray-100 hover:bg-gray-50 transition-colors", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-green-500" }), _jsx("span", { className: "text-gray-900 font-medium", children: button.title })] }), button.menu && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "w-5 h-5 text-gray-400", children: _jsx("path", { d: "M12 4v16m8-8H4" }) }))] }), button.menu && mobileMenuIndex === index && (_jsxs("div", { className: "bg-gray-50 border-b border-gray-200 animate-in slide-in-from-top-2 duration-200", children: [button.menu.title && (_jsxs("div", { className: "px-4 py-4 border-b border-gray-200", children: [button.menu.title.image && (_jsx("div", { className: "mb-3", children: _jsx("img", { src: button.menu.title.image, alt: button.menu.title.title, className: "w-full max-w-xs h-auto object-contain" }) })), _jsx("h3", { className: "text-xl font-bold text-blue-600 mb-2", children: button.menu.title.title }), button.menu.title.button && (_jsx("div", { className: cn("flex", button.menu.title.button.align === "right"
+                                                            ? "justify-end"
+                                                            : "", button.menu.title.button.align === "center"
+                                                            ? "justify-center"
+                                                            : "", button.menu.title.button.align === "left"
+                                                            ? "justify-start"
+                                                            : ""), children: _jsx("button", { onClick: () => {
+                                                                button.menu?.title.button?.onClick?.();
+                                                                closeMobileMenu();
+                                                            }, className: cn(button.menu.title.button.style ||
+                                                                "px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"), children: button.menu.title.button.title }) }))] })), button.menu.content && button.menu.content.length > 0 && (_jsx("div", { className: "px-4 py-2", children: button.menu.content.map((item, itemIndex) => (_jsxs("button", { onClick: () => {
+                                                        item.onClick?.();
+                                                        closeMobileMenu();
+                                                    }, className: "w-full px-4 py-3 flex items-center justify-between border-b border-gray-100 hover:bg-gray-100 transition-colors text-left", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-gray-900 font-medium", children: item.title }), item.tag && (_jsx("span", { className: cn("px-2 py-0.5 text-xs font-medium text-white rounded-full", item.tag.background || "bg-green-500"), children: item.tag.title }))] }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "w-5 h-5 text-gray-400", children: _jsx("path", { d: "M12 4v16m8-8H4" }) })] }, itemIndex))) }))] }))] }, index))) }) })] }))] }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.349
+1.0.351