@edu-tosel/design 1.0.347 → 1.0.348

package/layout/template/home/Announcement.js

@@ -64,8 +64,8 @@ export default function Announcement({ banners, browse }) {
     };
     const deckTitle = {
         displays: "flex items-center gap-x-4 xl:pl-5 md:pl-[76px] pl-5",
-        sizes: "max-w-300 w-full",
-        textstyles: "font-pretendard-var font-bold text-2xl text-gray-dark",
+        sizes: "max-w-7xl w-full",
+        textstyles: "font-pretendard-var font-bold text-xl md:text-2xl lg:text-3xl text-teal-800 text-center md:text-left leading-tight",
     };
     const cardPositioning = {
         displays: "flex flex-nowrap",
@@ -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-1200px)]",
+        spacings: "gap-5 xl:mr-[calc(100vw-900px)]",
     };
     const buttonPositioning = {
         displays: "flex flex-row",
@@ -99,7 +99,7 @@ export default function Announcement({ banners, browse }) {
         animation: "duration-300",
         test: "bg-gray-medium/20 pointer-events-none backdrop-blur-sm opacity-30",
     };
-    return (_jsx("div", { className: cn(bgWrapper), children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsxs("div", { className: cn(deckTitle), children: [_jsx("div", { children: "\uACF5\uC9C0\uC0AC\uD56D" }), browse && (_jsx(Label.Button, { title: "\uB354 \uBCF4\uAE30", onClick: browse, option: {
+    return (_jsx("div", { className: cn(bgWrapper), children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsxs("div", { className: cn(deckTitle), children: [_jsx("div", { children: "\uB354 \uB098\uC740 \uACBD\uD5D8\uC744 \uC704\uD55C \uC548\uB0B4" }), browse && (_jsx(Label.Button, { title: "\uB354 \uBCF4\uAE30", onClick: browse, option: {
                                     width: "xs",
                                     height: "xs",
                                     text: "text-white hover:text-green-dark font-bold",
@@ -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-600px)] md:translate-x-[56px]",
+        position: "xl:translate-x-[calc(50vw-770px)] md:translate-x-[56px]",
         transition: "duration-300",
         displays: "relative display-block overflow-hidden",
         fonts: "font-pretendard-var",

package/layout/template/home/NewsPaper.js

@@ -60,8 +60,8 @@ export default function NewsPaper({ banners, browse, option, }) {
     };
     const deckTitle = {
         displays: "flex items-center gap-x-4 xl:pl-5 md:pl-[76px] pl-5",
-        sizes: "max-w-300 w-full",
-        textStyles: "font-pretendard-var font-bold text-2xl text-green-dark",
+        sizes: "max-w-7xl w-full",
+        textStyles: "font-pretendard-var font-bold text-xl md:text-2xl lg:text-3xl text-teal-800 text-center md:text-left leading-tight",
     };
     const cardPositioning = {
         displays: "flex flex-nowrap",
@@ -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-1200px)]",
+        spacings: "gap-5 xl:mr-[calc(100vw-900px)]",
     };
     const buttonPositioning = {
         displays: "flex flex-row",
@@ -95,7 +95,7 @@ export default function NewsPaper({ banners, browse, option, }) {
         animation: "duration-300",
         test: "bg-gray-medium/20 pointer-events-none backdrop-blur-sm opacity-30",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsxs("div", { className: cn(deckTitle), children: [_jsx("div", { children: "\uC0C8\uB85C\uC6B4 \uC18C\uC2DD" }), _jsx(Label.Button, { title: "\uB354 \uBCF4\uAE30", onClick: browse, option: {
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsxs("div", { className: cn(deckTitle), children: [_jsx("div", { children: "\uB0B4\uC77C\uC758 \uC601\uC5B4 \uAE30\uC900\uC744 \uB9CC\uB4DC\uB294 TOSEL\uC758 \uC624\uB298" }), _jsx(Label.Button, { title: "\uB354 \uBCF4\uAE30", onClick: browse, option: {
                                 width: "xs",
                                 height: "xs",
                                 text: "text-white hover:text-green-dark font-bold",
@@ -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-600px)] md:translate-x-[56px]",
+        position: "xl:translate-x-[calc(50vw-770px)] md:translate-x-[56px]",
         transition: "duration-300",
         displays: "relative display-block overflow-hidden",
         fonts: "font-pretendard-var",

package/layout/template/home/Service.js

@@ -59,8 +59,8 @@ export default function Service({ banners }) {
     };
     const deckTitle = {
         displays: "xl:pl-5 md:pl-[76px] pl-5",
-        sizes: "max-w-300 w-full",
-        textstyles: "font-pretendard-var font-bold text-2xl text-green-dark",
+        sizes: "max-w-7xl w-full",
+        textstyles: "font-pretendard-var font-bold text-xl md:text-2xl lg:text-3xl text-teal-800 text-center md:text-left leading-tight",
     };
     const cardPositioning = {
         displays: "flex flex-nowrap",
@@ -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-1200px)]",
+        spacings: "gap-5 xl:mr-[calc(100vw-900px)]",
     };
     const buttonPositioning = {
         displays: "flex flex-row",
@@ -94,7 +94,7 @@ export default function Service({ banners }) {
         animation: "duration-300",
         test: "bg-gray-medium/20 pointer-events-none backdrop-blur-sm opacity-30",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsx("div", { className: cn(deckTitle), children: "\uD1A0\uC140\uC758 \uCC28\uBCC4\uD654\uB41C \uC11C\uBE44\uC2A4" }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) }) }) }), _jsxs("div", { className: cn(buttonPositioning), children: [_jsx("div", { className: cn(canScrollLeft ? hoverButton : disabledButton), onClick: canScrollLeft ? () => handleScroll("left") : undefined, children: _jsx("img", { src: "images/home/handle-left.svg", alt: "" }) }), _jsx("div", { className: cn(canScrollRight ? hoverButton : disabledButton), onClick: canScrollRight ? () => handleScroll("right") : undefined, children: _jsx("img", { src: "images/home/handle-right.svg", alt: "" }) })] })] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsx("div", { className: cn(deckTitle), children: "TOSEL\uB9CC\uC758 \uC815\uAD50\uD55C \uD559\uC2B5 \uC2DC\uC2A4\uD15C \uC194\uB8E8\uC158\uC744 \uC18C\uAC1C\uD569\uB2C8\uB2E4." }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) }) }) }), _jsxs("div", { className: cn(buttonPositioning), children: [_jsx("div", { className: cn(canScrollLeft ? hoverButton : disabledButton), onClick: canScrollLeft ? () => handleScroll("left") : undefined, children: _jsx("img", { src: "images/home/handle-left.svg", alt: "" }) }), _jsx("div", { className: cn(canScrollRight ? hoverButton : disabledButton), onClick: canScrollRight ? () => handleScroll("right") : undefined, children: _jsx("img", { src: "images/home/handle-right.svg", alt: "" }) })] })] }));
 }
 function Banner({ titles, onClick, image, option }) {
     const { background } = option ?? {};
@@ -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-600px)] md:translate-x-[56px]",
+        position: "xl:translate-x-[calc(50vw-770px)] md:translate-x-[56px]",
         transition: "duration-300",
         displays: "relative display-block overflow-hidden",
         fonts: "font-pretendard-var",

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

@@ -0,0 +1,9 @@
+export default function Session({ sessions, }: {
+    sessions: {
+        label: string;
+        title: string;
+        content: string;
+        background: string;
+        onClick: () => void;
+    }[];
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/home/Session.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function Session({ sessions, }) {
+    const container = {
+        displays: "flex flex-col md:flex-row justify-center items-stretch",
+        sizes: "w-full max-w-7xl mx-auto",
+        spacings: "px-5 md:px-0 mt-4 md:mt-8 mb-6 md:mb-8 gap-4 md:gap-6",
+    };
+    const card = {
+        displays: "flex flex-col relative group cursor-pointer",
+        sizes: "w-full md:w-1/3 h-auto min-h-[200px]",
+        spacings: "p-6 md:p-8",
+        backgrounds: "rounded-2xl",
+        shadows: "shadow-sm",
+        animation: "transition-all duration-300 hover:shadow-lg hover:scale-[1.02]",
+    };
+    const header = {
+        displays: "flex flex-row justify-between items-start",
+        sizes: "w-full",
+        spacings: "mb-4",
+    };
+    const labelStyle = {
+        fonts: "text-base md:text-lg font-bold text-black",
+    };
+    const iconStyle = {
+        displays: "flex justify-center items-center",
+        sizes: "w-6 h-6",
+        fonts: "text-black",
+    };
+    const titleStyle = {
+        fonts: "text-xl md:text-2xl lg:text-3xl font-bold text-black",
+        spacings: "mb-3",
+    };
+    const contentStyle = {
+        fonts: "text-sm md:text-base text-black leading-relaxed",
+    };
+    return (_jsx("div", { className: cn(container), children: sessions.map((session, index) => (_jsxs("div", { onClick: session.onClick, className: cn(card, session.background), children: [_jsxs("div", { className: cn(header), children: [_jsx("div", { className: cn(labelStyle), children: session.label }), _jsx("div", { className: cn(iconStyle), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-5 h-5", children: _jsx("path", { d: "M7 17L17 7M7 7h10v10" }) }) })] }), _jsx("div", { className: cn(titleStyle), children: session.title }), _jsx("div", { className: cn(contentStyle), children: session.content })] }, index))) }));
+}

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

@@ -1,7 +1,18 @@
 import { Button } from "../../../interface";
+type ShortcutContent = {
+    image?: string;
+    label?: string;
+    title?: string;
+    content?: string;
+};
 export default function ShortcutBanner({ shortcuts, }: {
     shortcuts: (Button & {
         icon: string;
         background?: string;
+        content?: ShortcutContent;
     })[];
 }): import("react/jsx-runtime").JSX.Element;
+declare function ShortcutContent({ content }: {
+    content: ShortcutContent;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/home/Shortcut.js

@@ -2,23 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { toSelectOption } from "../../../interface";
 import { cn } from "../../../util";
 import { useResponsive } from "../../../hook";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 export default function ShortcutBanner({ shortcuts, }) {
     const isXS = useResponsive("xs");
     const [isExpanded, setIsExpanded] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
     const container = {
         displays: "flex flex-col justify-start justify-start xs:justify-center xs:items-center",
-        spacings: "pt-10 pb-15",
     };
-    return (_jsx("div", { className: cn(container), children: !isExpanded ? (_jsx(ScrollMode, { shortcuts: shortcuts })) : (_jsx(GridMode, { shortcuts: shortcuts })) }));
+    const selectedShortcut = shortcuts[selectedIndex];
+    return (_jsxs("div", { className: cn(container), children: [!isExpanded ? (_jsx(ScrollMode, { shortcuts: shortcuts, selectedIndex: selectedIndex, setSelectedIndex: setSelectedIndex })) : (_jsx(GridMode, { shortcuts: shortcuts, selectedIndex: selectedIndex, setSelectedIndex: setSelectedIndex })), selectedShortcut?.content && (_jsx(ShortcutContent, { content: selectedShortcut.content }, selectedIndex))] }));
 }
-function ScrollMode({ shortcuts, }) {
+function ScrollMode({ shortcuts, selectedIndex, setSelectedIndex, }) {
     const scrollWrapper = {
         displays: "flex justify-start items-center overflow-x-scroll scrollbar-hidden",
         sizes: "w-full h-fit",
         spacings: "px-5 pb-10",
         graphics: "antialiased",
-        boundaries: "border-b-1 border-gray-200",
     };
     const buttonWrapper = {
         displays: "flex justify-center items-center",
@@ -34,7 +34,7 @@ function ScrollMode({ shortcuts, }) {
     };
     const buttonSet = {
         displays: "group flex flex-col justify-center items-center",
-        sizes: "w-18",
+        sizes: "w-22",
         spacings: "gap-2",
     };
     const tagBox = {
@@ -44,17 +44,20 @@ function ScrollMode({ shortcuts, }) {
         animation: "duration-100",
     };
     const iconContainer = {
-        sizes: "size-14 xs:size-16 rounded-lg overflow-hidden",
+        sizes: "size-18 xs:size-20 rounded-lg overflow-hidden",
         shadows: "shadow-none",
         animation: "duration-100",
         hoveraction: "group-hover:shadow-icon-hover group-hover:scale-103",
     };
-    return (_jsx("div", { className: cn(scrollWrapper), children: _jsx("div", { className: cn(buttonWrapper), children: 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))) }) }));
+    return (_jsx("div", { className: cn(scrollWrapper), children: _jsx("div", { className: cn(buttonWrapper), children: shortcuts.map((shortcut, index) => (_jsxs("button", { onClick: () => {
+                    setSelectedIndex(index);
+                    shortcut.onClick?.();
+                }, className: cn(buttonSet, selectedIndex === index ? "border-b-[3px] border-black" : ""), 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))) }) }));
 }
-function GridMode({ shortcuts, }) {
+function GridMode({ shortcuts, selectedIndex, setSelectedIndex, }) {
     const container = {
         displays: "flex flex-col justify-center items-center",
-        spacings: "gap-y-10 mt-5",
+        spacings: "gap-y-10",
         sizes: "w-full h-fit",
     };
     const gridWrapper = {
@@ -70,7 +73,7 @@ function GridMode({ shortcuts, }) {
     };
     const buttonSet = {
         displays: "group flex flex-col justify-center items-center",
-        sizes: "w-20",
+        sizes: "w-24",
         spacings: "gap-2",
     };
     const tagBox = {
@@ -80,12 +83,53 @@ function GridMode({ shortcuts, }) {
         animation: "duration-100",
     };
     const iconContainer = {
-        sizes: "size-16 xs:size-18 rounded-lg overflow-hidden",
+        sizes: "size-20 xs:size-22 rounded-lg overflow-hidden",
         shadows: "shadow-none",
         animation: "duration-100",
         hoveraction: "group-hover:scale-103",
     };
-    return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(gridWrapper), children: 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))) }) }));
+    return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(gridWrapper), children: shortcuts.map((shortcut, index) => (_jsxs("button", { onClick: () => {
+                    setSelectedIndex(index);
+                    shortcut.onClick?.();
+                }, className: cn(buttonSet, selectedIndex === index ? "border-b-[3px] border-black" : ""), 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))) }) }));
+}
+function ShortcutContent({ content }) {
+    const [isVisible, setIsVisible] = useState(false);
+    useEffect(() => {
+        setIsVisible(false);
+        const timer = setTimeout(() => {
+            setIsVisible(true);
+        }, 10);
+        return () => clearTimeout(timer);
+    }, [content]);
+    const container = {
+        displays: "flex flex-col md:flex-row items-stretch",
+        sizes: "w-full max-w-7xl h-auto",
+        spacings: "px-2 md:px-0 py-0 mt-3 md:mt-5 mb-3 md:mb-5 gap-0 md:gap-6",
+        backgrounds: "bg-transparent rounded-2xl",
+        boundaries: "overflow-hidden",
+        animation: `transition-all duration-500 ease-in-out ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`,
+    };
+    const imageContainer = {
+        displays: "flex justify-center items-center",
+        sizes: "w-full md:w-1/2 h-auto min-h-[200px] md:min-h-[300px]",
+        spacings: "p-4 md:p-0"
+    };
+    const textContainer = {
+        displays: "flex flex-col justify-center",
+        sizes: "w-full md:w-1/2 h-auto min-h-[200px] md:min-h-[300px]",
+        spacings: "p-4 md:p-8 gap-3 md:gap-4",
+    };
+    const labelStyle = {
+        fonts: "text-sm md:text-base text-gray-500 font-medium",
+    };
+    const titleStyle = {
+        fonts: "text-3xl md:text-3xl font-bold text-gray-900",
+    };
+    const contentStyle = {
+        fonts: "text-base md:text-lg text-gray-600 leading-relaxed",
+    };
+    return (_jsxs("div", { className: cn(container), children: [content.image && (_jsx("div", { className: cn(imageContainer), children: _jsx("img", { src: content.image, alt: content.title || "Content image", className: "w-full h-auto object-contain" }) })), _jsxs("div", { className: cn(textContainer), children: [content.label && (_jsx("div", { className: cn(labelStyle), children: content.label })), content.title && (_jsx("div", { className: cn(titleStyle), children: content.title })), content.content && (_jsx("div", { className: cn(contentStyle), children: content.content }))] })] }));
 }
 function ModeToggle({ state, selectOptions: selectOptionsInput, option, }) {
     const selectOptions = selectOptionsInput?.map(toSelectOption);

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

@@ -6,6 +6,7 @@ import NewsPaper from "./NewsPaper";
 import Service from "./Service";
 import Shortcut from "./Shortcut";
 import Float from "./Float";
+import Session from "./Session";
 declare const Home: {
     Layout: typeof Layout;
     Navigation: typeof Navigation;
@@ -15,5 +16,6 @@ declare const Home: {
     Service: typeof Service;
     NewsPaper: typeof NewsPaper;
     Float: typeof Float;
+    Session: typeof Session;
 };
 export default Home;

package/layout/template/home/index.js

@@ -6,6 +6,7 @@ import NewsPaper from "./NewsPaper";
 import Service from "./Service";
 import Shortcut from "./Shortcut";
 import Float from "./Float";
+import Session from "./Session";
 const Home = {
     Layout,
     Navigation,
@@ -15,5 +16,6 @@ const Home = {
     Service,
     NewsPaper,
     Float,
+    Session
 };
 export default Home;

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.347
+1.0.348