@edu-tosel/design 1.0.200 → 1.0.202

package/layout/index.d.ts

@@ -17,10 +17,10 @@ export { default as Shelf } from "./template/Shelf";
 export { default as Tab } from "./template/Tab";
 export { default as TextBox } from "./template/TextBox";
 export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
-export { default as Gomito } from "./template/Gomito";
 export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
 export { default as BooksLayout } from "./template/Books/Books.layout";
 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

@@ -17,10 +17,10 @@ export { default as Shelf } from "./template/Shelf";
 export { default as Tab } from "./template/Tab";
 export { default as TextBox } from "./template/TextBox";
 export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
-export { default as Gomito } from "./template/Gomito";
 export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
 export { default as BooksLayout } from "./template/Books/Books.layout";
 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/BarGraph.js

@@ -6,6 +6,9 @@ export function BarGraph({ score, subScore, total, title, scale, theme, }) {
     const isLoaded = usePageLoaded();
     const [currentWidth, setCurrentWidth] = useState(0);
     const widthPercentage = (score / total) * 100;
+    const scalePercentage = scale && typeof scale === "number"
+        ? ((Math.floor(total / scale) * scale * 100) / total).toFixed(0)
+        : undefined;
     const subScorePercentage = subScore ? (subScore / total) * 100 : undefined;
     useEffect(() => {
         if (isLoaded) {
@@ -67,7 +70,10 @@ export function BarGraph({ score, subScore, total, title, scale, theme, }) {
                                     width: `${widthPercentage}%`,
                                 } }) }), _jsx("div", { className: cn(barFill, "opacity-100 print:opacity-0"), style: {
                                 width: `${currentWidth}%`,
-                            } }), _jsx("div", { className: cn(graphTitle), children: title })] }), _jsx("div", { className: "absolute flex w-full h-full justify-between items-center p-5 text-sm text-gray-medium -translate-y-5", children: scaleTicks && scaleTicks.map((tick) => _jsx("div", { children: tick }, tick)) }), _jsx("div", { className: "absolute flex w-full h-full justify-start items-center", style: {
+                            } }), _jsx("div", { className: cn(graphTitle), children: title })] }), _jsx("div", { className: "absolute -right-1 text-gray-medium font-medium text-xs", children: total }), _jsx("div", { className: cn("absolute left-0 flex flex-row h-full justify-between items-center text-sm text-gray-medium -translate-y-5 p-5"), style: {
+                        width: `${scalePercentage}%`,
+                    }, children: scaleTicks &&
+                        scaleTicks.map((tick) => (_jsxs("div", { className: "w-0 relative text-xs", children: [tick != total && (_jsx("div", { className: "absolute left-3 -top-2", children: tick })), !(tick == 0 || tick == total) && (_jsx("div", { className: "absolute left-2 -top-1 h-4 w-[1px] bg-gray-medium/20" }))] }, tick))) }), _jsx("div", { className: "absolute flex w-full h-full justify-start items-center", style: {
                         transform: `translateX(${widthPercentage}%)`,
                     }, children: _jsx("div", { className: cn(scoreTag), children: score.toFixed(1) }) }), subScore && (_jsx("div", { className: "absolute flex w-full h-full justify-start items-center", style: {
                         transform: `translateX(${subScorePercentage}%)`,

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",
@@ -20,5 +20,11 @@ export function BarCardRow({ data, theme, }) {
         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:my-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 = {
@@ -53,5 +53,5 @@ export default function IdCard({ info }) {
             : "rounded-md w-full h-full",
         printOptions: "print:w-fit print:h-fit print:px-2 print:py-1",
     };
-    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: [!info.qrSrc && (_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: "" }) })), info.qrSrc && (_jsxs(_Fragment, { children: [_jsx(QRCode, { value: info.qrSrc, className: "w-full h-full" }), _jsx("div", { className: "absolute top-0 left-0 w-full h-full flex justify-center items-center ", children: _jsx("img", { src: "/images/img-favicon-main.png", alt: "", className: "size-8" }) }), _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: [_jsx("img", { src: info.imgSrc, alt: "", className: "object-cover w-full h-auto" }), _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") }) }) }))] })] }));
+    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: [!info.qrSrc && (_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: "" }) })), info.qrSrc && (_jsxs(_Fragment, { children: [_jsx(QRCode, { value: info.qrSrc, className: "w-full h-full" }), _jsx("div", { className: "absolute top-0 left-0 w-full h-full flex justify-center items-center ", children: _jsx("img", { src: "/images/img-favicon-main.png", alt: "", className: "size-8" }) }), _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: [_jsx("img", { src: info.imgSrc, alt: "", className: "object-cover w-auto 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") }) }) }))] })] }));
 }

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.202",
   "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/text/LineBreaks.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function LineBreaks({ texts, className, }) {
     const strings = typeof texts === "string"

package/version.txt

@@ -1 +1 @@
-1.0.200
+1.0.202

package/layout/template/Gomito.d.ts

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

package/layout/template/Gomito.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function Gomito() {
-    return (_jsxs("div", { className: "max-w-[796px] bg-[#F6F6F6] p-6 m-0 h-auto w-full rounded-2xl sm:p-16 break-keep", children: [_jsxs("div", { className: "flex flex-row items-center", children: [_jsx("div", { className: "w-16", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/img-icon-KU.png", alt: "", className: "object-cover" }) }), _jsxs("div", { children: [_jsx("div", { className: "text-sm text-black break-keep", children: "\uACE0\uB824\uB300\uD559\uAD50 | \uBBF8\uB798\uAD50\uC721\uC6D0" }), _jsx("div", { className: "text-2xl text-red-800 font-bold", children: "\uD1A0\uC140 \uC804\uBB38\uAC00 \uACFC\uC815" })] })] }), _jsxs("div", { className: "flex flex-col-reverse sm:flex-row ", children: [_jsxs("div", { className: "text-base w-full h-fit mt-0 rounded-lg bg-stone-200 p-4 sm:w-80 sm:flex-none sm:mt-6", children: [_jsxs("div", { className: "flex flex-row p-1", children: [_jsx("div", { className: "text-red-800 font-bold text-sm sm:text-base", children: "\uB300\uC0C1" }), _jsx("div", { className: "ml-4 text-stone-500 font-bold text-sm sm:text-base", children: "\uD1A0\uC140 \uB7A9 \uC9C0\uC815\uAD50\uC721\uAE30\uAD00 / \uD76C\uB9DD\uAE30\uAD00 \uD559\uC6D0\uC7A5 \uBC0F \uC18C\uC18D \uAC15\uC0AC\uC9C4" })] }), _jsxs("div", { className: "flex flex-row p-1", children: [_jsx("div", { className: "text-red-800 font-bold text-sm sm:text-base", children: "\uD61C\uD0DD" }), _jsxs("div", { className: "ml-4 text-stone-500 font-bold text-sm sm:text-base", children: [_jsx("div", { children: "\uACE0\uB824\uB300\uD559\uAD50 \uCD1D\uC7A5 \uBC0F \uBBF8\uB798\uAD50\uC721\uC6D0\uC7A5 \uBA85\uC758 \uC218\uB8CC\uC99D \uBC1C\uAE09" }), _jsx("div", { children: "\uB2E4\uC591\uD55C \uAE30\uAD00 \uBC0F \uAD50\uC218\uC9C4\uACFC\uC758 \uB124\uD2B8\uC6CC\uD06C" })] })] }), _jsxs("div", { className: "flex flex-row p-1", children: [_jsx("div", { className: "text-red-800 font-bold text-sm sm:text-base", children: "\uBAA9\uC801" }), _jsx("div", { className: "ml-4 text-stone-500 font-bold text-sm sm:text-base", children: "TOSEL \uAD50\uC721\uACFC\uC815\uC744 \uAE30\uBC18\uC73C\uB85C \uD55C \uC601\uC5B4\uAD50\uC721 \uC804\uBB38\uAC00 \uC591\uC131" })] })] }), _jsx("div", { className: "w-auto block ml-4 sm:w-full", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/img-gomito-teacher.png", alt: "\uC2A4\uD53C\uD0B9\uC2DC\uB9AC\uC988\uC774\uBBF8\uC9C0" }) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xl font-bold text-red-800 mt-8", children: "\uC65C \uD1A0\uC140\uC5D0\uC11C \uBC30\uC6CC\uC57C \uD560\uAE4C\uC694?" }), _jsx("div", { className: "text-sm font-medium text-stone-500 mt-1 sm:text-base", children: "20\uB144\uAC04 \uC601\uC5B4\uD3C9\uAC00\uC2DC\uC7A5\uC744 \uC120\uB3C4\uD574\uC628 \uD1A0\uC140\uC740 \uCD95\uC801\uB41C \uB370\uC774\uD130\uB97C \uAE30\uBC18\uC73C\uB85C \uC218\uC900 \uB192\uC740 \uC218\uC5C5\uC744 \uC81C\uACF5\uD569\uB2C8\uB2E4" }), _jsx("div", { className: "text-sm font-medium text-stone-500 mt-1 sm:text-base", children: "\uB0A8\uB2E4\uB978 \uAD00\uC810\uC73C\uB85C, \uD1A0\uC140 \uCEE8\uD150\uCE20\uB97C \uD65C\uC6A9\uD560 \uC218 \uC788\uB294 \uD655\uC2E4\uD55C \uBC29\uBC95\uC744 \uC54C\uB824\uB4DC\uB9BD\uB2C8\uB2E4" }), _jsx("div", { className: "w-full h-fit overflow-hidden rounded-xl mt-8", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/img-koreauniversity.png", alt: "" }) }), _jsx("div", { className: "text-xl font-bold text-red-800 mt-8", children: "\uB0A8\uB2E4\uB978 \uD1A0\uC140\uC758 \uD61C\uD0DD" }), _jsx("div", { className: "text-sm font-medium text-stone-500 mt-1 sm:text-base", children: "\uACE0\uB824\uB300\uD559\uAD50 \uBBF8\uB798\uAD50\uC721\uC6D0\uACFC \uD568\uAED8\uD558\uB294 TOSEL \uC804\uBB38\uAC00 \uACFC\uC815" }), _jsx("div", { className: "text-sm font-medium text-stone-500 mt-1 sm:text-base", children: "\uCC38\uC5EC\uD558\uBA74 \uC774\uB7F0 \uD61C\uD0DD\uC774 \uC788\uC5B4\uC694" }), _jsxs("div", { className: "flex flex-wrap w-full gap-4 mt-4", children: [_jsxs("div", { className: "flex-1 bg-stone-200 min-w-60 h-30 p-4 rounded-lg flex flex-row border-2 border-stone-300", children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "size-6 stroke-stone-800", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418" }) }) }), _jsxs("div", { className: "flex flex-col ml-4 text-stone-500", children: [_jsx("div", { className: "font-bold text-base text-stone-800 sm:text-lg", children: "\uB2E4\uC591\uD55C \uB124\uD2B8\uC6CC\uD0B9 \uAE30\uD68C" }), _jsx("div", { className: "font-medium text-sm mt-2", children: "\uAD50\uC218\uC9C4, \uAC01 \uAE30\uAD00\uACFC\uC758 \uB124\uD2B8\uC6CC\uD0B9 \uAE30\uD68C\uAC00 \uC8FC\uC5B4\uC9D1\uB2C8\uB2E4." })] })] }), _jsxs("div", { className: "flex-1 bg-stone-200 min-w-60 h-30 p-4 rounded-lg flex flex-row border-2 border-stone-300", children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "size-6 stroke-stone-800", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" }) }) }), _jsxs("div", { className: "flex flex-col ml-4 text-stone-500", children: [_jsx("div", { className: "font-bold text-base text-stone-800 sm:text-lg", children: "\uACF5\uC2E0\uB825 \uAC15\uD654" }), _jsx("div", { className: "font-medium text-sm mt-2", children: "\uACE0\uB824\uB300\uD559\uAD50 \uCD1D\uC7A5 \uBA85\uC758\uC758 \uC218\uB8CC\uC99D\uC774 \uBC1C\uAE09\uB429\uB2C8\uB2E4." })] })] }), _jsxs("div", { className: "flex-1 bg-stone-200 min-w-60 h-30 p-4 rounded-lg flex flex-row border-2 border-stone-300", children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "size-6 stroke-stone-800", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" }) }) }), _jsxs("div", { className: "flex flex-col ml-4 text-stone-500", children: [_jsx("div", { className: "font-bold text-base text-stone-800 sm:text-lg", children: "\uC601\uC5B4 \uAD50\uC721 \uCEE4\uB9AC\uD058\uB7FC" }), _jsx("div", { className: "font-medium text-sm mt-2", children: "\uD1A0\uC140 \uCEE8\uD150\uCE20\uB97C \uD65C\uC6A9\uD560 \uC218 \uC788\uB294 \uCEE4\uB9AC\uD058\uB7FC\uC744 \uBC30\uC6B8 \uC218 \uC788\uC2B5\uB2C8\uB2E4" })] })] }), _jsxs("div", { className: "flex-1 bg-stone-200 min-w-60 h-30 p-4 rounded-lg flex flex-row border-2 border-stone-300", children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", stroke: "currentColor", className: "size-6 stroke-stone-800", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" }) }) }), _jsxs("div", { className: "flex flex-col ml-4 text-stone-500", children: [_jsx("div", { className: "font-bold text-base text-stone-800 sm:text-lg", children: "\uC804\uBB38\uC9C0\uC2DD \uC2B5\uB4DD" }), _jsx("div", { className: "font-medium text-sm mt-2", children: "\uC77C\uBC18\uC801 \uC601\uC5B4\uAD50\uC218\uBC95\uC5D0 \uB300\uD55C \uC804\uBB38\uC9C0\uC2DD\uC744 \uAC15\uD654\uD569\uB2C8\uB2E4" })] })] })] }), _jsx("div", { className: "text-xl font-bold text-red-800 mt-8", children: "\uC9C0\uAE08 \uBC14\uB85C \uC2E0\uCCAD\uD558\uC138\uC694" }), _jsx("div", { className: "text-sm font-medium text-stone-500 mt-1 sm:text-base", children: "9\uC6D4\uC5D0 \uAC1C\uAC15\uD558\uB294 \uC804\uBB38\uAC00 \uACFC\uC815\uC5D0 \uC9C0\uC6D0\uAC00\uB2A5\uD574\uC694" }), _jsxs("div", { className: "w-full h-fit p-4 bg-red-800 rounded-lg mt-4 flex flex-col gap-2", children: [_jsxs("div", { className: "flex flex-row gap-4", children: [_jsx("div", { className: "text-base text-white font-bold", children: "\uC804\uD615\uAE30\uAC04" }), _jsx("div", { className: "text-base text-white", children: "2024\uB144 8\uC6D4 24\uC77C\uAE4C\uC9C0" })] }), _jsxs("div", { className: "flex flex-row gap-4", children: [_jsx("div", { className: "text-base text-white font-bold", children: "\uC804\uD615\uBC29\uBC95" }), _jsx("div", { className: "text-base text-white", children: "\uC11C\uB958 \uBC0F \uBA74\uC811\uC804\uD615" })] }), _jsxs("div", { className: "flex flex-row gap-4", children: [_jsx("div", { className: "text-base text-white font-bold", children: "\uD569\uACA9\uC790 \uBC1C\uD45C" }), _jsx("div", { className: "text-base text-white", children: "2024\uB144 8\uC6D4 26\uC77C" })] })] }), _jsx("div", { className: "text-xs mt-1 text-red-800", children: "*\uC815\uC6D0\uCDA9\uC871\uC5D0 \uB530\uB77C \uCC28\uD6C4 \uAC1C\uAC15 \uC5EC\uBD80\uAC00 \uACB0\uC815\uB420 \uC218 \uC788\uC2B5\uB2C8\uB2E4" }), _jsx("div", { className: "text-sm mt-4 text-red-800 text-center p-4 bg-stone-200 rounded-lg", children: "\uAD00\uB828\uBB38\uC758: tosel_lab@tosel.co.kr" })] })] }));
-}

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

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