@edu-tosel/design 1.0.47 → 1.0.48

package/layout/template/home/Promotion.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SVG from "../../../asset/SVG";
+import { cn, gradient } from "../../../util";
+export default function Promotion({ banners, options, }) {
+    const { className } = options ?? {};
+    const container = {
+        positions: "relative",
+        displays: "flex flex-col",
+        boundaries: "pl-80",
+        className,
+    };
+    const body = {
+        displays: "flex flex-row gap-x-5",
+        sizes: "w-fit",
+        boundaries: "mt-7.5",
+        styles: "overflow-x-hidden",
+    };
+    const buttonBox = {
+        displays: "flex justify-between items-center",
+        sizes: "w-18 h-7.5",
+        boundaries: "mt-5 px-5",
+        backgrounds: gradient.bg.greenToRed,
+        styles: " rounded-full",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "font-pretendard-bold text-green-dark text-3xl", children: "\uD504\uB85C\uBAA8\uC158" }), _jsx("div", { className: cn(body), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.image.src))) }), _jsxs("div", { className: cn(buttonBox), children: [_jsx(SVG.Symbol.LessThan, { onClick: () => { } }), _jsx(SVG.Symbol.GreaterThan, { onClick: () => { } })] })] }));
+}
+function Banner({ image, options }) {
+    const { background, boundary } = options ?? {};
+    const container = {
+        positions: "relative",
+        sizes: "w-260 h-125",
+        backgrounds: background ?? "bg-white",
+        boundaries: boundary ?? "border-2 border-gray-light ",
+        styles: "rounded-xl overflow-hidden",
+    };
+    const imageBox = {
+        positions: "absolute",
+        locations: image.location ?? "bottom-0 right-0",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsx("img", { src: image.src, alt: "banner-promotion", className: cn(imageBox) }) }));
+}

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

@@ -0,0 +1,16 @@
+import { Titles } from "../../../interface";
+export default function Service({ banners }: {
+    banners: BannerProps[];
+}): import("react/jsx-runtime").JSX.Element;
+interface BannerProps {
+    titles: Titles;
+    image?: {
+        src: string;
+        location?: string;
+        isBlur?: boolean;
+    };
+    options?: {
+        background?: string;
+    };
+}
+export {};

package/layout/template/home/Service.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SVG from "../../../asset/SVG";
+import { cn, gradient } from "../../../util";
+export default function Service({ banners }) {
+    const container = {
+        positions: "relative",
+        displays: "flex flex-col",
+        boundaries: "pl-80",
+    };
+    const body = {
+        displays: "flex flex-row gap-x-5",
+        sizes: "w-fit",
+        boundaries: "mt-7.5",
+        styles: "overflow-x-hidden",
+    };
+    const buttonBox = {
+        displays: "flex justify-between items-center",
+        sizes: "w-18 h-7.5",
+        boundaries: "mt-5 px-5",
+        backgrounds: gradient.bg.greenToRed,
+        styles: " rounded-full",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "font-pretendard-bold text-green-dark text-3xl", children: "\uD1A0\uC140\uC758 \uCC28\uBCC4\uD654\uB41C \uC11C\uBE44\uC2A4" }), _jsx("div", { className: cn(body), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) }), _jsxs("div", { className: cn(buttonBox), children: [_jsx(SVG.Symbol.LessThan, { onClick: () => { } }), _jsx(SVG.Symbol.GreaterThan, { onClick: () => { } })] })] }));
+}
+function Banner({ titles, image, options }) {
+    const { background } = options ?? {};
+    const container = {
+        positions: "relative",
+        displays: "flex flex-col",
+        sizes: "w-93 h-125",
+        backgrounds: background ?? "bg-gray-light",
+        styles: "rounded-md overflow-hidden",
+    };
+    const titleBox = {
+        container: {
+            positions: "relative z-10",
+            paddings: "pt-12 pl-12",
+        },
+        title: {
+            fonts: "text-2xl font-pretendard-bold",
+            colors: titles.titleColor ?? "text-gray-dark ",
+        },
+        subtitle: {
+            fonts: "text-lg font-pretendard-bold ",
+            colors: titles.subtitleColor ?? "text-gray-medium",
+        },
+    };
+    const imageBox = {
+        positions: "absolute z-0",
+        locations: image?.location ?? "bottom-0 right-0",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.subtitle), children: titles.subtitle }), _jsx("div", { className: cn(titleBox.title), children: titles.title })] }), image && _jsx("img", { src: image?.src, alt: "banner", className: cn(imageBox) }), image?.isBlur && (_jsx("div", { className: "absolute bg-gradient-to-br from-white to-transparent z-0  w-full h-full" }))] }));
+}

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

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

package/layout/template/home/Shortcut.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function ShortcutBanner({ shortcuts, }) {
+    const container = {
+        displays: "flex gap-x-10 justify-center items-center",
+        sizes: "w-full h-57.5",
+    };
+    const tagBox = {
+        displays: "flex justify-center items-center",
+        sizes: "w-16 h-6.25 ",
+        fonts: "text-xs font-pretendard-bold",
+        styles: "bg-gray-light rounded-md",
+    };
+    return (_jsx("div", { className: cn(container), children: shortcuts.map((shortcut) => (_jsxs("button", { onClick: shortcut.onClick, className: "flex flex-col gap-y-3.75", children: [_jsx("img", { src: shortcut.icon, alt: "shortcut-icon", width: 64, height: 64 }), _jsx("div", { className: cn(tagBox), children: shortcut.title })] }, shortcut.title))) }));
+}

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

@@ -0,0 +1,17 @@
+import Layout from "./layout";
+import Carousel from "./layout/Carousel";
+import Navigation from "./Navigation";
+import Notice from "./Notice";
+import Promotion from "./Promotion";
+import Service from "./Service";
+import Shortcut from "./Shortcut";
+declare const Home: {
+    Layout: typeof Layout;
+    Navigation: typeof Navigation;
+    Carousel: typeof Carousel;
+    Notice: typeof Notice;
+    Shortcut: typeof Shortcut;
+    Service: typeof Service;
+    Promotion: typeof Promotion;
+};
+export default Home;

package/layout/template/home/index.js

@@ -0,0 +1,17 @@
+import Layout from "./layout";
+import Carousel from "./layout/Carousel";
+import Navigation from "./Navigation";
+import Notice from "./Notice";
+import Promotion from "./Promotion";
+import Service from "./Service";
+import Shortcut from "./Shortcut";
+const Home = {
+    Layout,
+    Navigation,
+    Carousel,
+    Notice,
+    Shortcut,
+    Service,
+    Promotion,
+};
+export default Home;

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

@@ -0,0 +1,5 @@
+import { CarouselContent } from "../../../../interface";
+import { Tag } from "../../../../interface/domain";
+export default function Carousel({ contents, }: {
+    contents: CarouselContent<Tag>[];
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../../../util";
+import { useEase } from "../../../../hook";
+import { LineBreaks } from "../../../../text";
+import SVG from "../../../../asset/SVG";
+import { TagStyles } from "../../../../interface/domain";
+export default function Carousel({ contents, }) {
+    const [index, setIndex] = useState(0);
+    const [flag, inTime] = useEase(10000, 1000);
+    // useEffect(() => {
+    //   if (flag) {
+    //     setIndex((index + 1) % contents.length);
+    //   }
+    // }, [flag]);
+    const { tag, titles, image, options } = contents[index];
+    const { text, background } = options ?? {};
+    const container = {
+        displays: "flex justify-center items-center",
+        sizes: "w-full h-100",
+        background,
+    };
+    const body = {
+        positions: "relative",
+        displays: "flex items-center",
+        sizes: "w-full max-w-256 h-full",
+        text: text ?? "text-gray-dark",
+    };
+    const tagBox = {
+        displays: "flex justify-center items-center",
+        sizes: "w-20 h-8",
+        background: TagStyles[tag].background,
+        fonts: "text-white font-pretendard-bold text-lg leading-none",
+        styles: "rounded-md",
+    };
+    const buttonBox = {
+        positions: "absolute bottom-0 left-0",
+        displays: "flex justify-between items-center",
+        sizes: "w-23.25 h-6.25 bg-gray-dark rounded-full",
+        paddings: "px-1.5",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "relative w-64 h-50 flex flex-col", children: [_jsx("div", { className: cn(tagBox), children: TagStyles[tag].title }), _jsx("div", { className: "font-pretendard-bold text-2xl mt-2", children: titles.title }), _jsx(LineBreaks, { className: "mt-7.5", texts: titles.subtitle }), _jsxs("div", { className: cn(buttonBox), children: [_jsx("button", { onClick: () => setIndex((index - 1 + contents.length) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.LessThan, {}) }), _jsxs("div", { className: "text-white", children: [index + 1, "/", contents.length] }), _jsx("button", { onClick: () => setIndex((index + 1) % contents.length), className: "w-5 h-5 flex justify-center items-center", children: _jsx(SVG.Symbol.GreaterThan, {}) })] })] }), image && (_jsx("img", { src: image, alt: "carousel-image", className: "absolute bottom-0 right-0" }))] }) }));
+}

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

@@ -0,0 +1 @@
+export default function Footer(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../util";
+export default function Footer() {
+    const container = {
+        displays: "flex justify-center items-center",
+        sizes: "w-full h-114",
+        backgrounds: "bg-gray-light",
+        styles: "text-gray-dark",
+    };
+    const body = {
+        sizes: "w-full max-w-290",
+        paddings: "py-8.5 px-7.5",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "flex items-center gap-9.5", children: [_jsx("img", { src: "/images/logos/tosel.png", width: 147, height: 31.93 }), _jsx("img", { src: "/images/logos/itc-script.png", width: 122, height: 51 })] }), _jsxs("div", { className: "flex justify-between items-center border-b-1 border-gray-dark pb-4 mt-11.5", children: [_jsx("div", { children: "Copyright TOSEL. \u24D2 All Rights Reserved." }), _jsx("div", { className: "flex gap-5", children: buttons.map((button, index) => (_jsx("div", { children: button.title }, index))) })] }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("div", { children: "\uC11C\uC6B8\uC2DC \uC131\uBD81\uAD6C \uC548\uC554\uB85C 145 \uACE0\uB824\uB300\uD559\uAD50 \uB77C\uC774\uC2DC\uC6C0 4\uCE35" }), _jsx("div", { children: "Lyceum Korea University, 145 Anam Ro, Seongbuk-Gu, Seoul, Korea 02841" })] })] }) }));
+}
+const buttons = [
+    {
+        title: "이용약관",
+    },
+    {
+        title: "개인정보 처리방침",
+    },
+    {
+        title: "FAQ",
+    },
+];

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

@@ -0,0 +1 @@
+export default function Header(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../util";
+export default function Header() {
+    const container = {
+        displays: "flex justify-center items-center",
+        sizes: "w-full",
+        styles: "bg-white box-shadow",
+    };
+    const body = {
+        displays: "flex items-center justify-between",
+        className: "w-full max-w-262 h-25",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel-logo", width: 147, height: 31.93 }), _jsx("div", { className: "flex items-center gap-7.5", children: buttons.map((button, index) => (_jsx("div", { children: button.title }, index))) })] }) }));
+}
+const buttons = [
+    {
+        title: "About Us",
+    },
+    {
+        title: "정기시험",
+    },
+    {
+        title: "교재/학습",
+    },
+    {
+        title: "LAB",
+    },
+    {
+        title: "올림피아드",
+    },
+    {
+        title: "게시판",
+    },
+];

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

@@ -0,0 +1,3 @@
+export default function Layout({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/home/layout/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../util";
+import Footer from "./Footer";
+import Header from "./Header";
+export default function Layout({ children }) {
+    const container = {
+        displays: "flex flex-col",
+        sizes: "w-full min-h-screen",
+        overflows: "overflow-x-hidden",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx(Header, {}), children, _jsx(Footer, {})] }));
+}

package/package.json

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