@blockspoon/cert-badge-renderer 1.0.1

package/dist/utils/generateDesignHTML.js

@@ -0,0 +1,289 @@
+"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.generateDesignHTML = generateDesignHTML;
+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 generateDesignHTML(data_1) {
+    return __awaiter(this, arguments, void 0, function* (data, options = {}) {
+        const { size = 600, noSpace = false } = options;
+        // type에 따라 적절한 layout_json 선택
+        const elements = data.layout_json;
+        if (!elements || !Array.isArray(elements) || elements.length === 0) {
+            console.error("❌ [generateDesignHTML] 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 = data === null || data === void 0 ? void 0 : data.template_type;
+        const isBadge = data === null || data === void 0 ? void 0 : data.template_type.includes("Badge");
+        const height = isBadge
+            ? 600
+            : isHorizontal(templateComponentName)
+                ? 810
+                : 1152;
+        const width = isBadge
+            ? 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 (!isBadge) {
+            html += certificates_1.default[data === null || data === void 0 ? void 0 : data.template_type]({
+                mainColor: (data === null || data === void 0 ? void 0 : data.main_color) || "#000000",
+                subColor: (data === null || data === void 0 ? void 0 : data.sub_color) || "#000000",
+                extraColor1: (data === null || data === void 0 ? void 0 : data.extra_color_1) || "#000000",
+                extraColor2: (data === null || data === void 0 ? void 0 : data.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 === "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/getBindingValue.d.ts

@@ -0,0 +1 @@
+export declare const getBindingValue: (type: string, bindingKey: string, data: any) => any;

package/dist/utils/getBindingValue.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBindingValue = void 0;
+const date_fns_1 = require("date-fns");
+const util_1 = require("../util");
+// 데이터 타입별 헬퍼 함수
+const getAchievementValue = (bindingKey, achievementInfo) => {
+    var _a;
+    if (!achievementInfo)
+        return null;
+    const { tags } = achievementInfo.achievementForm || {};
+    switch (bindingKey) {
+        case "period":
+            return achievementInfo.course_begin_at && achievementInfo.course_end_at
+                ? `${(0, date_fns_1.format)(new Date(achievementInfo.course_begin_at), "yyyy.MM.dd")} ~ ${(0, date_fns_1.format)(new Date(achievementInfo.course_end_at), "yyyy.MM.dd")}`
+                : "-";
+        case "created_at":
+            return (0, date_fns_1.format)(new Date(achievementInfo.created_at), "yyyy.MM.dd");
+        case "certificate_number":
+            return achievementInfo.certificate_number || "";
+        case "tags":
+            return (tags === null || tags === void 0 ? void 0 : tags.length) ? tags.map((tag) => `#${tag}`).join(" ") : null;
+        case "qr_code":
+            return `https://kolleges.net/ko/${`test`}/achievement/${achievementInfo.id}`;
+        case "badge":
+            return achievementInfo;
+        case "expiration_date":
+            return achievementInfo.expiration_date || "";
+        default:
+            return ((_a = achievementInfo.achievementForm) === null || _a === void 0 ? void 0 : _a[bindingKey]) || null;
+    }
+};
+const getUserValue = (bindingKey, user) => {
+    return bindingKey === "name"
+        ? (user === null || user === void 0 ? void 0 : user.name) || "홍길동"
+        : (user === null || user === void 0 ? void 0 : user[bindingKey]) || null;
+};
+const getClubValue = (bindingKey, kollegeInfo, achievementInfo) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    if (!kollegeInfo)
+        return null;
+    let achievementForm;
+    if (achievementInfo.achievementForm) {
+        achievementForm = achievementInfo.achievementForm;
+    }
+    else {
+        achievementForm = achievementInfo;
+    }
+    if (bindingKey.startsWith("name_")) {
+        const index = Number(bindingKey.split("_")[1]) - 1;
+        return (((_b = (_a = achievementForm === null || achievementForm === void 0 ? void 0 : achievementForm.clubInstitutions) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.name) || "");
+    }
+    if (["sign_image_1", "sign_image_2", "club_symbol_1", "club_symbol_2"].includes(bindingKey)) {
+        const index = bindingKey.endsWith("1") ? 0 : 1;
+        const imageKey = bindingKey.includes("sign_image")
+            ? "sign_image"
+            : "club_symbol";
+        return ((_d = (_c = achievementForm.clubInstitutions) === null || _c === void 0 ? void 0 : _c[index]) === null || _d === void 0 ? void 0 : _d.images)
+            ? (_f = (_e = (0, util_1.groupByType)(achievementForm.clubInstitutions[index].images)[imageKey]) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.path
+            : null;
+    }
+    if (["club_logo", "sign_image", "club_symbol"].includes(bindingKey)) {
+        if (achievementForm.representativeInstitution) {
+            const groupByTypeImages = (0, util_1.groupByType)(achievementForm.representativeInstitution.images);
+            return (((_h = (_g = groupByTypeImages[bindingKey]) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.path) || null);
+        }
+        const groupByTypeImages = (0, util_1.groupByType)(kollegeInfo.images);
+        return (((_k = (_j = groupByTypeImages[bindingKey]) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.path) || null);
+    }
+    if (bindingKey === "name" &&
+        achievementForm.representativeInstitution) {
+        return (_l = achievementForm.representativeInstitution) === null || _l === void 0 ? void 0 : _l.name;
+    }
+    return (kollegeInfo === null || kollegeInfo === void 0 ? void 0 : kollegeInfo[bindingKey]) || null;
+};
+const getCustomValue = (bindingKey, achievementInfo) => {
+    var _a;
+    if (!(achievementInfo === null || achievementInfo === void 0 ? void 0 : achievementInfo.customAttributes))
+        return null;
+    return (((_a = achievementInfo.customAttributes.find((attr) => [`custom_${attr.attribute_tag}`, `custom-${attr.attribute_tag}`].includes(bindingKey))) === null || _a === void 0 ? void 0 : _a.attribute_value) || null);
+};
+// 🔥 메인 함수: 데이터 타입별로 자동 호출하도록 변경!
+const getBindingValue = (type, bindingKey, data) => {
+    const { achievementInfo, user, kollegeInfo } = data;
+    switch (type) {
+        case "achievement":
+            return getAchievementValue(bindingKey, achievementInfo);
+        case "user":
+            return getUserValue(bindingKey, user);
+        case "club":
+            return getClubValue(bindingKey, kollegeInfo, achievementInfo);
+        case "custom":
+            return getCustomValue(bindingKey, achievementInfo);
+        default:
+            return null;
+    }
+};
+exports.getBindingValue = getBindingValue;

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@blockspoon/cert-badge-renderer",
+  "version": "1.0.1",
+  "description": "Render certificate and badge designs from Kolleges achievement data into HTML, PNG, or Base64.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "node test/test.js"
+  },
+  "keywords": [],
+  "author": "Blockspoon <support@kolleges.net>",
+  "license": "MIT",
+  "dependencies": {
+    "@sparticuz/chromium": "^133.0.0",
+    "date-fns": "^4.1.0",
+    "puppeteer": "^24.4.0",
+    "qrcode": "^1.5.4"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  }
+}

package/src/constants/componentsDirection.ts

@@ -0,0 +1,44 @@
+// 세로
+export const portraitComponents = [
+  "NewCertificateType5",
+  "NewCertificateType6",
+  "NewCertificateType6Single",
+  "NewCertificateType9",
+  "NewCertificateType15",
+  "NewEmptyPortraitCertificate",
+];
+
+// 가로
+export const landscapeComponents = [
+  "NewCertificateType1",
+  "NewCertificateType2",
+  "NewCertificateType3",
+  "NewCertificateType4",
+  "NewCertificateType7",
+  "NewCertificateType7Single",
+  "NewCertificateType8",
+  "NewCertificateType10",
+  "NewCertificateType11",
+  "NewCertificateType12",
+  "NewCertificateType13",
+  "NewCertificateType14",
+  "NewCertificateType16",
+  "NewCertificateType17",
+  "NewCertificateType18",
+  "NewCertificateType19",
+  "NewCertificateType20",
+  "NewCertificateType21",
+  "NewCertificateType22",
+  "NewCertificateType23",
+  "NewCertificateType24",
+  "NewCertificateType25",
+  "NewCertificateType26",
+  "NewCertificateType27",
+  "NewCertificateType29",
+  "NewCertificateType30",
+  "NewCertificateType31",
+  "NewCertificateType32",
+  "NewCertificateType33",
+  "NewCertificateType34",
+  "NewEmptyLandscapeCertificate",
+];

package/src/index.ts

@@ -0,0 +1,4 @@
+export { generateAchievementFile } from './utils/generateAchievementFile';
+export { generateAchievementHTML } from './utils/generateAchievementHTML';
+export type { CertificateData, CertificateOptions } from './interface';
+// export { getBindingValue } from "./utils/getBindingValue";

package/src/interface/index.ts

@@ -0,0 +1,142 @@
+export interface IKollegeItem {
+  name?: string;
+  images?: any;
+  [key: string]: any;
+}
+
+export interface IUserItem {
+  name: string;
+  [key: string]: any;
+}
+
+export interface IAchievementFormItem {
+  achievementCertificateDesign?: IAchievementDesignItem;
+  achievementBadgeDesign?: IAchievementDesignItem;
+  clubInstitutions?: IOrganizationItem[];
+  course_begin_at?: string;
+  course_end_at?: string;
+  description?: string;
+  id?: number;
+  name?: string;
+  tags?: string[];
+  representativeInstitution?: any;
+  representativeInstitutionId?: number;
+  [key: string]: any;
+}
+export interface IAchievementItem {
+  achievementForm: IAchievementFormItem;
+  achievementFormId?: number;
+  admin_comment?: string;
+  certificate_number?: string;
+  course_begin_at?: string;
+  course_end_at?: string;
+  created_at?: string;
+  expiration_date?: string;
+  id?: number;
+  level?: number;
+  user: IUserItem;
+  customAttributes?: {
+    attribute_tag: string;
+    attribute_value: string;
+  }[];
+}
+
+export interface IOrganizationItem {
+  name?: string;
+  id?: number;
+  images?: any;
+  [key: string]: any;
+}
+
+export enum ACHIEVEMENT_IMAGES {
+  ACHIEVEMENT_FORM = "achievement_form",
+  BADGE_IMAGE = "badge_image",
+  // AVATAR_IMAGE = "avatar_image",
+}
+
+// 증명서 디자인
+export enum CERTIFICATE_DESIGN_TYPE {
+  TEMPLATE = "template",
+  BACKGROUND = "background",
+  ICON = "icon",
+  TEXT = "text",
+  IMAGE = "image",
+  PROPS = "props",
+  RIBBON = "ribbon",
+  BADGE = "badge",
+}
+
+export interface ElementStyle {
+  id: string;
+  controlType: "text" | "image" | "svg" | "line";
+  designType: CERTIFICATE_DESIGN_TYPE;
+  order?: number; // 추가
+  text?: string;
+  src?: string;
+  type?: string;
+  bindingKey?: string;
+  fontSize?: number;
+  fontWeight?: string;
+  textAlign?: "left" | "center" | "right";
+  verticalAlign?: "top" | "middle" | "bottom"; // 추가
+  fontFamily?: string;
+  fontStyle?: string;
+  textDecoration?: string;
+  background?: string;
+  color?: string;
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  //svg
+  componentName?: string;
+  mainColor?: string;
+  subColor?: string;
+  extraColor1?: string;
+  extraColor2?: string;
+  isVertical?: boolean;
+  lineWidth?: number;
+}
+
+export interface IAchievementDesignItem {
+  id: number;
+  name: string;
+  main_color: string;
+  sub_color: string;
+  layout_json: ElementStyle[];
+  template_type: string;
+  image: any;
+  extra_color_1: string;
+  extra_color_2: string;
+}
+
+export interface ISvgProps {
+  mainColor?: string;
+  subColor?: string;
+  extraColor1?: string;
+  extraColor2?: string;
+}
+
+// export interface CertificateData {
+//   user: IUserItem;
+//   kollegeInfo: IKollegeItem;
+//   achievementInfo: IAchievementItem;
+// }
+export interface CertificateData {
+  user: any;
+  kollegeInfo: any;
+  achievementInfo: any;
+}
+
+export interface CertificateOptions {
+  type?: string; //"badge" | "certificate";
+  size?: number;
+  returnType?: string; //"file" | "base64";
+  noSpace?: boolean;
+}
+
+export interface DesignOptions {
+  size?: number;
+  returnType?: string; //"file" | "base64";
+  noSpace?: boolean;
+}

package/src/templates/badges/BadgeType1.ts

@@ -0,0 +1,48 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createBadgeType1({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  const paintId0 = `paint0_linear_${Math.random().toString(36).substr(2, 9)}`;
+
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 496 496"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style={{
+        width: "100%",
+        height: "100%",
+        objectFit: "contain",
+        position: "absolute",
+        left: "50%",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        maxWidth: "100%",
+        maxHeight: "100%",
+        zIndex: 1,
+        mixBlendMode: "normal",
+        pointerEvents: "none",
+        display: "block",
+      }}
+    >
+      <path
+        d="M260.835 12.7755L291.197 2.18051C306.272 -3.09063 323.087 1.38984 333.524 13.5135L354.503 37.8661C360.249 44.5605 368.103 49.0936 376.748 50.7277L408.322 56.6841C424.03 59.6359 436.311 71.9704 439.316 87.6784L445.272 119.252C446.906 127.897 451.44 135.751 458.134 141.497L482.487 162.476C494.61 172.913 499.091 189.728 493.819 204.803L483.224 235.165C480.325 243.493 480.325 252.56 483.224 260.835L493.819 291.197C499.091 306.272 494.61 323.087 482.487 333.524L458.134 354.503C451.44 360.249 446.906 368.103 445.272 376.748L439.316 408.322C436.364 424.03 424.03 436.311 408.322 439.316L376.748 445.272C368.103 446.906 360.249 451.44 354.503 458.134L333.524 482.487C323.087 494.61 306.272 499.091 291.197 493.819L260.835 483.224C252.507 480.325 243.44 480.325 235.165 483.224L204.803 493.819C189.728 499.091 172.913 494.61 162.476 482.487L141.497 458.134C135.751 451.44 127.897 446.906 119.252 445.272L87.6784 439.316C71.9704 436.364 59.6886 424.03 56.6841 408.322L50.7277 376.748C49.0936 368.103 44.5605 360.249 37.8661 354.503L13.5135 333.524C1.38984 323.087 -3.09063 306.272 2.18051 291.197L12.7755 260.835C15.6746 252.507 15.6746 243.44 12.7755 235.165L2.18051 204.803C-3.09063 189.728 1.38984 172.913 13.5135 162.476L37.8661 141.497C44.5605 135.751 49.0936 127.897 50.7277 119.252L56.6841 87.6784C59.6359 71.9704 71.9704 59.6886 87.6784 56.6841L119.252 50.7277C127.897 49.0936 135.751 44.5605 141.497 37.8661L162.476 13.5135C172.913 1.38984 189.728 -3.09063 204.803 2.18051L235.165 12.7755C243.493 15.6746 252.56 15.6746 260.835 12.7755Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M260.266 23.2088L289.281 13.0838C303.688 8.04646 319.757 12.3282 329.731 23.9141L349.779 47.1866C355.27 53.584 362.776 57.9161 371.037 59.4777L401.211 65.1699C416.222 67.9908 427.959 79.7781 430.83 94.7894L436.522 124.963C438.084 133.224 442.416 140.73 448.813 146.221L472.086 166.269C483.672 176.243 487.954 192.312 482.916 206.719L472.791 235.734C470.021 243.693 470.021 252.357 472.791 260.266L482.916 289.281C487.954 303.688 483.672 319.757 472.086 329.731L448.813 349.779C442.416 355.27 438.084 362.776 436.522 371.037L430.83 401.211C428.009 416.222 416.222 427.959 401.211 430.83L371.037 436.522C362.776 438.084 355.27 442.416 349.779 448.813L329.731 472.086C319.757 483.672 303.688 487.954 289.281 482.916L260.266 472.791C252.307 470.021 243.643 470.021 235.734 472.791L206.719 482.916C192.312 487.954 176.243 483.672 166.269 472.086L146.221 448.813C140.73 442.416 133.224 438.084 124.963 436.522L94.7894 430.83C79.7781 428.009 68.0411 416.222 65.1699 401.211L59.4777 371.037C57.9161 362.776 53.584 355.27 47.1866 349.779L23.9141 329.731C12.3282 319.757 8.04646 303.688 13.0838 289.281L23.2088 260.266C25.9794 252.307 25.9794 243.643 23.2088 235.734L13.0838 206.719C8.04646 192.312 12.3282 176.243 23.9141 166.269L47.1866 146.221C53.584 140.73 57.9161 133.224 59.4777 124.963L65.1699 94.7894C67.9908 79.7781 79.7781 68.0411 94.7894 65.1699L124.963 59.4777C133.224 57.9161 140.73 53.584 146.221 47.1866L166.269 23.9141C176.243 12.3282 192.312 8.04646 206.719 13.0838L235.734 23.2088C243.693 25.9794 252.357 25.9794 260.266 23.2088Z"
+        fill="${subColor}"
+      />
+      <path
+        d="M287.695 24.931L287.694 24.9312L260.027 34.586C252.271 37.3031 243.776 37.3024 235.975 34.5866L235.974 34.5864L208.306 24.9312L208.305 24.931C194.954 20.2629 180.063 24.2312 170.82 34.9671L170.82 34.9674L151.703 57.1583C146.32 63.4312 138.96 67.679 130.859 69.2103L130.859 69.2103L102.088 74.6378C102.088 74.6379 102.087 74.638 102.087 74.6381C88.1732 77.3001 77.2518 88.1785 74.6384 102.085L74.6383 102.086L69.2103 130.859L69.2103 130.859C67.679 138.96 63.4312 146.32 57.1583 151.703L34.9674 170.82L34.9671 170.82C24.2312 180.063 20.2629 194.954 24.931 208.305L24.9312 208.306L34.586 235.973C37.3031 243.729 37.3024 252.224 34.5866 260.025L34.5864 260.026L24.9312 287.694L24.931 287.695C20.2629 301.046 24.2312 315.937 34.9671 325.18L34.9674 325.18L57.1583 344.297L287.695 24.931ZM287.695 24.931C301.046 20.2629 315.937 24.2312 325.18 34.9671L325.18 34.9674M287.695 24.931L325.18 34.9674M325.18 34.9674L344.297 57.1583L325.18 34.9674ZM365.141 69.2103L365.141 69.2103C357.041 67.6791 349.682 63.4319 344.298 57.1597L365.141 69.2103ZM365.141 69.2103L393.914 74.6383L393.915 74.6384M365.141 69.2103L393.915 74.6384M393.915 74.6384C407.822 77.2519 418.701 88.1739 421.362 102.088L426.79 130.859L426.79 130.859L393.915 74.6384ZM461.033 170.82L461.033 170.82L438.842 151.703C438.841 151.703 438.841 151.703 438.84 151.702L438.84 151.702L439.493 150.945L461.033 170.82ZM461.033 170.82C471.769 180.063 475.737 194.954 471.069 208.305L471.069 208.306M461.033 170.82L471.069 208.306M471.069 208.306L461.414 235.974L461.413 235.975M471.069 208.306L461.413 235.975M461.413 235.975C458.698 243.776 458.697 252.271 461.414 260.027L471.069 287.694L471.069 287.695M461.413 235.975L471.069 287.695M471.069 287.695C475.737 301.046 471.769 315.937 461.033 325.18L461.033 325.18M471.069 287.695L461.033 325.18M461.033 325.18L438.842 344.297L461.033 325.18ZM426.79 365.141L426.79 365.141C428.321 357.041 432.568 349.682 438.84 344.298L426.79 365.141ZM426.79 365.141L421.362 393.914L421.362 393.915M426.79 365.141L421.362 393.915M421.362 393.915C418.748 407.822 407.826 418.701 393.912 421.362L365.141 426.79L365.141 426.79M421.362 393.915L365.141 426.79M365.141 426.79C357.041 428.321 349.682 432.568 344.298 438.84L365.141 426.79ZM325.18 461.033L325.18 461.033L344.297 438.842L325.18 461.033ZM325.18 461.033C315.937 471.769 301.046 475.737 287.695 471.069L287.694 471.069M325.18 461.033L287.694 471.069M287.694 471.069L260.026 461.414L260.025 461.413M287.694 471.069L260.025 461.413M260.025 461.413C252.224 458.698 243.729 458.697 235.973 461.414L208.306 471.069L208.305 471.069M260.025 461.413L208.305 471.069M208.305 471.069C194.954 475.737 180.063 471.769 170.82 461.033L170.82 461.033M208.305 471.069L170.82 461.033M170.82 461.033L151.703 438.842L170.82 461.033ZM130.859 426.79L130.859 426.79C138.96 428.321 146.319 432.568 151.702 438.84L151.702 438.84L130.859 426.79ZM130.859 426.79L102.086 421.362L102.085 421.362M130.859 426.79L102.085 421.362M102.085 421.362C88.178 418.748 77.2993 407.826 74.6378 393.912L69.2103 365.141L69.2103 365.141M102.085 421.362L69.2103 365.141M69.2103 365.141C67.6791 357.041 63.4319 349.682 57.1597 344.298L69.2103 365.141Z"
+        stroke="${mainColor}"
+        stroke-width="2"
+      />
+    </svg>
+  `;
+}