@edu-tosel/design 1.0.97 → 1.0.98
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 +9 -3
- package/card/design/NavCard.design.js +1 -1
- package/card/design/TableCard.design.d.ts +1 -1
- package/card/design/TableCard.design.js +14 -13
- package/card/template/NavCard.js +1 -1
- package/card/template/TableCard.js +1 -2
- package/layout/template/promotion/Layout.d.ts +1 -3
- package/layout/template/promotion/Layout.js +65 -3
- package/layout/template/promotion/Thumbnail.js +1 -7
- package/package.json +1 -1
- package/version.txt +1 -1
- package/widget/design/Label.design.js +7 -8
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { cn, isDebug } from "../../util";
|
|
3
3
|
import { useActionStore } from "../../store";
|
|
4
4
|
import { Action } from "../../layout";
|
|
5
5
|
import { Obstacle } from "../../widget";
|
|
6
|
+
import { useRef } from "react";
|
|
6
7
|
const widthSize = {
|
|
7
8
|
"4xs": "w-15",
|
|
8
9
|
"3xs": "w-40",
|
|
@@ -38,7 +39,6 @@ export default function CardDesign({ header, disabled, children, option, debug,
|
|
|
38
39
|
};
|
|
39
40
|
const { className, boundary, rounded, height, width, text, background, onClick, onMouse, overflow, } = option ?? {};
|
|
40
41
|
const container = {
|
|
41
|
-
positions: "relative",
|
|
42
42
|
sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
|
|
43
43
|
onClick: onClick ? "cursor-pointer" : "",
|
|
44
44
|
text: `${text ?? "text-base"} text-black dark:text-white`,
|
|
@@ -50,9 +50,15 @@ export default function CardDesign({ header, disabled, children, option, debug,
|
|
|
50
50
|
overflow: "overflow-hidden",
|
|
51
51
|
};
|
|
52
52
|
const body = {
|
|
53
|
+
positions: "relative",
|
|
53
54
|
sizes: "w-full h-full",
|
|
54
55
|
overflow,
|
|
55
56
|
className,
|
|
56
57
|
};
|
|
57
|
-
|
|
58
|
+
const containerRef = useRef(null);
|
|
59
|
+
const headerRef = useRef(null);
|
|
60
|
+
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: {
|
|
61
|
+
height: Number(containerRef.current?.offsetHeight) -
|
|
62
|
+
Number(headerRef.current?.offsetHeight),
|
|
63
|
+
}, 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 }) }) })] }));
|
|
58
64
|
}
|
|
@@ -29,8 +29,8 @@ export default function NavCardDesign({ titles, option }) {
|
|
|
29
29
|
sizes: image?.size,
|
|
30
30
|
};
|
|
31
31
|
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: {
|
|
32
|
-
disabled: buttonInLay.disabled,
|
|
33
32
|
className: "absolute bottom-7.5 left-7.5",
|
|
33
|
+
disabled: buttonInLay.disabled,
|
|
34
34
|
background: buttonInLay?.background,
|
|
35
35
|
text: buttonInLay?.text,
|
|
36
36
|
} })), image && (_jsx("img", { src: image.path, alt: "trump-image", loading: "lazy", className: cn(imageBox) }))] }));
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { TableCardProps } from "../../interface";
|
|
2
|
-
export default function TableCardDesign<T>({ header, dataSet, dataField, option, }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export default function TableCardDesign<T>({ header, disabled, dataSet, dataField, option, }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -3,15 +3,18 @@ import { useId } from "react";
|
|
|
3
3
|
import { useActionStore } from "../../store";
|
|
4
4
|
import { cn, sortByOrder } from "../../util";
|
|
5
5
|
import Card from "./Card.design";
|
|
6
|
-
import { DataField, Action, Row
|
|
7
|
-
import { Obstacle } from "../..";
|
|
6
|
+
import { DataField, Action, Row } from "../..";
|
|
8
7
|
import { v4 } from "uuid";
|
|
9
|
-
export default function TableCardDesign({ header, dataSet, dataField, option, }) {
|
|
10
|
-
const {
|
|
8
|
+
export default function TableCardDesign({ header, disabled, dataSet, dataField, option, }) {
|
|
9
|
+
const { isDisabled, obstacle, disabledAction } = disabled ?? {
|
|
10
|
+
isDisabled: false,
|
|
11
|
+
};
|
|
12
|
+
const { width, height, boundary, disabledScript } = option ?? {};
|
|
11
13
|
const { order } = useActionStore();
|
|
12
14
|
const id = useId();
|
|
13
15
|
const orders = order[id] ?? [];
|
|
14
16
|
const container = {
|
|
17
|
+
positions: "relative",
|
|
15
18
|
className: option?.className,
|
|
16
19
|
paddings: !header ? "pb-10" : "pb-25",
|
|
17
20
|
};
|
|
@@ -20,19 +23,17 @@ export default function TableCardDesign({ header, dataSet, dataField, option, })
|
|
|
20
23
|
sizes: "w-full h-15",
|
|
21
24
|
styles: "overflow-hidden",
|
|
22
25
|
};
|
|
23
|
-
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: {
|
|
26
|
+
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: {
|
|
24
27
|
boundary,
|
|
25
28
|
className: cn(container),
|
|
26
29
|
width: width ?? "lg",
|
|
27
30
|
height: height ?? "3xl",
|
|
28
31
|
overflow: "overflow-y-scroll overflow-x-hidden",
|
|
29
32
|
noPadding: true,
|
|
30
|
-
}, children:
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
position: "top-10",
|
|
37
|
-
}, children: _jsx(Lock, { script: disabledScript }) })] }) }));
|
|
33
|
+
}, children: _jsx(Action.Replace, { actions: dataSet?.replaces, children: sortByOrder({ items: dataSet?.items, orders }).map((item) => {
|
|
34
|
+
const uuid = v4();
|
|
35
|
+
if (dataSet.renderItem)
|
|
36
|
+
return dataSet.renderItem(item);
|
|
37
|
+
return (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: option?.rowHeight, noHover: option?.noHover, noPadding: option?.noRowPadding }, uuid));
|
|
38
|
+
}) }) }));
|
|
38
39
|
}
|
package/card/template/NavCard.js
CHANGED
|
@@ -21,8 +21,8 @@ function ButtonInLay({ titles, buttonInLay, option }) {
|
|
|
21
21
|
width: option?.width ?? "xs",
|
|
22
22
|
height: option?.height ?? "sm",
|
|
23
23
|
buttonInLay: {
|
|
24
|
-
disabled: buttonInLay.disabled,
|
|
25
24
|
...buttonInLay,
|
|
25
|
+
disabled: buttonInLay.disabled,
|
|
26
26
|
width: buttonInLay.width ?? "lg",
|
|
27
27
|
height: "sm",
|
|
28
28
|
},
|
|
@@ -11,11 +11,10 @@ function Log(props) {
|
|
|
11
11
|
rowHeight: "h-5",
|
|
12
12
|
onClick: props.option?.onClick,
|
|
13
13
|
text: "text-white",
|
|
14
|
-
padding: "p-7.5",
|
|
15
14
|
noHeader: true,
|
|
16
15
|
noHover: true,
|
|
17
16
|
noRowPadding: true,
|
|
18
|
-
className: "flex flex-col gap-2.5",
|
|
17
|
+
className: "flex flex-col gap-2.5 p-7.5",
|
|
19
18
|
} }));
|
|
20
19
|
}
|
|
21
20
|
TableCard.Log = Log;
|
|
@@ -1,5 +1,67 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
3
|
-
export default function Layout(
|
|
4
|
-
|
|
2
|
+
import { IoIosSearch } from "react-icons/io";
|
|
3
|
+
export default function Layout() {
|
|
4
|
+
// 0 : 기간 제한 있음
|
|
5
|
+
// 1 : 기간 제한 없음 -> 상시 이벤트
|
|
6
|
+
// 2 : 기간 제한 없음 & 소식
|
|
7
|
+
const eventsData = [
|
|
8
|
+
{
|
|
9
|
+
id: 1,
|
|
10
|
+
img: "/images/promotion/promotion1.png",
|
|
11
|
+
type: "0",
|
|
12
|
+
startDate: "2024-05-01",
|
|
13
|
+
endDate: "2024-12-31",
|
|
14
|
+
title: "5월 토셀 랩 세미나 개최",
|
|
15
|
+
body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
id: 2,
|
|
19
|
+
img: "/images/promotion/promotion2.png",
|
|
20
|
+
type: "0",
|
|
21
|
+
regDate: "2024-09-01",
|
|
22
|
+
startDate: "2024-09-01",
|
|
23
|
+
endDate: "2024-09-30",
|
|
24
|
+
title: "83회 명예의 전당 등재자라면? 지금 바로 인터뷰에 참여해보세요",
|
|
25
|
+
body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
id: 3,
|
|
29
|
+
img: "/images/promotion/promotion3.png",
|
|
30
|
+
type: "1",
|
|
31
|
+
regDate: "2024-09-01",
|
|
32
|
+
startDate: "0000-00-00",
|
|
33
|
+
endDate: "0000-00-00",
|
|
34
|
+
title: "소셜 로그인 이벤트! 네이버 계정 연동하고 쿠폰 받아가세요",
|
|
35
|
+
body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
id: 4,
|
|
39
|
+
img: "/images/promotion/promotion4.png",
|
|
40
|
+
type: "2",
|
|
41
|
+
regDate: "2024-09-01",
|
|
42
|
+
startDate: "0000-00-00",
|
|
43
|
+
endDate: "0000-00-00",
|
|
44
|
+
title: "인사혁신처, 지방공기업 등에 TOSEL 확대 적용 발표",
|
|
45
|
+
body: "https://www.tosel.org/uploads/book-info-img/1697164321986Listening-Series_Pre-Starter.png",
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
id: 5,
|
|
49
|
+
img: "/images/promotion/promotion5.png",
|
|
50
|
+
type: "0",
|
|
51
|
+
regDate: "2024-09-01",
|
|
52
|
+
startDate: "2024-10-01",
|
|
53
|
+
endData: "2024-10-31",
|
|
54
|
+
title: "24년도 하반기 고려대학교 미래교육원 토셀 전문가 과정 모집",
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
id: 6,
|
|
58
|
+
img: "/images/promotion/promotion6.png",
|
|
59
|
+
type: "2",
|
|
60
|
+
regDate: "2024-09-01",
|
|
61
|
+
startDate: "0000-00-00",
|
|
62
|
+
endDate: "0000-00-00",
|
|
63
|
+
title: "토셀, 경찰대학교 편입학전형 / 졸업인증 평가 반영",
|
|
64
|
+
},
|
|
65
|
+
];
|
|
66
|
+
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" })] })] }));
|
|
5
67
|
}
|
|
@@ -1,10 +1,4 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { HiOutlineBellSlash } from "react-icons/hi2";
|
|
3
|
-
import { MdComputer } from "react-icons/md";
|
|
4
|
-
import { CiCreditCard1 } from "react-icons/ci";
|
|
5
|
-
import { IoShareSocialOutline } from "react-icons/io5";
|
|
6
|
-
import { MdAccessTime } from "react-icons/md";
|
|
7
|
-
import { IoIosSchool } from "react-icons/io";
|
|
8
2
|
export default function Thumbnail() {
|
|
9
|
-
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" }) })
|
|
3
|
+
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" }) })] }));
|
|
10
4
|
}
|
package/package.json
CHANGED
package/version.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
1.0.
|
|
1
|
+
1.0.98
|
|
@@ -20,17 +20,12 @@ const heightSize = {
|
|
|
20
20
|
export default function LabelDesign({ title, onClick, option, hoverState, }) {
|
|
21
21
|
const [hover, setHover] = hoverState ?? [false, () => { }];
|
|
22
22
|
const { width, height, text, background, className, disabled, boundary } = option ?? {};
|
|
23
|
-
const container = {
|
|
24
|
-
positions: "relative z-10",
|
|
25
|
-
sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
|
|
26
|
-
className,
|
|
27
|
-
};
|
|
28
23
|
const body = {
|
|
29
|
-
positions: "
|
|
30
|
-
displays: "flex justify-center items-center",
|
|
24
|
+
positions: "relative z-10",
|
|
31
25
|
sizes: "w-full h-full",
|
|
32
|
-
|
|
26
|
+
displays: "flex justify-center items-center",
|
|
33
27
|
background: background ?? "bg-gray-light",
|
|
28
|
+
clickable: onClick && "cursor-pointer",
|
|
34
29
|
texts: text ?? "text-gray-dim",
|
|
35
30
|
animation: "duration-500",
|
|
36
31
|
fonts: "font-pretendard-light",
|
|
@@ -38,5 +33,9 @@ export default function LabelDesign({ title, onClick, option, hoverState, }) {
|
|
|
38
33
|
? "rounded-md text-xs"
|
|
39
34
|
: "rounded-lgx",
|
|
40
35
|
};
|
|
36
|
+
const container = {
|
|
37
|
+
className,
|
|
38
|
+
sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,
|
|
39
|
+
};
|
|
41
40
|
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 })] }));
|
|
42
41
|
}
|