feat: 이미지 리사이징 기능 추가 #146

frontend/src/api/image/index.ts

@@ -1,12 +1,9 @@
 import { axiosInstance } from '../axiosInstance';
 import { PreSignedURLResponse } from '../../types';
 import { END_POINTS, IMAGE_EXTENSIONS } from '@/constants/api';
-import { THREE_MB } from '../../constants/api';
+import { IMAGE_HEIGHT, IMAGE_WIDTH, THREE_MB } from '../../constants/api';
 
-export const generatePreSignedPost = async (
-  dirName: string,
-  extension: string,
-) => {
+const generatePreSignedPost = async (dirName: string, extension: string) => {
   const { data } = await axiosInstance.post<PreSignedURLResponse>(
     END_POINTS.PRE_SIGNED_POST,
     {
@@ -17,19 +14,64 @@ export const generatePreSignedPost = async (
   return data;
 };
 
-export const getExtensionByFile = (file: File) => {
+const getExtensionByFile = (file: File) => {
   const extension = file.name.split('.').pop();
   return extension ? extension.toLowerCase() : null;
 };
 
-export const validateFile = (file: File, extension: string | null) => {
+const validateFile = (file: File, extension: string | null) => {
   return !(
     !extension ||
     !IMAGE_EXTENSIONS.has(extension) ||
     file.size > THREE_MB
   );
 };
 
+const resizeImage = async (
+  file: File,
+  width: number,
+  height: number,
+): Promise<File> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const reader = new FileReader();
+
+    reader.onload = (event) => {
+      if (event.target?.result) {
+        img.src = event.target.result as string;
+      }
+    };
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        reject(new Error('Canvas Context Get Error'));
+        return;
+      }
+      canvas.width = width;
+      canvas.height = height;
+      ctx.drawImage(img, 0, 0, width, height);
+      canvas.toBlob(
+        (blob) => {
+          if (blob) {
+            const resizedFile = new File([blob], file.name, {
+              type: file.type,
+            });
+            resolve(resizedFile);
+          } else {
+            reject(new Error('Blob Conversion Error'));
+          }
+        },
+        file.type,
+        0.9,
+      );
+    };
+    img.onerror = (error) => reject(error);
+    reader.onerror = (error) => reject(error);
+    reader.readAsDataURL(file);
+  });
+};
+
 export const uploadImage = async (file: File, dirName: string) => {
   const extension = getExtensionByFile(file);
   if (!validateFile(file, extension)) {
@@ -38,11 +80,17 @@ export const uploadImage = async (file: File, dirName: string) => {
     );
   }
   const preSignedPost = await generatePreSignedPost(dirName, extension!);
+  let resizedImage: File;
+  try {
+    resizedImage = await resizeImage(file, IMAGE_WIDTH, IMAGE_HEIGHT);
+  } catch (err) {
+    throw new Error(`이미지 리사이즈 중 에러가 발생했습니다 : ${err}`);
+  }
   const formData = new FormData();
   Object.entries(preSignedPost.fields).forEach(([key, value]) => {
     formData.append(key, value);
   });
-  formData.append('file', file);
+  formData.append('file', resizedImage);
   return fetch(preSignedPost.url, {
     method: 'POST',
     body: formData,

frontend/src/constants/api.ts

@@ -47,3 +47,5 @@ export const IMAGE_EXTENSIONS = new Set([
 ]);
 
 export const THREE_MB = 3145728;
+export const IMAGE_WIDTH = 1200;
+export const IMAGE_HEIGHT = 900;