From 1ef98e60d4af8f27b2bd5600359fa057300d16ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A7=80=EC=9D=B8=ED=98=81?= <87266785+wldlsgur@users.noreply.github.com> Date: Fri, 10 May 2024 00:08:14 +0900 Subject: [PATCH] =?UTF-8?q?Feature:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=B5=9C=EC=A0=81=ED=99=94=20(#1?= =?UTF-8?q?09)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Feat: eslint dependencies 룰 off * Chore: react-image-file-resizer 패키지 설치 * Feat: 이미지 리사이징 유틸 함수 기능 개발 * Refactor: 업로드 이미지 사이즈 리사이징 --- .eslintrc.cjs | 1 + package-lock.json | 6 ++++++ package.json | 1 + src/Services/Post/index.ts | 7 +++++-- src/Services/User/index.ts | 7 +++++-- src/Utils/resizeImage.ts | 36 ++++++++++++++++++++++++++++++++++++ 6 files changed, 54 insertions(+), 4 deletions(-) create mode 100644 src/Utils/resizeImage.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 47cfc75b..88f728f5 100644 --- a/.eslintrc.cjs +++ b/.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 }, diff --git a/package-lock.json b/package-lock.json index 6e223eb9..fa480aaf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,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", @@ -4790,6 +4791,11 @@ "react": "^18.2.0" } }, + "node_modules/react-image-file-resizer": { + "version": "0.4.8", + "resolved": "https://registry.npmjs.org/react-image-file-resizer/-/react-image-file-resizer-0.4.8.tgz", + "integrity": "sha512-Ue7CfKnSlsfJ//SKzxNMz8avDgDSpWQDOnTKOp/GNRFJv4dO9L5YGHNEnj40peWkXXAK2OK0eRIoXhOYpUzUTQ==" + }, "node_modules/react-intersection-observer": { "version": "9.8.2", "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.8.2.tgz", diff --git a/package.json b/package.json index 9830a26a..474f1736 100644 --- a/package.json +++ b/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", diff --git a/src/Services/Post/index.ts b/src/Services/Post/index.ts index 1fe0ed56..a0dbc953 100644 --- a/src/Services/Post/index.ts +++ b/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); diff --git a/src/Services/User/index.ts b/src/Services/User/index.ts index 30542ddd..f13e7e11 100644 --- a/src/Services/User/index.ts +++ b/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( 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( DOMAIN.UPLOAD_PHOTO, diff --git a/src/Utils/resizeImage.ts b/src/Utils/resizeImage.ts new file mode 100644 index 00000000..3a9e9867 --- /dev/null +++ b/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; + +const resizeImage: ResizeImage = async ( + imageFile, + width, + height, + quality = 100, +) => { + return new Promise((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;