@edu-tosel/design 1.0.41 → 1.0.43

package/html/template/Input.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { cn } from "../../util";
+import Obstacle from "../widget/Obstacle";
+const widthSize = {
+    xs: "w-28",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+};
+function Input({ state, onKeyDown, placeholder, options }) {
+    const { width, disabled } = options ?? {};
+    const id = useId();
+    const [value, setValue] = state;
+    const container = {
+        positions: "relative",
+        width: `${widthSize[width ?? "xs"]} h-8`,
+        displays: "flex items-center",
+    };
+    const body = {
+        styles: "rounded-md bg-slate-200 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`,
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("input", { className: cn(body), id: id, type: "text", value: value, placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown, onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }));
+}
+function LG({ state, placeholder, flag, type }) {
+    const [value, setValue] = state;
+    const [onFocus, setOnFocus] = useState(false);
+    const container = {
+        positions: "relative",
+    };
+    const placeholderBox = {
+        positions: "absolute left-5",
+        styles: "duration-300",
+        fonts: "leading-none text-gray-medium",
+        animation: value || onFocus ? "top-2.625 text-xs" : "top-4.375 text-base",
+    };
+    const inputBox = {
+        sizes: "w-102.5 h-13.5 pl-5 pt-3",
+        fonts: "text-sm",
+        background: flag === true
+            ? "bg-green-dark/10"
+            : flag === false
+                ? "bg-crimson-burgundy/10 text-crimson-burgundy"
+                : "bg-gray-light",
+        styles: "bg-gray-light rounded-md outline-none",
+        animation: onFocus ? "border-2 border-green-dark box-shadow" : "border-0",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(placeholderBox), children: placeholder }), _jsx("input", { className: cn(inputBox), value: value, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onChange: (e) => setValue(e.target.value), type: type ?? "text" })] }));
+}
+Input.LG = LG;
+export default Input;

package/html/widget/Toggle.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
 const widthSize = {
     xs: "w-32",
     sm: "w-48",
@@ -9,6 +10,11 @@ const widthSize = {
     full: "w-full",
 };
 export default function Toggle({ state: [chekced, setChecked], labels, options, }) {
-    const { disabled } = options ?? {};
-    return (_jsxs("div", { className: "w-24 h-6 flex items-center", children: [_jsx("label", { htmlFor: "", className: "inline-flex items-center gap-2 ", children: _jsx("input", { disabled: typeof disabled === "boolean" && disabled, type: "checkbox", className: "toggle bg-red-crimson appearance-none relative rounded-full w-10 h-5  cursor-pointer", checked: chekced, onChange: (e) => setChecked(e.target.checked) }) }), _jsx("div", { className: "ml-2 transition-all text-xs", children: labels.map(([status, label]) => (status === chekced ? label : "")) })] }));
+    const { disabled, className } = options ?? {};
+    const container = {
+        displays: "flex items-center",
+        sizes: "h-6",
+        className,
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("label", { htmlFor: "", className: "inline-flex items-center gap-2 ", children: _jsx("input", { disabled: typeof disabled === "boolean" && disabled, type: "checkbox", className: "toggle bg-red-crimson appearance-none relative rounded-full w-10 h-5  cursor-pointer", checked: chekced, onChange: (e) => setChecked(e.target.checked) }) }), labels && (_jsx("div", { className: "ml-2 transition-all text-xs", children: labels.map(([status, label]) => (status === chekced ? label : "")) }))] }));
 }

package/index.d.ts

@@ -5,6 +5,5 @@ export * from "./layout";
 export * from "./html";
 export * from "./interaction";
 export * from "./modal";
-export * from "./navigation";
 export * from "./overlay";
 export * from "./text";

package/index.js

@@ -5,6 +5,5 @@ export * from "./layout";
 export * from "./html";
 export * from "./interaction";
 export * from "./modal";
-export * from "./navigation";
 export * from "./overlay";
 export * from "./text";

package/interface/Board.d.ts

@@ -6,6 +6,8 @@ interface OptionsProps {
     width?: Size;
     height?: Size;
     color?: string;
+    background?: string;
+    border?: string;
     isRounded?: boolean;
     noPadding?: boolean;
     noMobile?: boolean;

package/interface/Card.d.ts

@@ -1,4 +1,4 @@
-import { Button, DataField, DataSet, Disabled, ImageSize, OnClick, Size, Titles } from "./Property";
+import { Button, DataField, DataSet, Disabled, ImageSize, OnClick, Size, State, Titles } from "./Property";
 interface CardOptions {
     className?: string;
     boundary?: string;
@@ -9,6 +9,7 @@ interface CardOptions {
     text?: string;
     border?: string;
     onClick?: OnClick;
+    onMouse?: State<boolean>;
     overflow?: "hiden" | "y-scroll" | "auto";
     noPadding?: boolean;
     padding?: string | false;
@@ -72,6 +73,7 @@ export interface InfoCardProps extends CardProps {
     titles: Titles;
     topRight?: React.ReactNode;
     button?: Button;
+    image?: string;
     options?: {
         titleBorder?: string;
     } & CardOptions;

package/interface/HTMLElement.d.ts

@@ -15,6 +15,7 @@ export interface HTMLElement {
         background?: string;
         text?: string;
         disabled?: Disabled;
+        rounded?: string;
     };
 }
 export interface HTMLLabelElement extends HTMLElement {
@@ -28,14 +29,17 @@ export interface HTMLSelectElement<T> extends HTMLElement {
     selectOptions?: SelectOption<T>[];
     placeholder?: string;
 }
+type HTMLInputElementType = "text" | "password" | "date" | "email" | "phone" | "number";
 export interface HTMLInputElement extends HTMLElement {
     state: State<string> | State<string | undefined>;
     onKeyDown?: (e: React.KeyboardEvent) => void;
     placeholder?: string;
+    flag?: boolean;
+    type?: HTMLInputElementType;
 }
 export interface HTMLToggleElement extends HTMLElement {
     state: State<boolean>;
-    labels: [[true, string], [false, string]];
+    labels?: [[true, string], [false, string]];
 }
 export type ColorType = "red" | "blue" | "green";
 export interface HTMLCheckBoxElement extends HTMLElement {
@@ -52,3 +56,4 @@ export interface HTMLElementFrame {
     disabled?: Disabled;
     onClick?: OnClick;
 }
+export {};

package/interface/Layout.d.ts

@@ -1,4 +1,5 @@
 import { OnClick } from "./Property";
+import { ShowAction } from "./Widget";
 interface Notification {
     id: number;
     userId: number;
@@ -31,8 +32,15 @@ export interface DashboardProps {
         background?: string;
     };
 }
+export interface MyPageProps extends DashboardProps {
+    profile: {
+        image: string;
+        username: string;
+        email: string;
+    };
+}
 export interface DashboardNotification {
-    isVisible?: boolean;
+    action?: ShowAction;
     notifications?: Partial<Notification>[];
 }
 export {};

package/interface/Modal.d.ts

@@ -1,23 +1,27 @@
-import { Button, Scripts, Size } from "./Property";
-export interface ModalProps {
-    isVisible?: boolean;
-    event?: string;
+import { Button, Scripts, Size, Titles } from "./Property";
+import { ShowAction } from "./Widget";
+interface Options {
+    width: Size;
+    height: Size;
+    padding: boolean;
+    buttons: Button[];
+    noClose: boolean;
+}
+interface ModalProps {
+    titles: Titles;
     children: React.ReactNode;
+    action?: ShowAction;
     className?: string;
-    options?: {
-        width?: Size;
-        height?: Size;
-        padding?: boolean;
-        buttons?: Button[];
-        isCloseButton?: boolean;
-        closeButtonColor?: string;
-    };
+    options?: Partial<Options>;
     debug?: string;
 }
-export interface AlertModalProps extends Omit<ModalProps, "children"> {
-    title: string;
+interface ConfirmModalProps extends ModalProps {
+    buttons: [Button, Button];
+}
+interface AlertModalProps extends Omit<ModalProps, "children"> {
     scripts: Scripts;
     options?: {
         buttons?: Button[];
     };
 }
+export type { ModalProps, ConfirmModalProps, AlertModalProps };

package/interface/Overlay.d.ts

@@ -1,9 +1,9 @@
 import { HTMLElementFrame, HTMLLabelElement } from "./HTMLElement";
 import { Titles } from "./Property";
+import { ShowAction } from "./Widget";
 export interface OverlayProps {
     titles: Titles;
-    isVisible?: boolean;
-    event?: string;
+    action?: ShowAction;
     children?: React.ReactNode;
 }
 export interface InfoOverlayProps extends OverlayProps {

package/interface/Property.d.ts

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction } from "react";
 import { Replace } from "./Widget";
+import { HTMLLabelElement } from "./HTMLElement";
 /**
  * State type for the React component
  * @template T
@@ -36,7 +37,8 @@ export type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "
  * @property {"full"} full - Full size
  */
 export type OnClick<T = unknown> = (prop?: T) => unknown | ((prop?: T) => Promise<unknown>);
-export type Button = [string, OnClick];
+export interface Button extends HTMLLabelElement {
+}
 export type Disabled = boolean | OnClick;
 export type Scripts = {
     script: string;

package/interface/Widget.d.ts

@@ -10,6 +10,10 @@ type Event<T extends boolean | string | null | undefined> = [
 ];
 export type Show = Event<boolean | string>;
 export type Replace = Event<boolean | string | null | undefined>;
+export interface ShowAction {
+    event: string;
+    isVisible: boolean;
+}
 export interface ShowProps {
     widgets?: Show[];
     children: React.ReactNode;

package/layout/design/Tab.design.js

@@ -15,8 +15,8 @@ export default function Tab({ tabs, textColor, }) {
         sizes: "h-9 w-32 ",
         font: textColor ?? "text-green-dark",
     };
-    return (_jsx("div", { className: cn(container), children: tabs.map(([title, onClick], index) => (_jsx("button", { onClick: () => {
+    return (_jsx("div", { className: cn(container), children: tabs.map(({ title, onClick }, index) => (_jsx("button", { onClick: () => {
                 setTabsSelection(tabsSelection.map((_, i) => i === index));
-                return onClick();
+                return onClick && onClick();
             }, className: cn(button, `${tabsSelection[index] && "bg-white rounded-2xl"}`), children: title }, title))) }));
 }

package/layout/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Events } from "./template/Events";
-export { default as Dashboard } from "./template/Dashboard";
+export * from "./template/Dashboard";
+export { default as Promotion } from "./template/Promotion";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";

package/layout/index.js

@@ -1,5 +1,6 @@
 export { default as Events } from "./template/Events";
-export { default as Dashboard } from "./template/Dashboard";
+export * from "./template/Dashboard";
+export { default as Promotion } from "./template/Promotion";
 export { default as Sign } from "./template/Sign";
 export { default as DataField } from "./template/DataField";
 export { default as Gallery } from "./template/Gallery";

package/layout/template/Dashboard.d.ts

@@ -1,5 +1,22 @@
 import Layout from "../widget/dashboard/Layout";
+import MyPageLayout from "../widget/dashboard/mypage/Layout";
+import Profile from "../widget/dashboard/mypage/Profile";
 declare const Dashboard: {
     Layout: typeof Layout;
 };
-export default Dashboard;
+declare const MyPage: {
+    Layout: typeof MyPageLayout;
+    Card: {
+        Profile: typeof Profile;
+        Navigate: {
+            Academy: ({ onClick }: {
+                onClick: import("../../interface").OnClick;
+            }) => import("react/jsx-runtime").JSX.Element;
+            Payment: ({ onClick }: {
+                onClick: import("../../interface").OnClick;
+            }) => import("react/jsx-runtime").JSX.Element;
+        };
+    };
+};
+export { default as buttonClassNames } from "./../widget/dashboard/buttonClassNames";
+export { Dashboard, MyPage };

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/widget/dashboard/Header.js

@@ -14,7 +14,7 @@ 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: [

package/layout/widget/dashboard/Layout.js

@@ -1,9 +1,9 @@
 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;
@@ -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] })] }));
 }

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

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

package/layout/widget/dashboard/Menu.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 { useWidgetStore } from "../../../store";
-export default function Menu({ isVisible, image, }) {
+export default function Menu({ action, image, }) {
+    const { isVisible } = action ?? {};
     const { setIsOwn } = useWidgetStore();
     const container = {
         displays: "flex flex-col",

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, { title: title, notification: notification, options: headerOptions, logo: logo }), _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,28 @@
+import { Button as ButtonProp, OnClick, State, Titles } from "../../../../interface";
+declare function Profile({ name, birthday, image, modify, }: {
+    name: string;
+    birthday: string;
+    image: string;
+    modify: {
+        name: OnClick;
+        birthday: OnClick;
+    };
+}): 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;