@edu-tosel/design 1.0.245 → 1.0.248
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/layout/template/Transcript/design/Transcript.d.ts +4 -0
- package/layout/template/Transcript/design/TranscriptAdvanced.design.js +2 -2
- package/layout/template/Transcript/design/molecule/CircularGauge.js +2 -1
- package/layout/template/Transcript/design/molecule/LSWRChart.js +1 -1
- package/layout/template/Transcript/design/organism/IdCard.d.ts +5 -1
- package/layout/template/Transcript/design/organism/IdCard.js +9 -2
- package/package.json +1 -1
- package/util/copyToClipboard.js +1 -1
- package/version.txt +1 -1
|
@@ -92,6 +92,7 @@ export interface TranscriptProps {
|
|
|
92
92
|
data: Data;
|
|
93
93
|
option?: {
|
|
94
94
|
noAnimation?: boolean;
|
|
95
|
+
isAdvanced?: boolean;
|
|
95
96
|
};
|
|
96
97
|
}
|
|
97
98
|
interface Score {
|
|
@@ -176,6 +177,9 @@ export interface TranscriptAdvancedProps {
|
|
|
176
177
|
part6: string;
|
|
177
178
|
};
|
|
178
179
|
};
|
|
180
|
+
option?: {
|
|
181
|
+
isAdvanced?: boolean;
|
|
182
|
+
};
|
|
179
183
|
oci: OccupationalCompetency[];
|
|
180
184
|
}
|
|
181
185
|
export declare const example: TranscriptAdvancedProps;
|
|
@@ -8,7 +8,7 @@ import { OCIChart } from "./molecule/OCIChart";
|
|
|
8
8
|
import { cn } from "../../../../util";
|
|
9
9
|
import IdCard from "./organism/IdCard";
|
|
10
10
|
function TranscriptDesign({ props }, ref) {
|
|
11
|
-
const { info, score, lswr, oci } = props;
|
|
11
|
+
const { info, score, lswr, oci, option } = props;
|
|
12
12
|
const section1Score = score.result.part1 +
|
|
13
13
|
score.result.part2 +
|
|
14
14
|
score.result.part3 +
|
|
@@ -39,7 +39,7 @@ function TranscriptDesign({ props }, ref) {
|
|
|
39
39
|
spacings: "px-5 py-2",
|
|
40
40
|
backgrounds: "bg-gradient-to-r from-crimson-burgundy to-green-dark",
|
|
41
41
|
};
|
|
42
|
-
return (_jsx(_Fragment, { children: _jsxs("div", { ref: ref, className: cn(container), children: [_jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "https://resource.tosel.co.kr/images/header-logo2.png", alt: "\uD1A0\uC140 \uB85C\uACE0", className: "h-10 py-1" }), _jsx("div", { className: "text-white font-bold text-base", children: "Official Score Report" })] }), _jsx(IdCard, { info: info }), _jsx(BarCardCol, { section1: section1Data, section2: section2Data, theme: "red" }), _jsx(RadarCard, { data: lswr, theme: "red", title: "Section Scores" }), _jsxs("div", { className: cn("page-break"), children: [_jsx("div", { className: "w-full h-5 print:block" }), _jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "https://resource.tosel.co.kr/images/header-logo2.png", alt: "\uD1A0\uC140 \uB85C\uACE0", className: "h-10 py-1" }), _jsx("div", { className: "text-white font-bold text-base", children: "Occupational Competency Index Report" })] }), _jsx(OCICard, { data: oci }), _jsx(OCIChart, {})] })] }) }));
|
|
42
|
+
return (_jsx(_Fragment, { children: _jsxs("div", { ref: ref, className: cn(container), children: [_jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "https://resource.tosel.co.kr/images/header-logo2.png", alt: "\uD1A0\uC140 \uB85C\uACE0", className: "h-10 py-1" }), _jsx("div", { className: "text-white font-bold text-base", children: "Official Score Report" })] }), _jsx(IdCard, { info: info, option: option, score: section1Score + section2Score }), _jsx(BarCardCol, { section1: section1Data, section2: section2Data, theme: "red" }), _jsx(RadarCard, { data: lswr, theme: "red", title: "Section Scores" }), _jsxs("div", { className: cn("page-break"), children: [_jsx("div", { className: "w-full h-5 print:block" }), _jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "https://resource.tosel.co.kr/images/header-logo2.png", alt: "\uD1A0\uC140 \uB85C\uACE0", className: "h-10 py-1" }), _jsx("div", { className: "text-white font-bold text-base", children: "Occupational Competency Index Report" })] }), _jsx(OCICard, { data: oci }), _jsx(OCIChart, {})] })] }) }));
|
|
43
43
|
}
|
|
44
44
|
function SectionBarGraphProps(title, score, total, script, subScripts, scale, subScore) {
|
|
45
45
|
return {
|
|
@@ -11,6 +11,7 @@ export const CircularGauge = ({ score, maxScore, isGrade, theme, noAnimation, })
|
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
13
|
const widthPercentage = prepareNoAnimationPercentage();
|
|
14
|
+
const limitedScore = score.toFixed(0);
|
|
14
15
|
const pieStyles = {
|
|
15
16
|
cx: "50%",
|
|
16
17
|
cy: "50%",
|
|
@@ -62,6 +63,6 @@ export const CircularGauge = ({ score, maxScore, isGrade, theme, noAnimation, })
|
|
|
62
63
|
filter: theme == "green"
|
|
63
64
|
? "drop-shadow(0px 3px 5px rgba(16, 86, 82, 0.38))"
|
|
64
65
|
: "drop-shadow(0px 3px 5px rgba(145, 0, 35, 0.38))",
|
|
65
|
-
} }), _jsx(Cell, { fill: "rgba(255, 255, 255, 0)", ...cellStyles })] }) }) }), _jsx("div", { className: cn(scoreText), children:
|
|
66
|
+
} }), _jsx(Cell, { fill: "rgba(255, 255, 255, 0)", ...cellStyles })] }) }) }), _jsx("div", { className: cn(scoreText), children: limitedScore })] }));
|
|
66
67
|
}
|
|
67
68
|
};
|
|
@@ -37,7 +37,7 @@ const partDescription = [
|
|
|
37
37
|
const partDescriptionRecord = createRecord(partDescription, "number");
|
|
38
38
|
export function LSWRChart({ data }) {
|
|
39
39
|
return (_jsx("div", { className: "w-full h-full flex flex-col", children: data.map(({ partIndicies, subject, A, B }) => {
|
|
40
|
-
return (_jsxs("div", { className: "flex w-full h-full even:bg-white odd:bg-gray-light", children: [_jsx("div", { className: "p-2 font-bold bg-crimson-burgundy text-white w-10 shrink-0 text-center", children: subject }), _jsxs("div", { className: "w-16 shrink-0 flex flex-col justify-center items-center p-2 text-center leading-tight", children: [_jsxs("div", { className: "text-green-dark font-bold text-base", children: [A, "%"] }), _jsxs("div", { className: "text-crimson-burgundy font-medium text-xs leading-none", children: [B, "%"] })] }), _jsx("div", { className: "flex flex-col justify-center", children: partIndicies.map((partIndex) => {
|
|
40
|
+
return (_jsxs("div", { className: "flex w-full h-full even:bg-white odd:bg-gray-light", children: [_jsx("div", { className: "p-2 font-bold bg-crimson-burgundy text-white w-10 shrink-0 text-center", children: subject }), _jsxs("div", { className: "w-16 shrink-0 flex flex-col justify-center items-center p-2 text-center leading-tight", children: [_jsxs("div", { className: "text-green-dark font-bold text-base", children: [A.toFixed(0), "%"] }), _jsxs("div", { className: "text-crimson-burgundy font-medium text-xs leading-none", children: [B.toFixed(0), "%"] })] }), _jsx("div", { className: "flex flex-col justify-center", children: partIndicies.map((partIndex) => {
|
|
41
41
|
return (_jsxs("div", { className: "text-[10px] leading-tight p-1 ", children: [_jsxs("span", { className: "font-bold", children: ["part ", partDescriptionRecord[partIndex].number, ":", " "] }), partDescriptionRecord[partIndex].description] }));
|
|
42
42
|
}) })] }));
|
|
43
43
|
}) }));
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import { Information } from "../Transcript";
|
|
2
|
-
export default function IdCard({ info }: {
|
|
2
|
+
export default function IdCard({ info, option, score, }: {
|
|
3
3
|
info: Information;
|
|
4
|
+
score?: number;
|
|
5
|
+
option?: {
|
|
6
|
+
isAdvanced?: boolean;
|
|
7
|
+
};
|
|
4
8
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -4,7 +4,8 @@ import { useResponsive } from "../../../../../hook";
|
|
|
4
4
|
import { cn, copyToClipboard } from "../../../../../util";
|
|
5
5
|
import { GetStyleFromLevel } from "../atom/GetStyleFromLevel";
|
|
6
6
|
import SVG from "../../../../../asset/SVG";
|
|
7
|
-
|
|
7
|
+
import { CircularGauge } from "../molecule/CircularGauge";
|
|
8
|
+
export default function IdCard({ info, option, score, }) {
|
|
8
9
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
9
10
|
const togglecard = () => setIsExpanded(!isExpanded);
|
|
10
11
|
//반응형 info 카드 height 문제로 눌러서 자세히 보기 차후 구현 예정
|
|
@@ -53,5 +54,11 @@ export default function IdCard({ info }) {
|
|
|
53
54
|
textStyles: "text-xs text-green-dark font-medium text-center",
|
|
54
55
|
animations: "hover:bg-green-dark hover:text-white duration-300 cursor-pointer",
|
|
55
56
|
};
|
|
56
|
-
|
|
57
|
+
const gaugeWrapper = {
|
|
58
|
+
displays: "absolute flex justify-center items-center",
|
|
59
|
+
position: "top-0 left-0",
|
|
60
|
+
sizes: "w-full h-full",
|
|
61
|
+
backgrounds: "bg-white",
|
|
62
|
+
};
|
|
63
|
+
return (_jsxs("div", { className: "flex flex-row w-full h-fit mt-5 gap-5", children: [_jsxs("div", { className: cn(cardWrapper), children: [_jsxs("div", { className: "flex flex-row justify-between items-center pb-1 w-full h-fit border-b-2 border-green-dark", children: [_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex flex-[3] text-sm truncate font-bold text-green-dark", children: [info.name, " ", info.nickname && _jsxs("span", { children: [" \u00A0/ ", info.nickname] })] }), _jsx("div", { className: "flex flex-[1] text-sm", children: info.birthday })] }), _jsx("div", { className: "w-fit h-full xs:block hidden", children: _jsx("div", { className: cn(levelTag), children: GetStyleFromLevel(info.level, "name") }) })] }), _jsxs("div", { className: "flex flex-col xs:flex-row w-full h-fit mt-2", children: [_jsxs("div", { className: "flex flex-3 text-sm truncate", children: [_jsx("div", { className: "flex flex-2 text-green-dark font-bold", children: "\uC218\uD5D8\uBC88\uD638:" }), _jsx("div", { className: "flex flex-3", children: info.code })] }), _jsxs("div", { className: "flex flex-3 text-sm truncate", children: [_jsx("div", { className: "flex flex-2 text-green-dark font-bold", children: "\uC2DC\uD5D8\uC77C:" }), _jsx("div", { className: "flex flex-3", children: info.examDate })] })] }), _jsxs("div", { className: "flex flex-col xs:flex-row w-full h-fit", children: [_jsxs("div", { className: "flex flex-3 text-sm truncate", children: [_jsx("div", { className: "flex flex-2 text-green-dark font-bold", children: "\uC720\uD6A8\uAE30\uAC04:" }), _jsx("div", { className: "flex flex-3", children: info.examValidAt })] }), _jsxs("div", { className: "flex flex-3 text-sm truncate", children: [_jsx("div", { className: "flex flex-2 text-green-dark font-bold", children: "\uC2DC\uD5D8\uD68C\uCC28:" }), _jsx("div", { className: "flex flex-3", children: info.examName })] })] })] }), _jsxs("div", { className: cn(qrBox), children: [option?.isAdvanced ? (_jsx("div", { className: cn(gaugeWrapper), children: score && (_jsx(CircularGauge, { maxScore: 990, noAnimation: false, score: score, theme: "green" })) })) : (!info.qr && (_jsx("div", { className: "absolute top-0 left-0 w-full h-full flex justify-center items-center", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/logo-itc-classic.png", alt: "qr" }) }))), info.qr && (_jsxs(_Fragment, { children: [info.qr, _jsx("div", { className: cn(copyButtonWrapper), children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "flex justify-center items-center ", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", className: "size-6 stroke-green-dark", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" }) }) }), _jsx("div", { className: cn(copyButton), onClick: () => copyToClipboard(info.qrSrc), children: "\uACF5\uC720\uD558\uAE30" })] }) })] }))] }), _jsxs("div", { className: "flex flex-col shrink-0", children: [_jsxs("div", { className: cn(imgBox), children: [!info.imgSrc && (_jsx("div", { className: "absolute w-full h-full flex justify-center items-center text-jr-blue", children: _jsx(SVG.User, {}) })), _jsx("img", { src: info.imgSrc, alt: "", className: "object-cover w-full h-full" }), _jsx("div", { className: "absolute w-full h-full flex items-center justify-center", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", className: "size-6 stroke-jr-blue/50", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" }) }) })] }), !isXS && (_jsx("div", { className: "w-full h-full mt-3 flex", children: _jsx("div", { className: "w-full h-full block xs:hidden", children: _jsx("div", { className: cn(levelTag), children: GetStyleFromLevel(info.level, "name") }) }) }))] })] }));
|
|
57
64
|
}
|
package/package.json
CHANGED
package/util/copyToClipboard.js
CHANGED
package/version.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
1.0.
|
|
1
|
+
1.0.248
|