@edu-tosel/design 1.0.235 → 1.0.236

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

@@ -90,6 +90,9 @@ export interface TranscriptProps {
     info: Information;
     result: Result;
     data: Data;
+    option?: {
+        noAnimation?: boolean;
+    };
 }
 interface Score {
     part1: number;

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

@@ -27,7 +27,7 @@ export function getStringfromType(ExamType) {
     return examTypeMap[ExamType] || "Unknown";
 }
 function TranscriptDesign({ props }, ref) {
-    const { info, result, data } = props;
+    const { info, result, data, option } = 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 = {
@@ -42,7 +42,7 @@ 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 }), _jsx(NationalPositionCard, { result: result }), _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" }), _jsx(SectionRadarCard, { data: data, section: "section1", info: info, theme: "red" }), _jsx(SectionRadarCard, { data: data, section: "section2", info: info, theme: "red" }), _jsx(IntelligenceCard, { data: data.multipleIntelligence, theme: "green" }), _jsx(MIChart, {})] }));
+    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 }), _jsx(NationalPositionCard, { result: result }), _jsxs("div", { className: "flex flex-col gap-5 xs:flex-row mt-5 items-stretch", children: [_jsx(ResultGaugeCard, { result: result, theme: "green", noAnimation: option?.noAnimation ?? false }), _jsx(HonorCard, { result: result })] }), _jsx(PerformanceCard, { data: data, info: info }), _jsx(ScoreCard, { data: data }), _jsx(BarCardRow, { section1: section1Data, section2: section2Data, theme: "green" }), _jsx(SectionRadarCard, { data: data, section: "section1", info: info, theme: "red" }), _jsx(SectionRadarCard, { data: data, section: "section2", info: info, theme: "red" }), _jsx(IntelligenceCard, { data: data.multipleIntelligence, theme: "green" }), _jsx(MIChart, {})] }));
 }
 export default forwardRef(TranscriptDesign);
 function SectionBarGraphProps(title, score, total, script, subScripts, scale, subScore) {

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

@@ -4,6 +4,7 @@ interface GaugeProps {
     maxScore: number;
     isGrade?: boolean;
     theme: Theme;
+    noAnimation: Boolean;
 }
-export declare const CircularGauge: ({ score, maxScore, isGrade, theme, }: GaugeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CircularGauge: ({ score, maxScore, isGrade, theme, noAnimation, }: GaugeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,16 @@
 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, }) => {
+export const CircularGauge = ({ score, maxScore, isGrade, theme, noAnimation, }) => {
+    const prepareNoAnimationPercentage = () => {
+        if (isGrade) {
+            return ((10 - score) / 9) * 100;
+        }
+        else {
+            return (score / maxScore) * 100;
+        }
+    };
+    const widthPercentage = prepareNoAnimationPercentage();
     const pieStyles = {
         cx: "50%",
         cy: "50%",
@@ -37,14 +46,22 @@ export const CircularGauge = ({ score, maxScore, isGrade, theme, }) => {
             ];
         }
     };
-    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: {
+    // 단체 성적표에 대한 분기 처리: svg 요소의 렌더 실패를 방지하기 위함
+    if (noAnimation) {
+        return (_jsxs("div", { className: "w-full aspect-square flex items-center justify-center relative", children: [_jsx("div", { className: "absolute top-5 left-0 w-full h-fit flex justify-center items-end font-bold text-gray-dark text-4xl", children: score }), _jsx("div", { className: "absolute bottom-5 left-0 w-full h-full flex flex-col justify-end items-start", children: _jsx("div", { className: "w-full h-5 bg-green-light rounded-full" }) }), _jsx("div", { className: "absolute bottom-5 left-0 w-full h-full flex flex-col justify-end items-start", children: _jsx("div", { className: "h-5 bg-green-dark rounded-full", style: {
+                            width: `${widthPercentage}%`,
+                        } }) })] }));
+    }
+    else {
+        return (_jsxs("div", { className: "w-full aspect-square flex items-center justify-center relative", children: [_jsx("div", { className: "absolute top-0 left-0 w-full aspect-square", 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-square 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(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 })] }));
+                                    } }), _jsx(Cell, { fill: "rgba(255, 255, 255, 0)", ...cellStyles })] }) }) }), _jsx("div", { className: cn(scoreText), children: score })] }));
+    }
 };

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

@@ -1,6 +1,7 @@
 import { Theme } from "../../interface";
 import { Result } from "../Transcript";
-export default function ResultGaugeCard({ result, theme, }: {
+export default function ResultGaugeCard({ result, theme, noAnimation, }: {
     result: Result;
     theme: Theme;
+    noAnimation: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ 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, }) {
+export default function ResultGaugeCard({ result, theme, noAnimation, }) {
     const cardWrapper = {
         displays: "flex flex-col self-auto flex-2 md:flex-1 overflow-hidden",
         sizes: "w-full h-fit rounded-lg",
@@ -15,5 +15,5 @@ export default function ResultGaugeCard({ result, theme, }) {
         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 })] })] }));
+    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 w-full", children: [_jsx(CircularGauge, { score: result.score, maxScore: 100, isGrade: false, theme: theme, noAnimation: noAnimation }), _jsx(CircularGauge, { score: result.grade, maxScore: 9, isGrade: true, theme: theme, noAnimation: noAnimation })] })] }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.235
+1.0.236