@blockspoon/cert-badge-renderer 1.0.3 → 1.0.5

package/src/templates/badges/BadgeType63.ts

@@ -1,9 +1,13 @@
-import { ISvgProps } from "../../interface"; 
+import { ISvgProps } from "../../interface";
 
 export function createBadgeType63({
   mainColor = "#96A6B4",
   subColor = "#96A6B4",
+  extraColor1 = "#96A6B4",
+  extraColor2 = "#96A6B4",
 }: ISvgProps): string {
+  const clipId0 = `clip0_linear_${Math.random().toString(36).substr(2, 9)}`;
+
   return `
     <svg
       width="100%"
@@ -20,65 +24,55 @@ export function createBadgeType63({
         display: block;
       "
     >
+            <defs>
+        <clipPath id="${clipId0}">
+          <path
+            d="M23 347.403H514V362.403C514 446.35 445.947 514.403 362 514.403H55C37.3269 514.403 23 500.076 23 482.403V347.403Z"
+            fill="${extraColor2}"
+          />
+        </clipPath>
+      </defs>
       <path
-        d="M6 40C6 21.2223 21.2223 6 40 6H377C462.052 6 531 74.9481 531 160V377C531 462.052 462.052 531 377 531H40C21.2223 531 6 515.778 6 497V40Z"
+        d="M6 40.403C6 21.6253 21.2223 6.40302 40 6.40302H377C462.052 6.40302 531 75.3512 531 160.403V377.403C531 462.455 462.052 531.403 377 531.403H40C21.2223 531.403 6 516.181 6 497.403V40.403Z"
         fill="${mainColor}"
         stroke="${mainColor}"
-        stroke-width="12"
+        strokeWidth="12"
       />
       <path
-        d="M15 53C15 32.0132 32.0132 15 53 15H364C451.261 15 522 85.739 522 173V364C522 451.261 451.261 522 364 522H53C32.0132 522 15 504.987 15 484V53Z"
-        stroke="white"
-        stroke-width="4"
+        d="M15 53.403C15 32.4162 32.0132 15.403 53 15.403H364C451.261 15.403 522 86.142 522 173.403V364.403C522 451.664 451.261 522.403 364 522.403H53C32.0132 522.403 15 505.39 15 484.403V53.403Z"
+        stroke="${extraColor2}"
+        strokeWidth="4"
       />
       <path
-        d="M23 55C23 37.3269 37.3269 23 55 23H362C445.947 23 514 91.0527 514 175V362C514 445.947 445.947 514 362 514H55C37.3269 514 23 499.673 23 482V55Z"
-        fill="white"
+        d="M23 55.403C23 37.7299 37.3269 23.403 55 23.403H362C445.947 23.403 514 91.4557 514 175.403V362.403C514 446.35 445.947 514.403 362 514.403H55C37.3269 514.403 23 500.076 23 482.403V55.403Z"
+        fill="${extraColor2}"
       />
-      <mask
-        id="mask0_2407_494"
-        style="mask-type:alpha"
-        maskUnits="userSpaceOnUse"
+      <rect
         x="23"
-        y="345"
-        width="491"
-        height="170"
-      >
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M514 345.25V362.655C514 446.602 445.947 514.655 362 514.655H55C37.3269 514.655 23 500.328 23 482.655V345.25H514Z"
-          fill="#D9D9D9"
-        />
-      </mask>
-      <g mask="url(#mask0_2407_494)">
-        <path
-          d="M71.497 455.745C24.4564 461.406 -24.5553 464.305 -74.7495 464.305C-236.501 464.305 -413.364 421.506 -529.389 370.423L-536.09 370.285L-536.09 440.973C-282.096 488.052 -65.8145 474.798 71.497 455.745Z"
-          fill="${subColor}"
-          fill-opacity="0.1"
-        />
+        y="175.65"
+        width="439"
+        height="3.50499"
+        fill="${mainColor}"
+      />
+      <g clip-path="url(#${clipId0})">
         <path
-          d="M761.346 522.981C759.113 518.287 756.879 513.593 754.382 508.899C749.652 500.063 744.265 491.503 738.352 483.081C672.915 390.58 542.042 331.627 431.405 348.885C409.593 352.198 389.883 358.411 372.932 366.833L373.195 366.971C362.683 372.217 351.909 377.326 340.871 382.158C301.977 399.416 259.404 414.326 213.94 426.476C213.94 426.476 211.312 427.304 206.188 428.547C160.198 440.558 143.207 443.499 92.0932 449.574C-6.40076 461.28 -41.47 358.957 -91.6643 358.957C-253.416 358.957 -396.012 433.793 -512.037 382.71L-547.383 382.71L-547.383 522.981L761.346 522.981Z"
+          d="M350.872 379.324C406.16 342.877 482.659 344.955 513.997 350.55V514.403H21.836L21.8388 429.929C22.1044 432.831 32.4456 440.889 68.0071 452.059C113.812 466.446 281.762 424.883 350.872 379.324Z"
           fill="${mainColor}"
         />
         <path
-          style="mix-blend-mode:screen"
-          d="M749.645 483.081C684.209 390.58 553.336 326.15 442.698 343.408C420.886 346.721 401.176 352.934 384.226 361.356L384.489 361.494C373.977 366.74 363.202 371.849 352.165 376.681L352.165 376.819C285.414 436.6 186.603 491.779 64.0078 522.981L491.579 522.981L749.645 483.081Z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M514.104 350.55C482.766 344.955 406.267 342.877 350.979 379.324C290.856 418.959 147.138 502.753 80.619 514.403H80.6172C80.622 514.403 80.619 514.403 80.619 514.403H514.104V350.55Z"
           fill="${subColor}"
         />
         <path
-          d="M360.043 438.591C492.586 407.879 584.279 463.61 597.68 522.982L96.3886 522.982C157.57 512.435 193.588 500.622 255.45 475.68C308.776 454.179 347.398 441.996 360.043 438.591Z"
-          fill="white"
-          fill-opacity="0.5"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M514.101 425.679C479.612 419.218 438.775 419.581 393.111 430.105C380.412 433.506 341.625 445.676 288.07 467.153C225.943 492.068 189.771 503.867 128.328 514.403L514.101 514.403V425.679Z"
+          fill="${extraColor1}"
         />
       </g>
-      <rect
-        x="18"
-        y="175.247"
-        width="439"
-        height="3.50499"
-        fill="${mainColor}"
-      />
+
     </svg>
   `;
-} 
+}

package/src/templates/badges/BadgeType7.ts

@@ -1,4 +1,4 @@
-import { ISvgProps } from "../../interface"; 
+import { ISvgProps } from "../../interface";
 
 export function createBadgeType7({
   mainColor = "#96A6B4",
@@ -32,7 +32,8 @@ export function createBadgeType7({
       />
       <mask
         id="mask0_2384_132"
-        style="mask-type: alpha"
+        // style="mask-type:alpha"
+        style={{ maskType: "alpha" }}
         maskUnits="userSpaceOnUse"
         x="17"
         y="17"
@@ -54,23 +55,43 @@ export function createBadgeType7({
           fill="${mainColor}"
         />
         <path
-          d="M244 471C118.638 471 51.249 381.296 26.7227 314H460.311C443.193 374.213 369.361 471 244 471Z"
-          fill="url(#${paintId0})"
+          d="M207.237 448.787C207.237 456.661 202.868 458.644 197.479 458.644C192.09 458.644 187.721 455.244 187.721 448.787C187.721 441.358 197.479 430.589 197.479 430.589C197.479 430.589 207.237 441.358 207.237 448.787Z"
+          fill="${mainColor}"
+        />
+        <path
+          d="M328.494 405.693C328.494 417.675 321.668 420.694 313.247 420.694C304.826 420.694 298 415.519 298 405.693C298 394.388 313.247 378.001 313.247 378.001C313.247 378.001 328.494 394.388 328.494 405.693Z"
+          fill="${subColor}"
+        />
+        <path
+          d="M421.717 420.263C421.717 447.705 406.083 454.619 386.798 454.619C367.513 454.619 351.879 442.767 351.879 420.263C351.879 394.374 386.798 356.845 386.798 356.845C386.798 356.845 421.717 394.374 421.717 420.263Z"
+          fill="${subColor}"
+        />
+        <path
+          d="M175.799 439.905C175.799 455.311 167.061 459.192 156.282 459.192C145.503 459.192 136.766 452.539 136.766 439.905C136.766 425.371 156.282 404.302 156.282 404.302C156.282 404.302 175.799 425.371 175.799 439.905Z"
+          fill="${subColor}"
+        />
+        <path
+          d="M311.06 467.351C311.06 482.757 302.322 486.638 291.544 486.638C280.765 486.638 272.027 479.985 272.027 467.351C272.027 452.817 291.544 431.748 291.544 431.748C291.544 431.748 311.06 452.817 311.06 467.351Z"
+          fill="${subColor}"
+        />
+        <path
+          d="M368.894 440.725C368.894 457.671 359.064 461.941 346.938 461.941C334.812 461.941 324.982 454.622 324.982 440.725C324.982 424.737 346.938 401.562 346.938 401.562C346.938 401.562 368.894 424.737 368.894 440.725Z"
+          fill="${mainColor}"
+        />
+        <path
+          d="M420.401 394.96C420.401 402.629 416.146 404.561 410.897 404.561C405.648 404.561 401.393 401.249 401.393 394.96C401.393 387.725 410.897 377.237 410.897 377.237C410.897 377.237 420.401 387.725 420.401 394.96Z"
+          fill="${mainColor}"
         />
       </g>
-      <defs>
-        <linearGradient
-          id="${paintId0}"
-          x1="244"
-          y1="244"
-          x2="244"
-          y2="471"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stop-color="white" />
-          <stop offset="1" stop-color="white" stop-opacity="0" />
-        </linearGradient>
-      </defs>
+      <path
+        d="M23 244C23 121.952 121.952 23 244 23H465V244C465 366.048 366.048 465 244 465C121.952 465 23 366.048 23 244Z"
+        stroke="${mainColor}"
+        strokeWidth="2"
+      />
+      <path
+        d="M244 471C118.638 471 51.249 381.296 26.7227 314H460.311C443.193 374.213 369.361 471 244 471Z"
+        fill="url(#paint0_linear_2384_132)"
+      />
     </svg>
   `;
 }

package/src/templates/svgTemplate.ts

@@ -65,10 +65,10 @@ export const badgeTemplates: templateType[] = [
     id: "BadgeType14",
     Component: Badges.BadgeType14,
   },
-  // {
-  //   id: "BadgeType15",
-  //   Component: Badges.BadgeType15,
-  // },
+  {
+    id: "BadgeType15",
+    Component: Badges.BadgeType15,
+  },
   {
     id: "BadgeType16",
     Component: Badges.BadgeType16,
@@ -89,10 +89,10 @@ export const badgeTemplates: templateType[] = [
     id: "BadgeType20",
     Component: Badges.BadgeType20,
   },
-  // {
-  //   id: "BadgeType21",
-  //   Component: Badges.BadgeType21,
-  // },
+  {
+    id: "BadgeType21",
+    Component: Badges.BadgeType21,
+  },
   {
     id: "BadgeType22",
     Component: Badges.BadgeType22,
@@ -631,97 +631,3 @@ export const iconTemplates: templateType[] = [
   { id: "IconWave2", Component: Icons.IconWave2 },
 ];
 
-// const Icons = {
-//   IconArrow: createIconArrow,
-
-//   IconBg1: createIconBg1,
-//   IconBg2: createIconBg2,
-//   IconBg3: createIconBg3,
-//   IconBg4: createIconBg4,
-//   IconBg5: createIconBg5,
-//   IconBg6: createIconBg6,
-//   IconBg7: createIconBg7,
-//   IconBg8: createIconBg8,
-//   IconBg9: createIconBg9,
-
-//   IconBottomLeft1: createIconBottomLeft1,
-//   IconBottomLeft2: createIconBottomLeft2,
-//   IconBottomRight1: createIconBottomRight1,
-//   IconBottomRight2: createIconBottomRight2,
-
-//   IconContainer1: createIconContainer1,
-//   IconContainer2: createIconContainer2,
-//   IconContainer3: createIconContainer3,
-//   IconContainer4: createIconContainer4,
-//   IconContainer5: createIconContainer5,
-
-//   IconDonut: createIconDonut,
-
-//   IconEllipse1: createIconEllipse1,
-//   IconEllipse2: createIconEllipse2,
-
-//   IconEtc1: createIconEtc1,
-//   IconEtc2: createIconEtc2,
-//   IconEtc3: createIconEtc3,
-
-//   IconFrame1: createIconFrame1,
-//   IconFrame2: createIconFrame2,
-//   IconFrame3: createIconFrame3,
-//   IconFrame4: createIconFrame4,
-
-//   IconGear: createIconGear,
-//   IconMedal: createIconMedal,
-
-//   IconMortarboard1: createIconMortarboard1,
-//   IconMortarboard2: createIconMortarboard2,
-//   IconMortarboard3: createIconMortarboard3,
-//   IconMortarboard4: createIconMortarboard4,
-//   IconMortarboard5: createIconMortarboard5,
-
-//   IconPhrase1: createIconPhrase1,
-//   IconPhrase2: createIconPhrase2,
-//   IconPhrase3: createIconPhrase3,
-//   IconPhrase4: createIconPhrase4,
-
-//   IconPillar1: createIconPillar1,
-//   IconPillar2: createIconPillar2,
-
-//   IconSkewedLeft: createIconSkewedLeft,
-//   IconSkewedRight: createIconSkewedRight,
-
-//   IconSmallType1: createIconSmallType1,
-//   IconSmallType2: createIconSmallType2,
-//   IconSmallType3: createIconSmallType3,
-//   IconSmallType4: createIconSmallType4,
-//   IconSmallType5: createIconSmallType5,
-//   IconSmallType6: createIconSmallType6,
-//   IconSmallType7: createIconSmallType7,
-//   IconSmallType8: createIconSmallType8,
-//   IconSmallType9: createIconSmallType9,
-//   IconSmallType10: createIconSmallType10,
-
-//   IconSpring1: createIconSpring1,
-//   IconSpring2: createIconSpring2,
-
-//   IconStar: createIconStar1,
-//   IconStar2: createIconStar2,
-//   IconStar3: createIconStar3,
-//   IconStar4: createIconStar4,
-//   IconStar5: createIconStar5,
-//   IconStar6: createIconStar6,
-
-//   IconTopLeft1: createIconTopLeft1,
-//   IconTopLeft2: createIconTopLeft2,
-//   IconTopRight1: createIconTopRight1,
-//   IconTopRight2: createIconTopRight2,
-
-//   IconTrophy1: createIconTrophy1,
-//   IconTrophy2: createIconTrophy2,
-//   IconTrophy3: createIconTrophy3,
-//   IconTrophy4: createIconTrophy4,
-
-//   IconType47: createIconType47,
-
-//   IconWave1: createIconWave1,
-//   IconWave2: createIconWave2,
-// };

package/src/utils/generateAchievementHTML.ts

@@ -15,17 +15,20 @@ import Certificates from "../templates/certificates";
 import { portraitComponents } from "../constants/componentsDirection";
 
 export async function generateAchievementHTML(
-  data: CertificateData,
+  achievementInfo: CertificateData,
   options: CertificateOptions = {}
 ): Promise<string> {
   const { type = "certificate", size = 600, noSpace = false } = options;
 
+  console.log("achievementInfo");
+  console.log(achievementInfo);
+  
   let achievementForm;
 
-  if (data.achievementInfo.achievementForm) {
-    achievementForm = data.achievementInfo.achievementForm;
+  if (achievementInfo.achievementForm) {
+    achievementForm = achievementInfo.achievementForm;
   } else {
-    achievementForm = data.achievementInfo;
+    achievementForm = achievementInfo;
   }
 
   // type에 따라 적절한 layout_json 선택
@@ -139,7 +142,7 @@ export async function generateAchievementHTML(
 
     let bindingValue: any = null;
     if (element.designType === CERTIFICATE_DESIGN_TYPE.PROPS) {
-      bindingValue = getBindingValue(element.type, element.bindingKey, data);
+      bindingValue = getBindingValue(element.type, element.bindingKey, achievementInfo);
 
       if (element.controlType === "text") {
         element.text = bindingValue;
@@ -255,7 +258,7 @@ export async function generateAchievementHTML(
         ">
           ${
             badgeElements
-              ? await generateAchievementHTML(data, {
+              ? await generateAchievementHTML(achievementInfo, {
                   type: "badge",
                   noSpace: true,
                 })

package/src/utils/generateDesignHTML.ts

@@ -14,38 +14,6 @@ import {
 import Certificates from "../templates/certificates";
 import { portraitComponents } from "../constants/componentsDirection";
 
-async function convertImageToBase64(url: string): Promise<string> {
-  try {
-    // URL이 이미 baseUrl을 포함하고 있는지 확인
-    let finalUrls = [];
-    finalUrls = url.split("https://");
-    const finalUrl = "https://" + finalUrls.pop();
-
-    const response = await 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?.startsWith("image/")) {
-      throw new Error(`Not an image! content-type: ${contentType}`);
-    }
-
-    const buffer = await 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=";
-  }
-}
-
 export async function generateDesignHTML(
   data: IAchievementDesignItem,
   options: DesignOptions = {}
@@ -283,19 +251,19 @@ export async function generateDesignHTML(
         }
       } else if (element.src) {
         // 이미지를 base64로 변환
-        const base64Image = await convertImageToBase64(element.src);
+        // const base64Image = await 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;
-            "
-          />`;
+          src="${element.src}"
+          alt="Uploaded"
+          style="
+            width: 100%;
+            height: 100%;
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+            align-self: center;
+          "
+        />`;
       }
       html += `</div>`;
     }

package/src/utils/getBindingValue.ts

@@ -68,9 +68,7 @@ const getClubValue = (
 
   if (bindingKey.startsWith("name_")) {
     const index = Number(bindingKey.split("_")[1]) - 1;
-    return (
-      achievementForm?.clubInstitutions?.[index]?.name || ""
-    );
+    return achievementForm?.clubInstitutions?.[index]?.name || "";
   }
 
   if (
@@ -84,9 +82,9 @@ const getClubValue = (
       : "club_symbol";
 
     return achievementForm.clubInstitutions?.[index]?.images
-      ? groupByType(
-          achievementForm.clubInstitutions[index].images
-        )[imageKey]?.[0]?.path
+      ? groupByType(achievementForm.clubInstitutions[index].images)[
+          imageKey
+        ]?.[0]?.path
       : null;
   }
 
@@ -109,10 +107,7 @@ const getClubValue = (
     );
   }
 
-  if (
-    bindingKey === "name" &&
-    achievementForm.representativeInstitution
-  ) {
+  if (bindingKey === "name" && achievementForm.representativeInstitution) {
     return achievementForm.representativeInstitution?.name;
   }
 
@@ -136,17 +131,20 @@ export const getBindingValue = (
   bindingKey: string,
   data: any
 ) => {
-  const { achievementInfo, user, kollegeInfo } = data;
 
   switch (type) {
     case "achievement":
-      return getAchievementValue(bindingKey, achievementInfo);
+      return getAchievementValue(bindingKey, data);
     case "user":
-      return getUserValue(bindingKey, user);
+      return getUserValue(bindingKey, data.user);
     case "club":
-      return getClubValue(bindingKey, kollegeInfo, achievementInfo);
+      return getClubValue(
+        bindingKey,
+        data?.achievementForm?.club || data?.club,
+        data 
+      );
     case "custom":
-      return getCustomValue(bindingKey, achievementInfo);
+      return getCustomValue(bindingKey, data);
     default:
       return null;
   }