@edu-tosel/design 1.0.184 → 1.0.185

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

@@ -0,0 +1,129 @@
+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 [selectedStudent, setSelectedStudent] = useState(null);
+    const formattedData = Object.values(applicationsData ?? {})
+        .filter((app) => app.applicationId !== null)
+        .slice(0, -1);
+    const handleSelectStudent = (student) => {
+        setSelectedStudent(toRender(student));
+    };
+    const ref = useRef(null);
+    const allTicketsRef = useRef(null);
+    const handlePrint = useReactToPrint({
+        content: () => ref.current,
+    });
+    const ticketRefs = useRef(formattedData.map(() => React.createRef()));
+    const printAllTickets = useReactToPrint({
+        content: () => allTicketsRef.current,
+    });
+    console.log(allTicketsRef.current);
+    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: allTicketsRef, className: "opacity-0", 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 ?? "",
+                            } }, 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,20 @@
+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;
+}
+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,55 @@
+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 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 (_jsxs("div", { ref: ref, 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/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.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useEffect, useState } from "react";
+import QRCode from "react-qr-code";
 import { paperSize } from "../../../../style/size";
-import { cn } from "../../../../util";
-import { useResponsive } from "../../../../hook";
+import { LineBreaks } from "../../../../text";
+import { cn, copyToClipboard } from "../../../../util";
+import SVG from "../../../../asset/SVG";
+import { useResponsive, usePageLoaded } from "../../../../hook";
 import { ResponsiveContainer, PieChart, Pie, Cell, } from "recharts";
 const examTypeMap = {
     REG: "정기시험",
@@ -49,6 +52,10 @@ const LevelToStyleMap = {
         textcolor: "text-gray-dark",
     },
 };
+const printBoxStyles = {
+    shadow: "print:shadow-none",
+    colors: "print:bg-white print:border print:border-gray-medium/70",
+};
 function getStylefromLevel(level, field) {
     return LevelToStyleMap[level]?.[field] || "Unknown";
 }
@@ -57,9 +64,8 @@ function TranscriptDesign({ props }, ref) {
     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 +73,74 @@ 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 }), _jsx(ScoreCard, { data: data }), _jsx(SectionBarCard, { data: data })] }));
+}
+export default forwardRef(TranscriptDesign);
+function IdCard({ info }) {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const togglecard = () => setIsExpanded(!isExpanded);
+    //반응형 info 카드 height 문제로 눌러서 자세히 보기 차후 구현 예정
+    const isXS = useResponsive("xs");
+    const cardWrapper = {
+        displays: "flex flex-col self-auto overflow-hidden",
+        sizes: "w-full rounded-lg h-fit",
+        backgrounds: "bg-white shadow-main",
+        spacings: "p-3",
+        printOptions: "print:bg-white print:shadow-none",
+    };
+    const imgBox = {
+        displays: "relative shrink-0 overflow-hidden",
+        sizes: "h-30 aspect-7/9 rounded-lg",
+        backgrounds: info.imgSrc ?? "bg-jr-blue-light",
+        outlines: "border-2 border-slate-200",
+    };
+    const qrBox = {
+        displays: "shrink-0 hidden sm:block relative overflow-hidden",
+        sizes: "h-30 p-2 aspect-square rounded-lg",
+        textStyles: "text-jr-blue",
+        backgrounds: "bg-white",
+        groupAction: "group duration-300 hover:scale-110",
+    };
+    const copyButtonWrapper = {
+        display: "absolute flex justify-center items-center",
+        positions: "top-0 left-0",
+        sizes: "h-full w-full backdrop-blur-sm",
+        graphics: "opacity-0 bg-white/80 ",
+        animations: "duration-300 group-hover:opacity-100",
+    };
+    const copyButton = {
+        displays: "flex justify-center items-center",
+        sizes: "w-20 h-8 rounded-lg",
+        colors: "bg-green-light border border-green-dark",
+        textStyles: "text-xs text-green-dark font-medium text-center",
+        animations: "hover:bg-green-dark hover:text-white duration-300 cursor-pointer",
+    };
     const levelTag = {
         display: "flex justify-center items-center",
-        textStyles: "text-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",
+        sizes: isXS
+            ? "rounded-md w-fit h-fit px-2 py-1"
+            : "rounded-md w-full h-full",
+        printOptions: "print:w-fit print:h-fit print:px-2 print: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", { className: "flex flex-row w-full h-fit mt-5 gap-5", children: [_jsxs("div", { className: cn(cardWrapper), children: [_jsxs("div", { className: "flex flex-row justify-between items-center pb-1 w-full h-fit border-b-2 border-green-dark", children: [_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex flex-[3] text-sm truncate font-bold text-green-dark", children: [info.name, " ", info.nickname && _jsxs("span", { children: [" \u00A0/ ", info.nickname] })] }), _jsx("div", { className: "flex flex-[1] text-sm", children: info.birthday })] }), _jsx("div", { className: "w-fit h-full xs:block hidden", children: _jsx("div", { className: cn(levelTag), children: getStylefromLevel(info.level, "name") }) })] }), _jsx("div", {}), _jsxs("div", { className: "flex flex-col xs:flex-row w-full h-fit mt-2", children: [_jsxs("div", { className: "flex flex-[3] text-sm truncate", children: [_jsx("div", { className: "flex flex-[2] text-green-dark", children: "\uC218\uD5D8\uBC88\uD638:" }), _jsx("div", { className: "flex flex-[3]", children: info.code })] }), _jsxs("div", { className: "flex flex-[3] text-sm truncate", children: [_jsx("div", { className: "flex flex-[2] text-green-dark", children: "\uC2DC\uD5D8\uC77C:" }), _jsx("div", { className: "flex flex-[3]", children: info.examDate })] })] }), _jsxs("div", { className: "flex flex-col xs:flex-row w-full h-fit", children: [_jsxs("div", { className: "flex flex-[3] text-sm truncate", children: [_jsx("div", { className: "flex flex-[2] text-green-dark", children: "\uC720\uD6A8\uAE30\uAC04:" }), _jsx("div", { className: "flex flex-[3]", children: info.examValidAt })] }), _jsxs("div", { className: "flex flex-[3] text-sm truncate", children: [_jsx("div", { className: "flex flex-[2] text-green-dark", children: "\uC218\uD5D8\uBC88\uD638:" }), _jsx("div", { className: "flex flex-[3]", children: info.examDate })] })] })] }), _jsxs("div", { className: cn(qrBox), children: [info.qrSrc && _jsx(QRCode, { value: info.qrSrc, className: "w-full h-full" }), _jsx("div", { className: "absolute top-0 left-0 w-full h-full flex justify-center items-center ", children: _jsx("img", { src: "/images/img-favicon-main.png", alt: "", className: "size-8" }) }), info.qrSrc && (_jsx("div", { className: cn(copyButtonWrapper), children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "flex justify-center items-center ", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", className: "size-6 stroke-green-dark", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" }) }) }), _jsx("div", { className: cn(copyButton), onClick: () => copyToClipboard(info.qrSrc), children: "\uACF5\uC720\uD558\uAE30" })] }) }))] }), _jsxs("div", { className: "flex flex-col shrink-0", children: [_jsxs("div", { className: cn(imgBox), children: [_jsx("img", { src: info.imgSrc, alt: "", className: "object-cover w-full h-auto" }), _jsx("div", { className: "absolute w-full h-full flex items-center justify-center", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "stroke-width": "1.5", className: "size-6 stroke-jr-blue/50", children: _jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" }) }) })] }), !isXS && (_jsx("div", { className: "w-full h-full mt-3 flex", children: _jsx("div", { className: "w-full h-full block xs:hidden", children: _jsx("div", { className: cn(levelTag), children: getStylefromLevel(info.level, "name") }) }) }))] })] }));
 }
-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 +160,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 +179,130 @@ 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 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 " })] })] }) }));
+}
+function PerformanceCard({ 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 scriptStyling = {
+        display: "justify-start items-start",
+        sizes: "w-full h-fit",
+        spacings: "p-5",
+        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 md:flex-row gap-5", children: [_jsx("div", { className: "flex flex-col flex-[3]", children: _jsx(LineBreaks, { texts: data.script.performanceEvaluation, className: cn(scriptStyling) }) }), _jsx("div", { className: "flex flex-col flex-[2] justify-center items-center" })] })] }));
+}
+function SectionBarCard({ 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",
+    };
+    return (_jsxs("div", { className: cn(cardWrapper, printBoxStyles), children: [_jsx("div", { className: cn(cardTitle), children: "Grade and Average Score" }), _jsxs("div", { className: "flex flex-col sm:mt-0 mt-5", children: [_jsx(SectionBarSet, { title: "section1", score: data.analysis.user.section1, total: 50, subScore: data.analysis.nationalAverage.section1, script: data.script.section1, scale: 10 }), _jsx(SectionBarSet, { title: "section2", score: data.analysis.user.section2, total: 50, subScore: data.analysis.nationalAverage.section2, script: data.script.section2, scale: 10 })] })] }));
+}
+function SectionBarSet({ score, subScore, total, title, script, scale, }) {
+    const isLoaded = usePageLoaded();
+    const [currentWidth, setCurrentWidth] = useState(0);
+    const widthPercentage = (score / total) * 100;
+    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-gray-medium/80 ",
+        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 border-green-dark",
+        textStyles: "font-bold text-xs text-center text-green-dark",
+    };
+    const subScoreTag = {
+        sizes: "h-5 w-fit rounded-md flex flex-row gap-2",
+        position: "-translate-x-30 translate-y-6",
+    };
+    // 눈금 배열 생성
+    const scaleTicks = Array.from({ length: total / scale + 1 }, (_, index) => index * scale);
+    return (_jsxs("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: "absolute w-full text-green-dark -translate-y-12 font-bold text-sm h-fit text-center", children: title })] }), _jsx("div", { className: "absolute flex w-full h-full justify-between items-center p-5 text-sm text-gray-medium -translate-y-5", children: scaleTicks.map((tick) => (_jsx("div", { children: tick }, 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: "text-green-dark", 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" }) }) })] }) }))] }), _jsx("div", { className: "w-full h-full flex-[1] text-sm sm:text-xs", children: script })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.184",
+  "version": "1.0.185",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",
@@ -28,6 +28,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "react-lottie-player": "^1.5.6",
+    "react-qr-code": "^2.0.15",
     "react-router-dom": "^6.21.3",
     "react-spring": "^9.7.3",
     "react-to-print": "^2.15.1",

package/style/size.js

@@ -1,3 +1,3 @@
 export const paperSize = {
-    a4: "print:w-[210mm] print:h-[297mm]",
+    a4: "print:w-[210mm] print:h-[297mm] print:px-[19mm] print:py-[15mm]",
 };

package/tailwind.config.ts

@@ -349,6 +349,12 @@ export default {
         100: "25rem",
         128: "32rem",
       },
+
+      aspectRatio: {
+        "3/4": "3 / 4", // 인물사진
+        "7/9": "7 / 9", // 증명사진
+      },
+
       borderRadius: {
         lgx: "0.625rem",
       },

package/util/copyToClipboard.d.ts

@@ -0,0 +1 @@
+export default function copyToClipboard(value: string | undefined): void;

package/util/copyToClipboard.js

@@ -0,0 +1,16 @@
+export default function copyToClipboard(value) {
+    const textToCopy = value ?? "";
+    if (textToCopy) {
+        navigator.clipboard
+            .writeText(textToCopy)
+            .then(() => {
+            alert(`클립보드에 복사되었습니다.`); // 복사된 값을 alert로 출력
+        })
+            .catch((err) => {
+            console.error("복사에 실패했습니다:", err);
+        });
+    }
+    else {
+        alert("복사할 값이 없습니다."); // 값이 없을 경우 alert로 알림
+    }
+}

package/util/index.d.ts

@@ -7,6 +7,7 @@ export { default as checkPathMatch } from "./checkPathMatch";
 export { default as createSetter } from "./createSetter";
 export { default as compareDates } from "./compareDates";
 export { default as convertDateToString } from "./convertDateToString";
+export { default as copyToClipboard } from "./copyToClipboard";
 export * from "../style/colors";
 export * from "./pattern";
 export * from "./shape";

package/util/index.js

@@ -7,6 +7,7 @@ export { default as checkPathMatch } from "./checkPathMatch";
 export { default as createSetter } from "./createSetter";
 export { default as compareDates } from "./compareDates";
 export { default as convertDateToString } from "./convertDateToString";
+export { default as copyToClipboard } from "./copyToClipboard";
 export * from "../style/colors";
 export * from "./pattern";
 export * from "./shape";

package/version.txt

@@ -1 +1 @@
-1.0.184
+1.0.185