[FE] Feature/#435 이미지 압축 기능 구현 (#436)

* feat: 이미지 압축하는 기능 custom hook으로 구현

* feat: 지도, 핀 등에 이미지 추가할 시 이미지 압축 기능 추가

* refactor: NewTopic, NewPin 텍스트 수정

* refactor: 이미지 리사이징 최대 크기 변경

* refactor: 지도 추가 페이지에서 이미지와 파일 추가 버튼 사이에 space 추가

frontend/src/hooks/useCompressImage.ts

@@ -0,0 +1,30 @@
+import imageCompression from 'browser-image-compression';
+
+const useCompressImage = () => {
+  const compressImage = async (file: File) => {
+    const resizingBlob = await imageCompression(file, {
+      maxSizeMB: 1,
+      maxWidthOrHeight: 750,
+      useWebWorker: true,
+    });
+    const resizingFile = new File([resizingBlob], file.name, {
+      type: file.type,
+    });
+    return resizingFile;
+  };
+
+  const compressImageList = async (files: FileList) => {
+    const compressedImageList: File[] = [];
+
+    for (const file of files) {
+      const compressedImage = await compressImage(file);
+      compressedImageList.push(compressedImage);
+    }
+
+    return compressedImageList;
+  };
+
+  return { compressImage, compressImageList };
+};
+
+export default useCompressImage;

frontend/src/pages/NewPin.tsx

@@ -24,6 +24,7 @@ import Modal from '../components/Modal';
 import { styled } from 'styled-components';
 import ModalMyTopicList from '../components/ModalMyTopicList';
 import { getMapApi } from '../apis/getMapApi';
+import useCompressImage from '../hooks/useCompressImage';
 
 type NewPinFormValueType = Pick<
   NewPinFormProps,
@@ -49,6 +50,7 @@ const NewPin = () => {
   const { showToast } = useToast();
   const { width } = useSetLayoutWidth(SIDEBAR);
   const { openModal, closeModal } = useContext(ModalContext);
+  const { compressImageList } = useCompressImage();
 
   const [formImages, setFormImages] = useState<File[]>([]);
 
@@ -177,7 +179,9 @@ const NewPin = () => {
     });
   };
 
-  const onPinImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const onPinImageChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
     const imageLists = event.target.files;
     let imageUrlLists = [...showedImages];
 
@@ -189,8 +193,10 @@ const NewPin = () => {
       return;
     }
 
+    const compressedImageList = await compressImageList(imageLists);
+
     for (let i = 0; i < imageLists.length; i++) {
-      const currentImageUrl = URL.createObjectURL(imageLists[i]);
+      const currentImageUrl = URL.createObjectURL(compressedImageList[i]);
       imageUrlLists.push(currentImageUrl);
     }
 
@@ -203,7 +209,7 @@ const NewPin = () => {
       return;
     }
 
-    setFormImages([...formImages, ...imageLists]);
+    setFormImages([...formImages, ...compressedImageList]);
     setShowedImages(imageUrlLists);
   };
 
@@ -239,16 +245,12 @@ const NewPin = () => {
 
           <Space size={5} />
 
-          <Flex>
-            <Text color="black" $fontSize="default" $fontWeight="normal">
-              지도 선택
-            </Text>
-            <Space size={0} />
-            <Text color="primary" $fontSize="extraSmall" $fontWeight="normal">
-              *
-            </Text>
-          </Flex>
-          <Space size={0} />
+          <Text color="black" $fontSize="default" $fontWeight="normal">
+            지도 선택
+          </Text>
+
+          <Space size={2} />
+
           <Button
             type="button"
             variant="primary"
@@ -410,7 +412,6 @@ const ModalContentsWrapper = styled.div`
 
 const ImageInputLabel = styled.label`
   height: 40px;
-  margin-left: 10px;
   padding: 10px 10px;
 
   color: ${({ theme }) => theme.color.black};

frontend/src/pages/NewTopic.tsx

@@ -17,6 +17,7 @@ import { TagContext } from '../context/TagContext';
 import usePost from '../apiHooks/usePost';
 import AuthorityRadioContainer from '../components/AuthorityRadioContainer';
 import styled from 'styled-components';
+import useCompressImage from '../hooks/useCompressImage';
 
 type NewTopicFormValuesType = Omit<NewTopicFormProps, 'topics'>;
 
@@ -34,6 +35,7 @@ const NewTopic = () => {
       description: '',
       image: '',
     });
+  const { compressImage } = useCompressImage();
 
   const [isPrivate, setIsPrivate] = useState(false); // 혼자 볼 지도 :  같이 볼 지도
   const [isPublic, setIsPublic] = useState(true); // 모두 : 지정 인원
@@ -116,7 +118,7 @@ const NewTopic = () => {
     });
   };
 
-  const onTopicImageFileChange = (
+  const onTopicImageFileChange = async (
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
     const file = event.target.files && event.target.files[0];
@@ -128,7 +130,9 @@ const NewTopic = () => {
       return;
     }
 
-    setFormImage(file);
+    const compressedFile = await compressImage(file);
+
+    setFormImage(compressedFile);
     setShowImage(URL.createObjectURL(file));
   };
 
@@ -143,9 +147,17 @@ const NewTopic = () => {
           지도 생성
         </Text>
 
+        <Space size={5} />
+
+        <Text color="black" $fontSize="default" $fontWeight="normal">
+          지도 선택
+        </Text>
+
         <Space size={2} />
+
         <Flex>
           {showImage && <ShowImage src={showImage} alt={`사진 이미지`} />}
+          <Space size={2} />
           <ImageInputLabel htmlFor="file">파일업로드</ImageInputLabel>
           <ImageInputButton
             id="file"
@@ -225,7 +237,6 @@ const NewTopic = () => {
 
 const ImageInputLabel = styled.label`
   height: 40px;
-  margin-left: 10px;
   padding: 10px 10px;
   color: ${({ theme }) => theme.color.black};
   background-color: ${({ theme }) => theme.color.lightGray};

frontend/src/pages/PinDetail.tsx

@@ -17,6 +17,7 @@ import { ModalContext } from '../context/ModalContext';
 import AddToMyTopicList from '../components/ModalMyTopicList/addToMyTopicList';
 import { postApi } from '../apis/postApi';
 import PinImageContainer from '../components/PinImageContainer';
+import useCompressImage from '../hooks/useCompressImage';
 
 interface PinDetailProps {
   width: '372px' | '100vw';
@@ -47,6 +48,7 @@ const PinDetail = ({
     description: '',
   });
   const { openModal } = useContext(ModalContext);
+  const { compressImage } = useCompressImage();
 
   const openModalWithToken = () => {
     if (userToken) {
@@ -101,7 +103,9 @@ const PinDetail = ({
       return;
     }
 
-    formData.append('image', file);
+    const compressedFile = await compressImage(file);
+
+    formData.append('image', compressedFile);
 
     const data = JSON.stringify(pinId);
     const jsonBlob = new Blob([data], { type: 'application/json' });