feat: 이벤트 배너 이미지 형식을 WebP로 전환하여 이미지 성능 개선

src/features/event/hooks/usePresignedUrlHook.ts

@@ -1,8 +1,8 @@
 import { PresignedUrlRequest, PresignedUrlResponse } from '../model/presignedUrl';
 import { axiosClient } from '../../../shared/types/api/http-client';
-
 import axios from 'axios';
 import { ApiResponse } from '../../../shared/types/api/apiResponse';
+import { convertImageToWebP } from '../../../shared/lib/convertImageToWebP';
 
 const getPresignedUrl = async (dto: PresignedUrlRequest) => {
   try {
@@ -24,7 +24,7 @@ export const putS3Image = async ({ url, file }: { url: string; file: File }) =>
     console.log('업로드할 URL:', url);
     await axios.put(url, file, {
       headers: {
-        'Content-Type': file.type,
+        'Content-Type': 'image/webp',
       },
     });
   } catch (error) {
@@ -35,8 +35,10 @@ export const putS3Image = async ({ url, file }: { url: string; file: File }) =>
 };
 
 export const uploadFile = async (file: File) => {
-  const { name } = file;
-  const presignedUrlResponse = await getPresignedUrl({ fileName: name });
+  const webFile = await convertImageToWebP(file);
+  const fileName = webFile.name;
+
+  const presignedUrlResponse = await getPresignedUrl({ fileName });
 
   if (!presignedUrlResponse) {
     throw new Error('Failed to get presigned url');
@@ -45,7 +47,7 @@ export const uploadFile = async (file: File) => {
   const url = presignedUrlResponse;
   console.log('Presigned URL:', url);
 
-  await putS3Image({ url, file });
+  await putS3Image({ url, file: webFile });
 
   // S3 URL에서 presigned URL 파라미터를 제거하고 기본 URL 반환
   return url.split('?')[0];

src/shared/hooks/useImageUpload.ts

@@ -1,5 +1,6 @@
 import { useRef, useState, useCallback, useEffect } from 'react';
 import { uploadFile } from '../../features/event/hooks/usePresignedUrlHook';
+import { convertImageToWebP } from '../lib/convertImageToWebP';
 export const DEFAULT_BASIC_PROFILE = 'https://gotogetherbucket.s3.ap-northeast-2.amazonaws.com/default.png';
 
 const useImageUpload = ({
@@ -41,7 +42,8 @@ const useImageUpload = ({
       if (!validateFile(file)) return;
 
       try {
-        const imageUrl = await uploadFile(file);
+        const webpFile = await convertImageToWebP(file);
+        const imageUrl = await uploadFile(webpFile);
         setPreviewUrl(imageUrl);
         onSuccess?.(imageUrl);
       } catch (error) {

src/shared/lib/convertImageToWebP.ts

@@ -0,0 +1,36 @@
+export const convertImageToWebP = (file: File): Promise<File> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      if (typeof reader.result === 'string') {
+        img.src = reader.result;
+      }
+    };
+
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      canvas.width = img.width;
+      canvas.height = img.height;
+
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return reject(new Error('Canvas context error'));
+
+      ctx.drawImage(img, 0, 0);
+
+      canvas.toBlob(blob => {
+        if (!blob) return reject(new Error('WebP 변환 실패'));
+        const webpFile = new File([blob], file.name.replace(/\.\w+$/, '.webp'), {
+          type: 'image/webp',
+        });
+        resolve(webpFile);
+      }, 'image/webp');
+    };
+
+    img.onerror = reject;
+    reader.onerror = reject;
+
+    reader.readAsDataURL(file);
+  });
+};

src/shared/lib/migrateJpgToWebp.ts

@@ -0,0 +1,31 @@
+import { uploadFile } from '../../features/event/hooks/usePresignedUrlHook';
+import { convertImageToWebP } from './convertImageToWebP';
+
+const oldJpgUrls: string[] = [
+  // ... 여기에 변환할 이미지 URL들
+];
+
+export const runImageMigration = async () => {
+  for (const jpgUrl of oldJpgUrls) {
+    try {
+      const response = await fetch(jpgUrl);
+      const blob = await response.blob();
+
+      const file = new File([blob], extractFileName(jpgUrl), { type: blob.type });
+
+      const webpFile = await convertImageToWebP(file);
+      const webpUrl = await uploadFile(webpFile);
+
+      console.log(`✅ ${jpgUrl} → ${webpUrl}`);
+    } catch (error) {
+      console.error(`❌ 변환 실패: ${jpgUrl}`, error);
+    }
+  }
+
+  console.log('✅ 전체 마이그레이션 완료');
+};
+
+const extractFileName = (url: string) => {
+  const baseName = url.split('/').pop()?.split('?')[0] ?? 'unknown.jpg';
+  return baseName.replace(/\.(jpg|jpeg)$/i, '.webp');
+};

vite.config.ts

@@ -3,8 +3,8 @@ import react from '@vitejs/plugin-react-swc';
 import path from 'path';
 import tailwindcss from 'tailwindcss';
 import autoprefixer from 'autoprefixer';
-import fs from 'fs';
 import { visualizer } from 'rollup-plugin-visualizer';
+// import fs from 'fs';
 
 // https://vite.dev/config/
 export default defineConfig(({ mode }) => {
@@ -35,10 +35,11 @@ export default defineConfig(({ mode }) => {
     },
     server: {
       host: true,
-      https: {
+      // 로컬 실행을 위해 일시적으로 https 로컬 설정 주석처리
+      /* https: {
         key: fs.readFileSync('gotogether.io.kr+3-key.pem'),
         cert: fs.readFileSync('gotogether.io.kr+3.pem'),
-      },
+      }, */
       allowedHosts: ['gotogether.io.kr'],
       proxy: {
         '/api/v1': {