@edu-tosel/design 1.0.322 → 1.0.324

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

@@ -2,5 +2,6 @@ import { Button } from "../../../interface";
 export default function ShortcutBanner({ shortcuts, }: {
     shortcuts: (Button & {
         icon: string;
+        background?: string;
     })[];
 }): import("react/jsx-runtime").JSX.Element;

package/layout/template/home/Shortcut.js

@@ -1,14 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
+import { useResponsive } from "../../../hook";
 export default function ShortcutBanner({ shortcuts, }) {
+    const isXS = useResponsive("xs");
     const container = {
-        displays: "flex justify-center items-center",
-        spacings: "px-5 pt-16 pb-24",
+        displays: "flex flex-col justify-start justify-start xs:justify-center xs:items-center",
+        spacings: "pt-10 pb-15",
+    };
+    const scrollWrapper = {
+        displays: "flex justify-start items-center overflow-x-scroll scrollbar-hidden",
+        sizes: "w-full h-fit",
+        spacings: "px-5 pb-5",
+        graphics: "antialiased",
+        boundaries: "border-b-1 border-gray-200",
+    };
+    const headerButton = {
+        displays: "flex flex-col justify-center items-center",
+        sizes: "h-fit w-fit shrink-0",
+        spacings: "gap-2 px-4 py-2 rounded-lg",
+        backgrounds: "bg-gray-50",
+        textStyles: "font-bold text-gray-600",
     };
     const buttonWrapper = {
-        displays: "flex justify-center items-center flex-wrap",
-        sizes: "max-w-70 h-fit sm:max-w-full sm:w-full",
-        spacings: "gap-x-6 gap-y-4 xxxs:gap-x-10 sm:gap-x-6 md:gap-x-10",
+        displays: "flex justify-center items-center",
+        sizes: "min-w-fit h-fit",
+        spacings: "gap-x-4 xs:gap-x-10 mx-auto py-2",
         graphics: "antialiased",
     };
     const buttonSet = {
@@ -23,10 +39,10 @@ export default function ShortcutBanner({ shortcuts, }) {
         animation: "duration-100",
     };
     const iconContainer = {
-        sizes: "w-16 h-16 rounded-lg overflow-hidden",
-        shadows: "shadow-icon-default",
+        sizes: "size-14 xs:size-16 rounded-lg overflow-hidden",
+        shadows: "shadow-none",
         animation: "duration-100",
-        hoveraction: "group-hover:shadow-icon-hover group-hover:scale-105",
+        hoveraction: "group-hover:shadow-icon-hover group-hover:scale-103",
     };
-    return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(buttonWrapper), children: shortcuts.map((shortcut) => (_jsxs("button", { onClick: shortcut.onClick, className: cn(buttonSet), children: [_jsx("div", { className: cn(iconContainer), children: _jsx("img", { src: shortcut.icon, alt: shortcut.title }) }), _jsx("div", { className: cn(tagBox), children: shortcut.title })] }, shortcut.title))) }) }));
+    return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(scrollWrapper), children: _jsxs("div", { className: cn(buttonWrapper), children: [_jsxs("div", { className: cn(headerButton), children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-6", children: _jsx("path", { d: "M5.055 7.06C3.805 6.347 2.25 7.25 2.25 8.69v8.122c0 1.44 1.555 2.343 2.805 1.628L12 14.471v2.34c0 1.44 1.555 2.343 2.805 1.628l7.108-4.061c1.26-.72 1.26-2.536 0-3.256l-7.108-4.061C13.555 6.346 12 7.249 12 8.689v2.34L5.055 7.061Z" }) }) }), _jsx("div", { className: "font-bold text-sm xs:text-base", children: "\uBE60\uB978 \uBA54\uB274" })] }), shortcuts.map((shortcut) => (_jsxs("button", { onClick: shortcut.onClick, className: cn(buttonSet), children: [_jsx("div", { className: cn(iconContainer, shortcut.background ?? "bg-gray-100"), children: _jsx("img", { src: shortcut.icon, alt: shortcut.title }) }), _jsx("div", { className: cn(tagBox), children: shortcut.title })] }, shortcut.title)))] }) }) }));
 }

package/layout/template/home/layout/Carousel.js

@@ -2,18 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useRef, useCallback } from "react"; // React 추가
 import { useSpring, animated, easings } from "@react-spring/web";
 import { cn } from "../../../../util";
-import { useEase } from "../../../../hook";
 import { LineBreaks } from "../../../../text";
 import SVG from "../../../../asset/SVG";
 import { tagString } from "../../../../interface/domain";
 import useResponsive from "../../../../hook/useResponsive";
 export default function Carousel({ contents, option, }) {
     const [index, setIndex] = useState(0);
-    const [flag, inTime] = useEase(10000, 1000);
     const [loaded, setLoaded] = useState(false);
     const [isPlaying, setIsPlaying] = useState(true);
     const isMD = useResponsive("md");
     const isXL = useResponsive("xl");
+    const isXXS = useResponsive("xxs");
     const intervalRef = useRef(null);
     const { tag, titles, image } = contents[index];
     // Transition animation using react-spring
@@ -70,6 +69,10 @@ export default function Carousel({ contents, option, }) {
         setIsPlaying(!isPlaying);
     };
     // Styles definition
+    const spacer = {
+        displays: "flex flex-col justify-start items-center",
+        sizes: "w-full h-200",
+    };
     const container = {
         displays: "relative flex justify-center items-center",
         sizes: "w-full h-fit md:h-80 ml:h-100",
@@ -79,7 +82,7 @@ export default function Carousel({ contents, option, }) {
     };
     const titleWrapper = {
         displays: "static md:relative flex flex-col xxs:flex-row xxs:items-center md:items-start md:flex-col",
-        sizes: "w-full h-fit xxs:h-full xxs:w-fit md:w-72",
+        sizes: "w-full h-21 md:h-full xxs:w-fit md:w-72",
         spacings: "mt-4 px-5 xxs:mt-8 xxs:gap-8 md:p-0 md:mt-0 md:gap-6 md:pl-7.5 md:pt-10 ml:pt-20",
         animations: "duration-500",
     };
@@ -128,5 +131,5 @@ export default function Carousel({ contents, option, }) {
         sizes: "w-10 h-10 rounded-full",
         background: "bg-white text-gray-dark shadow-main",
     };
-    return (_jsx("div", { onClick: contents[index].onClick, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsxs("div", { className: cn(titleSet), children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl md:text-2xl", children: titles.title })] }), _jsx(LineBreaks, { className: cn(subtitleStyles), texts: titles.subtitle }), _jsx("div", { className: cn(buttonBoxPosition), onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: cn(buttonBox), children: [_jsxs("div", { className: cn(handlePosition), children: [_jsx("button", { onClick: handlePrev, className: "w-10 md:w-6 h-full flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, { color: "text-gray-dark" }) }), _jsx("button", { onClick: handleNext, className: "w-10 md:w-6 h-full flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, { color: "text-gray-dark" }) })] }), _jsxs("div", { className: "flex flex-row md:gap-2 gap-4 justify-center items-center", children: [_jsx("div", { className: "text-gray-dark w-4 text-sm text-center", children: index + 1 }), _jsx("div", { className: "w-0.5 h-3 bg-gray-medium" }), _jsx("div", { className: "text-gray-dark w-4 text-sm text-center", children: contents.length })] })] }) })] }), _jsx("div", { className: "h-full overflow-hidden w-fit image-container", children: image && (_jsx(animated.img, { src: image, alt: "carousel-image", onLoad: () => setLoaded(true), className: "object-cover h-full z-0", style: transitionStyles })) }), isMD && (_jsx("div", { className: cn(playbutton), onClick: handlePlayPause, children: isPlaying ? (_jsx("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", children: _jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M9.5.25A1.5 1.5 0 008 1.75v10.5a1.5 1.5 0 003 0V1.75A1.5 1.5 0 009.5.25zm-7 0A1.5 1.5 0 001 1.75v10.5a1.5 1.5 0 003 0V1.75A1.5 1.5 0 002.5.25z", clipRule: "evenodd" }) })) : (_jsx("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", children: _jsx("path", { fill: "currentColor", d: "M1.688 12.952a1 1 0 001.614.789l7.4-5.77a1 1 0 00.019-1.562L3.32.34a1 1 0 00-1.634.774v11.838z" }) })) }))] }) }));
+    return (_jsx("div", { onClick: contents[index].onClick, className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(titleWrapper), children: [_jsxs("div", { className: cn(titleSet), children: [_jsx("div", { className: cn(tagBox), children: tagString[tag.type] }), _jsx("div", { className: "font-pretendard-bold text-xl md:text-2xl", children: titles.title })] }), isXXS ? (_jsx(LineBreaks, { className: cn(subtitleStyles), texts: titles.subtitle })) : (_jsx("div", { className: cn(subtitleStyles), children: titles.subtitle })), _jsx("div", { className: cn(buttonBoxPosition), onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: cn(buttonBox), children: [_jsxs("div", { className: cn(handlePosition), children: [_jsx("button", { onClick: handlePrev, className: "w-10 md:w-6 h-full flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, { color: "text-gray-dark" }) }), _jsx("button", { onClick: handleNext, className: "w-10 md:w-6 h-full flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, { color: "text-gray-dark" }) })] }), _jsxs("div", { className: "flex flex-row md:gap-2 gap-4 justify-center items-center", children: [_jsx("div", { className: "text-gray-dark w-4 text-sm text-center", children: index + 1 }), _jsx("div", { className: "w-0.5 h-3 bg-gray-medium" }), _jsx("div", { className: "text-gray-dark w-4 text-sm text-center", children: contents.length })] })] }) })] }), _jsx("div", { className: "h-full overflow-hidden w-fit image-container", children: image && (_jsx(animated.img, { src: image, alt: "carousel-image", onLoad: () => setLoaded(true), className: "object-cover h-full z-0", style: transitionStyles })) }), isMD && (_jsx("div", { className: cn(playbutton), onClick: handlePlayPause, children: isPlaying ? (_jsx("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", children: _jsx("path", { fill: "currentColor", fillRule: "evenodd", d: "M9.5.25A1.5 1.5 0 008 1.75v10.5a1.5 1.5 0 003 0V1.75A1.5 1.5 0 009.5.25zm-7 0A1.5 1.5 0 001 1.75v10.5a1.5 1.5 0 003 0V1.75A1.5 1.5 0 002.5.25z", clipRule: "evenodd" }) })) : (_jsx("svg", { width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", children: _jsx("path", { fill: "currentColor", d: "M1.688 12.952a1 1 0 001.614.789l7.4-5.77a1 1 0 00.019-1.562L3.32.34a1 1 0 00-1.634.774v11.838z" }) })) }))] }) }));
 }

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

@@ -48,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-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-8138 " })) : (_jsx("div", { children: "\uACE0\uB824\uB300 \uD1A0\uC140 \uC804\uBB38\uAC00 \uACFC\uC815 | 02-953-8138 " })), _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: "" }) }) })] })] }) }));
+    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-924-8138 " })) : (_jsx("div", { children: "\uACE0\uB824\uB300 \uD1A0\uC140 \uC804\uBB38\uAC00 \uACFC\uC815 | 02-924-8138 " })), _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.d.ts

@@ -5,6 +5,6 @@ export default function Header({ logo, rightButton, contents, }: {
         node: ReactNode;
         onClick?: OnClick;
     };
-    rightButton?: _Button;
+    rightButton?: React.ReactNode;
     contents: _Button[];
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
-import { cn, gradient } from "../../../../util";
-import { Label } from "../../../../widget";
+import { cn } from "../../../../util";
 import { useResponsive } from "../../../../hook";
 import { gsap } from "gsap";
 export default function Header({ logo, rightButton, contents, }) {
@@ -148,15 +147,5 @@ 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 && (_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", { 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,
-                                    text: "text-white",
-                                } })) })] })] }) }));
+    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 })] })] }) }));
 }

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

@@ -7,7 +7,7 @@ export default function Layout({ contents, children, logo, rightButton, option,
         node: ReactNode;
         onClick?: OnClick;
     };
-    rightButton?: Button;
+    rightButton?: React.ReactNode;
     option?: {
         isPulled?: boolean;
     };

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.322
+1.0.324