@edu-tosel/design 1.0.200 → 1.0.201

package/layout/index.d.ts

@@ -24,3 +24,4 @@ export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
 export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";
 export { default as Transcript } from "./template/Transcript";
 export { default as Ticket } from "./template/Ticket";
+export { default as Error } from "./template/Error";

package/layout/index.js

@@ -24,3 +24,4 @@ export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
 export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";
 export { default as Transcript } from "./template/Transcript";
 export { default as Ticket } from "./template/Ticket";
+export { default as Error } from "./template/Error";

package/layout/template/Error/Error404.d.ts

@@ -0,0 +1 @@
+export default function Error404(): import("react/jsx-runtime").JSX.Element;

package/layout/template/Error/Error404.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Error404() {
+    return (_jsx("div", { className: "flex justify-center items-center w-full h-screen", children: _jsxs("div", { className: "flex flex-col justify-center items-center", children: [_jsx("div", { className: "w-full h-fit flex justify-center items-center mb-5 text-green-dark", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "md:size-10 size-6", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" }) }) }), _jsxs("div", { className: "w-full text-center text-sm md:text-base font-medium text-gray-dark", children: ["\uC694\uCCAD\uD558\uC2E0 \uD398\uC774\uC9C0\uB97C \uCC3E\uC744 \uC218\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4. ", _jsx("br", {}), "\uC8FC\uC18C\uB97C \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694."] }), _jsxs("div", { className: "relative flex justify-center items-center md:size-80 size-40", children: [_jsx("div", { className: "absolute flex justify-center items-center left-0 top-0 w-full h-full overflow-visible", children: _jsx("div", { className: "font-medium md:text-[200px] text-[100px] text-green-dark", children: "404" }) }), _jsx("div", { className: "absolute flex justify-center items-center left-0 top-0 w-full h-full overflow-visible", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/img-character-cocoon-main-new.png", alt: "", className: "size-40 md:size-80 z-10 hover:scale-105 duration-300" }) })] }), _jsx("div", { className: "w-full text-center text-base font-medium text-gray-dark", children: _jsx("button", { className: "font-medium text-green-dark w-fit h-fit bg-green-light px-4 py-3 rounded-lg hover:shadow-green duration-300 text-sm hover:bg-white", children: "\uC774\uC804 \uD398\uC774\uC9C0\uB85C \uB3CC\uC544\uAC00\uAE30" }) })] }) }));
+}

package/layout/template/Error/index.d.ts

@@ -0,0 +1,5 @@
+import Error404 from "./Error404";
+declare const Error: {
+    Error404: typeof Error404;
+};
+export default Error;

package/layout/template/Error/index.js

@@ -0,0 +1,5 @@
+import Error404 from "./Error404";
+const Error = {
+    Error404,
+};
+export default Error;

package/layout/template/Ticket/Ticket.design.js

@@ -73,6 +73,6 @@ function TicketDesign({ props }, ref) {
                                                 ? "w-2.5 shrink-0 bg-gray-light"
                                                 : "w-full bg-white"}`, children: num !== null ? num : "" }, index))) })] }), _jsxs("div", { className: "font-medium text-2xs", children: ["*OMR (1)\uBC88 \uD56D\uBAA9\uC5D0 \uD574\uB2F9\uBC88\uD638\uB97C \uB530\uB77C\uC11C \uC368\uC8FC\uC138\uC694.", " "] })] }), _jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleLarge), children: "\uB808\uBCA8" }), _jsx("div", { className: cn(cellText), children: props.level })] }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsxs("div", { className: "flex flex-col gap-0 h-full w-21 border-1 border-gray-medium shrink-0", children: [typeof props.profile !== "function" ? (_jsx("div", { className: "h-full w-full bg-cover", style: {
                                             backgroundImage: `url(${props.profile ?? ""})`,
-                                        } })) : (typeof props.profile === "function" && (_jsxs("button", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: props.profile, className: "w-full h-full overflow-hidden relative bg-gray-light", children: [_jsx("img", { className: "bg-cover", src: "https://tosel.cdn.ntruss.com/images/picture.png" }), transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(hoverBox), children: [_jsx(SVG.Image, {}), _jsx("div", { className: "text-white text-xs leading-none", children: "\uC0AC\uC9C4 \uBC14\uAFB8\uAE30" })] })))] }))), _jsx("div", { className: cn(cellTitleLarge, "w-full"), children: "\uC0AC\uC9C4" })] }), _jsxs("div", { className: "flex flex-col gap-2 w-full", children: [_jsxs("div", { className: "flex flex-col gap-0", children: [_jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uC774\uB984" }), _jsx("div", { className: cn(cellText), children: props.name })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uC0DD\uB144\uC6D4\uC77C" }), _jsx("div", { className: cn(cellText), children: props.birthday })] })] }), _jsxs("div", { className: "flex flex-col gap-0", children: [_jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uACE0\uC0AC\uC7A5" }), _jsx("div", { className: cn(cellText), children: hall })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uACE0\uC0AC\uC2E4" }), _jsx("div", { className: cn(cellText), children: room })] })] })] })] }), _jsxs("div", { className: "flex flex-col gap-0", children: [_jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleLarge, "bg-green-dark/10"), children: "\uC2DC\uD5D8\uC77C\uC790" }), _jsx("div", { className: cn(cellText), children: props.exam.date })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleLarge, "bg-green-dark/10"), children: "\uC785\uC2E4 \uC644\uB8CC\uC2DC\uAC04" }), _jsx("div", { className: cn(cellText), children: formmatedStartedAt })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleLarge, "bg-green-dark/10"), children: "\uC885\uB8CC\uC2DC\uAC04" }), _jsx("div", { className: cn(cellText), children: formmatedEndedAt(startedAt, props.level) })] }), _jsxs("div", { className: "flex flex-col mt-1", children: [_jsx("div", { className: "font-medium text-2xs leading-tight", children: "*\uC785\uC2E4\uC2DC\uAC04 \uC774\uD6C4\uC5D0\uB294 \uC785\uC2E4\uC774 \uC81C\uD55C\uB429\uB2C8\uB2E4." }), _jsx("div", { className: "font-medium text-2xs leading-tight", children: "*\uACE0\uC0AC\uC7A5 \uC5EC\uAC74\uC5D0 \uB530\uB77C \uD1F4\uC2E4\uC2DC\uAC04\uC740 \uC870\uAE08\uC529 \uC0C1\uC774\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." })] })] }), _jsx("div", { className: "w-full border-b-1 border-dashed border-gray-medium" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "font-bold text-sm leading-tight", children: "\uC751\uC2DC\uC790 \uC720\uC758\uC0AC\uD56D" }), _jsxs("ul", { className: "list-outside list-decimal ml-4 font-medium text-2xs", children: [_jsxs("li", { className: "mb-1", children: ["\uB2E4\uC74C\uC758 \uBB3C\uD488\uC744 \uAF2D \uC900\uBE44\uD574\uC8FC\uC138\uC694:", _jsx("br", {}), " \uCEF4\uD4E8\uD130\uC6A9 \uC0AC\uC778\uD39C / \uC218\uC815 \uD14C\uC774\uD504 / \uC218\uD5D8\uD45C / \uAC80\uC815 \uBCFC\uD39C"] }), _jsxs("li", { className: "mb-1", children: ["\uACE0\uC0AC\uC7A5 \uC704\uCE58\uB97C \uBBF8\uB9AC \uD655\uC778\uD574\uC8FC\uC138\uC694:", _jsx("br", {}), " \uC218\uD5D8\uD45C\uC5D0 \uAE30\uC7AC\uB41C \uACE0\uC0AC\uC7A5, \uACE0\uC0AC\uC2E4 \uC815\uBCF4\uB97C \uD655\uC778\uD574\uC8FC\uC138\uC694."] }), _jsxs("li", { children: ["\uD559\uBD80\uBAA8 \uCD9C\uC785 \uD1B5\uC81C:", _jsx("br", {}), "\uACE0\uC0AC\uC2E4 \uB0B4\uBD80\uC5D0\uB294 \uD559\uBD80\uBAA8\uC758 \uCD9C\uC785\uC774 \uC5C4\uACA9\uD788 \uD1B5\uC81C\uB429\uB2C8\uB2E4."] })] })] })] })] }));
+                                        } })) : (typeof props.profile === "function" && (_jsxs("button", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: props.profile, className: "w-full h-full overflow-hidden relative bg-gray-light", children: [_jsx("img", { className: "bg-cover", src: "https://tosel.cdn.ntruss.com/images/picture.png" }), transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(hoverBox), children: [_jsx(SVG.Image, {}), _jsx("div", { className: "text-white text-xs leading-none", children: "\uC0AC\uC9C4 \uBC14\uAFB8\uAE30" })] })))] }))), _jsx("div", { className: cn(cellTitleLarge, "w-full"), children: "\uBCF8\uC778 \uC0AC\uC9C4" })] }), _jsxs("div", { className: "flex flex-col gap-2 w-full", children: [_jsxs("div", { className: "flex flex-col gap-0", children: [_jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uC774\uB984" }), _jsx("div", { className: cn(cellText), children: props.name })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uC0DD\uB144\uC6D4\uC77C" }), _jsx("div", { className: cn(cellText), children: props.birthday })] })] }), _jsxs("div", { className: "flex flex-col gap-0", children: [_jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uACE0\uC0AC\uC7A5" }), _jsx("div", { className: cn(cellText), children: hall })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uACE0\uC0AC\uC2E4" }), _jsx("div", { className: cn(cellText), children: room })] })] })] })] }), _jsxs("div", { className: "flex flex-col gap-0", children: [_jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleLarge, "bg-green-dark/10"), children: "\uC2DC\uD5D8\uC77C\uC790" }), _jsx("div", { className: cn(cellText), children: props.exam.date })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleLarge, "bg-green-dark/10"), children: "\uC785\uC2E4 \uC644\uB8CC\uC2DC\uAC04" }), _jsx("div", { className: cn(cellText), children: formmatedStartedAt })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleLarge, "bg-green-dark/10"), children: "\uC885\uB8CC\uC2DC\uAC04" }), _jsx("div", { className: cn(cellText), children: formmatedEndedAt(startedAt, props.level) })] }), _jsxs("div", { className: "flex flex-col mt-1", children: [_jsx("div", { className: "font-medium text-2xs leading-tight", children: "*\uC785\uC2E4\uC2DC\uAC04 \uC774\uD6C4\uC5D0\uB294 \uC785\uC2E4\uC774 \uC81C\uD55C\uB429\uB2C8\uB2E4." }), _jsx("div", { className: "font-medium text-2xs leading-tight", children: "*\uACE0\uC0AC\uC7A5 \uC5EC\uAC74\uC5D0 \uB530\uB77C \uD1F4\uC2E4\uC2DC\uAC04\uC740 \uC870\uAE08\uC529 \uC0C1\uC774\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." })] })] }), _jsx("div", { className: "w-full border-b-1 border-dashed border-gray-medium" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "font-bold text-sm leading-tight", children: "\uC751\uC2DC\uC790 \uC720\uC758\uC0AC\uD56D" }), _jsxs("ul", { className: "list-outside list-decimal ml-4 font-medium text-2xs", children: [_jsxs("li", { className: "mb-1", children: ["\uB2E4\uC74C\uC758 \uBB3C\uD488\uC744 \uAF2D \uC900\uBE44\uD574\uC8FC\uC138\uC694:", _jsx("br", {}), " \uCEF4\uD4E8\uD130\uC6A9 \uC0AC\uC778\uD39C / \uC218\uC815 \uD14C\uC774\uD504 / \uC218\uD5D8\uD45C / \uAC80\uC815 \uBCFC\uD39C"] }), _jsxs("li", { className: "mb-1", children: ["\uACE0\uC0AC\uC7A5 \uC704\uCE58\uB97C \uBBF8\uB9AC \uD655\uC778\uD574\uC8FC\uC138\uC694:", _jsx("br", {}), " \uC218\uD5D8\uD45C\uC5D0 \uAE30\uC7AC\uB41C \uACE0\uC0AC\uC7A5, \uACE0\uC0AC\uC2E4 \uC815\uBCF4\uB97C \uD655\uC778\uD574\uC8FC\uC138\uC694."] }), _jsxs("li", { children: ["\uD559\uBD80\uBAA8 \uCD9C\uC785 \uD1B5\uC81C:", _jsx("br", {}), "\uACE0\uC0AC\uC2E4 \uB0B4\uBD80\uC5D0\uB294 \uD559\uBD80\uBAA8\uC758 \uCD9C\uC785\uC774 \uC5C4\uACA9\uD788 \uD1B5\uC81C\uB429\uB2C8\uB2E4."] })] })] })] })] }));
 }
 export default forwardRef(TicketDesign);

package/layout/template/Transcript/design/Transcript.d.ts

@@ -119,7 +119,7 @@ export interface TranscriptAdvancedProps {
             part6: string;
         };
     };
-    occupationalCompetencies: OccupationalCompetency[];
+    oci: OccupationalCompetency[];
 }
 export declare const example: TranscriptAdvancedProps;
 export {};

package/layout/template/Transcript/design/Transcript.design.js

@@ -24,6 +24,8 @@ export function getStringfromType(ExamType) {
 }
 function TranscriptDesign({ props }, ref) {
     const { info, result, data } = props;
+    const section1Data = SectionBarGraphProps("section1", data.analysis.user.section1, 50, data.script.section1, undefined, 10, data.analysis.nationalAverage.section1);
+    const section2Data = SectionBarGraphProps("section2", data.analysis.user.section2, 50, data.script.section2, undefined, 10, data.analysis.nationalAverage.section2);
     const container = {
         printSize: paperSize.a4,
         backgrounds: "print:bg-white",
@@ -36,6 +38,17 @@ function TranscriptDesign({ props }, ref) {
         spacings: "px-5 py-2",
         backgrounds: "bg-gradient-to-r from-crimson-burgundy to-green-dark",
     };
-    return (_jsxs("div", { ref: ref, className: cn(container), children: [_jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "images/logos/logo-tosel-white.svg", alt: "", className: "h-10" }), _jsxs("div", { className: "text-white font-bold text-base", children: [getStringfromType(info.examType), " \uC131\uC801\uD45C"] })] }), _jsx(IdCard, { info: info }), _jsxs("div", { className: "flex flex-col gap-5 xs:flex-row mt-5 items-stretch", children: [_jsx(ResultGaugeCard, { result: result, theme: "green" }), _jsx(HonorCard, { result: result })] }), _jsx(PerformanceCard, { data: data, info: info }), _jsx(ScoreCard, { data: data }), _jsx(BarCardRow, { data: data, theme: "green" })] }));
+    return (_jsxs("div", { ref: ref, className: cn(container), children: [_jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "images/logos/logo-tosel-white.svg", alt: "", className: "h-10" }), _jsxs("div", { className: "text-white font-bold text-base", children: [getStringfromType(info.examType), " \uC131\uC801\uD45C"] })] }), _jsx(IdCard, { info: info }), _jsxs("div", { className: "flex flex-col gap-5 xs:flex-row mt-5 items-stretch", children: [_jsx(ResultGaugeCard, { result: result, theme: "green" }), _jsx(HonorCard, { result: result })] }), _jsx(PerformanceCard, { data: data, info: info }), _jsx(ScoreCard, { data: data }), _jsx(BarCardRow, { section1: section1Data, section2: section2Data, theme: "green" })] }));
 }
 export default forwardRef(TranscriptDesign);
+function SectionBarGraphProps(title, score, total, script, subScripts, scale, subScore) {
+    return {
+        title: title,
+        score: score,
+        subScore: subScore,
+        total: total,
+        scale: scale,
+        script: script,
+        subScripts: subScripts,
+    };
+}

package/layout/template/Transcript/design/Transcript.js

@@ -1,24 +1,44 @@
 export const example = {
     info: {
         name: "조철봉",
-        birthday: '1999-11-11',
+        birthday: "1999-11-11",
         code: "123456789012",
         gender: "MAIL",
-        examDate: '2024-11-06',
+        examDate: "2024-11-06",
         examName: "AD 정기시험",
         examType: "REG",
         examValidAt: "2024-11-07",
-        level: "AD"
+        level: "AD",
     },
     score: {
-        average: { part1: 100, part2: 100, part3: 10, part4: 1, part5: 200, part6: 200, part7: 20, part8: 2 },
-        result: { part1: 50, part2: 120, part3: 40, part4: 0, part5: 100, part6: 220, part7: 70, part8: 2 },
-        section1: { script: "Your scaled score is between...",
-            details: ["asd", 'qwe', 'zxc']
+        average: {
+            part1: 100,
+            part2: 100,
+            part3: 10,
+            part4: 1,
+            part5: 200,
+            part6: 200,
+            part7: 20,
+            part8: 2,
+        },
+        result: {
+            part1: 50,
+            part2: 120,
+            part3: 40,
+            part4: 0,
+            part5: 100,
+            part6: 220,
+            part7: 70,
+            part8: 2,
+        },
+        section1: {
+            script: "Your scaled score is between...",
+            details: ["asd", "qwe", "zxc"],
+        },
+        section2: {
+            script: "Your scaled score is between...",
+            details: ["123", "456", "789"],
         },
-        section2: { script: "Your scaled score is between...",
-            details: ["123", '456', '789']
-        }
     },
     lswr: {
         average: { listening: 55, speaking: 59, reading: 51, writing: 53 },
@@ -28,10 +48,14 @@ export const example = {
         readingScript: { part7: "asd", part8: "qwe" },
         writingScript: { part5: "asd", part6: "qwe" },
     },
-    occupationalCompetencies: [
+    oci: [
         { category: "Communicative Competency (CC)", average: 0.25, result: 0.75 },
-        { category: "Problem-Solving Competency (PS)", average: 0.35, result: 0.90 },
-        { category: "Interpersonal/Social Competency (IS)", average: 0.45, result: 0.68 },
+        { category: "Problem-Solving Competency (PS)", average: 0.35, result: 0.9 },
+        {
+            category: "Interpersonal/Social Competency (IS)",
+            average: 0.45,
+            result: 0.68,
+        },
     ],
 };
 example.lswr.result.listening;

package/layout/template/Transcript/design/TranscriptAdvanced.design.d.ts

@@ -1,5 +1,5 @@
-import { TranscriptProps } from "./Transcript";
+import { TranscriptAdvancedProps } from "./Transcript";
 declare const _default: import("react").ForwardRefExoticComponent<{
-    props: TranscriptProps;
+    props: TranscriptAdvancedProps;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;

package/layout/template/Transcript/design/TranscriptAdvanced.design.js

@@ -5,7 +5,25 @@ import { cn } from "../../../../util";
 import IdCard from "./organism/IdCard";
 import { BarCardCol } from "./organism/BarCardCol";
 function TranscriptDesign({ props }, ref) {
-    const { info, result, data } = props;
+    const { info, score, lswr, oci } = props;
+    const section1Score = score.result.part1 +
+        score.result.part2 +
+        score.result.part3 +
+        score.result.part4;
+    const section2Score = score.result.part5 +
+        score.result.part6 +
+        score.result.part7 +
+        score.result.part8;
+    const section1Average = score.average.part1 +
+        score.average.part2 +
+        score.average.part3 +
+        score.average.part4;
+    const section2Average = score.average.part5 +
+        score.average.part6 +
+        score.average.part7 +
+        score.average.part8;
+    const section1Data = SectionBarGraphProps("Listening & Speaking", section1Score, 495, score.section1.script, score.section1.details, 100, section1Average);
+    const section2Data = SectionBarGraphProps("Reading & Writing", section2Score, 495, score.section2.script, score.section2.details, 100, section2Average);
     const container = {
         printSize: paperSize.a4,
         backgrounds: "print:bg-white",
@@ -18,6 +36,17 @@ function TranscriptDesign({ props }, ref) {
         spacings: "px-5 py-2",
         backgrounds: "bg-gradient-to-r from-crimson-burgundy to-green-dark",
     };
-    return (_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, { data: data, theme: "red" })] }));
+    return (_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" })] }));
+}
+function SectionBarGraphProps(title, score, total, script, subScripts, scale, subScore) {
+    return {
+        title: title,
+        score: score,
+        subScore: subScore,
+        total: total,
+        scale: scale,
+        script: script,
+        subScripts: subScripts,
+    };
 }
 export default forwardRef(TranscriptDesign);

package/layout/template/Transcript/design/atom/CardTitle.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from "../../Theme";
+import { Theme } from "../../interface";
 export default function CardTitle({ title, theme, }: {
     title: string;
     theme: Theme;

package/layout/template/Transcript/design/molecule/BarGraph.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from "../../Theme";
+import { Theme } from "../../interface";
 interface SectionBarProps {
     title: string;
     score: number;

package/layout/template/Transcript/design/molecule/CircularGauge.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from "../../Theme";
+import { Theme } from "../../interface";
 interface GaugeProps {
     score: number;
     maxScore: number;

package/layout/template/Transcript/design/organism/BarCardCol.d.ts

@@ -1,6 +1,8 @@
-import { Theme } from "../../Theme";
-import { TranscriptProps } from "../Transcript";
-export declare function BarCardCol({ data, theme, }: {
-    data: TranscriptProps["data"];
+import { SectionBarProps, Theme } from "../../interface";
+interface BarCardColProps {
+    section1: SectionBarProps;
+    section2: SectionBarProps;
     theme: Theme;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function BarCardCol({ section1, section2, theme }: BarCardColProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Transcript/design/organism/BarCardCol.js

@@ -3,7 +3,7 @@ import { cn } from "../../../../../util";
 import CardTitle from "../atom/CardTitle";
 import { printBoxStyles } from "../atom/PrintBoxStyles";
 import { BarGraph } from "../molecule/BarGraph";
-export function BarCardCol({ data, theme, }) {
+export function BarCardCol({ section1, section2, theme }) {
     const cardWrapper = {
         displays: "flex flex-col relative",
         sizes: "w-full rounded-lg overflow-hidden",
@@ -16,9 +16,15 @@ export function BarCardCol({ data, theme, }) {
     };
     const ScriptStyles = {
         displays: "flex justify-center items-center align-center",
-        spacings: "p-5",
+        spacings: "px-5",
         sizes: "w-full h-full",
         textStyles: "text-sm break-keep",
     };
-    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), children: [_jsx(CardTitle, { title: "Grade and Average Score", theme: theme }), _jsxs("div", { className: "flex sm:flex-row flex-col sm:mt-0 mt-5", children: [_jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: "section1", score: data.analysis.user.section1, total: 50, subScore: data.analysis.nationalAverage.section1, scale: 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles), children: data.script.section1 })] }), _jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: "section2", score: data.analysis.user.section2, total: 50, subScore: data.analysis.nationalAverage.section2, scale: 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles), children: data.script.section2 })] })] })] }));
+    const subScriptStyles = {
+        listStyles: "list-disc list-inside",
+        sizes: "w-full",
+        spacings: "p-5",
+        textStyles: "leading-tight text-xs",
+    };
+    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), children: [_jsx(CardTitle, { title: "Grade and Average Score", theme: theme }), _jsxs("div", { className: "flex sm:flex-row flex-col sm:mt-0 mt-5", children: [_jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: section1.title ? section1.title : "section1", score: section1.score, total: section1.total, subScore: section1.subScore, scale: section1.scale ? section1.scale : 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles), children: section1.script }), _jsx("div", { className: cn(subScriptStyles), children: section1.subScripts?.map((text, index) => (_jsx("li", { children: text }, index))) })] }), _jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: section2.title ? section2.title : "section2", score: section2.score, total: section2.total, subScore: section2.subScore, scale: section2.scale ? section2.scale : 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles), children: section2.script }), _jsx("div", { className: cn(subScriptStyles), children: section2.subScripts?.map((text, index) => (_jsx("li", { children: text }, index))) })] })] })] }));
 }

package/layout/template/Transcript/design/organism/BarCardRow.d.ts

@@ -1,6 +1,8 @@
-import { Theme } from "../../Theme";
-import { TranscriptProps } from "../Transcript";
-export declare function BarCardRow({ data, theme, }: {
-    data: TranscriptProps["data"];
+import { SectionBarProps, Theme } from "../../interface";
+interface BarCardColProps {
+    section1: SectionBarProps;
+    section2: SectionBarProps;
     theme: Theme;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function BarCardRow({ section1, section2, theme }: BarCardColProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/layout/template/Transcript/design/organism/BarCardRow.js

@@ -3,7 +3,7 @@ import { cn } from "../../../../../util";
 import CardTitle from "../atom/CardTitle";
 import { printBoxStyles } from "../atom/PrintBoxStyles";
 import { BarGraph } from "../molecule/BarGraph";
-export function BarCardRow({ data, theme, }) {
+export function BarCardRow({ section1, section2, theme }) {
     const cardWrapper = {
         displays: "flex flex-col relative",
         sizes: "w-full rounded-lg overflow-hidden",
@@ -16,9 +16,15 @@ export function BarCardRow({ data, theme, }) {
     };
     const ScriptStyles = {
         displays: "flex justify-center items-center align-center",
-        spacings: "p-5",
+        spacings: "px-5",
         sizes: "w-full h-full",
         textStyles: "text-sm break-keep",
     };
-    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), children: [_jsx(CardTitle, { title: "Grade and Average Score", theme: theme }), _jsxs("div", { className: "flex flex-col sm:mt-0 mt-5", children: [_jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: "section1", score: data.analysis.user.section1, total: 50, subScore: data.analysis.nationalAverage.section1, scale: 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles), children: data.script.section1 })] }), _jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: "section2", score: data.analysis.user.section2, total: 50, subScore: data.analysis.nationalAverage.section2, scale: 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles), children: data.script.section2 })] })] })] }));
+    const subScriptStyles = {
+        listStyles: "list-disc list-inside",
+        sizes: "w-full",
+        spacings: "p-5",
+        textStyles: "leading-tight text-xs",
+    };
+    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), children: [_jsx(CardTitle, { title: "Grade and Average Score", theme: theme }), _jsxs("div", { className: "flex flex-col sm:mt-0 mt-5", children: [_jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: section1.title ? section1.title : "section1", score: section1.score, total: section1.total, subScore: section1.subScore, scale: section1.scale ? section1.scale : 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles), children: section1.script })] }), _jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: section2.title ? section2.title : "section2", score: section2.score, total: section2.total, subScore: section2.subScore, scale: section2.scale ? section2.scale : 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles), children: section2.script })] })] })] }));
 }

package/layout/template/Transcript/design/organism/IdCard.js

@@ -26,7 +26,7 @@ export default function IdCard({ info }) {
         displays: "shrink-0 hidden sm:block relative overflow-hidden",
         sizes: "h-30 p-2 aspect-square rounded-lg",
         textStyles: "text-jr-blue",
-        backgrounds: "print:border-2 print:border-green-dark",
+        backgrounds: info.qrSrc && "print:border-2 print:border-green-dark",
         groupAction: info.qrSrc && "group duration-300 hover:scale-110 bg-white",
     };
     const copyButtonWrapper = {

package/layout/template/Transcript/design/organism/ResultGaugeCard.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from "../../Theme";
+import { Theme } from "../../interface";
 import { TranscriptProps } from "../Transcript";
 export default function ResultGaugeCard({ result, theme, }: {
     result: TranscriptProps["result"];

package/layout/template/Transcript/index.d.ts

@@ -5,7 +5,7 @@ declare const Transcript: {
         props: import("./design/Transcript").TranscriptProps;
     } & import("react").RefAttributes<HTMLDivElement>>;
     AdvancePaper: import("react").ForwardRefExoticComponent<{
-        props: import("./design/Transcript").TranscriptProps;
+        props: import("./design/Transcript").TranscriptAdvancedProps;
     } & import("react").RefAttributes<HTMLDivElement>>;
 };
 export default Transcript;

package/layout/template/Transcript/interface.d.ts

@@ -0,0 +1,10 @@
+export type Theme = "green" | "red";
+export interface SectionBarProps {
+    title: string;
+    score: number;
+    subScore?: number;
+    total: number;
+    scale?: number;
+    script: string | string[];
+    subScripts?: string[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.200",
+  "version": "1.0.201",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/tailwind.config.ts

@@ -37,6 +37,10 @@ export default {
         green: "0 0px 10px 0px rgba(16, 86, 82, 0.38)",
       },
       keyframes: {
+        smallBounce: {
+          "0%, 100%": { transform: "translateY(-5%)" },
+          "50%": { transform: "translateY(0)" },
+        },
         grow: {
           "0%": { height: "60px" },
           "100%": { height: "120px" },
@@ -71,6 +75,7 @@ export default {
       animation: {
         grow: "grow 0.2s ease-in-out forwards",
         shrink: "shrink 0.2s ease-in-out forwards",
+        smallBounce: "smallBounce 1s infinite",
       },
 
       colors: {

package/version.txt

@@ -1 +1 @@
-1.0.200
+1.0.201

package/layout/template/Transcript/Theme.d.ts

@@ -1 +0,0 @@
-export type Theme = "green" | "red";