merge: 이미지 등록 시 이미지 파일 압축 및 heic 파일 변환

Refactor: 이미지 등록 시 이미지 파일 압축 및 heic 파일 변환

Author: bellasimi

package-lock.json

@@ -6,10 +6,13 @@
     "@emotion/babel-preset-css-prop": "^11.2.0",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@reduxjs/toolkit": "^1.8.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.27.2",
+    "browser-image-compression": "^2.0.0",
+    "heic2any": "^0.0.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",

package.json

@@ -5,6 +5,9 @@ import theme from 'styles/theme';
 import { IMAGE_URLS } from 'utils/constants/images';
 import { Modal } from 'components';
 
+import imageCompression from 'browser-image-compression';
+import heic2any from 'heic2any';
+
 const { backgroundGreen, mainWhite } = theme.color;
 const { POST_ADD_IMG } = IMAGE_URLS;
 
@@ -39,36 +42,59 @@ const ImageInner = styled.div`
   background-repeat: no-repeat;
 `;
 
+const CompressImage = async (fileSrc) => {
+  const options = {
+    maxSizeMB: 1,
+    maxWidthOrHeight: 1920,
+    useWebWorker: true,
+  };
+  try {
+    return await imageCompression(fileSrc, options);
+  } catch (error) {
+    alert(error);
+  }
+};
+
 const UploadImage = ({ onChange, defaultImage, ...props }) => {
   const [imageSrc, setImageSrc] = useState(defaultImage);
   const fileInputRef = useRef(null);
   const [modalMsg, setModalMsg] = useState({ isModal: false, title: '', description: '' });
 
-  const handleFileChange = (e) => {
-    const fileBlob = e.target.files[0];
+  const handleFileChange = async (e) => {
+    let fileBlob = e.target.files[0];
+    const MAX_MB = 10;
 
     if (!fileBlob) {
       return;
     }
 
-    if (!/\.(gif|jpg|jpeg|png)$/i.test(fileBlob.name)) {
+    if (!/\.(gif|jpg|jpeg|png|heic)$/i.test(fileBlob.name)) {
       setModalMsg({
         isModal: true,
         title: '등록할 수 없는 파일입니다.',
-        description: '등록 가능한 확장자: jpg, jpeg, gif, png',
+        description: '등록 가능한 확장자: jpg, jpeg, gif, png, heic',
       });
       return;
     }
 
-    if (fileBlob.size > 1024 * 1024) {
+    if (fileBlob.size > 1024 * 1024 * MAX_MB) {
       setModalMsg({
         isModal: true,
-        title: '1MB 이하 파일만 등록해 주세요!',
+        title: `${MAX_MB}MB 이하 파일만 등록해 주세요!`,
         description: `현재 파일 용량 : ${Math.round((fileBlob.size / 1024 / 1024) * 100) / 100}MB`,
       });
       return;
     }
 
+    if (/\.(heic)$/i.test(fileBlob.name)) {
+      fileBlob = await heic2any({ blob: fileBlob, toType: 'image/jpeg' });
+    }
+
+    // 1MB 보다 크다면 변환
+    if (fileBlob.size > 1024 * 1024) {
+      fileBlob = await CompressImage(fileBlob);
+    }
+
     const reader = new FileReader();
     reader.readAsDataURL(fileBlob);
     reader.onload = () => {