@edu-tosel/design 1.0.184 → 1.0.187

package/layout/template/Ticket/academy/Academy.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import moment from "moment-timezone";
+import { LevelString } from "../../../../_test/interface";
+import GroupTicket from "./AcademyTicket";
+import React, { useRef, useState } from "react";
+import { Label, Row, TableCard } from "@edu-tosel/design";
+import { cn } from "../../../../util";
+import { HiOutlinePrinter } from "react-icons/hi2";
+import { HiOutlineTableCells } from "react-icons/hi2";
+import { useReactToPrint } from "react-to-print";
+export default function Academy({ applicationsData, examDate, examName, }) {
+    const container = {
+        displays: "flex items-center justify-center gap-6",
+    };
+    const btn = {
+        displays: "flex items-center justify-center gap-2",
+        rounded: "rounded-lg",
+        backgrounds: "bg-white/50",
+        texts: " text-green-dark font-semibold",
+        shadows: "shadow-main",
+        sizes: "w-1/3 h-full px-2.5",
+        cursors: "cursor-pointer",
+    };
+    const formattedData = Object.values(applicationsData ?? {})
+        .filter((app) => app.applicationId !== null)
+        .slice(0, -1);
+    const [selectedStudent, setSelectedStudent] = useState(formattedData[0]);
+    const handleSelectStudent = (student) => {
+        setSelectedStudent(toRender(student));
+    };
+    const ref = useRef(null);
+    const refALot = useRef(null);
+    const handlePrint = useReactToPrint({
+        content: () => ref.current,
+    });
+    const ticketRefs = useRef(formattedData.map(() => React.createRef()));
+    const printAllTickets = useReactToPrint({
+        content: () => refALot.current,
+        onBeforeGetContent: () => {
+            if (refALot.current) {
+                refALot.current.style.display = "block";
+            }
+            return new Promise((resolve) => {
+                setTimeout(resolve, 1);
+            });
+        },
+        onAfterPrint: () => {
+            if (refALot.current) {
+                refALot.current.style.display = "none";
+            }
+        },
+    });
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "w-full min-h-screen flex items-center justify-center bg-gray-light", children: _jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "w-full h-15 bg-green-dark rounded-lg flex justify-between items-center p-5 text-white text-md shadow-main", children: [_jsx("div", { className: "font-semibold", children: examName }), _jsx("div", { children: "\uACE0\uC0AC\uC7A5 \uC2DC\uD5D8" })] }), _jsx(TableCard, { dataField: dataField, dataSet: {
+                                    items: formattedData ?? [],
+                                    renderItem: (application) => (_jsx(Row.Card, { item: toRender(application), dataField: dataField, onClick: () => handleSelectStudent(application) })),
+                                } }), _jsxs("div", { className: "flex w-full h-12 gap-3", children: [_jsxs("div", { className: cn(btn), onClick: printAllTickets, children: [_jsx(HiOutlinePrinter, { className: "text-2xl" }), _jsx("div", { className: "text-center", children: "\uC804\uCCB4 \uC218\uD5D8\uD45C \uCD9C\uB825" })] }), _jsxs("div", { className: cn(btn), onClick: handlePrint, children: [_jsx(HiOutlinePrinter, { className: "text-2xl" }), _jsx("div", { className: "text-center", children: "\uD604\uC7AC \uD559\uC0DD \uCD9C\uB825" })] }), _jsxs("div", { className: cn(btn), children: [_jsx(HiOutlineTableCells, { className: "text-2xl" }), _jsx("div", { className: "text-center", children: "\uC5D1\uC140 \uB2E4\uC6B4\uB85C\uB4DC" })] })] })] }), _jsx("div", { ref: refALot, style: {
+                            display: "none",
+                        }, children: formattedData.map((student, index) => (_jsx(GroupTicket, { ref: ticketRefs.current[index], props: {
+                                exam: {
+                                    title: examName,
+                                    hall: student.examHallName ?? "",
+                                    room: student.examHallRoomName ?? "",
+                                    date: examDate,
+                                    address: "",
+                                    startedAt: moment(new Date()).unix(),
+                                    endedAt: moment(new Date()).unix(),
+                                },
+                                name: student.name ?? "",
+                                birthday: student.birthday ?? "",
+                                profileImageUrl: "",
+                                level: LevelString[student.level ?? "PS"],
+                                code: student.code ?? "",
+                                isAll: true,
+                            } }, student.applicationId))) }), _jsx(GroupTicket, { ref: ref, props: {
+                            exam: {
+                                title: examName,
+                                hall: selectedStudent?.examHallName ?? "",
+                                room: selectedStudent?.examHallRoomName ?? "",
+                                date: examDate,
+                                address: "",
+                                startedAt: moment(new Date()).unix(),
+                                endedAt: moment(new Date()).unix(),
+                            },
+                            name: selectedStudent?.name ?? "",
+                            birthday: selectedStudent?.birthday ?? "",
+                            profileImageUrl: "",
+                            level: LevelString[selectedStudent?.level ?? "PS"],
+                            code: selectedStudent?.code ?? "",
+                        } }), _jsxs("div", { className: "relative w-48 flex flex-row md:flex-col md:h-[700px] gap-4 h-full justify-start mt-5 items-center", children: [_jsxs("div", { className: "sm:absolute hidden sm:flex flex-col gap-4 left-0 top-36", children: [_jsxs("div", { className: "flex-col font-pretendard-var flex", children: [_jsxs("div", { className: "flex flex-row font-bold text-base leading-tight", children: [_jsx("div", { className: "text-crimson-burgundy", children: "OMR \uC791\uC131" }), _jsx("div", { className: "text-gray-dark", children: ", \uC5F0\uC2B5\uD558\uC168\uB098\uC694?" })] }), _jsx("div", { className: "text-gray-dark font-medium text-xs break-keep", children: "\uB9C8\uD0B9\uD39C\uC73C\uB85C \uC791\uC131\uBC95\uC744 \uBBF8\uB9AC \uC5F0\uC2B5\uD574\uBCF4\uC138\uC694!" })] }), _jsx(Label.Button, { title: "OMR \uC778\uC1C4", onClick: () => { }, option: {
+                                            width: "sm",
+                                            height: "xs",
+                                            background: "bg-green-dark",
+                                            text: "text-white font-pretendard-var font-medium",
+                                        } })] }), _jsxs("div", { className: "sm:absolute flex flex-col gap-4 left-0 top-80", children: [_jsxs("div", { className: "flex-col font-pretendard-var hidden sm:flex", children: [_jsxs("div", { className: "flex flex-row font-bold text-base leading-tight", children: [_jsx("div", { className: "text-crimson-burgundy", children: "\uACE0\uC0AC\uC7A5 \uC704\uCE58" }), _jsx("div", { className: "text-gray-dark", children: "\uB97C \uD655\uC778\uD574\uC8FC\uC138\uC694" })] }), _jsx("div", { className: "text-gray-dark font-medium text-xs break-keep", children: selectedStudent?.examHallName })] }), _jsx(Label.Button, { title: "\uC9C0\uB3C4\uC5D0\uC11C \uBCF4\uAE30", onClick: () => {
+                                            window.open(`https://map.kakao.com/?map_type=TYPE_MAP&itemId=168362793&q=${selectedStudent?.examHallName}&urlLevel=3&urlX=507920&urlY=1136302`);
+                                        }, option: {
+                                            width: "sm",
+                                            height: "xs",
+                                            background: "bg-green-dark",
+                                            text: "text-white font-pretendard-var font-medium",
+                                        } })] }), _jsxs("div", { className: "sm:absolute flex flex-col gap-4 left-0 top-128", children: [_jsxs("div", { className: "flex-col font-pretendard-var hidden sm:flex", children: [_jsxs("div", { className: "flex flex-row font-bold text-base leading-tight", children: [_jsx("div", { className: "text-crimson-burgundy", children: "\uC900\uBE44\uBB3C" }), _jsx("div", { className: "text-gray-dark", children: "\uB3C4 \uD655\uC778\uD574\uC8FC\uC138\uC694" })] }), _jsx("div", { className: "text-gray-dark font-medium text-xs break-keep", children: "\uB9C8\uD0B9\uD39C\uC73C\uB85C \uC791\uC131\uBC95\uC744 \uBBF8\uB9AC \uC5F0\uC2B5\uD574\uBCF4\uC138\uC694!" })] }), _jsx(Label.Button, { title: "\uC2DC\uD5D8 \uADDC\uC815 \uD655\uC778", onClick: () => { }, option: {
+                                            width: "sm",
+                                            height: "xs",
+                                            background: "bg-green-dark",
+                                            text: "text-white font-pretendard-var font-medium",
+                                        } })] })] })] }) }) }));
+}
+function toRender(obj) {
+    return {
+        ...obj,
+        levelString: LevelString[obj.level ?? "PS"],
+        formattedBirthday: formatDateToYYMMDD(obj.birthday),
+    };
+}
+function formatDateToYYMMDD(dateString) {
+    if (!dateString) {
+        console.error("Invalid date string provided");
+        return "";
+    }
+    const [year, month, day] = dateString.split("-");
+    return year.slice(2) + month + day;
+}
+const dataField = {
+    name: {
+        title: "이름",
+        size: 20,
+    },
+    formattedBirthday: {
+        title: "생년월일",
+        size: 25,
+    },
+    levelString: {
+        title: "레벨",
+        size: 30,
+    },
+    code: {
+        title: "수험번호",
+        size: 30,
+    },
+    examHallRoomName: {
+        title: "고사실",
+        size: 20,
+    },
+};

package/layout/template/Ticket/academy/AcademyTicket.d.ts

@@ -0,0 +1,21 @@
+interface TicketProps {
+    exam: {
+        title: string;
+        hall: string;
+        room: string;
+        date: string;
+        address: string;
+        startedAt: number;
+        endedAt: number;
+    };
+    name: string;
+    profileImageUrl?: string;
+    birthday: string;
+    level: string;
+    code: string;
+    isAll?: boolean;
+}
+declare const _default: import("react").ForwardRefExoticComponent<{
+    props: TicketProps;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/layout/template/Ticket/academy/AcademyTicket.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../../../util";
+import moment from "moment-timezone";
+function AcademyTicket({ props }, ref) {
+    const { title, date, hall, room, startedAt, endedAt } = props.exam;
+    const { isAll } = props;
+    const isAllSize = isAll ? "w-[210mm] h-[297mm] p-10" : "";
+    //수험번호 섹션 디자인을 위한 배열
+    const numberArray = props.code.split("").map(Number);
+    numberArray.splice(3, 0, null);
+    numberArray.splice(7, 0, null);
+    const container = {
+        sizes: "w-full max-w-[340px] xs:w-[340px] h-[700px] flex flex-col justify-start",
+        spacings: "p-5 print:m-10",
+        boundaries: "border-1 border-gray-medium shadow-main",
+        backgrounds: "bg-white",
+    };
+    const logoWrapper = {
+        displays: "flex flex-row justify-between w-full mb-3",
+    };
+    const svgController = {
+        sizes: "h-8",
+    };
+    const titleDivider = {
+        sizes: "w-full h-0.5",
+        backgrounds: "bg-gradient-to-r from-crimson-burgundy to-green-dark",
+    };
+    const cellWrapper = {
+        displays: "flex flex-row",
+        sizes: "w-full",
+        boundaries: "border-1 border-gray-medium",
+    };
+    const cellTitleLarge = {
+        displays: "flex justify-center items-center shrink-0",
+        sizes: "w-21 h-6",
+        textstyles: "text-2xs font-medium",
+        backgrounds: "bg-gray-light",
+    };
+    const cellTitleSmall = {
+        displays: "flex justify-center items-center shrink-0",
+        sizes: "w-16 h-6",
+        textstyles: "text-2xs font-medium",
+        backgrounds: "bg-gray-light",
+    };
+    const cellText = {
+        sizes: "w-full",
+        displays: "flex justify-center items-center",
+        textstyles: "text-2xs font-medium text-black",
+    };
+    return (_jsx("div", { ref: ref, className: isAllSize, children: _jsxs("div", { className: cn(container), children: [_jsxs("div", { className: cn(logoWrapper), children: [_jsx("img", { className: cn(svgController), src: "/images/logos/logo-itc-main.svg", alt: "" }), _jsx("img", { className: cn(svgController), src: "/images/logos/logo-tosel-main.svg", alt: "" })] }), _jsxs("div", { className: "flex flex-col w-full gap-2.5", children: [_jsx("div", { className: cn(titleDivider) }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-lg font-bold leading-none", children: "\uC218 \uD5D8 \uD45C" }), _jsx("div", { className: "text-sm font-medium leading-none", children: title })] }), _jsx("div", { className: cn(titleDivider) })] }), _jsxs("div", { className: "flex flex-col gap-5 mt-5", children: [_jsxs("div", { className: "flex flex-col gap-0", children: [_jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleLarge), children: "\uC218\uD5D8\uBC88\uD638" }), _jsx("div", { className: "w-full flex flex-row divide-x-[1px] divide-dashed divide-gray-medium/50", children: numberArray.map((num, index) => (_jsx("div", { className: `flex justify-center items-center text-xs font-medium ${num === null
+                                                    ? "w-2.5 shrink-0 bg-gray-light"
+                                                    : "w-full bg-white"}`, children: num !== null ? num : "" }, index))) })] }), _jsxs("div", { className: "font-medium text-2xs", children: ["*OMR (1)\uBC88 \uD56D\uBAA9\uC5D0 \uD574\uB2F9\uBC88\uD638\uB97C \uB530\uB77C\uC11C \uC368\uC8FC\uC138\uC694.", " "] })] }), _jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleLarge), children: "\uB808\uBCA8" }), _jsx("div", { className: cn(cellText), children: props.level })] }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsxs("div", { className: "flex flex-col gap-0 h-full w-21 border-1 border-gray-medium shrink-0", children: [_jsx("div", { className: "h-full w-full bg-cover", style: {
+                                                backgroundImage: `url(${props.profileImageUrl ?? ""})`,
+                                            } }), _jsx("div", { className: cn(cellTitleLarge, "w-full"), children: "\uC0AC\uC9C4" })] }), _jsxs("div", { className: "flex flex-col gap-2 w-full", children: [_jsxs("div", { className: "flex flex-col gap-0", children: [_jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uC774\uB984" }), _jsx("div", { className: cn(cellText), children: props.name })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uC0DD\uB144\uC6D4\uC77C" }), _jsx("div", { className: cn(cellText), children: props.birthday })] })] }), _jsxs("div", { className: "flex flex-col gap-0", children: [_jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uACE0\uC0AC\uC7A5" }), _jsx("div", { className: cn(cellText), children: hall })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleSmall), children: "\uACE0\uC0AC\uC2E4" }), _jsx("div", { className: cn(cellText), children: room })] })] })] })] }), _jsxs("div", { className: "flex flex-col gap-0", children: [_jsxs("div", { className: cn(cellWrapper), children: [_jsx("div", { className: cn(cellTitleLarge, "bg-green-dark/10"), children: "\uC2DC\uD5D8\uC77C\uC790" }), _jsx("div", { className: cn(cellText), children: props.exam.date })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleLarge, "bg-green-dark/10"), children: "\uC785\uC2E4 \uC644\uB8CC\uC2DC\uAC04" }), _jsx("div", { className: cn(cellText), children: moment.unix(startedAt).format("HH시 mm분") })] }), _jsxs("div", { className: cn(cellWrapper, "border-t-0"), children: [_jsx("div", { className: cn(cellTitleLarge, "bg-green-dark/10"), children: "\uC885\uB8CC\uC2DC\uAC04" }), _jsx("div", { className: cn(cellText), children: moment.unix(endedAt).format("HH시 mm분") })] }), _jsxs("div", { className: "flex flex-col mt-1", children: [_jsx("div", { className: "font-medium text-2xs leading-tight", children: "*\uC785\uC2E4\uC2DC\uAC04 \uC774\uD6C4\uC5D0\uB294 \uC785\uC2E4\uC774 \uC81C\uD55C\uB429\uB2C8\uB2E4." }), _jsx("div", { className: "font-medium text-2xs leading-tight", children: "*\uACE0\uC0AC\uC7A5 \uC5EC\uAC74\uC5D0 \uB530\uB77C \uD1F4\uC2E4\uC2DC\uAC04\uC740 \uC870\uAE08\uC529 \uC0C1\uC774\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4." })] })] }), _jsx("div", { className: "w-full border-b-1 border-dashed border-gray-medium" }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "font-bold text-sm leading-tight", children: "\uC751\uC2DC\uC790 \uC720\uC758\uC0AC\uD56D" }), _jsxs("ul", { className: "list-outside list-decimal ml-4 font-medium text-2xs", children: [_jsxs("li", { className: "mb-1", children: ["\uB2E4\uC74C\uC758 \uBB3C\uD488\uC744 \uAF2D \uC900\uBE44\uD574\uC8FC\uC138\uC694:", _jsx("br", {}), " \uCEF4\uD4E8\uD130\uC6A9 \uC0AC\uC778\uD39C / \uC218\uC815 \uD14C\uC774\uD504 / \uC218\uD5D8\uD45C / \uAC80\uC815 \uBCFC\uD39C"] }), _jsxs("li", { className: "mb-1", children: ["\uACE0\uC0AC\uC7A5 \uC704\uCE58\uB97C \uBBF8\uB9AC \uD655\uC778\uD574\uC8FC\uC138\uC694:", _jsx("br", {}), " \uC218\uD5D8\uD45C\uC5D0 \uAE30\uC7AC\uB41C \uACE0\uC0AC\uC7A5, \uACE0\uC0AC\uC2E4 \uC815\uBCF4\uB97C \uD655\uC778\uD574\uC8FC\uC138\uC694."] }), _jsxs("li", { children: ["\uD559\uBD80\uBAA8 \uCD9C\uC785 \uD1B5\uC81C:", _jsx("br", {}), "\uACE0\uC0AC\uC2E4 \uB0B4\uBD80\uC5D0\uB294 \uD559\uBD80\uBAA8\uC758 \uCD9C\uC785\uC774 \uC5C4\uACA9\uD788 \uD1B5\uC81C\uB429\uB2C8\uB2E4."] })] })] })] })] }) }));
+}
+export default forwardRef(AcademyTicket);

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

@@ -1,5 +1,10 @@
 import Layout from "./Layout";
+import Academy from "./academy/Academy";
 declare const Ticket: {
+    Academy: typeof Academy;
+    Paper: import("react").ForwardRefExoticComponent<{
+        props: import("./Ticket").TicketProps;
+    } & import("react").RefAttributes<HTMLDivElement>>;
     Layout: typeof Layout;
 };
 export default Ticket;

package/layout/template/Ticket/index.js

@@ -1,5 +1,9 @@
 import Layout from "./Layout";
+import _Ticket from "./Ticket";
+import Academy from "./academy/Academy";
 const Ticket = {
+    Academy: Academy,
+    Paper: _Ticket,
     Layout,
 };
 export default Ticket;

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

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

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../../util";
+import { CardTitle } from "../atom/CardTitle";
+import { printBoxStyles } from "../atom/PrintBoxStyles";
+import { BarGraph } from "../molecule/BarGraph";
+export function BarCardRow({ data }) {
+    const cardWrapper = {
+        displays: "flex flex-col relative",
+        sizes: "w-full rounded-lg overflow-hidden",
+        backgrounds: "bg-white shadow-main",
+        sapcings: "mt-5",
+    };
+    const cardTitle = {
+        display: "flex flex-row justify-center items-center",
+        sizes: "h-7 shrink-0 w-full",
+        bg: "bg-green-light",
+        textStyles: "text-green-dark font-medium text-sm",
+    };
+    const SectionWrapper = {
+        display: "flex flex-row sm:flex-col items-center justify-center",
+        sizes: "h-full w-full",
+    };
+    const ScriptStyles = {
+        displays: "flex justify-center items-center align-center",
+        spacings: "p-5",
+        sizes: "w-full h-full",
+        textStyles: "text-sm break-keep",
+    };
+    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), children: [_jsx(CardTitle, { title: "Grade and Average Score" }), _jsxs("div", { className: "flex flex-col sm:mt-0 mt-5", children: [_jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: "section1", score: data.analysis.user.section1, total: 50, subScore: data.analysis.nationalAverage.section1, scale: 10 }), _jsx("div", { className: cn(ScriptStyles), children: data.script.section1 })] }), _jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: "section2", score: data.analysis.user.section2, total: 50, subScore: data.analysis.nationalAverage.section2, scale: 10 }), _jsx("div", { className: cn(ScriptStyles), children: data.script.section2 })] })] })] }));
+}

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

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

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../../util";
+import { CardTitle } from "../atom/CardTitle";
+import { printBoxStyles } from "../atom/PrintBoxStyles";
+import { BarGraph } from "../molecule/BarGraph";
+export function BarCardRow({ data }) {
+    const cardWrapper = {
+        displays: "flex flex-col relative",
+        sizes: "w-full rounded-lg overflow-hidden",
+        backgrounds: "bg-white shadow-main",
+        sapcings: "mt-5",
+    };
+    const cardTitle = {
+        display: "flex flex-row justify-center items-center",
+        sizes: "h-7 shrink-0 w-full",
+        bg: "bg-green-light",
+        textStyles: "text-green-dark font-medium text-sm",
+    };
+    const SectionWrapper = {
+        display: "flex sm:flex-row flex-col items-center justify-center",
+        sizes: "h-full w-full",
+    };
+    const ScriptStyles = {
+        displays: "flex justify-center items-center align-center",
+        spacings: "p-5",
+        sizes: "w-full h-full",
+        textStyles: "text-sm break-keep",
+    };
+    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), children: [_jsx(CardTitle, { title: "Grade and Average Score" }), _jsxs("div", { className: "flex flex-col sm:mt-0 mt-5", children: [_jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: "section1", score: data.analysis.user.section1, total: 50, subScore: data.analysis.nationalAverage.section1, scale: 10 }), _jsx("div", { className: cn(ScriptStyles), children: data.script.section1 })] }), _jsxs("div", { className: cn(SectionWrapper), children: [_jsx(BarGraph, { title: "section2", score: data.analysis.user.section2, total: 50, subScore: data.analysis.nationalAverage.section2, scale: 10 }), _jsx("div", { className: cn(ScriptStyles), children: data.script.section2 })] })] })] }));
+}

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

@@ -5,6 +5,8 @@ export interface TranscriptProps {
         name: string;
         nickname?: string;
         imgSrc?: string;
+        qrSrc?: string;
+        sharedSrc?: string;
         code: string;
         birthday: string;
         examName: string;
@@ -36,6 +38,10 @@ export interface TranscriptProps {
                 section1: number;
                 section2: number;
             };
+            ageAverage: {
+                section1: number;
+                section2: number;
+            };
             "10percentageAverage": number;
             "30percentageAverage": number;
         };

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

@@ -1,5 +1,12 @@
 import { TranscriptProps } from "./Transcript";
+import { Level as NarrowLevel } from "../../../../_test/interface";
+type Level = Exclude<NarrowLevel, ""> | "CC";
 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,65 +1,21 @@
 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";
-const examTypeMap = {
-    REG: "정기시험",
-    IST: "기관시험",
-    CMP: "경시대회",
-};
-function getStringfromType(ExamType) {
-    return examTypeMap[ExamType] || "Unknown";
-}
-const LevelToStyleMap = {
-    CC: {
-        name: "Cocoon",
-        bgcolor: "bg-cocoon-green/10",
-        textcolor: "text-cocoon-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",
-    },
-};
-function getStylefromLevel(level, field) {
-    return LevelToStyleMap[level]?.[field] || "Unknown";
-}
+import IdCard, { getStringfromType } from "./atom/IdCard";
+import { printBoxStyles } from "./atom/PrintBoxStyles";
+import { BarCardRow } from "./Organism/BarCardRow";
 function TranscriptDesign({ props }, ref) {
     const { info, result, data } = props;
     const container = {
         printSize: paperSize.a4,
         backgrounds: "print:bg-white",
-        sizes: "w-full mt-2",
+        sizes: "w-full max-w-[210mm]",
         textStyles: "break-keep",
-        // test: "border-2 border-red-500",
     };
     const headerBox = {
         display: "flex flex-row flex-wrap justify-between items-center",
@@ -67,20 +23,23 @@ function TranscriptDesign({ props }, ref) {
         spacings: "px-5 py-2",
         backgrounds: "bg-gradient-to-r from-crimson-burgundy to-green-dark",
     };
-    const levelTag = {
-        display: "flex justify-center items-center",
-        textStyles: "text-center, ",
-        variableStyle: `text-center text-xs font-bold ${getStylefromLevel(info.level, "textcolor")}`,
-        backgrounds: getStylefromLevel(info.level, "bgcolor"),
-        sizes: "rounded-md w-fit h-fit",
-        spacings: "px-2 py-1",
-    };
-    const isMD = useResponsive("md");
-    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-medium text-base", children: [getStringfromType(info.examType), " \uC131\uC801\uD45C"] })] }), _jsx(ResultCard, { result: result })] }));
+    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 })] }));
 }
 export default forwardRef(TranscriptDesign);
 function ResultCard({ result }) {
-    return (_jsxs("div", { className: "flex flex-row w-full h-fit p-5 bg-white shadow-main rounded-lg mt-5 gap-5", children: [_jsx(CircularGauge, { score: result.score, maxScore: 100, isGrade: false }), _jsx(CircularGauge, { score: result.grade, maxScore: 9, isGrade: true })] }));
+    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 = {
@@ -100,6 +59,7 @@ const CircularGauge = ({ score, maxScore, isGrade }) => {
         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;
@@ -118,5 +78,103 @@ const CircularGauge = ({ score, maxScore, isGrade }) => {
         }
     };
     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(ResponsiveContainer, { width: "100%", height: "100%", aspect: 1, children: _jsx(PieChart, { children: _jsxs(Pie, { data: preparePieChartData(), ...pieStyles, children: [_jsx(Cell, { fill: "#105652", ...cellStyles }), _jsx(Cell, { fill: "rgba(255, 255, 255, 0)", ...cellStyles })] }) }) }), _jsx("div", { className: cn(scoreText), children: score })] }));
+                            , 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/atom/CardTitle.d.ts

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

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../../../../util";
+export function CardTitle({ title }) {
+    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 _jsx("div", { className: cn(cardTitle), children: title });
+}

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

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

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

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