@edu-tosel/design 1.0.60 → 1.0.62

package/interface/widget/index.js

@@ -1,2 +1,9 @@
 export * from "./Carousel";
 export * from "./Switch";
+export const WidgetType = {
+    TEXT: "text",
+    BUTTON: "button",
+    INPUT: "input",
+    SELECT: "select",
+    TOGGLE: "toggle",
+};

package/layout/design/DataField.design.d.ts

@@ -1,2 +1,2 @@
 import { DataFieldProps } from "../../interface";
-export default function DataFieldDesign<T extends Record<string, any>>({ id, dataField, options, }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function DataFieldDesign<T extends Record<string, any>>({ id, dataField, option, }: DataFieldProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/design/DataField.design.js

@@ -1,14 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { useActionStore } from "../../store";
-export default function DataFieldDesign({ id, dataField, options, }) {
+const heightSize = {
+    sm: "h-10",
+    md: "h-13.75",
+};
+export default function DataFieldDesign({ id, dataField, option, }) {
     const { order, setOrder } = useActionStore();
-    const { padding, position } = options ?? {};
+    const { padding, position, height } = option ?? {};
     const orders = order[id] ?? [];
     const container = {
         positions: position && position,
         displays: "flex items-center",
-        sizes: "w-full h-13.75",
+        sizes: `w-full ${heightSize[height ?? "md"]}`,
         paddings: padding && padding,
         styles: "bg-white box-shadow-sm font-pretendard-bold",
     };

package/layout/design/Row.design.d.ts

@@ -1,2 +1,2 @@
 import { RowProps } from "../../interface";
-export default function RowDesign<T>({ item, dataField, options, onClick, buttons, flag, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function RowDesign<T>({ item, dataField, option, onClick, buttons, dot, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/design/Row.design.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
+import { ColorSet } from "../../interface";
 import { cn } from "../../util";
 import { Label } from "../../widget";
-export default function RowDesign({ item, dataField, options, onClick, buttons, flag, }) {
-    const { size, padding, text, noHover, className, isPointer } = options ?? {};
+export default function RowDesign({ item, dataField, option, onClick, buttons, dot, }) {
+    const { size, padding, text, noHover, className, isPointer } = option ?? {};
     const id = useId();
     const container = {
         positions: "relative",
@@ -18,16 +19,16 @@ export default function RowDesign({ item, dataField, options, onClick, buttons,
         styles: "truncate",
         className,
     };
-    const flagBox = (flag) => ({
+    const flagBox = {
         positions: "absolute left-3.5",
-        backgrounds: flag ? "bg-green-500" : "bg-red-500",
+        backgrounds: dot && ColorSet[dot],
         sizes: "w-2 h-2",
         styles: "rounded-full",
-    });
-    return (_jsxs("div", { className: cn(container), onClick: () => onClick?.(), children: [typeof flag !== "undefined" && _jsx("div", { className: cn(flagBox(flag)) }), dataField &&
-                Object.keys(dataField).map((key) => (_jsx("div", { className: cn(`w-${dataField[key]?.size}/100`, itemBox), children: String(item[key]) }, id + key))), _jsx("div", { className: "absolute right-4 xl:right-8 flex gap-4", children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
-                        background: options?.background ?? "bg-crimson-dark",
-                        text: options?.text ?? "text-white",
+    };
+    return (_jsxs("div", { className: cn(container), onClick: () => onClick?.(), children: [typeof dot !== "undefined" && _jsx("div", { className: cn(flagBox) }), dataField &&
+                Object.keys(dataField).map((key) => (_jsx("div", { className: cn(`w-${dataField[key]?.size}/100`, itemBox), children: String(item[key]) }, id + key))), _jsx("div", { className: "absolute right-4 xl:right-8 flex gap-4", children: buttons?.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
+                        background: option?.background ?? "bg-crimson-dark",
+                        text: option?.text ?? "text-white",
                         width: "xs",
                         height: "xs",
                     } }, id + title))) })] }));

package/layout/design/Shelf.design.d.ts

@@ -1,2 +1,2 @@
 import { ShelfProps } from "../../interface";
-export default function Shelf<T extends string | number>({ children, className, options, titles, debug, }: ShelfProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function Shelf<T extends string | number>({ children, className, option, titles, debug, }: ShelfProps<T>): import("react/jsx-runtime").JSX.Element;

package/layout/design/Shelf.design.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LineBreaks } from "../../text";
 import { cn, isDebug } from "../../util";
-export default function Shelf({ children, className, options, titles, debug, }) {
+export default function Shelf({ children, className, option, titles, debug, }) {
     const { title, titleColor } = titles ?? {};
-    const { titleSize, subtitleSize, isSize } = options ?? {};
+    const { titleSize, subtitleSize, isSize } = option ?? {};
     const container = {
         displays: "flex flex-col gap-6",
         sizes: isSize && "w-full h-full lg:h-auto",

package/layout/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Action } from "./template/Action";
 export { default as Home } from "./template/home";
-export * 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";

package/layout/index.js

@@ -1,6 +1,6 @@
 export { default as Action } from "./template/Action";
 export { default as Home } from "./template/home";
-export * 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";

package/layout/template/Action.d.ts

@@ -1,4 +1,13 @@
-import { ReplaceProps, ShowProps } from "../../interface/Action";
+import React from "react";
+import { Replace as _Replace, Show as _Show } from "../../interface";
+interface ShowProps {
+    actions?: _Show[];
+    children: React.ReactNode;
+}
+interface ReplaceProps {
+    actions?: _Replace[];
+    children?: React.ReactNode;
+}
 declare function Show({ actions, children }: ShowProps): import("react/jsx-runtime").JSX.Element;
 declare function Replace({ actions, children }: ReplaceProps): import("react/jsx-runtime").JSX.Element;
 declare const Action: {

package/layout/template/DataField.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DataFieldDesign from "../design/DataField.design";
 function Board({ id, dataField }) {
-    return (_jsx(DataFieldDesign, { id: id, dataField: dataField, options: {
+    return (_jsx(DataFieldDesign, { id: id, dataField: dataField, option: {
             position: "fixed top-34 xl:top-0 left-0 xl:relative z-20",
             padding: "px-2 xs:px-4 xl:px-7.5",
         } }));
 }
 function Card({ id, dataField }) {
-    return (_jsx(DataFieldDesign, { id: id, dataField: dataField, options: { padding: "px-2 xs:px-4 xl:px-7.5" } }));
+    return (_jsx(DataFieldDesign, { id: id, dataField: dataField, option: {
+            height: "sm",
+            padding: "px-2 xs:px-4 xl:px-7.5",
+        } }));
 }
 const DataField = {
     Board,

package/layout/template/Gallery.d.ts

@@ -1,10 +1,10 @@
-import { Button, EventsProps } from "../../interface";
-export default function Gallery({ action, children, options, }: {
-    action: EventsProps & {
+import { Button, ActionProps } from "../../interface";
+export default function Gallery({ action, children, option, }: {
+    action: ActionProps & {
         tabs?: Button[];
     };
     children: React.ReactNode;
-    options?: {
+    option?: {
         tabTextColor?: string;
     };
 }): import("react/jsx-runtime").JSX.Element;

package/layout/template/Gallery.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Action from "./Action";
 import Tab from "./Tab";
 import { cn } from "../../util";
-export default function Gallery({ action, children, options, }) {
-    const { tabTextColor } = options ?? {};
+export default function Gallery({ action, children, option, }) {
+    const { tabTextColor } = option ?? {};
     const tabBox = {
         positions: "xl:absolute xl:-bottom-18 xl:left-0 z-5",
     };
-    return (_jsxs("div", { className: "relative w-full flex", children: [_jsx(Action.Replace, { actions: action?.replaces, children: _jsx(Action.Show, { actions: action?.shows, children: children }) }), action?.tabs && (_jsx(Tab, { tabs: action?.tabs, options: {
+    return (_jsxs("div", { className: "relative w-full flex", children: [_jsx(Action.Replace, { actions: action?.replaces, children: _jsx(Action.Show, { actions: action?.shows, children: children }) }), action?.tabs && (_jsx(Tab, { tabs: action?.tabs, option: {
                     className: cn(tabBox),
                     text: tabTextColor,
                 } }))] }));

package/layout/template/Promotion.d.ts

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

package/layout/template/Promotion.js

@@ -1,4 +1,4 @@
-import Layout from "../widget/promotion/Layout";
+import Layout from "./promotion/Layout";
 const Promotion = {
     Layout,
 };

package/layout/template/Row.d.ts

@@ -1,11 +1,11 @@
 import { RowProps } from "../../interface";
-declare function Row<T>({ item, dataField, onClick, buttons, flag }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Row<T>({ item, dataField, onClick, buttons, dot }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Row {
-    var Card: <T>({ item, dataField, onClick, buttons, height, noPadding, noHover, flag, }: Omit<RowProps<T>, "options"> & {
+    var Card: <T>({ item, dataField, onClick, buttons, height, noPadding, noHover, dot, }: Omit<RowProps<T>, "option"> & {
         height?: string | undefined;
         noPadding?: boolean | undefined;
         noHover?: boolean | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
-    var Board: <T>({ item, dataField, onClick, buttons, flag, options, }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
+    var Board: <T>({ item, dataField, onClick, buttons, dot, option, }: RowProps<T>) => import("react/jsx-runtime").JSX.Element;
 }
 export default Row;

package/layout/template/Row.js

@@ -1,27 +1,27 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import RowDesign from "../design/Row.design";
-function Row({ item, dataField, onClick, buttons, flag }) {
-    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, flag: flag, options: {
+function Row({ item, dataField, onClick, buttons, dot }) {
+    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, dot: dot, option: {
             size: "w-full h-12",
             noHover: true,
             text: "text-xs",
             className: "text-center",
         } }));
 }
-function Board({ item, dataField, onClick, buttons, flag, options, }) {
+function Board({ item, dataField, onClick, buttons, dot, option, }) {
     const id = useId();
-    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, flag: flag, options: {
-            ...options,
+    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, dot: dot, option: {
+            ...option,
             size: "w-full h-12",
             padding: "px-2 xs:px-4 xl:px-7.5",
             text: "text-xl",
         } }, id));
 }
-function Card({ item, dataField, onClick, buttons, height, noPadding, noHover, flag, }) {
+function Card({ item, dataField, onClick, buttons, height, noPadding, noHover, dot, }) {
     const id = useId();
-    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, flag: flag, options: {
-            size: `w-full ${height ?? "h-12"}`,
+    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, dot: dot, option: {
+            size: `w-full ${height ?? "h-15"}`,
             padding: !noPadding ? "px-2 xs:px-4 xl:px-7.5" : "",
             text: "text-base",
             noHover,

package/layout/template/Shelf.d.ts

@@ -1,7 +1,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 Wrap: ({ className, titles, children, debug, option, }: 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;
 }

package/layout/template/Shelf.js

@@ -11,17 +11,17 @@ function Shelf({ titles, debug, children }) {
     const container = {
         displays: "inline-flex flex-col gap-12",
     };
-    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), debug: debug, options: {
+    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), debug: debug, option: {
             titleSize: "text-lg xl:text-2xl",
         }, children: children }));
 }
-function Wrap({ className, titles, children, debug, options, }) {
+function Wrap({ className, titles, children, debug, option, }) {
     const container = {
         displays: "flex flex-row flex-wrap",
-        gaps: gap[options?.gap ?? "xy"],
+        gaps: gap[option?.gap ?? "xy"],
         className,
     };
-    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), options: {
+    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), option: {
             titleSize: "text-lg xl:text-2xl",
             subtitleSize: "text-sm",
         }, debug: debug, children: children }));
@@ -31,7 +31,7 @@ function Row({ titles, children, className, debug, }) {
         displays: "flex flex-row",
         className: className ?? "gap-x-7.5",
     };
-    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), options: {
+    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), option: {
             titleSize: "text-lg xl:text-2xl",
             subtitleSize: "text-sm",
             isSize: true,
@@ -42,7 +42,7 @@ function Col({ titles, children, debug, className, }) {
         displays: "flex flex-col flex-wrap",
         className: className ?? "gap-y-7.5",
     };
-    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), options: {
+    return (_jsx(ShelfDesign, { titles: titles, className: cn(container), option: {
             titleSize: "text-lg xl:text-2xl",
             subtitleSize: "text-sm",
         }, debug: debug, children: children }));

package/layout/template/Sign.d.ts

@@ -1,8 +1,8 @@
-import Box from "../widget/sign/Box";
-import Button from "../widget/sign/Button";
-import Check from "../widget/sign/Check";
-import Layout from "../widget/sign/Layout";
-import WithTitle from "../widget/sign/WithTitle";
+import Box from "./sign/Box";
+import Button from "./sign/Button";
+import Check from "./sign/Check";
+import Layout from "./sign/Layout";
+import WithTitle from "./sign/WithTitle";
 declare const Sign: {
     Box: typeof Box;
     Button: typeof Button;

package/layout/template/Sign.js

@@ -1,8 +1,8 @@
-import Box from "../widget/sign/Box";
-import Button from "../widget/sign/Button";
-import Check from "../widget/sign/Check";
-import Layout from "../widget/sign/Layout";
-import WithTitle from "../widget/sign/WithTitle";
+import Box from "./sign/Box";
+import Button from "./sign/Button";
+import Check from "./sign/Check";
+import Layout from "./sign/Layout";
+import WithTitle from "./sign/WithTitle";
 const Sign = {
     Box,
     Button,

package/layout/template/Tab.d.ts

@@ -6,11 +6,11 @@ interface Options {
     width?: Size;
     height?: Size;
 }
-export default function Tab({ tabs, options, state, }: {
+export default function Tab({ tabs, option, state, }: {
     tabs: (Button & {
         isStatic?: boolean;
     })[];
-    options?: Options;
+    option?: Options;
     state?: State<boolean[]>;
 }): import("react/jsx-runtime").JSX.Element;
 export {};

package/layout/template/Tab.js

@@ -9,8 +9,8 @@ const heightSize = {
     md: "h-7.5",
     lg: "h-9",
 };
-export default function Tab({ tabs, options, state, }) {
-    const { className, background, text, width, height } = options ?? {};
+export default function Tab({ tabs, option, state, }) {
+    const { className, background, text, width, height } = option ?? {};
     const [tabsSelection, setTabsSelection] = state
         ? state
         : useState(tabs.map((_, i) => i === 0));
@@ -28,10 +28,10 @@ export default function Tab({ tabs, options, state, }) {
         sizes: `${heightSize[height ?? "lg"]} ${widthSize[width ?? "lg"]}`,
         font: text ?? "text-green-dark",
     };
-    return (_jsx("div", { className: cn(container), children: tabs.map(({ title, onClick, isStatic, options }, index) => (_jsx("button", { onClick: () => {
+    return (_jsx("div", { className: cn(container), children: tabs.map(({ title, onClick, isStatic, option }, index) => (_jsx("button", { onClick: () => {
                 !isStatic &&
                     setTabsSelection(tabsSelection.map((_, i) => i === index));
                 return onClick && onClick();
             }, className: cn(button, `${!isStatic && tabsSelection[index] && "bg-white rounded-2xl"}`, `${isStatic &&
-                `${options?.background ?? "bg-green-dark"} ${options?.text ?? "text-white"} `}`), children: title }, title))) }));
+                `${option?.background ?? "bg-green-dark"} ${option?.text ?? "text-white"} `}`), children: title }, title))) }));
 }

package/layout/{widget → template}/dashboard/Header.d.ts

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

package/layout/{widget → template}/dashboard/Header.js

@@ -6,10 +6,10 @@ import { Action } from "../..";
 import Notification from "./Notification";
 import SVG from "../../../asset/SVG";
 import { Label } from "../../../widget";
-export function Header({ title, logo, notification, menu, options, }) {
+export function Header({ title, logo, notification, menu, option, }) {
     const { setView, setIsOwn } = useActionStore();
     const { notifications, flag, onClick, color } = notification;
-    const { text, background, className } = options ?? {};
+    const { text, background, className } = option ?? {};
     const container = {
         positions: "fixed xl:static top-0 left-0 z-40",
         displays: "flex items-center justify-between ",
@@ -29,7 +29,7 @@ export function Header({ title, logo, notification, menu, options, }) {
                             }, color: color }), menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
                                 setIsOwn(true);
                                 return setView("menu");
-                            }, color: color })) : (_jsx(Label.Button, { title: "\uB300\uC2DC\uBCF4\uB4DC\uB85C", onClick: menu?.onClick, options: {
+                            }, color: color })) : (_jsx(Label.Button, { title: "\uB300\uC2DC\uBCF4\uB4DC\uB85C", onClick: menu?.onClick, option: {
                                 width: "sm",
                                 height: "xs",
                                 text: "text-white",

package/layout/{widget → template}/dashboard/Layout.d.ts

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

package/layout/{widget → template}/dashboard/Layout.js

@@ -3,11 +3,11 @@ import { Fragment, useEffect } from "react";
 import { Header } from "./Header";
 import { cn } from "../../../util";
 import { useActionStore } from "../../../store";
-import { NavigationContainer } from "./Navigation";
-export default function Layout({ header, navigations, children, options, }) {
+import Navigation from "./Navigation";
+export default function Layout({ header, navigations, children, option, }) {
     const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useActionStore();
-    const { title, options: headerOptions, logo, notification, menu } = header;
-    const { background } = options ?? {};
+    const { title, option: headerOption, logo, notification, menu } = header;
+    const { background } = option ?? {};
     useEffect(() => {
         if (isOwn) {
             return setIsOwn(false);
@@ -25,5 +25,5 @@ export default function Layout({ header, navigations, children, options, }) {
         displays: "flex gap-12 xl:gap-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, 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] })] }));
+    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, notification: notification, menu: menu, option: headerOption, logo: logo }), _jsxs("div", { className: cn(body), children: [_jsx(Navigation.Container, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
 }

package/layout/{widget → template}/dashboard/Menu.js

@@ -18,10 +18,10 @@ export default function Menu({ showAction, profile, input, onClick, }) {
         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-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: {
+    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"), option: {
                                     width: "sm",
                                     height: "xs",
-                                } }), _jsx(Label.Button, { title: "\uD655\uC778", onClick: onClick, options: {
+                                } }), _jsx(Label.Button, { title: "\uD655\uC778", onClick: onClick, option: {
                                     background: gradient.bg.greenToRed,
                                     text: "text-white",
                                     width: "sm",

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

@@ -0,0 +1,7 @@
+declare function Container({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare const Navigation: {
+    Container: typeof Container;
+};
+export default Navigation;

package/layout/{widget → template}/dashboard/Navigation.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
-export function NavigationContainer({ children, }) {
+function Container({ children }) {
     const container = {
         positions: "fixed xl:static bottom-0 left-0 z-40",
         displays: "hidden lg:flex flex-row xl:flex-col",
@@ -18,3 +18,7 @@ function Copyright() {
     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." })] }));
 }
+const Navigation = {
+    Container,
+};
+export default Navigation;

package/layout/{widget → template}/dashboard/Notification.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTransition, animated } from "react-spring";
 import { cn } from "../../../util";
-import Action from "../../template/Action";
+import Action from "../Action";
 export default function Notification({ showAction, notifications, }) {
     const { isVisible } = showAction ?? {};
     const container = {

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

@@ -0,0 +1,28 @@
+import Layout from "./Layout";
+import MyPageLayout from "./mypage/Layout";
+import Profile from "./mypage/Profile";
+declare const Dashboard: {
+    Layout: typeof Layout;
+};
+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;
+        };
+    };
+};
+declare const dashboardConfig: {
+    style: {
+        nav: ({ href, nowPath, background, text, }: import("./style").NavigatorStyle) => string;
+    };
+};
+export { default as buttonClassNames } from "./buttonClassNames";
+export { default as Navigation } from "./Navigation";
+export { Dashboard, MyPage, dashboardConfig };

package/layout/template/dashboard/index.js

@@ -0,0 +1,18 @@
+import Layout from "./Layout";
+import MyPageLayout from "./mypage/Layout";
+import Navigate from "./mypage/Navigate";
+import Profile from "./mypage/Profile";
+import style from "./style";
+const Dashboard = {
+    Layout,
+};
+const MyPage = {
+    Layout: MyPageLayout,
+    Card: { Profile, Navigate },
+};
+const dashboardConfig = {
+    style,
+};
+export { default as buttonClassNames } from "./buttonClassNames";
+export { default as Navigation } from "./Navigation";
+export { Dashboard, MyPage, dashboardConfig };

package/layout/{widget → template}/dashboard/mypage/Layout.d.ts

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

package/layout/{widget → template}/dashboard/mypage/Layout.js

@@ -4,11 +4,11 @@ import { Header } from "../Header";
 import { cn } from "../../../../util";
 import { useActionStore } from "../../../../store";
 import Profile from "./Profile";
-import { NavigationContainer } from "../Navigation";
-export default function MyPageLayout({ header, profile, navigations, children, options, }) {
+import Navigation from "../Navigation";
+export default function MyPageLayout({ header, profile, navigations, children, option, }) {
     const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useActionStore();
-    const { title, options: headerOptions, logo, notification } = header;
-    const { background } = options ?? {};
+    const { title, option: headerOption, logo, notification } = header;
+    const { background } = option ?? {};
     useEffect(() => {
         if (isOwn) {
             return setIsOwn(false);
@@ -26,5 +26,5 @@ export default function MyPageLayout({ header, profile, navigations, children, o
         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] })] }));
+    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { ...header }), _jsxs("div", { className: cn(body), children: [_jsxs(Navigation.Container, { 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 → template}/dashboard/mypage/Navigate.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 import Card from "../../../../card/design/Card.design";
 function Academy({ onClick }) {
     const [onMouse, _] = useState(false);
-    return (_jsxs(Card, { options: {
+    return (_jsxs(Card, { option: {
             onClick,
             className: "pt-5 pl-5 group",
             boundary: "box-shadow shadow-green-dark",
@@ -13,7 +13,7 @@ function Academy({ onClick }) {
         }, 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: {
+    return (_jsxs(Card, { option: {
             onClick,
             className: "pt-5 pl-5",
             background: "group bg-green-dark/10 hover:bg-green-dark/30 ",