@edu-tosel/design 1.0.224 → 1.0.227

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

@@ -11,7 +11,6 @@ import { MIChart } from "./molecule/MIChart";
 import { IntelligenceCard } from "./organism/IntelligenceCard";
 import { SectionRadarCard } from "./organism/SectionRadarCard";
 import { NationalPositionCard } from "./organism/NationalPositionCard";
-import IdCard from "./organism/IdCard.organism";
 export const EXAM_TYPE = {
     REG: "REG",
     CMP: "CMP",
@@ -42,7 +41,7 @@ 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 }), _jsx(NationalPositionCard, { result: result }), _jsxs("div", { className: "flex flex-col gap-5 xs:flex-row mt-5 items-stretch", children: [_jsx(ResultGaugeCard, { result: result, theme: "green" }), _jsx(HonorCard, { result: result })] }), _jsx(PerformanceCard, { data: data, info: info }), _jsx(ScoreCard, { data: data }), _jsx(BarCardRow, { section1: section1Data, section2: section2Data, theme: "green" }), _jsx(SectionRadarCard, { data: data, section: "section1", info: info, theme: "red" }), _jsx(SectionRadarCard, { data: data, section: "section2", info: info, theme: "red" }), _jsx(IntelligenceCard, { data: data.multipleIntelligence, theme: "green" }), _jsx(MIChart, {})] }));
+    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(NationalPositionCard, { result: result }), _jsxs("div", { className: "flex flex-col gap-5 xs:flex-row mt-5 items-stretch", children: [_jsx(ResultGaugeCard, { result: result, theme: "green" }), _jsx(HonorCard, { result: result })] }), _jsx(PerformanceCard, { data: data, info: info }), _jsx(ScoreCard, { data: data }), _jsx(BarCardRow, { section1: section1Data, section2: section2Data, theme: "green" }), _jsx(SectionRadarCard, { data: data, section: "section1", info: info, theme: "red" }), _jsx(SectionRadarCard, { data: data, section: "section2", info: info, theme: "red" }), _jsx(IntelligenceCard, { data: data.multipleIntelligence, theme: "green" }), _jsx(MIChart, {})] }));
 }
 export default forwardRef(TranscriptDesign);
 function SectionBarGraphProps(title, score, total, script, subScripts, scale, subScore) {

package/layout/template/Transcript/design/TranscriptAdvanced.design.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { paperSize } from "../../../../style/size";
-import { cn } from "../../../../util";
-import IdCard from "./organism/IdCard.organism";
 import { BarCardCol } from "./organism/BarCardCol";
 import { RadarCard } from "./organism/RadarCard";
 import { OCICard } from "./organism/OCICard";
 import { OCIChart } from "./molecule/OCIChart";
+import { useState } from "react";
+import { useResponsive } from "../../../../hook";
+import { cn, copyToClipboard } from "../../../../util";
+import QRCode from "react-qr-code";
+import { GetStyleFromLevel } from "./atom/GetStyleFromLevel";
 function TranscriptDesign({ props }, ref) {
     const { info, score, lswr, oci } = props;
     const section1Score = score.result.part1 +
@@ -39,7 +42,55 @@ function TranscriptDesign({ props }, ref) {
         spacings: "px-5 py-2",
         backgrounds: "bg-gradient-to-r from-crimson-burgundy to-green-dark",
     };
-    return (_jsx(_Fragment, { children: _jsxs("div", { ref: ref, className: cn(container), children: [_jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "https://resource.tosel.co.kr/images/header-logo2.png", alt: "\uD1A0\uC140 \uB85C\uACE0", className: "h-10 py-1" }), _jsx("div", { className: "text-white font-bold text-base", children: "Official Score Report" })] }), _jsx(IdCard, { info: info }), _jsx(BarCardCol, { section1: section1Data, section2: section2Data, theme: "red" }), _jsx(RadarCard, { data: lswr, theme: "red", title: "Section Scores" }), _jsxs("div", { className: cn("page-break"), children: [_jsx("div", { className: "w-full h-5 print:block" }), _jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "https://resource.tosel.co.kr/images/header-logo2.png", alt: "\uD1A0\uC140 \uB85C\uACE0", className: "h-10 py-1" }), _jsx("div", { className: "text-white font-bold text-base", children: "Occupational Competency Index Report" })] }), _jsx(OCICard, { data: oci }), _jsx(OCIChart, {})] })] }) }));
+    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: info.qrSrc && "print:border-2 print:border-green-dark",
+        groupAction: info.qrSrc && "group duration-300 hover:scale-110 bg-white",
+    };
+    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 (_jsx(_Fragment, { children: _jsxs("div", { ref: ref, className: cn(container), children: [_jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "https://resource.tosel.co.kr/images/header-logo2.png", alt: "\uD1A0\uC140 \uB85C\uACE0", className: "h-10 py-1" }), _jsx("div", { className: "text-white font-bold text-base", children: "Official Score Report" })] }), _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") }) })] }), _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 font-bold", 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 font-bold", 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 font-bold", 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 font-bold", children: "\uC2DC\uD5D8\uD68C\uCC28:" }), _jsx("div", { className: "flex flex-3", children: info.examName })] })] })] }), _jsxs("div", { className: cn(qrBox), children: [!info.qrSrc && (_jsx("div", { className: "absolute top-0 left-0 w-full h-full flex justify-center items-center", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/logo-itc-classic.png", alt: "" }) })), info.qrSrc && (_jsxs(_Fragment, { children: [_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" }) }), _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-auto h-full" }), _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") }) }) }))] })] }), _jsx(BarCardCol, { section1: section1Data, section2: section2Data, theme: "red" }), _jsx(RadarCard, { data: lswr, theme: "red", title: "Section Scores" }), _jsxs("div", { className: cn("page-break"), children: [_jsx("div", { className: "w-full h-5 print:block" }), _jsxs("div", { className: cn(headerBox), children: [_jsx("img", { src: "https://resource.tosel.co.kr/images/header-logo2.png", alt: "\uD1A0\uC140 \uB85C\uACE0", className: "h-10 py-1" }), _jsx("div", { className: "text-white font-bold text-base", children: "Occupational Competency Index Report" })] }), _jsx(OCICard, { data: oci }), _jsx(OCIChart, {})] })] }) }));
 }
 function SectionBarGraphProps(title, score, total, script, subScripts, scale, subScore) {
     return {

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

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

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

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function PersonalCard() {
+    return _jsx("div", {});
+}

package/package.json

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

package/tailwind.config.ts

@@ -37,7 +37,8 @@ export default {
         green: "0 0px 10px 0px rgba(16, 86, 82, 0.38)",
       },
       flex: {
-        "2": "2 2 0%",
+        2: "2 2 0%",
+        3: "3 3 0%",
       },
       keyframes: {
         smallBounce: {

package/version.txt

@@ -1 +1 @@
-1.0.224
+1.0.227

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

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

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

@@ -1,57 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { useResponsive } from "../../../../../hook";
-import { cn, copyToClipboard } from "../../../../../util";
-import QRCode from "react-qr-code";
-import { GetStyleFromLevel } from "../atom/GetStyleFromLevel";
-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: info.qrSrc && "print:border-2 print:border-green-dark",
-        groupAction: info.qrSrc && "group duration-300 hover:scale-110 bg-white",
-    };
-    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") }) })] }), _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 font-bold", 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 font-bold", 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 font-bold", 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 font-bold", children: "\uC2DC\uD5D8\uD68C\uCC28:" }), _jsx("div", { className: "flex flex-[3]", children: info.examName })] })] })] }), _jsxs("div", { className: cn(qrBox), children: [!info.qrSrc && (_jsx("div", { className: "absolute top-0 left-0 w-full h-full flex justify-center items-center", children: _jsx("img", { src: "https://resource.tosel.co.kr/images/logo-itc-classic.png", alt: "" }) })), info.qrSrc && (_jsxs(_Fragment, { children: [_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" }) }), _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-auto h-full" }), _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") }) }) }))] })] }));
-}