@edu-tosel/design 1.0.14 → 1.0.16

package/README.md

@@ -20,11 +20,6 @@ Card 컴포넌트는 여러가지 요소를 담고 있는 컨테이너이다.
 
 일반적으로 가장 최소 단위의 컴포넌트로 사용되며, 다양한 요소를 담을 수 있다.
 
-### Deck
-
-Deck 컴포넌트는 여러가지 Card 컴포넌트를 담고 있는 컨테이너이다.
-
-Deck 컴포넌트는 담고있는 Card 컴포넌트들을 수평 정렬한다.
 
 ### Layout
 

package/board/template/CanvasBoard.js

@@ -4,7 +4,7 @@ import { Board } from "../widget/Board";
 export default function CanvasBoard({ children, options, widgets, }) {
     const layouts = "flex flex-col lg:flex-row lg:flex-wrap gap-7.5 ";
     const sizes = "h-full ";
-    const paddings = "pb-36 xl:pb-0 px-2 xs:px-4 xl:pl-8 xl:pr-2 pt-2 xs:pt-4 xl:pt-8";
+    const paddings = "pb-36 xl:pb-0 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 (_jsx(Board, { widgets: widgets, options: { ...options, isRounded: true }, children: _jsx("div", { className: cn(layouts, sizes, paddings, styles), children: children }) }));
 }

package/board/template/ManageBoard.js

@@ -13,11 +13,11 @@ export default function ManageBoard({ header, data, widgets, options }) {
     const id = useId();
     const orders = order[id] ?? [];
     const container = {
-        displays: "flex flex-col gap-8",
-        sizes: `h-full ${header ? (dataField ? "xl:h-135" : "xl:h-158") : "xl:h-full"}`,
-        paddings: `${!noPadding ? "pt-8 pb-60 px-2 xs:px-4 xl:px-8 xl:pb-6 " : ""}`,
+        displays: "flex flex-col gap-12",
+        sizes: `h-full ${header ? (dataField ? "xl:h-138.75" : "xl:h-153") : "xl:h-full"}`,
+        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(BoardDataField, { id: id, dataField: dataField }), _jsx("div", { className: cn(container), children: _jsx(Events.Replace, { widgets: widgets?.replaces, children: dataSets.map(({ title, subtitle, items, renderItem, interaction }) => (_jsxs(Shelf.Wrap, { titles: { title: title ?? "", subtitle: subtitle }, classNames: classNames, children: [items &&
-                                sortByOrder(items, orders)?.map((item) => renderItem(item)), interaction] }, id + title))) }) })] }));
+    return (_jsxs(Board, { widgets: widgets, options: { isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), dataField && _jsx(BoardDataField, { 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.js

@@ -15,8 +15,8 @@ const heightSize = {
     xs: "h-20",
     sm: "h-24",
     md: "h-28",
-    lg: "h-full xl:h-178 xl:min-h-0",
-    xl: "h-36",
+    lg: "h-full xl:h-171.5 xl:min-h-0",
+    xl: "h-full xl:h-171.5 xl:min-h-0",
     "2xl": "h-40",
     full: "min-h-screen h-full",
     auto: "h-auto",
@@ -30,8 +30,8 @@ export function Board({ children, widgets, options, debug }) {
         debug: debug && isDebug(`border-2  border-${debug}`),
     };
     const body = {
-        positions: "relative z-10 ",
-        sizes: `w-full ${heightSize[height ?? "lg"]} overflow-hidden `,
+        positions: "relative",
+        sizes: `w-full ${heightSize[height ?? "xl"]} overflow-hidden `,
         styles: "bg-white text-black",
         rounded: `rounded-none ${isRounded ? "xl:rounded-xl" : ""}`,
     };

package/board/widget/DataField.d.ts

@@ -1,9 +1,7 @@
 import { DataField } from "../../interface";
-export default function BoardDataField<K extends string, T extends {
-    [p in K]: any;
-}>({ id, dataField, }: {
+export default function BoardDataField<T extends Record<string, any>>({ id, dataField, }: {
     id: string;
-    dataField?: {
-        [p in keyof T]: DataField;
+    dataField: {
+        [p in keyof T]?: Partial<DataField>;
     };
 }): import("react/jsx-runtime").JSX.Element;

package/board/widget/DataField.js

@@ -5,30 +5,26 @@ export default function BoardDataField({ id, dataField, }) {
     const { order, setOrder } = useWidgetStore();
     const orders = order[id] ?? [];
     const container = {
-        positions: "fixed top-35 left-0 xl:static z-20",
+        positions: "fixed top-34 xl:top-0 left-0 xl:relative z-20",
         displays: "flex items-center",
-        styles: `bg-gray-200`,
-        sizes: "w-full h-23",
-    };
-    const dataFieldContainer = {
-        displays: "flex items-center",
-        sizes: "w-full h-12",
-        paddings: "px-2 xs:px-4 xl:px-8",
-        styles: "bg-white-off",
+        sizes: "w-full h-13.75",
+        paddings: "px-2 xs:px-4 xl:px-7.5",
+        styles: "bg-white",
+        test: "box-shadow-sm",
     };
     const block = {
         displays: "xl:hidden block ",
         sizes: container.sizes,
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(dataFieldContainer), children: dataField &&
-                        Object.entries(dataField).map(([key, { title, size }]) => (_jsx("div", { className: `w-${size}/100`, children: _jsxs("button", { onClick: () => setOrder(id, key), className: "flex items-center gap-1", children: [_jsx("div", { children: title }), _jsx("div", { className: "text-xs", children: orders?.map(({ orderBy, orderHow }) => {
-                                            if (orderBy === key) {
-                                                if (orderHow === "asc")
-                                                    return "▲";
-                                                else if (orderHow === "desc")
-                                                    return "▼";
-                                                else
-                                                    return "";
-                                            }
-                                        }) })] }) }, id + key))) }) }), _jsx("div", { className: cn(block) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(container), children: dataField &&
+                    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" }) }));
+                                            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" }) }));
+                                            else
+                                                return "";
+                                        }
+                                    }) })] }) }, id + key))) }), _jsx("div", { className: cn(block) })] }));
 }

package/board/widget/Header.d.ts

@@ -1,2 +1,2 @@
 import { BoardHeaderProps } from "./../../interface/Board";
-export default function BoardHeader({ title, tags, options, }: BoardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default function BoardHeader({ titles, tags, options, }: BoardHeaderProps): import("react/jsx-runtime").JSX.Element;

package/board/widget/Header.js

@@ -1,22 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { Input, Select } from "../../html";
-export default function BoardHeader({ title, tags, options, }) {
+export default function BoardHeader({ titles, tags, options, }) {
+    const { title, icon } = titles ?? {};
     const { selects, inputs } = tags ?? {};
     const { colors } = options ?? {};
     const { bgColor, textColor } = colors ?? {
-        bgColor: "gray-200",
+        bgColor: "white",
         textColor: "black",
     };
     const container = {
-        positions: "fixed top-15 left-0 z-20 xl:static flex items-center",
-        paddings: "px-12",
-        styles: `bg-${bgColor} text-${textColor} pl-12 pr-9`,
-        sizes: "w-full h-20",
+        positions: "fixed top-15 xl:top-0 left-0 z-20 xl:relative flex items-center",
+        paddings: "px-7.5",
+        styles: `bg-${bgColor} text-${textColor}`,
+        sizes: "w-full h-19",
+        border: "border-b-2 border-green-dark",
     };
     const block = {
         displays: "xl:hidden block ",
-        sizes: container.sizes,
+        sizes: "w-full h-22",
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsx("div", { className: "text-xl font-bold", children: title }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ width, title, options, onChange }, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: title }), _jsx(Select, { options: { width }, selectOptions: options, onChange: onChange }, title)] }, index))), inputs?.map(({ width, title, placeholder, onChange }, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: title }), _jsx(Input, { placeholder: placeholder, onChange: onChange, options: { width } })] }, 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-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(({ width, title, placeholder, state }, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { children: title }), _jsx(Input, { placeholder: placeholder, state: state, options: { width } })] }, index)))] })] }), _jsx("div", { className: cn(block) })] }));
 }

package/card/template/AddCard.d.ts

@@ -1,2 +1,2 @@
 import { AddCardProps } from "../../interface";
-export default function AddCard({ onClick, options }: AddCardProps): import("react/jsx-runtime").JSX.Element;
+export default function AddCard({ title, icon, onClick, options, }: AddCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/AddCard.js

@@ -1,11 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { Card } from "../widget/Card";
-export default function AddCard({ onClick, options }) {
+export default function AddCard({ title, icon, onClick, options, }) {
     const { width } = options ?? {};
     const container = {
-        displays: "flex justify-center items-center",
-        text: "text-3xl",
+        displays: "flex flex-col justify-center items-center gap-2",
+        text: "text-xs",
+        styles: "duration-500 hover:bg-gray-light",
     };
-    return _jsx(Card, { options: { width, classNames: cn(container), onClick }, children: "+" });
+    const iconBody = {
+        displays: "flex items-center justify-center ",
+        sizes: "w-9 h-9",
+        styles: "bg-gray-light rounded-full",
+    };
+    return (_jsxs(Card, { options: { width, classNames: cn(container), onClick }, children: [icon && (_jsx("div", { className: cn(iconBody), children: _jsx("img", { src: icon }) })), title && _jsx("div", { children: title })] }));
 }

package/card/template/InfoCard.design.js

@@ -13,7 +13,7 @@ export function InfoCardDesign({ titles: { title, subtitle }, debug, options, ch
             styles: `border-${titleBorderColor} border-b-2 pb-2.5`,
         },
         titleText: "h-6 font-bold text-lg ",
-        subtitleText: "h-5 text-sm font-extralight",
+        subtitleText: "h-4.75 text-sm font-extralight",
         right: {
             fontColor: `text-${rightTextColor ?? "black"}`,
             displays: "flex flex-col-reverse",

package/card/template/InfoCard.js

@@ -6,8 +6,8 @@ function Exam({ titles, data, }) {
     const { status, isPublic, manager, examDate, endDate } = data;
     const container = {
         positions: "relative",
-        displays: "flex flex-col gap-6.5 pt-2.5",
-        sizes: "h-25 w-full",
+        displays: "flex flex-col justify-between mt-2.5",
+        sizes: "h-19.25 w-full",
     };
     const style = {
         positions: "absolute bottom-0 right-0",
@@ -22,14 +22,14 @@ function Exam({ titles, data, }) {
             width: "sm",
             height: "sm",
             buttonBackgroundColor: "gray-light",
-        }, 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-sm", children: ["\uC811\uC218\uB9C8\uAC10: ", endDate] }), _jsxs("div", { className: "text-sm", children: ["\uC2DC\uD5D8\uC77C: ", examDate] })] }), _jsx("div", { className: cn(style), children: status })] }) }));
+        }, 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("div", { className: cn(style), children: status })] }) }));
 }
 function Product({ titles, data, }) {
     const { date, status, receiver, requester, button } = data;
     const container = {
         positions: "relative",
-        displays: "flex flex-col pt-2.5",
-        sizes: "h-25 w-full",
+        displays: "flex flex-col mt-2.5",
+        sizes: "h-19.25 w-full",
     };
     const style = {
         positions: "absolute bottom-0 right-0",
@@ -45,7 +45,7 @@ function Product({ titles, data, }) {
             width: "sm",
             height: "sm",
             buttonBackgroundColor: "gray-light",
-        }, children: _jsxs("div", { className: cn(container), children: [_jsxs("div", { children: ["\uC77C\uC2DC: ", date] }), _jsxs("div", { children: ["\uC694\uCCAD\uC790: ", requester ?? "No Data"] }), _jsxs("div", { children: ["\uC218\uC2E0\uC790: ", receiver ?? "No Data"] }), _jsx("button", { className: cn(style), onClick: () => button?.[1](), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: !hover ? status : button?.[0] ?? "완료" })] }) }));
+        }, children: _jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "text-sm", children: ["\uC77C\uC2DC: ", date] }), _jsxs("div", { className: "text-sm", children: ["\uC694\uCCAD\uC790: ", requester ?? "No Data"] }), _jsxs("div", { className: "text-sm", children: ["\uC218\uC2E0\uC790: ", receiver ?? "No Data"] }), _jsx("button", { className: cn(style), onClick: () => button?.[1](), onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: !hover ? status : button?.[0] ?? "완료" })] }) }));
 }
 function Item({ titles, data, }) {
     const { item } = data;
@@ -53,7 +53,7 @@ function Item({ titles, data, }) {
             titleBorderColor: "blue-navy",
             rightTextColor: "blue-navy",
             width: "xs",
-            height: "md",
+            height: "sm",
         }, children: _jsx("div", { children: item }) }));
 }
 function Profile(props) {

package/card/template/RowCard.d.ts

@@ -1,5 +1,2 @@
-export default function RowCard<T extends Record<string, any>>({ row, fields, sizes, }: {
-    row: T;
-    fields: Partial<Record<keyof T, "text" | ["select", [string, string][]]>>;
-    sizes: Partial<Record<keyof T, string>>;
-}): import("react/jsx-runtime").JSX.Element;
+import { RowCardProps } from "../../interface";
+export default function RowCard<T extends Record<string, any>>({ onClick, dataSet, dataField, }: RowCardProps<T>): import("react/jsx-runtime").JSX.Element;

package/card/template/RowCard.js

@@ -1,22 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../../util";
 import { Card } from "../widget/Card";
-import { useId, useState } from "react";
-export default function RowCard({ row, fields, sizes, }) {
+import { useWidgetStore } from "../../store";
+export default function RowCard({ onClick, dataSet, dataField, }) {
     const id = useId();
-    const [rowState, setRowState] = useState(row);
-    const entries = Object.entries(fields).map(([key, type]) => [type, key, rowState[key]]);
+    const { flag, setIsOwn } = useWidgetStore();
+    const container = {
+        displays: "flex items-center ",
+        sizes: "h-full",
+        paddings: "px-2 xs:px-4 xl:px-7.5 ",
+        styles: "text-xl hover:bg-gray-100 duration-100",
+    };
     return (_jsx(Card, { options: {
+            onClick,
+            classNames: cn(container),
             width: "full",
             height: "xs",
             boundary: "none",
             rounded: "none",
-        }, children: _jsx("div", { className: "flex items-center h-full px-2 xs:px-4 xl:px-8", children: entries.map(([type, key, value]) => (_jsx("div", { className: `w-${`${sizes[key]}/100` ?? "auto"}`, children: Array.isArray(type) && type[0] === "select" ? (_jsx(Select, { type: type, entry: [key, value], row: rowState, setRow: setRowState }, key + type + value.toString())) : (_jsx("div", { className: "w-full truncate", children: value ?? "No Data" }, key)) }, id + key))) }) }));
-}
-function Select({ type, entry, row, setRow, }) {
-    const id = useId();
-    const [key, value] = entry;
-    return (_jsx("select", { value: value, onChange: (e) => setRow({
-            ...row,
-            [key]: e.target.value,
-        }), children: type[1].map(([value, title]) => (_jsx("option", { value: value, children: title }, id + value))) }, id));
+        }, children: dataField &&
+            Object.keys(dataField).map((key) => (_jsx("div", { className: `w-${dataField[key]?.size}/100 truncate`, children: dataSet[key] }, id + key))) }));
 }

package/card/template/TableCard.js

@@ -13,7 +13,7 @@ export default function TableCard({ dataSets, dataField, options }) {
     const container = {
         text: "text-xs xs:text-sm sm:text-base",
     };
-    return (_jsx(Card, { header: Object.entries(dataField).map(([key, { title, size }]) => (_jsx("div", { className: `w-${size}/100`, children: _jsxs("button", { onClick: () => setOrder(id, key), className: "flex items-center gap-1", children: [_jsx("div", { children: title }), _jsx("div", { className: "text-xs", children: orders?.map(({ orderBy, orderHow }) => {
+    return (_jsx(Card, { header: Object.entries(dataField)?.map(([key, { title, size }]) => (_jsx("div", { className: `w-${size}/100`, children: _jsxs("button", { onClick: () => setOrder(id, key), className: "flex items-center gap-1", children: [_jsx("div", { children: title }), _jsx("div", { className: "text-xs", children: orders?.map(({ orderBy, orderHow }) => {
                             if (orderBy === key) {
                                 if (orderHow === "asc")
                                     return "▲";

package/card/widget/Card.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, isDebug } from "../../util";
+import { useWidgetStore } from "../../store";
 const widthSize = {
     xs: "w-full md:w-60",
     sm: "w-full md:w-90",
@@ -11,16 +12,17 @@ const widthSize = {
     auto: "w-auto",
 };
 const heightSize = {
-    xs: "min-h-16",
-    sm: "h-48",
-    md: "h-72 sm:h-48",
-    lg: "h-80",
+    xs: "h-12",
+    sm: "h-45",
+    md: "h-52.5",
+    lg: "h-67.5",
     xl: "h-125",
     "2xl": "",
     full: "h-full",
     auto: "h-auto min-h-80",
 };
 export function Card({ header, children, options, debug }) {
+    const { setIsOwn } = useWidgetStore();
     const { classNames, boundary, rounded, height, width, text, background, onClick, overflow, } = options ?? {};
     const { size: textSize } = text ?? {};
     const { color: bgColor } = background ?? {};
@@ -65,5 +67,9 @@ export function Card({ header, children, options, debug }) {
         overflow: `overflow-${overflow ?? "hidden"}`,
         classNames,
     };
-    return (_jsxs("div", { className: cn(container), children: [header && (_jsxs("div", { className: cn(headerStyle.container), children: [_jsx("div", { className: cn(headerStyle.body), children: header }), _jsx("div", { className: cn(headerStyle.block) })] })), _jsx("div", { onClick: onClick, className: cn(body), children: children })] }));
+    return (_jsxs("div", { className: cn(container), children: [header && (_jsxs("div", { className: cn(headerStyle.container), children: [_jsx("div", { className: cn(headerStyle.body), children: header }), _jsx("div", { className: cn(headerStyle.block) })] })), _jsx("div", { onClick: onClick &&
+                    (() => {
+                        setIsOwn(true);
+                        return onClick();
+                    }), className: cn(body), children: children })] }));
 }

package/globals.css

@@ -56,6 +56,10 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
 }
 
+.box-shadow-sm {
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+}
+
 .x-shape {
   position: relative;
   width: 0.83625rem;
@@ -91,3 +95,91 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
     0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
+/* Date Picker Css */
+.react-datepicker__day--selected {
+  background-color: #105652 !important;
+}
+.react-datepicker__header {
+  background: white !important;
+  border: none !important;
+}
+.react-datepicker {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
+  border-radius: 0.375rem !important;
+  border: none !important;
+}
+.react-datepicker__day--keyboard-selected {
+  background-color: white !important;
+  color: black !important;
+}
+.react-datepicker__day--outside-month {
+  color: rgb(161 161 170) !important;
+}
+.react-datepicker__month-container {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0.5rem;
+}
+.react-datepicker-popper {
+  transform: translate(0px 295px) !important;
+}
+.react-datepicker__input-container {
+  text-align: center !important;
+  border-radius: 0.375rem !important;
+  transition: all 0.3s;
+}
+.react-datepicker__input-container > input {
+  cursor: pointer !important;
+}
+.react-datepicker__input-container:hover {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
+}
+.react-datepicker__navigation {
+  top: 18px !important;
+}
+.react-datepicker__navigation--next {
+  right: 20px !important;
+}
+.react-datepicker__navigation--previous {
+  left: 182px !important;
+}
+.react-datepicker__current-month {
+  text-align: left !important;
+  margin-left: 16px !important;
+}
+.react-datepicker__triangle {
+  display: none !important;
+}
+.react-datepicker__children-container {
+  width: 16rem !important;
+}
+
+/* toggle button */
+[type="checkbox"]::before {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  width: 1.1rem;
+  height: 1.1rem;
+  border-radius: 50%;
+  transform: scale(0.9);
+  background-color: white;
+  transition: left 100ms linear;
+}
+[type="checkbox"]:checked::before {
+  background-color: white;
+  left: 1.32rem;
+}
+[type="checkbox"]:checked {
+  background-color: #105652;
+}
+[type="checkbox"]:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+[type="checkbox"]:disabled + span {
+  opacity: 0.3;
+  cursor: not-allowed;
+}

package/html/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Button } from "./widget/Button";
 export { default as Input } from "./widget/Input";
 export { default as Select } from "./widget/Select";
+export { default as Toggle } from "./widget/Toggle";

package/html/index.js

@@ -1,3 +1,4 @@
 export { default as Button } from "./widget/Button";
 export { default as Input } from "./widget/Input";
 export { default as Select } from "./widget/Select";
+export { default as Toggle } from "./widget/Toggle";

package/html/widget/DatePicker.d.ts

@@ -0,0 +1,3 @@
+import { HTMLInputElement } from "../../interface";
+import "react-datepicker/dist/react-datepicker.css";
+export default function DatePicker({ options }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/DatePicker.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import ReactDatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import ko from "date-fns/locale/ko";
+import { useRef } from "react";
+const widthSize = {
+    xs: "w-28",
+    sm: "w-48",
+    md: "w-64",
+    lg: "w-96",
+    xl: "w-128",
+    "2xl": "w-144",
+    full: "w-full",
+};
+export default function DatePicker({ options }) {
+    const { width } = options ?? {};
+    const [selectedDate, setSelectedDate] = useState(new Date());
+    const calRef = useRef(null);
+    return (_jsx("div", { children: _jsx(ReactDatePicker, { dateFormat: "yyyy\uB144 MM\uC6D4 dd\uC77C", icon: "fa fa-calendar", minDate: new Date("1900-01-01"), maxDate: new Date("2100-01-01"), selected: selectedDate, shouldCloseOnSelect: false, ref: calRef, onChange: (date) => setSelectedDate(date), locale: ko, className: "bg-slate-200 p-1 pl-4 pr-4 text-left rounded-md hover:bg-white focus:bg-white transition-all asdfasdf focus:outline-none w-68 h-10", children: _jsx("div", { className: "w-full h-auto flex justify-end items-end pr-4 pb-4", children: _jsx("button", { className: "p-2 bg-green-dark text-white rounded-md pr-4 pl-4 hover:opacity-85 hover:shadow-md transition-all", onClick: () => {
+                        calRef.current.setOpen(false);
+                    }, children: "\uC800\uC7A5\uD558\uAE30" }) }) }) }));
+}

package/html/widget/Input.d.ts

@@ -1,2 +1,2 @@
 import { HTMLInputElement } from "../../interface";
-export default function Input({ onChange, placeholder, options, }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;
+export default function Input({ state, placeholder, options, }: HTMLInputElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Input.js

@@ -10,7 +10,8 @@ const widthSize = {
     "2xl": "w-144",
     full: "w-full",
 };
-export default function Input({ onChange, placeholder, options, }) {
+export default function Input({ state, placeholder, options, }) {
+    const [_, onChange] = state;
     const { width } = options ?? {};
     const id = useId();
     const container = {

package/html/widget/Select.d.ts

@@ -1,2 +1,2 @@
 import { HTMLSelectElement } from "../../interface";
-export default function Select({ onChange, selectOptions, options, }: HTMLSelectElement): import("react/jsx-runtime").JSX.Element;
+export default function Select({ state, selectOptions, options, }: HTMLSelectElement): import("react/jsx-runtime").JSX.Element;

package/html/widget/Select.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
 import { useState, useEffect } from "react";
 import { BiChevronDown } from "react-icons/bi";
 import { useWidgetStore } from "../../store";
@@ -13,8 +12,8 @@ const widthSize = {
     "2xl": "w-144",
     full: "w-full",
 };
-export default function Select({ onChange, selectOptions, options, }) {
-    const arrayId = useId();
+export default function Select({ state, selectOptions, options, }) {
+    const [value, setValue] = state;
     // isActive 드롭다운 이벤트 통제
     const { flag } = useWidgetStore();
     useEffect(() => {
@@ -22,29 +21,39 @@ export default function Select({ onChange, selectOptions, options, }) {
             setIsActive(false);
         return setIsButton(false);
     }, [flag]);
+    const levelsKey = {
+        CoCoon: "CC",
+        "Pre-Starter": "PS",
+        Starter: "ST",
+        Basic: "BA",
+        Junior: "JR",
+        "High Junior": "HJ",
+    };
     const [isActive, setIsActive] = useState(false);
     const [isButton, setIsButton] = useState(false);
     const [selectedItem, setSelectedItem] = useState(null);
     const handleItemClick = (title) => {
         setSelectedItem(title);
         setIsActive(false);
+        const selectedValue = levelsKey[title] || title;
+        setValue(selectedValue);
     };
     // css
     const levels = [
         "CoCoon",
-        "PreStarter",
+        "Pre-Starter",
         "Starter",
         "Basic",
         "Junior",
-        "HighJunior",
+        "High Junior",
     ];
     const colorMap = {
         CoCoon: "bg-cocoon-green",
-        PreStarter: "bg-ps-pink",
+        "Pre-Starter": "bg-ps-pink",
         Starter: "bg-st-orange",
         Basic: "bg-ba-yellow",
         Junior: "bg-jr-blue",
-        HighJunior: "bg-hj-blue",
+        "High Junior": "bg-hj-blue",
     };
     const isActiveCss = () => {
         if (isActive)
@@ -54,7 +63,7 @@ export default function Select({ onChange, selectOptions, options, }) {
     const dropdownTop = selectOptions && selectOptions.length > 6 ? "top-24" : "top-12";
     const { width } = options ?? {};
     const dropdown = {
-        size: `${widthSize[width ?? "sm"]} h-10`,
+        size: `w-40 h-6`,
         styles: "cursor-pointer pt-4 pb-4 pl-4 pr-4 font-bold text-sm bg-white",
         display: `flex items-center`,
         hover: `hover:rounded-md`,
@@ -63,19 +72,19 @@ export default function Select({ onChange, selectOptions, options, }) {
         etc: "asdfasdf",
     };
     const dropdownInput = {
-        size: `${widthSize[width ?? "sm"]} h-10 `,
+        size: `w-40 h-6 `,
         styles: "shadow-md text-sm p-4 font-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 ",
     };
     const dropdownContent = {
-        size: `${widthSize[width ?? "sm"]} min-h-8 max-h-48 overflow-y-auto `,
-        styles: `text-sm mt-1 border-1 rounded-md`,
+        size: `w-40 min-h-6 max-h-48 overflow-y-auto `,
+        styles: `text-sm mt-1 border-1 rounded-md shadow-md`,
         display: `absolute z-40`,
         function: `${dropdownTop}`,
     };
     const dropdownItem = {
-        size: `${widthSize[width ?? "full"]} h-8 `,
+        size: `${widthSize[width ?? "full"]} h-6 `,
         styles: `text-sm text-left p-4 font-bold cursor-pointer `,
         display: `flex items-center z-40`,
         hover: `hover:bg-slate-200 `,
@@ -113,7 +122,7 @@ export default function Select({ onChange, selectOptions, options, }) {
             if (event.key === "Enter") {
                 if (selectedItem) {
                     setIsActive(false);
-                    onChange(selectedItem);
+                    setValue(selectedItem);
                 }
             }
             // Esc
@@ -148,7 +157,7 @@ export default function Select({ onChange, selectOptions, options, }) {
             window.removeEventListener("keydown", handleKeyDown);
             window.removeEventListener("resize", scrollIntoView);
         };
-    }, [isActive, selectedIndex, filteredOptions, selectedItem, onChange]);
+    }, [isActive, selectedIndex, filteredOptions, selectedItem, setValue]);
     return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: cn(dropdown), onClick: () => {
                     setIsActive(!isActive);
                     setIsButton(true);