@edu-tosel/design 1.0.187 → 1.0.189

package/_test/interface/Property.d.ts

@@ -1,3 +1,3 @@
 export type Status = "waiting" | "doing" | "done";
-export type Level = "" | "PS" | "ST" | "BA" | "JR" | "HJ" | "AD";
+export type Level = "" | "CC" | "PS" | "ST" | "BA" | "JR" | "HJ" | "AD";
 export declare const LevelString: Record<Level, string>;

package/_test/interface/Property.js

@@ -1,5 +1,6 @@
 export const LevelString = {
     "": "None",
+    CC: "CoCoon",
     PS: "Pre-Starter",
     ST: "Starter",
     BA: "Basic",

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

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

package/layout/template/Transcript/Theme.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,12 +1,13 @@
 import { TranscriptProps } from "./Transcript";
-import { Level as NarrowLevel } from "../../../../_test/interface";
-type Level = Exclude<NarrowLevel, ""> | "CC";
+export declare const EXAM_TYPE: {
+    readonly REG: "REG";
+    readonly CMP: "CMP";
+    readonly IST: "IST";
+    readonly OLY: "OLY";
+};
+export type EXAM_TYPE = (typeof EXAM_TYPE)[keyof typeof EXAM_TYPE];
+export declare function getStringfromType(ExamType: EXAM_TYPE): string;
 declare const _default: import("react").ForwardRefExoticComponent<{
     props: TranscriptProps;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;
-export declare const LevelToStyleMap: Record<Level, {
-    name: string;
-    bgcolor: string;
-    textcolor: string;
-}>;

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

@@ -1,14 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { paperSize } from "../../../../style/size";
-import { LineBreaks } from "../../../../text";
 import { cn } from "../../../../util";
-import SVG from "../../../../asset/SVG";
-import { useResponsive } from "../../../../hook";
-import { ResponsiveContainer, PieChart, Pie, Cell, } from "recharts";
-import IdCard, { getStringfromType } from "./atom/IdCard";
-import { printBoxStyles } from "./atom/PrintBoxStyles";
-import { BarCardRow } from "./Organism/BarCardRow";
+import IdCard from "./organism/IdCard";
+import { BarCardRow } from "./organism/BarCardRow";
+import ScoreCard from "./organism/ScoreCard";
+import HonorCard from "./organism/HonorCard";
+import ResultGaugeCard from "./organism/ResultGaugeCard";
+import PerformanceCard from "./organism/PerformanceCard";
+export const EXAM_TYPE = {
+    REG: "REG",
+    CMP: "CMP",
+    IST: "IST",
+    OLY: "OLY",
+};
+const examTypeMap = {
+    REG: "정기시험",
+    IST: "기관시험",
+    CMP: "경시대회",
+};
+export function getStringfromType(ExamType) {
+    return examTypeMap[ExamType] || "Unknown";
+}
 function TranscriptDesign({ props }, ref) {
     const { info, result, data } = props;
     const container = {
@@ -23,158 +36,6 @@ 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(ResultCard, { result: result }), _jsx(HonorCard, { result: result })] }), _jsx(PerformanceCard, { data: data, info: info }), _jsx(ScoreCard, { data: data }), _jsx(BarCardRow, { data: data })] }));
+    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" })] }));
 }
 export default forwardRef(TranscriptDesign);
-function ResultCard({ result }) {
-    const cardWrapper = {
-        displays: "flex flex-col self-auto flex-[2] md:flex-[1] overflow-hidden",
-        sizes: "w-full h-fit rounded-lg",
-        backgrounds: "bg-white shadow-main",
-        // animations: "duration-300 hover:scale-105 hover:shadow-green",
-    };
-    const cardTitle = {
-        display: "flex flex-row justify-center items-center",
-        sizes: "h-7 w-full",
-        bg: "bg-green-dark",
-        textStyles: "text-white font-medium text-sm",
-    };
-    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), children: [_jsxs("div", { className: cn(cardTitle), children: [_jsx("div", { className: "w-full text-center h-full flex justify-center items-center", children: "\uCDE8\uB4DD \uC810\uC218" }), _jsx("div", { className: "w-0.5 h-7 bg-white" }), _jsx("div", { className: "w-full text-center h-full flex justify-center items-center", children: "\uC778\uC99D \uB4F1\uAE09" })] }), _jsxs("div", { className: "flex flex-row gap-10 p-5", children: [_jsx(CircularGauge, { score: result.score, maxScore: 100, isGrade: false }), _jsx(CircularGauge, { score: result.grade, maxScore: 9, isGrade: true })] })] }));
-}
-const CircularGauge = ({ score, maxScore, isGrade }) => {
-    const pieStyles = {
-        cx: "50%",
-        cy: "50%",
-        innerRadius: "70%",
-        outerRadius: "90%",
-        cornerRadius: 6,
-        dataKey: "value",
-        nameKey: "name",
-    };
-    const cellStyles = {
-        stroke: "rgba(255, 255, 255, 0)",
-    };
-    const scoreText = {
-        displays: "absolute flex justify-center items-center",
-        positions: "top-0 left-0",
-        sizes: "w-full h-full",
-        textStyles: "font-bold text-gray-medium text-2xl",
-        printOptions: "print:text-gray-dark",
-    };
-    const preparePieChartData = () => {
-        const mainScore = score;
-        const remainingScore = maxScore - mainScore;
-        if (isGrade) {
-            return [
-                { name: "Score", value: remainingScore - 1 },
-                { name: "Grade", value: mainScore - 1 },
-            ];
-        }
-        else {
-            return [
-                { name: "Score", value: mainScore },
-                { name: "Remaining", value: remainingScore },
-            ];
-        }
-    };
-    return (_jsxs("div", { className: "w-full aspect-ratio-1/1 flex items-center justify-center relative", children: [_jsx("div", { className: "absolute top-0 left-0 w-full aspect-ratio-1/1", children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", aspect: 1, children: _jsx(PieChart, { children: _jsx(Pie, { data: [{ name: "Background", value: 100 }], cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "90%", fill: "rgba(128, 128, 128, 0.2)" // 회색 배경 색상
-                            , dataKey: "value", stroke: "rgb(255,255,255,0)", animationDuration: 0 }) }) }) }), _jsx("div", { className: "absolute top-0 left-0 w-full aspect-ratio-1/1 opacity-0 print:opacity-100", children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", aspect: 1, children: _jsx(PieChart, { children: _jsxs(Pie, { data: preparePieChartData(), ...pieStyles, animationDuration: 0, children: [_jsx(Cell, { fill: "#105652", ...cellStyles, style: {
-                                        filter: "drop-shadow(0px 3px 5px rgba(16, 86, 82, 0.38))",
-                                    } }), _jsx(Cell, { fill: "rgba(255, 255, 255, 0)", ...cellStyles })] }) }) }) }), _jsx(ResponsiveContainer, { width: "100%", height: "100%", aspect: 1, children: _jsx(PieChart, { children: _jsxs(Pie, { data: preparePieChartData(), ...pieStyles, children: [_jsx(Cell, { fill: "#105652", ...cellStyles, style: {
-                                    filter: "drop-shadow(0px 3px 5px rgba(16, 86, 82, 0.38))",
-                                } }), _jsx(Cell, { fill: "rgba(255, 255, 255, 0)", ...cellStyles })] }) }) }), _jsx("div", { className: cn(scoreText), children: score })] }));
-};
-function HonorCard({ result }) {
-    const cardWrapper = {
-        displays: "flex flex-col self-stretch flex-[1] relative",
-        sizes: "w-full rounded-lg overflow-hidden",
-        backgrounds: "bg-white shadow-main",
-        animations: "duration-300 hover:scale-105 hover:shadow-green",
-    };
-    const cardTitle = {
-        display: "flex flex-row justify-center items-center",
-        sizes: "h-7 shrink-0 w-full",
-        bg: "bg-green-light",
-        textStyles: "text-green-dark font-medium text-sm",
-    };
-    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), onClick: () => (window.location.href = `https://www.tosel.org/HallofFame/main`), children: [_jsx("div", { className: cn(cardTitle), children: _jsx("div", { className: "w-full text-center h-fit", children: "\uBA85\uC608\uC758 \uC804\uB2F9" }) }), _jsxs("div", { className: "w-full h-full flex flex-row px-5 gap-x-5", children: [_jsxs("div", { className: "flex flex-[1] flex-col w-full justify-center items-center xs:hidden md:flex", children: [_jsx("div", { className: "text-gray-dark font-bold text-xl", children: "\uBA85\uC608\uC758 \uC804\uB2F9" }), _jsx("div", { className: "text-gray-medium font-medium text-sm", children: "Hall of Fame" })] }), _jsx("div", { className: "flex w-full flex-[1] py-4 xs:py-0", children: _jsx(SVG.HallofFame, { isHonor: result.isHonor }) })] }), _jsx("div", { className: "pb-3 px-5 text-center text-xs", children: result.isHonor
-                    ? "축하합니다! 명예의 전당에 등재되었습니다"
-                    : "아쉽게도 명예의 전당에 오르지 못했습니다." })] }));
-}
-function PerformanceCard({ data, info, }) {
-    const cardWrapper = {
-        displays: "flex flex-col relative",
-        sizes: "w-full rounded-lg overflow-hidden",
-        backgrounds: "bg-white shadow-main",
-        sapcings: "mt-5",
-    };
-    const cardTitle = {
-        display: "flex flex-row justify-center items-center",
-        sizes: "h-7 shrink-0 w-full",
-        bg: "bg-green-light",
-        textStyles: "text-green-dark font-medium text-sm",
-    };
-    const scriptStyling = {
-        display: "justify-start items-start",
-        sizes: "w-full h-fit",
-        textStyles: "text-xs font-medium text-black break-keep",
-    };
-    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), children: [_jsx("div", { className: cn(cardTitle), children: _jsx("div", { className: "w-full text-center h-fit", children: "Performance Evaluation" }) }), _jsxs("div", { className: "w-full h-full flex flex-col gap-5 p-5", children: [_jsxs("div", { className: "flex flex-col flex-[3]", children: [_jsx(LineBreaks, { texts: data.script.performanceEvaluation, className: cn(scriptStyling) }), _jsx("div", { className: cn(scriptStyling, "text-green-dark"), children: "\uB098\uC758 \uC804\uAD6D \uC9C0\uD45C\uAC00 \uAD81\uAE08\uD558\uB2E4\uBA74? QR\uB85C \uC790\uC138\uD788 \uC54C\uC544\uBCF4\uC138\uC694!" })] }), _jsx("div", { className: "w-full flex flex-col flex-[2] justify-center items-center", children: _jsx(LevelRow, { transcriptLevel: info.level }) })] })] }));
-}
-function LevelRow({ transcriptLevel }) {
-    const levels = ["CC", "PS", "ST", "BA", "JR", "HJ", "AD"];
-    const isSM = useResponsive("sm");
-    return (_jsx("div", { className: "flex flex-row w-full h-fit justify-center items-center", children: levels.map((level) => {
-            const { name, bgcolor, textcolor } = LevelToStyleMap[level];
-            const isHighlighted = level === transcriptLevel;
-            return (_jsx("div", { className: `px-2 py-1 text-xs text-center font-medium $ ${isHighlighted
-                    ? "bg-green-dark text-white w-fit shrink-0 rounded-md"
-                    : "w-full text-green-dark/70"}`, children: isSM ? name : isHighlighted ? name : level }, level));
-        }) }));
-}
-function ScoreCard({ data }) {
-    const cellAnimation = {
-        animations: "hover:bg-green-light/50 hover:text-green-dark duration-300",
-    };
-    return (_jsx("div", { className: "overflow-auto w-full scrollbar-hidden rounded-lg mt-5 print:border print:border-gray-medium/70 cursor-default shadow-main print:shadow-none", children: _jsxs("div", { className: "min-w-[172mm] w-full", children: [_jsxs("div", { className: "flex bg-gradient-to-r from-green-dark to-crimson-burgundy text-white font-medium text-sm", children: [_jsx("div", { className: "text-center print:static sticky left-0 bg-green-dark p-2 flex-[3] font-black", children: "\uC131\uC801\uD45C" }), _jsx("div", { className: "p-2 flex-[2] text-center", children: "\uCD1D\uC810" }), _jsx("div", { className: "p-2 flex-[2] text-center", children: "\uB0B4 \uC810\uC218" }), _jsx("div", { className: "p-2 flex-[3] text-center", children: "\uC804\uAD6D\uD3C9\uADE0" }), _jsx("div", { className: "p-2 flex-[3] text-center", children: "\uC9C0\uC5ED\uD3C9\uADE0" }), _jsx("div", { className: "p-2 flex-[3] text-center", children: "\uB3D9\uC77C\uD559\uB144" }), _jsx("div", { className: "p-2 flex-[3] text-center", children: "10% \uD3C9\uADE0" }), _jsx("div", { className: "p-2 flex-[3] text-center", children: "30% \uD3C9\uADE0" })] }), _jsxs("div", { className: "flex bg-white/60 font-medium text-sm text-gray-medium ", children: [_jsx("div", { className: "sticky left-0 bg-white/90 p-2 flex-[3] text-center text-gray-dark border-green-dark border-r-1", children: "Section1" }), _jsx("div", { className: cn("p-2 flex-[2] text-center", cellAnimation), children: data.analysis.total.section1.toFixed(1) }), _jsx("div", { className: "p-2 flex-[2] text-center text-green-dark font-bold bg-green-light", children: data.analysis.user.section1.toFixed(1) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: data.analysis.nationalAverage.section1.toFixed(2) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: data.analysis.localAverage.section1.toFixed(2) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: data.analysis.ageAverage.section1.toFixed(2) }), _jsx("div", { className: "p-2 flex-[3] text-center border-green-dark border-l-1" }), _jsx("div", { className: "p-2 flex-[3] text-center" })] }), _jsxs("div", { className: "flex bg-white/60 font-medium text-sm text-gray-medium ", children: [_jsx("div", { className: "sticky left-0 bg-white/90 p-2 flex-[3] text-center text-gray-dark border-green-dark border-r-1", children: "Section2" }), _jsx("div", { className: cn("p-2 flex-[2] text-center", cellAnimation), children: data.analysis.total.section2.toFixed(1) }), _jsx("div", { className: "p-2 flex-[2] text-center text-green-dark font-bold bg-green-light", children: data.analysis.user.section2.toFixed(1) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: data.analysis.nationalAverage.section2.toFixed(2) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: data.analysis.localAverage.section2.toFixed(2) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: data.analysis.ageAverage.section2.toFixed(2) }), _jsx("div", { className: "p-2 flex-[3] text-center border-green-dark border-l-1 font-bold", children: data.analysis["10percentageAverage"].toFixed(2) }), _jsx("div", { className: "p-2 flex-[3] text-center font-bold", children: data.analysis["30percentageAverage"].toFixed(2) })] }), _jsxs("div", { className: "flex bg-white/60 font-medium text-sm text-gray-medium ", children: [_jsx("div", { className: "sticky left-0 bg-white/90 p-2 flex-[3] text-center text-gray-dark border-green-dark border-r-1", children: "total" }), _jsx("div", { className: cn("p-2 flex-[2] text-center", cellAnimation), children: (data.analysis.total.section1 + data.analysis.total.section2).toFixed(1) }), _jsx("div", { className: "p-2 flex-[2] text-center text-green-dark font-bold bg-green-light", children: (data.analysis.user.section1 + data.analysis.user.section2).toFixed(1) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: (data.analysis.nationalAverage.section1 +
-                                data.analysis.nationalAverage.section2).toFixed(2) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: (data.analysis.localAverage.section1 +
-                                data.analysis.localAverage.section2).toFixed(2) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: (data.analysis.ageAverage.section1 +
-                                data.analysis.ageAverage.section2).toFixed(2) }), _jsx("div", { className: "p-2 flex-[3] text-center border-green-dark border-l-1" }), _jsx("div", { className: "p-2 flex-[3] text-center " })] })] }) }));
-}
-export const LevelToStyleMap = {
-    CC: {
-        name: "Cocoon",
-        bgcolor: "bg-co-green-light",
-        textcolor: "text-co-green",
-    },
-    PS: {
-        name: "Pre-Starter",
-        bgcolor: "bg-ps-pink-light",
-        textcolor: "text-ps-pink",
-    },
-    ST: {
-        name: "Starter",
-        bgcolor: "bg-st-orange-light",
-        textcolor: "text-st-orange",
-    },
-    BA: {
-        name: "Basic",
-        bgcolor: "bg-ba-yellow-light",
-        textcolor: "text-ba-yellow",
-    },
-    JR: {
-        name: "Junior",
-        bgcolor: "bg-jr-blue-light",
-        textcolor: "text-jr-blue",
-    },
-    HJ: {
-        name: "High Junior",
-        bgcolor: "bg-hj-blue-light",
-        textcolor: "text-hj-blue",
-    },
-    AD: {
-        name: "Advanced",
-        bgcolor: "bg-gray-light",
-        textcolor: "text-gray-dark",
-    },
-};

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

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

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

@@ -1,10 +1,23 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { paperSize } from "../../../../style/size";
 import { cn } from "../../../../util";
-export default function TranscriptDesign() {
+import IdCard from "./organism/IdCard";
+import { BarCardCol } from "./organism/BarCardCol";
+function TranscriptDesign({ props }, ref) {
+    const { info, result, data } = props;
     const container = {
-        sizes: paperSize.a4,
-        backgrounds: "bg-white",
+        printSize: paperSize.a4,
+        backgrounds: "print:bg-white",
+        sizes: "w-full max-w-[210mm]",
+        textStyles: "break-keep",
     };
-    return _jsx("div", { className: cn(container), children: "asdf" });
+    const headerBox = {
+        display: "flex flex-row flex-wrap justify-between items-center",
+        sizes: "w-full h-fit rounded-md",
+        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" })] }));
 }
+export default forwardRef(TranscriptDesign);

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

@@ -1,3 +1,5 @@
-export declare function CardTitle({ title }: {
+import { Theme } from "../../Theme";
+export default function CardTitle({ title, theme, }: {
     title: string;
+    theme: Theme;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../../../../util";
-export function CardTitle({ title }) {
+export default function CardTitle({ title, theme, }) {
     const cardTitle = {
         display: "flex flex-row justify-center items-center",
         sizes: "h-7 shrink-0 w-full",
-        bg: "bg-green-light",
-        textStyles: "text-green-dark font-medium text-sm",
+        theme: theme == "green"
+            ? "text-green-dark bg-green-light"
+            : "text-crimson-burgundy bg-crimson-burgundy/10",
+        textStyles: "font-medium text-sm",
     };
     return _jsx("div", { className: cn(cardTitle), children: title });
 }

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

@@ -0,0 +1,2 @@
+import { Level } from "../../../../../_test/interface";
+export declare function GetStyleFromLevel(level: Level, field: "name" | "bgcolor" | "textcolor"): string;

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

@@ -0,0 +1,4 @@
+import { LevelToStyleMap } from "./LevelToStyleMap";
+export function GetStyleFromLevel(level, field) {
+    return LevelToStyleMap[level]?.[field] || "Unknown";
+}

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

@@ -0,0 +1,6 @@
+import { Level } from "../../../../../_test/interface";
+export declare const LevelToStyleMap: Record<Level, {
+    name: string;
+    bgcolor: string;
+    textcolor: string;
+}>;

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

@@ -0,0 +1,37 @@
+export const LevelToStyleMap = {
+    CC: {
+        name: "Cocoon",
+        bgcolor: "bg-co-green-light",
+        textcolor: "text-co-green",
+    },
+    PS: {
+        name: "Pre-Starter",
+        bgcolor: "bg-ps-pink-light",
+        textcolor: "text-ps-pink",
+    },
+    ST: {
+        name: "Starter",
+        bgcolor: "bg-st-orange-light",
+        textcolor: "text-st-orange",
+    },
+    BA: {
+        name: "Basic",
+        bgcolor: "bg-ba-yellow-light",
+        textcolor: "text-ba-yellow",
+    },
+    JR: {
+        name: "Junior",
+        bgcolor: "bg-jr-blue-light",
+        textcolor: "text-jr-blue",
+    },
+    HJ: {
+        name: "High Junior",
+        bgcolor: "bg-hj-blue-light",
+        textcolor: "text-hj-blue",
+    },
+    AD: {
+        name: "Advanced",
+        bgcolor: "bg-crimson-burgundy/10",
+        textcolor: "text-crimson-burgundy",
+    },
+};

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

@@ -1,9 +1,11 @@
+import { Theme } from "../../Theme";
 interface SectionBarProps {
     title: string;
     score: number;
     subScore?: number;
     total: number;
     scale?: number;
+    theme: Theme;
 }
-export declare function BarGraph({ score, subScore, total, title, scale, }: SectionBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function BarGraph({ score, subScore, total, title, scale, theme, }: SectionBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { usePageLoaded } from "../../../../../hook";
 import { cn } from "../../../../../util";
-export function BarGraph({ score, subScore, total, title, scale, }) {
+export function BarGraph({ score, subScore, total, title, scale, theme, }) {
     const isLoaded = usePageLoaded();
     const [currentWidth, setCurrentWidth] = useState(0);
     const widthPercentage = (score / total) * 100;
@@ -42,13 +42,23 @@ export function BarGraph({ score, subScore, total, title, scale, }) {
     const scoreTag = {
         sizes: "h-5 w-10 rounded-md",
         position: "-translate-x-14 -translate-y-2",
-        backgrounds: "bg-white border-2 border-green-dark",
-        textStyles: "font-bold text-xs text-center text-green-dark",
+        backgrounds: "bg-white border-2",
+        textStyles: "font-bold text-xs text-center",
+        colors: theme == "green"
+            ? "text-green-dark border-green-dark"
+            : "text-crimson-burgundy border-crimson-burgundy",
     };
     const subScoreTag = {
         sizes: "h-5 w-fit rounded-md flex flex-row gap-2",
         position: "-translate-x-30 translate-y-6",
     };
+    const graphTitle = {
+        displays: "absolute",
+        position: "-translate-y-12",
+        sizes: "w-full h-fit",
+        textSytls: "font-bold text-sm text-center",
+        colors: theme == "green" ? "text-green-dark" : "text-crimson-burgundy",
+    };
     // 눈금 배열 생성
     const scaleTicks = scale
         ? Array.from({ length: total / scale + 1 }, (_, index) => index * scale)
@@ -57,9 +67,9 @@ export function BarGraph({ score, subScore, total, title, scale, }) {
                                     width: `${widthPercentage}%`,
                                 } }) }), _jsx("div", { className: cn(barFill, "opacity-100 print:opacity-0"), style: {
                                 width: `${currentWidth}%`,
-                            } }), _jsx("div", { className: "absolute w-full text-green-dark -translate-y-12 font-bold text-sm h-fit text-center", 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 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: {
                         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}%)`,
-                    }, children: _jsxs("div", { className: cn(subScoreTag), children: [_jsx("div", { className: "font-medium text-xs text-center text-gray-dark", children: "\uC804\uCCB4\uD3C9\uADE0:" }), _jsx("div", { className: "font-medium text-xs text-center text-gray-dark", children: subScore.toFixed(2) }), _jsx("div", { className: "text-green-dark", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-4", children: _jsx("path", { fillRule: "evenodd", d: "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm.53 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v5.69a.75.75 0 0 0 1.5 0v-5.69l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z", clipRule: "evenodd" }) }) })] }) }))] }) }));
+                    }, children: _jsxs("div", { className: cn(subScoreTag), children: [_jsx("div", { className: "font-medium text-xs text-center text-gray-dark", children: "\uC804\uCCB4\uD3C9\uADE0:" }), _jsx("div", { className: "font-medium text-xs text-center text-gray-dark", children: subScore.toFixed(2) }), _jsx("div", { className: theme == "green" ? "text-green-dark" : "text-crimson-burgundy", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-4", children: _jsx("path", { fillRule: "evenodd", d: "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm.53 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v5.69a.75.75 0 0 0 1.5 0v-5.69l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z", clipRule: "evenodd" }) }) })] }) }))] }) }));
 }

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

@@ -0,0 +1,9 @@
+import { Theme } from "../../Theme";
+interface GaugeProps {
+    score: number;
+    maxScore: number;
+    isGrade?: boolean;
+    theme: Theme;
+}
+export declare const CircularGauge: ({ score, maxScore, isGrade, theme, }: GaugeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
+import { cn } from "../../../../../util";
+export const CircularGauge = ({ score, maxScore, isGrade, theme, }) => {
+    const pieStyles = {
+        cx: "50%",
+        cy: "50%",
+        innerRadius: "70%",
+        outerRadius: "90%",
+        cornerRadius: 6,
+        dataKey: "value",
+        nameKey: "name",
+    };
+    const cellStyles = {
+        stroke: "rgba(255, 255, 255, 0)",
+    };
+    const scoreText = {
+        displays: "absolute flex justify-center items-center",
+        positions: "top-0 left-0",
+        sizes: "w-full h-full",
+        textStyles: "font-bold text-gray-medium text-2xl",
+        printOptions: "print:text-gray-dark",
+    };
+    const preparePieChartData = () => {
+        const mainScore = score;
+        const remainingScore = maxScore - mainScore;
+        if (isGrade) {
+            return [
+                { name: "Score", value: remainingScore - 1 },
+                { name: "Grade", value: mainScore - 1 },
+            ];
+        }
+        else {
+            return [
+                { name: "Score", value: mainScore },
+                { name: "Remaining", value: remainingScore },
+            ];
+        }
+    };
+    return (_jsxs("div", { className: "w-full aspect-ratio-1/1 flex items-center justify-center relative", children: [_jsx("div", { className: "absolute top-0 left-0 w-full aspect-ratio-1/1", children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", aspect: 1, children: _jsx(PieChart, { children: _jsx(Pie, { data: [{ name: "Background", value: 100 }], cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "90%", fill: "rgba(128, 128, 128, 0.2)" // 회색 배경 색상
+                            , dataKey: "value", stroke: "rgb(255,255,255,0)", animationDuration: 0 }) }) }) }), _jsx("div", { className: "absolute top-0 left-0 w-full aspect-ratio-1/1 opacity-0 print:opacity-100", children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", aspect: 1, children: _jsx(PieChart, { children: _jsxs(Pie, { data: preparePieChartData(), ...pieStyles, animationDuration: 0, children: [_jsx(Cell, { fill: theme == "green" ? "#105652" : "#910023", ...cellStyles, style: {
+                                        filter: theme == "green"
+                                            ? "drop-shadow(0px 3px 5px rgba(16, 86, 82, 0.38))"
+                                            : "drop-shadow(0px 3px 5px rgba(145, 0, 35, 0.38))",
+                                    } }), _jsx(Cell, { fill: "rgba(255, 255, 255, 0)", ...cellStyles })] }) }) }) }), _jsx(ResponsiveContainer, { width: "100%", height: "100%", aspect: 1, children: _jsx(PieChart, { children: _jsxs(Pie, { data: preparePieChartData(), ...pieStyles, children: [_jsx(Cell, { fill: theme == "green" ? "#105652" : "#910023", ...cellStyles, style: {
+                                    filter: theme == "green"
+                                        ? "drop-shadow(0px 3px 5px rgba(16, 86, 82, 0.38))"
+                                        : "drop-shadow(0px 3px 5px rgba(145, 0, 35, 0.38))",
+                                } }), _jsx(Cell, { fill: "rgba(255, 255, 255, 0)", ...cellStyles })] }) }) }), _jsx("div", { className: cn(scoreText), children: score })] }));
+};

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

@@ -0,0 +1,3 @@
+export default function LevelIndex({ transcriptLevel, }: {
+    transcriptLevel: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useResponsive } from "../../../../../hook";
+import { LevelToStyleMap } from "../atom/LevelToStyleMap";
+export default function LevelIndex({ transcriptLevel, }) {
+    const levels = ["CC", "PS", "ST", "BA", "JR", "HJ", "AD"];
+    const isSM = useResponsive("sm");
+    return (_jsx("div", { className: "flex flex-row w-full h-fit justify-center items-center", children: levels.map((level) => {
+            const { name, bgcolor, textcolor } = LevelToStyleMap[level];
+            const isHighlighted = level === transcriptLevel;
+            return (_jsx("div", { className: `px-2 py-1 text-xs text-center font-medium $ ${isHighlighted
+                    ? "bg-green-dark text-white w-fit shrink-0 rounded-md"
+                    : "w-full text-green-dark/70"}`, children: isSM ? name : isHighlighted ? name : level }, level));
+        }) }));
+}

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

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

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../../util";
+import CardTitle from "../atom/CardTitle";
+import { printBoxStyles } from "../atom/PrintBoxStyles";
+import { BarGraph } from "../molecule/BarGraph";
+export function BarCardCol({ data, theme, }) {
+    const cardWrapper = {
+        displays: "flex flex-col relative",
+        sizes: "w-full rounded-lg overflow-hidden",
+        backgrounds: "bg-white shadow-main",
+        sapcings: "mt-5",
+    };
+    const SectionWrapper = {
+        display: "flex flex-col items-center justify-center",
+        sizes: "h-full w-full",
+    };
+    const ScriptStyles = {
+        displays: "flex justify-center items-center align-center",
+        spacings: "p-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 })] })] })] }));
+}

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

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

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../../util";
+import CardTitle from "../atom/CardTitle";
+import { printBoxStyles } from "../atom/PrintBoxStyles";
+import { BarGraph } from "../molecule/BarGraph";
+export function BarCardRow({ data, theme, }) {
+    const cardWrapper = {
+        displays: "flex flex-col relative",
+        sizes: "w-full rounded-lg overflow-hidden",
+        backgrounds: "bg-white shadow-main",
+        sapcings: "mt-5",
+    };
+    const SectionWrapper = {
+        display: "flex sm:flex-row flex-col items-center justify-center",
+        sizes: "h-full w-full",
+    };
+    const ScriptStyles = {
+        displays: "flex justify-center items-center align-center",
+        spacings: "p-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 })] })] })] }));
+}

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

@@ -0,0 +1,4 @@
+import { TranscriptProps } from "../Transcript";
+export default function HonorCard({ result, }: {
+    result: TranscriptProps["result"];
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SVG from "../../../../../asset/SVG";
+import { cn } from "../../../../../util";
+import { printBoxStyles } from "../atom/PrintBoxStyles";
+export default function HonorCard({ result, }) {
+    const cardWrapper = {
+        displays: "flex flex-col self-stretch flex-[1] relative",
+        sizes: "w-full rounded-lg overflow-hidden",
+        backgrounds: "bg-white shadow-main",
+        animations: "duration-300 hover:scale-105 hover:shadow-green",
+    };
+    const cardTitle = {
+        display: "flex flex-row justify-center items-center",
+        sizes: "h-7 shrink-0 w-full",
+        bg: "bg-green-light",
+        textStyles: "text-green-dark font-medium text-sm",
+    };
+    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), onClick: () => (window.location.href = `https://www.tosel.org/HallofFame/main`), children: [_jsx("div", { className: cn(cardTitle), children: _jsx("div", { className: "w-full text-center h-fit", children: "\uBA85\uC608\uC758 \uC804\uB2F9" }) }), _jsxs("div", { className: "w-full h-full flex flex-row px-5 gap-x-5", children: [_jsxs("div", { className: "flex flex-[1] flex-col w-full justify-center items-center xs:hidden md:flex", children: [_jsx("div", { className: "text-gray-dark font-bold text-xl", children: "\uBA85\uC608\uC758 \uC804\uB2F9" }), _jsx("div", { className: "text-gray-medium font-medium text-sm", children: "Hall of Fame" })] }), _jsx("div", { className: "flex w-full flex-[1] py-4 xs:py-0", children: _jsx(SVG.HallofFame, { isHonor: result.isHonor }) })] }), _jsx("div", { className: "pb-3 px-5 text-center text-xs", children: result.isHonor
+                    ? "축하합니다! 명예의 전당에 등재되었습니다"
+                    : "아쉽게도 명예의 전당에 오르지 못했습니다." })] }));
+}

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

@@ -0,0 +1,4 @@
+import { TranscriptProps } from "../Transcript";
+export default function IdCard({ info }: {
+    info: TranscriptProps["info"];
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,57 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { useResponsive } from "../../../../../hook";
+import { cn, copyToClipboard } from "../../../../../util";
+import QRCode from "react-qr-code";
+import { GetStyleFromLevel } from "../atom/GetStyleFromLevel";
+export default function IdCard({ info }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const togglecard = () => setIsExpanded(!isExpanded);
+    //반응형 info 카드 height 문제로 눌러서 자세히 보기 차후 구현 예정
+    const isXS = useResponsive("xs");
+    const cardWrapper = {
+        displays: "flex flex-col self-auto overflow-hidden",
+        sizes: "w-full rounded-lg h-fit",
+        backgrounds: "bg-white shadow-main",
+        spacings: "p-3",
+        printOptions: "print:bg-white print:shadow-none",
+    };
+    const imgBox = {
+        displays: "relative shrink-0 overflow-hidden",
+        sizes: "h-30 aspect-7/9 rounded-lg",
+        backgrounds: info.imgSrc ?? "bg-jr-blue-light",
+        outlines: "border-2 border-slate-200",
+    };
+    const qrBox = {
+        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",
+        groupAction: info.qrSrc && "group duration-300 hover:scale-110 bg-white",
+    };
+    const copyButtonWrapper = {
+        display: "absolute flex justify-center items-center",
+        positions: "top-0 left-0",
+        sizes: "h-full w-full backdrop-blur-sm",
+        graphics: "opacity-0 bg-white/80 ",
+        animations: "duration-300 group-hover:opacity-100",
+    };
+    const copyButton = {
+        displays: "flex justify-center items-center",
+        sizes: "w-20 h-8 rounded-lg",
+        colors: "bg-green-light border border-green-dark",
+        textStyles: "text-xs text-green-dark font-medium text-center",
+        animations: "hover:bg-green-dark hover:text-white duration-300 cursor-pointer",
+    };
+    const levelTag = {
+        display: "flex justify-center items-center",
+        textStyles: "text-center",
+        variableStyle: `text-center text-xs font-bold ${GetStyleFromLevel(info.level, "textcolor")}`,
+        backgrounds: GetStyleFromLevel(info.level, "bgcolor"),
+        sizes: isXS
+            ? "rounded-md w-fit h-fit px-2 py-1"
+            : "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") }) }) }))] })] }));
+}

package/layout/template/Transcript/design/{Organism/BarCardRow.d.ts → organism/PerformanceCard.d.ts}

@@ -1,4 +1,5 @@
 import { TranscriptProps } from "../Transcript";
-export declare function BarCardRow({ data }: {
+export default function PerformanceCard({ data, info, }: {
     data: TranscriptProps["data"];
+    info: TranscriptProps["info"];
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LineBreaks } from "@edu-tosel/design";
+import { cn } from "../../../../../util";
+import { printBoxStyles } from "../atom/PrintBoxStyles";
+import LevelIndex from "../molecule/LevelIndex";
+export default function PerformanceCard({ data, info, }) {
+    const cardWrapper = {
+        displays: "flex flex-col relative",
+        sizes: "w-full rounded-lg overflow-hidden",
+        backgrounds: "bg-white shadow-main",
+        sapcings: "mt-5",
+    };
+    const cardTitle = {
+        display: "flex flex-row justify-center items-center",
+        sizes: "h-7 shrink-0 w-full",
+        bg: "bg-green-light",
+        textStyles: "text-green-dark font-medium text-sm",
+    };
+    const scriptStyling = {
+        display: "justify-start items-start",
+        sizes: "w-full h-fit",
+        textStyles: "text-xs font-medium text-black break-keep",
+    };
+    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), children: [_jsx("div", { className: cn(cardTitle), children: _jsx("div", { className: "w-full text-center h-fit", children: "Performance Evaluation" }) }), _jsxs("div", { className: "w-full h-full flex flex-col gap-5 p-5", children: [_jsxs("div", { className: "flex flex-col flex-[3]", children: [_jsx(LineBreaks, { texts: data.script.performanceEvaluation, className: cn(scriptStyling) }), _jsx("div", { className: cn(scriptStyling, "text-green-dark"), children: "\uB098\uC758 \uC804\uAD6D \uC9C0\uD45C\uAC00 \uAD81\uAE08\uD558\uB2E4\uBA74? QR\uB85C \uC790\uC138\uD788 \uC54C\uC544\uBCF4\uC138\uC694!" })] }), _jsx("div", { className: "w-full flex flex-col flex-[2] justify-center items-center", children: _jsx(LevelIndex, { transcriptLevel: info.level }) })] })] }));
+}

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

@@ -0,0 +1,6 @@
+import { Theme } from "../../Theme";
+import { TranscriptProps } from "../Transcript";
+export default function ResultGaugeCard({ result, theme, }: {
+    result: TranscriptProps["result"];
+    theme: Theme;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../../util";
+import { printBoxStyles } from "../atom/PrintBoxStyles";
+import { CircularGauge } from "../molecule/CircularGauge";
+export default function ResultGaugeCard({ result, theme, }) {
+    const cardWrapper = {
+        displays: "flex flex-col self-auto flex-[2] md:flex-[1] overflow-hidden",
+        sizes: "w-full h-fit rounded-lg",
+        backgrounds: "bg-white shadow-main",
+        // animations: "duration-300 hover:scale-105 hover:shadow-green",
+    };
+    const cardTitle = {
+        display: "flex flex-row justify-center items-center",
+        sizes: "h-7 w-full",
+        bg: "bg-green-dark",
+        textStyles: "text-white font-medium text-sm",
+    };
+    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), children: [_jsxs("div", { className: cn(cardTitle), children: [_jsx("div", { className: "w-full text-center h-full flex justify-center items-center", children: "\uCDE8\uB4DD \uC810\uC218" }), _jsx("div", { className: "w-0.5 h-7 bg-white" }), _jsx("div", { className: "w-full text-center h-full flex justify-center items-center", children: "\uC778\uC99D \uB4F1\uAE09" })] }), _jsxs("div", { className: "flex flex-row gap-10 p-5", children: [_jsx(CircularGauge, { score: result.score, maxScore: 100, isGrade: false, theme: theme }), _jsx(CircularGauge, { score: result.grade, maxScore: 9, isGrade: true, theme: theme })] })] }));
+}

package/layout/template/Transcript/design/{Organism/BarCardCol.d.ts → organism/ScoreCard.d.ts}

@@ -1,4 +1,4 @@
 import { TranscriptProps } from "../Transcript";
-export declare function BarCardRow({ data }: {
+export default function ScoreCard({ data }: {
     data: TranscriptProps["data"];
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../../util";
+export default function ScoreCard({ data }) {
+    const cellAnimation = {
+        animations: "hover:bg-green-light/50 hover:text-green-dark duration-300",
+    };
+    return (_jsx("div", { className: "overflow-auto w-full scrollbar-hidden rounded-lg mt-5 print:border print:border-gray-medium/70 cursor-default shadow-main print:shadow-none", children: _jsxs("div", { className: "min-w-[172mm] w-full", children: [_jsxs("div", { className: "flex bg-gradient-to-r from-green-dark to-crimson-burgundy text-white font-medium text-sm", children: [_jsx("div", { className: "text-center print:static sticky left-0 bg-green-dark p-2 flex-[3] font-black", children: "\uC131\uC801\uD45C" }), _jsx("div", { className: "p-2 flex-[2] text-center", children: "\uCD1D\uC810" }), _jsx("div", { className: "p-2 flex-[2] text-center", children: "\uB0B4 \uC810\uC218" }), _jsx("div", { className: "p-2 flex-[3] text-center", children: "\uC804\uAD6D\uD3C9\uADE0" }), _jsx("div", { className: "p-2 flex-[3] text-center", children: "\uC9C0\uC5ED\uD3C9\uADE0" }), _jsx("div", { className: "p-2 flex-[3] text-center", children: "\uB3D9\uC77C\uD559\uB144" }), _jsx("div", { className: "p-2 flex-[3] text-center", children: "10% \uD3C9\uADE0" }), _jsx("div", { className: "p-2 flex-[3] text-center", children: "30% \uD3C9\uADE0" })] }), _jsxs("div", { className: "flex bg-white/60 font-medium text-sm text-gray-medium ", children: [_jsx("div", { className: "sticky left-0 bg-white/90 p-2 flex-[3] text-center text-gray-dark border-green-dark border-r-1", children: "Section1" }), _jsx("div", { className: cn("p-2 flex-[2] text-center", cellAnimation), children: data.analysis.total.section1.toFixed(1) }), _jsx("div", { className: "p-2 flex-[2] text-center text-green-dark font-bold bg-green-light", children: data.analysis.user.section1.toFixed(1) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: data.analysis.nationalAverage.section1.toFixed(2) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: data.analysis.localAverage.section1.toFixed(2) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: data.analysis.ageAverage.section1.toFixed(2) }), _jsx("div", { className: "p-2 flex-[3] text-center border-green-dark border-l-1" }), _jsx("div", { className: "p-2 flex-[3] text-center" })] }), _jsxs("div", { className: "flex bg-white/60 font-medium text-sm text-gray-medium ", children: [_jsx("div", { className: "sticky left-0 bg-white/90 p-2 flex-[3] text-center text-gray-dark border-green-dark border-r-1", children: "Section2" }), _jsx("div", { className: cn("p-2 flex-[2] text-center", cellAnimation), children: data.analysis.total.section2.toFixed(1) }), _jsx("div", { className: "p-2 flex-[2] text-center text-green-dark font-bold bg-green-light", children: data.analysis.user.section2.toFixed(1) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: data.analysis.nationalAverage.section2.toFixed(2) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: data.analysis.localAverage.section2.toFixed(2) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: data.analysis.ageAverage.section2.toFixed(2) }), _jsx("div", { className: "p-2 flex-[3] text-center border-green-dark border-l-1 font-bold", children: data.analysis["10percentageAverage"].toFixed(2) }), _jsx("div", { className: "p-2 flex-[3] text-center font-bold", children: data.analysis["30percentageAverage"].toFixed(2) })] }), _jsxs("div", { className: "flex bg-white/60 font-medium text-sm text-gray-medium ", children: [_jsx("div", { className: "sticky left-0 bg-white/90 p-2 flex-[3] text-center text-gray-dark border-green-dark border-r-1", children: "total" }), _jsx("div", { className: cn("p-2 flex-[2] text-center", cellAnimation), children: (data.analysis.total.section1 + data.analysis.total.section2).toFixed(1) }), _jsx("div", { className: "p-2 flex-[2] text-center text-green-dark font-bold bg-green-light", children: (data.analysis.user.section1 + data.analysis.user.section2).toFixed(1) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: (data.analysis.nationalAverage.section1 +
+                                data.analysis.nationalAverage.section2).toFixed(2) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: (data.analysis.localAverage.section1 +
+                                data.analysis.localAverage.section2).toFixed(2) }), _jsx("div", { className: cn("p-2 flex-[3] text-center", cellAnimation), children: (data.analysis.ageAverage.section1 +
+                                data.analysis.ageAverage.section2).toFixed(2) }), _jsx("div", { className: "p-2 flex-[3] text-center border-green-dark border-l-1" }), _jsx("div", { className: "p-2 flex-[3] text-center " })] })] }) }));
+}

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

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

package/layout/template/Transcript/index.js

@@ -1,7 +1,9 @@
 import Paper from "./design/Transcript.design";
+import AdvancePaper from "./design/TranscriptAdvanced.design";
 import Layout from "./Layout";
 const Transcript = {
     Layout,
     Paper,
+    AdvancePaper,
 };
 export default Transcript;

package/layout/template/home/layout/Footer.js

@@ -46,9 +46,10 @@ const buttons = [
     // {
     //   title: "이용약관",
     // },
-    // {
-    //   title: "개인정보 처리방침",
-    // },
+    {
+        title: "GLOBAL",
+        onClick: () => (window.location.href = "https://new.tosel.org/global"),
+    },
     {
         title: "FAQ",
         onClick: () => (window.location.href =

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.187
+1.0.189

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

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../../../../util";
-import { CardTitle } from "../atom/CardTitle";
-import { printBoxStyles } from "../atom/PrintBoxStyles";
-import { BarGraph } from "../molecule/BarGraph";
-export function BarCardRow({ data }) {
-    const cardWrapper = {
-        displays: "flex flex-col relative",
-        sizes: "w-full rounded-lg overflow-hidden",
-        backgrounds: "bg-white shadow-main",
-        sapcings: "mt-5",
-    };
-    const cardTitle = {
-        display: "flex flex-row justify-center items-center",
-        sizes: "h-7 shrink-0 w-full",
-        bg: "bg-green-light",
-        textStyles: "text-green-dark font-medium text-sm",
-    };
-    const SectionWrapper = {
-        display: "flex flex-row sm:flex-col items-center justify-center",
-        sizes: "h-full w-full",
-    };
-    const ScriptStyles = {
-        displays: "flex justify-center items-center align-center",
-        spacings: "p-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" }), _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 }), _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 }), _jsx("div", { className: cn(ScriptStyles), children: data.script.section2 })] })] })] }));
-}

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

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../../../../util";
-import { CardTitle } from "../atom/CardTitle";
-import { printBoxStyles } from "../atom/PrintBoxStyles";
-import { BarGraph } from "../molecule/BarGraph";
-export function BarCardRow({ data }) {
-    const cardWrapper = {
-        displays: "flex flex-col relative",
-        sizes: "w-full rounded-lg overflow-hidden",
-        backgrounds: "bg-white shadow-main",
-        sapcings: "mt-5",
-    };
-    const cardTitle = {
-        display: "flex flex-row justify-center items-center",
-        sizes: "h-7 shrink-0 w-full",
-        bg: "bg-green-light",
-        textStyles: "text-green-dark font-medium text-sm",
-    };
-    const SectionWrapper = {
-        display: "flex sm:flex-row flex-col items-center justify-center",
-        sizes: "h-full w-full",
-    };
-    const ScriptStyles = {
-        displays: "flex justify-center items-center align-center",
-        spacings: "p-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" }), _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 }), _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 }), _jsx("div", { className: cn(ScriptStyles), children: data.script.section2 })] })] })] }));
-}

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

@@ -1,12 +0,0 @@
-import { TranscriptProps } from "../Transcript";
-export declare const EXAM_TYPE: {
-    readonly REG: "REG";
-    readonly CMP: "CMP";
-    readonly IST: "IST";
-    readonly OLY: "OLY";
-};
-export type EXAM_TYPE = (typeof EXAM_TYPE)[keyof typeof EXAM_TYPE];
-export declare function getStringfromType(ExamType: EXAM_TYPE): string;
-export default function IdCard({ info }: {
-    info: TranscriptProps["info"];
-}): import("react/jsx-runtime").JSX.Element;

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

@@ -1,74 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { useResponsive } from "../../../../../hook";
-import { cn, copyToClipboard } from "../../../../../util";
-import { LevelToStyleMap } from "../Transcript.design";
-import QRCode from "react-qr-code";
-export const EXAM_TYPE = {
-    REG: "REG",
-    CMP: "CMP",
-    IST: "IST",
-    OLY: "OLY",
-};
-function getStylefromLevel(level, field) {
-    return LevelToStyleMap[level]?.[field] || "Unknown";
-}
-const examTypeMap = {
-    REG: "정기시험",
-    IST: "기관시험",
-    CMP: "경시대회",
-};
-export function getStringfromType(ExamType) {
-    return examTypeMap[ExamType] || "Unknown";
-}
-export default function IdCard({ info }) {
-    const [isExpanded, setIsExpanded] = useState(false);
-    const togglecard = () => setIsExpanded(!isExpanded);
-    //반응형 info 카드 height 문제로 눌러서 자세히 보기 차후 구현 예정
-    const isXS = useResponsive("xs");
-    const cardWrapper = {
-        displays: "flex flex-col self-auto overflow-hidden",
-        sizes: "w-full rounded-lg h-fit",
-        backgrounds: "bg-white shadow-main",
-        spacings: "p-3",
-        printOptions: "print:bg-white print:shadow-none",
-    };
-    const imgBox = {
-        displays: "relative shrink-0 overflow-hidden",
-        sizes: "h-30 aspect-7/9 rounded-lg",
-        backgrounds: info.imgSrc ?? "bg-jr-blue-light",
-        outlines: "border-2 border-slate-200",
-    };
-    const qrBox = {
-        displays: "shrink-0 hidden sm:block relative overflow-hidden",
-        sizes: "h-30 p-2 aspect-square rounded-lg",
-        textStyles: "text-jr-blue",
-        backgrounds: "bg-white print:border-2 print:border-green-dark",
-        groupAction: "group duration-300 hover:scale-110",
-    };
-    const copyButtonWrapper = {
-        display: "absolute flex justify-center items-center",
-        positions: "top-0 left-0",
-        sizes: "h-full w-full backdrop-blur-sm",
-        graphics: "opacity-0 bg-white/80 ",
-        animations: "duration-300 group-hover:opacity-100",
-    };
-    const copyButton = {
-        displays: "flex justify-center items-center",
-        sizes: "w-20 h-8 rounded-lg",
-        colors: "bg-green-light border border-green-dark",
-        textStyles: "text-xs text-green-dark font-medium text-center",
-        animations: "hover:bg-green-dark hover:text-white duration-300 cursor-pointer",
-    };
-    const levelTag = {
-        display: "flex justify-center items-center",
-        textStyles: "text-center",
-        variableStyle: `text-center text-xs font-bold ${getStylefromLevel(info.level, "textcolor")}`,
-        backgrounds: getStylefromLevel(info.level, "bgcolor"),
-        sizes: isXS
-            ? "rounded-md w-fit h-fit px-2 py-1"
-            : "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") }) })] }), _jsx("div", {}), _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", 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", 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", 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", children: "\uC2DC\uD5D8\uD68C\uCC28:" }), _jsx("div", { className: "flex flex-[3]", children: info.examName })] })] })] }), _jsxs("div", { className: cn(qrBox), children: [info.qrSrc && _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" }) }), info.qrSrc && (_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") }) }) }))] })] }));
-}

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

@@ -1 +0,0 @@
-"use strict";