@edu-tosel/design 1.0.315 → 1.0.317

package/layout/template/BbsLayout.js

@@ -12,9 +12,10 @@ export default function BbsLayout({ title, children, icon, links, }) {
         sizes: "w-full max-w-[1200px]",
     };
     const body = {
-        displays: "flex items-center gap-y-5 md:flex-row  justify-between  md:items-end",
+        displays: "flex xs:flex-row flex-col items-center gap-y-5 md:flex-row  justify-between  md:items-end",
         sizes: "w-full md:h-[188px]",
         boundaries: "pt-8 md:pt-0 px-5 md:px-12 md:pb-10 ",
+        //debug: "border-2 border-red-500",
     };
     const childrenBody = {
         sizes: "w-full max-w-[1200px]",
@@ -24,7 +25,7 @@ export default function BbsLayout({ title, children, icon, links, }) {
 }
 export function BbsSelect({ links }) {
     const container = {
-        displays: "flex",
+        displays: "flex gap-x-1.5",
         backgrounds: "bg-[#F0F0F0]",
         boundaries: "p-[6px]",
         styles: "rounded-full",
@@ -36,7 +37,8 @@ export function BbsSelect({ links }) {
         sizes: "w-[80px] md:w-[100px] h-[30px]",
         displays: "flex justify-center items-center",
         styles: "rounded-full",
-        fonts: "text-[12px] leading-tight ",
+        fonts: "text-sm leading-tight font-pretendard-var font-medium",
+        animations: "hover:bg-white/50 duration-200",
     });
     return (_jsx("div", { className: cn(container), children: links.map(({ title, onClick, isPressed }) => (_jsx("button", { onClick: onClick, className: cn(button(isPressed)), children: title }))) }));
 }

package/layout/template/home/Shortcut.js

@@ -19,7 +19,7 @@ export default function ShortcutBanner({ shortcuts, }) {
     const tagBox = {
         displays: "flex justify-center items-center",
         sizes: "w-full h-6.25 ",
-        fonts: "text-xs font-pretendard-var font-medium text-gray-dark group-hover:text-green-dark",
+        fonts: "text-xs md:text-sm font-pretendard-var font-medium text-gray-dark group-hover:text-green-dark",
         animation: "duration-100",
     };
     const iconContainer = {

package/layout/template/home/layout/Footer.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import urlAsset from "../../../../asset/url";
 import { cn } from "../../../../util";
+import { useResponsive } from "../../../../hook";
 export default function Footer() {
+    const isXS = useResponsive("xs");
     const container = {
         displays: "flex justify-center items-center",
         sizes: "w-full h-fit",
@@ -28,6 +30,11 @@ export default function Footer() {
     const info = {
         textstyling: "leading-normal text-sm",
     };
+    const flexInfo = {
+        displays: "flex flex-row justify-start items-center flex-wrap",
+        sizes: "w-full max-w-150",
+        spacings: "gap-x-5",
+    };
     //social button styling
     const iconWrapper = {
         displays: "flex items-center gap-3 mt-8",
@@ -41,7 +48,7 @@ export default function Footer() {
     const socialIconControl = {
         siezes: "h-6",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(logoWrapper), children: [_jsx("img", { className: cn(svgController), src: "/images/logos/logo-tosel-main.svg", alt: "" }), _jsx("img", { className: cn(svgController), src: "/images/logos/logo-itc-main.svg", alt: "" })] }), _jsxs("div", { className: "flex flex-wrap justify-between items-center border-b-1 border-gray-dark pb-4 mt-5 font-medium gap-y-1", children: [_jsx("div", { children: "Copyright TOSEL. \u24D2 All Rights Reserved." }), _jsx("div", { className: "flex gap-5", children: buttons.map((button, index) => (_jsxs("div", { onClick: button.onClick, className: "cursor-default", children: [button.title, " "] }, index))) })] }), _jsxs("div", { className: cn(infoSet), children: [_jsx("div", { className: cn(infoTitle), children: "\uACE0\uAC1D\uBB38\uC758" }), _jsxs("div", { className: cn(info), children: ["\u203B\uAC1C\uC778\uC815\uBCF4 \uBCF4\uD638 \uC815\uCC45\uC5D0 \uB530\uB77C, \uBAA8\uB4E0 \uACF5\uC2DD \uBB38\uC758\uB294 \uC774\uBA54\uC77C\uC744 \uD1B5\uD574\uC11C\uB9CC \uC811\uC218 \uAC00\uB2A5\uD569\uB2C8\uB2E4.", _jsx("br", {}), "\uB300\uD45C\uBC88\uD638 | 02-923-0505", _jsx("br", {}), "\uAC1C\uC778\uBB38\uC758 | tosel_cs@tosel.co.kr ", _jsx("br", {}), "\uB2E8\uCCB4\uBB38\uC758 | tosel_academy@tosel.co.kr"] })] }), _jsxs("div", { className: cn(infoSet), children: [_jsx("div", { className: cn(infoTitle), children: "\uAD6D\uC81C\uD1A0\uC140\uC704\uC6D0\uD68C" }), _jsxs("div", { className: cn(info), children: ["\uC0AC\uC5C5\uC790 \uB4F1\uB85D\uBC88\uD638 : 209-81-55585 | \uB300\uD45C : \uC624\uC2B9\uC5F0 ", _jsx("br", {}), "\uC6F9\uC11C\uBE44\uC2A4: \uC8FC\uC2DD\uD68C\uC0AC \uC5D0\uB4C0\uD1A0\uC140 | \uD1B5\uC2E0\uD310\uB9E4\uC5C5\uC2E0\uACE0\uBC88\uD638: \uC81C 2012-\uC11C\uC6B8\uC131\uBD81-0083\uD638", _jsx("br", {}), " \uC11C\uC6B8\uC2DC \uC131\uBD81\uAD6C \uC548\uC554\uB85C 145 \uACE0\uB824\uB300\uD559\uAD50 \uB77C\uC774\uC2DC\uC6C0 4\uCE35", _jsx("br", {}), " Lyceum Korea University, 145 Anam Ro, Seongbuk-Gu, Seoul, Korea 02841"] })] }), _jsxs("div", { className: cn(iconWrapper), children: [_jsx("a", { onClick: () => (location.href = "https://blog.naver.com/ebs1503"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/naver.svg", alt: "" }) }) }), _jsx("a", { onClick: () => (location.href = "https://www.instagram.com/tosel_official/"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/instagram.svg", alt: "" }) }) }), _jsx("a", { onClick: () => (location.href = "https://www.youtube.com/@tosel_official"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/youtube.svg", alt: "" }) }) })] })] }) }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(logoWrapper), children: [_jsx("img", { className: cn(svgController), src: "/images/logos/logo-tosel-main.svg", alt: "" }), _jsx("img", { className: cn(svgController), src: "/images/logos/logo-itc-main.svg", alt: "" })] }), _jsxs("div", { className: "flex flex-wrap justify-between items-center border-b-1 border-gray-medium/50 pb-4 mt-5 font-medium gap-y-1", children: [_jsx("div", { children: "Copyright TOSEL. \u24D2 All Rights Reserved." }), _jsx("div", { className: "flex gap-5", children: buttons.map((button, index) => (_jsxs("div", { onClick: button.onClick, className: "cursor-default", children: [button.title, " "] }, index))) })] }), _jsxs("div", { className: cn(infoSet), children: [_jsx("div", { className: cn(infoTitle), children: "\uACE0\uAC1D\uBB38\uC758" }), _jsxs("div", { className: cn(info), children: ["\u203B\uAC1C\uC778\uC815\uBCF4 \uBCF4\uD638 \uC815\uCC45\uC5D0 \uB530\uB77C, \uBAA8\uB4E0 \uACF5\uC2DD \uBB38\uC758\uB294 \uC774\uBA54\uC77C\uC744 \uD1B5\uD574\uC11C\uB9CC \uC811\uC218 \uAC00\uB2A5\uD569\uB2C8\uB2E4.", _jsx("br", {}), _jsxs("div", { className: cn(flexInfo, "py-2"), children: [_jsx("div", { children: "\uB300\uD45C\uBC88\uD638 | 02-923-0505" }), _jsx("div", { children: "TOSEL Lab \uC9C0\uC815\uAD50\uC721\uAE30\uAD00 | 02-953-0202 " }), isXS ? (_jsx("div", { children: "\uACE0\uB824\uB300\uD559\uAD50 \uBBF8\uB798\uAD50\uC721\uC6D0 \uD1A0\uC140 \uC804\uBB38\uAC00 \uACFC\uC815 | 02-953-0202 " })) : (_jsx("div", { children: "\uACE0\uB824\uB300 \uD1A0\uC140 \uC804\uBB38\uAC00 \uACFC\uC815 | 02-953-0202 " })), _jsx("div", { children: "\uAD50\uC7AC \uBB38\uC758 | 02-924-8137" })] }), "\uAC1C\uC778\uBB38\uC758 | tosel_cs@tosel.co.kr ", _jsx("br", {}), "\uB2E8\uCCB4\uBB38\uC758 | tosel_academy@tosel.co.kr"] })] }), _jsxs("div", { className: cn(infoSet), children: [_jsx("div", { className: cn(infoTitle), children: "\uAD6D\uC81C\uD1A0\uC140\uC704\uC6D0\uD68C" }), _jsxs("div", { className: cn(info, "flex flex-col gap-2"), children: [_jsxs("div", { children: ["\uBE44\uC601\uB9AC\uC5F0\uAD6C\uAE30\uAD00 \uACE0\uC720\uBC88\uD638 : 506-82-91193 ", _jsx("br", {}), "Web Service: Edu-tosel Co., Ltd. | \uD1B5\uC2E0\uD310\uB9E4\uC5C5\uC2E0\uACE0\uBC88\uD638: \uC81C 2012-\uC11C\uC6B8\uC131\uBD81-0083\uD638"] }), _jsxs("div", { children: ["\uC11C\uC6B8\uC2DC \uC131\uBD81\uAD6C \uC548\uC554\uB85C 145 \uACE0\uB824\uB300\uD559\uAD50 \uB77C\uC774\uC2DC\uC6C0 4\uCE35", _jsx("br", {}), " Lyceum Korea University, 145 Anam Ro, Seongbuk-Gu, Seoul, Korea 02841"] })] })] }), _jsxs("div", { className: cn(iconWrapper), children: [_jsx("a", { onClick: () => (location.href = "https://blog.naver.com/ebs1503"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/naver.svg", alt: "" }) }) }), _jsx("a", { onClick: () => (location.href = "https://www.instagram.com/tosel_official/"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/instagram.svg", alt: "" }) }) }), _jsx("a", { onClick: () => (location.href = "https://www.youtube.com/@tosel_official"), children: _jsx("div", { className: cn(iconBox), children: _jsx("img", { className: cn(socialIconControl), src: "/images/logos/youtube.svg", alt: "" }) }) })] })] }) }));
 }
 const buttons = [
     // {

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

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { cn, gradient } from "../../../../util";
 import { Label } from "../../../../widget";
 import { useResponsive } from "../../../../hook";
+import { gsap } from "gsap";
 export default function Header({ logo, rightButton, contents, }) {
     const [isExpanded, setIsExpanded] = useState(false);
-    const [hasToggled, setHasToggled] = useState(false);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const headerRef = useRef(null);
+    const menuContentRef = useRef(null);
     const toggleHeight = () => {
         setIsExpanded(!isExpanded);
-        setHasToggled(true); // 한 번이라도 토글되었음을 표시
     };
     const handleClickOutside = (event) => {
         const menuElement = document.getElementById("buttonArea");
@@ -29,18 +31,81 @@ export default function Header({ logo, rightButton, contents, }) {
         };
     }, [isExpanded]);
     const isMD = useResponsive("md");
+    // 초기 상태 설정 (애니메이션 없이)
+    useEffect(() => {
+        if (!headerRef.current || !menuContentRef.current)
+            return;
+        const header = headerRef.current;
+        const menuContent = menuContentRef.current;
+        // 초기 마운트시에는 애니메이션 없이 즉시 설정
+        if (isMD) {
+            // 데스크톱: 항상 표시되는 상태
+            gsap.set(header, { height: "60px" });
+            gsap.set(menuContent, { opacity: 1, visibility: "visible" });
+        }
+        else {
+            // 모바일: 접혀있는 상태로 시작
+            gsap.set(header, { height: "60px" });
+            gsap.set(menuContent, { opacity: 0, visibility: "hidden" });
+        }
+        setIsExpanded(false);
+        setIsInitialized(true);
+    }, [isMD]);
+    // GSAP 애니메이션 처리 (초기화 후에만 실행)
+    useEffect(() => {
+        if (!isInitialized || !headerRef.current || !menuContentRef.current)
+            return;
+        const header = headerRef.current;
+        const menuContent = menuContentRef.current;
+        if (isMD) {
+            // 데스크톱으로 전환시 즉시 표시
+            gsap.set(header, { height: "60px" });
+            gsap.set(menuContent, { opacity: 1, visibility: "visible" });
+            setIsExpanded(false);
+        }
+        else {
+            // 모바일에서만 애니메이션 적용
+            if (isExpanded) {
+                gsap.to(header, {
+                    height: "auto",
+                    duration: 0.3,
+                    ease: "power2.inOut",
+                });
+                gsap.to(menuContent, {
+                    opacity: 1,
+                    visibility: "visible",
+                    duration: 0.3,
+                    ease: "power2.inOut",
+                });
+            }
+            else {
+                gsap.to(menuContent, {
+                    opacity: 0,
+                    visibility: "hidden",
+                    duration: 0.2,
+                    ease: "power2.inOut",
+                });
+                gsap.to(header, {
+                    height: "60px",
+                    duration: 0.3,
+                    ease: "power2.inOut",
+                });
+            }
+        }
+    }, [isExpanded, isInitialized]);
+    // 화면 크기가 변경될 때 메뉴 상태 초기화
+    useEffect(() => {
+        if (isMD && isExpanded) {
+            setIsExpanded(false);
+        }
+    }, [isMD]);
     //메뉴바 배경
     const container = {
-        positions: "fixed top-0 left-0 z-40 md:h-15",
+        positions: "fixed top-0 left-0 z-40",
         displays: "flex justify-center items-start overflow-hidden",
         sizes: "w-full",
-        styles: "bg-white  box-shadow",
+        styles: "bg-white box-shadow",
         textstyles: "antialiased",
-        animation: hasToggled && !isMD
-            ? isExpanded
-                ? "animate-grow"
-                : "animate-shrink"
-            : "",
     };
     const body = {
         displays: "flex md:flex-row flex-col md:items-center items-start justify-between",
@@ -69,7 +134,10 @@ export default function Header({ logo, rightButton, contents, }) {
         displays: "flex flex-row justify-center md:justify-start",
         spacings: "items-center gap-x-6 ml:gap-x-12 ",
         sizes: "w-full md:w-fit",
-        boundaries: "border-gray-light border-t-2",
+        boundaries: "border-gray-light md:border-t-0 border-t-2",
+        visibility: isMD
+            ? "opacity-100 visible"
+            : "opacity-0 invisible md:opacity-100 md:visible",
     };
     const essenstialsWrapper = {
         displays: "flex flex-row items-center h-15",
@@ -80,12 +148,12 @@ export default function Header({ logo, rightButton, contents, }) {
     const menuButton = {
         displays: "flex justify-center items-center p-2",
     };
-    return (_jsx("div", { 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 && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
+    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 && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
                                         width: "2xs",
                                         height: "xs",
                                         background: gradient.bg.greenToRed,
                                         text: "text-white",
-                                    } })), _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", { 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 && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
+                                    } })), _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 && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
                                     width: "xs",
                                     height: "xs",
                                     background: gradient.bg.greenToRed,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.315",
+  "version": "1.0.317",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -14,6 +14,7 @@
   "type": "module",
   "scripts": {},
   "dependencies": {
+    "@edu-tosel/interface": "https://resource.tosel.co.kr/packages/interface/1.0.59",
     "@edu-tosel/utils": "^0.0.30",
     "@gsap/react": "^2.1.1",
     "date-fns": "^2.30.0",

package/version.txt

@@ -1 +1 @@
-1.0.315
+1.0.317