fix(user): 사진을 선택하고 사이즈가 안 맞으면 사진 자르는 모달 뜨도록 수정

Bamdoliro · Jul 16, 2024 · 5fcb247 · 5fcb247
1 parent 01f1900
commit 5fcb247
Showing 1 changed file with 54 additions and 8 deletions.
diff --git a/apps/user/src/components/form/ProfileUploader/ProfileUploader.tsx b/apps/user/src/components/form/ProfileUploader/ProfileUploader.tsx
@@ -7,6 +7,7 @@ import { flex } from '@maru/utils';
 import type { ChangeEventHandler, DragEvent } from 'react';
 import { useState, useEffect } from 'react';
 import styled, { css } from 'styled-components';
+import CropImageModal from '../CropImageModal/CropImageModal';
 
 const ProfileUploader = ({
   onPhotoUpload,
@@ -20,12 +21,14 @@ const ProfileUploader = ({
   const [isDragging, setIsDragging] = useState(false);
   const { openFileUploader: openImageFileUploader, ref: imageUploaderRef } =
     useOpenFileUploader();
-  const { uploadProfileImageMutate } = useUploadProfileImageMutation();
-
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const [imagePreviewUrl, setImagePreviewUrl] = useState(
     form.applicant.identificationPictureUri
   );
 
+  const { uploadProfileImageMutate } = useUploadProfileImageMutation();
+
   const uploadProfileImageFile = (image: FormData) => {
     uploadProfileImageMutate(image, {
       onSuccess: (res) => {
@@ -46,9 +49,25 @@ const ProfileUploader = ({
   const handleImageFileChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     const { files } = e.target;
     if (!files || files.length === 0) return;
-    const formData = new FormData();
-    formData.append('image', files[0]);
-    uploadProfileImageFile(formData);
+
+    const file = files[0];
+    const img = new Image();
+    img.src = URL.createObjectURL(file);
+    img.onload = () => {
+      if (img.width < 117 || img.height < 156) {
+        alert('사진 크기가 너무 작습니다.');
+        return;
+      }
+
+      if (img.width > 117 || img.height > 156) {
+        setImageSrc(URL.createObjectURL(file));
+        setIsModalOpen(true);
+      } else {
+        const formData = new FormData();
+        formData.append('image', file, 'image.jpg');
+        uploadProfileImageFile(formData);
+      }
+    };
   };
 
   const onDragEnter = (e: DragEvent<HTMLDivElement>) => {
@@ -71,9 +90,24 @@ const ProfileUploader = ({
   const onDrop = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    const formData = new FormData();
-    formData.append('image', e.dataTransfer.files[0]);
-    uploadProfileImageFile(formData);
+    const file = e.dataTransfer.files[0];
+    const img = new Image();
+    img.src = URL.createObjectURL(file);
+    img.onload = () => {
+      if (img.width < 117 || img.height < 156) {
+        alert('사진 크기가 너무 작습니다.');
+        return;
+      }
+
+      if (img.width > 117 || img.height > 156) {
+        setImageSrc(URL.createObjectURL(file));
+        setIsModalOpen(true);
+      } else {
+        const formData = new FormData();
+        formData.append('image', file, 'image.jpg');
+        uploadProfileImageFile(formData);
+      }
+    };
     setIsDragging(false);
   };
 
@@ -127,6 +161,18 @@ const ProfileUploader = ({
         onChange={handleImageFileChange}
         hidden
       />
+      {imageSrc && (
+        <CropImageModal
+          isOpen={isModalOpen}
+          imageSrc={imageSrc}
+          onClose={() => setIsModalOpen(false)}
+          onCropComplete={(croppedImage) => {
+            const formData = new FormData();
+            formData.append('image', croppedImage, 'image.jpg');
+            uploadProfileImageFile(formData);
+          }}
+        />
+      )}
     </StyledProfileUploader>
   );
 };