@edu-tosel/design 1.0.97 → 1.0.99

package/card/design/Card.design.js

@@ -1,8 +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",
@@ -38,7 +39,6 @@ export default function CardDesign({ header, disabled, children, option, debug,
     };
     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`,
@@ -50,9 +50,15 @@ export default function CardDesign({ header, disabled, children, option, debug,
         overflow: "overflow-hidden",
     };
     const body = {
+        positions: "relative",
         sizes: "w-full h-full",
         overflow,
         className,
     };
-    return (_jsx("div", { onMouseEnter: onMouse ? () => onMouse[1](true) : () => { }, onMouseLeave: onMouse ? () => onMouse[1](false) : () => { }, className: cn(container), children: _jsxs(Action.Show, { actions: [[isDisabled, obstacle ?? _jsx(Obstacle.Blur, {})]], 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/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/TableCard.design.d.ts

@@ -1,2 +1,2 @@
 import { TableCardProps } from "../../interface";
-export default function TableCardDesign<T>({ header, 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,15 +3,18 @@ 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({ header, 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: !header ? "pb-10" : "pb-25",
     };
@@ -20,19 +23,17 @@ export default function TableCardDesign({ header, dataSet, dataField, option, })
         sizes: "w-full h-15",
         styles: "overflow-hidden",
     };
-    return (_jsx(Card, { header: !option?.noHeader && (_jsxs("div", { children: [_jsx(DataField.Card, { id: id, dataField: dataField }), header && _jsx("div", { className: cn(headerBox), children: header })] })), 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/template/ConfirmCard/index.d.ts

@@ -1,12 +1,2 @@
-import { ActionProps, LabelWidget, Titles } from "../../../interface";
-interface ConfirmCardProps {
-    titles: Titles;
-    action?: Omit<ActionProps, "shows">;
-    children?: React.ReactNode;
-    buttons: [LabelWidget, LabelWidget];
-    option?: {
-        className?: string;
-    };
-}
+import { ConfirmCardProps } from "../../../interface";
 export default function ConfirmCard(props: ConfirmCardProps): import("react/jsx-runtime").JSX.Element;
-export {};

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/ProgressCard/Large.d.ts

@@ -1,2 +1,2 @@
 import { ProgressCardProps } from "../../../interface";
-export default function ProgressCardLG({ titles, checks, displays, theme, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;
+export default function ProgressCardLG({ titles, checks, displays, theme, option, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/ProgressCard/Large.js

@@ -15,7 +15,7 @@ const text = {
     green: "text-green-dark",
     blue: "text-blue-navy",
 };
-export default function ProgressCardLG({ titles, checks, displays, theme, }) {
+export default function ProgressCardLG({ titles, checks, displays, theme, option, }) {
     const progressBox = {
         positions: "absolute top-7.5 left-7.5",
         displays: "flex",
@@ -34,6 +34,7 @@ export default function ProgressCardLG({ titles, checks, displays, theme, }) {
     };
     const occupied = Math.round((checks.filter((value) => !!value).length / displays.length) * 100);
     return (_jsxs(CardDesign, { option: {
+            ...option,
             width: "2xl",
             height: "2xs",
         }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title }, index) => (_jsxs("div", { className: cn(stepBox(checks[index])), children: [_jsx("div", { children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: theme })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-xl leading-none font-pretendard-bold ${text[theme ?? "green"]}`, children: titles.title }), _jsx("div", { className: "text-base leading-none", children: titles.subtitle })] }), _jsx("div", { className: "absolute bottom-0 left-0 bg-gray-light w-full h-2.5", children: _jsx("div", { className: `h-full ${widthSizes[occupied]} ${bg[theme ?? "green"]}` }) })] }));

package/card/template/ProgressCard/Small.js

@@ -40,6 +40,7 @@ export default function ProgressCardSmall({ titles, displays, checks, nowFocus,
         styles: text[theme],
     };
     return (_jsxs(CardDesign, { option: {
+            ...option,
             width: size ?? "md",
             height: "5xs",
         }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title, subtitle }, index) => (_jsxs("div", { className: cn(stepBox(index === nowFocus)), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "leading-none text-[12px] font-pretendard-bold", children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: "green" })] }), _jsx("div", { className: `text-[12px] ${text[theme]}`, children: subtitle })] }, title))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: cn(titleStyle), children: titles.title }), _jsx("div", { className: `text-[12px] leading-none ${text[theme]}`, children: titles.subtitle })] })] }));

package/card/template/TableCard.js

@@ -11,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/globals.css

@@ -225,3 +225,6 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 .check-box[type="checkbox"]:disabled {
   background-color: #7f7f7f;
 }
+.box-shadow-green:hover {
+  box-shadow: 0px 0px 20px 0px rgba(16, 86, 82, 0.5);
+}

package/interface/Card.d.ts

@@ -4,6 +4,8 @@ import { Theme } from "./Theme";
 import { Flexify } from "./UtilityType";
 import { ButtonWidgetOption, SelectSwitchWidgetOption, SelectToggleWidgetOption } from "./widget/WidgetOption";
 import { ReactNode } from "react";
+import { ActionProps } from "./Action";
+import { LabelWidget } from "./widget";
 interface CardOption {
     className?: string;
     boundary?: string;
@@ -153,7 +155,7 @@ export interface ProgressCardProps {
     theme?: Theme;
     option?: {
         size?: Size;
-    };
+    } & CardOption;
 }
 export type ControlContentWidgetOption<T> = ButtonWidgetOption | SelectSwitchWidgetOption<T> | SelectToggleWidgetOption<T>;
 export interface ControlContent<T> {
@@ -164,4 +166,11 @@ export interface ControlCardProps<T> {
     contents: ControlContent<T>[];
     option?: CardOption;
 }
+export interface ConfirmCardProps {
+    titles: Titles;
+    action?: Omit<ActionProps, "shows">;
+    children?: React.ReactNode;
+    buttons: [LabelWidget, LabelWidget];
+    option?: CardOption;
+}
 export {};

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,108 @@
-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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { IoIosSearch } from "react-icons/io";
+import dayjs from "dayjs";
+import { BsCreditCard } from "react-icons/bs";
+export default function Layout() {
+    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: "토셀, 경찰대학교 편입학전형 / 졸업인증 평가 반영",
+        },
+    ];
+    const [selectedEvent, setSelectedEvent] = useState(null);
+    const handleCardClick = (event) => {
+        setSelectedEvent(event);
+    };
+    const handleBackToList = () => {
+        setSelectedEvent(null);
+    };
+    const getStatusText = (event) => {
+        const now = dayjs();
+        const startDate = dayjs(event.startDate);
+        const endDate = event.endDate ? dayjs(event.endDate) : dayjs(event.endData);
+        if (event.type === "0") {
+            if (now.isBefore(startDate)) {
+                return (_jsx("span", { className: "px-2 py-1 text-2xs font-semibold rounded-md bg-green-dark text-white", children: "\uC624\uD508\uC608\uC815" }));
+            }
+            else if (now.isAfter(endDate)) {
+                return (_jsx("span", { className: "px-2 py-1 text-2xs font-semibold rounded-md bg-gray-light text-gray-mid", children: "\uB9C8\uAC10" }));
+            }
+            else {
+                const diff = endDate.diff(now, "day");
+                return (_jsxs("span", { className: "px-2 py-1 text-2xs font-semibold rounded-md bg-green-dark/10 text-green-dark", children: ["\uC9C4\uD589\uC911 | D-", diff] }));
+            }
+        }
+        else if (event.type === "1") {
+            return (_jsx("div", { className: "w-[63px] h-[22px] rounded-md bg-black flex items-center justify-center", style: {
+                    background: "linear-gradient(269deg, rgba(118, 0, 35, 0.10) 0%, rgba(16, 86, 82, 0.10) 100%)",
+                }, children: _jsx("div", { className: "px-2 py-1 text-2xs font-semibold rounded-md", style: {
+                        background: "linear-gradient(269deg, rgba(118, 0, 35) 0%, rgba(16, 86, 82) 100%)",
+                        WebkitBackgroundClip: "text",
+                        WebkitTextFillColor: "transparent",
+                    }, children: "\uC0C1\uC2DC \uC774\uBCA4\uD2B8" }) }));
+        }
+        else if (event.type === "2") {
+            return (_jsx("span", { className: "px-2 py-1 text-2xs font-semibold rounded-md bg-blue-navy/10 text-blue-navy", children: "\uD1A0\uC140 \uC18C\uC2DD" }));
+        }
+        else {
+            return "";
+        }
+    };
+    return (_jsxs("div", { className: "min-h-screen w-full mx-auto", children: [_jsx("img", { src: "/images/promotion/promotionHeader.png", alt: "" }), _jsx("div", { className: "w-[1200px] h-full flex flex-col mx-auto", children: selectedEvent ? (_jsxs("div", { className: "flex", children: [_jsx("div", { className: "min-w-[320px] h-auto p-5", children: _jsxs("div", { className: "w-full h-auto rounded-xl transition-all duration-500", children: [_jsx("div", { className: "w-full h-50 overflow-hidden", children: _jsx("img", { src: selectedEvent.img, alt: "", className: "rounded-xl h-full object-cover" }) }), _jsxs("div", { className: "w-full h-auto pt-5 gap-3 flex flex-col", children: [_jsx("div", { className: "flex items-center", children: getStatusText(selectedEvent) }), _jsx("div", { className: "text-sm font-bold text-gray-dark flex items-center mb-2", children: selectedEvent.title }), _jsxs("div", { className: "w-full h-12 flex items-center justify-center rounded-md text-white cursor-pointer font-bold gap-3", style: {
+                                                    background: "linear-gradient(269deg, rgba(118, 0, 35) 0%, rgba(16, 86, 82) 100%)",
+                                                }, children: [_jsx(BsCreditCard, { className: "text-xl" }), "\uC5F0\uB3D9\uD558\uACE0 \uCFE0\uD3F0\uBC1B\uAE30"] })] })] }, selectedEvent.id) }), _jsxs("div", { className: "flex-grow p-5", children: [_jsx("div", { children: _jsx("img", { src: selectedEvent.body, className: "w-full rounded-xl object-cover", alt: "" }) }), _jsx("button", { onClick: handleBackToList, className: "p-5 bg-green-dark/5 text-green-dark rounded-xl flex items-center justify-center hover:bg-green-dark/20 transition-all", children: "\uBAA9\uB85D\uC73C\uB85C \uB3CC\uC544\uAC00\uAE30" })] })] })) : (_jsxs(_Fragment, { 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 placeholder:text-[#7f7f7f] placeholder: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 flex grid grid-cols-3 gap-5 rounded-xl", children: eventsData.map((event) => (_jsxs("div", { onClick: () => handleCardClick(event), className: "w-full h-84 shadow-md rounded-xl cursor-pointer box-shadow-green transition-all duration-500", children: [_jsx("div", { className: "w-full h-50 rounded-t-xl overflow-hidden", children: _jsx("img", { src: event.img, alt: "" }) }), _jsxs("div", { className: "w-full h-34 p-8 gap-3 flex flex-col", children: [_jsx("div", { className: "flex items-center", children: getStatusText(event) }), _jsx("div", { className: "text-sm font-bold text-gray-dark flex items-center", children: event.title })] })] }, event.id))) })] })) })] }));
 }

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.97",
+  "version": "1.0.99",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -16,6 +16,7 @@
   "dependencies": {
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.1",
+    "dayjs": "^1.11.12",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^6.4.0",

package/version.txt

@@ -1 +1 @@
-1.0.97
+1.0.99

package/widget/design/Label.design.js

@@ -20,17 +20,12 @@ const heightSize = {
 export default function LabelDesign({ title, onClick, option, hoverState, }) {
     const [hover, setHover] = hoverState ?? [false, () => { }];
     const { width, height, text, background, className, disabled, boundary } = option ?? {};
-    const container = {
-        positions: "relative z-10",
-        sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
-        className,
-    };
     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",
@@ -38,5 +33,9 @@ export default function LabelDesign({ title, onClick, option, hoverState, }) {
             ? "rounded-md text-xs"
             : "rounded-lgx",
     };
+    const container = {
+        className,
+        sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
+    };
     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 })] }));
 }