@edu-tosel/design 1.0.188 → 1.0.190

package/_test/interface/Property.d.ts

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

package/_test/interface/Property.js

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

package/layout/template/Books/SectionA.js

@@ -5,7 +5,70 @@ import ScrollTrigger from "gsap/ScrollTrigger";
 import { cn } from "../../../util";
 import { useResponsive } from "../../../hook";
 gsap.registerPlugin(ScrollTrigger);
+const bookData = [
+    {
+        id: 1,
+        type: "학습 시리즈",
+        title: "Reading Series",
+        imgSrc: "https://resource.tosel.co.kr/images/book_mockup_RD_HJ1.png",
+        description: "Reading 학습을 위한 토셀의 학습 시리즈입니다. 독해 & 실용문 연습을 위한 지문과 Comprehension 문항이 수록되어, 이해도 확인 및 정확한 진단이 가능합니다. 숙지한 독해 지문을 원어민 음성으로 들으며 리딩을 위한 완벽한 학습 커리큘럼을 마련해보세요.",
+        levelLow: "PS",
+        levelHigh: "HJ",
+        link: "",
+    },
+    {
+        id: 2,
+        type: "학습 시리즈",
+        title: "Story Series",
+        imgSrc: "https://resource.tosel.co.kr/images/book_mockup_RD_BA2.png",
+        description: "이야기 지문과 단어를 함께 연결지어 학생들의 독해 능력을 평가dfsdfsdf",
+        levelLow: "PS",
+        levelHigh: "JR",
+        link: "",
+    },
+    {
+        id: 3,
+        type: "학습 시리즈",
+        title: "Listening Series",
+        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
+        description: "어쩌",
+        levelLow: "PS",
+        levelHigh: "HJ",
+        link: "",
+    },
+    {
+        id: 4,
+        type: "학습 시리즈",
+        title: "Reading Series",
+        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
+        description: "어쩌",
+        levelLow: "PS",
+        levelHigh: "HJ",
+        link: "",
+    },
+    {
+        id: 5,
+        type: "학습 시리즈",
+        title: "Grammar Series",
+        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
+        description: "어쩌",
+        levelLow: "PS",
+        levelHigh: "HJ",
+        link: "",
+    },
+    {
+        id: 6,
+        type: "학습 시리즈",
+        title: "VOCA Series",
+        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
+        description: "어쩌",
+        levelLow: "PS",
+        levelHigh: "HJ",
+        link: "",
+    },
+];
 let divIndex = 0;
+const bookNumber = bookData.length;
 export default function SectionA() {
     const stickyRef = useRef(null);
     const bookRef = useRef(null);
@@ -16,17 +79,15 @@ export default function SectionA() {
     const bookScrollRef = useRef(null);
     const refs = useRef([]);
     const isMD = useResponsive("md");
-    const cardHeight = isMD ? 560 : 400;
+    const isXM = useResponsive("xm");
+    const cardHeight = isXM ? 560 : 400;
     console.log(isMD);
     console.log(cardHeight);
-    const handleScroll = (direction) => {
+    const bookScroller = () => {
         if (bookScrollRef.current) {
             const scrollAmount = cardHeight;
             const currentScrollTop = bookScrollRef.current.scrollTop;
-            console.log(`direction: ${direction}`);
-            const newScrollTop = direction === "up"
-                ? Math.max(currentScrollTop - scrollAmount, 0)
-                : currentScrollTop + scrollAmount;
+            const newScrollTop = scrollAmount * divIndex;
             bookScrollRef.current.scrollTo({
                 top: newScrollTop,
                 behavior: "smooth",
@@ -39,7 +100,7 @@ export default function SectionA() {
             const scrollWrapper = stickyRef.current;
             const bookWrapper = bookRef.current;
             const sectionEndPoint = `${50 * vh}px`;
-            const bookScrollEndPoint = `${1000 * vh}px`;
+            const bookScrollEndPoint = `${((bookNumber + 1) * 100 + 40) * vh}px`;
             if (scrollWrapper && bookWrapper) {
                 // 첫 번째 ScrollTrigger: stickyRef를 고정하고 mainTitle의 투명도와 크기 조정
                 const scrollTrigger = ScrollTrigger.create({
@@ -95,21 +156,24 @@ export default function SectionA() {
                             gsap.to(ref, {
                                 scrollTrigger: {
                                     trigger: ref,
-                                    start: "top top",
-                                    end: "bottom top",
+                                    start: "start bottom",
+                                    end: "bottom bottom",
                                     snap: {
                                         snapTo: 1,
                                         duration: 0.5,
                                         ease: "power3.inOut",
                                     },
+                                    markers: false,
                                     onEnter: () => {
                                         divIndex++;
-                                        handleScroll("down");
+                                        //handleScroll("down");
+                                        bookScroller();
                                         console.log(`onEnter: ${divIndex}`);
                                     },
                                     onLeaveBack: () => {
                                         divIndex--;
-                                        handleScroll("up");
+                                        //handleScroll("up");
+                                        bookScroller();
                                         console.log(`onLeaveBack: ${divIndex}`);
                                     },
                                 },
@@ -121,7 +185,7 @@ export default function SectionA() {
                 const bookTrigger = ScrollTrigger.create({
                     trigger: bookWrapper,
                     start: "top top",
-                    end: `${bookScrollEndPoint} top`,
+                    end: `${bookScrollEndPoint} bottom`,
                     pin: true,
                     pinSpacing: false,
                     markers: true,
@@ -133,7 +197,7 @@ export default function SectionA() {
             }
         });
         return () => ctx.kill();
-    }, [handleScroll]);
+    }, [bookScroller, useResponsive]);
     const container = {
         sizes: "w-full h-fit relative",
         displays: "flex flex-col justify-start items-center",
@@ -176,16 +240,20 @@ export default function SectionA() {
     };
     const bookExplainWrapper = {
         displays: "flex flex-col md:flex-row justify-center items-center",
-        sizes: "h-screen w-full",
+        sizes: "h-screen w-full max-w-[1200px]",
+    };
+    const bookTextWrapper = {
+        displays: "flex items-end md:items-start",
+        sizes: "h-full xm:max-h-140 max-h-100 w-full shrink",
+        textStyling: "font-bold text-2xl pl-0 md:pl-[76px]",
     };
-    const bookTitle = {
-        displays: "flex flex-col justify-end items-center",
-        sizes: "h-full w-full pb-5",
-        textStyling: "font-bold text-2xl",
+    const bookTextBox = {
+        displays: "flex flex-col justify-end items-center md:justify-start md:items-start",
+        sizes: "w-full h-fit rounded-lg p-5",
     };
     return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(absoluteWrapperBottom, "bg-gradient-to-tr from-crimson-burgundy to-green-dark"), ref: bgRef }), _jsx("div", { className: cn(absoluteWrapperTop), children: _jsxs("div", { className: cn(buttonStyling), ref: buttonRef, onClick: () => {
                         window.location.href = "https://smartstore.naver.com/tosel";
-                    }, children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-6", children: _jsx("path", { d: "M2.25 2.25a.75.75 0 0 0 0 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 0 0-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 0 0 0-1.5H5.378A2.25 2.25 0 0 1 7.5 15h11.218a.75.75 0 0 0 .674-.421 60.358 60.358 0 0 0 2.96-7.228.75.75 0 0 0-.525-.965A60.864 60.864 0 0 0 5.68 4.509l-.232-.867A1.875 1.875 0 0 0 3.636 2.25H2.25ZM3.75 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM16.5 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" }) }) }), "\uAD50\uC7AC\uBAB0 \uBC14\uB85C\uAC00\uAE30"] }) }), _jsxs("div", { className: cn(TitleWrapper), ref: stickyRef, children: [_jsx("div", { className: cn(miniTitle), ref: subTitleRef, children: "\uB2F9\uC2E0\uC774 \uBBFF\uC744 \uC218 \uC788\uB294 \uC601\uC5B4\uAD50\uC7AC" }), _jsxs("div", { className: cn(mainTitle), ref: mainTitleRef, children: [_jsx("div", { className: "flex justify-center items-center w-40 md:w-80 ml:w-120", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/img-logo-tosel-darkmode.svg", alt: "", className: "max-w-full h-auto" }) }), _jsx("div", { className: "h-full w-0.5 bg-white" }), _jsx("div", { children: " books " })] })] }), _jsx("div", { className: cn(bookWrapper), ref: bookRef, children: _jsx("div", { className: cn("w-72 h-100 md:w-100 md:h-140 bg-white z-10 rounded-2xl shadow-main overflow-y-scroll scrollbar-hidden snap-y snap-mandatory"), ref: bookScrollRef, children: _jsx(ScrollBookComponent, {}) }) }), bookData.map((item, index) => {
+                    }, children: [_jsx("div", { children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "size-6", children: _jsx("path", { d: "M2.25 2.25a.75.75 0 0 0 0 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 0 0-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 0 0 0-1.5H5.378A2.25 2.25 0 0 1 7.5 15h11.218a.75.75 0 0 0 .674-.421 60.358 60.358 0 0 0 2.96-7.228.75.75 0 0 0-.525-.965A60.864 60.864 0 0 0 5.68 4.509l-.232-.867A1.875 1.875 0 0 0 3.636 2.25H2.25ZM3.75 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM16.5 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z" }) }) }), "\uAD50\uC7AC\uBAB0 \uBC14\uB85C\uAC00\uAE30"] }) }), _jsxs("div", { className: cn(TitleWrapper), ref: stickyRef, children: [_jsx("div", { className: cn(miniTitle), ref: subTitleRef, children: "\uB2F9\uC2E0\uC774 \uBBFF\uC744 \uC218 \uC788\uB294 \uC601\uC5B4\uAD50\uC7AC" }), _jsxs("div", { className: cn(mainTitle), ref: mainTitleRef, children: [_jsx("div", { className: "flex justify-center items-center w-40 md:w-80 ml:w-120", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/img-logo-tosel-darkmode.svg", alt: "", className: "max-w-full h-auto" }) }), _jsx("div", { className: "h-full w-0.5 bg-white" }), _jsx("div", { children: " books " })] })] }), _jsx("div", { className: cn(bookWrapper), ref: bookRef, children: _jsx("div", { className: cn("w-72 h-100 xm:w-100 xm:h-140 bg-white backdrop-blur-md z-10 rounded-xl shadow-main overflow-y-scroll scrollbar-hidden snap-y snap-mandatory"), ref: bookScrollRef, children: _jsx(ScrollBookComponent, {}) }) }), bookData.map((item, index) => {
                 // item.levelLow 값을 LevelKey로 변환하기 전에 유효성 검사
                 const lowLevelStyle = getLevelStyle(item.levelLow); // 안전하게 캐스팅
                 const highLevelStyle = getLevelStyle(item.levelHigh); // 이 부분도 마찬가지로
@@ -193,71 +261,11 @@ export default function SectionA() {
                         if (el) {
                             refs.current[index] = el;
                         }
-                    }, children: [_jsxs("div", { className: cn(bookTitle), children: [_jsx("div", { children: item.title }), _jsx("div", { className: "text-base text-gray-medium", children: item.type })] }), _jsx("div", { className: "h-100 w-full shrink-0" }), _jsxs("div", { className: "h-full w-full pt-5 flex flex-col justify-start items-center", children: [_jsxs("div", { className: "w-fit h-fit flex flex-row gap-2", children: [_jsx("div", { className: `w-fit h-fit px-2 py-1 text-sm rounded-md font-bold ${lowLevelStyle.textColor} ${lowLevelStyle.bgColor}`, children: lowLevelStyle.name }), "~", _jsx("div", { className: `w-fit h-fit px-2 py-1 text-sm rounded-md font-bold ${highLevelStyle.textColor} ${highLevelStyle.bgColor}`, children: highLevelStyle.name })] }), isMD && (_jsx("div", { className: "text-center font-medium text-sm", children: item.description }))] })] }, item.id));
+                    }, children: [_jsx("div", { className: cn(bookTextWrapper), children: _jsxs("div", { className: cn(bookTextBox, item.type == "학습 시리즈"
+                                    ? "md:bg-blue-pastel/30"
+                                    : "md:bg-green-light"), children: [_jsx("div", { children: item.title }), _jsx("div", { className: "text-base text-gray-medium", children: item.type }), isMD && (_jsxs("div", { className: "w-fit h-fit flex flex-col lg:flex-row gap-2 mt-5 lg:items-center items-start", children: [_jsx("div", { className: `w-fit h-fit px-2 py-1 text-xs xm:text-sm rounded-md font-bold ${lowLevelStyle.textColor} ${lowLevelStyle.bgColor}`, children: lowLevelStyle.name }), _jsxs("div", { className: "flex flex-row gap-2 items-center lg:m-0 ml-5", children: ["~", _jsx("div", { className: `w-fit h-fit px-2 py-1 text-xs xm:text-sm rounded-md font-bold ${highLevelStyle.textColor} ${highLevelStyle.bgColor}`, children: highLevelStyle.name })] })] }))] }) }), isMD ? (_jsx("div", { className: "h-full w-72 xm:w-120 shrink-0" })) : (_jsx("div", { className: "h-100 w-full shrink-0" })), _jsx("div", { className: "h-full w-full pt-5 flex flex-col justify-start md:justify-center items-center md:items-end md:pr-5 pr-0", children: isMD ? (_jsx("div", { className: "text-base text-gray-dark font-medium mt-5 w-full", children: item.description })) : (_jsxs("div", { className: "w-fit h-fit flex flex-row gap-2", children: [_jsx("div", { className: `w-fit h-fit px-2 py-1 text-sm rounded-md font-bold ${lowLevelStyle.textColor} ${lowLevelStyle.bgColor}`, children: lowLevelStyle.name }), "~", _jsx("div", { className: `w-fit h-fit px-2 py-1 text-sm rounded-md font-bold ${highLevelStyle.textColor} ${highLevelStyle.bgColor}`, children: highLevelStyle.name })] })) })] }, item.id));
             })] }));
 }
-const bookData = [
-    {
-        id: 1,
-        type: "학습 시리즈",
-        title: "Speaking Series",
-        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
-        description: "어쩌",
-        levelLow: "PS",
-        levelHigh: "HJ",
-        link: "",
-    },
-    {
-        id: 2,
-        type: "학습 시리즈",
-        title: "Story Series",
-        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
-        description: "어쩌",
-        levelLow: "PS",
-        levelHigh: "JR",
-        link: "",
-    },
-    {
-        id: 3,
-        type: "학습 시리즈",
-        title: "Listening Series",
-        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
-        description: "어쩌",
-        levelLow: "PS",
-        levelHigh: "HJ",
-        link: "",
-    },
-    {
-        id: 4,
-        type: "학습 시리즈",
-        title: "Reading Series",
-        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
-        description: "어쩌",
-        levelLow: "PS",
-        levelHigh: "HJ",
-        link: "",
-    },
-    {
-        id: 5,
-        type: "학습 시리즈",
-        title: "Grammar Series",
-        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
-        description: "어쩌",
-        levelLow: "PS",
-        levelHigh: "HJ",
-        link: "",
-    },
-    {
-        id: 6,
-        type: "학습 시리즈",
-        title: "VOCA Series",
-        imgSrc: "https://resource.tosel.co.kr/images/SP-COVER-PS.png",
-        description: "어쩌",
-        levelLow: "PS",
-        levelHigh: "HJ",
-        link: "",
-    },
-];
 const levelStyles = {
     CO: {
         name: "cocoon",
@@ -302,12 +310,15 @@ export function ScrollBookComponent() {
     const container = {
         sizes: "w-full h-fit relative",
         displyas: "flex flex-col",
-        backgrounds: "bg-white",
+        backgrounds: "",
     };
     const imageWrapper = {
-        sizes: "w-72 h-100 md:w-100 md:h-140",
-        imgStyling: "bg-contain bg-no-repeat bg-center",
+        display: "relative",
+        sizes: "w-72 h-100 xm:w-100 xm:h-140",
+        imgStyling: " z-10 p-20",
         scrollActions: "snap-start",
     };
-    return (_jsx("div", { className: cn(container), children: bookData.map((item) => (_jsx("div", {}, item.id))) }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(imageWrapper), children: _jsx("div", { className: "absolute top-0 left-0 w-full h-full bg-contain bg-no-repeat bg-center", style: {
+                        backgroundImage: `url(https://resource.tosel.co.kr/images/SP-COVER-PS.png)`,
+                    } }) }), bookData.map((item) => (_jsx("div", { className: cn(imageWrapper), children: _jsx("div", { className: "absolute top-12 left-12 w-[calc(100%-96px)] h-[calc(100%-96px)] bg-contain bg-no-repeat bg-center", style: { backgroundImage: `url(${item.imgSrc})` } }) }, item.id)))] }));
 }

package/layout/template/Legacy/Table.js

@@ -119,7 +119,7 @@ const LevelConvert = {
     4: "BA",
     3: "JR",
     6: "HJ",
-    11: "CC",
+    11: "CO",
 };
 const TextColorConvert = {
     PS: "text-ps-pink",
@@ -128,7 +128,7 @@ const TextColorConvert = {
     JR: "text-jr-blue",
     HJ: "text-hj-blue",
     AD: "text-gray-dark",
-    CC: "text-gray-dark",
+    CO: "text-gray-dark",
     IN: "text-gray-dark",
 };
 function Row({ examName, examDate, reports, groupReport }) {

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.d.ts

@@ -1,4 +1,4 @@
-type Level = "CC" | "PS" | "ST" | "BA" | "JR" | "HJ" | "AD";
+type Level = "CO" | "PS" | "ST" | "BA" | "JR" | "HJ" | "AD";
 type ExamType = "REG" | "IST" | "CMP";
 export interface TranscriptProps {
     info: {

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;
+}>;