@blockspoon/cert-badge-renderer 1.0.1

package/dist/util.js

@@ -0,0 +1,32 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.groupByType = groupByType;
+// 이미지 배열 객체화
+function groupByType(arrays) {
+    // 타입 정의
+    if (!arrays || !Array.isArray(arrays) || arrays.length === 0)
+        return {};
+    const combinedArray = arrays.flat();
+    // 결과 객체 타입 지정: 문자열 키에 배열 값
+    const result = {};
+    // 그룹화하여 객체로 변환
+    return combinedArray.reduce((result, item) => {
+        const { type } = item, rest = __rest(item, ["type"]); // type을 키로 사용하고 나머지를 저장
+        if (!result[type]) {
+            result[type] = []; // 해당 타입이 없으면 배열 초기화
+        }
+        result[type].push(rest); // 나머지 데이터를 추가
+        return result;
+    }, result);
+}

package/dist/utils/generateAchievementFile.d.ts

@@ -0,0 +1,12 @@
+import { CertificateData, CertificateOptions } from "../interface";
+export declare function generateAchievementFile(data: CertificateData, options?: CertificateOptions): Promise<{
+    base64: string;
+    contentType: string;
+    buffer?: undefined;
+    fileName?: undefined;
+} | {
+    buffer: Uint8Array<ArrayBufferLike>;
+    contentType: string;
+    fileName: string;
+    base64?: undefined;
+}>;

package/dist/utils/generateAchievementFile.js

@@ -0,0 +1,75 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateAchievementFile = generateAchievementFile;
+const puppeteer_1 = __importDefault(require("puppeteer"));
+const generateAchievementHTML_1 = require("./generateAchievementHTML");
+function generateAchievementFile(data_1) {
+    return __awaiter(this, arguments, void 0, function* (data, options = {}) {
+        const { returnType = "file", type = "certificate", size = 600 } = options;
+        const browser = yield puppeteer_1.default.launch({
+            headless: true,
+            args: [
+                "--no-sandbox",
+                "--disable-setuid-sandbox",
+                "--disable-dev-shm-usage",
+                "--disable-gpu",
+                "--disable-software-rasterizer",
+            ],
+        });
+        const page = yield browser.newPage();
+        yield page.setRequestInterception(true);
+        page.on("request", (request) => {
+            if (request.resourceType() === "image") {
+                request.continue();
+            }
+            else {
+                request.continue();
+            }
+        });
+        const htmlContent = yield (0, generateAchievementHTML_1.generateAchievementHTML)(data, { type, size });
+        yield page.setContent(htmlContent, {
+            waitUntil: "domcontentloaded",
+        });
+        yield new Promise((resolve) => setTimeout(resolve, 500));
+        yield page.setViewport({
+            width: size,
+            height: size,
+        });
+        const buffer = yield page.screenshot({
+            type: "png",
+            clip: {
+                x: 0,
+                y: 0,
+                width: size,
+                height: size,
+            },
+            omitBackground: true,
+            encoding: "binary",
+        });
+        yield browser.close();
+        if (returnType === "base64") {
+            const base64 = Buffer.from(buffer).toString("base64");
+            return {
+                base64: `data:image/png;base64,${base64}`,
+                contentType: "image/png",
+            };
+        }
+        return {
+            buffer,
+            contentType: "image/png",
+            fileName: "certificate.png",
+        };
+    });
+}

package/dist/utils/generateAchievementHTML.d.ts

@@ -0,0 +1,2 @@
+import { CertificateData, CertificateOptions } from "../interface";
+export declare function generateAchievementHTML(data: CertificateData, options?: CertificateOptions): Promise<string>;

package/dist/utils/generateAchievementHTML.js

@@ -0,0 +1,310 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateAchievementHTML = generateAchievementHTML;
+const interface_1 = require("../interface");
+const getBindingValue_1 = require("./getBindingValue");
+const qrcode_1 = __importDefault(require("qrcode"));
+const svgTemplate_1 = require("../templates/svgTemplate");
+const certificates_1 = __importDefault(require("../templates/certificates"));
+const componentsDirection_1 = require("../constants/componentsDirection");
+function convertImageToBase64(url) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            // URL이 이미 baseUrl을 포함하고 있는지 확인
+            let finalUrls = [];
+            finalUrls = url.split("https://");
+            const finalUrl = "https://" + finalUrls.pop();
+            const response = yield fetch(finalUrl, {
+                credentials: "include",
+                headers: {
+                    Accept: "image/*",
+                },
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const contentType = response.headers.get("content-type");
+            if (!(contentType === null || contentType === void 0 ? void 0 : contentType.startsWith("image/"))) {
+                throw new Error(`Not an image! content-type: ${contentType}`);
+            }
+            const buffer = yield response.arrayBuffer();
+            const base64 = Buffer.from(buffer).toString("base64");
+            return `data:${contentType};base64,${base64}`;
+        }
+        catch (error) {
+            console.error(`이미지 변환 실패: ${url}`, error);
+            return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+        }
+    });
+}
+function generateAchievementHTML(data_1) {
+    return __awaiter(this, arguments, void 0, function* (data, options = {}) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const { type = "certificate", size = 600, noSpace = false } = options;
+        let achievementForm;
+        if (data.achievementInfo.achievementForm) {
+            achievementForm = data.achievementInfo.achievementForm;
+        }
+        else {
+            achievementForm = data.achievementInfo;
+        }
+        // type에 따라 적절한 layout_json 선택
+        const elements = type === "badge"
+            ? (_a = achievementForm === null || achievementForm === void 0 ? void 0 : achievementForm.achievementBadgeDesign) === null || _a === void 0 ? void 0 : _a.layout_json
+            : (_b = achievementForm === null || achievementForm === void 0 ? void 0 : achievementForm.achievementCertificateDesign) === null || _b === void 0 ? void 0 : _b.layout_json;
+        if (!elements || !Array.isArray(elements) || elements.length === 0) {
+            console.error("❌ [generateAchievementHTML] layout_json이 비어 있음:", elements);
+            return `<div style="position: relative; width: 100%; height: 100%;"></div>`;
+        }
+        const sortedElements = elements.sort((a, b) => (a.order || 0) - (b.order || 0));
+        function isHorizontal(name) {
+            if (!name)
+                return false;
+            return !componentsDirection_1.portraitComponents.includes(name);
+        }
+        const templateComponentName = (_c = achievementForm === null || achievementForm === void 0 ? void 0 : achievementForm.achievementCertificateDesign) === null || _c === void 0 ? void 0 : _c.template_type;
+        const height = type == "badge" ? 600 : isHorizontal(templateComponentName) ? 810 : 1152;
+        const width = type == "badge" ? 600 : isHorizontal(templateComponentName) ? 1152 : 810;
+        let html = `
+    <!DOCTYPE html>
+    <html lang="ko">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Certificate</title>
+        <style>
+          @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
+          * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+          }
+          body {
+            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+          }
+        </style>
+      </head>
+      <body style="
+          width: ${size}px;
+          height: ${size}px;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        ">
+        <div
+          style="
+            width: ${isHorizontal(templateComponentName)
+            ? size
+            : size * (width / height)}px;
+            height: ${isHorizontal(templateComponentName)
+            ? size * (height / width)
+            : size}px;
+            aspect-ratio: ${width / height};
+            ${noSpace ? "position: absolute; top: 0; left: 0;" : ""}
+          "
+        >
+        <div style="
+        position: relative;
+        width: ${width}px;
+        height: ${height}px;
+        overflow: hidden;
+        transform: scale(${isHorizontal(templateComponentName) ? size / width : size / height});
+        transform-origin: top left;
+        ">
+        `;
+        if (type == "certificate") {
+            html += certificates_1.default[(_d = achievementForm === null || achievementForm === void 0 ? void 0 : achievementForm.achievementCertificateDesign) === null || _d === void 0 ? void 0 : _d.template_type]({
+                mainColor: ((_e = achievementForm === null || achievementForm === void 0 ? void 0 : achievementForm.achievementCertificateDesign) === null || _e === void 0 ? void 0 : _e.main_color) || "#000000",
+                subColor: ((_f = achievementForm === null || achievementForm === void 0 ? void 0 : achievementForm.achievementCertificateDesign) === null || _f === void 0 ? void 0 : _f.sub_color) || "#000000",
+                extraColor1: ((_g = achievementForm === null || achievementForm === void 0 ? void 0 : achievementForm.achievementCertificateDesign) === null || _g === void 0 ? void 0 : _g.extra_color_1) ||
+                    "#000000",
+                extraColor2: ((_h = achievementForm === null || achievementForm === void 0 ? void 0 : achievementForm.achievementCertificateDesign) === null || _h === void 0 ? void 0 : _h.extra_color_2) ||
+                    "#000000",
+            });
+        }
+        for (const element of sortedElements) {
+            if (element.bindingKey === "requirements")
+                continue;
+            let bindingValue = null;
+            if (element.designType === interface_1.CERTIFICATE_DESIGN_TYPE.PROPS) {
+                bindingValue = (0, getBindingValue_1.getBindingValue)(element.type, element.bindingKey, data);
+                if (element.controlType === "text") {
+                    element.text = bindingValue;
+                }
+                if (element.controlType === "image") {
+                    element.src = bindingValue;
+                }
+            }
+            if (bindingValue === null &&
+                element.designType === interface_1.CERTIFICATE_DESIGN_TYPE.PROPS)
+                continue;
+            const commonStyles = `
+      position: absolute;
+      top: ${element.y}px;
+      left: ${element.x}px;
+      width: ${element.bindingKey === "badge" ? "600px" : element.width + "px"};
+      height: ${element.bindingKey === "badge" ? "600px" : element.height + "px"};
+      background: transparent;
+      font-size: ${element.fontSize}px;
+      font-weight: ${element.fontWeight || "normal"};
+      font-style: ${element.fontStyle || "normal"};
+      text-decoration: ${element.textDecoration || "none"};
+      text-align: ${element.textAlign || "left"};
+      font-family: ${element.fontFamily || "inherit"};
+      color: ${element.color || "black"};
+      border: none;
+      padding: 0;
+      display: flex;
+      align-items: start;
+      justify-content: ${element.textAlign === "center"
+                ? "center"
+                : element.textAlign === "left"
+                    ? "flex-start"
+                    : "flex-end"};
+      padding-left: "0";
+      padding-right: "0";
+      word-break: break-word;
+      white-space: pre-wrap;
+    `;
+            if (element.controlType === "svg") {
+                const templates = element.designType === "badge"
+                    ? svgTemplate_1.badgeTemplates
+                    : element.designType === "icon"
+                        ? svgTemplate_1.iconTemplates
+                        : svgTemplate_1.ribbonTemplates;
+                const template = templates.find((t) => t.id === element.componentName);
+                if (template) {
+                    const optimizedStyles = `
+          position: absolute;
+          top: ${element.y}px;
+          left: ${element.x}px;
+          width: ${element.width}px;
+          height: ${element.height}px;
+          isolation: isolate;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          will-change: transform, contents;
+          transform: translateZ(0);
+          backface-visibility: hidden;
+        `;
+                    html += `<div style="${optimizedStyles}">`;
+                    const svgString = template.Component({
+                        mainColor: element.mainColor,
+                        subColor: element.subColor,
+                        extraColor1: element.extraColor1 || "#000000",
+                        extraColor2: element.extraColor2 || "#000000",
+                    });
+                    if (typeof svgString === "string") {
+                        // live-server 스크립트 제거
+                        const cleanSvg = svgString.replace(/<!-- Code injected by live-server -->[\s\S]*?<\/script>/, "");
+                        html += cleanSvg;
+                    }
+                    else if (svgString instanceof Element) {
+                        html += svgString.outerHTML;
+                    }
+                    html += `</div>`;
+                }
+                else {
+                    console.error(`❌ SVG 컴포넌트를 찾을 수 없음: ${element.componentName}`);
+                }
+            }
+            else if (element.controlType === "text") {
+                html += `<div style="${commonStyles}">${element.text || ""}</div>`;
+            }
+            else if (element.controlType === "image") {
+                html += `<div style="${commonStyles}">`;
+                if (element.bindingKey === "badge" && type !== "badge") {
+                    // 뱃지 (certificate 타입일 때만 뱃지를 중첩해서 렌더링)
+                    const badgeElements = (_j = achievementForm === null || achievementForm === void 0 ? void 0 : achievementForm.achievementBadgeDesign) === null || _j === void 0 ? void 0 : _j.layout_json;
+                    html += `<div style="
+          width: 600px;
+          height: 600px;
+          position: relative;
+          transform: scale(${element.width / 600});
+          transform-origin: top left;
+        ">
+          ${badgeElements
+                        ? yield generateAchievementHTML(data, {
+                            type: "badge",
+                            noSpace: true,
+                        })
+                        : ""}
+        </div>`;
+                }
+                else if (element.bindingKey === "qr_code" && element.src) {
+                    // QR 코드
+                    try {
+                        const qrCodeSvg = yield qrcode_1.default.toString(element.src, {
+                            type: "svg",
+                            width: element.width,
+                            height: element.height,
+                            errorCorrectionLevel: "H",
+                        });
+                        html += qrCodeSvg;
+                    }
+                    catch (error) {
+                        console.error("❌ QR 코드 생성 실패:", error);
+                        html += `<div style="
+            background-color: #f5f5f5;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          ">QR Code Error</div>`;
+                    }
+                }
+                else if (element.src) {
+                    // 이미지를 base64로 변환
+                    const base64Image = yield convertImageToBase64(element.src);
+                    html += `<img
+          src="${base64Image}"
+          alt="Uploaded"
+          style="
+            width: 100%;
+            height: 100%;
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+            align-self: center;
+          "
+        />`;
+                }
+                html += `</div>`;
+            }
+            if (element.controlType === "line") {
+                html += `<div style="${commonStyles}">`;
+                html += `<div style="
+        background-color: ${element.color || "black"};
+        transform: ${element.isVertical ? "none" : "rotate(0deg)"};
+        width: ${element.isVertical ? `${element.lineWidth || 1}px` : "100%"};
+        height: ${element.isVertical ? "100%" : `${element.lineWidth || 1}px`};
+      "></div>
+      </div>`;
+            }
+        }
+        html += `
+        </div>
+        </div>
+      </body>
+    </html>
+  `;
+        return html;
+    });
+}

package/dist/utils/generateDesignFile.d.ts

@@ -0,0 +1,12 @@
+import { IAchievementDesignItem, DesignOptions } from "../interface";
+export declare function generateDesignFile(data: IAchievementDesignItem, options?: DesignOptions): Promise<{
+    base64: string;
+    contentType: string;
+    buffer?: undefined;
+    fileName?: undefined;
+} | {
+    buffer: Uint8Array<ArrayBufferLike>;
+    contentType: string;
+    fileName: string;
+    base64?: undefined;
+}>;

package/dist/utils/generateDesignFile.js

@@ -0,0 +1,75 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateDesignFile = generateDesignFile;
+const puppeteer_1 = __importDefault(require("puppeteer"));
+const generateDesignHTML_1 = require("./generateDesignHTML");
+function generateDesignFile(data_1) {
+    return __awaiter(this, arguments, void 0, function* (data, options = {}) {
+        const { returnType = "file", size = 600 } = options;
+        const browser = yield puppeteer_1.default.launch({
+            headless: true,
+            args: [
+                "--no-sandbox",
+                "--disable-setuid-sandbox",
+                "--disable-dev-shm-usage",
+                "--disable-gpu",
+                "--disable-software-rasterizer",
+            ],
+        });
+        const page = yield browser.newPage();
+        yield page.setRequestInterception(true);
+        page.on("request", (request) => {
+            if (request.resourceType() === "image") {
+                request.continue();
+            }
+            else {
+                request.continue();
+            }
+        });
+        const htmlContent = yield (0, generateDesignHTML_1.generateDesignHTML)(data, { size });
+        yield page.setContent(htmlContent, {
+            waitUntil: "domcontentloaded",
+        });
+        yield new Promise((resolve) => setTimeout(resolve, 500));
+        yield page.setViewport({
+            width: size,
+            height: size,
+        });
+        const buffer = yield page.screenshot({
+            type: "png",
+            clip: {
+                x: 0,
+                y: 0,
+                width: size,
+                height: size,
+            },
+            omitBackground: true,
+            encoding: "binary",
+        });
+        yield browser.close();
+        if (returnType === "base64") {
+            const base64 = Buffer.from(buffer).toString("base64");
+            return {
+                base64: `data:image/png;base64,${base64}`,
+                contentType: "image/png",
+            };
+        }
+        return {
+            buffer,
+            contentType: "image/png",
+            fileName: "design.png",
+        };
+    });
+}

package/dist/utils/generateDesignHTML.d.ts

@@ -0,0 +1,2 @@
+import { IAchievementDesignItem, DesignOptions } from "../interface";
+export declare function generateDesignHTML(data: IAchievementDesignItem, options?: DesignOptions): Promise<string>;