@edu-tosel/design 1.0.96 → 1.0.98

package/card/design/Card.design.d.ts

@@ -1,2 +1,2 @@
 import { CardProps } from "../../interface/Card";
-export default function CardDesign({ header, children, option, debug, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export default function CardDesign({ header, disabled, children, option, debug, }: CardProps): import("react/jsx-runtime").JSX.Element;

package/card/design/Card.design.js

@@ -1,6 +1,9 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, isDebug } from "../../util";
 import { useActionStore } from "../../store";
+import { Action } from "../../layout";
+import { Obstacle } from "../../widget";
+import { useRef } from "react";
 const widthSize = {
     "4xs": "w-15",
     "3xs": "w-40",
@@ -27,13 +30,15 @@ const heightSize = {
     "2xl": "h-127.5", // 510px
     "3xl": "h-138.5", // 554px
     full: "h-full", // 100%
-    auto: "h-auto min-h-80", // 100%
+    auto: "h-auto p-5", // 100%
 };
-export default function CardDesign({ header, children, option, debug, }) {
+export default function CardDesign({ header, disabled, children, option, debug, }) {
     const { setIsOwn } = useActionStore();
+    const { isDisabled, obstacle, disabledAction } = disabled ?? {
+        isDisabled: false,
+    };
     const { className, boundary, rounded, height, width, text, background, onClick, onMouse, overflow, } = option ?? {};
     const container = {
-        positions: "relative",
         sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
         onClick: onClick ? "cursor-pointer" : "",
         text: `${text ?? "text-base"} text-black dark:text-white`,
@@ -45,9 +50,15 @@ export default function CardDesign({ header, children, option, debug, }) {
         overflow: "overflow-hidden",
     };
     const body = {
+        positions: "relative",
         sizes: "w-full h-full",
         overflow,
         className,
     };
-    return (_jsxs("div", { onMouseEnter: onMouse ? () => onMouse[1](true) : () => { }, onMouseLeave: onMouse ? () => onMouse[1](false) : () => { }, className: cn(container), children: [header && _jsx(_Fragment, { children: header }), _jsx("div", { onClick: onClick && onClick, className: cn(body), children: children })] }));
+    const containerRef = useRef(null);
+    const headerRef = useRef(null);
+    return (_jsxs("div", { onMouseEnter: onMouse ? () => onMouse[1](true) : () => { }, onMouseLeave: onMouse ? () => onMouse[1](false) : () => { }, className: cn(container), ref: containerRef, children: [header && _jsx("div", { ref: headerRef, children: header }), _jsx("div", { style: {
+                    height: Number(containerRef.current?.offsetHeight) -
+                        Number(headerRef.current?.offsetHeight),
+                }, className: "relative w-full h-full", children: _jsx(Action.Show, { actions: [[isDisabled, obstacle ?? _jsx(Obstacle.Blur, {})]], children: _jsx("div", { onClick: onClick && onClick, className: cn(body), children: children }) }) })] }));
 }

package/card/design/ControlCard.design.d.ts

@@ -0,0 +1,2 @@
+import { ControlCardProps } from "../../interface";
+export default function ControlCardDesign<T>({ contents, option, }: ControlCardProps<T>): import("react/jsx-runtime").JSX.Element;

package/card/design/ControlCard.design.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CardDesign from "./Card.design";
+import { cn } from "../../util";
+import { LineBreaks } from "../../text";
+import { Label, Select } from "../../widget";
+export default function ControlCardDesign({ contents, option, }) {
+    return (_jsx(CardDesign, { option: {
+            className: "flex flex-col gap-y-5",
+            width: "lg",
+            height: "auto",
+            ...option,
+        }, children: contents.map((content) => (_jsx(ContentBox, { ...content }, content.titles.title))) }));
+}
+function ContentBox({ titles, widget }) {
+    const { title, subtitle, titleColor, icon } = titles;
+    const container = {
+        displays: "flex justify-between",
+    };
+    const titleBox = {
+        displays: "flex",
+        sizes: "h-6",
+        fonts: "font-pretendard-bold",
+        color: titleColor ?? "text-green-dark",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-x-3", children: [_jsxs("div", { className: "flex gap-x-3 items-start", children: [icon && _jsx("img", { src: icon, width: 24 }), _jsx("div", { className: cn(titleBox), children: title })] }), _jsx(LineBreaks, { texts: subtitle, className: "mt-0.5" })] }), widget && _jsx(WidgetOption, { ...widget })] }));
+}
+function WidgetOption({ type, data }) {
+    if (type === "button")
+        return (_jsx(Label.Button, { ...data, option: {
+                width: "3xs",
+                height: "3xs",
+                text: "text-xs",
+            } }));
+    if (type === "selectSwitch")
+        return (_jsx(Select.Switch, { ...data, option: {
+                size: "sm",
+            } }));
+    if (type === "selectToggle")
+        return _jsx(Select.Toggle, { ...data });
+    return null;
+}

package/card/design/CustomCard.design.d.ts

@@ -1,2 +1,2 @@
 import { CustomCardProps } from "../../interface";
-export default function CustomCardDesign({ titles, option, children, }: CustomCardProps): import("react/jsx-runtime").JSX.Element;
+export default function CustomCardDesign({ titles, disabled, option, children, }: CustomCardProps): import("react/jsx-runtime").JSX.Element;

package/card/design/CustomCard.design.js

@@ -1,23 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../util";
 import CardDesign from "./Card.design";
-export default function CustomCardDesign({ titles, option, children, }) {
-    const titleBox = {
-        positions: "relative z-10",
-        displays: "flex flex-col gap-3",
-    };
-    const titleStyle = {
-        fonts: "font-pretendard-bold leading-tight text-[16px]",
-        styles: titles.titleColor,
-    };
-    const subtitleStyle = {
-        fonts: "font-pretendard-medium leading-tight text-[12px]",
-        styles: titles.subtitleColor,
-    };
-    return (_jsxs(CardDesign, { option: {
-            ...option,
-            width: option?.width ?? "lg",
-            height: option?.height ?? "4xs",
-            className: option?.className ?? "p-5",
-        }, children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: cn(titleStyle), children: titles.title }), _jsx("div", { className: cn(subtitleStyle), children: titles.subtitle })] }), children ?? null] }));
+import TitleBox from "./widget/TitleBox.design";
+export default function CustomCardDesign({ titles, disabled, option, children, }) {
+    return (_jsxs("div", { children: [_jsx(TitleBox, { titles: titles }), _jsx(CardDesign, { disabled: disabled, option: {
+                    ...option,
+                    width: option?.width ?? "lg",
+                    height: option?.height ?? "auto",
+                    className: option?.className,
+                }, children: children ?? null })] }));
 }

package/card/design/NavCard.design.js

@@ -29,8 +29,8 @@ export default function NavCardDesign({ titles, option }) {
         sizes: image?.size,
     };
     return (_jsxs(Card, { option: option, children: [_jsxs("div", { className: cn(textBox.container), children: [_jsx("div", { className: cn(textBox.title), children: title }), _jsx(LineBreaks, { className: cn(textBox.subtitle), texts: subtitle ?? "" })] }), buttonInLay && (_jsx(Label.Button, { title: buttonInLay.title, onClick: buttonInLay.onClick, option: {
-                    disabled: buttonInLay.disabled,
                     className: "absolute bottom-7.5 left-7.5",
+                    disabled: buttonInLay.disabled,
                     background: buttonInLay?.background,
                     text: buttonInLay?.text,
                 } })), image && (_jsx("img", { src: image.path, alt: "trump-image", loading: "lazy", className: cn(imageBox) }))] }));

package/card/design/ReceiptCard.design.d.ts

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

package/card/design/ReceiptCard.design.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CardDesign from "./Card.design";
+export default function ReceiptCard() {
+    return (_jsx(CardDesign, { children: _jsx("div", {}) }));
+}

package/card/design/TableCard.design.d.ts

@@ -1,2 +1,2 @@
 import { TableCardProps } from "../../interface";
-export default function TableCardDesign<T>({ dataSet, dataField, option, }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function TableCardDesign<T>({ header, disabled, dataSet, dataField, option, }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;

package/card/design/TableCard.design.js

@@ -3,31 +3,37 @@ import { useId } from "react";
 import { useActionStore } from "../../store";
 import { cn, sortByOrder } from "../../util";
 import Card from "./Card.design";
-import { DataField, Action, Row, Lock } from "../..";
-import { Obstacle } from "../..";
+import { DataField, Action, Row } from "../..";
 import { v4 } from "uuid";
-export default function TableCardDesign({ dataSet, dataField, option, }) {
-    const { width, height, padding, boundary, isDisabled, disabledScript } = option ?? {};
+export default function TableCardDesign({ header, disabled, dataSet, dataField, option, }) {
+    const { isDisabled, obstacle, disabledAction } = disabled ?? {
+        isDisabled: false,
+    };
+    const { width, height, boundary, disabledScript } = option ?? {};
     const { order } = useActionStore();
     const id = useId();
     const orders = order[id] ?? [];
     const container = {
+        positions: "relative",
         className: option?.className,
-        paddings: padding ?? "pb-10",
+        paddings: !header ? "pb-10" : "pb-25",
+    };
+    const headerBox = {
+        displays: "flex items-center justify-center",
+        sizes: "w-full h-15",
+        styles: "overflow-hidden",
     };
-    return (_jsx(Card, { header: !option?.noHeader && _jsx(DataField.Card, { id: id, dataField: dataField }), option: {
+    return (_jsx(Card, { header: !option?.noHeader && (_jsxs("div", { children: [_jsx(DataField.Card, { id: id, dataField: dataField }), header && _jsx("div", { className: cn(headerBox), children: header })] })), disabled: disabled, option: {
             boundary,
             className: cn(container),
             width: width ?? "lg",
             height: height ?? "3xl",
             overflow: "overflow-y-scroll overflow-x-hidden",
             noPadding: true,
-        }, children: _jsxs(Action.Replace, { actions: dataSet?.replaces, children: [sortByOrder({ items: dataSet?.items, orders }).map((item) => {
-                    const uuid = v4();
-                    if (dataSet.renderItem)
-                        return dataSet.renderItem(item);
-                    return (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: option?.rowHeight, noHover: option?.noHover, noPadding: option?.noRowPadding }, uuid));
-                }), _jsx(Obstacle, { disabled: isDisabled }), _jsx(Obstacle.Blur, { disabled: isDisabled, option: {
-                        position: "top-10",
-                    }, children: _jsx(Lock, { script: disabledScript }) })] }) }));
+        }, children: _jsx(Action.Replace, { actions: dataSet?.replaces, children: sortByOrder({ items: dataSet?.items, orders }).map((item) => {
+                const uuid = v4();
+                if (dataSet.renderItem)
+                    return dataSet.renderItem(item);
+                return (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: option?.rowHeight, noHover: option?.noHover, noPadding: option?.noRowPadding }, uuid));
+            }) }) }));
 }

package/card/design/widget/TitleBox.design.d.ts

@@ -0,0 +1,4 @@
+import { Titles } from "../../../interface";
+export default function TitleBox({ titles }: {
+    titles?: Titles;
+}): import("react/jsx-runtime").JSX.Element | null;

package/card/design/widget/TitleBox.design.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function TitleBox({ titles }) {
+    const { title, titleColor } = titles ?? {};
+    const titleBox = {
+        displays: "flex items-center",
+        sizes: "w-full h-[44px]",
+        texts: "text-[20px]",
+        fonts: "font-pretendard-bold leading-tight",
+        boundaries: "pl-5",
+        styles: titleColor,
+    };
+    if (!titles)
+        return null;
+    return _jsx("div", { className: cn(titleBox), children: title });
+}

package/card/index.d.ts

@@ -1,6 +1,7 @@
 export { default as AddCard } from "./template/AddCard";
 export { default as ChartCard } from "./template/ChartCard";
 export { default as ConfirmCard } from "./template/ConfirmCard";
+export { default as ControlCard } from "./template/ControlCard";
 export { default as CustomCard } from "./template/CustomCard";
 export { default as InfoCard } from "./template/InfoCard";
 export { default as NavCard } from "./template/NavCard";

package/card/index.js

@@ -1,6 +1,7 @@
 export { default as AddCard } from "./template/AddCard";
 export { default as ChartCard } from "./template/ChartCard";
 export { default as ConfirmCard } from "./template/ConfirmCard";
+export { default as ControlCard } from "./template/ControlCard";
 export { default as CustomCard } from "./template/CustomCard";
 export { default as InfoCard } from "./template/InfoCard";
 export { default as NavCard } from "./template/NavCard";

package/card/template/ControlCard.d.ts

@@ -0,0 +1,4 @@
+import { ControlCardProps, Titles } from "../../interface";
+export default function ControlCard<T>(props: ControlCardProps<T> & {
+    titles?: Titles;
+}): import("react/jsx-runtime").JSX.Element;

package/card/template/ControlCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ControlCardDesign from "../design/ControlCard.design";
+import TitleBox from "../design/widget/TitleBox.design";
+export default function ControlCard(props) {
+    return (_jsxs("div", { children: [_jsx(TitleBox, { titles: props.titles }), _jsx(ControlCardDesign, { ...props })] }));
+}

package/card/template/NavCard.js

@@ -21,8 +21,8 @@ function ButtonInLay({ titles, buttonInLay, option }) {
             width: option?.width ?? "xs",
             height: option?.height ?? "sm",
             buttonInLay: {
-                disabled: buttonInLay.disabled,
                 ...buttonInLay,
+                disabled: buttonInLay.disabled,
                 width: buttonInLay.width ?? "lg",
                 height: "sm",
             },

package/card/template/TableCard.d.ts

@@ -1,5 +1,7 @@
-import { TableCardProps } from "../../interface";
-declare function TableCard<T>(props: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
+import { TableCardProps, Titles } from "../../interface";
+declare function TableCard<T>(props: TableCardProps<T> & {
+    titles?: Titles;
+}): import("react/jsx-runtime").JSX.Element;
 declare namespace TableCard {
     var Log: <T>(props: TableCardProps<T>) => import("react/jsx-runtime").JSX.Element;
 }

package/card/template/TableCard.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import TableCardDesign from "../design/TableCard.design";
+import TitleBox from "../design/widget/TitleBox.design";
 function TableCard(props) {
-    return _jsx(TableCardDesign, { ...props });
+    return (_jsxs("div", { children: [_jsx(TitleBox, { titles: props.titles }), _jsx(TableCardDesign, { ...props })] }));
 }
 function Log(props) {
     return (_jsx(TableCardDesign, { dataField: props.dataField, dataSet: props.dataSet, option: {
@@ -10,11 +11,10 @@ function Log(props) {
             rowHeight: "h-5",
             onClick: props.option?.onClick,
             text: "text-white",
-            padding: "p-7.5",
             noHeader: true,
             noHover: true,
             noRowPadding: true,
-            className: "flex flex-col gap-2.5",
+            className: "flex flex-col gap-2.5 p-7.5",
         } }));
 }
 TableCard.Log = Log;

package/interface/Card.d.ts

@@ -2,6 +2,8 @@ import { Button, Disabled, OnClick, Size, State, Titles } from "./Property";
 import { DataSet, DataField } from "./Data";
 import { Theme } from "./Theme";
 import { Flexify } from "./UtilityType";
+import { ButtonWidgetOption, SelectSwitchWidgetOption, SelectToggleWidgetOption } from "./widget/WidgetOption";
+import { ReactNode } from "react";
 interface CardOption {
     className?: string;
     boundary?: string;
@@ -19,10 +21,15 @@ interface CardOption {
     noShadow?: boolean;
 }
 export interface CardProps {
-    children: React.ReactNode;
-    header?: React.ReactNode;
+    children: ReactNode;
+    header?: ReactNode;
     option?: CardOption;
     debug?: string;
+    disabled?: {
+        isDisabled: boolean;
+        obstacle?: ReactNode;
+        disabledAction?: OnClick;
+    };
 }
 export interface ChartCardProps extends Omit<CardProps, "children"> {
     data: Record<string, string | number>[];
@@ -46,7 +53,7 @@ export interface ChartCardProps extends Omit<CardProps, "children"> {
     };
 }
 export interface CustomCardProps extends Flexify<CardProps, "children"> {
-    titles: Titles;
+    titles?: Titles;
 }
 export interface ButtonInLay {
     title: string;
@@ -79,7 +86,7 @@ export interface NavCardButtonInLayProps extends NavCardProps {
 }
 export interface InfoCardProps extends CardProps {
     titles: Titles;
-    topRight?: React.ReactNode;
+    topRight?: ReactNode;
     button?: Button;
     image?: string;
     option?: {
@@ -130,7 +137,7 @@ export interface TableCardProps<T> extends Omit<CardProps, "children"> {
         disabledScript?: string;
     };
 }
-export interface RollCardProps extends CardProps {
+export interface RollCardProps extends Omit<CardProps, "disabled"> {
     titles: Titles & {
         icon?: string;
     };
@@ -148,4 +155,13 @@ export interface ProgressCardProps {
         size?: Size;
     };
 }
+export type ControlContentWidgetOption<T> = ButtonWidgetOption | SelectSwitchWidgetOption<T> | SelectToggleWidgetOption<T>;
+export interface ControlContent<T> {
+    titles: Titles;
+    widget?: ControlContentWidgetOption<T>;
+}
+export interface ControlCardProps<T> {
+    contents: ControlContent<T>[];
+    option?: CardOption;
+}
 export {};

package/interface/Property.d.ts

@@ -59,6 +59,7 @@ export type Titles = {
     titleColor?: string;
     subtitleColor?: string;
     size?: Size;
+    icon?: string;
 };
 export interface Log<K extends string, T extends string | number> {
     prints: K[];

package/interface/widget/Box.d.ts

@@ -0,0 +1,25 @@
+interface BoxOption {
+    titleColor?: string;
+    background?: string;
+}
+export interface BoxProps {
+    title: string;
+    option?: BoxOption;
+}
+export interface CountBoxProps extends BoxProps {
+    count: number;
+    total?: number;
+    option?: BoxOption & {
+        countColor?: string;
+        totalColor?: string;
+    };
+}
+export interface CountWithScriptBoxProps extends BoxProps {
+    count?: number;
+    script?: string | string[];
+    option?: BoxOption & {
+        countColor?: string;
+        scriptColor?: string;
+    };
+}
+export {};

package/interface/widget/Box.js

@@ -0,0 +1 @@
+export {};

package/interface/widget/Cluster.d.ts

@@ -0,0 +1,18 @@
+import { BoxProps, CountBoxProps, CountWithScriptBoxProps } from "./Box";
+interface BoxWidgetOption {
+    type: "box";
+    data: BoxProps;
+}
+interface CountBoxWidgetOption {
+    type: "countBox";
+    data: CountBoxProps;
+}
+interface CountWithScriptBoxWidgetOption {
+    type: "countWithScriptBox";
+    data: CountWithScriptBoxProps;
+}
+export type ClusterWidgetOption = BoxWidgetOption | CountBoxWidgetOption | CountWithScriptBoxWidgetOption;
+export interface ClusterProps {
+    widgets: ClusterWidgetOption[][];
+}
+export {};

package/interface/widget/Cluster.js

@@ -0,0 +1 @@
+export {};

package/interface/widget/Obstacle.d.ts

@@ -1,7 +1,9 @@
+import { ShowAction } from "../Action";
 import { Disabled } from "../Property";
 export interface ObstacleProps {
     disabled?: Disabled;
     children?: React.ReactNode;
+    showAction?: ShowAction;
     option?: {
         position?: string;
         size?: string;

package/interface/widget/Select.d.ts

@@ -49,4 +49,11 @@ export interface SelectPaginationProps<T> {
         className?: string;
     };
 }
+export interface SelectToggleProps<T> {
+    state: State<T>;
+    selectOptions: [SelectOptionInput<T>, SelectOptionInput<T>];
+    option?: {
+        className?: string;
+    };
+}
 export {};

package/interface/widget/WidgetOption.d.ts

@@ -0,0 +1,13 @@
+import { LabelWidget, SelectSwitchProps, SelectToggleProps } from ".";
+export interface ButtonWidgetOption {
+    type: "button";
+    data: LabelWidget;
+}
+export interface SelectSwitchWidgetOption<T> {
+    type: "selectSwitch";
+    data: SelectSwitchProps<T>;
+}
+export interface SelectToggleWidgetOption<T> {
+    type: "selectToggle";
+    data: SelectToggleProps<T>;
+}

package/interface/widget/WidgetOption.js

@@ -0,0 +1 @@
+export {};

package/interface/widget/index.d.ts

@@ -1,7 +1,9 @@
 import { Color } from "../Color";
 import { Disabled, OnClick, Size, State } from "../Property";
 import { SelectOptionInput } from "./Select";
+export * from "./Box";
 export * from "./Carousel";
+export * from "./Cluster";
 export * from "./Switch";
 export * from "./Select";
 export declare const WidgetType: {
@@ -20,7 +22,7 @@ export interface Widget {
         background?: string;
         text?: string;
         disabled?: Disabled;
-        rounded?: string;
+        boundary?: string;
         isDark?: boolean;
     };
 }

package/interface/widget/index.js

@@ -1,4 +1,6 @@
+export * from "./Box";
 export * from "./Carousel";
+export * from "./Cluster";
 export * from "./Switch";
 export * from "./Select";
 export const WidgetType = {

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

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

package/layout/template/promotion/Layout.js

@@ -1,5 +1,67 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Thumbnail from "./Thumbnail";
-export default function Layout({ children }) {
-    return (_jsxs("div", { className: "w-[1168px] h-full flex", children: [_jsx(Thumbnail, {}), children] }));
+import { IoIosSearch } from "react-icons/io";
+export default function Layout() {
+    // 0 : 기간 제한 있음
+    // 1 : 기간 제한 없음 -> 상시 이벤트
+    // 2 : 기간 제한 없음 & 소식
+    const eventsData = [
+        {
+            id: 1,
+            img: "/images/promotion/promotion1.png",
+            type: "0",
+            startDate: "2024-05-01",
+            endDate: "2024-12-31",
+            title: "5월 토셀 랩 세미나 개최",
+            body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
+        },
+        {
+            id: 2,
+            img: "/images/promotion/promotion2.png",
+            type: "0",
+            regDate: "2024-09-01",
+            startDate: "2024-09-01",
+            endDate: "2024-09-30",
+            title: "83회 명예의 전당 등재자라면? 지금 바로 인터뷰에 참여해보세요",
+            body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
+        },
+        {
+            id: 3,
+            img: "/images/promotion/promotion3.png",
+            type: "1",
+            regDate: "2024-09-01",
+            startDate: "0000-00-00",
+            endDate: "0000-00-00",
+            title: "소셜 로그인 이벤트! 네이버 계정 연동하고 쿠폰 받아가세요",
+            body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
+        },
+        {
+            id: 4,
+            img: "/images/promotion/promotion4.png",
+            type: "2",
+            regDate: "2024-09-01",
+            startDate: "0000-00-00",
+            endDate: "0000-00-00",
+            title: "인사혁신처, 지방공기업 등에 TOSEL 확대 적용 발표",
+            body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
+        },
+        {
+            id: 5,
+            img: "/images/promotion/promotion5.png",
+            type: "0",
+            regDate: "2024-09-01",
+            startDate: "2024-10-01",
+            endData: "2024-10-31",
+            title: "24년도 하반기 고려대학교 미래교육원 토셀 전문가 과정 모집",
+        },
+        {
+            id: 6,
+            img: "/images/promotion/promotion6.png",
+            type: "2",
+            regDate: "2024-09-01",
+            startDate: "0000-00-00",
+            endDate: "0000-00-00",
+            title: "토셀, 경찰대학교 편입학전형 / 졸업인증 평가 반영",
+        },
+    ];
+    return (_jsxs("div", { className: "min-h-screen w-full mx-auto", children: [_jsx("img", { src: "/images/promotion/promotionHeader.png", alt: "" }), _jsxs("div", { className: "w-[1160px] h-full flex flex-col mx-auto ", children: [_jsxs("div", { className: "flex justify-between h-14.5 border-b-1", children: [_jsxs("div", { className: "w-80 h-9.5 flex items-center bg-[#f0f0f0]/10 rounded-xl", children: [_jsx(IoIosSearch, { className: "text-2xl text-green-dark mr-3" }), _jsx("input", { type: "text", placeholder: "\uD0A4\uC6CC\uB4DC\uB97C \uC785\uB825\uD558\uC138\uC694.", className: "w-full h-full text-md bg-[#f0f0f0]/10 placehorder:text-[#7f7f7f] placehorder:font-light outline-none " })] }), _jsx("div", { className: "flex h-9.5 items-center justify-center", children: ["모두보기", "진행 중", "예정된", "토셀소식"].map((item) => (_jsx("div", { className: "text-xs p-3 flex items-center justify-center cursor-pointer", children: item }, item))) })] }), _jsx("div", { className: "pt-5", children: "asdf" })] })] }));
 }

package/layout/template/promotion/Thumbnail.js

@@ -1,10 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HiOutlineBellSlash } from "react-icons/hi2";
-import { MdComputer } from "react-icons/md";
-import { CiCreditCard1 } from "react-icons/ci";
-import { IoShareSocialOutline } from "react-icons/io5";
-import { MdAccessTime } from "react-icons/md";
-import { IoIosSchool } from "react-icons/io";
 export default function Thumbnail() {
-    return (_jsxs("div", { className: "w-[288px] flex flex-col mr-20", children: [_jsx("img", { src: "https://grepp-programmers.s3.amazonaws.com/production/file_resource/6246/Dev_Thumnail_Full_stack_Deceloper_3.png", alt: "", className: "w-full object-cover " }), _jsxs("div", { className: "font-bold text-left text-2xl p-1 mb-2 mt-2", children: ["[3\uAE30] K-Digital Training: ", _jsx("br", {}), "\uD0C0\uC785\uC2A4\uD06C\uB9BD\uD2B8\uB85C \uD568\uAED8\uD558\uB294 \uC6F9 \uD480 \uC0AC\uC774\uD074 \uAC1C\uBC1C(React, Node.js)"] }), _jsx("div", { className: "h-10", children: _jsx("button", { className: "w-full h-10 rounded-md bg-gradient-to-r from-violet-500 to-fuchsia-500 font-bold text-white", children: "\uD558\uB7EC\uAC00\uAE30" }) }), _jsxs("div", { className: "h-14 pt-4 pb-4 text-xs text-slate-300 flex justify-center items-center", children: [_jsx(HiOutlineBellSlash, { className: "mr-2" }), "\uC2E0\uCCAD \uC885\uB8CC\uC77C : ~2024-03-21"] }), _jsxs("div", { className: "h-auto pt-2 w-90/100", children: [_jsxs("div", { className: "text-slate-400 font-bold text-left flex items-center text-sm border-b-2 pt-2 pb-2", children: [_jsx("div", { className: "w-6", children: _jsx(IoIosSchool, { className: "mr-2" }) }), "\uC2E0\uCCAD \uAE30\uAC04 : 2024-04-19 ~ 2024-09-05 \uC885\uB8CC\uC77C \uC774\uD6C4 \uBB34\uC81C\uD55C \uC218\uAC15"] }), _jsxs("div", { className: "text-slate-400 font-bold text-left flex items-center text-sm border-b-2 pt-2 pb-2", children: [_jsx("div", { className: "w-6", children: _jsx(MdComputer, { className: "mr-2" }) }), "\uC628/\uC624\uD504\uB77C\uC778 \uCF54\uC2A4"] }), _jsxs("div", { className: "text-slate-400 font-bold text-left flex items-center text-sm border-b-2 pt-2 pb-2", children: [_jsx(CiCreditCard1, { className: "mr-2" }), "\u20A939,000"] }), _jsxs("div", { className: "text-slate-400 font-bold text-left flex items-center text-sm border-b-2 pt-2 pb-2", children: [_jsx(IoShareSocialOutline, { className: "mr-2" }), "\uACF5\uC720\uD558\uAE30"] }), _jsxs("div", { className: "text-slate-400 font-bold text-left flex items-center text-sm border-b-2 pt-2 pb-2", children: [_jsx(MdAccessTime, { className: "mr-2" }), "2024-05-02 \uB9C8\uC9C0\uB9C9 \uC5C5\uB370\uC774\uD2B8"] })] })] }));
+    return (_jsxs("div", { className: "w-[288px] flex flex-col mr-20", children: [_jsx("img", { src: "https://grepp-programmers.s3.amazonaws.com/production/file_resource/6246/Dev_Thumnail_Full_stack_Deceloper_3.png", alt: "", className: "w-full object-cover " }), _jsxs("div", { className: "font-bold text-left text-2xl p-1 mb-2 mt-2", children: ["[3\uAE30] K-Digital Training: ", _jsx("br", {}), "\uD0C0\uC785\uC2A4\uD06C\uB9BD\uD2B8\uB85C \uD568\uAED8\uD558\uB294 \uC6F9 \uD480 \uC0AC\uC774\uD074 \uAC1C\uBC1C(React, Node.js)"] }), _jsx("div", { className: "h-10", children: _jsx("button", { className: "w-full h-10 rounded-md bg-gradient-to-r from-violet-500 to-fuchsia-500 font-bold text-white", children: "\uD558\uB7EC\uAC00\uAE30" }) })] }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.96
+1.0.98

package/widget/design/Label.design.js

@@ -2,35 +2,40 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { Obstacle } from "../..";
 const widthSize = {
+    "3xs": "w-7",
     "2xs": "w-10",
     xs: "w-20",
     sm: "w-22.5",
     md: "w-45",
     lg: "w-50",
+    full: "w-full",
 };
 const heightSize = {
-    "2xs": "h-6.25",
+    "3xs": "h-5.5", // 22px
+    "2xs": "h-6.25", // 25px
     xs: "h-7.5",
     sm: "h-11.25",
     md: "h-12.25",
 };
 export default function LabelDesign({ title, onClick, option, hoverState, }) {
     const [hover, setHover] = hoverState ?? [false, () => { }];
-    const { width, height, text, background, className, disabled } = option ?? {};
-    const container = {
-        positions: "relative z-10",
-        sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
-    };
+    const { width, height, text, background, className, disabled, boundary } = option ?? {};
     const body = {
-        positions: "absolute top-0 left-0",
-        displays: "flex justify-center items-center",
+        positions: "relative z-10",
         sizes: "w-full h-full",
-        clickable: onClick && "cursor-pointer",
+        displays: "flex justify-center items-center",
         background: background ?? "bg-gray-light",
+        clickable: onClick && "cursor-pointer",
         texts: text ?? "text-gray-dim",
         animation: "duration-500",
         fonts: "font-pretendard-light",
-        styles: height !== "xs" ? "rounded-lgx" : "rounded-md text-xs",
+        styles: height === "xs" || height === "2xs" || height === "3xs"
+            ? "rounded-md text-xs"
+            : "rounded-lgx",
+    };
+    const container = {
+        className,
+        sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
     };
-    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 }), _jsx(Obstacle, { disabled: disabled })] }) }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), children: title }), _jsx(Obstacle, { disabled: disabled })] }));
 }

package/widget/design/Obstacle.design.d.ts

@@ -1,2 +1,2 @@
 import { ObstacleProps } from "../../interface/widget/Obstacle";
-export default function ObstacleDesign({ disabled, children, option, }: ObstacleProps): false | import("react/jsx-runtime").JSX.Element | undefined;
+export default function ObstacleDesign({ showAction, disabled, children, option, }: ObstacleProps): false | import("react/jsx-runtime").JSX.Element | undefined;

package/widget/design/Obstacle.design.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../util";
-export default function ObstacleDesign({ disabled, children, option, }) {
+export default function ObstacleDesign({ showAction, disabled, children, option, }) {
+    const { isVisible } = showAction ?? {};
     const { position, background, size } = option ?? {};
     const obstacle = {
         default: "absolute z-20",
@@ -9,5 +10,5 @@ export default function ObstacleDesign({ disabled, children, option, }) {
         sizes: "w-full h-full",
         background: background ?? "bg-white/30",
     };
-    return (disabled && (_jsx("div", { onClick: typeof disabled === "function" ? disabled : undefined, className: cn(obstacle), children: children })));
+    return ((isVisible || disabled) && (_jsx("div", { onClick: typeof disabled === "function" ? disabled : undefined, className: cn(obstacle), children: children })));
 }

package/widget/index.d.ts

@@ -1,4 +1,6 @@
+export { default as Box } from "./template/Box";
 export { default as Input } from "./template/Input";
+export { default as Cluster } from "./template/Cluster";
 export { default as Counter } from "./template/Counter";
 export { default as Select } from "./template/Select";
 export { default as DatePicker } from "./template/DatePicker";

package/widget/index.js

@@ -1,4 +1,6 @@
+export { default as Box } from "./template/Box";
 export { default as Input } from "./template/Input";
+export { default as Cluster } from "./template/Cluster";
 export { default as Counter } from "./template/Counter";
 export { default as Select } from "./template/Select";
 export { default as DatePicker } from "./template/DatePicker";

package/widget/template/Box/CountBox.d.ts

@@ -0,0 +1,2 @@
+import { CountBoxProps } from "../../../interface";
+export default function CountBox({ title, count, total, option, }: CountBoxProps): import("react/jsx-runtime").JSX.Element;

package/widget/template/Box/CountBox.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+export default function CountBox({ title, count, total, option, }) {
+    const { background, titleColor, countColor } = option ?? {};
+    const container = {
+        displays: "flex flex-col gap-y-1",
+        sizes: "flex-1 h-[62px]",
+        boundaries: "rounded-[8px] pt-2.5 pl-2.5",
+        backgrounds: background ?? "bg-gray-light/30",
+    };
+    const titleBox = {
+        texts: "text-xs",
+        color: titleColor ?? "text-gray-medium",
+    };
+    const countBox = {
+        texts: "text-[20px]",
+        color: countColor ?? "text-black",
+    };
+    const totalBox = {
+        color: "text-gray-dark",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(titleBox), children: title }), _jsxs("div", { className: "flex items-end leading-tight font-pretendard-bold", children: [_jsx("div", { className: cn(countBox), children: count }), total && (_jsxs("div", { className: "flex items-end text-xs", children: [_jsx("div", { className: "text-gray-medium", children: "/" }), _jsx("div", { className: cn(totalBox), children: total })] }))] })] }));
+}

package/widget/template/Box/CountWithScript.d.ts

@@ -0,0 +1,2 @@
+import { CountWithScriptBoxProps } from "../../../interface";
+export default function CountWithScriptBox({ title, count, script, option, }: CountWithScriptBoxProps): import("react/jsx-runtime").JSX.Element;

package/widget/template/Box/CountWithScript.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+import { LineBreaks } from "../../../text";
+export default function CountWithScriptBox({ title, count, script, option, }) {
+    const { background, countColor, scriptColor } = option ?? {};
+    const container = {
+        displays: "flex justify-between items-start",
+        sizes: "flex-1 h-[75px]",
+        boundaries: "pt-2.5 pl-2.5 pr-[14px] rounded-[8px]",
+        backgrounds: background ?? "bg-gray-light/30",
+    };
+    const countBox = {
+        texts: "text-[20px]",
+        color: countColor ?? "text-black",
+        fonts: "font-pretendard-bold",
+    };
+    const scriptBox = {
+        texts: "text-xs",
+        color: scriptColor ?? "text-gray-medium",
+    };
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex flex-col gap-y-1.5", children: [_jsx("div", { className: "text-[16px] leading-tight font-pretendard-bold", children: title }), _jsx(LineBreaks, { texts: script, className: cn(scriptBox) })] }), count && _jsx("div", { className: cn(countBox), children: count })] }));
+}

package/widget/template/Box/InfoBox.d.ts

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

package/widget/template/Box/InfoBox.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function InfoBox() {
+    return _jsx("div", {});
+}

package/widget/template/Box/index.d.ts

@@ -0,0 +1,9 @@
+import { BoxProps } from "../../../interface";
+import CountBox from "./CountBox";
+import CountWithScriptBox from "./CountWithScript";
+declare function Box({ title }: BoxProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Box {
+    var Count: typeof CountBox;
+    var CountWithScript: typeof CountWithScriptBox;
+}
+export default Box;

package/widget/template/Box/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import CountBox from "./CountBox";
+import CountWithScriptBox from "./CountWithScript";
+function Box({ title }) {
+    return _jsx("div", { className: "border-2 flex-1 h-16", children: title });
+}
+Box.Count = CountBox;
+Box.CountWithScript = CountWithScriptBox;
+export default Box;

package/widget/template/Cluster/index.d.ts

@@ -0,0 +1,2 @@
+import { ClusterProps } from "../../../interface";
+export default function Cluster({ widgets }: ClusterProps): import("react/jsx-runtime").JSX.Element;

package/widget/template/Cluster/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "../..";
+import { cn } from "../../../util";
+export default function Cluster({ widgets }) {
+    const container = {
+        displays: "flex flex-col gap-y-3",
+        sizes: "w-full",
+    };
+    const body = {
+        displays: "flex gap-x-2.5",
+        sizes: "w-full",
+    };
+    return (_jsx("div", { className: cn(container), children: widgets.map((columns) => (_jsx("div", { className: cn(body), children: columns.map((column, index) => (_jsx(ClusterWidget, { ...column }, index))) }))) }));
+}
+function ClusterWidget({ type, data }) {
+    if (type === "box")
+        return _jsx(Box, { ...data });
+    if (type === "countBox")
+        return _jsx(Box.Count, { ...data });
+    if (type === "countWithScriptBox")
+        return _jsx(Box.CountWithScript, { ...data });
+    return null;
+}

package/widget/template/Select/Switch.js

@@ -2,25 +2,40 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { toSelectOption, } from "../../../interface/widget/Select";
 import { cn } from "../../../util";
 const paddingSize = {
+    sm: "p-1",
     md: "p-1.5",
     lg: "p-2.5",
 };
 const widthSize = {
+    sm: "w-auto",
     md: "w-81",
     lg: "w-100",
 };
 const heightSize = {
+    sm: "h-7.5",
     md: "h-10.5",
     lg: "h-20",
 };
 const gapSize = {
+    sm: "gap-x-1",
     md: "gap-x-1.5",
     lg: "gap-x-2.5",
 };
 const textSize = {
+    sm: "text-xs",
     md: "text-sm",
     lg: "text-base",
 };
+const buttonSize = {
+    sm: "w-[29px] h-[22px]",
+    md: "w-7 h-7",
+    lg: "w-12 h-12",
+};
+const boundarySize = {
+    sm: "rounded-[4px]",
+    md: "rounded-full",
+    lg: "rounded-full",
+};
 function SelectSwitch({ state, selectOptions: selectOptionsInput, option, }) {
     const selectOptions = selectOptionsInput.map(toSelectOption);
     const { text, size, className } = option ?? {};
@@ -31,14 +46,16 @@ function SelectSwitch({ state, selectOptions: selectOptionsInput, option, }) {
         sizes: `${widthSize[size ?? "md"]} ${heightSize[size ?? "md"]}`,
         displays: `flex ${gapSize[size ?? "md"]}`,
         paddings: paddingSize[size ?? "md"],
-        styles: "rounded-full bg-gray-light",
+        styles: "bg-gray-light",
+        boundaries: boundarySize[size ?? "md"],
     };
     const button = (flag) => ({
         displays: "flex flex-1 gap-x-3 justify-center items-center",
         backgrounds: flag ? "bg-white" : "bg-transparent",
+        sizes: size === "sm" && buttonSize[size ?? "sm"],
         text,
         textSizes: textSize[size ?? "md"],
-        styles: "rounded-full ",
+        boundaries: boundarySize[size ?? "md"],
     });
     return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(body), children: selectOptions?.map(({ value, icon, title }) => (_jsxs("button", { onClick: () => state[1](value), className: cn(button(value === state[0])), children: [icon && _jsx("img", { src: icon }), _jsx("div", { children: title })] }, String(value)))) }) }));
 }

package/widget/template/Select/Toggle.d.ts

@@ -0,0 +1,2 @@
+import { SelectToggleProps } from "../../../interface";
+export default function SelectToggle<T>({ state, selectOptions: selectOptionsInput, }: SelectToggleProps<T>): import("react/jsx-runtime").JSX.Element;

package/widget/template/Select/Toggle.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { toSelectOption } from "../../../interface";
+import { cn } from "../../../util";
+export default function SelectToggle({ state, selectOptions: selectOptionsInput, }) {
+    const selectOptions = selectOptionsInput?.map(toSelectOption);
+    const [value, setValue] = state;
+    const isOff = value === selectOptions[0].value;
+    const container = {
+        positions: "relative",
+        displays: "flex items-center",
+        sizes: "w-10 h-4.5",
+        backgrounds: isOff ? "bg-crimson-burgundy" : "bg-green-dark",
+        boundaries: "rounded-full p-0.5",
+    };
+    const controller = {
+        positions: "absolute",
+        locations: isOff ? "left-0.5" : "left-[calc(100%-1rem)]",
+        sizes: "w-[14px] h-[14px]",
+        backgrounds: "bg-white",
+        boundaries: "rounded-full",
+        animations: "duration-200",
+    };
+    const toggle = () => {
+        if (value === selectOptions[0].value)
+            return setValue(selectOptions[1].value);
+        return setValue(selectOptions[0].value);
+    };
+    return (_jsx("button", { onClick: toggle, className: cn(container), children: _jsx("div", { className: cn(controller) }) }));
+}

package/widget/template/Select/index.d.ts

@@ -5,6 +5,7 @@ import Handle from "./Handle";
 import Switch from "./Switch";
 import Swipe from "./Swipe";
 import Pagination from "./Pagination";
+import Toggle from "./Toggle";
 declare const Select: typeof _Select & {
     LG: typeof LG;
     Tag: typeof Tag;
@@ -12,5 +13,6 @@ declare const Select: typeof _Select & {
     Switch: typeof Switch;
     Swipe: typeof Swipe;
     Pagination: typeof Pagination;
+    Toggle: typeof Toggle;
 };
 export default Select;

package/widget/template/Select/index.js

@@ -5,6 +5,7 @@ import Handle from "./Handle";
 import Switch from "./Switch";
 import Swipe from "./Swipe";
 import Pagination from "./Pagination";
+import Toggle from "./Toggle";
 const Select = Object.assign(_Select, {
     LG,
     Tag,
@@ -12,5 +13,6 @@ const Select = Object.assign(_Select, {
     Switch,
     Swipe,
     Pagination,
+    Toggle,
 });
 export default Select;