[Refactor] 이미지 사이즈 최적화

src/constants/OptimizeImage.ts

@@ -0,0 +1,47 @@
+export const optimizeImage = (file: File): Promise<File> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+
+    reader.onload = (event) => {
+      const img = new Image();
+      img.src = event.target?.result as string;
+
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return reject('Canvas context를 가져올 수 없음');
+
+        const MAX_WIDTH = 760;
+        let width = img.width;
+        let height = img.height;
+
+        if (width > MAX_WIDTH) {
+          height *= MAX_WIDTH / width;
+          width = MAX_WIDTH;
+        }
+
+        canvas.width = width;
+        canvas.height = height;
+        ctx.drawImage(img, 0, 0, width, height);
+
+        canvas.toBlob(
+          (blob) => {
+            if (!blob) return reject('Blob 변환 실패');
+
+            const optimizedFile = new File([blob], 'optimized.webp', {
+              type: 'image/webp',
+              lastModified: Date.now(),
+            });
+
+            resolve(optimizedFile);
+          },
+          'image/webp',
+          0.8
+        );
+      };
+    };
+
+    reader.onerror = (error) => reject(error);
+  });
+};

src/hooks/queries/feed.query.ts

@@ -20,6 +20,7 @@ import {
   Comment,
   uploadImage,
 } from '@/apis/feed.api';
+import { optimizeImage } from '@/constants/OptimizeImage';
 import { querySuccessHandler } from '@/utils/querySuccessHandler';
 import {
   InfiniteData,
@@ -242,7 +243,11 @@ export const usePostImage = (): UseMutationResult<
 > => {
   return useMutation({
     mutationFn: async ({ file }: UsePostImageParams) => {
-      return uploadImage(file);
+      console.log('🖼️ 원본 이미지 크기:', file.size / 760, 'KB');
+      const optimizedFile = await optimizeImage(file);
+      console.log('🖼️ 최적화된 이미지 크기:', optimizedFile.size / 760, 'KB');
+
+      return uploadImage(optimizedFile);
     },
     onError: (error) => {
       console.error('이미지 업로드 실패:', error);

src/hooks/queries/hub.query.ts

@@ -17,6 +17,7 @@ import {
   togledBookmark,
   uploadHubImage,
 } from '@/apis/hub.api';
+import { optimizeImage } from '@/constants/OptimizeImage';
 
 import queryClient from '@/utils/queryClient';
 import {
@@ -292,7 +293,11 @@ export const useHubPostImage = (): UseMutationResult<
 > => {
   return useMutation({
     mutationFn: async ({ file }: UsePostImageParams) => {
-      return uploadHubImage(file);
+      console.log('🖼️ 원본 이미지 크기:', file.size / 760, 'KB');
+      const optimizedFile = await optimizeImage(file);
+      console.log('🖼️ 최적화된 이미지 크기:', optimizedFile.size / 760, 'KB');
+
+      return uploadHubImage(optimizedFile);
     },
     onError: (error) => {
       console.error('이미지 업로드 실패:', error);