@edu-tosel/design 1.0.265 → 1.0.267

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

@@ -1,81 +0,0 @@
-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, theme, }) {
-    const isLoaded = usePageLoaded();
-    const [currentWidth, setCurrentWidth] = useState(0);
-    const widthPercentage = (score / total) * 100;
-    const scalePercentage = scale && typeof scale === "number"
-        ? ((Math.floor(total / scale) * scale * 100) / total).toFixed(0)
-        : undefined;
-    const subScorePercentage = subScore ? (subScore / total) * 100 : undefined;
-    useEffect(() => {
-        if (isLoaded) {
-            let width = 0;
-            const interval = setInterval(() => {
-                width += 1;
-                if (width >= widthPercentage) {
-                    clearInterval(interval);
-                    setCurrentWidth(widthPercentage);
-                }
-                else {
-                    setCurrentWidth(width);
-                }
-            }, 10); // 속도 조정 가능
-        }
-    }, [isLoaded, widthPercentage]);
-    const setWrapper = {
-        displays: "flex flex-col sm:flex-row justify-center items-center",
-        sizes: "w-full h-fit",
-        spacings: "p-5 gap-5",
-    };
-    const bar = {
-        displays: "relative flex flex-row justify-start",
-        sizes: "w-full h-4 rounded-full",
-        backgroudns: "bg-gray-light print:bg-green-light",
-        spacings: "my-auto",
-    };
-    const barFill = {
-        sizes: "h-full rounded-full",
-        animations: "transition-all duration-500 ease-out",
-        backgrounds: "bg-gradient-to-r from-crimson-burgundy to-green-dark shadow-green",
-        printOptions: "print:shadow-none",
-    };
-    const scoreTag = {
-        sizes: "h-5 w-10 rounded-md",
-        position: "-translate-x-14 -translate-y-2",
-        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)
-        : undefined;
-    return (_jsx("div", { className: cn(setWrapper), children: _jsxs("div", { className: "relative w-full h-20 flex flex-[1] justify-center items-center px-5 pt-8 pb-2 overflow-visible", children: [_jsxs("div", { className: cn(bar), children: [_jsx("div", { className: "absolute top-0 left-0 w-full h-full flex", children: _jsx("div", { className: cn(barFill, "duration-0 opacity-0 print:opacity-100"), style: {
-                                    width: `${widthPercentage}%`,
-                                } }) }), _jsx("div", { className: cn(barFill, "opacity-100 print:opacity-0"), style: {
-                                width: `${currentWidth}%`,
-                            } }), _jsx("div", { className: cn(graphTitle), children: title })] }), _jsx("div", { className: "absolute -right-1 text-gray-medium font-medium text-xs", children: total }), _jsx("div", { className: cn("absolute left-0 flex flex-row h-full justify-between items-center text-sm text-gray-medium -translate-y-5 p-5"), style: {
-                        width: `${scalePercentage}%`,
-                    }, children: scaleTicks &&
-                        scaleTicks.map((tick) => (_jsxs("div", { className: "w-0 relative text-xs", children: [tick != total && (_jsx("div", { className: "absolute left-3 -top-2", children: tick })), !(tick == 0 || tick == total) && (_jsx("div", { className: "absolute left-2 -top-1 h-4 w-[1px] bg-gray-medium/20" }))] }, tick))) }), _jsx("div", { className: "absolute flex w-full h-full justify-start items-center", style: {
-                        transform: `translateX(${widthPercentage}%)`,
-                    }, children: _jsx("div", { className: cn(scoreTag), children: score.toFixed(1) }) }), subScore && (_jsx("div", { className: "absolute flex w-full h-full justify-start items-center", style: {
-                        transform: `translateX(${subScorePercentage}%)`,
-                    }, 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/BarGraphDuo.d.ts

@@ -1,10 +0,0 @@
-/**
- 표형식의 그래픽요소에서 나의 점수와 지표가 될만한 점수를 병렬로 표현하는 그래프입니다.
- */
-interface DuoBarProps {
-    score: number;
-    subScore: number;
-    total: number;
-}
-export declare function BarGraphDuo({ score, subScore, total }: DuoBarProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function BarGraphDuo({ score, subScore, total }) {
-    const myWidthPercentage = (score / total) * 100;
-    const subWithPercentage = (subScore / total) * 100;
-    return (_jsxs("div", { className: "w-full h-fit flex flex-col gap-1 shrink-0 py-2 px-0 relative", children: [_jsx("div", { className: "h-fit text-[10px] bg-green-dark text-white text-start rounded-[5px] px-1", style: { width: `${myWidthPercentage}%` }, children: "My Score" }), _jsx("div", { className: "h-fit text-[10px] bg-crimson-burgundy text-white text-start px-1 rounded-[5px]", style: { width: `${subWithPercentage}%` }, children: "Average" })] }));
-}

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

@@ -1,11 +0,0 @@
-import { Theme } from "../../interface";
-interface BarGraphMultiProps {
-    name: string;
-    data: number;
-}
-export declare const BarGraphMulti: ({ maxScore, data, }: {
-    maxScore: number;
-    theme: Theme;
-    data: BarGraphMultiProps[];
-}) => import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, } from "recharts";
-export const BarGraphMulti = ({ maxScore, data, }) => {
-    const chartData = data;
-    return (_jsx("div", { className: "overflow-auto w-full scrollbar-hidden pt-5", children: _jsx("div", { className: "flex w-full flex-row min-w-[640px]", children: _jsx("div", { className: "flex w-full h-[240px] ", children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(BarChart, { data: chartData, children: [_jsx(XAxis, { dataKey: "name", tick: {
-                                    fontSize: 12,
-                                    fill: "#888888",
-                                }, tickMargin: 8 }), _jsx(YAxis, { domain: [0, maxScore], tickFormatter: () => "", width: 0 }), _jsx(Bar, { dataKey: "data", fill: "#105652", radius: [4, 4, 0, 0], barSize: 32 })] }) }) }) }) }));
-};

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

@@ -1,10 +0,0 @@
-import { Theme } from "../../interface";
-interface GaugeProps {
-    score: number;
-    maxScore: number;
-    isGrade?: boolean;
-    theme: Theme;
-    noAnimation: Boolean;
-}
-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,68 +0,0 @@
-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, noAnimation, }) => {
-    const prepareNoAnimationPercentage = () => {
-        if (isGrade) {
-            return ((10 - score) / 9) * 100;
-        }
-        else {
-            return (score / maxScore) * 100;
-        }
-    };
-    const widthPercentage = prepareNoAnimationPercentage();
-    const limitedScore = score.toFixed(1);
-    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-xl",
-        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 },
-            ];
-        }
-    };
-    // 단체 성적표에 대한 분기 처리: 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("div", { className: cn(scoreText), children: isGrade ? score : limitedScore })] }));
-    }
-};

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

@@ -1,11 +0,0 @@
-interface LSWRCellProps {
-    data: {
-        subject: string;
-        A: number;
-        B: number;
-        fullMark: number;
-        partIndicies: number[];
-    }[];
-}
-export declare function LSWRChart({ data }: LSWRCellProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,44 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createRecord } from "../../../../../util";
-const partDescription = [
-    {
-        number: 1,
-        description: "Evaluates the ability to listen to and comprehend short conversations.",
-    },
-    {
-        number: 2,
-        description: "Evaluates the ability to comprehend short conversations and select the most appropriate picture.",
-    },
-    {
-        number: 3,
-        description: "Evaluates the ability to understand short conversations and answer questions about them.",
-    },
-    {
-        number: 4,
-        description: "Evaluates the ability to understand short talks and infer the intended meanings by answering questions.",
-    },
-    {
-        number: 5,
-        description: "Evaluates the ability to recognize topics and implications in various reading materials and select the best answers to questions about them.",
-    },
-    {
-        number: 6,
-        description: "Evaluates the ability to interpret sentence meanings and complete sentences using appropriate words, structure, and grammar.",
-    },
-    {
-        number: 7,
-        description: "Evaluates the ability to skim, analyze, and infer from practical reading materials and select the best answers to questions about them.",
-    },
-    {
-        number: 8,
-        description: "Evaluates the ability to recognize topics and implications in various reading materials and select the best answers to questions about them.",
-    },
-];
-const partDescriptionRecord = createRecord(partDescription, "number");
-export function LSWRChart({ data }) {
-    return (_jsx("div", { className: "w-full h-full flex flex-col", children: data.map(({ partIndicies, subject, A, B }) => {
-            return (_jsxs("div", { className: "flex w-full h-full even:bg-white odd:bg-gray-light", children: [_jsx("div", { className: "p-2 font-bold bg-crimson-burgundy text-white w-10 shrink-0 text-center", children: subject }), _jsxs("div", { className: "w-16 shrink-0 flex flex-col justify-center items-center p-2 text-center leading-tight", children: [_jsxs("div", { className: "text-green-dark font-bold text-base", children: [A.toFixed(0), "%"] }), _jsxs("div", { className: "text-crimson-burgundy font-medium text-xs leading-none", children: [B.toFixed(0), "%"] })] }), _jsx("div", { className: "flex flex-col justify-center", children: partIndicies.map((partIndex) => {
-                            return (_jsxs("div", { className: "text-[10px] leading-tight p-1 ", children: [_jsxs("span", { className: "font-bold", children: ["part ", partDescriptionRecord[partIndex].number, ":", " "] }), partDescriptionRecord[partIndex].description] }));
-                        }) })] }));
-        }) }));
-}

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

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

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

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useResponsive } from "../../../../../hook";
-import { LevelToStyleMap } from "../atom/LevelToStyleMap";
-export default function LevelIndex({ transcriptLevel, }) {
-    const levels = ["CO", "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/molecule/MIChart.d.ts

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

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

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../../../../util";
-// 8가지 지능에 대한 설명
-const multipleIntelligenceDescription = [
-    {
-        title: "자연친화지능",
-        description: "동식물이나 날씨 자동차와 같은 주변 사물을 자세히 관할하여 차이점이나 공통점을 찾고 분석하는 재능입니다. 과학자나 공학자, 동물이나 식물을 다루는 직업 등의 직종에서 요구되는 지능으로 볼 수 있습니다. 영어로 동식물, 기호 등에 대해 묘사하고 서술하기, 자연용어, 인체내부 용어 찾아내고 영어로 적기, 원소와 원소기호를 영어로 나타내기, 날씨와 생활에 관련된 영어표현하기 등의 학습방법이 있습니다.",
-    },
-    {
-        title: "인간친화지능",
-        description: "가정이나 집단 등에서 사람들과 교류하고 타인의 감정과 행동을 파악하는 재능입니다. 정치가, 종교인, 마케터, 교사 등의 직종에 요구되는 지능으로 볼 수 있습니다. 영어토론, 세계의 문화 등을 담은 원서 읽기, 단체활동을 통한 영어학습, 다른 사람들의 행복과 슬픔에 대해 간단히 영어로 정리하는 등의 학습방법이 있습니다.",
-    },
-    {
-        title: "자기성찰지능",
-        description: "자기 자신의 심리와 정서를 잘 파악하고 표출하면서 자신의 감정을 잘 다스리는 재능입니다. 소설가, 상담가, 임상학자, 심리학자 등의 직종에 요구되는 지능으로 볼 수 있습니다. 혼자 공부하고 생각하는 시간을 갖는 것을 좋아하기 때문에 영어로 일기 쓰기, 컴퓨터를 활용한 영어공부, 삶을 다룬 영어책 읽기, 영어로 자신이 생각하는 것과 느낌 등을 표현하는 활동 등의 학습방법이 있습니다.",
-    },
-    {
-        title: "신체운동지능",
-        description: "자신의 신체적 운동을 통제하고 물체를 솜씨 있게 다루며, 춤, 운동, 여가등을 쉽게 익히고 창조하는 재능입니다. 운동선수, 프로게이머, 행동예술가, 배우 등의 직종에 요구도는 지능으로 볼 수 있습니다. 직접 다룰 수 있는 게임, 놀이 등을 활용해서 오감체험을 통해 영어 문장 말하기, 무언가 만들고 조립하는 과정을 통해 영어 배우기, 신체활동을 하는 과정에서 영어를 배우는 등의 학습방법이 있습니다.",
-    },
-    {
-        title: "공간지능",
-        description: "공간적, 시각적 세계를 정확히 지각하고 그 지각한 내용을 머릿속에서 변형, 회전시킬 수 있는 재능입니다. 건축가, 예술가, 디자이너, 발명가, 게임개발자, 웹툰작가 등의 직종에 요구되는 지능으로 볼 수 있습니다. 영어책을 읽힌 후, 가장 기억에 남 는 장면을 떠올리며 도표나 그림을 그려 설명하기, 조각 그림 맞추기, 스케치북에 그림을 그리며 영어단어 익히기, 영어 이미지 연상 활동 등의 학습방법이 있습니다",
-    },
-    {
-        title: "음악지능",
-        description: "음악뿐만 아니라 소리와 관련된 모든 사항에 대해 남보다 민감하게 반응하거나 분석할 수 있는 재능입니다. 작곡가, 가수, 연주가, 프로듀서, 랩퍼 등의 직종에 요구되는 지능으로 볼 수 있습니다. 영어 억양과 리듬을 익히기 위한 챈트, 노래 등을 활용하면 효과적이며, 영어 노래 부르기, 악기들의 영단어 공부하기, 팝송 등의 영어 노래 받아쓰기, 영어 랩을 암기시키기 등의 학습방법이 있습니다.",
-    },
-    {
-        title: "논리수학지능",
-        description: "실험 등을 논리적으로 검증하는 것을 좋아하고 수리적, 논리적 사고가 우수한 재능입니다. 프로그래머, 물리학자, 컴퓨터공학자, 금융인, 회계사, 법률가 등의 직종에 요구되는 지능으로 볼 수 있습니다. 영어로 된 수학퀴즈, 영어공부를 하는데 있어서 규칙 등을 만들어 주고 영어 문장에 소개된 내용들의 개념화 돕기, 수치와 관련된 글을 읽고 그래프 그려 보기 등의 학습방법이 있습니다.",
-    },
-    {
-        title: "언어지능",
-        description: "외국어를 습득하는 능력을 포함하여 말이나 글을 통하여 언어를 효과적으로 구사할 수 있는 재능입니다. 작가, 정치가, 변호사, 언론인, 방송진행자 등의 직종에 요구되는 지능으로 볼 수 있습니다. 영어 원서읽기, 낱말 맞추기나 끝말잇기 등 영어단어 암기, 영어일기 쓰기, 영어 애니메이션이나 영화 보여주고 다음 장면에 대해 상상하며 이야기하기, 영어로 된 글 읽고 다양한 감정을 나타내기 등의 학습방법이 있습니다.",
-    },
-];
-export function MIChart() {
-    const cellHeader = {
-        textStyles: "text-center text-white text-sm font-medium",
-        displays: "flex justify-center items-center",
-        spacings: "p-2",
-    };
-    const cellNormal = {
-        textStyles: "text-gray-dark",
-        displays: "flex justify-center items-center",
-    };
-    return (_jsx("div", { className: cn("overflow-auto w-full scrollbar-hidden rounded-lg mt-5 print:border print:border-gray-medium/70 cursor-default shadow-main print:shadow-none print:hidden"), children: _jsxs("div", { className: "min-w-[172mm] w-full", children: [_jsxs("div", { className: "flex flex-row bg-gradient-to-r from-crimson-burgundy to-green-dark", children: [_jsx("div", { className: cn(cellHeader, "flex-[1] print:static sticky left-0 bg-crimson-burgundy"), children: "Category" }), _jsx("div", { className: cn(cellHeader, "flex-[5] p-2"), children: "Explanation" })] }), multipleIntelligenceDescription.map(({ description, title }) => {
-                    return (_jsxs("div", { className: "flex flex-row text-sm bg-white odd:bg-gray-light", children: [_jsx("div", { className: cn(cellNormal, "flex-[1] print:static sticky left-0 border-r-1 p-2 border-crimson-burgundy backdrop-blur-md text-base"), children: title }), _jsx("div", { className: cn(cellNormal, "flex-[5] text-sm p-5"), children: description })] }));
-                })] }) }));
-}

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

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

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

@@ -1,60 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../../../../util";
-const ociDescription = [
-    {
-        name: "CC",
-        title: "Communicative Competency",
-        description: "The ability to communicate by understanding written and spoken texts through one's lexical knowledge, reading comprehension skills, and grammatical knowledge, as well as by comprehending topics, main points, and details in each text.",
-        profession: "Humanities and Social Sciences, Language Professions, Humanities Education, Writing",
-    },
-    {
-        name: "PS",
-        title: "Problem-Solving Competency",
-        description: "The ability to recognize a problem, propose and apply alternatives through creativity, logic, critical organization, classification, and synthesis of information, and to assess potential consequences.",
-        profession: "Accounting, IT, Legal, Social Activities",
-    },
-    {
-        name: "RM",
-        title: "Resource Management Competency",
-        description: "The ability to plan the use and allocation of resources in practical settings by identifying and gathering various resources, and by understanding and evaluating their relationships.",
-        profession: "Planning Services, Social Services, Educational Services",
-    },
-    {
-        name: "IS",
-        title: "Interpersonal / Social Competency",
-        description: "The ability to discover shared interests with individuals from diverse backgrounds, to connect with and lead others, and to collaborate effectively.",
-        profession: "Management, Sales-related Services, Office Work, General Services",
-    },
-    {
-        name: "IU",
-        title: "Information Utilization and Processing Competency",
-        description: "The ability to collect task-related information and to process it quickly and skillfully by performing cognitive tasks such as classifying or sorting information by type, characteristic, or size.",
-        profession: "Engineering, Video Technology, Web, Games, Animation",
-    },
-    {
-        name: "OP",
-        title: "Organizational Performance Competency",
-        description: "The ability to understand and design organizational systems, and to think logically by applying deductive and inductive reasoning, classifying, identifying, and explaining information.",
-        profession: "Educational Services, Planning, Sales-related Services, Finance, and Management",
-    },
-    {
-        name: "SS",
-        title: "Self-development and Self-regulation Competency",
-        description: "The ability to understand one's own characteristics, aptitudes, and interests, to acquire necessary qualifications through self-management, to self-motivate, and to foster positive learning experiences for ongoing personal development.",
-        profession: "Safety Professions, Medical Professions, Environmental Professions",
-    },
-];
-export function OCIChart() {
-    const cellHeader = {
-        textStyles: "text-center text-white text-sm font-medium",
-        displays: "flex justify-center items-center",
-        spacings: "p-2",
-    };
-    const cellNormal = {
-        textStyles: "text-gray-dark",
-        displays: "flex justify-center items-center",
-    };
-    return (_jsx("div", { className: cn("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 flex-row bg-gradient-to-r from-crimson-burgundy to-green-dark", children: [_jsx("div", { className: cn(cellHeader, "flex-[1] print:static sticky left-0 bg-crimson-burgundy"), children: "Category" }), _jsx("div", { className: cn(cellHeader, "flex-[5] p-2"), children: "Competency Category" }), _jsx("div", { className: cn(cellHeader, "flex-[2]"), children: "Professional Areas" })] }), ociDescription.map(({ description, profession, title }) => {
-                    return (_jsxs("div", { className: "flex flex-row text-sm bg-white odd:bg-gray-light", children: [_jsx("div", { className: cn(cellNormal, "flex-[1] print:static sticky left-0 border-r-1 p-2 border-crimson-burgundy backdrop-blur-md text-[10px]"), children: title }), _jsx("div", { className: cn(cellNormal, "flex-[5] text-xs p-2"), children: description }), _jsx("div", { className: cn(cellNormal, "flex-[2] text-xs p-2"), children: profession })] }));
-                })] }) }));
-}

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

@@ -1,10 +0,0 @@
-interface RadarGraphProps {
-    data: {
-        subject: string;
-        A: number;
-        B: number;
-        fullMark: number;
-    }[];
-}
-export declare function RadarGraph({ data }: RadarGraphProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,5 +0,0 @@
-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 (_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/BarCardCol.d.ts

@@ -1,8 +0,0 @@
-import { SectionBarProps, Theme } from "../../interface";
-interface BarCardColProps {
-    section1: SectionBarProps;
-    section2: SectionBarProps;
-    theme: Theme;
-}
-export declare function BarCardCol({ section1, section2, theme }: BarCardColProps): import("react/jsx-runtime").JSX.Element;
-export {};

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 BarCardCol({ section1, section2, 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: "px-5",
-        sizes: "w-full h-full",
-        textStyles: "break-keep leading-tight",
-    };
-    const subScriptStyles = {
-        listStyles: "list-disc list-inside",
-        sizes: "w-full",
-        spacings: "p-5",
-        textStyles: "leading-tight text-[10px]",
-    };
-    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), children: [_jsx(CardTitle, { title: "Grade and Average Score", theme: theme }), _jsxs("div", { className: "flex sm:flex-row flex-col sm:mt-0 mt-5", children: [_jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: section1.title ? section1.title : "section1", score: section1.score, total: section1.total, subScore: section1.subScore, scale: section1.scale ? section1.scale : 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles, section1.subScripts ? "text-xs" : "text-sm"), children: section1.script }), _jsx("div", { className: cn(subScriptStyles), children: section1.subScripts?.map((text, index) => (_jsx("li", { children: text }, index))) })] }), _jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: section2.title ? section2.title : "section2", score: section2.score, total: section2.total, subScore: section2.subScore, scale: section2.scale ? section2.scale : 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles, section1.subScripts ? "text-xs" : "text-sm"), children: section2.script }), _jsx("div", { className: cn(subScriptStyles), children: section2.subScripts?.map((text, index) => (_jsx("li", { children: text }, index))) })] })] })] }));
-}

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

@@ -1,8 +0,0 @@
-import { SectionBarProps, Theme } from "../../interface";
-interface BarCardColProps {
-    section1: SectionBarProps;
-    section2: SectionBarProps;
-    theme: Theme;
-}
-export declare function BarCardRow({ section1, section2, theme }: BarCardColProps): import("react/jsx-runtime").JSX.Element;
-export {};

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({ section1, section2, 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-xs break-keep",
-    };
-    const subScriptStyles = {
-        listStyles: "list-disc list-inside",
-        sizes: "w-full",
-        spacings: "p-5",
-        textStyles: "leading-tight text-xs",
-    };
-    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), children: [_jsx(CardTitle, { title: "Grade and Average Score", theme: theme }), _jsxs("div", { className: "flex flex-col sm:my-0 mt-5", children: [_jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: section1.title ? section1.title : "section1", score: section1.score, total: section1.total, subScore: section1.subScore, scale: section1.scale ? section1.scale : 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles), children: section1.script })] }), _jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: section2.title ? section2.title : "section2", score: section2.score, total: section2.total, subScore: section2.subScore, scale: section2.scale ? section2.scale : 10, theme: theme }), _jsx("div", { className: cn(ScriptStyles), children: section2.script })] })] })] }));
-}

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

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

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

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import SVG from "../../../../../asset/SVG";
-import { cn } from "../../../../../util";
-import CardTitle from "../atom/CardTitle";
-import { printBoxStyles } from "../atom/PrintBoxStyles";
-export default function HonorCard({ result }) {
-    const cardWrapper = {
-        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",
-    };
-    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), onClick: () => (window.location.href = `https://honor.tosel.co.kr/`), children: [_jsx(CardTitle, { theme: "green", title: "\uBA85\uC608\uC758 \uC804\uB2F9" }), _jsxs("div", { className: "w-full h-full flex flex-row px-5 gap-x-5 justify-center items-center", children: [_jsxs("div", { className: "flex flex-col w-full flex-1 justify-center items-center xs:hidden md:flex print:width-30", 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 py-4 xs:py-0 aspect-square flex-1 print:w-30", 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

@@ -1,8 +0,0 @@
-import { Information } from "../Transcript";
-export default function IdCard({ info, option, score, }: {
-    info: Information;
-    score?: number;
-    option?: {
-        isAdvanced?: boolean;
-    };
-}): import("react/jsx-runtime").JSX.Element;