@edu-tosel/design 1.0.42 → 1.0.43

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;

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, gradient } from "../../../../util";
+import Card from "../../../../card/design/Card.design";
+import { Label, Toggle } from "../../../../html";
+import { useId } from "react";
+function Profile({ name, birthday, image, modify, }) {
+    return (_jsxs(Card, { options: {
+            className: "flex gap-x-7.5 items-center pl-5",
+            width: "md",
+            height: "2xs",
+            boundary: "border-1 border-black",
+        }, children: [_jsx("div", { className: "w-20 h-20 overflow-hidden rounded-md", children: _jsx("img", { src: image, alt: "profile-image", className: "bg-cover" }) }), _jsxs("div", { className: "flex flex-col h-20", children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold text-gray-dark", children: name }), _jsx("div", { className: "leading-none text-gray-medium mt-1.25", children: birthday }), _jsxs("div", { className: "flex gap-3 mt-auto", children: [_jsx(Label.Button, { title: "\uC2E4\uBA85 \uC218\uC815", options: { width: "sm", height: "xs" }, onClick: modify.name }), _jsx(Label.Button, { title: "\uC0DD\uC77C \uC218\uC815", options: { width: "sm", height: "xs" }, onClick: modify.birthday })] })] })] }));
+}
+function Detail({ titles, infos, toggle, }) {
+    const infoBox = {
+        displays: "flex ",
+        sizes: "w-full",
+        styles: "text-green-dark",
+    };
+    const id = useId();
+    return (_jsxs(Card, { options: {
+            className: "pt-5 px-5",
+            width: "md",
+            height: "xs",
+            background: gradient.bg.greenToRedSoft,
+            boundary: "",
+        }, children: [_jsxs("div", { className: "h-13.25 flex flex-col text-gray-dark border-b-1 border-crimson-burgundy", children: [_jsx("div", { className: "text-xl font-pretendard-bold h-6 leading-none", children: titles.title }), _jsx("div", { className: "h-4.75 leading-none", children: titles.subtitle })] }), _jsx("div", { className: "mt-4.25 flex flex-col gap-2.5 ", children: infos?.map(({ title, content, button }, index) => (_jsxs("div", { className: cn(infoBox), children: [title === "phone" ? (_jsx("svg", { className: "mr-3", xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M10.9375 1.5625H8.59375C7.97215 1.5625 7.37601 1.80943 6.93647 2.24897C6.49693 2.68851 6.25 3.28465 6.25 3.90625V21.0937C6.25 21.7154 6.49693 22.3115 6.93647 22.751C7.37601 23.1906 7.97215 23.4375 8.59375 23.4375H16.4062C17.0279 23.4375 17.624 23.1906 18.0635 22.751C18.5031 22.3115 18.75 21.7154 18.75 21.0937V3.90625C18.75 3.28465 18.5031 2.68851 18.0635 2.24897C17.624 1.80943 17.0279 1.5625 16.4062 1.5625H14.0625M10.9375 1.5625V3.125H14.0625V1.5625M10.9375 1.5625H14.0625M10.9375 21.0937H14.0625", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) : title === "email" ? (_jsx("svg", { className: "mr-3", xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M22.6562 9.37501V10.3188C22.6563 10.7419 22.5417 11.1572 22.3248 11.5205C22.1078 11.8838 21.7965 12.1816 21.424 12.3823L14.676 16.0156M2.34375 9.37501V10.3188C2.34373 10.7419 2.45828 11.1572 2.67525 11.5205C2.89221 11.8838 3.20348 12.1816 3.57604 12.3823L10.324 16.0156M10.324 16.0156L11.3885 15.4427C11.7301 15.2587 12.112 15.1624 12.5 15.1624C12.888 15.1624 13.2699 15.2587 13.6115 15.4427L14.6771 16.0156L19.5312 18.6302M10.324 16.0156L5.46875 18.6302M22.6562 20.3125C22.6562 20.9341 22.4093 21.5303 21.9698 21.9698C21.5302 22.4093 20.9341 22.6563 20.3125 22.6563H4.6875C4.0659 22.6563 3.46976 22.4093 3.03022 21.9698C2.59068 21.5303 2.34375 20.9341 2.34375 20.3125V9.21251C2.34373 8.78934 2.45828 8.37407 2.67525 8.01075C2.89221 7.64744 3.20348 7.34964 3.57604 7.14897L11.3885 2.94168C11.7301 2.75769 12.112 2.66138 12.5 2.66138C12.888 2.66138 13.2699 2.75769 13.6115 2.94168L21.424 7.14897C21.7964 7.34956 22.1075 7.64719 22.3245 8.01031C22.5414 8.37342 22.6561 8.78848 22.6562 9.21147V20.3125Z", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) : (_jsx("div", { className: "font-pretendard-bold mr-5 w-7", children: title })), _jsx("div", { className: "leading-none flex items-center w-60", children: content }), _jsx(Label.Button, { title: button.title, onClick: button.onClick, options: {
+                                className: "ml-auto",
+                                background: gradient.bg.greenToRed,
+                                text: "text-white",
+                                width: "sm",
+                                height: "xs",
+                            } })] }, id + index))) }), toggle && (_jsxs("div", { className: "flex gap-2.5 items-center absolute bottom-5 right-5", children: [_jsx("div", { className: "text-xs leading-none text-green-dark", children: "\uD559\uC6D0\uC73C\uB85C \uBC1B\uAE30" }), _jsx(Toggle, { state: toggle })] }))] }));
+}
+function Preview({ image, username, email, }) {
+    const container = {
+        displays: "hidden xl:flex flex-col justify-center items-center gap-5",
+        sizes: "w-51 h-46.5",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "relative w-21 h-21 rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md", src: image, alt: "profile-image" }) }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("div", { className: "text-xl h-5.25 leading-none font-pretendard-bold", children: username }), _jsx("div", { className: "text-xs h-5.25 leading-none flex justify-center items-center", children: email })] })] }));
+}
+Profile.Detail = Detail;
+Profile.Preview = Preview;
+export default Profile;

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

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

package/layout/widget/promotion/Layout.js

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

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

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