@edu-tosel/design 1.0.42 → 1.0.44

package/layout/template/Dashboard.js

@@ -1,5 +1,13 @@
 import Layout from "../widget/dashboard/Layout";
+import MyPageLayout from "../widget/dashboard/mypage/Layout";
+import Navigate from "../widget/dashboard/mypage/Navigate";
+import Profile from "../widget/dashboard/mypage/Profile";
 const Dashboard = {
     Layout,
 };
-export default Dashboard;
+const MyPage = {
+    Layout: MyPageLayout,
+    Card: { Profile, Navigate },
+};
+export { default as buttonClassNames } from "./../widget/dashboard/buttonClassNames";
+export { Dashboard, MyPage };

package/layout/template/Events.js

@@ -14,8 +14,10 @@ function Show({ widgets, children }) {
                 };
                 if (React.isValidElement(Component)) {
                     const ComponentWithVisibility = React.cloneElement(Component, {
-                        event: event(),
-                        isVisible,
+                        action: {
+                            event: event(),
+                            isVisible,
+                        },
                     });
                     return _jsx(Fragment, { children: ComponentWithVisibility }, index);
                 }

package/layout/template/Promotion.d.ts

@@ -0,0 +1,5 @@
+import Layout from "../widget/promotion/Layout";
+declare const Promotion: {
+    Layout: typeof Layout;
+};
+export default Promotion;

package/layout/template/Promotion.js

@@ -0,0 +1,5 @@
+import Layout from "../widget/promotion/Layout";
+const Promotion = {
+    Layout,
+};
+export default Promotion;

package/layout/template/Shelf.d.ts

@@ -2,7 +2,7 @@ import { ShelfProps } from "../../interface/Shelf";
 declare function Shelf({ titles, debug, children }: ShelfProps<string | number>): import("react/jsx-runtime").JSX.Element;
 declare namespace Shelf {
     var Wrap: ({ className, titles, children, debug, options, }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
-    var Row: ({ titles, children, debug }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
+    var Row: ({ titles, children, className, debug, }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
     var Col: ({ titles, children, debug, className, }: ShelfProps<string | number>) => import("react/jsx-runtime").JSX.Element;
 }
 export default Shelf;

package/layout/template/Shelf.js

@@ -24,9 +24,10 @@ function Wrap({ className, titles, children, debug, options, }) {
             subtitleSize: "text-sm",
         }, debug: debug, children: children }));
 }
-function Row({ titles, children, debug }) {
+function Row({ titles, children, className, debug, }) {
     const container = {
-        displays: "flex flex-row gap-7.5",
+        displays: "flex flex-row",
+        className: className ?? "gap-x-7.5",
     };
     return (_jsx(ShelfDesign, { titles: titles, className: cn(container), options: {
             titleSize: "text-lg xl:text-2xl",

package/layout/template/Sign.d.ts

@@ -1,13 +1,15 @@
 import Box from "../widget/sign/Box";
 import Button from "../widget/sign/Button";
 import Check from "../widget/sign/Check";
-import Input from "../widget/sign/Input";
 import Layout from "../widget/sign/Layout";
+import WithTitle from "../widget/sign/WithTitle";
 declare const Sign: {
     Box: typeof Box;
     Button: typeof Button;
     Check: typeof Check;
-    Input: typeof Input;
+    Input: {
+        WithTitle: typeof WithTitle;
+    };
     Layout: typeof Layout;
 };
 export default Sign;

package/layout/template/Sign.js

@@ -1,13 +1,15 @@
 import Box from "../widget/sign/Box";
 import Button from "../widget/sign/Button";
 import Check from "../widget/sign/Check";
-import Input from "../widget/sign/Input";
 import Layout from "../widget/sign/Layout";
+import WithTitle from "../widget/sign/WithTitle";
 const Sign = {
     Box,
     Button,
     Check,
-    Input,
+    Input: {
+        WithTitle,
+    },
     Layout,
 };
 export default Sign;

package/layout/widget/dashboard/Header.d.ts

@@ -1,2 +1,2 @@
 import { DashboardHeaderProps } from "../../../interface";
-export declare function Header({ title, logo, notification, options, }: DashboardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ title, logo, notification, menu, options, }: DashboardHeaderProps): import("react/jsx-runtime").JSX.Element;

package/layout/widget/dashboard/Header.js

@@ -1,10 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../../util";
+import { cn, gradient } from "../../../util";
 import { useWidgetStore } from "../../../store";
 import Menu from "./Menu";
 import { Events } from "../..";
 import Notification from "./Notification";
-export function Header({ title, logo, notification, options, }) {
+import SVG from "../../../asset/SVG";
+import { Label } from "../../../html";
+export function Header({ title, logo, notification, menu, options, }) {
     const { setView, setIsOwn } = useWidgetStore();
     const { notifications, flag, onClick, color } = notification;
     const { text, background, className } = options ?? {};
@@ -14,18 +16,23 @@ export function Header({ title, logo, notification, options, }) {
         sizes: "h-15 w-full",
         background: `${background ?? "bg-white"} dark:bg-black`,
         text: `${text ?? "text-black"} dark:text-white`,
-        styles: "px-5 xl:px-8 2xl:px-16 ",
+        styles: "px-5 xl:px-8 2xl:px-16 box-shadow",
         className,
     };
     return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? _jsx(_Fragment, { children: logo }) : _jsx("div", { className: "text-2xl", children: "TOSEL" }), _jsx("div", { className: "text-3xl font-pretendard-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsxs(Events.Show, { widgets: [
                         ["notification", _jsx(Notification, { notifications: notifications })],
-                        ["menu", _jsx(Menu, { image: "/images/hani.png" })],
-                    ], children: [_jsxs("button", { className: "relative", onClick: () => {
+                        [menu ? "menu" : false, menu && _jsx(Menu, { ...menu })],
+                    ], children: [_jsx(SVG.Notification, { flag: flag, onClick: () => {
                                 setIsOwn(true);
                                 onClick && onClick();
                                 return setView("notification");
-                            }, 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: "M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938", stroke: color ?? "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), flag && (_jsxs("div", { className: "absolute top-0 right-0", children: [_jsx("div", { className: "absolute w-2 h-2 rounded-full bg-red-500" }), _jsx("div", { className: " w-2 h-2 rounded-full  bg-red-400 animate-ping duration-1000" })] }))] }), _jsx("svg", { className: "cursor-pointer", onClick: () => {
+                            }, color: color }), menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
                                 setIsOwn(true);
                                 return setView("menu");
-                            }, xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M18.7313 19.5053C18.0034 18.5416 17.0618 17.7601 15.9804 17.2223C14.8991 16.6846 13.7077 16.4052 12.5 16.4063C11.2924 16.4052 10.101 16.6846 9.01964 17.2223C7.93832 17.7601 6.99664 18.5416 6.26878 19.5053M18.7313 19.5053C20.1516 18.2419 21.1533 16.5767 21.6054 14.7304C22.0576 12.884 21.9378 10.9439 21.262 9.16722C20.5862 7.39055 19.3862 5.86128 17.8213 4.78224C16.2564 3.7032 14.4004 3.12537 12.4995 3.12537C10.5986 3.12537 8.74267 3.7032 7.17775 4.78224C5.61282 5.86128 4.41288 7.39055 3.73705 9.16722C3.06122 10.9439 2.94144 12.884 3.3936 14.7304C3.84575 16.5767 4.84847 18.2419 6.26878 19.5053M18.7313 19.5053C17.0167 21.0346 14.7976 21.8783 12.5 21.8751C10.2021 21.8786 7.98361 21.0349 6.26878 19.5053M15.625 10.1563C15.625 10.9851 15.2958 11.78 14.7097 12.366C14.1237 12.9521 13.3288 13.2813 12.5 13.2813C11.6712 13.2813 10.8764 12.9521 10.2903 12.366C9.70427 11.78 9.37503 10.9851 9.37503 10.1563C9.37503 9.32751 9.70427 8.53265 10.2903 7.9466C10.8764 7.36055 11.6712 7.03131 12.5 7.03131C13.3288 7.03131 14.1237 7.36055 14.7097 7.9466C15.2958 8.53265 15.625 9.32751 15.625 10.1563Z", stroke: color ?? "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }) })] }));
+                            }, color: color })) : (_jsx(Label.Button, { title: "\uB300\uC2DC\uBCF4\uB4DC\uB85C", onClick: menu?.onClick, options: {
+                                width: "sm",
+                                height: "xs",
+                                text: "text-white",
+                                background: gradient.bg.greenToRed,
+                            } }))] }) })] }));
 }

package/layout/widget/dashboard/Layout.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect } from "react";
-import { NavigationContainer } from "../../../navigation";
 import { Header } from "./Header";
 import { cn } from "../../../util";
 import { useWidgetStore } from "../../../store";
+import { NavigationContainer } from "./Navigation";
 export default function Layout({ header, navigations, children, options, }) {
     const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useWidgetStore();
-    const { title, options: headerOptions, logo, notification } = header;
+    const { title, options: headerOptions, logo, notification, menu } = header;
     const { background } = options ?? {};
     useEffect(() => {
         if (isOwn) {
@@ -23,7 +23,7 @@ export default function Layout({ header, navigations, children, options, }) {
     const body = {
         sizes: "h-full ",
         displays: "flex gap-12 xl:gap-7.5 ",
-        paddings: "pt-15 xl:pl-2 2xl:px-12 xl:pt-7.5",
+        paddings: "pt-15 xl:pl-2 2xl:pl-12 2xl:pr-11.25 xl:pt-7.5",
     };
-    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, notification: notification, options: headerOptions, logo: logo }), _jsxs("div", { className: cn(body), children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
+    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, notification: notification, menu: menu, options: headerOptions, logo: logo }), _jsxs("div", { className: cn(body), children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
 }

package/layout/widget/dashboard/Menu.d.ts

@@ -1,4 +1,2 @@
-export default function Menu({ isVisible, image, }: {
-    isVisible?: boolean;
-    image: string;
-}): JSX.Element;
+import { MenuProps } from "../../../interface";
+export default function Menu({ action, profile, input, onClick }: MenuProps): JSX.Element;

package/layout/widget/dashboard/Menu.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTransition, animated } from "react-spring";
-import { cn } from "../../../util";
+import { cn, gradient } from "../../../util";
 import { useWidgetStore } from "../../../store";
-export default function Menu({ isVisible, image, }) {
-    const { setIsOwn } = useWidgetStore();
+import { Label } from "../../../html";
+export default function Menu({ action, profile, input, onClick }) {
+    const { isVisible } = action ?? {};
+    const { setIsOwn, removeModal } = useWidgetStore();
     const container = {
-        displays: "flex flex-col",
-        positions: "absolute top-8 right-0 z-45 ",
-        sizes: "w-72 ",
-        styles: " bg-white box-shadow",
+        displays: "flex flex-col p-2.5",
+        positions: "absolute top-0 right-0 z-45 ",
+        sizes: "w-52.5 ",
+        styles: " bg-white box-shadow rounded-lgx",
     };
     const transitions = useTransition(isVisible, {
         from: { opacity: 0 },
@@ -16,5 +18,13 @@ export default function Menu({ isVisible, image, }) {
         leave: { opacity: 0 },
         config: { duration: 200 },
     });
-    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: "h-48 flex gap-12 justify-center items-center text-black", children: [_jsx("img", { src: image, className: "rounded-full w-20 h-20" }), _jsxs("div", { children: [_jsx("div", { children: "\uD31C\uD558\uB2C8" }), _jsx("div", { className: "text-xs", children: "\uB274\uC9C4\uC2A4 \uCD08\uB4F1\uD559\uAD50" })] })] }), _jsx("a", { href: "/user", className: "flex justify-center py-3 px-5 hover:bg-gray-light", children: "\uB300\uC2DC\uBCF4\uB4DC" }), _jsx("a", { href: "/mypage", className: "flex justify-center py-3 px-5 hover:bg-gray-light", children: "My Page" })] })));
+    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: "h-17.75 flex gap-12 justify-center items-center text-black border-b-2 pb-2.5", children: [_jsxs("div", { children: [_jsx("div", { children: profile?.name }), _jsx("div", { className: "text-xs", children: profile?.belong })] }), _jsx("div", { className: "relative w-15 h-15 rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md", src: profile?.image, alt: "profile-image" }) })] }), _jsxs("div", { className: "flex flex-col gap-2.5 pt-2.5", children: [_jsx("input", { className: "w-47.5 h-6.25 border-2 text-black", value: input?.password[0], onChange: (e) => input?.password[1](e.target.value), type: "password" }), _jsxs("div", { className: "flex gap-2.5", children: [_jsx(Label.Button, { title: "\uCDE8\uC18C", onClick: () => removeModal("menu"), options: {
+                                    width: "sm",
+                                    height: "xs",
+                                } }), _jsx(Label.Button, { title: "\uD655\uC778", onClick: onClick, options: {
+                                    background: gradient.bg.greenToRed,
+                                    text: "text-white",
+                                    width: "sm",
+                                    height: "xs",
+                                } })] })] })] })));
 }

package/{navigation → layout/widget/dashboard}/Navigation.d.ts

@@ -1,4 +1,3 @@
-export declare const buttonClassNames: (href: string, nowPath: string, color?: [string, [string, string]]) => string;
 export declare function NavigationContainer({ children, }: {
     children: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/layout/widget/dashboard/Navigation.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export function NavigationContainer({ children, }) {
+    const container = {
+        positions: "fixed xl:static bottom-0 left-0 z-40",
+        displays: "flex flex-row xl:flex-col",
+        sizes: "w-full xl:w-auto",
+    };
+    return (_jsxs("div", { className: cn(container), children: [children, _jsx(Copyright, {})] }));
+}
+function Copyright() {
+    const copyrightBox = {
+        displays: "hidden xl:flex flex-col",
+        sizes: "h-11.5 pt-2.5 mt-2.5",
+        styles: "border-t border-black",
+        fonts: "text-2xs text-gray-dark",
+    };
+    const nowYear = new Date().getFullYear();
+    return (_jsxs("div", { className: cn(copyrightBox), children: [_jsxs("div", { className: "leading-tight", children: ["Copyright \u00A9 2002-", nowYear] }), _jsx("div", { className: "leading-tight", children: "International TOSEL Committee." }), _jsx("div", { className: "leading-tight", children: "All Rights Reserved." })] }));
+}

package/layout/widget/dashboard/Notification.d.ts

@@ -1,2 +1,2 @@
 import { DashboardNotification } from "../../../interface";
-export default function Notification({ isVisible, notifications, }: DashboardNotification): JSX.Element;
+export default function Notification({ action, notifications, }: DashboardNotification): JSX.Element;

package/layout/widget/dashboard/Notification.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTransition, animated } from "react-spring";
 import { cn } from "../../../util";
 import Events from "../../template/Events";
-export default function Notification({ isVisible, notifications, }) {
+export default function Notification({ action, notifications, }) {
+    const { isVisible } = action ?? {};
     const container = {
         positions: "absolute right-12 z-45",
         displays: "flex flex-col ",

package/layout/widget/dashboard/buttonClassNames.d.ts

@@ -0,0 +1,2 @@
+declare const buttonClassNames: (href: string, nowPath: string, color?: [string, [string, string]]) => string;
+export default buttonClassNames;

package/{navigation/Navigation.js → layout/widget/dashboard/buttonClassNames.js}

@@ -1,8 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../util";
-import { useWidgetStore } from "../store";
-import checkPathMatch from "../util/checkPathMatch";
-export const buttonClassNames = (href, nowPath, color) => {
+import { useWidgetStore } from "../../../store";
+import { cn } from "../../../util";
+import checkPathMatch from "../../../util/checkPathMatch";
+const buttonClassNames = (href, nowPath, color) => {
     const { isDark } = useWidgetStore();
     const [bg, [text, selectedText]] = color ?? ["white", ["white", "black"]];
     const container = {
@@ -18,11 +17,4 @@ export const buttonClassNames = (href, nowPath, color) => {
             `xl:bg-transparent xl:hover:bg-white/50 ${text} dark:text-white`;
     return [cn(container), toggle].join(" ");
 };
-export function NavigationContainer({ children, }) {
-    const container = {
-        positions: "fixed xl:static bottom-0 left-0 z-40",
-        displays: "flex flex-row xl:flex-col",
-        sizes: "w-full xl:w-auto",
-    };
-    return _jsx("div", { className: cn(container), children: children });
-}
+export default buttonClassNames;

package/layout/widget/dashboard/mypage/Layout.d.ts

@@ -0,0 +1,2 @@
+import { MyPageProps } from "../../../../interface";
+export default function MyPageLayout({ header, profile, navigations, children, options, }: MyPageProps): import("react/jsx-runtime").JSX.Element;

package/layout/widget/dashboard/mypage/Layout.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect } from "react";
+import { Header } from "../Header";
+import { cn } from "../../../../util";
+import { useWidgetStore } from "../../../../store";
+import Profile from "./Profile";
+import { NavigationContainer } from "../Navigation";
+export default function MyPageLayout({ header, profile, navigations, children, options, }) {
+    const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useWidgetStore();
+    const { title, options: headerOptions, logo, notification } = header;
+    const { background } = options ?? {};
+    useEffect(() => {
+        if (isOwn) {
+            return setIsOwn(false);
+        }
+        return clearView();
+    }, [flag]);
+    const container = {
+        sizes: "min-h-screen h-screen xl:h-auto",
+        background: `${background ?? "bg-white"} dark:bg-black/80`,
+        styles: "font-pretendard-medium",
+        dark: isDark && "dark",
+    };
+    const body = {
+        displays: "flex gap-12 xl:gap-7.5 ",
+        sizes: "h-full ",
+        paddings: "pt-15 xl:pl-2 2xl:px-12 xl:pt-7.5",
+    };
+    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { ...header }), _jsxs("div", { className: cn(body), children: [_jsxs(NavigationContainer, { children: [_jsx(Profile.Preview, { username: profile.username, email: profile.email, image: profile.image }), navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index)))] }), children] })] }));
+}

package/layout/widget/dashboard/mypage/Navigate.d.ts

@@ -0,0 +1,12 @@
+import { OnClick } from "../../../../interface";
+declare function Academy({ onClick }: {
+    onClick: OnClick;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Payment({ onClick }: {
+    onClick: OnClick;
+}): import("react/jsx-runtime").JSX.Element;
+declare const Navigate: {
+    Academy: typeof Academy;
+    Payment: typeof Payment;
+};
+export default Navigate;

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Card from "../../../../card/design/Card.design";
+function Academy({ onClick }) {
+    const [onMouse, _] = useState(false);
+    return (_jsxs(Card, { options: {
+            onClick,
+            className: "pt-5 pl-5 group",
+            boundary: "box-shadow shadow-green-dark",
+            onMouse: [onMouse, _],
+            width: "2xs",
+            height: "2xs",
+        }, 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 }) {
+    return (_jsxs(Card, { options: {
+            onClick,
+            className: "pt-5 pl-5",
+            background: "group bg-green-dark/10 hover:bg-green-dark/30 ",
+            width: "2xs",
+            height: "2xs",
+            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" })] }));
+}
+const Navigate = {
+    Academy,
+    Payment,
+};
+export default Navigate;

package/layout/widget/dashboard/mypage/Profile.d.ts

@@ -0,0 +1,30 @@
+import { Button as ButtonProp, OnClick, State, Titles } from "../../../../interface";
+interface ProfileProps {
+    name: string;
+    birthday: string;
+    image: string;
+    modify: {
+        image: OnClick;
+        name: OnClick;
+        birthday: OnClick;
+    };
+}
+declare function Profile({ name, birthday, image, modify }: ProfileProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Profile {
+    var Detail: ({ titles, infos, toggle, }: {
+        titles: Titles;
+        infos?: Info[] | undefined;
+        toggle?: State<boolean> | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Preview: ({ image, username, email, }: {
+        username: string;
+        email: string;
+        image: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+}
+interface Info {
+    title: string | "email" | "phone";
+    content: string;
+    button: ButtonProp;
+}
+export default Profile;

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { animated, useTransition } from "react-spring";
+import { cn, gradient } from "../../../../util";
+import Card from "../../../../card/design/Card.design";
+import { Label, Toggle } from "../../../../html";
+import SVG from "../../../../asset/SVG";
+function Profile({ name, birthday, image, modify }) {
+    const [hover, setHover] = useState(false);
+    const hoverBox = {
+        positions: "absolute top-0 left-0",
+        displays: "flex flex-col gap-y-2.75 justify-center items-center",
+        sizes: "w-full h-full",
+        styles: "bg-black/50",
+    };
+    const transitions = useTransition(hover, {
+        from: { opacity: 0 },
+        enter: { opacity: 1 },
+        leave: { opacity: 0 },
+        config: { duration: 250 },
+    });
+    return (_jsxs(Card, { options: {
+            className: "flex gap-x-7.5 items-center pl-5",
+            width: "md",
+            height: "2xs",
+            boundary: "border-1 border-black",
+        }, 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", options: { width: "sm", height: "xs" }, onClick: modify.name }), _jsx(Label.Button, { title: "\uC0DD\uC77C \uC218\uC815", options: { width: "sm", height: "xs" }, onClick: modify.birthday })] })] })] }));
+}
+function Detail({ titles, infos, toggle, }) {
+    const infoBox = {
+        displays: "flex ",
+        sizes: "w-full",
+        styles: "text-green-dark",
+    };
+    const id = useId();
+    return (_jsxs(Card, { options: {
+            className: "pt-5 px-5",
+            width: "md",
+            height: "xs",
+            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 }), _jsx(Label.Button, { title: button.title, onClick: button.onClick, options: {
+                                className: "ml-auto",
+                                background: gradient.bg.greenToRed,
+                                text: "text-white",
+                                width: "sm",
+                                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 })] }))] }));
+}
+function Preview({ image, username, email, }) {
+    const container = {
+        displays: "hidden xl:flex flex-col justify-center items-center gap-5",
+        sizes: "w-51 h-46.5",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "relative w-21 h-21 rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md", src: image, alt: "profile-image" }) }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "text-xl h-5.25 leading-none font-pretendard-bold", children: username }), _jsx("div", { className: "text-xs h-5.25 leading-none flex justify-center items-center", children: email })] })] }));
+}
+Profile.Detail = Detail;
+Profile.Preview = Preview;
+export default Profile;

package/layout/widget/promotion/Layout.d.ts

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

package/layout/widget/promotion/Layout.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Thumbnail from "./Thumbnail";
+export default function Layout({ children }) {
+    return (_jsxs("div", { className: "w-[1168px] h-full flex", children: [_jsx(Thumbnail, {}), children] }));
+}

package/layout/widget/promotion/Thumbnail.d.ts

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

package/layout/widget/promotion/Thumbnail.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiOutlineBellSlash } from "react-icons/hi2";
+import { MdComputer } from "react-icons/md";
+import { CiCreditCard1 } from "react-icons/ci";
+import { IoShareSocialOutline } from "react-icons/io5";
+import { MdAccessTime } from "react-icons/md";
+import { IoIosSchool } from "react-icons/io";
+export default function Thumbnail() {
+    return (_jsxs("div", { className: "w-[288px] flex flex-col mr-20", children: [_jsx("img", { src: "https://grepp-programmers.s3.amazonaws.com/production/file_resource/6246/Dev_Thumnail_Full_stack_Deceloper_3.png", alt: "", className: "w-full object-cover " }), _jsxs("div", { className: "font-bold text-left text-2xl p-1 mb-2 mt-2", children: ["[3\uAE30] K-Digital Training: ", _jsx("br", {}), "\uD0C0\uC785\uC2A4\uD06C\uB9BD\uD2B8\uB85C \uD568\uAED8\uD558\uB294 \uC6F9 \uD480 \uC0AC\uC774\uD074 \uAC1C\uBC1C(React, Node.js)"] }), _jsx("div", { className: "h-10", children: _jsx("button", { className: "w-full h-10 rounded-md bg-gradient-to-r from-violet-500 to-fuchsia-500 font-bold text-white", children: "\uD558\uB7EC\uAC00\uAE30" }) }), _jsxs("div", { className: "h-14 pt-4 pb-4 text-xs text-slate-300 flex justify-center items-center", children: [_jsx(HiOutlineBellSlash, { className: "mr-2" }), "\uC2E0\uCCAD \uC885\uB8CC\uC77C : ~2024-03-21"] }), _jsxs("div", { className: "h-auto pt-2 w-90/100", children: [_jsxs("div", { className: "text-slate-400 font-bold text-left flex items-center text-sm border-b-2 pt-2 pb-2", children: [_jsx("div", { className: "w-6", children: _jsx(IoIosSchool, { className: "mr-2" }) }), "\uC2E0\uCCAD \uAE30\uAC04 : 2024-04-19 ~ 2024-09-05 \uC885\uB8CC\uC77C \uC774\uD6C4 \uBB34\uC81C\uD55C \uC218\uAC15"] }), _jsxs("div", { className: "text-slate-400 font-bold text-left flex items-center text-sm border-b-2 pt-2 pb-2", children: [_jsx("div", { className: "w-6", children: _jsx(MdComputer, { className: "mr-2" }) }), "\uC628/\uC624\uD504\uB77C\uC778 \uCF54\uC2A4"] }), _jsxs("div", { className: "text-slate-400 font-bold text-left flex items-center text-sm border-b-2 pt-2 pb-2", children: [_jsx(CiCreditCard1, { className: "mr-2" }), "\u20A939,000"] }), _jsxs("div", { className: "text-slate-400 font-bold text-left flex items-center text-sm border-b-2 pt-2 pb-2", children: [_jsx(IoShareSocialOutline, { className: "mr-2" }), "\uACF5\uC720\uD558\uAE30"] }), _jsxs("div", { className: "text-slate-400 font-bold text-left flex items-center text-sm border-b-2 pt-2 pb-2", children: [_jsx(MdAccessTime, { className: "mr-2" }), "2024-05-02 \uB9C8\uC9C0\uB9C9 \uC5C5\uB370\uC774\uD2B8"] })] })] }));
+}

package/layout/widget/sign/WithTitle.d.ts

@@ -0,0 +1,6 @@
+import { HTMLInput } from "../../../interface";
+interface InputWithTitleProps extends HTMLInput {
+    title: string;
+}
+declare function WithTitle({ title, placeholder, state, flag, type, }: InputWithTitleProps): import("react/jsx-runtime").JSX.Element;
+export default WithTitle;

package/layout/widget/sign/WithTitle.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input } from "../../../html";
+function WithTitle({ title, placeholder, state, flag, type, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "leading-none", children: title }), _jsx(Input.LG, { placeholder: placeholder, state: state, flag: flag, type: type })] }));
+}
+export default WithTitle;

package/modal/design/ConfirmModal.design.d.ts

@@ -0,0 +1,2 @@
+import { ConfirmModalProps } from "../../interface/Modal";
+export default function ConfirmModalDesign({ titles, action, buttons, children, options, }: ConfirmModalProps): import("react/jsx-runtime").JSX.Element;

package/modal/design/ConfirmModal.design.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from "../../html";
+import { cn } from "../../util";
+import ModalDesign from "../design/Modal.design";
+export default function ConfirmModalDesign({ titles, action, buttons, children, options, }) {
+    const container = {
+        displays: "flex flex-col",
+    };
+    const buttonBox = {
+        positions: "absolute bottom-5 left-5",
+        displays: "flex gap-2.5",
+    };
+    return (_jsx(ModalDesign, { titles: titles, action: action, options: options, children: _jsxs("div", { className: cn(container), children: [children, _jsx("div", { className: cn(buttonBox), children: buttons.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
+                            ...options,
+                            width: "lg",
+                            height: "sm",
+                        } }, title))) })] }) }));
+}

package/modal/design/Modal.design.d.ts

@@ -1,2 +1,2 @@
 import { ModalProps } from "../../interface/Modal";
-export default function ModalDesign({ isVisible, event, children, options, debug, }: ModalProps): import("react").ReactPortal | null;
+export default function ModalDesign({ titles, action, children, options, debug, }: ModalProps): import("react").ReactPortal | null;