@edu-tosel/design 1.0.126 → 1.0.127

package/card/design/RollCard.design.js

@@ -5,7 +5,7 @@ import { Action, Shelf } from "../../layout";
 import Card from "./Card.design";
 import { useEffect, useState } from "react";
 import { cn } from "../../util";
-import useMobile from "../../hook/useMobile";
+import useMobile from "../../hook/useResponsive";
 export default function RollCardDesign({ titles, state, disabled, isFixed, children, }) {
     const [isOpen, setIsOpen] = state;
     const [isDisabled, disabledFn] = disabled || [false, () => { }];

package/globals.css

@@ -116,6 +116,9 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   background: rgba(16, 86, 82, 0.1);
   color: #105652;
 }
+.box-shadow-green-sm {
+  box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38);
+}
 .box-green-focus:focus {
   background: white;
   color: black;

package/hook/index.d.ts

@@ -1,3 +1,4 @@
 export { default as useEase } from "./useEase";
 export { default as useEvents } from "./useEvents";
 export { default as useFlag } from "./useFlag";
+export { default as useResponsive } from "./useResponsive";

package/hook/index.js

@@ -1,3 +1,4 @@
 export { default as useEase } from "./useEase";
 export { default as useEvents } from "./useEvents";
 export { default as useFlag } from "./useFlag";
+export { default as useResponsive } from "./useResponsive";

package/layout/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Action } from "./template/Action";
 export { default as About } from "./template/About";
 export { default as Announcement } from "./template/Announcement";
+export { default as Archive } from "./template/Archive";
 export { default as Home } from "./template/home";
 export * from "./template/dashboard";
 export { default as Promotion } from "./template/Promotion";

package/layout/index.js

@@ -1,6 +1,7 @@
 export { default as Action } from "./template/Action";
 export { default as About } from "./template/About";
 export { default as Announcement } from "./template/Announcement";
+export { default as Archive } from "./template/Archive";
 export { default as Home } from "./template/home";
 export * from "./template/dashboard";
 export { default as Promotion } from "./template/Promotion";

package/layout/template/Announcement/Layout.d.ts

@@ -1,3 +1,5 @@
-export default function Layout({ children }: {
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+import { BbsLayoutProps } from "../BbsLayout";
+interface LayoutProps extends Omit<BbsLayoutProps, "title"> {
+}
+export default function Layout({ children }: LayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Announcement/Layout.js

@@ -1,15 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../../util";
+import { jsx as _jsx } from "react/jsx-runtime";
+import BbsLayout from "../BbsLayout";
 export default function Layout({ children }) {
-    const container = {
-        displays: "flex flex-col items-center",
-        sizes: "w-full min-h-screen",
-    };
-    const header = {
-        displays: "flex justify-start items-end",
-        sizes: "w-full max-w-[1200px] h-[188px]",
-        boundaries: "pl-12 pb-10",
-    };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(header), children: _jsxs("div", { className: "flex gap-x-5 items-center", children: [_jsx(SVG, {}), _jsx("div", { className: "text-[40px] leading-none font-pretendard-bold text-green-dark", children: "\uACF5\uC9C0\uC0AC\uD56D" })] }) }), children] }));
+    return (_jsx(BbsLayout, { title: "\uACF5\uC9C0\uC0AC\uD56D", icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", children: _jsx("path", { d: "M31.332 7.776C31.0653 6.8326 30.4979 6.0021 29.716 5.41077C28.934 4.81944 27.9804 4.49964 27 4.5H21C18.94 4.5 17.2 5.886 16.668 7.776M31.332 7.776C31.442 8.164 31.5 8.576 31.5 9C31.5 9.39783 31.342 9.77936 31.0607 10.0607C30.7794 10.342 30.3978 10.5 30 10.5H18C17.6022 10.5 17.2206 10.342 16.9393 10.0607C16.658 9.77936 16.5 9.39783 16.5 9C16.5 8.576 16.56 8.164 16.668 7.776M31.332 7.776C32.624 7.874 33.908 7.996 35.186 8.144C37.386 8.4 39 10.298 39 12.514V39C39 40.1935 38.5259 41.3381 37.682 42.182C36.8381 43.0259 35.6935 43.5 34.5 43.5H13.5C12.3065 43.5 11.1619 43.0259 10.318 42.182C9.47411 41.3381 9 40.1935 9 39V12.514C9 10.298 10.612 8.4 12.814 8.144C14.0961 7.99555 15.381 7.87286 16.668 7.776", stroke: "#105652", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }), children: children }));
 }
-const SVG = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", children: _jsx("path", { d: "M31.332 7.776C31.0653 6.8326 30.4979 6.0021 29.716 5.41077C28.934 4.81944 27.9804 4.49964 27 4.5H21C18.94 4.5 17.2 5.886 16.668 7.776M31.332 7.776C31.442 8.164 31.5 8.576 31.5 9C31.5 9.39783 31.342 9.77936 31.0607 10.0607C30.7794 10.342 30.3978 10.5 30 10.5H18C17.6022 10.5 17.2206 10.342 16.9393 10.0607C16.658 9.77936 16.5 9.39783 16.5 9C16.5 8.576 16.56 8.164 16.668 7.776M31.332 7.776C32.624 7.874 33.908 7.996 35.186 8.144C37.386 8.4 39 10.298 39 12.514V39C39 40.1935 38.5259 41.3381 37.682 42.182C36.8381 43.0259 35.6935 43.5 34.5 43.5H13.5C12.3065 43.5 11.1619 43.0259 10.318 42.182C9.47411 41.3381 9 40.1935 9 39V12.514C9 10.298 10.612 8.4 12.814 8.144C14.0961 7.99555 15.381 7.87286 16.668 7.776", stroke: "#105652", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }));

package/layout/template/Announcement/Many.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Announcement from ".";
 import { cn } from "../../../util";
 export default function Many({ contents }) {
     const body = {
@@ -13,5 +12,5 @@ export default function Many({ contents }) {
         fonts: "leading-tight",
         pointers: flag ? "cursor-pointer" : "cursor-default",
     });
-    return (_jsx(Announcement.Layout, { children: _jsx("div", { className: cn(body), children: contents.map((content) => (_jsxs("button", { onClick: content.onClick, className: cn(box(!!content.onClick)), children: [_jsx("div", { className: "text-[16px] text-gray-dark font-pretendard-bold", children: content.title }), _jsx("div", { className: "text-[12px] text-gray-medium", children: content.date })] }))) }) }));
+    return (_jsx("div", { className: cn(body), children: contents.map((content) => (_jsxs("button", { onClick: content.onClick, className: cn(box(!!content.onClick)), children: [_jsx("div", { className: "text-[16px] text-gray-dark font-pretendard-bold", children: content.title }), _jsx("div", { className: "text-[12px] text-gray-medium", children: content.date })] }))) }));
 }

package/layout/template/Announcement/One.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Announcement from ".";
 import { cn, isHTMLString } from "../../../util";
 export default function One({ title, date, content }) {
     const body = {
@@ -14,5 +13,5 @@ export default function One({ title, date, content }) {
     const contentBox = {
         boundaries: "pt-12",
     };
-    return (_jsx(Announcement.Layout, { children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-[24px] font-pretendard-bold", children: title }), _jsx("div", { className: "text-gray-medium", children: date })] }), isHTMLString(content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: content }, className: cn(contentBox) })) : (_jsx("div", { className: cn(contentBox), children: content }))] }) }));
+    return (_jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-[24px] font-pretendard-bold", children: title }), _jsx("div", { className: "text-gray-medium", children: date })] }), isHTMLString(content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: content }, className: cn(contentBox) })) : (_jsx("div", { className: cn(contentBox), children: content }))] }));
 }

package/layout/template/Archive/Container.d.ts

@@ -0,0 +1,6 @@
+import { Content as _Content } from "./Content";
+import { State } from "../../../interface";
+export default function Container({ contents, state: [search, _], }: {
+    contents: _Content[];
+    state: State<string>;
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/Archive/Container.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { cn } from "../../../util";
+import Archive from "./index";
+export default function Container({ contents, state: [search, _], }) {
+    const ref = useRef(null);
+    const container = {
+        sizes: "w-full",
+        boundaries: "p-5",
+    };
+    const body = {
+        displays: "grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-5 ",
+        sizes: "w-full",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(body), ref: ref, children: contents
+                .filter(({ titles, description }) => titles.title.includes(search) ||
+                titles.subtitle?.includes(search) ||
+                description.includes(search))
+                .map(({ titles, description, extension, onClick }) => (_jsx(Archive.Content, { titles: {
+                    title: titles.title,
+                    subtitle: titles.subtitle,
+                }, onClick: onClick, description: description, extension: extension }, titles.title + titles.subtitle + description))) }) }));
+}

package/layout/template/Archive/Content.d.ts

@@ -0,0 +1,10 @@
+import { OnClick, Titles } from "../../../interface";
+type Extension = "mp3" | "pdf" | "xls" | "hwp";
+export interface Content {
+    titles: Titles;
+    description: string;
+    extension: Extension;
+    onClick: OnClick;
+}
+export default function Content({ titles, description, extension, onClick, }: Content): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Archive/Content.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { cn } from "../../../util";
+import Action from "../Action";
+import { useActionStore } from "../../../store";
+import { animated, useTransition } from "react-spring";
+export default function Content({ titles, description, extension, onClick, }) {
+    const [isHover, setIsHover] = useState(false);
+    const { setView, clearView } = useActionStore();
+    const { title, subtitle, subtitleColor } = titles;
+    const container = {
+        displays: "flex-1",
+        sizes: "w-full min-w-[136px] sm:max-w-[148px] h-[138px]",
+    };
+    const topBox = {
+        positions: "relative",
+        displays: "flex flex-col justify-between",
+        sizes: "w-full h-25",
+        backgrounds: "bg-gray-light/20",
+        boundaries: "p-3 border-1 border-gray-light rounded-[4px]",
+        styles: "overflow-hidden",
+    };
+    const bottomBox = {
+        displays: "flex flex-col justify-center items-center",
+        sizes: "h-[38px] w-full",
+        fonts: "text-gray-medium text-[12px]",
+    };
+    const subTitleBox = {
+        fonts: "text-[12px] leading-none",
+        texts: subtitleColor ?? "text-gray-medium",
+        boundaries: "px-1 py-[2px]",
+    };
+    const id = useId();
+    useEffect(() => {
+        if (isHover)
+            return setView(id);
+        return clearView();
+    }, [isHover]);
+    return (_jsxs("div", { onMouseEnter: () => setIsHover(true), onMouseLeave: () => setIsHover(false), className: cn(container), children: [_jsx("div", { className: cn(topBox), children: _jsxs(Action.Show, { actions: [
+                        [id, _jsx(HoverView, { extension: extension, onClick: onClick })],
+                    ], children: [_jsx("div", { className: "flex", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "leading-tight font-pretendard-bold overflow-hidden text-ellipsis w-full h-[19px]", children: title }), _jsx("div", { className: cn(subTitleBox), children: subtitle })] }) }), _jsxs("div", { className: "flex justify-between items-end", children: [_jsx(Icon, { extension: extension }), _jsx("div", { className: "w-[33px] h-[18px] text-[12px] justify-center items-center flex leading-none bg-gray-light rounded-[4px] text-gray-dark", children: extension })] })] }) }), _jsx("div", { className: cn(bottomBox), children: _jsx("div", { children: description }) })] }));
+}
+function HoverView({ extension, onClick, showAction, }) {
+    const { isVisible } = showAction ?? {};
+    const container = {
+        displays: "flex flex-col gap-y-2 justify-center items-center",
+        positions: "absolute top-0 left-0",
+        sizes: "w-full h-full",
+        backgrounds: "bg-white/50",
+        pointers: "cursor-pointer",
+        styles: "backdrop-blur-sm",
+    };
+    const transitions = useTransition(isVisible, {
+        from: { opacity: 0 },
+        enter: { opacity: 1 },
+        leave: { opacity: 0 },
+        config: { duration: 300 },
+    });
+    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: onClick, children: [_jsx(HoverElement, { extension: extension }), _jsx("div", { className: cn("text-[12px]", extension === "mp3" ? "text-green-dark" : "text-gray-medium"), children: extension === "mp3" ? "재생하기" : "다운로드" })] })));
+}
+function HoverElement({ extension }) {
+    if (extension === "mp3")
+        return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [_jsx("path", { d: "M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M15.91 11.6721C15.9686 11.7046 16.0174 11.7521 16.0513 11.8098C16.0853 11.8675 16.1032 11.9332 16.1032 12.0001C16.1032 12.0671 16.0853 12.1328 16.0513 12.1905C16.0174 12.2481 15.9686 12.2957 15.91 12.3281L10.307 15.4411C10.2499 15.4728 10.1855 15.489 10.1202 15.4882C10.0549 15.4874 9.99099 15.4695 9.93472 15.4364C9.87845 15.4032 9.8318 15.356 9.79941 15.2993C9.76701 15.2426 9.74998 15.1784 9.75 15.1131V8.88712C9.75 8.60112 10.057 8.42112 10.307 8.56012L15.91 11.6721Z", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "w-6 h-6", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m20.25 7.5-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5m8.25 3v6.75m0 0-3-3m3 3 3-3M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z" }) }));
+}
+function Icon({ extension }) {
+    if (extension === "mp3")
+        return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.9522 1.65103C20.0448 1.72099 20.12 1.81151 20.1717 1.91546C20.2234 2.0194 20.2503 2.13393 20.2502 2.25003V16.303C20.2501 16.9549 20.0376 17.589 19.645 18.1093C19.2524 18.6297 18.701 19.008 18.0742 19.187L16.7542 19.564C16.4304 19.6612 16.0905 19.6931 15.7542 19.6579C15.4179 19.6226 15.092 19.521 14.7954 19.3588C14.4987 19.1965 14.2373 18.977 14.0262 18.7129C13.815 18.4488 13.6585 18.1454 13.5656 17.8204C13.4727 17.4953 13.4453 17.155 13.4849 16.8192C13.5246 16.4834 13.6306 16.1589 13.7967 15.8644C13.9628 15.5699 14.1858 15.3114 14.4526 15.1038C14.7195 14.8962 15.0249 14.7436 15.3512 14.655L17.6622 13.995C17.9756 13.9055 18.2513 13.7163 18.4476 13.4562C18.6439 13.196 18.7501 12.879 18.7502 12.553V6.99403L9.75021 9.56603V19.303C9.75007 19.9549 9.53763 20.589 9.14501 21.1093C8.7524 21.6297 8.20099 22.008 7.57421 22.187L6.25421 22.564C5.92997 22.6625 5.58937 22.6955 5.25225 22.6611C4.91514 22.6266 4.58826 22.5253 4.29068 22.3632C3.9931 22.2011 3.73077 21.9814 3.51898 21.7168C3.3072 21.4523 3.1502 21.1482 3.05714 20.8224C2.96408 20.4966 2.93682 20.1554 2.97695 19.819C3.01708 19.4825 3.1238 19.1573 3.29089 18.8625C3.45797 18.5677 3.68207 18.3091 3.95013 18.1018C4.21819 17.8945 4.52484 17.7426 4.85221 17.655L7.16221 16.995C7.4756 16.9055 7.7513 16.7163 7.94761 16.4562C8.14392 16.196 8.25014 15.879 8.25021 15.553V5.25003C8.25024 5.08706 8.30335 4.92855 8.4015 4.79846C8.49966 4.66837 8.63751 4.57379 8.79421 4.52903L19.2942 1.52903C19.4058 1.49703 19.5234 1.4914 19.6376 1.51257C19.7518 1.53374 19.8595 1.58114 19.9522 1.65103Z", fill: "#4C4C4C" }) }));
+    if (extension === "xls")
+        return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "w-6 h-6", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 0 1-1.125-1.125M3.375 19.5h7.5c.621 0 1.125-.504 1.125-1.125m-9.75 0V5.625m0 12.75v-1.5c0-.621.504-1.125 1.125-1.125m18.375 2.625V5.625m0 12.75c0 .621-.504 1.125-1.125 1.125m1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125m0 3.75h-7.5A1.125 1.125 0 0 1 12 18.375m9.75-12.75c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125m19.5 0v1.5c0 .621-.504 1.125-1.125 1.125M2.25 5.625v1.5c0 .621.504 1.125 1.125 1.125m0 0h17.25m-17.25 0h7.5c.621 0 1.125.504 1.125 1.125M3.375 8.25c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125m17.25-3.75h-7.5c-.621 0-1.125.504-1.125 1.125m8.625-1.125c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125M12 10.875v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 10.875c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125M13.125 12h7.5m-7.5 0c-.621 0-1.125.504-1.125 1.125M20.625 12c.621 0 1.125.504 1.125 1.125v1.5c0 .621-.504 1.125-1.125 1.125m-17.25 0h7.5M12 14.625v-1.5m0 1.5c0 .621-.504 1.125-1.125 1.125M12 14.625c0 .621.504 1.125 1.125 1.125m-2.25 0c.621 0 1.125.504 1.125 1.125m0 1.5v-1.5m0 0c0-.621.504-1.125 1.125-1.125m0 0h7.5" }) }));
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "w-6 h-6", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" }) }));
+}

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

@@ -0,0 +1,4 @@
+import { State } from "../../../interface";
+export default function Header({ state }: {
+    state: State<string>;
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/Archive/Header.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+import { Input } from "../../../widget";
+import { useResponsive } from "../../../hook";
+export default function Header({ state }) {
+    const container = {
+        displays: "flex justify-between items-start",
+        sizes: "w-full h-15",
+        boundaries: "px-5 pb-5",
+    };
+    const res = useResponsive();
+    return (_jsxs("div", { className: cn(container), children: [_jsx(Input, { state: state, placeholder: res ? "키워드를 입력하세요" : "", option: {
+                    width: res ? "md" : "sm",
+                } }), _jsx(ContentBox, { contents: [
+                    {
+                        title: "교재 음원",
+                        onClick: () => { },
+                    },
+                ] })] }));
+}
+function ContentBox({ contents }) {
+    const container = {
+        sizes: "h-[38px]",
+    };
+    const buttonBox = {
+        boundaries: "p-3 rounded-[8px]",
+        fonts: "leading-none text-[12px]",
+        backgrounds: "bg-green-dark/10",
+    };
+    return (_jsx("div", { className: cn(container), children: contents.map((content) => (_jsx("button", { className: cn(buttonBox), children: content.title }, content.title))) }));
+}

package/layout/template/Archive/Layout.d.ts

@@ -0,0 +1,5 @@
+import { BbsLayoutProps } from "../BbsLayout";
+interface LayoutProps extends Omit<BbsLayoutProps, "title"> {
+}
+export default function Layout({ children }: LayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Archive/Layout.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BbsLayout from "../BbsLayout";
+export default function Layout({ children }) {
+    return (_jsx(BbsLayout, { title: "\uC790\uB8CC\uC2E4", icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", children: _jsx("path", { d: "M36.7501 25.478L21.3641 40.864C19.6762 42.5519 17.387 43.5001 15.0001 43.5001C12.6131 43.5001 10.3239 42.5519 8.63605 40.864C6.94822 39.1762 6 36.887 6 34.5C6 32.1131 6.94822 29.8239 8.63605 28.136L30.5161 6.25602C31.0734 5.69895 31.735 5.25711 32.4631 4.95573C33.1912 4.65435 33.9715 4.49933 34.7595 4.49951C35.5475 4.4997 36.3277 4.65509 37.0557 4.95681C37.7836 5.25854 38.445 5.70069 39.0021 6.25802C39.5591 6.81535 40.001 7.47695 40.3023 8.20503C40.6037 8.93312 40.7587 9.71344 40.7586 10.5014C40.7584 11.2894 40.603 12.0697 40.3013 12.7976C39.9995 13.5256 39.5574 14.187 39.0001 14.744L17.1041 36.64C16.536 37.1846 15.7768 37.4821 14.9899 37.4722C14.2031 37.4622 13.4517 37.1435 12.8977 36.5847C12.3436 36.0259 12.0313 35.2719 12.028 34.485C12.0247 33.6981 12.3307 32.9414 12.8801 32.378L28.5001 16.758M17.1221 36.62L17.1021 36.64", stroke: "#105652", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), children: children }));
+}

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

@@ -0,0 +1,11 @@
+import Container from "./Container";
+import Content from "./Content";
+import Header from "./Header";
+import Layout from "./Layout";
+declare const Archive: {
+    Layout: typeof Layout;
+    Header: typeof Header;
+    Container: typeof Container;
+    Content: typeof Content;
+};
+export default Archive;

package/layout/template/Archive/index.js

@@ -0,0 +1,11 @@
+import Container from "./Container";
+import Content from "./Content";
+import Header from "./Header";
+import Layout from "./Layout";
+const Archive = {
+    Layout,
+    Header,
+    Container,
+    Content,
+};
+export default Archive;

package/layout/template/BbsLayout.d.ts

@@ -0,0 +1,6 @@
+export interface BbsLayoutProps {
+    title: string;
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+}
+export default function BbsLayout({ title, icon, children }: BbsLayoutProps): import("react/jsx-runtime").JSX.Element;

package/layout/template/BbsLayout.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
+export default function BbsLayout({ title, icon, children }) {
+    const container = {
+        displays: "flex flex-col items-center",
+        sizes: "w-full min-h-screen",
+        fonts: "antialiased",
+    };
+    const body = {
+        sizes: "w-full max-w-[1200px]",
+    };
+    const header = {
+        displays: "flex justify-start items-end",
+        sizes: "w-full  h-[188px]",
+        boundaries: "pl-12 pb-10",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsx("div", { className: cn(header), children: _jsxs("div", { className: "flex gap-x-5 items-center", children: [icon, _jsx("div", { className: "text-[40px] leading-none font-pretendard-bold text-green-dark", children: title })] }) }), children] }) }));
+}

package/layout/template/Olympiad/Features.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
 export default function Features() {
     const container = {
-        sizes: "w-full h-fit p-5",
+        sizes: "w-full h-fit",
         spacings: "p-5 my-12",
         displays: "flex flex-col justify-center items-center",
         graphics: "antialiased",

package/layout/template/Olympiad/Prizes.d.ts

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

package/layout/template/Olympiad/Prizes.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function Prizes() {
+    const container = {
+        sizes: "relative w-full h-fit",
+        spacings: "my-12 py-20",
+        displays: "flex flex-col justify-start items-center",
+        backgrounds: "bg-green-light",
+        graphics: "antialiased",
+        text: "break-keep",
+    };
+    //section title breaking control in reactive viewport
+    const sectionTitleBreaker = {
+        displays: "flex flex-col xs:flex-row xs:justify-center xs:gap-1",
+        sizes: "h-fit w-full",
+    };
+    const sectionTitle = {
+        textstyles: "text-xl text-center text-green-dark font-pretendard-bold md:text-2xl",
+        sizes: "h-fit",
+    };
+    //controls prizeSet reactive position
+    const prizeWrapper = {
+        sizes: "max-w-6xl w-full",
+        displays: "flex flex-row items-center justify-center md:justify-start",
+    };
+    const prizeSet = {
+        displays: "left-0 bottom-0 flex flex-col",
+    };
+    //controls medalholdingimga reactive position
+    const medalHandler = {
+        displays: "hidden md:absolute md:block md:max-w-160 right-0 z-0",
+    };
+    //text styling of prize detail
+    const prizeExplainWrapper = {
+        displays: "flex flex-col gap-2 items-center justify-center",
+        spacings: "mt-8",
+    };
+    const prizeExplainSet = {
+        displays: "flex flex-row gap-4 items-center justify-center",
+        textstyles: "text-green-dark text-sm md:text-lg",
+    };
+    const prizeTitle = {
+        textstyles: "font-pretendard-bold",
+    };
+    const prizeDetail = {
+        textstyles: "font-pretendard-medium",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(medalHandler), children: _jsx("img", { src: "images/olympiad/img-oly-prize-medal.png", alt: "" }) }), _jsxs("div", { className: cn(sectionTitleBreaker), children: [_jsx("div", { className: cn(sectionTitle), children: "\uACE0\uB824\uB300\uD559\uAD50 \uAE30\uAD00\uC7A5\uC0C1\uC744" }), _jsx("div", { className: cn(sectionTitle), children: "\uC218\uC0C1\uD560 \uC218 \uC788\uB294 \uAE30\uD68C" })] }), _jsx("div", { className: "h-0.5 w-1/4 my-10 bg-green-dark rounded-lg" }), _jsx("div", { className: cn(prizeWrapper), children: _jsxs("div", { className: cn(prizeSet), children: [_jsx("div", { className: "px-8 max-w-lg flex flex-col md:max-w-2xl", children: _jsx("img", { src: "images/olympiad/img-oly-prize-certificate.png", alt: "\uCEF4\uD4E8\uD130\uB85C \uBB38\uC81C\uB97C \uD478\uB294 \uC5EC\uC131", className: "rounded-xl overflow-hidden shadow-xl" }) }), _jsxs("div", { className: cn(prizeExplainWrapper), children: [_jsxs("div", { className: cn(prizeExplainSet), children: [_jsx("div", { className: cn(prizeTitle), children: "\uB300\uC0C1" }), _jsx("div", { className: cn(prizeDetail), children: "\uACE0\uB824\uB300\uD559\uAD50 \uACBD\uC601\uB300\uD559 \uD559\uC7A5\uC0C1" })] }), _jsxs("div", { className: cn(prizeExplainSet), children: [_jsx("div", { className: cn(prizeTitle), children: "\uAE08\uC0C1/\uC740\uC0C1/\uB3D9\uC0C1" }), _jsx("div", { className: cn(prizeDetail), children: "\uACE0\uB824\uB300\uD559\uAD50 \uC5B8\uC5B4\uC815\uBCF4\uC5F0\uAD6C\uC18C \uC18C\uC7A5\uC0C1" })] }), _jsxs("div", { className: cn(prizeExplainSet), children: [_jsx("div", { className: cn(prizeTitle), children: "\uC7A5\uB824\uC0C1" }), _jsx("div", { className: cn(prizeDetail), children: "\uACE0\uB824\uB300\uD559\uAD50 \uAD6D\uC81C\uD1A0\uC140\uC704\uC6D0\uD68C \uC704\uC6D0\uC7A5\uC0C1" })] })] })] }) })] }));
+}

package/layout/template/Olympiad/Sponsors.d.ts

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

package/layout/template/Olympiad/Sponsors.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function Sponsors() {
+    const container = {
+        sizes: "w-full h-fit",
+        spacings: "px-5 pt-10 pb-6",
+        displays: "flex flex-col justify-center items-center",
+        backgrounds: "bg-gradient-to-r from-green-dark to-crimson-dark",
+        graphics: "antialiased",
+        text: "break-keep",
+    };
+    const logoWrapper = {
+        disaplys: "flex flex-col justify-center items-center xs:flex-row",
+        spacings: "gap-8",
+    };
+    // styling of single logo set
+    const logoSet = {
+        displays: "flex flex-col justify-center items-center lg:flex-row",
+    };
+    const tag = {
+        sizes: "w-fit h-fit rounded-md",
+        spacings: "py-0.25 px-2",
+        backgrounds: "bg-white",
+        textstyles: "font-pretendard-bold text-sm text-crimson-dark",
+    };
+    const imgStyle = {
+        sizes: "max-h-20",
+        backgrounds: "bg-cover",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(logoWrapper), children: [_jsxs("div", { className: cn(logoSet), children: [_jsx("div", { className: cn(tag), children: "\uC8FC\uCD5C" }), _jsx("img", { src: "images/olympiad/img-oly-logo-1.png", alt: "\uD1A0\uC140\uB85C\uACE0", className: cn(imgStyle) })] }), _jsxs("div", { className: cn(logoSet), children: [_jsx("div", { className: cn(tag), children: "\uC8FC\uAD00" }), _jsx("img", { src: "images/olympiad/img-oly-logo-2.png", alt: "\uACE0\uB824\uB300\uD559\uAD50 \uC5B8\uC5B4\uC815\uBCF4\uC5F0\uAD6C\uC18C \uB85C\uACE0", className: cn(imgStyle) })] }), _jsxs("div", { className: cn(logoSet), children: [_jsx("div", { className: cn(tag), children: "\uD6C4\uC6D0" }), _jsx("img", { src: "images/olympiad/img-oly-logo-3.png", alt: "\uACE0\uB824\uB300\uD559\uAD50 \uC5B8\uC5B4\uC815\uBCF4\uC5F0\uAD6C\uC18C \uB85C\uACE0", className: cn(imgStyle) })] })] }) }));
+}

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

@@ -1,7 +1,11 @@
 import Banner from "./Banner";
+import Sponsors from "./Sponsors";
 import Features from "./Features";
+import Prizes from "./Prizes";
 declare const Olympiad: {
     Banner: typeof Banner;
+    Sponsors: typeof Sponsors;
     Features: typeof Features;
+    Prizes: typeof Prizes;
 };
 export default Olympiad;

package/layout/template/Olympiad/index.js

@@ -1,7 +1,11 @@
 import Banner from "./Banner";
+import Sponsors from "./Sponsors";
 import Features from "./Features";
+import Prizes from "./Prizes";
 const Olympiad = {
     Banner,
+    Sponsors,
     Features,
+    Prizes,
 };
 export default Olympiad;

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

@@ -6,7 +6,7 @@ import { useEase } from "../../../../hook";
 import { LineBreaks } from "../../../../text";
 import SVG from "../../../../asset/SVG";
 import { tagString } from "../../../../interface/domain";
-import useResponsive from "../../../../hook/useMobile";
+import useResponsive from "../../../../hook/useResponsive";
 export default function Carousel({ contents, }) {
     const [index, setIndex] = useState(0);
     const [flag, inTime] = useEase(10000, 1000);

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.126
+1.0.127

package/widget/template/Input/index.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { useId, useRef, useState } from "react";
 import { cn } from "../../../util";
 import Obstacle from "../Obstacle";
 import Form from "./Form";
 const widthSize = {
     xs: "w-28",
     sm: "w-48",
-    md: "w-64",
+    md: "w-80",
     lg: "w-96",
     xl: "w-128",
     "2xl": "w-144",
@@ -15,20 +15,34 @@ const widthSize = {
 function Input({ state, onKeyDown, placeholder, option }) {
     const { width, disabled } = option ?? {};
     const [value, setValue] = state;
+    const ref = useRef(null);
+    const [isFocus, setIsFocus] = useState(false);
     const id = useId();
     const container = {
         positions: "relative",
-        width: `${widthSize[width ?? "xs"]} h-8`,
+        width: `${widthSize[width ?? "xs"]} h-[36px]`,
         displays: "flex items-center",
     };
     const body = {
-        styles: "rounded-md bg-slate-200 text-xs",
+        positions: "relative",
+        displays: "flex items-center gap-x-3",
+        styles: "rounded-md text-xs",
         sizes: "w-full h-full",
-        paddings: "pl-4",
-        pseudo: "focus:outline-none focus:bg-white focus:text-black box-shadow-focus",
         effect: `transition-all`,
+        boundaries: "pl-3",
+        fonts: "leading-none",
+        pointers: "cursor-pointer",
+        focuses: !isFocus
+            ? "bg-[#F0F0F0]/30 "
+            : "bg-white text-green-dark box-shadow-green-sm",
+        animations: "duration-300",
+    };
+    const inputBox = {
+        sizes: "w-full",
+        styles: "focus:outline-none bg-transparent",
+        pointers: "cursor-default",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("input", { className: cn(body), id: id, type: "text", value: value, placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown && ((e) => onKeyDown(e, value ?? "")), onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }));
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), onClick: () => ref.current?.focus(), children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M21.8758 21.8748L16.4623 16.4613M16.4623 16.4613C17.9275 14.9961 18.7506 13.0089 18.7506 10.9368C18.7506 8.86474 17.9275 6.87752 16.4623 5.41234C14.9971 3.94715 13.0099 3.12402 10.9378 3.12402C8.86571 3.12402 6.8785 3.94715 5.41331 5.41234C3.94813 6.87752 3.125 8.86474 3.125 10.9368C3.125 13.0089 3.94813 14.9961 5.41331 16.4613C6.8785 17.9265 8.86571 18.7496 10.9378 18.7496C13.0099 18.7496 14.9971 17.9265 16.4623 16.4613Z", stroke: "#105652", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }), _jsx("input", { id: id, ref: ref, className: cn(inputBox), type: "text", value: value, onFocus: () => setIsFocus(true), onBlur: () => setIsFocus(false), placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown && ((e) => onKeyDown(e, value ?? "")), onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }) }));
 }
 Input.Form = Form;
 export default Input;