Feature: 이미지 업로드 최적화 (#109)

* Feat: eslint dependencies 룰 off

* Chore: react-image-file-resizer 패키지 설치

* Feat: 이미지 리사이징 유틸 함수 기능 개발

* Refactor: 업로드 이미지 사이즈 리사이징

.eslintrc.cjs

@@ -16,6 +16,7 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh', '@typescript-eslint', 'react-hooks', 'prettier'],
   rules: {
+    'import/no-extraneous-dependencies': 'off',
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },

package.json

@@ -18,6 +18,7 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-image-file-resizer": "^0.4.8",
     "react-intersection-observer": "^9.5.3",
     "react-router-dom": "^6.21.1",
     "styled-components": "^6.1.3",

src/Services/Post/index.ts

@@ -7,6 +7,7 @@ import {
   PostCreatePostRequestType,
   PutUpdatePostRequestType,
 } from '@/Types/Request';
+import resizeImage from '@/Utils/resizeImage';
 
 /**
  * @brief 특정 채널의 포스트 목록을 불러옵니다.
@@ -78,9 +79,10 @@ export const createPost = async ({
     if (image == null) {
       throw new Error('이미지가 비어있습니다.');
     }
+    const resizedImage = await resizeImage(image, 700, 400);
     const formData = new FormData();
     formData.append('title', title);
-    formData.append('image', image);
+    formData.append('image', resizedImage);
     formData.append('channelId', channelId);
 
     await axiosAuthInstance.post(DOMAIN.CREATE_POST, formData);
@@ -126,7 +128,8 @@ export const updatePost = async ({
     formData.append('postId', postId);
     formData.append('title', title);
     if (image instanceof File) {
-      formData.append('image', image);
+      const resizedImage = await resizeImage(image, 700, 400);
+      formData.append('image', resizedImage);
     }
     formData.append('channelId', channelId);
 

src/Services/User/index.ts

@@ -3,6 +3,7 @@ import { GetUserListRequestType } from '@/Types/Request';
 import { UserType } from '@/Types/UserType';
 import { DOMAIN } from '@/Constants/Api';
 import handleError from '@/Api/handleError';
+import resizeImage from '@/Utils/resizeImage';
 
 /**
  * @brief 전체 사용자 목록을 불러옵니다.
@@ -61,9 +62,10 @@ export const getUser = async (userId: string) => {
  */
 export const updateProfileImage = async (image: File) => {
   try {
+    const resizedImage = await resizeImage(image, 100, 100);
     const formData = new FormData();
     formData.append('isCover', 'false');
-    formData.append('image', image);
+    formData.append('image', resizedImage);
 
     const res = await axiosAuthInstance.post<UserType>(
       DOMAIN.UPLOAD_PHOTO,
@@ -82,9 +84,10 @@ export const updateProfileImage = async (image: File) => {
  */
 export const updateCoverImage = async (image: File) => {
   try {
+    const resizedImage = await resizeImage(image, 100, 100);
     const formData = new FormData();
     formData.append('isCover', 'true');
-    formData.append('image', image);
+    formData.append('image', resizedImage);
 
     const res = await axiosAuthInstance.post<UserType>(
       DOMAIN.UPLOAD_PHOTO,

src/Utils/resizeImage.ts

@@ -0,0 +1,36 @@
+import FileResizer from 'react-image-file-resizer';
+
+type ResizeImage = (
+  imageFile: File,
+  width: number,
+  height: number,
+  quality?: number,
+) => Promise<Blob>;
+
+const resizeImage: ResizeImage = async (
+  imageFile,
+  width,
+  height,
+  quality = 100,
+) => {
+  return new Promise<Blob>((resolve, reject) => {
+    FileResizer.imageFileResizer(
+      imageFile,
+      width,
+      height,
+      'WEBP',
+      quality,
+      0,
+      (url) => {
+        if (url instanceof Blob) {
+          resolve(url);
+        } else {
+          reject(new Error('Result is not a Blob.'));
+        }
+      },
+      'blob',
+    );
+  });
+};
+
+export default resizeImage;