@edu-tosel/design 1.0.214 → 1.0.216

package/asset/SVG.d.ts

@@ -8,6 +8,7 @@ import Phone from "./svg/Phone";
 import Profile from "./svg/Profile";
 import TOSEL from "./svg/TOSEL";
 import HallofFame from "./svg/HallofFame";
+import Print from "./svg/Print";
 declare const SVG: {
     TOSEL: typeof TOSEL;
     Close: typeof Close;
@@ -44,6 +45,7 @@ declare const SVG: {
         RightArrow: ({ onClick }: Operation) => import("react/jsx-runtime").JSX.Element;
     };
     Phone: typeof Phone;
+    Print: typeof Print;
     Profile: typeof Profile;
     Symbol: {
         LessThan: ({ className, onClick }: import("./svg/Symbol").SymbolProps) => import("react/jsx-runtime").JSX.Element;

package/asset/SVG.js

@@ -13,6 +13,7 @@ import TOSEL from "./svg/TOSEL";
 import Login from "./svg/Login";
 import Collab from "./svg/Collab";
 import HallofFame from "./svg/HallofFame";
+import Print from "./svg/Print";
 const SVG = {
     TOSEL,
     Close,
@@ -24,6 +25,7 @@ const SVG = {
     Notification,
     Operation,
     Phone,
+    Print,
     Profile,
     Symbol,
     Login,

package/asset/SVG.tsx

@@ -13,6 +13,7 @@ import TOSEL from "./svg/TOSEL";
 import Login from "./svg/Login";
 import Collab from "./svg/Collab";
 import HallofFame from "./svg/HallofFame";
+import Print from "./svg/Print";
 
 const SVG = {
   TOSEL,
@@ -25,6 +26,7 @@ const SVG = {
   Notification,
   Operation,
   Phone,
+  Print,
   Profile,
   Symbol,
   Login,

package/asset/svg/Print.d.ts

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

package/asset/svg/Print.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Print() {
+    return (_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", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5Zm-3 0h.008v.008H15V10.5Z" }) }));
+}

package/asset/svg/Print.tsx

@@ -0,0 +1,18 @@
+export default function Print() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5Zm-3 0h.008v.008H15V10.5Z"
+      />
+    </svg>
+  );
+}

package/layout/template/Action.js

@@ -32,7 +32,7 @@ function Replace({ actions, children }) {
         .filter(([action]) => action)
         .map(([flag, Component], index) => {
         if (typeof flag === "string") {
-            return events?.some(({ event }) => event === flag) ? (_jsx(_Fragment, { children: Component })) : null;
+            return events?.some(({ event }) => event === flag) ? (_jsx(Fragment, { children: Component }, flag)) : null;
         }
         return _jsx(Fragment, { children: Component }, index);
     })

package/layout/template/Transcript/Layout.js

@@ -1,15 +1,52 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 import { cn } from "../../../util";
+import SVG from "../../../asset/SVG";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+gsap.registerPlugin(ScrollTrigger);
 export default function Layout({ children, buttons, }) {
     const container = {
         sizes: "w-full min-h-screen",
-        displays: "flex flex-col justify-start items-center",
+        displays: "flex flex-col justify-start items-center relative",
         backgrounds: "bg-gray-light",
         pressures: "p-3.5",
     };
     const header = {
-        displays: "flex",
-        sizes: "w-full ",
+        displays: "absolute top-0 flex flex-col justify-start",
+        sizes: "w-full h-auto",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(header), children: buttons?.map(({ title, onClick }) => (_jsx("button", { onClick: onClick, children: title }))) }), children] }));
+    const buttonStyles = {
+        spacings: "px-4 py-2 rounded-full",
+        textStyles: "text-base font-bold text-green-dark",
+        backgrounds: "bg-white/30 backdrop-blur-sm",
+        graphics: "shadow-main",
+        animations: "duration-300 hover:bg-white/100 hover:shadow-green hover:scale-105",
+    };
+    const containerRef = useRef(null);
+    const buttonRef = useRef(null);
+    const [containerHeight, setContainerHeight] = useState(null);
+    useEffect(() => {
+        // 컨테이너 높이 읽기
+        if (containerRef.current) {
+            const height = containerRef.current.offsetHeight;
+            setContainerHeight(height); // 상태에 저장
+            console.log("Container height:", height); // 확인용 로그
+        }
+        // ScrollTrigger 설정
+        if (buttonRef.current) {
+            ScrollTrigger.create({
+                trigger: buttonRef.current,
+                start: "top top",
+                end: () => `+=${containerHeight || window.innerHeight}`, // 컨테이너 높이 기반
+                pin: true,
+                pinSpacing: false,
+                scrub: false,
+            });
+        }
+        return () => {
+            ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
+        };
+    }, [containerHeight]); // containerHeight가 업데이트되면 재실행
+    return (_jsxs("div", { className: cn(container), ref: containerRef, children: [_jsx("div", { className: "mt-20 w-full h-full flex justify-center itmes-center", children: children }), _jsx("div", { className: cn(header), ref: buttonRef, children: _jsx("div", { className: "flex w-full justify-center items-center p-6", children: buttons?.map(({ title, onClick }) => (_jsx("button", { className: cn(buttonStyles), onClick: onClick, children: _jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(SVG.Print, {}), _jsx("div", { children: title })] }) }))) }) })] }));
 }

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

@@ -19,6 +19,7 @@ export interface TranscriptProps {
         score: number;
         grade: number;
         isHonor: boolean;
+        percentRank: number;
     };
     data: {
         graph: {

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

@@ -11,6 +11,7 @@ import PerformanceCard from "./organism/PerformanceCard";
 import { MIChart } from "./molecule/MIChart";
 import { IntelligenceCard } from "./organism/IntelligenceCard";
 import { SectionRadarCard } from "./organism/SectionRadarCard";
+import { NationalPositionCard } from "./organism/NationalPositionCard";
 export const EXAM_TYPE = {
     REG: "REG",
     CMP: "CMP",
@@ -31,7 +32,7 @@ function TranscriptDesign({ props }, ref) {
     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",
+        backgrounds: "print:bg-white z-1",
         sizes: "w-full max-w-[210mm]",
         textStyles: "break-keep",
     };
@@ -41,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 }), _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", title: "Section1" }), _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" }), _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/atom/GetPartDescriptionFromLevel.d.ts

@@ -1,3 +1,3 @@
 import { Level } from "../../../../../_test/interface";
 import { PartPercent, SectionType } from "../../interface";
-export declare function GetPartTitleFromLevel(level: Level, section: SectionType, part: keyof PartPercent): string;
+export declare function GetPartDescriptionFromLevel(level: Level, section: SectionType, part: keyof PartPercent): string;

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

@@ -1,4 +1,4 @@
 import { LevelToPartDescriptionMap } from "./LevelToPartDescriptionMap";
-export function GetPartTitleFromLevel(level, section, part) {
+export function GetPartDescriptionFromLevel(level, section, part) {
     return LevelToPartDescriptionMap[level]?.[section]?.[part] || "Unknown";
 }

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

@@ -1,3 +1,3 @@
 import { Level } from "../../../../../_test/interface";
 import { PartPercent, SectionType } from "../../interface";
-export declare function GetPartDescriptionFromLevel(level: Level, section: SectionType, part: keyof PartPercent): string;
+export declare function GetPartTitleFromLevel(level: Level, section: SectionType, part: keyof PartPercent): string;

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

@@ -1,4 +1,4 @@
 import { LevelToPartTitleMap } from "./LevelToPartTitleMap";
-export function GetPartDescriptionFromLevel(level, section, part) {
+export function GetPartTitleFromLevel(level, section, part) {
     return LevelToPartTitleMap[level]?.[section]?.[part] || "Unknown";
 }

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

@@ -14,68 +14,68 @@ export const LevelToPartDescriptionMap = {
     },
     PS: {
         section1: {
-            partA: "Listen and Recognize",
-            partB: "Listen and Respond",
-            partC: "Listen and Retell",
+            partA: "단어 또는 짧은 문장을 듣고, 의미를 파악하여 가장 관련 있는 그림을 고르는 파트입니다.",
+            partB: "짧은 문장을 듣고, 화자가 하는 말의 핵심을 파악하여 다음에 이어질 알맞은 대답을 고르는 파트입니다.",
+            partC: "두 사람의 대화 또는 짧은 이야기를 듣고, 내용을 바르게 이해하여 주어진 문제에 알맞은 응답을 고르는 파트입니다.",
         },
         section2: {
-            partA: "Spell the Words",
-            partB: "Look and Recognize",
-            partC: "Look and Respond",
-            partD: "Read and Retell",
+            partA: "그림을 보고, 해당 단어의 올바른 철자를 골라 단어를 완성하는 파트입니다.",
+            partB: "그림을 보고, 그림이 묘사하고 있는 상황에 알맞은 영어 문장을 고르는 파트입니다.",
+            partC: "그림을 보고, 그림을 올바르게 묘사하고 주어진 질문에 알맞은 영어 문장을 고르는 파트입니다.",
+            partD: "읽기 자료를 읽고, 내용을 바탕으로 올바른 답을 유추하여 문제에 알맞은 응답을 고르는 파트입니다.",
         },
     },
     ST: {
         section1: {
-            partA: "Listen and Recognize",
-            partB: "Listen and Respond",
-            partC: "Listen and Retell",
+            partA: "문장을 듣고, 정확한 의미를 파악하여 가장 관련 있는 그림을 고르는 파트입니다.",
+            partB: "문장을 듣고, 화자가 하는 말의 핵심을 파악하여 다음에 이어질 알맞은 대답을 고르는 파트입니다.",
+            partC: "두 사람의 대화 또는 짧은 이야기를 듣고, 내용을 바르게 이해하여 주어진 문제에 알맞은 응답을 고르는 파트입니다.",
         },
         section2: {
-            partA: "Sentence Completion",
-            partB: "Situational Writing",
-            partC: "Reading and Retelling",
+            partA: "불안정한 문장이 포함된 짧은 대화를 읽고, 상황에 알맞은 어휘, 문법을 사용하여 빈칸을 채워 넣는 파트입니다.",
+            partB: "그림을 보고, 주어진 문장 속에서 그림을 올바르게 묘사하는 영어 표현을 선택하는 파트입니다.",
+            partC: "다양한 읽기 자료를 읽고, 주어진 내용을 바탕으로 주어진 문제에 알맞은 응답을 고르는 파트입니다.",
         },
     },
     BA: {
         section1: {
-            partA: "Listen and Recognize",
-            partB: "Listen and Respond",
-            partC: "Listen and Retell",
-            partD: "Listen and Speak",
+            partA: "문장을 듣고, 의미를 정확히 파악하여 가장 관련 있는 그림을 고르는 파트입니다.",
+            partB: "문장을 듣고, 화자가 하는 말의 핵심을 파악하여 다음에 이어질 알맞은 대답을 고르는 파트입니다.",
+            partC: "두 사람의 대화 또는 짧은 이야기를 듣고, 내용을 이해하여 주어진 문제에 알맞은 응답을 고르는 파트입니다.",
+            partD: "두 사람의 대화를 듣고, 내용에 대한 종합적인 이해를 바탕으로 대화에 참여하여 마지막 말에 이어질 알맞은 대답을 고르는 파트입니다.",
         },
         section2: {
-            partA: "Sentence Completion",
-            partB: "Situational Writing",
-            partC: "Practical Reading and Retelling",
-            partD: "General Reading and Retelling",
+            partA: "불안정한 문장이 포함된 짧은 대화를 읽고, 상황에 알맞은 어휘, 문법을 사용하여 빈칸을 채워 넣는 파트입니다.",
+            partB: "그림을 보고, 주어진 문장 속에서 그림을 올바르게 묘사하는 영어 표현을 선택하는 파트입니다.",
+            partC: "실용적 읽기 자료를 주의 깊게 읽고, 주어진 사실을 바탕으로 유추하여 해당 문제에 알맞은 응답을 고르는 파트입니다.",
+            partD: "다양한 주제의 읽기 자료를 읽고, 주어진 내용을 바탕으로 추론하여 해당 문제에 알맞은 응답을 고르는 파트입니다.",
         },
     },
     JR: {
         section1: {
-            partA: "Listen and Respond",
-            partB: "Listen and Retell",
-            partC: "Listen and Speak",
+            partA: "문장을 듣고, 화자가 하는 말의 핵심을 파악하여 다음에 이어질 알맞은 대답을 고르는 파트입니다.",
+            partB: "두 사람의 대화 또는 짧은 이야기를 듣고, 내용을 바르게 이해하여 주어진 문제에 알맞은 응답을 고르는 파트입니다.",
+            partC: "두 사람의 대화를 듣고, 내용에 대한 종합적인 이해를 바탕으로 대화에 참여하여 마지막 말에 이어질 알맞은 대답을 고르는 파트입니다.",
         },
         section2: {
-            partA: "Sentence Completion",
-            partB: "Situational Writing",
-            partC: "Practical Reading and Retelling",
-            partD: "General Reading and Retelling",
+            partA: "불안정한 문장이 포함된 짧은 대화를 읽고, 상황에 알맞은 어휘, 문법을 사용하여 빈칸을 채워 넣는 파트입니다.",
+            partB: "그림을 보고, 주어진 문장 속에서 그림을 올바르게 묘사하는 영어 표현을 선택하는 파트입니다.",
+            partC: "실용적 읽기 자료를 주의 깊게 읽고, 주어진 사실을 바탕으로 유추하여 해당 문제에 알맞은 응답을 고르는 파트입니다.",
+            partD: "다양한 주제의 읽기 자료를 읽고, 주어진 내용을 바탕으로 추론하여 해당 문제에 알맞은 응답을 고르는 파트입니다.",
         },
     },
     HJ: {
         section1: {
-            partA: "Listen and Recognize",
-            partB: "Listen and Respond",
-            partC: "Short Conversations",
-            partD: "Talks",
+            partA: "인물 간의 대화를 듣고, 세 사진 중 내용과 가장 관련이 있는 것을 선택하는 파트입니다.",
+            partB: "문장을 듣고, 화자가 하는 말의 핵심을 파악하여 다음에 이어질 알맞은 대답을 고르는 파트입니다.",
+            partC: "두 사람의 짧은 대화를 듣고, 내용을 바르게 이해하여 관련 질문에 대한 답을 고르는 파트입니다.",
+            partD: "인물 간의 긴 대화를 듣고, 내용을 바르게 이해하여 주어진 문제에 알맞은 응답을 고르는 파트입니다.",
         },
         section2: {
-            partA: "Picture Description",
-            partB: "Sentence Completion",
-            partC: "Practical Reading and Comprehension",
-            partD: "General Reading and Comprehension",
+            partA: "사진을 보고, 이를 묘사하는데 가장 알맞은 단어나 어구를 선택하는 파트입니다.",
+            partB: "불안정한 문장이 포함된 짧은 대화를 읽고, 상황에 알맞은 어휘, 문법을 사용하여 빈칸을 채워 넣는 파트입니다.",
+            partC: "실용적 읽기 자료를 주의 깊게 읽고, 주어진 사실을 바탕으로 유추하여 해당 문제에 알맞은 응답을 고르는 파트입니다.",
+            partD: "다양한 주제의 읽기 자료를 읽고, 주어진 내용을 바탕으로 추론하여 해당 문제에 알맞은 응답을 고르는 파트입니다.",
         },
     },
     AD: {

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, ResponsiveContainer, } from "recharts";
 export function RadarGraph({ data }) {
-    return (_jsx("div", { className: "w-full aspect-square flex items-center justify-center relative", children: _jsx("div", { className: "absolute top-0 left-0 w-full", children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", aspect: 1, children: _jsxs(RadarChart, { cx: "50%", cy: "50%", outerRadius: "80%", data: data, width: 500, height: 500, children: [_jsx(PolarGrid, {}), _jsx(PolarAngleAxis, { dataKey: "subject" }), _jsx(PolarRadiusAxis, { angle: 30, domain: [0, 100] }), _jsx(Radar, { name: "My Score", dataKey: "A", stroke: "#105652", fill: "#105652", fillOpacity: 0.2 }), _jsx(Radar, { name: "Average", dataKey: "B", stroke: "#910023", fill: "#910023", fillOpacity: 0.1 })] }) }) }) }));
+    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 print:hidden", children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", aspect: 1, children: _jsxs(RadarChart, { cx: "50%", cy: "50%", outerRadius: "80%", data: data, width: 500, height: 500, children: [_jsx(PolarGrid, {}), _jsx(PolarAngleAxis, { dataKey: "subject" }), _jsx(PolarRadiusAxis, { angle: 30, domain: [0, 100] }), _jsx(Radar, { name: "My Score", dataKey: "A", stroke: "#105652", fill: "#105652", fillOpacity: 0.2 }), _jsx(Radar, { name: "Average", dataKey: "B", stroke: "#910023", fill: "#910023", fillOpacity: 0.1 })] }) }) }), _jsx("div", { className: "absolute top-0 left-0 w-full opacity-0 print:opacity-100", children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", aspect: 1, children: _jsxs(RadarChart, { cx: "50%", cy: "50%", outerRadius: "80%", data: data, width: 500, height: 500, children: [_jsx(PolarGrid, {}), _jsx(PolarAngleAxis, { dataKey: "subject" }), _jsx(PolarRadiusAxis, { angle: 30, domain: [0, 100] }), _jsx(Radar, { name: "My Score", dataKey: "A", stroke: "#105652", fill: "#105652", fillOpacity: 0.2, isAnimationActive: false }), _jsx(Radar, { name: "Average", dataKey: "B", stroke: "#910023", fill: "#910023", fillOpacity: 0.1, isAnimationActive: false })] }) }) })] }));
 }

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

@@ -4,7 +4,7 @@ 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",
+        displays: "flex flex-1 flex-col self-stretch relative",
         sizes: "w-full rounded-lg overflow-hidden",
         backgrounds: "bg-white shadow-main",
         animations: "duration-300 hover:scale-105 hover:shadow-green",

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

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

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../../util";
+import { printBoxStyles } from "../atom/PrintBoxStyles";
+export function NationalPositionCard({ result, }) {
+    const percentRank = result.percentRank.toFixed(1);
+    const cardWrapper = {
+        displays: "flex flex-col relative",
+        sizes: "w-full rounded-lg overflow-hidden",
+        outline: "border-2 border-green-dark/50",
+    };
+    return (_jsx("div", { className: cn(cardWrapper, printBoxStyles, "flex-[1] h-fit p-2 mt-5 xxs:text-sm text-xs text-green-dark print:hidden text-center font-medium", percentRank == "0.0"
+            ? "bg-green-light shadow-green"
+            : "bg-white shadow-main"), children: percentRank == "0.0" ? (_jsxs("div", { children: [_jsx("span", { children: "\uCD95\uD558\uD569\uB2C8\uB2E4! \uC774\uBC88 \uC2DC\uD5D8\uC5D0\uC11C " }), _jsx("span", { className: "font-bold", children: "\uC804\uAD6D 1\uB4F1" }), "\uC744 \uAE30\uB85D\uD588\uC5B4\uC694!"] })) : (_jsxs("div", { children: ["\uC774\uBC88 \uC2DC\uD5D8\uC5D0\uC11C \uC804\uAD6D\uC0C1\uC704", " ", _jsxs("span", { className: "font-bold", children: [percentRank, "%"] }), "\uB97C \uAE30\uB85D\uD588\uC5B4\uC694."] })) }));
+}

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

@@ -4,7 +4,7 @@ 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",
+        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",

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

@@ -1,9 +1,8 @@
 import { SectionType, Theme } from "../../interface";
 import { TranscriptProps } from "../Transcript";
-export declare function SectionRadarCard({ info, data, theme, title, section, }: {
+export declare function SectionRadarCard({ info, data, theme, section, }: {
     info: TranscriptProps["info"];
     data: TranscriptProps["data"];
     theme: Theme;
-    title?: string;
     section: SectionType;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../../util";
 import CardTitle from "../atom/CardTitle";
-import { GetPartTitleFromLevel } from "../atom/GetPartDescriptionFromLevel";
-import { GetPartDescriptionFromLevel } from "../atom/GetPartTitleFromLevel";
+import { GetPartDescriptionFromLevel } from "../atom/GetPartDescriptionFromLevel";
+import { GetPartTitleFromLevel } from "../atom/GetPartTitleFromLevel";
 import { printBoxStyles } from "../atom/PrintBoxStyles";
 import { RadarGraph } from "../molecule/RadarGraph";
 function prepareRadarChartData(resultPartPercent, averagePartPercent, section, level) {
@@ -14,6 +14,7 @@ function prepareRadarChartData(resultPartPercent, averagePartPercent, section, l
         if (partTitle !== "Unknown") {
             return {
                 subject: part,
+                title: partTitle,
                 A: resultPartPercent[part],
                 B: averagePartPercent[part],
                 fullMark: 1,
@@ -24,9 +25,10 @@ function prepareRadarChartData(resultPartPercent, averagePartPercent, section, l
     })
         .filter((item) => item !== null); // null 값 제거
 }
-export function SectionRadarCard({ info, data, theme, title, section, }) {
+export function SectionRadarCard({ info, data, theme, section, }) {
     const resultPartPercent = data.graph.user[section];
     const averagePartPercent = data.graph.average.user[section];
+    const radarData = prepareRadarChartData(resultPartPercent, averagePartPercent, section, info.level);
     const cardWrapper = {
         displays: "flex flex-col relative",
         sizes: "w-full rounded-lg overflow-hidden",
@@ -36,5 +38,5 @@ export function SectionRadarCard({ info, data, theme, title, section, }) {
         display: "flex flex-row items-center justify-center",
         sizes: "w-full",
     };
-    return (_jsxs("div", { className: "w-full h-fit flex flex-col-reverse md:flex-row gap-5 mt-5 print:hidden", children: [_jsxs("div", { className: cn(cardWrapper, printBoxStyles, "flex-[1]"), children: [title && _jsx(CardTitle, { title: title, theme: theme }), _jsxs("div", { className: "flex flex-col p-5 h-full justify-center items-center", children: [_jsx("div", { className: cn(SectionWrapper), children: _jsx(RadarGraph, { data: prepareRadarChartData(resultPartPercent, averagePartPercent, section, info.level) }) }), _jsxs("div", { className: "w-full h-fit flex items-center justify-center gap-5", children: [_jsxs("div", { className: "flex flex-row justify-center items-center gap-2", children: [_jsx("div", { className: "rounded-full h-3 w-3 bg-green-dark" }), _jsx("div", { className: "text-green-dark text-xs", children: "My Score" })] }), _jsxs("div", { className: "flex flex-row justify-center items-center gap-2", children: [_jsx("div", { className: "rounded-full h-3 w-3 bg-crimson-burgundy" }), _jsx("div", { className: "text-crimson-burgundy text-xs", children: "Average" })] })] })] })] }), _jsx("div", { className: cn(cardWrapper, printBoxStyles, "flex-[1]") })] }));
+    return (_jsxs("div", { className: "w-full h-fit flex flex-col md:flex-row gap-5 mt-5 print:hidden", children: [_jsxs("div", { className: cn(cardWrapper, printBoxStyles, "flex-[1]"), children: [_jsx(CardTitle, { title: section, theme: theme }), _jsxs("div", { className: "flex flex-col p-5 h-full justify-center items-center", children: [_jsx("div", { className: cn(SectionWrapper), children: _jsx(RadarGraph, { data: radarData }) }), _jsxs("div", { className: "w-full h-fit flex items-center justify-center gap-5", children: [_jsxs("div", { className: "flex flex-row justify-center items-center gap-2", children: [_jsx("div", { className: "rounded-full h-3 w-3 bg-green-dark" }), _jsx("div", { className: "text-green-dark text-xs", children: "My Score" })] }), _jsxs("div", { className: "flex flex-row justify-center items-center gap-2", children: [_jsx("div", { className: "rounded-full h-3 w-3 bg-crimson-burgundy" }), _jsx("div", { className: "text-crimson-burgundy text-xs", children: "Average" })] })] })] })] }), _jsxs("div", { className: cn(cardWrapper, printBoxStyles, "flex-[1]"), children: [_jsx(CardTitle, { title: "description", theme: "green" }), _jsx("div", { className: "flex flex-col gap-5 p-5", children: radarData.map((item) => (_jsxs("div", { children: [_jsxs("div", { className: "flex flex-row gap-2 font-bold text-sm text-green-dark", children: [_jsx("div", { children: item.subject + "." }), _jsx("div", { children: item.title })] }), _jsx("div", { className: "text-xs", children: item.description })] }, item.subject))) })] })] }));
 }

package/package.json

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

package/tailwind.config.ts

@@ -36,6 +36,9 @@ export default {
         "main-hover": "0 10px 12px 0px rgba(0, 0, 0, 0.3)",
         green: "0 0px 10px 0px rgba(16, 86, 82, 0.38)",
       },
+      flex: {
+        "2": "2 2 0%",
+      },
       keyframes: {
         smallBounce: {
           "0%, 100%": { transform: "translateY(-5%)" },

package/version.txt

@@ -1 +1 @@
-1.0.214
+1.0.216