게시글 작성 시 이미지 파일을 보낼 때 webp 로 압축하여 성능 개선 (#614)

* feat: (#555) browser-image-compression 설치 및 본문 이미지 훅에 적용

* feat: (#555) 선택지 옵션 사진을 webp로 변환하도록 구현

frontend/package.json

@@ -20,6 +20,7 @@
  },
  "dependencies": {
  "@tanstack/react-query": "^4.29.19",
+ "browser-image-compression": "^2.0.2",
  "dotenv": "^16.3.1",
  "msw": "^1.2.3",
  "react": "^18.2.0",

frontend/src/hooks/useContentImage.ts

@@ -2,6 +2,8 @@ import { ChangeEvent, useRef, useState } from 'react';
 
 import { MAX_FILE_SIZE } from '@components/PostForm/constants';
 
+import { convertImageToWebP } from '@utils/resizeImage';
+
 export const useContentImage = (imageUrl: string = '') => {
  const [contentImage, setContentImage] = useState(imageUrl);
  const contentInputRef = useRef<HTMLInputElement | null>(null);
@@ -11,13 +13,23 @@ export const useContentImage = (imageUrl: string = '') => {
  if (contentInputRef.current) contentInputRef.current.value = '';
  };
 
- const handleUploadImage = (event: ChangeEvent<HTMLInputElement>) => {
+ const handleUploadImage = async (event: ChangeEvent<HTMLInputElement>) => {
  const { files } = event.target;
 
  if (!files) return;
 
  const file = files[0];
 
+ const webpFileList = await convertImageToWebP(file);
+
+ event.target.files = webpFileList;
+
+ const reader = new FileReader();
+
+ const webpFile = webpFileList[0];
+
+ reader.readAsDataURL(webpFile);
+
  event.target.setCustomValidity('');
 
  if (file.size > MAX_FILE_SIZE) {
@@ -27,10 +39,6 @@ export const useContentImage = (imageUrl: string = '') => {
  return;
  }
 
- const reader = new FileReader();
-
- reader.readAsDataURL(file);
-
  reader.onloadend = () => {
  setContentImage(reader.result?.toString() ?? '');
  };

frontend/src/hooks/useWritingOption.tsx

@@ -2,6 +2,8 @@ import React, { ChangeEvent, useState } from 'react';
 
 import { MAX_FILE_SIZE } from '@components/PostForm/constants';
 
+import { convertImageToWebP } from '@utils/resizeImage';
+
 const MAX_WRITING_LENGTH = 50;
 
 export interface WritingVoteOptionType {
@@ -78,13 +80,26 @@ export const useWritingOption = (initialOptionList: WritingVoteOptionType[] = IN
  setOptionList(updatedOptionList);
  };
 
- const handleUploadImage = (event: React.ChangeEvent<HTMLInputElement>, optionId: number) => {
+ const handleUploadImage = async (
+ event: React.ChangeEvent<HTMLInputElement>,
+ optionId: number
+ ) => {
  const { files } = event.target;
 
  if (!files) return;
 
  const file = files[0];
 
+ const webpFileList = await convertImageToWebP(file);
+
+ event.target.files = webpFileList;
+
+ const reader = new FileReader();
+
+ const webpFile = webpFileList[0];
+
+ reader.readAsDataURL(webpFile);
+
  event.target.setCustomValidity('');
 
  if (file.size > MAX_FILE_SIZE) {
@@ -94,11 +109,6 @@ export const useWritingOption = (initialOptionList: WritingVoteOptionType[] = IN
  return;
  }
 
- const reader = new FileReader();
-
- // readAsDataURL 메서드를 통해 파일을 모두 읽고 나면 reader의 loadend 이벤트에서 이미지 미리보기 결과를 확인할 수 있습니다.
- reader.readAsDataURL(file);
-
  reader.onloadend = () => {
  const updatedOptionList = optionList.map(optionItem => {
  if (optionItem.id === optionId) {

frontend/src/utils/resizeImage.ts

@@ -0,0 +1,17 @@
+import imageCompression from 'browser-image-compression';
+
+export const convertImageToWebP = async (imageFile: File) => {
+ const compressedBlob = await imageCompression(imageFile, {
+ maxWidthOrHeight: 1280,
+ initialQuality: 0.5,
+ fileType: 'image/webp',
+ });
+
+ const outputWebpFile = new File([compressedBlob], `${Date.now().toString()}.webp`);
+
+ const dataTransfer = new DataTransfer();
+
+ dataTransfer.items.add(outputWebpFile);
+
+ return dataTransfer.files;
+};