feat(UploadImage): heic 파일 업로드 시 jpg파일로 변환

Author: jinist94

package-lock.json

@@ -12,6 +12,7 @@
     "@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

@@ -6,6 +6,7 @@ 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;
@@ -67,11 +68,11 @@ const UploadImage = ({ onChange, defaultImage, ...props }) => {
       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;
     }
@@ -85,6 +86,10 @@ const UploadImage = ({ onChange, defaultImage, ...props }) => {
       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);