@edu-tosel/design 1.0.155 → 1.0.156
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 +4 -2
- package/card/design/RollCard.design.js +1 -1
- package/card/template/InfoCard/Finance.js +1 -1
- package/card/template/InfoCard/Student.d.ts +2 -2
- package/card/template/InfoCard/Student.js +6 -11
- package/card/template/NavCard.js +1 -1
- package/card/template/ProgressCard/Large.js +1 -1
- package/interface/Property.d.ts +1 -1
- package/layout/design/Row.design/index.js +1 -0
- package/layout/index.d.ts +1 -0
- package/layout/index.js +1 -0
- package/layout/template/Event/One.js +39 -1
- package/layout/template/MonthlyProgressReport/Report.d.ts +36 -0
- package/layout/template/MonthlyProgressReport/Report.js +80 -0
- package/layout/template/MonthlyProgressReport/index.d.ts +5 -0
- package/layout/template/MonthlyProgressReport/index.js +5 -0
- package/layout/template/home/layout/Navigation.js +1 -1
- package/package.json +2 -1
- package/tailwind.config.ts +11 -8
- package/version.txt +1 -1
|
@@ -13,8 +13,10 @@ const widthSize = {
|
|
|
13
13
|
sm: "w-full md:w-90",
|
|
14
14
|
md: "w-full md:w-112.5", // 450px
|
|
15
15
|
lg: "w-full lg:w-127.5", // 510px
|
|
16
|
-
xl: "w-full lg:w-
|
|
17
|
-
"2xl": "w-full lg:w-
|
|
16
|
+
xl: "w-full lg:w-156",
|
|
17
|
+
"2xl": "w-full lg:w-187.5",
|
|
18
|
+
"3xl": "w-full lg:w-247.5",
|
|
19
|
+
"4xl": "w-full lg:w-247.5",
|
|
18
20
|
full: "w-full",
|
|
19
21
|
auto: "w-auto",
|
|
20
22
|
};
|
|
@@ -25,7 +25,7 @@ export default function RollCardDesign({ titles, state, disabled, isFixed, child
|
|
|
25
25
|
};
|
|
26
26
|
const isMobile = useMobile();
|
|
27
27
|
return (_jsxs(Card, { option: {
|
|
28
|
-
width: "
|
|
28
|
+
width: "3xl",
|
|
29
29
|
height: !isMobile ? (!isFixed && isOpen ? "2xs" : "4xs") : "2xs",
|
|
30
30
|
background: isDisabled || flag ? "bg-green-dark/10" : "bg-white",
|
|
31
31
|
className: "p-7.5 flex flex-col gap-y-6",
|
|
@@ -12,7 +12,7 @@ export default function Finance({ titles, data, }) {
|
|
|
12
12
|
subtitle: titles.subtitle,
|
|
13
13
|
}, option: {
|
|
14
14
|
titleBorder: "border-green-dark",
|
|
15
|
-
width: "
|
|
15
|
+
width: "3xl",
|
|
16
16
|
height: "xl",
|
|
17
17
|
}, topRight: _jsxs("div", { className: "flex items-center gap-2.5 text-xs ", children: [_jsx("button", { onClick: () => setTaxOn(!taxOn), className: cn("w-4 h-4 rounded-md", taxOn ? "bg-green-dark" : "border-1") }), _jsxs("div", { children: ["\uC0AC\uC5C5\uC18C\uB4DD\uC138 ", taxRate, "%"] })] }), children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "flex gap-7.5 mt-4.25 border-b-1 border-green-dark pb-2.5 ", children: dataSets?.map(({ title, sum, tax, total, rate, amount, number, result }, index) => (_jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsx("div", { className: "font-pretendard-bold text-green-dark", children: title }), _jsxs("div", { className: "flex gap-2.5", children: [_jsxs("div", { className: "flex flex-col justify-between w-20", children: [number && (_jsx(Numbers, { title: number.title, dataSet: number.dataSet, dataField: number.dataField })), _jsx(Result, { title: "\uBE44\uC728", amount: `${rate}%` })] }), amount && (_jsxs("div", { className: "flex flex-col", children: [_jsx(Amount, { title: amount.title, dataSet: amount.dataSet, dataField: amount.dataField }), _jsxs("div", { className: "flex flex-col gap-1.5 mt-2.5", children: [_jsx(Result, { title: "\uD569\uACC4", amount: sum, cnTitle: "text-gray-dim" }), _jsx(Result, { title: "\uC0AC\uC5C5\uC18C\uB4DD\uC138", amount: `${typeof tax === "number" && tax ? "-" : ""}${tax.toLocaleString()}`, cnTitle: "text-gray-dim", cnAmount: "text-crimson-burgundy" }), _jsx(Result, { title: "\uCD1D\uACC4", amount: total, background: "bg-green-dark/10", cnTitle: "font-pretendard-bold" })] }), _jsx(Result, { title: "\uC9C0\uAE09\uBD84", amount: result, background: "bg-green-dark", cnTitle: "font-pretendard-bold text-white", className: "text-white mt-5" })] }))] })] }, id + index))) }), _jsx("div", { className: "flex items-center w-full h-15.5", children: _jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsx("div", { className: "w-45 h-10 bg-gray-light rounded-md flex justify-center items-center text-sm font-pretendard-bold text-green-dark", children: data.result }), _jsxs("div", { className: "flex items-center gap-2.5", children: [_jsxs("div", { className: "text-xs text-gray-dim", children: ["\uB9C8\uC9C0\uB9C9 \uB2E4\uC6B4\uB85C\uB4DC: ", data.latestDownloadDate] }), _jsx("button", { onClick: data.refresh, className: "w-6.25 h-6.25 rounded-md box-shadow flex justify-center items-center", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M13.3526 7.78995H17.5126L14.8618 5.13745C14.0084 4.28401 12.9453 3.67028 11.7795 3.35795C10.6137 3.04563 9.38616 3.04572 8.22037 3.35822C7.05459 3.67072 5.99162 4.28461 5.13832 5.13817C4.28501 5.99174 3.67145 7.0549 3.35932 8.22078M2.48765 16.3699V12.2099M2.48765 12.2099H6.64765M2.48765 12.2099L5.13765 14.8624C5.99108 15.7159 7.05414 16.3296 8.21997 16.6419C9.3858 16.9543 10.6133 16.9542 11.7791 16.6417C12.9449 16.3292 14.0078 15.7153 14.8611 14.8617C15.7145 14.0082 16.328 12.945 16.6402 11.7791M17.5126 3.62995V7.78828", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("button", { className: "bg-green-dark text-white w-22.5 h-6.25 text-xs rounded-md", onClick: data.download, children: "\uC5D1\uC140 \uB2E4\uC6B4\uB85C\uB4DC" }), _jsx(Toggle, { labels: [
|
|
18
18
|
[true, "잠금"],
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { InfoCardProps, OnClick } from "./../../../interface";
|
|
2
2
|
interface Data {
|
|
3
3
|
belong: string;
|
|
4
|
-
|
|
4
|
+
academy: string;
|
|
5
5
|
}
|
|
6
6
|
interface StudentInfo extends Omit<InfoCardProps, "children"> {
|
|
7
7
|
data: Partial<Data>;
|
|
8
8
|
onClick?: OnClick;
|
|
9
9
|
}
|
|
10
|
-
export default function Student({ titles, image, data,
|
|
10
|
+
export default function Student({ titles, image, data, option, }: StudentInfo): import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
export {};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
2
|
-
import { Label } from "../../../widget";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
2
|
import { cn } from "../../../util";
|
|
4
3
|
import { InfoCardDesign } from "../../design/InfoCard.design";
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
export default function Student({ titles, image, data,
|
|
5
|
+
// onClick,
|
|
6
|
+
option, }) {
|
|
7
7
|
const container = {
|
|
8
8
|
positions: "relative",
|
|
9
9
|
displays: "flex flex-col justify-between mt-2.5",
|
|
@@ -18,11 +18,6 @@ export default function Student({ titles, image, data, onClick }) {
|
|
|
18
18
|
titleBorder: "border-blue-navy",
|
|
19
19
|
width: "sm",
|
|
20
20
|
height: "xs",
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
height: "xs",
|
|
24
|
-
text: "text-white hover:text-blue-navy",
|
|
25
|
-
background: "bg-blue-navy hover:bg-gray-light",
|
|
26
|
-
className: cn(label),
|
|
27
|
-
} })] }) }));
|
|
21
|
+
...option,
|
|
22
|
+
}, children: _jsx("div", { className: cn(container), children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm", children: data.academy }), _jsx("span", { className: "text-sm", children: data.belong })] }) }) }));
|
|
28
23
|
}
|
package/card/template/NavCard.js
CHANGED
|
@@ -3,7 +3,7 @@ import NavCardDesign from "../design/NavCard.design";
|
|
|
3
3
|
function Banner({ titles, option }) {
|
|
4
4
|
return (_jsx(NavCardDesign, { titles: titles, option: {
|
|
5
5
|
...option,
|
|
6
|
-
width: option?.width ?? "
|
|
6
|
+
width: option?.width ?? "2xl",
|
|
7
7
|
height: option?.height ?? "sm",
|
|
8
8
|
image: option?.image && {
|
|
9
9
|
...option?.image,
|
|
@@ -35,7 +35,7 @@ export default function ProgressCardLG({ titles, checks, displays, theme, option
|
|
|
35
35
|
const occupied = Math.round((checks.filter((value) => !!value).length / displays.length) * 100);
|
|
36
36
|
return (_jsxs(CardDesign, { option: {
|
|
37
37
|
...option,
|
|
38
|
-
width: "
|
|
38
|
+
width: "3xl",
|
|
39
39
|
height: "2xs",
|
|
40
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"]}` }) })] }));
|
|
41
41
|
}
|
package/interface/Property.d.ts
CHANGED
|
@@ -31,7 +31,7 @@ export type State<T> = [T, StateAction<T>];
|
|
|
31
31
|
* @property {"full"} full - Full size
|
|
32
32
|
* @property {"full"} full - Full size
|
|
33
33
|
*/
|
|
34
|
-
export type Size = "xxxs" | "xxs" | "mmd" | "xm" | "ml" | "5xs" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "auto";
|
|
34
|
+
export type Size = "xxxs" | "xxs" | "mmd" | "xm" | "ml" | "5xs" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | "auto";
|
|
35
35
|
/**
|
|
36
36
|
* Image size type
|
|
37
37
|
* @enum {string}
|
package/layout/index.d.ts
CHANGED
|
@@ -19,3 +19,4 @@ export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
|
|
|
19
19
|
export { default as Gomito } from "./template/Gomito";
|
|
20
20
|
export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
|
|
21
21
|
export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
|
|
22
|
+
export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";
|
package/layout/index.js
CHANGED
|
@@ -19,3 +19,4 @@ export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
|
|
|
19
19
|
export { default as Gomito } from "./template/Gomito";
|
|
20
20
|
export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
|
|
21
21
|
export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
|
|
22
|
+
export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";
|
|
@@ -1,10 +1,48 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { cn, isHTMLString } from "../../../util";
|
|
3
3
|
import { StatusText } from "./StatusText";
|
|
4
|
+
import { useState, useEffect } from "react";
|
|
4
5
|
export default function One({ event }) {
|
|
6
|
+
const [currentTime, setCurrentTime] = useState(new Date());
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
const timer = setInterval(() => setCurrentTime(new Date()), 1000);
|
|
9
|
+
return () => clearInterval(timer);
|
|
10
|
+
}, []);
|
|
5
11
|
const button = () => ({
|
|
6
12
|
sizes: "w-full h-12 flex items-center justify-center rounded-md text-white cursor-pointer font-bold gap-3 text-sm xs:text-md",
|
|
7
13
|
backgrounds: "bg-gradient-to-l from-[#760023] to-[#105652]",
|
|
8
14
|
});
|
|
9
|
-
|
|
15
|
+
// 현재는 startedAt과 expiredAt 모두 시각은 09:00:00 으로 설정되어 있습니다.
|
|
16
|
+
const startedAt = event.startedAt ? new Date(event.startedAt) : null;
|
|
17
|
+
const expiredAt = event.expiredAt ? new Date(event.expiredAt) : null;
|
|
18
|
+
let buttonContent = null;
|
|
19
|
+
if (startedAt && expiredAt) {
|
|
20
|
+
const timeDiff = startedAt.getTime() - currentTime.getTime();
|
|
21
|
+
const daysRemaining = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
|
|
22
|
+
const hoursRemaining = Math.floor((timeDiff / (1000 * 60 * 60)) % 24);
|
|
23
|
+
const minutesRemaining = Math.floor((timeDiff / (1000 * 60)) % 60);
|
|
24
|
+
const secondsRemaining = Math.floor((timeDiff / 1000) % 60);
|
|
25
|
+
if (startedAt < currentTime && currentTime < expiredAt) {
|
|
26
|
+
buttonContent = (_jsx("div", { onClick: event.button?.onClick, className: cn(button()), children: event.button?.title }));
|
|
27
|
+
}
|
|
28
|
+
else if (currentTime < startedAt) {
|
|
29
|
+
const countdownText = daysRemaining > 0
|
|
30
|
+
? `오픈까지 D-${daysRemaining}`
|
|
31
|
+
: `오픈까지 ${hoursRemaining
|
|
32
|
+
.toString()
|
|
33
|
+
.padStart(2, "0")}:${minutesRemaining
|
|
34
|
+
.toString()
|
|
35
|
+
.padStart(2, "0")}:${secondsRemaining
|
|
36
|
+
.toString()
|
|
37
|
+
.padStart(2, "0")} 남음`;
|
|
38
|
+
buttonContent = (_jsx("div", { className: "w-full h-12 flex items-center justify-center rounded-md bg-gray-light text-green-dark font-bold gap-3 text-sm xs:text-md", children: countdownText }));
|
|
39
|
+
}
|
|
40
|
+
else if (expiredAt < currentTime) {
|
|
41
|
+
buttonContent = (_jsx("div", { className: "w-full h-12 flex items-center justify-center rounded-md bg-gray-light text-gray-medium font-bold gap-3 text-sm xs:text-md", children: "\uC774\uBCA4\uD2B8\uAC00 \uB9C8\uAC10\uB418\uC5C8\uC5B4\uC694" }));
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
buttonContent = _jsx("div", { className: cn(button()), children: event.button?.title });
|
|
46
|
+
}
|
|
47
|
+
return (_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: event.thumbnail, 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: _jsx(StatusText, { event: event }) }), _jsx("div", { className: "text-sm font-bold text-gray-dark flex items-center mb-2", children: event.title }), buttonContent] })] }, event.id) }), _jsxs("div", { className: "flex-grow p-5", children: [_jsx("div", { children: isHTMLString(event.content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: event.content }, className: "w-full rounded-xl object-cover overflow-hidden max-w-[810px]" })) : (_jsx("div", { children: event.content })) }), _jsx("button", { onClick: () => history.back(), className: "mt-8 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" })] })] }));
|
|
10
48
|
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
export interface Result {
|
|
2
|
+
createdTimeStamp: number;
|
|
3
|
+
updatedTimeStamp: number;
|
|
4
|
+
academyId: number;
|
|
5
|
+
etc: null;
|
|
6
|
+
report: {
|
|
7
|
+
section1Part1: number;
|
|
8
|
+
section1Part2: number;
|
|
9
|
+
section1Part3: number;
|
|
10
|
+
section1Part4: null;
|
|
11
|
+
section2Part1: number;
|
|
12
|
+
section2Part2: number;
|
|
13
|
+
section2Part3: number;
|
|
14
|
+
section2Part4: null;
|
|
15
|
+
};
|
|
16
|
+
id: number;
|
|
17
|
+
setId: number;
|
|
18
|
+
level: string;
|
|
19
|
+
answers: number[];
|
|
20
|
+
userId: number;
|
|
21
|
+
}
|
|
22
|
+
interface ProgressReportProps {
|
|
23
|
+
studentInfo: {
|
|
24
|
+
name: string;
|
|
25
|
+
birthday: string;
|
|
26
|
+
belong?: string;
|
|
27
|
+
academy?: string;
|
|
28
|
+
};
|
|
29
|
+
results: Result[];
|
|
30
|
+
recentResult: Result & {
|
|
31
|
+
examName: string;
|
|
32
|
+
};
|
|
33
|
+
comment: string | string[];
|
|
34
|
+
}
|
|
35
|
+
export default function ProgressReport({ studentInfo, recentResult, comment, }: ProgressReportProps): import("react/jsx-runtime").JSX.Element;
|
|
36
|
+
export {};
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { InfoCard } from "../../../card";
|
|
3
|
+
import CardDesign from "../../../card/design/Card.design";
|
|
4
|
+
import { LineBreaks } from "../../../text";
|
|
5
|
+
import { cn } from "../../../util";
|
|
6
|
+
import { ResponsiveContainer, XAxis, YAxis, LineChart, Line, Legend, } from "recharts";
|
|
7
|
+
import moment from "moment-timezone";
|
|
8
|
+
export default function ProgressReport({ studentInfo, recentResult, comment, }) {
|
|
9
|
+
const container = {
|
|
10
|
+
displays: "flex justify-between ",
|
|
11
|
+
sizes: "w-[297mm] h-[210mm]",
|
|
12
|
+
boundaries: "border-2 px-10 pt-7 pb-9 border-gray-medium",
|
|
13
|
+
fonts: "font-pretendard-var",
|
|
14
|
+
};
|
|
15
|
+
const leftBody = {
|
|
16
|
+
displays: "flex flex-col gap-y-7.5",
|
|
17
|
+
};
|
|
18
|
+
const rightBody = {
|
|
19
|
+
displays: "flex flex-col",
|
|
20
|
+
};
|
|
21
|
+
const calculate = (result, type) => {
|
|
22
|
+
const section1 = Object.values(result.report)
|
|
23
|
+
.slice(0, 4)
|
|
24
|
+
.filter((v) => v !== null)
|
|
25
|
+
.reduce((acc, cur) => Number(acc) + Number(cur), 0);
|
|
26
|
+
const section2 = Object.values(result.report)
|
|
27
|
+
.slice(4, 8)
|
|
28
|
+
.filter((v) => v !== null)
|
|
29
|
+
.reduce((acc, cur) => Number(acc) + Number(cur), 0);
|
|
30
|
+
const total = (section1 ?? 0) + (section2 ?? 0);
|
|
31
|
+
if (type === "section1")
|
|
32
|
+
return section1;
|
|
33
|
+
if (type === "section2")
|
|
34
|
+
return section2;
|
|
35
|
+
return total;
|
|
36
|
+
};
|
|
37
|
+
const circle = {
|
|
38
|
+
displays: "flex items-center justify-center",
|
|
39
|
+
sizes: "aspect-square ",
|
|
40
|
+
styles: "rounded-full border-gray-dark border-8",
|
|
41
|
+
fonts: "text-5xl font-bold text-blue-navy",
|
|
42
|
+
};
|
|
43
|
+
return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(leftBody), children: [_jsxs("div", { className: "flex flex-col text-blue-navy pl-4 border-l-4 border-blue-navy", children: [_jsx("div", { className: "flex items-center", children: _jsx("img", { src: "/images/logos/lab-spiral.png", alt: "lab" }) }), _jsx("div", { className: "text-2xl leading-tight font-bold", children: "MONTHLY PROGRESS REPORT" })] }), _jsxs("div", { className: "flex flex-col justify-between h-full", children: [_jsx(InfoCard.Student, { titles: {
|
|
44
|
+
title: studentInfo.name,
|
|
45
|
+
subtitle: studentInfo.birthday,
|
|
46
|
+
}, image: "/images/mock/haerin.jpeg", data: {
|
|
47
|
+
belong: studentInfo.belong,
|
|
48
|
+
academy: studentInfo.academy,
|
|
49
|
+
}, option: {
|
|
50
|
+
boundary: "border-2 border-blue-navy",
|
|
51
|
+
} }), _jsx("div", { className: "h-96", children: _jsxs(CardDesign, { option: {
|
|
52
|
+
height: "full",
|
|
53
|
+
boundary: "border-2 border-blue-navy pt-5 px-6 pb-6",
|
|
54
|
+
}, children: [_jsxs("div", { className: "flex flex-col justify-center border-b-3 border-blue-navy pb-2.5", children: [_jsx("div", { className: " text-lg font-bold", children: "\uCD5C\uADFC \uC2DC\uD5D8" }), _jsx("div", { children: recentResult.examName })] }), _jsxs("div", { className: "flex flex-col gap-y-7.5 absolute bottom-0 w-full px-3.5", children: [_jsxs("div", { className: "flex gap-x-12 justify-between w-full", children: [_jsxs("div", { className: "flex-1 ", children: [_jsx("div", { className: "text-center mb-3.5 text-lg", children: "SECTION I" }), _jsx("div", { className: cn(circle), children: calculate(recentResult, "section1") })] }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-center mb-3.5 text-lg", children: "SECTION II" }), _jsx("div", { className: cn(circle), children: calculate(recentResult, "section2") })] })] }), _jsxs("div", { className: "flex gap-x-2 justify-end items-end font-bold text-blue-navy", children: [_jsx("div", { className: "text-xl", children: "total" }), _jsx("div", { className: "text-5xl leading-none ", children: calculate(recentResult) })] })] })] }) })] })] }), _jsxs("div", { className: cn(rightBody), children: [_jsx("div", { className: "h-12 flex justify-end text-blue-navy font-bold", children: _jsx("div", { children: moment(new Date()).format("YYYY-MM-DD HH:mm:ss") }) }), _jsxs("div", { className: "flex flex-col justify-between h-full", children: [_jsx("div", { className: "h-88", children: _jsx(CardDesign, { option: {
|
|
55
|
+
width: "xl",
|
|
56
|
+
height: "full",
|
|
57
|
+
boundary: "border-2 border-blue-navy",
|
|
58
|
+
}, children: _jsx(ResponsiveContainer, { width: "95%", height: "95%", className: "absolute left-0 bottom-0", children: _jsxs(LineChart, { data: [
|
|
59
|
+
{
|
|
60
|
+
date: "2024-03-01",
|
|
61
|
+
score: 34,
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
date: "2024-03-02",
|
|
65
|
+
score: 45,
|
|
66
|
+
},
|
|
67
|
+
// {
|
|
68
|
+
// date: "2024-03-03",
|
|
69
|
+
// score: 47,
|
|
70
|
+
// },
|
|
71
|
+
// {
|
|
72
|
+
// date: "2024-03-04",
|
|
73
|
+
// score: 53,
|
|
74
|
+
// },
|
|
75
|
+
], children: [_jsx(XAxis, { dataKey: "date" }), _jsx(YAxis, { dataKey: "score", scale: "log", domain: ["auto", "auto"] }), _jsx(Line, { type: "monotone", name: "Monthly Test", dataKey: "score", stroke: "#173A8B", fill: "#173A8B" }), _jsx(Legend, {})] }) }) }) }), _jsx("div", { className: "h-72", children: _jsxs(CardDesign, { option: {
|
|
76
|
+
width: "xl",
|
|
77
|
+
height: "full",
|
|
78
|
+
boundary: "border-2 border-blue-navy p-5",
|
|
79
|
+
}, children: [_jsx("div", { className: "text-gray-dark font-bold text-lg", children: "\uC6D0\uC7A5\uB2D8\uC758 \uCF54\uBA58\uD2B8" }), _jsx("div", { className: "h-52 overflow-y-scroll scrollbar-hidden text-sm mt-2.5", children: _jsx(LineBreaks, { texts: comment }) })] }) })] })] })] }));
|
|
80
|
+
}
|
|
@@ -98,7 +98,7 @@ function NavigationItem({ type, calendar, notice, event, }) {
|
|
|
98
98
|
};
|
|
99
99
|
if (type === "calendar")
|
|
100
100
|
return (_jsx("div", { className: cn(container), children: calendar.schedules.map(({ applyDay, onClick }) => {
|
|
101
|
-
const { isBefore
|
|
101
|
+
const { isBefore } = compareDates(applyDay);
|
|
102
102
|
return (_jsx("div", { onClick: onClick, className: cn(item, "w-[400px] md:w-full h-[184px] shadow-main rounded-[10px] p-7.5"), children: _jsxs("div", { children: [_jsx("div", { className: "text-[16px] font-bold text-gray-dark", children: convertDateToString(applyDay) }), _jsx("div", { children: isBefore && _jsx("p", { children: "\uC811\uC218\uC911" }) })] }) }));
|
|
103
103
|
}) }));
|
|
104
104
|
if (type === "notification")
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@edu-tosel/design",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.156",
|
|
4
4
|
"description": "UI components for International TOSEL Committee",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"jsx",
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
"date-fns-tz": "^2.0.1",
|
|
21
21
|
"dayjs": "^1.11.12",
|
|
22
22
|
"gsap": "^3.12.5",
|
|
23
|
+
"moment-timezone": "^0.5.45",
|
|
23
24
|
"react": "^18.2.0",
|
|
24
25
|
"react-beautiful-dnd": "^13.1.1",
|
|
25
26
|
"react-datepicker": "^6.4.0",
|
package/tailwind.config.ts
CHANGED
|
@@ -32,19 +32,18 @@ export default {
|
|
|
32
32
|
},
|
|
33
33
|
boxShadow: {
|
|
34
34
|
main: "0 2px 10px 0px rgba(0, 0, 0, 0.14)",
|
|
35
|
-
|
|
35
|
+
"main-small": "0 0px 5px 0px rgba(0, 0, 0, 0.1)",
|
|
36
36
|
"main-hover": "0 10px 12px 0px rgba(0, 0, 0, 0.3)",
|
|
37
37
|
green: "0 0px 10px 0px rgba(16, 86, 82, 0.38)",
|
|
38
38
|
},
|
|
39
39
|
keyframes: {
|
|
40
|
-
|
|
41
40
|
grow: {
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
"0%": { height: "60px" },
|
|
42
|
+
"100%": { height: "120px" },
|
|
44
43
|
},
|
|
45
44
|
shrink: {
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
"0%": { height: "120px" },
|
|
46
|
+
"100%": { height: "60px" },
|
|
48
47
|
},
|
|
49
48
|
|
|
50
49
|
slideBackground: {
|
|
@@ -70,8 +69,8 @@ export default {
|
|
|
70
69
|
},
|
|
71
70
|
|
|
72
71
|
animation: {
|
|
73
|
-
grow:
|
|
74
|
-
shrink:
|
|
72
|
+
grow: "grow 0.2s ease-in-out forwards",
|
|
73
|
+
shrink: "shrink 0.2s ease-in-out forwards",
|
|
75
74
|
},
|
|
76
75
|
|
|
77
76
|
colors: {
|
|
@@ -289,6 +288,10 @@ export default {
|
|
|
289
288
|
151.75: "37.9375rem",
|
|
290
289
|
152: "38rem",
|
|
291
290
|
153: "38.25rem",
|
|
291
|
+
154: "38.5rem",
|
|
292
|
+
155: "38.75rem",
|
|
293
|
+
156: "39rem",
|
|
294
|
+
157: "39.25rem",
|
|
292
295
|
158: "39.5rem",
|
|
293
296
|
159: "39.75rem",
|
|
294
297
|
160: "40rem",
|
package/version.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
1.0.
|
|
1
|
+
1.0.156
|