From a720169638a71a014aba37df3c29456a82ddb92a Mon Sep 17 00:00:00 2001
From: Marshall Ku <marshall@kakao.com>
Date: Fri, 9 Feb 2024 18:24:24 +0900
Subject: [PATCH] Fix Image to preserve extension of images

---
 apps/blog/src/components/Image/index.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/blog/src/components/Image/index.tsx b/apps/blog/src/components/Image/index.tsx
index 537a505a..6999e83b 100644
--- a/apps/blog/src/components/Image/index.tsx
+++ b/apps/blog/src/components/Image/index.tsx
@@ -1,21 +1,28 @@
 import { type ImgHTMLAttributes } from "react";
 
 interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    src: string;
     forceSize?: number;
 }
 
 const IMAGE_SIZE = [480, 600, 860, 1180];
 
 function Image({ src, alt, width, height, forceSize, ...rest }: ImageProps) {
+    const extension = src.split(".").pop();
+    const srcWithoutExtension = src.split(".").slice(0, -1).join(".");
+
     return (
         <img
-            src={`${process.env.NEXT_PUBLIC_CDN_URL}${src}${
-                forceSize && process.env.NEXT_PUBLIC_CDN_URL !== "" ? `=w${forceSize}` : ""
-            }`}
+            src={`${process.env.NEXT_PUBLIC_CDN_URL}${srcWithoutExtension}${
+                forceSize && process.env.NEXT_PUBLIC_CDN_URL !== "" ? `.w${forceSize}` : ""
+            }.${extension}`}
             srcSet={
                 width && height && process.env.NEXT_PUBLIC_CDN_URL !== ""
                     ? IMAGE_SIZE.filter((size) => size < Number(width))
-                          .map((size) => `${process.env.NEXT_PUBLIC_CDN_URL}${src}=w${size} ${size}w`)
+                          .map(
+                              (size) =>
+                                  `${process.env.NEXT_PUBLIC_CDN_URL}${srcWithoutExtension}.w${size}.${extension} ${size}w`,
+                          )
                           .join(", ")
                     : undefined
             }