@edu-tosel/design 1.0.185 → 1.0.187

package/layout/template/Regexam/Banner.js

@@ -92,8 +92,8 @@ const InfiniteCarousel = () => {
             title: "Cocoon",
             subtitle: "영어를 시작하는 단계",
             img: "https://resource.tosel.co.kr/images/img-character-co.png",
-            colorT: "text-cocoon-green",
-            colorB: "bg-cocoon-green/10",
+            colorT: "text-co-green",
+            colorB: "bg-co-green-light",
         },
         {
             title: "Pre-Starter",

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

@@ -21,27 +21,41 @@ export default function Academy({ applicationsData, examDate, examName, }) {
         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 [selectedStudent, setSelectedStudent] = useState(formattedData[0]);
     const handleSelectStudent = (student) => {
         setSelectedStudent(toRender(student));
     };
     const ref = useRef(null);
-    const allTicketsRef = useRef(null);
+    const refALot = useRef(null);
     const handlePrint = useReactToPrint({
         content: () => ref.current,
     });
     const ticketRefs = useRef(formattedData.map(() => React.createRef()));
     const printAllTickets = useReactToPrint({
-        content: () => allTicketsRef.current,
+        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";
+            }
+        },
     });
-    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: {
+                                } }), _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 ?? "",
@@ -56,6 +70,7 @@ export default function Academy({ applicationsData, examDate, examName, }) {
                                 profileImageUrl: "",
                                 level: LevelString[student.level ?? "PS"],
                                 code: student.code ?? "",
+                                isAll: true,
                             } }, student.applicationId))) }), _jsx(GroupTicket, { ref: ref, props: {
                             exam: {
                                 title: examName,

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

@@ -13,6 +13,7 @@ interface TicketProps {
     birthday: string;
     level: string;
     code: string;
+    isAll?: boolean;
 }
 declare const _default: import("react").ForwardRefExoticComponent<{
     props: TicketProps;

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

@@ -4,6 +4,8 @@ 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);
@@ -46,10 +48,10 @@ function AcademyTicket({ props }, ref) {
         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."] })] })] })] })] }));
+    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/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.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,64 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
-import QRCode from "react-qr-code";
+import { forwardRef } from "react";
 import { paperSize } from "../../../../style/size";
 import { LineBreaks } from "../../../../text";
-import { cn, copyToClipboard } from "../../../../util";
+import { cn } from "../../../../util";
 import SVG from "../../../../asset/SVG";
-import { useResponsive, usePageLoaded } from "../../../../hook";
+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",
-    },
-};
-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";
-}
+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 = {
@@ -73,60 +23,9 @@ 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 })] }));
+    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 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",
-        variableStyle: `text-center text-xs font-bold ${getStylefromLevel(info.level, "textcolor")}`,
-        backgrounds: getStylefromLevel(info.level, "bgcolor"),
-        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",
-    };
-    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") }) }) }))] })] }));
-}
 function ResultCard({ result }) {
     const cardWrapper = {
         displays: "flex flex-col self-auto flex-[2] md:flex-[1] overflow-hidden",
@@ -202,16 +101,7 @@ function HonorCard({ result }) {
                     ? "축하합니다! 명예의 전당에 등재되었습니다"
                     : "아쉽게도 명예의 전당에 오르지 못했습니다." })] }));
 }
-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 }) {
+function PerformanceCard({ data, info, }) {
     const cardWrapper = {
         displays: "flex flex-col relative",
         sizes: "w-full rounded-lg overflow-hidden",
@@ -227,82 +117,64 @@ function PerformanceCard({ data }) {
     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" })] })] }));
+    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 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 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 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",
+function ScoreCard({ data }) {
+    const cellAnimation = {
+        animations: "hover:bg-green-light/50 hover:text-green-dark duration-300",
     };
-    // 눈금 배열 생성
-    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 })] }));
+    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;

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

@@ -0,0 +1,74 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useResponsive } from "../../../../../hook";
+import { cn, copyToClipboard } from "../../../../../util";
+import { LevelToStyleMap } from "../Transcript.design";
+import QRCode from "react-qr-code";
+export const EXAM_TYPE = {
+    REG: "REG",
+    CMP: "CMP",
+    IST: "IST",
+    OLY: "OLY",
+};
+function getStylefromLevel(level, field) {
+    return LevelToStyleMap[level]?.[field] || "Unknown";
+}
+const examTypeMap = {
+    REG: "정기시험",
+    IST: "기관시험",
+    CMP: "경시대회",
+};
+export function getStringfromType(ExamType) {
+    return examTypeMap[ExamType] || "Unknown";
+}
+export default 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 print:border-2 print:border-green-dark",
+        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",
+        variableStyle: `text-center text-xs font-bold ${getStylefromLevel(info.level, "textcolor")}`,
+        backgrounds: getStylefromLevel(info.level, "bgcolor"),
+        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",
+    };
+    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: "\uC2DC\uD5D8\uD68C\uCC28:" }), _jsx("div", { className: "flex flex-[3]", children: info.examName })] })] })] }), _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") }) }) }))] })] }));
+}

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

@@ -0,0 +1,4 @@
+export declare const printBoxStyles: {
+    shadow: string;
+    colors: string;
+};

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

@@ -0,0 +1,4 @@
+export const printBoxStyles = {
+    shadow: "print:shadow-none",
+    colors: "print:bg-white print:border print:border-gray-medium/70",
+};

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

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

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

@@ -0,0 +1,9 @@
+interface SectionBarProps {
+    title: string;
+    score: number;
+    subScore?: number;
+    total: number;
+    scale?: number;
+}
+export declare function BarGraph({ score, subScore, total, title, scale, }: SectionBarProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { usePageLoaded } from "../../../../../hook";
+import { cn } from "../../../../../util";
+export function BarGraph({ score, subScore, total, title, scale, }) {
+    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-green-light",
+        spacings: "my-auto",
+    };
+    const barFill = {
+        sizes: "h-full rounded-full",
+        animations: "transition-all duration-500 ease-out",
+        backgrounds: "bg-gradient-to-r from-crimson-burgundy to-green-dark shadow-green",
+        printOptions: "print:shadow-none",
+    };
+    const scoreTag = {
+        sizes: "h-5 w-10 rounded-md",
+        position: "-translate-x-14 -translate-y-2",
+        backgrounds: "bg-white border-2 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 = scale
+        ? Array.from({ length: total / scale + 1 }, (_, index) => index * scale)
+        : undefined;
+    return (_jsx("div", { className: cn(setWrapper), children: _jsxs("div", { className: "relative w-full h-20 flex flex-[1] justify-center items-center px-5 pt-8 pb-2 overflow-visible", children: [_jsxs("div", { className: cn(bar), children: [_jsx("div", { className: "absolute top-0 left-0 w-full h-full flex", children: _jsx("div", { className: cn(barFill, "duration-0 opacity-0 print:opacity-100"), style: {
+                                    width: `${widthPercentage}%`,
+                                } }) }), _jsx("div", { className: cn(barFill, "opacity-100 print:opacity-0"), style: {
+                                width: `${currentWidth}%`,
+                            } }), _jsx("div", { className: "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 && 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" }) }) })] }) }))] }) }));
+}

package/package.json

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

package/style/size.js

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

package/tailwind.config.ts

@@ -98,7 +98,8 @@ export default {
         "silver-pale": "#DFD8CA",
 
         // Brand Colors
-        "cocoon-green": "#B1CE83",
+        "co-green": "#4FCA3E",
+        "co-green-light": "#DCF4D8",
         "ps-pink": "#E3006E",
         "ps-pink-light": "#FFBADB",
         "st-orange": "#ED6A00",
@@ -109,6 +110,8 @@ export default {
         "jr-blue-light": "#D6EEFF",
         "hj-blue": "#385EAB",
         "hj-blue-light": "#A8BFE5",
+        "ad-gray": "#4C4C4C",
+        "ad-gray-light": "#F0F0F0",
         // Gradation Colors
       },
       maxHeight: {

package/version.txt

@@ -1 +1 @@
-1.0.185
+1.0.187