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/features/event/ui/FileUpload.tsx

@@ -1,20 +1,27 @@
 import FileUploadImage from '../../../../public/assets/event-manage/creation/FileUpload.svg';
-import { FunnelState, useFunnelState } from '../model/FunnelContext';
+import { FunnelState } from '../model/FunnelContext';
 import useImageUpload from '../../../shared/hooks/useImageUpload';
 import { useEffect } from 'react';
 
 interface FileUploadProps {
+  value?: string;
   onChange?: (url: string) => void;
+  eventState?: FunnelState['eventState'];
   setEventState?: React.Dispatch<React.SetStateAction<FunnelState['eventState']>>;
   useDefaultImage?: boolean;
   onValidationChange?: (isValid: boolean) => void;
 }
 
-const FileUpload = ({ onChange, setEventState, useDefaultImage, onValidationChange }: FileUploadProps) => {
-  const { eventState } = useFunnelState();
-
+const FileUpload = ({
+  value = '',
+  onChange,
+  eventState,
+  setEventState,
+  useDefaultImage,
+  onValidationChange,
+}: FileUploadProps) => {
   const { previewUrl, fileInputRef, handleFileChange, handleDrop, setIsDragging, isDragging } = useImageUpload({
-    value: eventState.bannerImageUrl,
+    value: value ?? eventState?.bannerImageUrl ?? '',
     onSuccess: url => {
       onChange?.(url);
       setEventState?.(prev => ({ ...prev, bannerImageUrl: url }));

src/features/event/ui/LinkInput.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useFunnelState } from '../model/FunnelContext';
+import { FunnelState } from '../model/FunnelContext';
 import AddButton from '../../../../public/assets/event-manage/creation/AddBtn.svg';
 import CloseButton from '../../../../public/assets/event-manage/creation/CloseBtn.svg';
 import Link from '../../../../public/assets/event-manage/creation/Link.svg';
@@ -9,9 +9,15 @@ export interface Link {
   url: string;
 }
 
-const LinkInput = () => {
-  const { eventState, setEventState } = useFunnelState();
-  const links = eventState.referenceLinks;
+interface LinkInputProps {
+  value?: Link[];
+  onChange?: (value: Link[]) => void;
+  eventState?: FunnelState['eventState'];
+  setEventState?: React.Dispatch<React.SetStateAction<FunnelState['eventState']>>;
+}
+
+const LinkInput = ({ value, onChange, eventState, setEventState }: LinkInputProps) => {
+  const links = value ?? eventState?.referenceLinks ?? [];
 
   const [activeInput, setActiveInput] = useState<{ field: 'title' | 'url' | null }>({
     field: null,
@@ -21,20 +27,19 @@ const LinkInput = () => {
   });
 
   const updateAll = (newLinks: Link[]) => {
+    onChange?.(newLinks);
     setEventState?.(prev => ({ ...prev, referenceLinks: newLinks }));
   };
 
-  const addNewLink = () => {
-    updateAll([...(links || []), { title: '', url: '' }]);
-  };
+  const addNewLink = () => updateAll([...links, { title: '', url: '' }]);
 
   const removeLink = (index: number) => {
     const newLinks = links.filter((_, i) => i !== index);
-    updateAll(newLinks);
+    if (newLinks) updateAll(newLinks);
   };
 
   const updateLink = (index: number, field: keyof Link, value: string) => {
-    const newLinks = [...links];
+    const newLinks = [...(links ?? [])];
     newLinks[index] = { ...newLinks[index], [field]: value };
     updateAll(newLinks);
   };

src/features/event/ui/TextEditor.tsx

@@ -2,9 +2,13 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 import { uploadFile } from '../hooks/usePresignedUrlHook';
-import { useFunnelState } from '../model/FunnelContext';
+import { FunnelState } from '../model/FunnelContext';
 
 interface TextEditorProps {
+  eventState?: FunnelState['eventState'];
+  setEventState?: React.Dispatch<React.SetStateAction<FunnelState['eventState']>>;
+  value?: string;
+  onChange?: (value: string) => void;
   onValidationChange?: (isValid: boolean) => void;
 }
 
@@ -31,11 +35,19 @@ const formats = [
   'h1',
 ];
 
-const TextEditor = ({ onValidationChange }: TextEditorProps) => {
-  const { eventState, setEventState } = useFunnelState();
+const TextEditor = ({ eventState, setEventState, value = '', onChange, onValidationChange }: TextEditorProps) => {
   const quillRef = useRef<ReactQuill | null>(null);
+
+  const [editorContent, setEditorContent] = useState('');
   const [isOverLimit, setIsOverLimit] = useState(false);
 
+  useEffect(() => {
+    const initial = value ?? eventState?.description ?? '';
+    if (!editorContent && initial) {
+      setEditorContent(initial);
+    }
+  }, [value, eventState?.description, editorContent]);
+
   const imageHandler = async () => {
     if (!quillRef.current) return;
 
@@ -74,25 +86,27 @@ const TextEditor = ({ onValidationChange }: TextEditorProps) => {
     return textLength + imageCount * IMAGE_WEIGHT;
   };
 
-  const handleChange = (value: string) => {
-    const totalLength = getTotalContentLength(value);
+  const handleChange = (val: string) => {
+    const totalLength = getTotalContentLength(val);
 
     if (totalLength <= MAX_LENGTH) {
-      setEventState?.(prev => ({ ...prev, description: value }));
-      onValidationChange?.(getPlainText(value).length > 0);
+      setEditorContent(val);
+      onChange?.(val);
+      setEventState?.(prev => ({ ...prev, description: val }));
+      onValidationChange?.(getPlainText(val).length > 0);
       setIsOverLimit(false);
     } else {
       const editorInstance = quillRef.current?.getEditor();
       if (editorInstance) {
-        editorInstance.setContents(editorInstance.clipboard.convert(eventState.description));
+        editorInstance.setContents(editorInstance.clipboard.convert(eventState?.description));
       }
       setIsOverLimit(true);
     }
   };
 
   useEffect(() => {
-    onValidationChange?.(getPlainText(eventState.description).length > 0);
-  }, [eventState.description, onValidationChange]);
+    onValidationChange?.(getPlainText(editorContent).length > 0);
+  }, [editorContent, onValidationChange]);
 
   const modules = useMemo(
     () => ({
@@ -115,15 +129,15 @@ const TextEditor = ({ onValidationChange }: TextEditorProps) => {
     []
   );
 
-  const totalLength = getTotalContentLength(eventState.description);
-  const imageCount = getImageCount(eventState.description);
+  const totalLength = getTotalContentLength(editorContent);
+  const imageCount = getImageCount(editorContent);
 
   return (
     <div className="flex flex-col justify-start gap-2 mb-4">
       <h1 className="font-bold text-black text-lg">이벤트에 대한 상세 설명</h1>
       <ReactQuill
         theme="snow"
-        value={eventState.description}
+        value={editorContent}
         ref={quillRef}
         modules={modules}
         formats={formats}

src/pages/dashboard/ui/EventDetailPage.tsx

@@ -66,9 +66,9 @@ const EventDetailPage = () => {
     <DashboardLayout centerContent="대시보드">
       <div className="flex flex-col gap-5 mt-8 px-7">
         <h1 className="text-center text-xl font-bold mb-5">이벤트 상세 정보</h1>
-        <FileUpload onChange={setBannerImageUrl} useDefaultImage={false} />
-        <TextEditor />
-        <LinkInput />
+        <FileUpload value={bannerImageUrl} onChange={setBannerImageUrl} useDefaultImage={false} />
+        <TextEditor value={description} />
+        <LinkInput value={referenceLinks} onChange={setReferenceLinks} />
       </div>
       <div className="w-full p-7">
         <Button label="저장하기" onClick={handleSave} className="w-full h-12 rounded-full" />

src/pages/dashboard/ui/EventInfoPage.tsx

@@ -55,7 +55,7 @@ const EventInfoPage = () => {
       category: data.result.category || 'DEVELOPMENT_STUDY',
       hashtags: data.result.hashtags || [],
       organizerEmail: email || data.result.organizerEmail || '',
-      organizerPhoneNumber: phone.replace(/-/g, '') || data.result.organizerPhoneNumber || '',
+      organizerPhoneNumber: phone || data.result.organizerPhoneNumber || '',
     };
 
     mutate(requestData, {

src/pages/event/ui/create-event/EventInfoPage.tsx

@@ -9,7 +9,7 @@ interface EventInfoPageProps {
 }
 
 const EventInfoPage = ({ onValidationChange }: EventInfoPageProps) => {
-  const { setEventState } = useFunnelState();
+  const { eventState, setEventState } = useFunnelState();
   const [isFileValid, setIsFileValid] = useState(false);
   const [isTextValid, setIsTextValid] = useState(false);
 
@@ -27,9 +27,14 @@ const EventInfoPage = ({ onValidationChange }: EventInfoPageProps) => {
 
   return (
     <div className="w-full px-5 space-y-8">
-      <FileUpload setEventState={setEventState} useDefaultImage={false} onValidationChange={handleFileValidation} />
-      <TextEditor onValidationChange={handleTextValidation} />
-      <LinkInput />
+      <FileUpload
+        eventState={eventState}
+        setEventState={setEventState}
+        useDefaultImage={false}
+        onValidationChange={handleFileValidation}
+      />
+      <TextEditor eventState={eventState} setEventState={setEventState} onValidationChange={handleTextValidation} />
+      <LinkInput eventState={eventState} setEventState={setEventState} />
     </div>
   );
 };

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': {