@edu-tosel/design 1.0.151 → 1.0.153

package/asset/SVG.d.ts

@@ -23,7 +23,7 @@ declare const SVG: {
         Notification: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
         Search: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
         Browser: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
-        Gift: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
+        Event: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
         Document: ({ theme }: {
             theme: "red" | "blue";
         }) => import("react/jsx-runtime").JSX.Element;

package/asset/svg/Icon.d.ts

@@ -7,7 +7,7 @@ declare const Icon: {
     Notification: typeof Notification;
     Search: typeof Search;
     Browser: typeof Browser;
-    Gift: typeof Gift;
+    Event: typeof Event;
     Document: typeof Document;
 };
 export default Icon;
@@ -15,7 +15,7 @@ declare function Calendar({ onClick }: IconProps): import("react/jsx-runtime").J
 declare function Notification({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
 declare function Search({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
 declare function Browser({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
-declare function Gift({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Event({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
 declare function Document({ theme }: {
     theme: "blue" | "red";
 }): import("react/jsx-runtime").JSX.Element;

package/asset/svg/Icon.js

@@ -4,7 +4,7 @@ const Icon = {
     Notification,
     Search,
     Browser,
-    Gift,
+    Event,
     Document,
 };
 export default Icon;
@@ -20,7 +20,7 @@ function Search({ onClick }) {
 function Browser({ onClick }) {
     return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M3 8.25V18C3 18.5967 3.23705 19.169 3.65901 19.591C4.08097 20.0129 4.65326 20.25 5.25 20.25H18.75C19.3467 20.25 19.919 20.0129 20.341 19.591C20.7629 19.169 21 18.5967 21 18V8.25M3 8.25V6C3 5.40326 3.23705 4.83097 3.65901 4.40901C4.08097 3.98705 4.65326 3.75 5.25 3.75H18.75C19.3467 3.75 19.919 3.98705 20.341 4.40901C20.7629 4.83097 21 5.40326 21 6V8.25M3 8.25H21M5.25 6H5.258V6.008H5.25V6ZM7.5 6H7.508V6.008H7.5V6ZM9.75 6H9.758V6.008H9.75V6Z", stroke: "white", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
 }
-function Gift({ onClick }) {
+function Event({ onClick }) {
     return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21 11.25V19.5C21 19.8978 20.842 20.2794 20.5607 20.5607C20.2794 20.842 19.8978 21 19.5 21H5.25C4.85218 21 4.47064 20.842 4.18934 20.5607C3.90804 20.2794 3.75 19.8978 3.75 19.5V11.25M12 4.875C12 4.35583 11.846 3.84831 11.5576 3.41663C11.2692 2.98495 10.8592 2.6485 10.3795 2.44982C9.89989 2.25114 9.37209 2.19915 8.86289 2.30044C8.35369 2.40173 7.88596 2.65173 7.51884 3.01885C7.15173 3.38596 6.90172 3.85369 6.80044 4.36289C6.69915 4.87209 6.75114 5.39989 6.94982 5.87954C7.1485 6.3592 7.48495 6.76917 7.91663 7.05761C8.34831 7.34605 8.85582 7.5 9.375 7.5H12M12 4.875V7.5M12 4.875C12 4.35583 12.154 3.84831 12.4424 3.41663C12.7308 2.98495 13.1408 2.6485 13.6205 2.44982C14.1001 2.25114 14.6279 2.19915 15.1371 2.30044C15.6463 2.40173 16.114 2.65173 16.4812 3.01885C16.8483 3.38596 17.0983 3.85369 17.1996 4.36289C17.3008 4.87209 17.2489 5.39989 17.0502 5.87954C16.8515 6.3592 16.5151 6.76917 16.0834 7.05761C15.6517 7.34605 15.1442 7.5 14.625 7.5H12M12 7.5V21M3.375 11.25H21.375C21.996 11.25 22.5 10.746 22.5 10.125V8.625C22.5 8.004 21.996 7.5 21.375 7.5H3.375C2.754 7.5 2.25 8.004 2.25 8.625V10.125C2.25 10.746 2.754 11.25 3.375 11.25Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 function Document({ theme }) {

package/asset/svg/Icon.tsx

@@ -10,7 +10,7 @@ const Icon = {
   Notification,
   Search,
   Browser,
-  Gift,
+  Event,
   Document,
 };
 
@@ -100,7 +100,7 @@ function Browser({ onClick }: IconProps) {
   );
 }
 
-function Gift({ onClick }: IconProps) {
+function Event({ onClick }: IconProps) {
   return (
     <svg
       onClick={onClick}

package/board/design/Board.design.js

@@ -36,7 +36,7 @@ export function Board({ children, action, option, debug, buttons, }) {
         background: `${background ?? "bg-white"} `,
         styles: "text-black overflow-hidden",
         rounded: `rounded-none ${isRounded ? "xl:rounded-xl" : ""}`,
-        boundary,
+        boundary: boundary ?? "border-0",
         className,
     };
     const button = {

package/card/design/Card.design.js

@@ -43,7 +43,7 @@ export default function CardDesign({ header, disabled, children, option, debug,
         sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
         onClick: onClick ? "cursor-pointer" : "",
         text: `${text ?? "text-base"} text-black `,
-        boundary: boundary ?? "box-shadow",
+        boundary: boundary ?? "shadow-main hover:shadow-green",
         rounded: `rounded-${rounded ?? "xl"}`,
         bgColor: `${background ?? "bg-white/80"} `,
         styles: "duration-500 ",

package/card/design/InfoCard.design.js

@@ -6,6 +6,7 @@ export function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, i
     const container = {
         displays: "flex flex-col",
         paddings: "pt-5 px-5",
+        text: "break-keep",
     };
     const topBox = {
         container: {

package/card/template/InfoCard/Academy.js

@@ -6,9 +6,10 @@ function Academy({ titles, data, buttons, option }) {
     return (_jsx(InfoCardDesign, { titles: titles, option: {
             ...option,
             titleBorder: "border-green-dark",
-            background: "",
+            background: "bg-none",
             width: option?.width ?? "xs",
             height: option?.height ?? "md",
+            boundary: "border-white border-0",
         }, children: _jsxs("div", { className: "mt-2.5 flex flex-col gap-2.5", children: [_jsx("div", { className: "w-full", children: data.address }), _jsx("div", { className: "flex gap-2.5", children: buttons.map(({ title, onClick }, index) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
                             background: !index ? "bg-gray-medium" : "bg-green-dark",
                             text: "text-white",
@@ -21,7 +22,7 @@ function Digital({ image, data, option }) {
             width: "md",
             height: "md",
             titleBorder: "border-crimson-burgundy",
-            boundary: "border-2 border-crimson-burgundy",
+            background: "bg-white",
             onClick: option?.onClick,
         }, titles: {
             title: "Digital Student Card",

package/globals.css

@@ -257,3 +257,13 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
 }
+
+.text-gradient-green-to-red {
+  background: var(
+    --gradient-main,
+    linear-gradient(269deg, #760023 0%, #105652 100%)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

package/interface/widget/index.d.ts

@@ -37,7 +37,7 @@ export interface InputWidget extends Widget {
     title?: string;
     state: State<string> | State<string | undefined>;
     onKeyDown?: (e: React.KeyboardEvent, value: string) => void;
-    placeholder?: string;
+    placeholder?: string | (() => string | undefined);
     isValid?: IsValid;
     type?: InputType;
     button?: LabelWidget;

package/layout/template/dashboard/Header.js

@@ -25,7 +25,7 @@ export function Header({ title, logo, notification, menu, option, }) {
                     ], children: menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
                             setIsOwn(true);
                             return setView("menu");
-                        }, color: iconColor })) : (_jsx(Label.Button, { title: "\uB300\uC2DC\uBCF4\uB4DC", onClick: () => option?.onClick && option.onClick(), option: {
+                        }, color: iconColor })) : (_jsx(Label.Button, { title: "\uB85C\uADF8\uC778", onClick: () => option?.onClick && option.onClick(), option: {
                             width: "sm",
                             height: "xs",
                             background: gradient.bg.greenToRed,

package/layout/template/dashboard/mypage/Navigate.js

@@ -9,7 +9,7 @@ function Academy({ onClick }) {
             boundary: "box-shadow shadow-green-dark",
             onMouse: [onMouse, _],
             width: "2xs",
-            height: "3xs",
+            height: "4xs",
         }, children: [_jsx("div", { className: "text-gray-medium group-hover:text-green-dark duration-300", children: "\uB098\uC758 \uD559\uC6D0" }), _jsx("svg", { className: "absolute bottom-5 right-5 ", xmlns: "http://www.w3.org/2000/svg", width: "60", height: "60", viewBox: "0 0 60 60", fill: "none", children: _jsx("path", { className: "duration-300", d: "M9 53H52M10.9545 6H50.0455M12.9091 6V53M48.0909 6V53M22.6818 15.7917H26.5909M22.6818 23.625H26.5909M22.6818 31.4583H26.5909M34.4091 15.7917H38.3182M34.4091 23.625H38.3182M34.4091 31.4583H38.3182M22.6818 53V44.1875C22.6818 42.566 23.9953 41.25 25.6136 41.25H35.3864C37.0047 41.25 38.3182 42.566 38.3182 44.1875V53", stroke: !onMouse ? "#7F7F7F" : "#105652", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
 }
 function Payment({ onClick }) {
@@ -18,7 +18,7 @@ function Payment({ onClick }) {
             className: "pt-5 pl-5",
             background: "group bg-green-dark/10 hover:bg-green-dark/30 ",
             width: "2xs",
-            height: "3xs",
+            height: "4xs",
             boundary: "",
         }, children: [_jsx("div", { className: "opacity-0 group-hover:opacity-100 duration-300", children: "\uACB0\uC81C \uC815\uBCF4" }), _jsxs("div", { className: "absolute top-5 group-hover:top-11.25 left-5 flex flex-col gap-1.5 duration-300", children: [_jsx("div", { className: "w-24 h-1.5 bg-green-dark/30 group-hover:bg-green-dark/40 duration-300" }), _jsx("div", { className: "w-14.25 h-1.5 bg-green-dark/30 group-hover:bg-green-dark/40 duration-300" })] }), _jsx("div", { className: "absolute top-5 right-5 w-12.25 h-7 rounded-full bg-[#CFDDDC]" }), _jsx("div", { className: "absolute left-0 bottom-5 w-full h-5 bg-green-dark" })] }));
 }

package/layout/template/dashboard/mypage/Profile.js

@@ -22,8 +22,7 @@ function Profile({ name, birthday, image, modify }) {
     return (_jsxs(Card, { option: {
             className: "flex gap-x-7.5 items-center pl-5",
             width: "md",
-            height: "3xs",
-            boundary: "border-1 border-black",
+            height: "4xs",
         }, children: [_jsxs("button", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: modify.image, className: "w-20 h-20 overflow-hidden rounded-md relative", children: [_jsx("img", { src: image, alt: "profile-image", className: "bg-cover" }), transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(hoverBox), children: [_jsx(SVG.Image, {}), _jsx("div", { className: "text-white text-xs leading-none", children: "\uC0AC\uC9C4 \uBC14\uAFB8\uAE30" })] })))] }), _jsxs("div", { className: "flex flex-col h-20", children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold text-gray-dark", children: name }), _jsx("div", { className: "leading-none text-gray-medium mt-1.25", children: birthday }), _jsxs("div", { className: "flex gap-3 mt-auto", children: [_jsx(Label.Button, { title: "\uC2E4\uBA85 \uC218\uC815", option: { width: "sm", height: "xs" }, onClick: modify.name }), _jsx(Label.Button, { title: "\uC0DD\uC77C \uC218\uC815", option: { width: "sm", height: "xs" }, onClick: modify.birthday })] })] })] }));
 }
 function Detail({ titles, infos, toggle, }) {
@@ -36,14 +35,14 @@ function Detail({ titles, infos, toggle, }) {
     return (_jsxs(Card, { option: {
             className: "pt-5 px-5",
             width: "md",
-            height: "xs",
+            height: "2xs",
             background: gradient.bg.greenToRedSoft,
             boundary: "",
-        }, children: [_jsxs("div", { className: "h-13.25 flex flex-col text-gray-dark border-b-1 border-crimson-burgundy", children: [_jsx("div", { className: "text-xl font-pretendard-bold h-6 leading-none", children: titles.title }), _jsx("div", { className: "h-4.75 leading-none", children: titles.subtitle })] }), _jsx("div", { className: "mt-4.25 flex flex-col gap-2.5 ", children: infos?.map(({ title, content, button }, index) => (_jsxs("div", { className: cn(infoBox), children: [title === "phone" ? (_jsx(SVG.Phone, {})) : title === "email" ? (_jsx(SVG.Email, {})) : (_jsx("div", { className: "font-pretendard-bold mr-5 w-7", children: title })), _jsx("div", { className: "leading-none flex items-center w-60", children: content }), button && (_jsx(Label.Button, { title: button.title, onClick: button.onClick, option: {
+        }, children: [_jsxs("div", { className: "h-13.25 flex flex-col", children: [_jsx("div", { className: "text-base font-bold h-6 leading-none ", children: titles.title }), _jsx("div", { className: "h-4.75 text-sm leading-none", children: titles.subtitle }), _jsx("div", { className: "h-0.5 w-full bg-gradient-to-r from-green-dark/50 to-red-crimson/50" })] }), _jsx("div", { className: "mt-4.25 flex flex-col gap-2.5 ", children: infos?.map(({ title, content, button }, index) => (_jsxs("div", { className: cn(infoBox), children: [title === "phone" ? (_jsx(SVG.Phone, {})) : title === "email" ? (_jsx(SVG.Email, {})) : (_jsx("div", { className: "font-pretendard-bold mr-5 w-7 flex items-center", children: title })), _jsx("div", { className: "leading-none flex items-center w-60", children: content }), button && (_jsx(Label.Button, { title: button.title, onClick: button.onClick, option: {
                                 className: "ml-auto",
                                 background: gradient.bg.greenToRed,
                                 text: "text-white",
-                                width: "sm",
+                                width: "xs",
                                 height: "xs",
                             } }))] }, id + index))) }), toggle && (_jsxs("div", { className: "flex gap-2.5 items-center absolute bottom-5 right-5", children: [_jsx("div", { className: "text-xs leading-none text-green-dark", children: "\uD559\uC6D0\uC73C\uB85C \uBC1B\uAE30" }), _jsx(Toggle, { state: toggle })] }))] }));
 }

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

@@ -1,6 +1,6 @@
 import Layout from "./layout";
 import Carousel from "./layout/Carousel";
-import Navigation from "./Navigation";
+import Navigation from "./layout/Navigation";
 import Notice from "./Notice";
 import Promotion from "./Promotion";
 import Service from "./Service";

package/layout/template/home/index.js

@@ -1,6 +1,6 @@
 import Layout from "./layout";
 import Carousel from "./layout/Carousel";
-import Navigation from "./Navigation";
+import Navigation from "./layout/Navigation";
 import Notice from "./Notice";
 import Promotion from "./Promotion";
 import Service from "./Service";

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

@@ -0,0 +1,36 @@
+import { OnClick } from "../../../../interface";
+interface Browser {
+    onClick: OnClick;
+}
+interface Calendar {
+    schedules: {
+        onClick?: OnClick;
+        category: string;
+        title: string;
+        description?: string | [string] | [string, string];
+    }[];
+}
+interface Notice {
+    announcements: {
+        onClick?: OnClick;
+        title: string;
+        date: string;
+        description?: string | [string] | [string, string];
+    }[];
+}
+interface Event {
+    events: {
+        onClick?: OnClick;
+        title: string;
+        category: string;
+        thumbnail?: string;
+    }[];
+}
+interface HomeNavigationProps {
+    browser: Browser;
+    calendar: Calendar;
+    notice: Notice;
+    event: Event;
+}
+export default function Navigation({ browser, calendar, notice, event, }: HomeNavigationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/home/layout/Navigation.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { animated, useTransition } from "react-spring";
+import SVG from "../../../../asset/SVG";
+import { cn } from "../../../../util";
+import { useActionStore } from "../../../../store";
+import { LineBreaks } from "../../../../text";
+export default function Navigation({ browser, calendar, notice, event, }) {
+    const { flag } = useActionStore();
+    const [isOpen, setIsOpen] = useState(false);
+    const [isHidden, setIsHidden] = useState(false);
+    const [type, setType] = useState();
+    const container = {
+        displays: "flex flex-col justify-center gap-y-5 items-center",
+        sizes: !isOpen ? "h-80 rounded-r-xl" : "h-screen",
+        widths: !isHidden ? "w-[56px] duration-100" : "w-0 duration-500",
+        backgrounds: "bg-gradient-to-b from-green-dark to-crimson-burgundy",
+    };
+    const overlayPopTransition = useTransition(!isHidden && isOpen, {
+        from: { width: "0%" },
+        enter: { width: "30%" },
+        leave: { width: "0%" },
+        config: { duration: 100 },
+    });
+    const overlayCoverTransition = useTransition(isHidden, {
+        from: { width: "0%" },
+        enter: { width: "100%" },
+        config: { duration: 500 },
+    });
+    useEffect(() => {
+        if (isHidden) {
+            const timer = setTimeout(() => {
+                browser.onClick();
+            }, 2000);
+            return () => clearTimeout(timer);
+        }
+    }, [isHidden]);
+    useEffect(() => {
+        setIsOpen(false);
+        setType(undefined);
+    }, [flag]);
+    const handleOpen = (type) => {
+        setType(type);
+        if (type === "browser")
+            setIsHidden(true);
+        return setIsOpen(true);
+    };
+    const itemContainer = {
+        positions: "fixed top-0 left-0 z-40 ",
+        sizes: "h-screen ",
+        boundaries: "pl-[56px]",
+        styles: "overflow-hidden bg-white ",
+    };
+    const itemBody = {
+        boundaries: "px-7.5 pt-[34px]",
+    };
+    return (_jsxs(_Fragment, { children: [overlayCoverTransition((styles, item) => item && (_jsxs(animated.div, { style: styles, className: "bg-white h-screen fixed top-0 left-0 z-40 flex flex-col justify-center items-center overflow-hidden gap-y-14 ", children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel", width: 368.56, height: 80.07 }), _jsx("div", { children: "dashboard loading..." })] }))), overlayPopTransition((styles, item) => type &&
+                item && (_jsx(animated.div, { style: styles, className: cn(itemContainer), children: _jsxs("div", { className: cn(itemBody), children: [_jsx("div", { className: "text-[26px] font-bold text-gradient-green-to-red ", children: navigationTypeString[type] }), _jsx(NavigationItem, { type: type, calendar: calendar, notice: notice, event: event })] }) }))), _jsx("div", { className: "fixed top-1/2 -translate-y-1/2 flex justify-center items-center z-45", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: cn(container), children: [_jsx(SVG.Icon.Calendar, { onClick: () => handleOpen("calendar") }), _jsx(SVG.Icon.Notification, { onClick: () => handleOpen("notification") }), _jsx(SVG.Icon.Search, { onClick: () => handleOpen("search") }), _jsx(SVG.Icon.Browser, { onClick: () => handleOpen("browser") }), _jsx(SVG.Icon.Event, { onClick: () => handleOpen("event") })] }) })] }));
+}
+const navigationTypeString = {
+    calendar: "시험 일정",
+    notification: "공지사항",
+    event: "이벤트",
+};
+function NavigationItem({ type, calendar, notice, event, }) {
+    if (type === "calendar")
+        return (_jsx("div", { className: "mt-[34px] flex flex-col gap-y-[15px]", children: calendar.schedules.map(({ category, title, description, onClick }) => (_jsxs("div", { onClick: onClick, className: "flex flex-col justify-between w-full h-[184px] box-shadow rounded-[10px] p-7.5", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: category }), _jsx("div", { className: "text-[20px] font-bold text-gray-dark", children: title })] }), _jsx(LineBreaks, { texts: description, className: "text-gray-dark text-[18px]" })] }))) }));
+    if (type === "notification")
+        return (_jsx("div", { className: "mt-[34px] flex flex-col gap-y-[15px]", children: notice.announcements.map(({ title, date, description, onClick }) => (_jsxs("div", { onClick: onClick, className: "flex flex-col justify-between w-full h-[140px] box-shadow rounded-[10px] p-7.5", children: [_jsxs("div", { children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: date }), _jsx("div", { className: "text-[20px] font-bold text-gray-dark", children: title })] }), _jsx(LineBreaks, { texts: description, className: "text-gray-dark text-[18px]" })] }))) }));
+    if (type === "event")
+        return (_jsx("div", { className: "mt-[34px] flex flex-col gap-y-[15px]", children: event.events.map(({ title, category, thumbnail, onClick }) => (_jsxs("div", { onClick: onClick, className: "flex flex-col justify-between w-full  box-shadow rounded-[10px] p-7.5", children: [_jsxs("div", { className: "h-[92px] border-b-2", children: [_jsx("div", { className: "text-[15px] text-gray-medium", children: category }), _jsx("div", { className: "text-[20px] font-bold text-gray-dark", children: title })] }), _jsx("div", { className: "image-container pt-[15px]", children: _jsx("img", { src: thumbnail, alt: title, className: "w-full" }) })] }))) }));
+    return null;
+}

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

@@ -2,11 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../util";
 import Footer from "./Footer";
 import Header from "./Header";
+import { useActionStore } from "../../../../store";
 export default function Layout({ contents, children, logo, rightButton, }) {
     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, { logo: logo, rightButton: rightButton, contents: contents }), _jsx("div", { className: "w-full max-w-[1200px] h-15" }), children, _jsx(Footer, {})] }));
+    const { setFlag } = useActionStore();
+    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { logo: logo, rightButton: rightButton, contents: contents }), _jsx("div", { className: "w-full max-w-[1200px] h-15" }), children, _jsx(Footer, {})] }));
 }

package/package.json

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

package/util/colors.js

@@ -9,11 +9,11 @@ export const gradientBackground = {
     lab: "bg-gradient-to-br from-violet-light/20 to-blue-sky/40 ",
     labSoft: "bg-gradient-to-br from-[#797EF6]/32 to-[#44C5F3]/20",
     greenToRed: "bg-gradient-to-r from-green-dark to-red-crimson",
-    greenToRedSoft: "bg-gradient-to-r from-green-dark/20 to-red-crimson/20",
+    greenToRedSoft: "bg-gradient-to-r from-green-dark/10 to-red-crimson/10",
 };
 export const gradientBorder = {
     greenToRed: "border-gradient-to-r from-green-dark to-crimson-burgundy",
-    greenToRedSoft: "border-gradient-to-r from-green-dark/20 to-red-crimson/20",
+    greenToRedSoft: "border-gradient-to-r from-green-dark/10 to-red-crimson/10",
 };
 export const gradient = {
     bg: gradientBackground,

package/version.txt

@@ -1 +1 @@
-1.0.151
+1.0.153

package/widget/template/Input/Form.js

@@ -43,7 +43,7 @@ export default function InputForm({ title, state, placeholder, isValid, type, on
             !(isValid === false) &&
             "shadow-[0px_0px_10px_0px_rgba(16,86,82,0.38)]",
     };
-    return (_jsxs("div", { children: [title && _jsx("div", { className: "text-gray-dark", children: title }), _jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: placeholder }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onKeyDown: onKeyDown && ((e) => onKeyDown(e, value ?? "")), onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => {
+    return (_jsxs("div", { children: [title && _jsx("div", { className: "text-gray-dark", children: title }), _jsxs("div", { className: cn(container), children: [_jsx("div", { onClick: () => ref.current?.focus(), className: cn(placeholderBox), children: typeof placeholder === "function" ? placeholder() : placeholder }), _jsx("input", { ref: ref, className: cn(inputBox), value: value, onKeyDown: onKeyDown && ((e) => onKeyDown(e, value ?? "")), onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => {
                             if (maxLength && e.target.value.length > maxLength)
                                 return;
                             setValue(e.target.value);

package/widget/template/Input/index.js

@@ -42,7 +42,9 @@ function Input({ state, onKeyDown, placeholder, option }) {
         styles: "focus:outline-none bg-transparent",
         pointers: "cursor-default",
     };
-    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 })] }) }));
+    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: typeof placeholder === "function"
+                        ? placeholder()
+                        : placeholder ?? "입력해주세요", onKeyDown: onKeyDown && ((e) => onKeyDown(e, value ?? "")), onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }) }));
 }
 Input.Form = Form;
 export default Input;

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

@@ -1,9 +0,0 @@
-import { OnClick } from "../../../interface";
-interface Browser {
-    onClick: OnClick;
-}
-interface HomeNavigationProps {
-    browser: Browser;
-}
-export default function Navigation({ browser }: HomeNavigationProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/layout/template/home/Navigation.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { animated, useTransition } from "react-spring";
-import SVG from "../../../asset/SVG";
-import { cn } from "../../../util";
-export default function Navigation({ browser }) {
-    const [flag, setFlag] = useState(false);
-    const [isOpen, setIsOpen] = useState(false);
-    const container = {
-        displays: "flex flex-col justify-center gap-y-5 items-center",
-        sizes: !isOpen ? "h-80" : "h-screen",
-        backgrounds: "bg-gradient-to-b from-green-dark to-crimson-burgundy",
-        animations: "duration-500",
-        styles: "rounded-r-xl",
-    };
-    const transition = useTransition(!flag, {
-        from: { width: 56 },
-        leave: { width: 56, duration: 500 },
-    });
-    const overlayTransition = useTransition(flag, {
-        from: { width: "0%" },
-        enter: { width: "100%" },
-        config: { duration: 500 },
-    });
-    useEffect(() => {
-        if (flag) {
-            const timer = setTimeout(() => {
-                browser.onClick();
-            }, 2000);
-            return () => clearTimeout(timer);
-        }
-    }, [flag]);
-    const handleOpen = () => {
-        setIsOpen(!isOpen);
-        console.log(isOpen);
-        return;
-    };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed top-1/2 -translate-y-1/2 flex justify-center items-center z-45 border-4 border-red-500", children: transition((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), children: [_jsx(SVG.Icon.Calendar, { onClick: handleOpen }), _jsx(SVG.Icon.Notification, { onClick: handleOpen }), _jsx(SVG.Icon.Search, { onClick: handleOpen }), _jsx(SVG.Icon.Browser, { onClick: () => {
-                                setFlag(true);
-                                browser.onClick;
-                            } }), _jsx(SVG.Icon.Gift, {})] }))) }), overlayTransition((styles, item) => item && (_jsxs(animated.div, { style: styles, className: "bg-white h-screen fixed top-0 left-0 z-40 flex flex-col justify-center items-center overflow-hidden gap-y-14", children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel", width: 368.56, height: 80.07 }), _jsx("div", { children: "dashboard loading..." })] })))] }));
-}

package/widget/template/EmailInput.d.ts

@@ -1,2 +0,0 @@
-import { InputWidget } from "../../interface";
-export default function EmailInput({ state, placeholder, option, }: InputWidget): import("react/jsx-runtime").JSX.Element;

package/widget/template/EmailInput.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useState } from "react";
-import { cn } from "../../util";
-const widthSize = {
-    xs: "w-28",
-    sm: "w-48",
-    md: "w-64",
-    lg: "w-96",
-    xl: "w-128",
-    "2xl": "w-144",
-    full: "w-full",
-};
-export default function EmailInput({ state, placeholder, option, }) {
-    const { width } = option ?? {};
-    const id = useId();
-    const [value, setValue] = state;
-    const [focused, setFocused] = useState(false);
-    const { text } = option ?? {};
-    const isValidEmail = (email) => {
-        return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
-    };
-    const emailCss = {
-        true: "rounded-md pl-4 pr-4 pt-2 pb-2 bg-slate-200 text-xs focus:outline-none focus:bg-white focus:text-black box-green-focus transition-all",
-        false: "rounded-md pl-4 pr-4 pt-2 pb-2 text-xs bg-[#F9E4E6] focus:outline-none text-[#FF8383] box-shadow-focus-red transition-all peer",
-        allTrue: "rounded-md pl-4 pr-4 pt-2 pb-2 bg-white text-xs focus:outline-none box-green focus:bg-white focus:text-black box-shadow-focus transition-all",
-        allTrueFocus: "rounded-md pl-4 pr-4 pt-2 pb-2 bg-white text-xs focus:outline-none transition-all box-green-focus",
-    };
-    const container = {
-        width: `${widthSize[width ?? "md"]} h-8`,
-    };
-    const handleBlur = () => {
-        setFocused(false);
-    };
-    const handleFocus = () => {
-        setFocused(true);
-    };
-    return (_jsxs("div", { className: "relative", children: [_jsx("input", { className: cn(container) +
-                    " " +
-                    (value === "" || isValidEmail(value)
-                        ? emailCss.true
-                        : emailCss.false) +
-                    (isValidEmail(value) && !focused ? emailCss.allTrue : ""), id: id, type: "text", placeholder: placeholder ?? "E-mail을 입력해주세요.", onChange: (e) => setValue(e.target.value), onBlur: handleBlur, onFocus: handleFocus }), value === "" ||
-                (!isValidEmail(value) && (_jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3", children: _jsx("span", { className: "text-[#FF8383]", children: "!" }) }))), typeof value === "string" &&
-                value.length > 5 &&
-                !isValidEmail(value) && (_jsx("div", { className: "absolute top-4 left-40 w-60 h-12 bg-black opacity-60 z-100 text-white p-2 text-xs rounded-md shadow-md invisible peer-hover:visible", children: text }))] }));
-}