Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 등록, 수정하기 api 문제 #205

Merged
merged 3 commits into from
Nov 11, 2023
+59 −26
Merged

fix: 등록, 수정하기 api 문제 #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ccf1b3b
fix: 등록, 수정하기 api 요청 문제 해결
JeonDoGyun Nov 11, 2023
0b622a3
Merge branch 'develop' of https://github.com/Step3-kakao-tech-campus/…
JeonDoGyun Nov 11, 2023
fd35e00
fix: conflict로 인한 빌드 에러 해결
JeonDoGyun Nov 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 6 additions & 8 deletions src/commons/modals/RegisterModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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) => {
Expand Down
21 changes: 17 additions & 4 deletions src/pages/register/components/RegisterHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>();
Expand Down Expand Up @@ -48,6 +51,8 @@ const RegisterHeader = () => {
Authorization: `Bearer ${loginToken}`,
},
});
setConfirmText('등록하시겠습니까?');
setConfirmTextArray(['아니오', '예']);
if (!response.ok) {
switch (response.status) {
case 400:
Expand Down Expand Up @@ -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 ||
Expand All @@ -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,
) => {
Expand Down Expand Up @@ -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
Expand Down
18 changes: 9 additions & 9 deletions src/pages/register/components/VRadioGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -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),
Expand All @@ -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),
Expand Down
32 changes: 27 additions & 5 deletions src/pages/update/components/UpdateHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>();
Expand Down Expand Up @@ -47,6 +50,8 @@ const UpdateHeader = () => {
Authorization: `Bearer ${loginToken}`,
},
});
setConfirmText('등록하시겠습니까?');
setConfirmTextArray(['아니오', '예']);
if (!response.ok) {
// 로그인 화면으로 이동하기 위해 텍스트 바꿔주는 것 필요
switch (response.status) {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down