From ccf1b3b86c1ba5b28af8257158782ea3efe0d6c1 Mon Sep 17 00:00:00 2001 From: JeonDoGyun Date: Sat, 11 Nov 2023 17:41:58 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EB=93=B1=EB=A1=9D,=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=ED=95=98=EA=B8=B0=20api=20=EC=9A=94=EC=B2=AD=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 추가로, 파일 용량에 따른 안내 문구 변경 추가 --- src/commons/modals/RegisterModal.tsx | 10 ++++-- .../register/components/RegisterHeader.tsx | 21 +++++++++--- src/pages/register/components/VRadioGroup.tsx | 18 +++++------ src/pages/update/components/UpdateHeader.tsx | 32 ++++++++++++++++--- 4 files changed, 60 insertions(+), 21 deletions(-) diff --git a/src/commons/modals/RegisterModal.tsx b/src/commons/modals/RegisterModal.tsx index 94b98bdc..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) => { // 1개만 있을 때 스타일을 다르게 주기 위해 diff --git a/src/pages/register/components/RegisterHeader.tsx b/src/pages/register/components/RegisterHeader.tsx index abcfdd78..cac0e4f4 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(); @@ -49,6 +52,8 @@ const RegisterHeader = () => { Authorization: `Bearer ${loginToken}`, }, }); + setConfirmText('등록하시겠습니까?'); + setConfirmTextArray(['아니오', '예']); if (!response.ok) { // 로그인 화면으로 이동하기 위해 텍스트 바꿔주는 것 필요 switch (response.status) { @@ -78,8 +83,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 || @@ -89,10 +95,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', @@ -100,7 +111,9 @@ const RegisterHeader = () => { type: 'application/json', }), ); + mutate(formData); }; + const handleCustomButtonClick = ( fileRef: React.RefObject | null, ) => { @@ -145,7 +158,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" > - 수정완료 + 수정하기 Date: Sat, 11 Nov 2023 17:49:58 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20conflict=EB=A1=9C=20=EC=9D=B8?= =?UTF-8?q?=ED=95=9C=20=EB=B9=8C=EB=93=9C=20=EC=97=90=EB=9F=AC=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/commons/modals/RegisterModal.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/commons/modals/RegisterModal.tsx b/src/commons/modals/RegisterModal.tsx index 68f9f0e0..503c38bf 100644 --- a/src/commons/modals/RegisterModal.tsx +++ b/src/commons/modals/RegisterModal.tsx @@ -137,17 +137,8 @@ const RegisterModal = ({ X -<<<<<<< HEAD {confirmText} -======= - -
{confirmText}
-
- {' '} - (파일 용량을 확인해주세요) -
->>>>>>> d67f17287d8563deaa959f9cb3af81a690d6228e
{confirmTextArray.map((text: string, index: number) => {