@edu-tosel/design 1.0.98 → 1.0.100
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/card/design/Card.design.js +2 -1
- package/card/template/ConfirmCard/index.d.ts +1 -11
- package/card/template/ProgressCard/Large.d.ts +1 -1
- package/card/template/ProgressCard/Large.js +2 -1
- package/card/template/ProgressCard/Small.js +2 -1
- package/globals.css +3 -0
- package/interface/Card.d.ts +10 -1
- package/layout/template/promotion/Layout.js +48 -5
- package/package.json +2 -1
- package/tailwind.config.ts +1 -0
- package/version.txt +1 -1
- package/widget/template/Counter.js +7 -5
|
@@ -1,12 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
interface ConfirmCardProps {
|
|
3
|
-
titles: Titles;
|
|
4
|
-
action?: Omit<ActionProps, "shows">;
|
|
5
|
-
children?: React.ReactNode;
|
|
6
|
-
buttons: [LabelWidget, LabelWidget];
|
|
7
|
-
option?: {
|
|
8
|
-
className?: string;
|
|
9
|
-
};
|
|
10
|
-
}
|
|
1
|
+
import { ConfirmCardProps } from "../../../interface";
|
|
11
2
|
export default function ConfirmCard(props: ConfirmCardProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
-
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ProgressCardProps } from "../../../interface";
|
|
2
|
-
export default function ProgressCardLG({ titles, checks, displays, theme, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export default function ProgressCardLG({ titles, checks, displays, theme, option, }: ProgressCardProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -15,7 +15,7 @@ const text = {
|
|
|
15
15
|
green: "text-green-dark",
|
|
16
16
|
blue: "text-blue-navy",
|
|
17
17
|
};
|
|
18
|
-
export default function ProgressCardLG({ titles, checks, displays, theme, }) {
|
|
18
|
+
export default function ProgressCardLG({ titles, checks, displays, theme, option, }) {
|
|
19
19
|
const progressBox = {
|
|
20
20
|
positions: "absolute top-7.5 left-7.5",
|
|
21
21
|
displays: "flex",
|
|
@@ -34,6 +34,7 @@ export default function ProgressCardLG({ titles, checks, displays, theme, }) {
|
|
|
34
34
|
};
|
|
35
35
|
const occupied = Math.round((checks.filter((value) => !!value).length / displays.length) * 100);
|
|
36
36
|
return (_jsxs(CardDesign, { option: {
|
|
37
|
+
...option,
|
|
37
38
|
width: "2xl",
|
|
38
39
|
height: "2xs",
|
|
39
40
|
}, 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"]}` }) })] }));
|
|
@@ -26,7 +26,7 @@ export default function ProgressCardSmall({ titles, displays, checks, nowFocus,
|
|
|
26
26
|
});
|
|
27
27
|
const titleBox = {
|
|
28
28
|
positions: "absolute top-2.5 right-2.5",
|
|
29
|
-
sizes: "max-w-
|
|
29
|
+
sizes: "max-w-[130px] w-1/3 h-16",
|
|
30
30
|
displays: "flex flex-col items-end",
|
|
31
31
|
backgrounds: nowFocus === true ? bgLight[theme ?? "green"] : "bg-transparent",
|
|
32
32
|
boundaries: "rounded-[10px]",
|
|
@@ -40,6 +40,7 @@ export default function ProgressCardSmall({ titles, displays, checks, nowFocus,
|
|
|
40
40
|
styles: text[theme],
|
|
41
41
|
};
|
|
42
42
|
return (_jsxs(CardDesign, { option: {
|
|
43
|
+
...option,
|
|
43
44
|
width: size ?? "md",
|
|
44
45
|
height: "5xs",
|
|
45
46
|
}, 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
CHANGED
package/interface/Card.d.ts
CHANGED
|
@@ -4,6 +4,8 @@ import { Theme } from "./Theme";
|
|
|
4
4
|
import { Flexify } from "./UtilityType";
|
|
5
5
|
import { ButtonWidgetOption, SelectSwitchWidgetOption, SelectToggleWidgetOption } from "./widget/WidgetOption";
|
|
6
6
|
import { ReactNode } from "react";
|
|
7
|
+
import { ActionProps } from "./Action";
|
|
8
|
+
import { LabelWidget } from "./widget";
|
|
7
9
|
interface CardOption {
|
|
8
10
|
className?: string;
|
|
9
11
|
boundary?: string;
|
|
@@ -153,7 +155,7 @@ export interface ProgressCardProps {
|
|
|
153
155
|
theme?: Theme;
|
|
154
156
|
option?: {
|
|
155
157
|
size?: Size;
|
|
156
|
-
};
|
|
158
|
+
} & CardOption;
|
|
157
159
|
}
|
|
158
160
|
export type ControlContentWidgetOption<T> = ButtonWidgetOption | SelectSwitchWidgetOption<T> | SelectToggleWidgetOption<T>;
|
|
159
161
|
export interface ControlContent<T> {
|
|
@@ -164,4 +166,11 @@ export interface ControlCardProps<T> {
|
|
|
164
166
|
contents: ControlContent<T>[];
|
|
165
167
|
option?: CardOption;
|
|
166
168
|
}
|
|
169
|
+
export interface ConfirmCardProps {
|
|
170
|
+
titles: Titles;
|
|
171
|
+
action?: Omit<ActionProps, "shows">;
|
|
172
|
+
children?: React.ReactNode;
|
|
173
|
+
buttons: [LabelWidget, LabelWidget];
|
|
174
|
+
option?: CardOption;
|
|
175
|
+
}
|
|
167
176
|
export {};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
2
3
|
import { IoIosSearch } from "react-icons/io";
|
|
4
|
+
import dayjs from "dayjs";
|
|
5
|
+
import { BsCreditCard } from "react-icons/bs";
|
|
3
6
|
export default function Layout() {
|
|
4
|
-
// 0 : 기간 제한 있음
|
|
5
|
-
// 1 : 기간 제한 없음 -> 상시 이벤트
|
|
6
|
-
// 2 : 기간 제한 없음 & 소식
|
|
7
7
|
const eventsData = [
|
|
8
8
|
{
|
|
9
9
|
id: 1,
|
|
@@ -52,6 +52,7 @@ export default function Layout() {
|
|
|
52
52
|
startDate: "2024-10-01",
|
|
53
53
|
endData: "2024-10-31",
|
|
54
54
|
title: "24년도 하반기 고려대학교 미래교육원 토셀 전문가 과정 모집",
|
|
55
|
+
body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
|
|
55
56
|
},
|
|
56
57
|
{
|
|
57
58
|
id: 6,
|
|
@@ -61,7 +62,49 @@ export default function Layout() {
|
|
|
61
62
|
startDate: "0000-00-00",
|
|
62
63
|
endDate: "0000-00-00",
|
|
63
64
|
title: "토셀, 경찰대학교 편입학전형 / 졸업인증 평가 반영",
|
|
65
|
+
body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
|
|
64
66
|
},
|
|
65
67
|
];
|
|
66
|
-
|
|
68
|
+
const [selectedEvent, setSelectedEvent] = useState(null);
|
|
69
|
+
const handleCardClick = (event) => {
|
|
70
|
+
setSelectedEvent(event);
|
|
71
|
+
};
|
|
72
|
+
const handleBackToList = () => {
|
|
73
|
+
setSelectedEvent(null);
|
|
74
|
+
};
|
|
75
|
+
const getStatusText = (event) => {
|
|
76
|
+
const now = dayjs();
|
|
77
|
+
const startDate = dayjs(event.startDate);
|
|
78
|
+
const endDate = event.endDate ? dayjs(event.endDate) : dayjs(event.endData);
|
|
79
|
+
if (event.type === "0") {
|
|
80
|
+
if (now.isBefore(startDate)) {
|
|
81
|
+
return (_jsx("span", { className: "px-2 py-1 text-2xs font-semibold rounded-md bg-green-dark text-white", children: "\uC624\uD508\uC608\uC815" }));
|
|
82
|
+
}
|
|
83
|
+
else if (now.isAfter(endDate)) {
|
|
84
|
+
return (_jsx("span", { className: "px-2 py-1 text-2xs font-semibold rounded-md bg-gray-light text-gray-mid", children: "\uB9C8\uAC10" }));
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
const diff = endDate.diff(now, "day");
|
|
88
|
+
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] }));
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
else if (event.type === "1") {
|
|
92
|
+
return (_jsx("div", { className: "w-[63px] h-[22px] rounded-md bg-black flex items-center justify-center", style: {
|
|
93
|
+
background: "linear-gradient(269deg, rgba(118, 0, 35, 0.10) 0%, rgba(16, 86, 82, 0.10) 100%)",
|
|
94
|
+
}, children: _jsx("div", { className: "px-2 py-1 text-2xs font-semibold rounded-md", style: {
|
|
95
|
+
background: "linear-gradient(269deg, rgba(118, 0, 35) 0%, rgba(16, 86, 82) 100%)",
|
|
96
|
+
WebkitBackgroundClip: "text",
|
|
97
|
+
WebkitTextFillColor: "transparent",
|
|
98
|
+
}, children: "\uC0C1\uC2DC \uC774\uBCA4\uD2B8" }) }));
|
|
99
|
+
}
|
|
100
|
+
else if (event.type === "2") {
|
|
101
|
+
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" }));
|
|
102
|
+
}
|
|
103
|
+
else {
|
|
104
|
+
return "";
|
|
105
|
+
}
|
|
106
|
+
};
|
|
107
|
+
return (_jsxs("div", { className: "min-h-screen w-full mx-auto", children: [_jsx("img", { src: "/images/promotion/promotionHeader.png", alt: "" }), _jsx("div", { className: "mmd:max-w-300 h-full flex flex-col mx-auto mmd:px-10", children: selectedEvent ? (_jsxs("div", { className: "flex flex-col mmd:flex-row", children: [_jsx("div", { className: "min-w-[320px] h-auto p-5 mmd:sticky mmd:top-20 mmd:self-start", children: _jsxs("div", { className: "w-full h-auto rounded-xl sm:flex mmd:flex-col", children: [_jsx("div", { className: "w-full mmd:h-50 overflow-hidden", children: _jsx("img", { src: selectedEvent.img, alt: "", className: "rounded-xl h-full object-cover w-full" }) }), _jsxs("div", { className: "w-full h-auto pt-5 sm:p-5 mmd:p-0 mmd: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 text-sm xs:text-md", style: {
|
|
108
|
+
background: "linear-gradient(269deg, rgba(118, 0, 35) 0%, rgba(16, 86, 82) 100%)",
|
|
109
|
+
}, children: [_jsx(BsCreditCard, { className: "text-lg xs: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 flex-col sm:flex-row justify-between min-h-14.5 border-b-1", children: [_jsxs("div", { className: "w-full mb-5 h-9 sm:w-80 sm:h-9.5 flex items-center bg-[#f0f0f0]/10 rounded-xl", children: [_jsx(IoIosSearch, { className: "text-xl 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-sm bg-[#f0f0f0]/10 placeholder:text-[#7f7f7f] placeholder:font-light outline-none" })] }), _jsx("div", { className: "flex h-9 pb-5 sm:pb-0 sm:h-9.5 items-center justify-center", children: ["모두보기", "진행 중", "예정된", "토셀소식"].map((item) => (_jsx("div", { className: "text-xs sm:text-2xs md:text-xs p-3 flex items-center justify-center cursor-pointer", children: item }, item))) })] }), _jsx("div", { className: "pt-5 flex grid sm:grid-cols-2 md:grid-cols-3 gap-5 rounded-xl", children: eventsData.map((event) => (_jsxs("div", { onClick: () => handleCardClick(event), className: "w-full max-h-84 shadow-md rounded-xl cursor-pointer box-shadow-green transition-all duration-500", children: [_jsx("div", { className: "w-full max-h-50 rounded-t-xl overflow-hidden relative", children: _jsx("img", { src: event.img, alt: "", className: "w-full" }) }), _jsxs("div", { className: "w-full min-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))) })] })) })] }));
|
|
67
110
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@edu-tosel/design",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.100",
|
|
4
4
|
"description": "UI components for International TOSEL Committee",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jsx",
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"date-fns": "^2.30.0",
|
|
18
18
|
"date-fns-tz": "^2.0.1",
|
|
19
|
+
"dayjs": "^1.11.12",
|
|
19
20
|
"react": "^18.2.0",
|
|
20
21
|
"react-beautiful-dnd": "^13.1.1",
|
|
21
22
|
"react-datepicker": "^6.4.0",
|
package/tailwind.config.ts
CHANGED
package/version.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
1.0.
|
|
1
|
+
1.0.100
|
|
@@ -3,13 +3,15 @@ import { cn } from "../../util";
|
|
|
3
3
|
export default function Counter({ titles, counts, option }) {
|
|
4
4
|
const { position, boundary } = option ?? {};
|
|
5
5
|
const container = {
|
|
6
|
-
|
|
7
|
-
displays: "flex justify-between items-end",
|
|
6
|
+
displays: "flex justify-between items-start",
|
|
8
7
|
sizes: "w-full h-15",
|
|
9
8
|
positions: position ?? "top-5 right-0",
|
|
10
|
-
boundaries: boundary
|
|
9
|
+
boundaries: boundary,
|
|
10
|
+
};
|
|
11
|
+
const titleBox = {
|
|
12
|
+
displays: "flex flex-col gap-y-4",
|
|
13
|
+
fonts: "leading-tight",
|
|
11
14
|
};
|
|
12
|
-
const titleBox = {};
|
|
13
15
|
const countBox = {
|
|
14
16
|
displays: "flex gap-x-5",
|
|
15
17
|
sizes: "h-full",
|
|
@@ -20,7 +22,7 @@ export default function Counter({ titles, counts, option }) {
|
|
|
20
22
|
backgrounds: "bg-gray-light",
|
|
21
23
|
styles: "rounded-[4px] p-1",
|
|
22
24
|
};
|
|
23
|
-
return (_jsxs("div", { className: cn(container), children: [
|
|
25
|
+
return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "font-pretendard-bold", children: titles.title }), _jsx("div", { className: "", children: titles.subtitle })] }), _jsxs("div", { className: cn(countBox), children: [_jsx("div", { className: "flex gap-x-2.5 h-full", children: counts?.map((count) => (_jsx(CountBox, { ...count }, count.title))) }), _jsxs("div", { className: cn(total), children: [_jsx("div", { className: "text-xs text-gray-medium leading-tight", children: "\uC804\uCCB4" }), _jsx("div", { className: "font-pretendard-bold w-full leading-none text-end ", children: Object.values(counts)
|
|
24
26
|
.map((count) => count.count)
|
|
25
27
|
.reduce((acc, cur) => acc + cur, 0) })] })] })] }));
|
|
26
28
|
}
|