@edu-tosel/design 1.0.22 → 1.0.24

package/board/template/CanvasBoard.js

@@ -1,16 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Events, Label } from "../..";
+import { Events } from "../..";
 import { cn } from "../../util";
 import { Board } from "../widget/Board.design";
 import BoardHeader from "../widget/Header";
 export default function CanvasBoard({ header, children, options, widgets, buttons, }) {
-    const layouts = "flex flex-col lg:flex-row lg:flex-wrap gap-7.5 ";
-    const sizes = "h-full ";
-    const paddings = "pb-36 xl:pb-6 px-2 xs:px-4 xl:pl-7.5 xl:pr-2 pt-2 xs:pt-4 xl:pt-7.5";
-    const styles = "overflow-y-scroll ";
-    return (_jsxs("div", { className: "relative w-full", children: [_jsxs(Board, { widgets: widgets, options: { ...options, isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), _jsx(Events.Replace, { widgets: widgets?.replaces, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) })] }), _jsx("div", { className: "absolute -bottom-18.5 right-0", children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
-                        ...options,
-                        text: "text-white",
-                        background: "bg-crimson-burgundy",
-                    } }))) })] }));
+    const body = {
+        displays: "flex flex-col lg:flex-row lg:flex-wrap gap-7.5 ",
+        sizes: "h-full",
+        paddings: `${header ? "pb-55 xl:pb-25" : "pb-36 xl:pb-6"} px-2 xs:px-4 xl:pl-7.5 xl:pr-2 pt-2 xs:pt-4 xl:pt-7.5`,
+        styles: "overflow-y-scroll",
+    };
+    return (_jsxs(Board, { widgets: widgets, buttons: buttons, options: { ...options, isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), _jsx(Events.Replace, { widgets: widgets?.replaces, children: _jsx("div", { className: cn(body), children: children }) })] }));
 }

package/board/template/ManageBoard.d.ts

@@ -1,4 +1,4 @@
 import { ManageBoardProps } from "../../interface/Board";
 export default function ManageBoard<K extends string, T extends {
     [p in K]: any;
-}>({ header, dataSets, dataField, widgets, options }: ManageBoardProps<T>): import("react/jsx-runtime").JSX.Element;
+}>({ header, dataSets, dataField, widgets, options, buttons, }: ManageBoardProps<T>): import("react/jsx-runtime").JSX.Element;

package/board/template/ManageBoard.js

@@ -5,7 +5,7 @@ import BoardHeader from "../widget/Header";
 import { cn, sortByOrder } from "../../util";
 import { useWidgetStore } from "../../store";
 import { useId } from "react";
-export default function ManageBoard({ header, dataSets, dataField, widgets, options }) {
+export default function ManageBoard({ header, dataSets, dataField, widgets, options, buttons, }) {
     const { classNames, noPadding } = options ?? {};
     const { order } = useWidgetStore();
     const id = useId();
@@ -16,6 +16,6 @@ export default function ManageBoard({ header, dataSets, dataField, widgets, opti
         paddings: `${!noPadding ? "pt-7.5 pb-60 px-2 xs:pl-4 xl:pl-7.5 xl:pb-7.5 " : ""} `,
         styles: "overflow-y-scroll",
     };
-    return (_jsxs(Board, { widgets: widgets, options: { isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), dataField && _jsx(DataField.Board, { id: id, dataField: dataField }), _jsx("div", { className: cn(container), children: _jsx(Events.Replace, { widgets: widgets?.replaces, children: dataSets.map(({ titles, items, renderItem, interaction }, index) => (_jsxs(Shelf.Wrap, { titles: titles, classNames: classNames, children: [items &&
+    return (_jsxs(Board, { widgets: widgets, buttons: buttons, options: { isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), dataField && _jsx(DataField.Board, { id: id, dataField: dataField }), _jsx("div", { className: cn(container), children: _jsx(Events.Replace, { widgets: widgets?.replaces, children: dataSets.map(({ titles, items, renderItem, interaction }, index) => (_jsxs(Shelf.Wrap, { titles: titles, classNames: classNames, children: [items &&
                                 sortByOrder(items, orders)?.map((item) => renderItem(item)), interaction] }, id + index))) }) })] }));
 }

package/board/widget/Board.design.d.ts

@@ -1,2 +1,2 @@
 import { BoardProps } from "../../interface/Board";
-export declare function Board({ children, widgets, options, debug }: BoardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Board({ children, widgets, options, debug, buttons, }: BoardProps): import("react/jsx-runtime").JSX.Element;

package/board/widget/Board.design.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, isDebug } from "../../util";
-import { Events } from "../../layout";
+import { Events, Label } from "../..";
 const widthSize = {
     xs: "w-20",
     sm: "w-24",
@@ -21,7 +21,7 @@ const heightSize = {
     full: "min-h-screen h-full",
     auto: "h-auto",
 };
-export function Board({ children, widgets, options, debug }) {
+export function Board({ children, widgets, options, debug, buttons, }) {
     const { shows } = widgets ?? {};
     const { width, height, isRounded, classNames } = options ?? {};
     const container = {
@@ -35,5 +35,12 @@ export function Board({ children, widgets, options, debug }) {
         styles: "bg-white text-black",
         rounded: `rounded-none ${isRounded ? "xl:rounded-xl" : ""}`,
     };
-    return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(body), children: _jsx(Events.Show, { widgets: shows, children: _jsx("div", { className: "h-full " + classNames, children: children }) }) }) }));
+    const button = {
+        positions: "fixed bottom-20 right-4 xl:absolute xl:-bottom-18.5 xl:right-0",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), children: _jsx(Events.Show, { widgets: shows, children: _jsx("div", { className: "h-full " + classNames, children: children }) }) }), _jsx("div", { className: cn(button), children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
+                        ...options,
+                        text: "text-white",
+                        background: "bg-crimson-burgundy",
+                    } }))) })] }));
 }

package/board/widget/Header.js

@@ -18,7 +18,7 @@ export default function BoardHeader({ titles, tag, options, }) {
     };
     const block = {
         displays: "xl:hidden block ",
-        sizes: "w-full h-22",
+        sizes: "w-full h-19",
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [icon && _jsx("img", { src: icon, className: "fill-blue-500" }), _jsx("div", { className: "text-2xl font-bold text-green-dark", children: title })] }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ width, title, options, state }, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: title }), _jsx(Select, { options: { width }, selectOptions: options, state: state }, title)] }, index))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }), _jsx("div", { className: cn(block) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [icon && _jsx("img", { src: icon, className: "fill-blue-500" }), _jsx("div", { className: "text-2xl font-pretendard-bold text-green-dark", children: title })] }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ width, title, options, state }, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: title }), _jsx(Select, { options: { width }, selectOptions: options, state: state }, title)] }, index))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }), _jsx("div", { className: cn(block) })] }));
 }

package/card/template/ChartCard.js

@@ -8,5 +8,5 @@ export default function ChartCard({ data, xAxis, yAxis, lines, bars, areas, opti
             width: width ?? "full",
             height: height ?? "lg",
             text: "text-xs",
-        }, children: [_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: data, children: [_jsx(XAxis, { dataKey: xAxis }), _jsx(YAxis, { dataKey: yAxis }), _jsx(Tooltip, {}), _jsx(Legend, {}), lines?.map((line) => (_jsx(Line, { ...line }, line.dataKey))), bars?.map((bar) => (_jsx(Bar, { ...bar }, bar.dataKey))), areas?.map((area) => (_jsx(Area, { ...area }, area.dataKey))), average && (_jsx(_Fragment, { children: _jsx(ReferenceLine, { x: average.x, stroke: "#ff0000" }) }))] }) }), average && (_jsxs("div", { className: "absolute top-0 left-0 w-full h-full flex justify-center items-center text-3xl text-gray-300 font-bold", children: ["\uD3C9\uADE0: ", average?.score, "\uC810"] }))] }));
+        }, children: [_jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: data, children: [_jsx(XAxis, { dataKey: xAxis }), _jsx(YAxis, { dataKey: yAxis }), _jsx(Tooltip, {}), _jsx(Legend, {}), lines?.map((line) => (_jsx(Line, { ...line }, line.dataKey))), bars?.map((bar) => (_jsx(Bar, { ...bar }, bar.dataKey))), areas?.map((area) => (_jsx(Area, { ...area }, area.dataKey))), average && (_jsx(_Fragment, { children: _jsx(ReferenceLine, { x: average.x, stroke: "#ff0000" }) }))] }) }), average && (_jsxs("div", { className: "absolute top-0 left-0 w-full h-full flex justify-center items-center text-3xl text-gray-300 font-pretendard-bold", children: ["\uD3C9\uADE0: ", average?.score, "\uC810"] }))] }));
 }

package/card/template/InfoCard.js

@@ -9,8 +9,8 @@ function PersonalInformation({ titles, data, }) {
     const body = {
         container: "flex flex-col pt-5.75",
         belong: "text-crimson-burgundy",
-        username: "text-gray-dim font-bold",
-        name: "text-xl font-bold text-crimson-burgundy",
+        username: "text-gray-dim font-pretendard-bold",
+        name: "text-xl font-pretendard-bold text-crimson-burgundy",
         subInfo: {
             displays: "flex flex-col mt-7.5",
             fonts: "text-xs text-gray-dim",
@@ -40,7 +40,7 @@ function Exam({ titles, data }) {
             titleBorder: "border-red-crimson",
             width: "sm",
             height: "xs",
-        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-4 font-bold ", children: [manager, " / ", isPublic ? "공개시험" : "비공개시험"] }), _jsxs("div", { children: [_jsxs("div", { className: "text-xs", children: ["\uC811\uC218\uB9C8\uAC10: ", endDate] }), _jsxs("div", { className: "text-xs", children: ["\uC2DC\uD5D8\uC77C: ", examDate] })] })] }), _jsx(Label.Button, { title: status, onClick: () => { }, options: { width: "sm", height: "xs", className: cn(label) } })] }) }));
+        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-4 font-pretendard-bold ", children: [manager, " / ", isPublic ? "공개시험" : "비공개시험"] }), _jsxs("div", { children: [_jsxs("div", { className: "text-xs", children: ["\uC811\uC218\uB9C8\uAC10: ", endDate] }), _jsxs("div", { className: "text-xs", children: ["\uC2DC\uD5D8\uC77C: ", examDate] })] })] }), _jsx(Label.Button, { title: status, onClick: () => { }, options: { width: "sm", height: "xs", className: cn(label) } })] }) }));
 }
 function ExamDataREG({ titles, data }) {
     const container = {
@@ -51,7 +51,7 @@ function ExamDataREG({ titles, data }) {
     const dataBox = {
         container: "flex justify-between",
         rightBox: "flex items-end",
-        score: "text-4xl font-bold leading-none",
+        score: "text-4xl font-pretendard-bold leading-none",
     };
     const arr = [
         ["part 1", data && data?.scores[0], "text-crimson-burgundy"],
@@ -71,7 +71,7 @@ function ExamDataREG({ titles, data }) {
                     !data,
                     _jsx(NoData.Sign, { script: "\uC774\uC804 \uAE30\uB85D\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.", color: "#910023", className: "text-[#910023] mt-12" }),
                 ],
-            ], children: _jsx("div", { className: cn(container), children: arr.map(([part, score, styles]) => (_jsxs("div", { className: cn(dataBox.container, styles), children: [_jsx("div", { children: part }), _jsxs("div", { className: cn(dataBox.rightBox), children: [_jsx("div", { className: "text-4xl font-bold leading-none", children: score }), _jsx("div", { children: "\uC810" })] })] }))) }) }) }));
+            ], children: _jsx("div", { className: cn(container), children: arr.map(([part, score, styles]) => (_jsxs("div", { className: cn(dataBox.container, styles), children: [_jsx("div", { children: part }), _jsxs("div", { className: cn(dataBox.rightBox), children: [_jsx("div", { className: "text-4xl font-pretendard-bold leading-none", children: score }), _jsx("div", { children: "\uC810" })] })] }))) }) }) }));
 }
 function ExamDataOLY({ titles, data }) {
     const container = {
@@ -88,7 +88,7 @@ function ExamDataOLY({ titles, data }) {
                     !data,
                     _jsx(NoData.Sign, { script: "\uC774\uC804 \uAE30\uB85D\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.", color: "#105652", className: "text-[#105652] mt-12" }),
                 ],
-            ], children: _jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "flex items-end text-green-dark", children: [_jsx("div", { className: "text-4xl font-bold leading-none ", children: data?.score }), _jsx("div", { children: "\uC810" })] }), _jsxs("div", { className: "text-gray-dim", children: [data?.prize, "\uC744 \uC218\uC0C1\uD558\uC600\uC2B5\uB2C8\uB2E4."] })] }) }) }) }));
+            ], children: _jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: "flex items-end text-green-dark", children: [_jsx("div", { className: "text-4xl font-pretendard-bold leading-none ", children: data?.score }), _jsx("div", { children: "\uC810" })] }), _jsxs("div", { className: "text-gray-dim", children: [data?.prize, "\uC744 \uC218\uC0C1\uD558\uC600\uC2B5\uB2C8\uB2E4."] })] }) }) }) }));
 }
 function Product({ titles, data }) {
     const { date, status, receiver, requester } = data;
@@ -133,7 +133,7 @@ function Grade({ titles, data }) {
             titleBorder: "border-blue-navy",
             width: "sm",
             height: "xs",
-        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-5", children: [_jsx("div", { className: cn(levelBox), children: data.levelString }), _jsx("span", { className: "text-sm", children: "\uD559\uC6D0\uC0DD, 23\uC138" })] }), _jsxs("div", { className: "absolute bottom-0 left-0 flex items-end gap-8 text-blue-navy", children: [_jsxs("div", { className: "w-20 h-12 flex justify-end items-end", children: [_jsx("div", { className: "leading-none text-4xl font-bold", children: data.score }), _jsx("div", { children: "\uC810" })] }), _jsxs("div", { className: "w-14 h-12 flex justify-end items-end", children: [_jsx("div", { className: "leading-none text-4xl font-bold", children: data.grade }), _jsx("div", { children: "\uB4F1\uAE09" })] })] })] }), _jsx(Label.Button, { title: "\uC0C1\uC138\uBCF4\uAE30", onClick: () => { }, options: {
+        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-5", children: [_jsx("div", { className: cn(levelBox), children: data.levelString }), _jsx("span", { className: "text-sm", children: "\uD559\uC6D0\uC0DD, 23\uC138" })] }), _jsxs("div", { className: "absolute bottom-0 left-0 flex items-end gap-8 text-blue-navy", children: [_jsxs("div", { className: "w-20 h-12 flex justify-end items-end", children: [_jsx("div", { className: "leading-none text-4xl font-pretendard-bold", children: data.score }), _jsx("div", { children: "\uC810" })] }), _jsxs("div", { className: "w-14 h-12 flex justify-end items-end", children: [_jsx("div", { className: "leading-none text-4xl font-pretendard-bold", children: data.grade }), _jsx("div", { children: "\uB4F1\uAE09" })] })] })] }), _jsx(Label.Button, { title: "\uC0C1\uC138\uBCF4\uAE30", onClick: () => { }, options: {
                         width: "sm",
                         height: "xs",
                         text: "text-white hover:text-blue-navy",

package/card/widget/Card.design.js

@@ -52,9 +52,5 @@ export default function CardDesign({ header, children, options, debug, }) {
         overflow: `overflow-${overflow ?? "hidden"}`,
         classNames,
     };
-    return (_jsxs("div", { className: cn(container), children: [header && _jsx(_Fragment, { children: header }), _jsx("div", { onClick: onClick &&
-                    (() => {
-                        setIsOwn(true);
-                        return onClick();
-                    }), className: cn(body), children: children })] }));
+    return (_jsxs("div", { className: cn(container), children: [header && _jsx(_Fragment, { children: header }), _jsx("div", { onClick: onClick && onClick, className: cn(body), children: children })] }));
 }

package/card/widget/InfoCard.design.js

@@ -12,7 +12,7 @@ export function InfoCardDesign({ titles: { title, subtitle }, debug, options, ch
             sizes: "w-full h-13.25",
             styles: `${titleBorder} border-b-2 pb-2.5`,
         },
-        titleText: "h-6 font-bold text-xl w-52 truncate",
+        titleText: "h-6 font-pretendard-bold text-xl w-52 truncate",
         subtitleText: "h-7 text-base font-extralight flex items-center",
         right: {
             fontColor: `${text ?? "text-black"}`,

package/card/widget/NavCard.design.js

@@ -16,7 +16,7 @@ export default function NavCardDesign({ titles, options }) {
             styles: `${color ?? "text-gray-dim"}`,
         },
         title: {
-            fonts: `${flag ? "text-2xl h-6.75" : "text-xl h-6"} font-bold`,
+            fonts: `${flag ? "text-2xl h-6.75" : "text-xl h-6"} font-pretendard-bold`,
             styles: (!color && titleColor) ?? "text-gray-dim",
         },
         subtitle: {

package/card/widget/TableCard.design.js

@@ -3,7 +3,7 @@ import { useId } from "react";
 import { useWidgetStore } from "../../store";
 import { cn, sortByOrder } from "../../util";
 import Card from "../widget/Card.design";
-import { DataField, Events, NoData, Row } from "../..";
+import { DataField, Events, Row } from "../..";
 export default function TableCardDesign({ dataSet, dataField, options }) {
     const { width, height } = options ?? {};
     const { order } = useWidgetStore();
@@ -19,10 +19,5 @@ export default function TableCardDesign({ dataSet, dataField, options }) {
             height: height ?? "lg",
             overflow: "y-scroll",
             noPadding: true,
-        }, children: _jsx(Events.Replace, { widgets: [
-                [
-                    dataSet.items.length === 0,
-                    dataSet.noData ?? _jsx(NoData.Script, { script: "No Data" }),
-                ],
-            ], children: sortByOrder(dataSet.items, orders).map((item, index) => (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: options?.rowHeight, noHover: options?.noHover, noPadding: options?.noRowPadding }, id + index))) }) }));
+        }, children: _jsx(Events.Replace, { widgets: dataSet?.replaces, children: sortByOrder(dataSet.items, orders).map((item, index) => (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: options?.rowHeight, noHover: options?.noHover, noPadding: options?.noRowPadding }, id + index))) }) }));
 }

package/globals.css

@@ -7,6 +7,16 @@
   src: url("./asset/fonts/Pretendard-Medium.otf") format("opentype");
 }
 
+@font-face {
+  font-family: "Pretendard-Bold";
+  src: url("./asset/fonts/Pretendard-Bold.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Pretendard-Light";
+  src: url("./asset/fonts/Pretendard-Light.otf") format("opentype");
+}
+
 @font-face {
   font-family: "Kostar";
   src: url("./asset/fonts/Kostar.ttf") format("truetype");

package/html/widget/Input.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../../util";
+import Obstacle from "./Obstacle";
 const widthSize = {
     xs: "w-28",
     sm: "w-48",
@@ -11,14 +12,20 @@ const widthSize = {
     full: "w-full",
 };
 export default function Input({ state, onKeyDown, placeholder, options, }) {
-    const { width } = options ?? {};
+    const { width, disabled } = options ?? {};
     const id = useId();
     const [value, setValue] = state;
     const container = {
+        positions: "relative",
         width: `${widthSize[width ?? "xs"]} h-8`,
-        styles: "rounded-md pl-4 pr-4 pt-2 pb-2 bg-slate-200 text-xs",
+        displays: "flex items-center",
+    };
+    const body = {
+        styles: "rounded-md bg-slate-200 text-xs",
+        sizes: "w-full h-full",
+        paddings: "pl-4",
         pseudo: "focus:outline-none focus:bg-white focus:text-black box-shadow-focus",
         effect: `transition-all`,
     };
-    return (_jsx("input", { className: cn(container), id: id, type: "text", placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown, onChange: (e) => setValue(e.target.value) }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx("input", { className: cn(body), id: id, type: "text", value: value, placeholder: placeholder ?? "입력해주세요", onKeyDown: onKeyDown, onChange: (e) => setValue(e.target.value) }), _jsx(Obstacle, { disabled: disabled })] }));
 }

package/html/widget/Label.design.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../../util";
 const widthSize = {
+    xs: "w-10",
     sm: "w-22.5",
     md: "w-45",
     lg: "w-50",
@@ -25,12 +26,13 @@ export default function LabelDesign({ title, onClick, options, }) {
         background: background ?? "bg-gray-light",
         texts: text ?? "text-gray-dim",
         animation: "duration-500",
+        fonts: "font-pretendard-light",
         styles: height !== "xs" ? "rounded-xl" : "rounded-md text-xs",
     };
     const obstacle = {
         positions: "absolute",
         sizes: "w-full h-full",
-        background: "bg-white/80 rounded-xl",
+        background: "bg-white/80 ",
     };
     return (_jsx("div", { className: className, children: _jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: title }), disabled && (_jsx("div", { onClick: typeof disabled === "function" ? disabled : undefined, className: cn(obstacle) }))] }) }));
 }

package/html/widget/Obstacle.d.ts

@@ -0,0 +1,4 @@
+import { Disabled } from "../../interface";
+export default function Obstacle({ disabled }: {
+    disabled?: Disabled;
+}): false | import("react/jsx-runtime").JSX.Element | undefined;

package/html/widget/Obstacle.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../util";
+export default function Obstacle({ disabled }) {
+    const obstacle = {
+        positions: "absolute",
+        sizes: "w-full h-full",
+        background: "bg-white/80 ",
+    };
+    return (disabled && (_jsx("div", { onClick: typeof disabled === "function" ? disabled : undefined, className: cn(obstacle) })));
+}

package/html/widget/Select.js

@@ -64,7 +64,7 @@ export default function Select({ state, selectOptions, options, }) {
     const { width } = options ?? {};
     const dropdown = {
         size: `w-40 h-6`,
-        styles: "cursor-pointer pt-4 pb-4 pl-2 pr-4 font-bold text-xs bg-white",
+        styles: "cursor-pointer pt-4 pb-4 pl-2 pr-4 font-pretendard-bold text-xs bg-white",
         display: `flex items-center`,
         hover: `hover:rounded-md`,
         effect: `transition-all`,
@@ -73,7 +73,7 @@ export default function Select({ state, selectOptions, options, }) {
     };
     const dropdownInput = {
         size: `w-40 h-6 `,
-        styles: "shadow-md text-xs pt-4 pb-4 pl-2 pr-4 font-bold bg-white text-left cursor-text border-1 rounded-md ",
+        styles: "shadow-md text-xs pt-4 pb-4 pl-2 pr-4 font-pretendard-bold bg-white text-left cursor-text border-1 rounded-md ",
         display: "absolute top-12 flex items-center z-10 ",
         focus: "focus:outline-none focus:border-[#44C5F3] focus:border-1 ",
     };
@@ -85,7 +85,7 @@ export default function Select({ state, selectOptions, options, }) {
     };
     const dropdownItem = {
         size: `${widthSize[width ?? "full"]} h-6 `,
-        styles: `text-xs text-left pt-4 pb-4 pl-2 pr-4 font-bold cursor-pointer `,
+        styles: `text-xs text-left pt-4 pb-4 pl-2 pr-4 font-pretendard-bold cursor-pointer `,
         display: `flex items-center z-40`,
         hover: `hover:bg-slate-200 `,
         effect: `transition-all `,

package/interface/Card.d.ts

@@ -1,4 +1,5 @@
-import { Button, DataField, ImageSize, OnClick, Size, Titles } from "./Property";
+import { Button, DataField, Disabled, ImageSize, OnClick, Size, Titles } from "./Property";
+import { Replace } from "./Widget";
 interface CardOptions {
     classNames?: string;
     boundary?: string;
@@ -44,7 +45,7 @@ export interface ChartCardProps extends Omit<CardProps, "children"> {
 interface ButtonInLay {
     title: string;
     onClick: OnClick;
-    disabled?: boolean | OnClick;
+    disabled?: Disabled;
     width?: Size;
     height?: Size;
     background?: string;
@@ -138,7 +139,7 @@ export interface TableCardProps<T> extends Omit<CardProps, "children"> {
     dataSet: {
         items: T[];
         onClick?: OnClick<T>;
-        noData?: React.ReactNode;
+        replaces?: Replace[];
     };
     dataField: {
         [p in keyof T]?: Partial<DataField>;

package/interface/HTMLElement.d.ts

@@ -1,4 +1,4 @@
-import { OnClick, Size, State } from "./Property";
+import { Disabled, OnClick, Size, State } from "./Property";
 export declare const HTMLElementType: {
     readonly TEXT: "text";
     readonly BUTTON: "button";
@@ -14,7 +14,7 @@ export interface HTMLElement {
         height?: Size;
         background?: string;
         text?: string;
-        disabled?: boolean | OnClick;
+        disabled?: Disabled;
     };
 }
 export interface HTMLLabelElement extends HTMLElement {

package/interface/Overlay.d.ts

@@ -1,20 +1,23 @@
-import { HTMLElementType } from "./HTMLElement";
-import { State, Titles } from "./Property";
+import { HTMLElementType, HTMLLabelElement } from "./HTMLElement";
+import { Disabled, OnClick, State, Titles } from "./Property";
 export interface OverlayProps {
     titles: Titles;
     isVisible?: boolean;
     event?: string;
     children?: React.ReactNode;
 }
+export interface HTMLElementFrame {
+    title: string;
+    type: HTMLElementType;
+    state?: State<string> | State<boolean>;
+    selectOptions?: [string | number, string][];
+    labels?: [string | boolean, string][];
+    disabled?: Disabled;
+    onClick?: OnClick;
+}
 export interface InfoOverlayProps extends OverlayProps {
 }
-export interface ManageOverlayProps extends InfoOverlayProps {
-    elements?: {
-        title: string;
-        state: State<string> | State<boolean>;
-        type: HTMLElementType;
-        selectOptions?: [string | number, string][];
-        labels?: [string | boolean, string][];
-        isDisabled?: boolean;
-    }[];
+export interface ManageOverlayProps extends OverlayProps {
+    elements?: HTMLElementFrame[];
+    buttons?: HTMLLabelElement[];
 }

package/interface/Property.d.ts

@@ -36,6 +36,7 @@ export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
  */
 export type OnClick<T = unknown> = (prop?: T) => unknown | ((prop?: T) => Promise<unknown>);
 export type Button = [string, OnClick];
+export type Disabled = boolean | OnClick;
 export type Scripts = {
     script: string;
     subScript?: string;

package/interface/Widget.d.ts

@@ -1,3 +1,4 @@
+import { HTMLLabelElement } from "./HTMLElement";
 import { DataField, OnClick } from "./Property";
 export interface WidgetEvent {
     event: string;
@@ -32,11 +33,12 @@ export interface DataFieldProps<T> {
     };
 }
 export interface RowProps<T> {
-    onClick?: OnClick<T>;
     item: T;
     dataField?: {
         [p in keyof T]?: Partial<DataField>;
     };
+    onClick?: OnClick<T>;
+    buttons?: HTMLLabelElement[];
     options?: {
         height?: string;
         size?: string;

package/layout/template/Row.d.ts

@@ -1,6 +1,6 @@
 import { RowProps } from "../../interface";
-declare function Board<T extends Record<string, any>>({ item, dataField, onClick, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
-declare function Card<T extends Record<string, any>>({ item, dataField, onClick, height, noPadding, noHover, }: Omit<RowProps<T>, "options"> & {
+declare function Board<T extends Record<string, any>>({ item, dataField, onClick, buttons, }: RowProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Card<T extends Record<string, any>>({ item, dataField, onClick, buttons, height, noPadding, noHover, }: Omit<RowProps<T>, "options"> & {
     height?: string;
     noPadding?: boolean;
     noHover?: boolean;

package/layout/template/Row.js

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

package/layout/template/report/Header.js

@@ -7,5 +7,5 @@ export default function Header({ groupName, examName, }) {
         sizes: "w-full max-w-280",
         styles: "py-8 bg-white shadow-md",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex justify-between w-full items-center px-2", children: [_jsx("img", { src: "/images/logos/itc.png", alt: "itc", width: 80 }), _jsx("div", { className: "flex items-center", children: _jsx("div", { className: "text-5xl font-bold", children: examName }) }), _jsx("img", { src: "/images/logos/badge-tosel-lab.png", alt: "tosel-lab", width: 80 })] }), _jsxs("div", { className: "", children: ["\uC9C0\uC815\uAD50\uC721\uAE30\uAD00: ", groupName] })] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex justify-between w-full items-center px-2", children: [_jsx("img", { src: "/images/logos/itc.png", alt: "itc", width: 80 }), _jsx("div", { className: "flex items-center", children: _jsx("div", { className: "text-5xl font-pretendard-bold", children: examName }) }), _jsx("img", { src: "/images/logos/badge-tosel-lab.png", alt: "tosel-lab", width: 80 })] }), _jsxs("div", { className: "", children: ["\uC9C0\uC815\uAD50\uC721\uAE30\uAD00: ", groupName] })] }));
 }

package/layout/widget/DataField.design.js

@@ -10,7 +10,7 @@ export default function DataFieldDesign({ id, dataField, options, }) {
         displays: "flex items-center",
         sizes: "w-full h-13.75",
         paddings: padding && padding,
-        styles: "bg-white box-shadow-sm font-bold",
+        styles: "bg-white box-shadow-sm font-pretendard-bold",
     };
     const block = {
         displays: "xl:hidden block ",
@@ -20,9 +20,9 @@ export default function DataFieldDesign({ id, dataField, options, }) {
                     Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100`, children: _jsxs("button", { onClick: () => setOrder(id, key), className: "flex items-center", children: [_jsx("div", { children: dataField[key]?.title }), _jsx("div", { className: "text-xs", children: orders?.map(({ orderBy, orderHow }) => {
                                         if (orderBy === key) {
                                             if (orderHow === "asc")
-                                                return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.15859 15.0437C6.7079 15.9134 7.27152 17 8.17239 17H15.8279C16.7282 17 17.2919 15.9134 16.8417 15.0437L13.0145 7.65229C12.5638 6.78257 11.4365 6.78257 10.9858 7.65229L7.15859 15.0437Z", fill: "#105652" }) }));
+                                                return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M7.15859 15.0437C6.7079 15.9134 7.27152 17 8.17239 17H15.8279C16.7282 17 17.2919 15.9134 16.8417 15.0437L13.0145 7.65229C12.5638 6.78257 11.4365 6.78257 10.9858 7.65229L7.15859 15.0437Z", fill: "#105652" }) }, id + key + "asc"));
                                             else if (orderHow === "desc")
-                                                return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.8414 8.95628C17.2921 8.08657 16.7285 7 15.8276 7L8.1721 7C7.27176 7 6.70813 8.08657 7.15831 8.95628L10.9855 16.3477C11.4362 17.2174 12.5635 17.2174 13.0142 16.3477L16.8414 8.95628Z", fill: "#105652" }) }));
+                                                return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.8414 8.95628C17.2921 8.08657 16.7285 7 15.8276 7L8.1721 7C7.27176 7 6.70813 8.08657 7.15831 8.95628L10.9855 16.3477C11.4362 17.2174 12.5635 17.2174 13.0142 16.3477L16.8414 8.95628Z", fill: "#105652" }) }, id + key + "asc"));
                                             else
                                                 return "";
                                         }

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

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

package/layout/widget/Row.design.js

@@ -1,16 +1,23 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../../util";
-export default function RowDesign({ item, dataField, options, onClick, }) {
+import { Label } from "../../html";
+export default function RowDesign({ item, dataField, options, onClick, buttons, }) {
     const { size, padding, text, noHover } = options ?? {};
     const id = useId();
     const container = {
+        positions: "relative",
         displays: "flex items-center ",
         sizes: size,
         paddings: padding,
         text: text,
         styles: !noHover && "hover:bg-gray-100 duration-100",
     };
-    return (_jsx("div", { className: cn(container), onClick: () => onClick?.(), children: dataField &&
-            Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100 truncate`, children: item[key] }, id + key))) }));
+    return (_jsxs("div", { className: cn(container), onClick: () => onClick?.(), children: [dataField &&
+                Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100 truncate`, children: 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",
+                        width: "xs",
+                        height: "xs",
+                    } }, id + title))) })] }));
 }

package/layout/widget/Shelf.design.js

@@ -11,7 +11,7 @@ export default function Shelf({ children, classNames, options, titles, debug, })
         container: "flex flex-col text-gray-dim",
         title: {
             text: titleSize ?? "text-xl xl:text-3xl",
-            font: "font-bold",
+            font: "font-pretendard-bold",
         },
         subtitle: {
             text: subtitleSize ?? "text-base xl:text-lg",

package/layout/widget/dashboard/Header.js

@@ -16,7 +16,7 @@ export function Header({ title, logo, options }) {
         styles: "px-5 xl:px-8 2xl:px-16 ",
         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("a", { href: logo.href, children: _jsx("img", { src: logo.image, alt: "logo", className: "h-6.25 w-28.78" }) })) : (_jsx("div", { className: "text-2xl", children: "TOSEL" })), _jsx("div", { className: "text-3xl font-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsxs(Events.Show, { widgets: [["menu", _jsx(Menu, { image: "/images/hani.png" })]], children: [_jsx("svg", { className: "cursor-pointer", xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938", stroke: "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("svg", { className: "cursor-pointer", onClick: () => {
+    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("a", { href: logo.href, children: _jsx("img", { src: logo.image, alt: "logo", className: "h-6.25 w-28.78" }) })) : (_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: [["menu", _jsx(Menu, { image: "/images/hani.png" })]], children: [_jsx("svg", { className: "cursor-pointer", xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938", stroke: "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("svg", { className: "cursor-pointer", onClick: () => {
                                 setIsOwn(true);
                                 return setView("menu");
                             }, xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M18.7313 19.5053C18.0034 18.5416 17.0618 17.7601 15.9804 17.2223C14.8991 16.6846 13.7077 16.4052 12.5 16.4063C11.2924 16.4052 10.101 16.6846 9.01964 17.2223C7.93832 17.7601 6.99664 18.5416 6.26878 19.5053M18.7313 19.5053C20.1516 18.2419 21.1533 16.5767 21.6054 14.7304C22.0576 12.884 21.9378 10.9439 21.262 9.16722C20.5862 7.39055 19.3862 5.86128 17.8213 4.78224C16.2564 3.7032 14.4004 3.12537 12.4995 3.12537C10.5986 3.12537 8.74267 3.7032 7.17775 4.78224C5.61282 5.86128 4.41288 7.39055 3.73705 9.16722C3.06122 10.9439 2.94144 12.884 3.3936 14.7304C3.84575 16.5767 4.84847 18.2419 6.26878 19.5053M18.7313 19.5053C17.0167 21.0346 14.7976 21.8783 12.5 21.8751C10.2021 21.8786 7.98361 21.0349 6.26878 19.5053M15.625 10.1563C15.625 10.9851 15.2958 11.78 14.7097 12.366C14.1237 12.9521 13.3288 13.2813 12.5 13.2813C11.6712 13.2813 10.8764 12.9521 10.2903 12.366C9.70427 11.78 9.37503 10.9851 9.37503 10.1563C9.37503 9.32751 9.70427 8.53265 10.2903 7.9466C10.8764 7.36055 11.6712 7.03131 12.5 7.03131C13.3288 7.03131 14.1237 7.36055 14.7097 7.9466C15.2958 8.53265 15.625 9.32751 15.625 10.1563Z", stroke: "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }) })] }));

package/modal/template/Alert.js

@@ -3,5 +3,5 @@ import ModalDesign from "../widget/Modal.design";
 export default function Alert({ isVisible, title, scripts, options, }) {
     const { script, subScript } = scripts ?? {};
     const { buttons } = options ?? {};
-    return (_jsx(ModalDesign, { isVisible: isVisible, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: _jsx("div", { className: "flex flex-col gap-3", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "text-3xl font-bold", children: title }), _jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", { className: "text-xl font-bold", children: script })] }) }) }));
+    return (_jsx(ModalDesign, { isVisible: isVisible, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: _jsx("div", { className: "flex flex-col gap-3", children: _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx("div", { className: "text-3xl font-pretendard-bold", children: title }), _jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", { className: "text-xl font-pretendard-bold", children: script })] }) }) }));
 }

package/modal/template/Input.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ModalDesign from "../widget/Modal.design";
 export default function Input({ isVisible, event, title, options, state, }) {
     const { buttons } = options ?? {};
-    return (_jsxs(ModalDesign, { isVisible: isVisible, event: event, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) })] }));
+    return (_jsxs(ModalDesign, { isVisible: isVisible, event: event, classNames: "pt-18 px-25", options: { buttons, isCloseButton: true }, children: [_jsx("div", { className: "text-xl font-pretendard-bold", children: title }), _jsx("input", { className: "border-2 border-black w-80 h-8", value: state[0], onChange: (e) => state[1](e.target.value) })] }));
 }

package/modal/widget/Modal.design.js

@@ -49,7 +49,7 @@ export default function ModalDesign({ isVisible, event, children, options, debug
         },
         body: {
             paddings: "px-8 py-2 ",
-            styles: "rounded-2xl bg-black text-2xl font-bold text-white",
+            styles: "rounded-2xl bg-black text-2xl font-pretendard-bold text-white",
         },
     };
     const closeButton = {

package/navigation/Navigation.js

@@ -8,7 +8,7 @@ export const buttonClassNames = (href, nowPath, color) => {
     const container = {
         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-bold ",
+        styles: "xl:rounded-lg xl:pl-5 font-pretendard-bold",
     };
     const toggle = checkPathMatch(href, nowPath)
         ? !isDark

package/overlay/template/Manage.d.ts

@@ -1,2 +1,2 @@
 import { ManageOverlayProps } from "../../interface";
-export default function Manage({ titles, isVisible, event, elements, }: ManageOverlayProps): import("react/jsx-runtime").JSX.Element;
+export default function Manage({ titles, isVisible, event, elements, buttons, }: ManageOverlayProps): import("react/jsx-runtime").JSX.Element;

package/overlay/template/Manage.js

@@ -1,17 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select, Toggle } from "../..";
+import { Input, Label, Select, Toggle } from "../..";
 import OverlayDesign from "../widget/Overlay.design";
+import Frame from "../widget/Frame.design";
 import { useId } from "react";
-export default function Manage({ titles, isVisible, event, elements, }) {
+import { cn } from "../../util";
+export default function Manage({ titles, isVisible, event, elements, buttons, }) {
     const id = useId();
-    return (_jsx(OverlayDesign, { titles: titles, event: event, isVisible: isVisible, children: elements?.map(({ title, type, labels, state, isDisabled, selectOptions }) => {
-            if (type === "select")
-                return (_jsx(Frame, { title: title, children: _jsx(Select, { state: state, selectOptions: selectOptions }) }, id + title));
-            if (type === "toggle")
-                return (_jsx(Frame, { title: title, children: _jsx(Toggle, { state: state, labels: labels, options: { disabled: isDisabled } }) }, id + title));
-            return null;
-        }) }));
-}
-function Frame({ title, children, }) {
-    return (_jsxs("div", { className: "flex items-center gap-3.75", children: [_jsx("div", { className: "w-20 text-sm font-bold text-gray-dim", children: title }), children] }));
+    const body = {
+        sizes: "w-full xl:h-120 ",
+        styles: "overflow-y-scroll",
+    };
+    return (_jsxs(OverlayDesign, { titles: titles, event: event, isVisible: isVisible, children: [_jsx("div", { className: cn(body), children: elements?.map(({ title, type, labels, state, selectOptions, disabled }) => {
+                    if (type === "select")
+                        return (_jsx(Frame, { title: title, children: _jsx(Select, { state: state, selectOptions: selectOptions }) }, id + title));
+                    if (type === "toggle")
+                        return (_jsx(Frame, { title: title, children: _jsx(Toggle, { state: state, labels: labels, options: { disabled } }) }, id + title));
+                    if (type === "input")
+                        return (_jsx(Frame, { title: title, children: _jsx(Input, { state: state, options: {
+                                    width: "md",
+                                    disabled,
+                                } }) }, id + title));
+                    return null;
+                }) }), _jsx("div", { className: "absolute bottom-12 right-12 flex gap-4", children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
+                        width: "sm",
+                        height: "xs",
+                        background: options?.background ?? "bg-crimson-dark",
+                        text: options?.text ?? "text-white",
+                        disabled: !onClick ? true : false,
+                    } }, id + title))) })] }));
 }

package/overlay/widget/Frame.design.d.ts

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

package/overlay/widget/Frame.design.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Frame({ title, children, }) {
+    return (_jsxs("div", { className: "flex items-center gap-3.75 h-9 ", children: [_jsx("div", { className: "w-20 text-sm font-pretendard-bold text-gray-dim", children: title }), children] }));
+}

package/overlay/widget/Overlay.design.js

@@ -7,19 +7,25 @@ export default function OverlayDesign({ titles, children, event, isVisible, }) {
     const { title } = titles;
     const container = {
         positions: "absolute top-0 right-0 z-30",
-        sizes: "h-full h",
+        sizes: "h-full",
         styles: "box-shadow-sm bg-white",
     };
     const body = {
         positions: "relative",
+        sizes: "h-full",
         paddings: "pt-12 pl-12",
         displays: "flex flex-col gap-3.5",
     };
+    const button = {
+        positions: "absolute top-2 left-2",
+        displays: "flex justify-center items-center ",
+        sizes: "w-7 h-7",
+    };
     const transitions = useTransition(isVisible, {
-        from: { width: "0%" },
-        enter: { width: "80%", maxWidth: "540px" },
-        leave: { width: "0%" },
+        from: { width: "10%", opacity: 0 },
+        enter: { width: "80%", maxWidth: "540px", opacity: 1 },
+        leave: { width: "10%", opacity: 0 },
         config: { duration: 300 },
     });
-    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: cn(body), children: [_jsx("div", { className: "font-bold text-2xl", children: title }), _jsx("div", { className: "flex flex-col gap-3", children: children })] }), event && (_jsx("button", { className: "absolute top-3 left-3 bg-black w-6 h-6", onClick: () => removeView(event) }))] })));
+    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: cn(body), children: [_jsx("div", { className: "font-pretendard-bold text-2xl", children: title }), _jsx("div", { className: "flex flex-col gap-3", children: children })] }), event && (_jsx("button", { onClick: () => removeView(event), className: cn(button), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M6.28003 5.22C6.13786 5.08752 5.94981 5.0154 5.75551 5.01882C5.56121 5.02225 5.37582 5.10096 5.23841 5.23838C5.101 5.37579 5.02228 5.56118 5.01886 5.75548C5.01543 5.94978 5.08755 6.13782 5.22003 6.28L8.94003 10L5.22003 13.72C5.14634 13.7887 5.08724 13.8715 5.04625 13.9635C5.00526 14.0555 4.98322 14.1548 4.98144 14.2555C4.97966 14.3562 4.99819 14.4562 5.03591 14.5496C5.07363 14.643 5.12977 14.7278 5.20099 14.799C5.27221 14.8703 5.35705 14.9264 5.45043 14.9641C5.54382 15.0018 5.64385 15.0204 5.74455 15.0186C5.84526 15.0168 5.94457 14.9948 6.03657 14.9538C6.12857 14.9128 6.21137 14.8537 6.28003 14.78L10 11.06L13.72 14.78C13.7887 14.8537 13.8715 14.9128 13.9635 14.9538C14.0555 14.9948 14.1548 15.0168 14.2555 15.0186C14.3562 15.0204 14.4562 15.0018 14.5496 14.9641C14.643 14.9264 14.7279 14.8703 14.7991 14.799C14.8703 14.7278 14.9264 14.643 14.9642 14.5496C15.0019 14.4562 15.0204 14.3562 15.0186 14.2555C15.0168 14.1548 14.9948 14.0555 14.9538 13.9635C14.9128 13.8715 14.8537 13.7887 14.78 13.72L11.06 10L14.78 6.28C14.9125 6.13782 14.9846 5.94978 14.9812 5.75548C14.9778 5.56118 14.8991 5.37579 14.7617 5.23838C14.6242 5.10096 14.4389 5.02225 14.2446 5.01882C14.0503 5.0154 13.8622 5.08752 13.72 5.22L10 8.94L6.28003 5.22Z", fill: "#7F7F7F" }) }) }))] })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/store/index.js

@@ -2,6 +2,7 @@ import { create } from "zustand";
 export const useWidgetStore = create((set) => ({
     events: [],
     setView: (prop) => set((state) => {
+        state.setIsOwn(true);
         if (state.events.find(({ event }) => event === prop) !== undefined)
             return state;
         return {

package/tailwind.config.ts

@@ -14,6 +14,8 @@ export default {
     extend: {
       fontFamily: {
         "pretendard-medium": ["pretendard-medium"],
+        "pretendard-bold": ["pretendard-bold"],
+        "pretendard-light": ["pretendard-light"],
         kostar: ["kostar"],
         nicomoji: ["nicomoji"],
         megrim: ["megrim"],
@@ -150,6 +152,7 @@ export default {
         52: "13rem",
         52.5: "13.125rem",
         54: "13.5rem",
+        55: "13.75rem",
         56: "14rem",
         62: "15.5rem",
         64: "16rem",

package/util/pattern.js

@@ -8,7 +8,7 @@ export const buttonStyle = {
             `w-${width}`,
             `bg-${bgColor} ${bgHoverColor ? `hover:bg-${bgHoverColor}` : ""}`,
             `text-${textColor} ${textHoverColor ? `hover:text-${textHoverColor}` : ""}`,
-            "font-bold py-2 px-4 rounded",
+            "font-pretendard-bold py-2 px-4 rounded",
         ];
         return classNames.join(" ");
     },

package/version.txt

@@ -1 +1 @@
-1.0.22
+1.0.24