@edu-tosel/design 1.0.21 → 1.0.23

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/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/EmailInput.js

@@ -40,5 +40,7 @@ export default function EmailInput({ state, placeholder, options, }) {
                         ? emailCss.true
                         : emailCss.false) +
                     (isValidEmail(value) && !focused ? emailCss.allTrue : ""), id: id, type: "text", placeholder: placeholder ?? "E-mail을 입력해주세요.", onChange: (e) => setValue(e.target.value), onBlur: handleBlur, onFocus: handleFocus }), value === "" ||
-                (!isValidEmail(value) && (_jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3", children: _jsx("span", { className: "text-[#FF8383]", children: "!" }) }))), value.length > 5 && !isValidEmail(value) && (_jsx("div", { className: "absolute top-4 left-40 w-60 h-12 bg-black opacity-60 z-100 text-white p-2 text-xs rounded-md shadow-md invisible peer-hover:visible", children: text }))] }));
+                (!isValidEmail(value) && (_jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3", children: _jsx("span", { className: "text-[#FF8383]", children: "!" }) }))), typeof value === "string" &&
+                value.length > 5 &&
+                !isValidEmail(value) && (_jsx("div", { className: "absolute top-4 left-40 w-60 h-12 bg-black opacity-60 z-100 text-white p-2 text-xs rounded-md shadow-md invisible peer-hover:visible", children: text }))] }));
 }

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,6 +26,7 @@ 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 = {

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 { Replace } from "./Widget";
 interface CardOptions {
     classNames?: string;
     boundary?: 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

@@ -26,7 +26,7 @@ export interface HTMLSelectElement extends HTMLElement {
     selectOptions?: [string | number, string][];
 }
 export interface HTMLInputElement extends HTMLElement {
-    state: State<string>;
+    state: State<string> | State<string | undefined>;
     onKeyDown?: (e: React.KeyboardEvent) => void;
     placeholder?: 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/Shelf.js

@@ -9,7 +9,7 @@ function Shelf({ titles, debug, children }) {
 }
 function Wrap({ classNames, titles, children, debug, }) {
     const container = {
-        displays: "flex flex-row flex-wrap gap-x-7.5",
+        displays: "flex flex-col xl:flex-row flex-wrap gap-x-7.5",
         classNames,
     };
     return (_jsx(ShelfDesign, { titles: titles, classNames: cn(container), options: {

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 ",

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.js

@@ -13,5 +13,5 @@ export default function Manage({ titles, isVisible, event, elements, }) {
         }) }));
 }
 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] }));
+    return (_jsxs("div", { className: "flex items-center gap-3.75", children: [_jsx("div", { className: "w-20 text-sm font-pretendard-bold text-gray-dim", children: title }), children] }));
 }

package/overlay/widget/Overlay.design.js

@@ -21,5 +21,5 @@ export default function OverlayDesign({ titles, children, event, isVisible, }) {
         leave: { width: "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", { className: "absolute top-3 left-3 bg-black w-6 h-6", onClick: () => removeView(event) }))] })));
 }

package/package.json

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

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.21
+1.0.23