@edu-tosel/design 1.0.98 → 1.0.99

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

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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() {
-    // 0 : 기간 제한 있음
-    // 1 : 기간 제한 없음 -> 상시 이벤트
-    // 2 : 기간 제한 없음 & 소식
     const eventsData = [
         {
             id: 1,
@@ -63,5 +63,46 @@ export default function Layout() {
             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" })] })] }));
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.98",
+  "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.98
+1.0.99