@edu-tosel/design 1.0.184 → 1.0.187

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.184",
+  "version": "1.0.187",
   "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-[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: {
@@ -349,6 +352,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.187