Merge pull request #205 from Step3-kakao-tech-campus/feat/#165

fix: 등록, 수정하기 api 문제
Step3-kakao-tech-campus · Nov 11, 2023 · 08b68ad · 08b68ad
2 parents d67f172 + fd35e00
commit 08b68ad
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 26 deletions.
diff --git a/src/commons/modals/RegisterModal.tsx b/src/commons/modals/RegisterModal.tsx
@@ -41,14 +41,16 @@ const RegisterModal = ({
               X
             </button>
           </div>
-          <span className="text-xl text-brand-color">{errorText}</span>
+          <span className="text-xl text-center text-brand-color">
+            {errorText}
+          </span>
           <div className="flex w-2/3 justify-around items-center mt-8 gap-6">
             {buttonTextArray.map((buttonText: string, index: number) => {
               if (index % 2 === 0) {
                 return (
                   <button
                     key={index}
-                    className="text-brand-color rounded-md font-bold border border-brand-color w-32 py-2"
+                    className="text-brand-color rounded-md font-bold border border-brand-color w-28 py-2"
                     onClick={handleRegisterMoreButtonClick}
                   >
                     {buttonText}
@@ -135,12 +137,8 @@ const RegisterModal = ({
               X
             </button>
           </div>
-          <span className="text-2xl flex flex-col items-center justify-center text-brand-color">
-            <div>{confirmText}</div>
-            <div className=" text-sm  text-red-400">
-              {' '}
-              (파일 용량을 확인해주세요)
-            </div>
+          <span className="text-2xl text-center mx-4 text-brand-color">
+            {confirmText}
           </span>
           <div className="flex w-2/3 justify-around items-center mt-8 gap-6">
             {confirmTextArray.map((text: string, index: number) => {

diff --git a/src/pages/register/components/RegisterHeader.tsx b/src/pages/register/components/RegisterHeader.tsx
@@ -10,6 +10,9 @@ import { useRecoilValue } from 'recoil';
 import registerState from 'recoil/registerState';
 import ImageVideoInput from './ImageVideoInput';
 
+const MAX_VIDEO_FILE_SIZE_MB = 15;
+const MAX_IMAGE_FILE_SIZE_MB = 5;
+
 const RegisterHeader = () => {
   const [selectedImageFile, setSelectedImageFile] = useState<Blob>();
   const [selectedVideoFile, setSelectedVideoFile] = useState<Blob>();
@@ -48,6 +51,8 @@ const RegisterHeader = () => {
         Authorization: `Bearer ${loginToken}`,
       },
     });
+    setConfirmText('등록하시겠습니까?');
+    setConfirmTextArray(['아니오', '예']);
     if (!response.ok) {
       switch (response.status) {
         case 400:
@@ -76,8 +81,9 @@ const RegisterHeader = () => {
 
     return response.json();
   };
-  const { data, isError, isLoading, isSuccess } = useMutation(postPet);
+  const { data, isError, isLoading, isSuccess, mutate } = useMutation(postPet);
   const handleRegisterButtonClick = async () => {
+    const formData = new FormData();
     if (
       !selectedImageFile ||
       !selectedVideoFile ||
@@ -87,18 +93,25 @@ const RegisterHeader = () => {
       setConfirmTextArray(['돌아가기']);
       return;
     }
-
-    const formData = new FormData();
     formData.append('profileVideo', selectedVideoFile);
     formData.append('profileImage', selectedImageFile);
+
+    const imageFileSizeInMB = selectedImageFile.size / (1024 * 1024);
+    const videoFileSizeInMB = selectedVideoFile.size / (1024 * 1024);
+    if (imageFileSizeInMB > 5 || videoFileSizeInMB > 15) {
+      setConfirmText('등록가능한 파일의 크기를 초과했습니다.');
+      setConfirmTextArray(['돌아가기']);
+    }
     const { isComplete, ...restRegisterPetData } = registerPetData;
     formData.append(
       'petInfo',
       new Blob([JSON.stringify(restRegisterPetData)], {
         type: 'application/json',
       }),
     );
+    mutate(formData);
   };
+
   const handleCustomButtonClick = (
     fileRef: React.RefObject<HTMLInputElement> | null,
   ) => {
@@ -143,7 +156,7 @@ const RegisterHeader = () => {
             onClick={() => setIsModalOpen(true)}
             className="bg-brand-color rounded-md font-bold text-white w-20 py-2"
           >
-            등록완료
+            등록하기
           </button>
         </div>
         <ImageVideoInput

diff --git a/src/pages/register/components/VRadioGroup.tsx b/src/pages/register/components/VRadioGroup.tsx
@@ -95,10 +95,10 @@ const VRadioGroup = ({
           <DetailRadio
             label="했어요"
             name="neutralizationStatus"
-            value="했어요"
-            selected={petInfo.neutralizationStatus === '했어요'}
+            value="YES"
+            selected={petInfo.neutralizationStatus === 'YES'}
             onClick={() => {
-              handleNeutralizationStatusChange('했어요');
+              handleNeutralizationStatusChange('YES');
               setPetInfo((prev) => ({
                 ...prev,
                 isComplete: checkIfAllFilled(prev),
@@ -109,10 +109,10 @@ const VRadioGroup = ({
           <DetailRadio
             label="안했어요"
             name="neutralizationStatus"
-            value="안했어요"
-            selected={petInfo.neutralizationStatus === '안했어요'}
+            value="NO"
+            selected={petInfo.neutralizationStatus === 'NO'}
             onClick={() => {
-              handleNeutralizationStatusChange('안했어요');
+              handleNeutralizationStatusChange('NO');
               setPetInfo((prev) => ({
                 ...prev,
                 isComplete: checkIfAllFilled(prev),
@@ -123,10 +123,10 @@ const VRadioGroup = ({
           <DetailRadio
             label="몰라요"
             name="neutralizationStatus"
-            value="몰라요"
-            selected={petInfo.neutralizationStatus === '몰라요'}
+            value="UNKNOWN"
+            selected={petInfo.neutralizationStatus === 'UNKNOWN'}
             onClick={() => {
-              handleNeutralizationStatusChange('몰라요');
+              handleNeutralizationStatusChange('UNKNOWN');
               setPetInfo((prev) => ({
                 ...prev,
                 isComplete: checkIfAllFilled(prev),

diff --git a/src/pages/update/components/UpdateHeader.tsx b/src/pages/update/components/UpdateHeader.tsx
@@ -10,6 +10,9 @@ import { useRecoilValue } from 'recoil';
 import registerState from 'recoil/registerState';
 import ImageVideoInput from '../../register/components/ImageVideoInput';
 
+const MAX_VIDEO_FILE_SIZE_MB = 15;
+const MAX_IMAGE_FILE_SIZE_MB = 5;
+
 const UpdateHeader = () => {
   const [selectedImageFile, setSelectedImageFile] = useState<Blob>();
   const [selectedVideoFile, setSelectedVideoFile] = useState<Blob>();
@@ -47,6 +50,8 @@ const UpdateHeader = () => {
         Authorization: `Bearer ${loginToken}`,
       },
     });
+    setConfirmText('등록하시겠습니까?');
+    setConfirmTextArray(['아니오', '예']);
     if (!response.ok) {
       // 로그인 화면으로 이동하기 위해 텍스트 바꿔주는 것 필요
       switch (response.status) {
@@ -75,24 +80,41 @@ const UpdateHeader = () => {
     }
     return response.json();
   };
-  const { data, isError, isLoading, isSuccess } = useMutation(patchPet);
+  const { data, isError, isLoading, isSuccess, mutate } = useMutation(patchPet);
   const handleRegisterButtonClick = async () => {
+    const formData = new FormData();
+
     if (!registerPetData.isComplete) {
       setConfirmText('필수항목을 입력해주세요.');
       setConfirmTextArray(['돌아가기']);
       return;
     }
 
-    const formData = new FormData();
-    if (selectedVideoFile) formData.append('profileVideo', selectedVideoFile);
-    if (selectedImageFile) formData.append('profileImage', selectedImageFile);
+    if (selectedVideoFile) {
+      const videoFileSizeInMB = selectedVideoFile.size / (1024 * 1024);
+      formData.append('profileVideo', selectedVideoFile);
+      if (videoFileSizeInMB > 15) {
+        setConfirmText('등록가능한 파일의 크기를 초과했습니다.');
+        setConfirmTextArray(['돌아가기']);
+      }
+    }
+    if (selectedImageFile) {
+      const imageFileSizeInMB = selectedImageFile.size / (1024 * 1024);
+      formData.append('profileImage', selectedImageFile);
+      if (imageFileSizeInMB > 5) {
+        setConfirmText('등록가능한 파일의 크기를 초과했습니다.');
+        setConfirmTextArray(['돌아가기']);
+      }
+    }
+
     const { isComplete, ...restRegisterPetData } = registerPetData;
     formData.append(
       'petInfo',
       new Blob([JSON.stringify(restRegisterPetData)], {
         type: 'application/json',
       }),
     );
+    mutate(formData);
   };
   const handleCustomButtonClick = (
     fileRef: React.RefObject<HTMLInputElement> | null,
@@ -139,7 +161,7 @@ const UpdateHeader = () => {
             onClick={() => setIsModalOpen(true)}
             className="bg-brand-color rounded-md font-bold text-white w-20 py-2"
           >
-            수정완료
+            수정하기
           </button>
         </div>
         <ImageVideoInput