diff --git a/src/commons/modals/RegisterModal.tsx b/src/commons/modals/RegisterModal.tsx index 96c5fc43..503c38bf 100644 --- a/src/commons/modals/RegisterModal.tsx +++ b/src/commons/modals/RegisterModal.tsx @@ -41,14 +41,16 @@ const RegisterModal = ({ X - {errorText} + + {errorText} +
{buttonTextArray.map((buttonText: string, index: number) => { if (index % 2 === 0) { return (
- -
{confirmText}
-
- {' '} - (파일 용량을 확인해주세요) -
+ + {confirmText}
{confirmTextArray.map((text: string, index: number) => { diff --git a/src/pages/register/components/RegisterHeader.tsx b/src/pages/register/components/RegisterHeader.tsx index 16bc2e65..b8fb384c 100644 --- 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(); const [selectedVideoFile, setSelectedVideoFile] = useState(); @@ -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,10 +93,15 @@ 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', @@ -98,7 +109,9 @@ const RegisterHeader = () => { type: 'application/json', }), ); + mutate(formData); }; + const handleCustomButtonClick = ( fileRef: React.RefObject | null, ) => { @@ -143,7 +156,7 @@ const RegisterHeader = () => { onClick={() => setIsModalOpen(true)} className="bg-brand-color rounded-md font-bold text-white w-20 py-2" > - 등록완료 + 등록하기
{ - handleNeutralizationStatusChange('했어요'); + handleNeutralizationStatusChange('YES'); setPetInfo((prev) => ({ ...prev, isComplete: checkIfAllFilled(prev), @@ -109,10 +109,10 @@ const VRadioGroup = ({ { - handleNeutralizationStatusChange('안했어요'); + handleNeutralizationStatusChange('NO'); setPetInfo((prev) => ({ ...prev, isComplete: checkIfAllFilled(prev), @@ -123,10 +123,10 @@ const VRadioGroup = ({ { - 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 index 72f5fab8..0ca138a5 100644 --- 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(); const [selectedVideoFile, setSelectedVideoFile] = useState(); @@ -47,6 +50,8 @@ const UpdateHeader = () => { Authorization: `Bearer ${loginToken}`, }, }); + setConfirmText('등록하시겠습니까?'); + setConfirmTextArray(['아니오', '예']); if (!response.ok) { // 로그인 화면으로 이동하기 위해 텍스트 바꿔주는 것 필요 switch (response.status) { @@ -75,17 +80,33 @@ 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', @@ -93,6 +114,7 @@ const UpdateHeader = () => { type: 'application/json', }), ); + mutate(formData); }; const handleCustomButtonClick = ( fileRef: React.RefObject | null, @@ -139,7 +161,7 @@ const UpdateHeader = () => { onClick={() => setIsModalOpen(true)} className="bg-brand-color rounded-md font-bold text-white w-20 py-2" > - 수정완료 + 수정하기