@edu-tosel/design 1.0.61 → 1.0.63

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, dot }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Row {
-    var Card: <T>({ item, dataField, onClick, buttons, height, noPadding, noHover, dot, }: 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, dot, 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

@@ -2,17 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import RowDesign from "../design/Row.design";
 function Row({ item, dataField, onClick, buttons, dot }) {
-    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, dot: dot, options: {
+    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, dot, options, }) {
+function Board({ item, dataField, onClick, buttons, dot, option, }) {
     const id = useId();
-    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, dot: dot, 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",
@@ -20,8 +20,8 @@ function Board({ item, dataField, onClick, buttons, dot, options, }) {
 }
 function Card({ item, dataField, onClick, buttons, height, noPadding, noHover, dot, }) {
     const id = useId();
-    return (_jsx(RowDesign, { onClick: onClick, item: item, dataField: dataField, buttons: buttons, dot: dot, 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 ",

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

@@ -19,12 +19,12 @@ function Profile({ name, birthday, image, modify }) {
         leave: { opacity: 0 },
         config: { duration: 250 },
     });
-    return (_jsxs(Card, { options: {
+    return (_jsxs(Card, { option: {
             className: "flex gap-x-7.5 items-center pl-5",
             width: "md",
             height: "3xs",
             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 })] })] })] }));
+        }, children: [_jsxs("button", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: modify.image, className: "w-20 h-20 overflow-hidden rounded-md relative", children: [_jsx("img", { src: image, alt: "profile-image", className: "bg-cover" }), transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(hoverBox), children: [_jsx(SVG.Image, {}), _jsx("div", { className: "text-white text-xs leading-none", children: "\uC0AC\uC9C4 \uBC14\uAFB8\uAE30" })] })))] }), _jsxs("div", { className: "flex flex-col h-20", children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold text-gray-dark", children: name }), _jsx("div", { className: "leading-none text-gray-medium mt-1.25", children: birthday }), _jsxs("div", { className: "flex gap-3 mt-auto", children: [_jsx(Label.Button, { title: "\uC2E4\uBA85 \uC218\uC815", option: { width: "sm", height: "xs" }, onClick: modify.name }), _jsx(Label.Button, { title: "\uC0DD\uC77C \uC218\uC815", option: { width: "sm", height: "xs" }, onClick: modify.birthday })] })] })] }));
 }
 function Detail({ titles, infos, toggle, }) {
     const infoBox = {
@@ -33,13 +33,13 @@ function Detail({ titles, infos, toggle, }) {
         styles: "text-green-dark",
     };
     const id = useId();
-    return (_jsxs(Card, { options: {
+    return (_jsxs(Card, { option: {
             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: {
+        }, 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, option: {
                                 className: "ml-auto",
                                 background: gradient.bg.greenToRed,
                                 text: "text-white",

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

@@ -0,0 +1,10 @@
+export interface NavigatorStyle {
+    href: string;
+    nowPath: string;
+    background?: string;
+    text?: string;
+}
+declare const style: {
+    nav: ({ href, nowPath, background, text, }: NavigatorStyle) => string;
+};
+export default style;

package/layout/template/dashboard/style.js

@@ -0,0 +1,16 @@
+import { checkPathMatch, cn } from "../../../util";
+const navigatorStyle = ({ href, nowPath, background = "bg-white", text = "text-white", }) => {
+    const style = {
+        displays: "flex flex-row items-center justify-center xl:justify-start gap-2.5",
+        sizes: " w-full xl:w-51 h-11 ",
+        styles: "xl:rounded-lg xl:pl-5 font-pretendard-bold",
+        texts: checkPathMatch(href, nowPath)
+            ? [background, text].join(" ")
+            : [text, "opacity-50 hover:opacity-100"].join(" "),
+    };
+    return cn(style);
+};
+const style = {
+    nav: navigatorStyle,
+};
+export default style;

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

@@ -2,9 +2,9 @@ import { Titles } from "../../../interface";
 interface NoticeOptions {
     className: string;
 }
-export default function Notice({ banners, options, }: {
+export default function Notice({ banners, option, }: {
     banners: BannerProps[];
-    options?: Partial<NoticeOptions>;
+    option?: Partial<NoticeOptions>;
 }): import("react/jsx-runtime").JSX.Element;
 type Tag = "REG" | "OLY";
 interface BannerProps {

package/layout/template/home/Notice.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SVG from "../../../asset/SVG";
 import { cn } from "../../../util";
-export default function Notice({ banners, options, }) {
-    const { className } = options ?? {};
+export default function Notice({ banners, option, }) {
+    const { className } = option ?? {};
     const container = {
         positions: "relative",
         backgrounds: "bg-[#F7F7F7]",

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

@@ -1,16 +1,16 @@
 interface PromotionOptions {
     className: string;
 }
-export default function Promotion({ banners, options, }: {
+export default function Promotion({ banners, option, }: {
     banners: BannerProps[];
-    options?: Partial<PromotionOptions>;
+    option?: Partial<PromotionOptions>;
 }): import("react/jsx-runtime").JSX.Element;
 interface BannerProps {
     image: {
         src: string;
         location?: string;
     };
-    options?: {
+    option?: {
         background?: string;
         boundary?: string;
     };

package/layout/template/home/Promotion.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SVG from "../../../asset/SVG";
 import { cn, gradient } from "../../../util";
-export default function Promotion({ banners, options, }) {
-    const { className } = options ?? {};
+export default function Promotion({ banners, option, }) {
+    const { className } = option ?? {};
     const container = {
         positions: "relative",
         displays: "flex flex-col",
@@ -24,8 +24,8 @@ export default function Promotion({ banners, options, }) {
     };
     return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "font-pretendard-bold text-green-dark text-3xl", children: "\uD504\uB85C\uBAA8\uC158" }), _jsx("div", { className: cn(body), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.image.src))) }), _jsxs("div", { className: cn(buttonBox), children: [_jsx(SVG.Symbol.LessThan, { onClick: () => { } }), _jsx(SVG.Symbol.GreaterThan, { onClick: () => { } })] })] }));
 }
-function Banner({ image, options }) {
-    const { background, boundary } = options ?? {};
+function Banner({ image, option }) {
+    const { background, boundary } = option ?? {};
     const container = {
         positions: "relative",
         sizes: "w-260 h-125",

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

@@ -9,7 +9,7 @@ interface BannerProps {
         location?: string;
         isBlur?: boolean;
     };
-    options?: {
+    option?: {
         background?: string;
     };
 }

package/layout/template/home/Service.js

@@ -22,8 +22,8 @@ export default function Service({ banners }) {
     };
     return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "font-pretendard-bold text-green-dark text-3xl", children: "\uD1A0\uC140\uC758 \uCC28\uBCC4\uD654\uB41C \uC11C\uBE44\uC2A4" }), _jsx("div", { className: cn(body), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) }), _jsxs("div", { className: cn(buttonBox), children: [_jsx(SVG.Symbol.LessThan, { onClick: () => { } }), _jsx(SVG.Symbol.GreaterThan, { onClick: () => { } })] })] }));
 }
-function Banner({ titles, image, options }) {
-    const { background } = options ?? {};
+function Banner({ titles, image, option }) {
+    const { background } = option ?? {};
     const container = {
         positions: "relative",
         displays: "flex flex-col",

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

@@ -13,8 +13,8 @@ export default function Carousel({ contents, }) {
     //     setIndex((index + 1) % contents.length);
     //   }
     // }, [flag]);
-    const { tag, titles, image, options } = contents[index];
-    const { text, background } = options ?? {};
+    const { tag, titles, image, option } = contents[index];
+    const { text, background } = option ?? {};
     const container = {
         displays: "flex justify-center items-center",
         sizes: "w-full h-100",

package/layout/{widget → template}/sign/WithTitle.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input } from "../../../widget";
 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 })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "leading-none", children: title }), _jsx(Input.Form, { placeholder: placeholder, state: state, flag: flag, type: type })] }));
 }
 export default WithTitle;

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

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