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

페이지 오류: 회원가입 페이지 불필요한 api 요청 수정 #240

Merged
merged 2 commits into from
Mar 2, 2024
Merged

페이지 오류: 회원가입 페이지 불필요한 api 요청 수정 #240

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f8a40a5
fix: 회원 가입 시 api 2번 요청 되는 에러 수정
bottlewook Mar 2, 2024
5f7d591
fix: 불필요한 유효성 검증 api 요청 수정
bottlewook Mar 2, 2024
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
62 changes: 41 additions & 21 deletions src/app/(auth)/signup/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@

'use client';

import { useState } from 'react';
import { useCallback, useState } from 'react';
import { useForm } from 'react-hook-form';

import { useRouter } from 'next/navigation';

import {
AGE_MAP, AgeType, GENDER_MAP, GenderType,
} from '@constants/dropdownMap';
Expand All @@ -26,8 +28,14 @@ type SignUpFormType = {
} & ISignUp;

function SignupPage() {
const router = useRouter();
const [duplicationValidation, setDuplicationValidation] = useState({
id: false,
email: false,
});

const {
register, handleSubmit, formState: { errors, isValid, isDirty }, watch,
register, getValues, handleSubmit, formState: { errors, isValid, isDirty }, watch,
} = useForm<SignUpFormType>({
defaultValues: {
id: '',
Expand All @@ -48,6 +56,7 @@ function SignupPage() {
mutate({
id, password, email, gender, age,
});
router.push('/login');
};

const [step, setStep] = useState(1);
Expand All @@ -60,8 +69,30 @@ function SignupPage() {
setStep((currentStep) => { return currentStep - 1; });
};

const handleIdBlur = useCallback(async () => {
if (getValues('id').length === 0 || !VALIDATION_MESSAGE_MAP.id.value?.test(getValues('id'))) return;
const isDuplicationId = await getCheckId((getValues('id')));
setDuplicationValidation((prev) => {
return {
...prev,
id: isDuplicationId,
};
});
}, [getValues]);

const handleEmailBlur = useCallback(async () => {
if (getValues('email').length === 0 || !VALIDATION_MESSAGE_MAP.email.value?.test(getValues('email'))) return;
const isDuplicationEmail = await getCheckEmail((getValues('email')));
setDuplicationValidation((prev) => {
return {
...prev,
email: isDuplicationEmail,
};
});
}, [getValues]);

return (
<form onSubmit={handleSubmit(onSubmit)}>
<form>
{step === 1 && (
<>
<Header />
Expand All @@ -75,15 +106,10 @@ function SignupPage() {
{...register('id', {
required: true,
pattern: VALIDATION_MESSAGE_MAP.id.value,
validate: {
checkId: async () => {
const res = await getCheckId(watch('id'));
return !res;
},
},
onBlur: handleIdBlur,
})}
hasError={!!errors.id}
helpMessage={errors.id?.type === 'checkId'
hasError={!!errors.id || !!duplicationValidation.id}
helpMessage={duplicationValidation.id
? VALIDATION_MESSAGE_MAP.duplicationId.message
: VALIDATION_MESSAGE_MAP.id.message}
/>
Expand Down Expand Up @@ -123,15 +149,10 @@ function SignupPage() {
{...register('email', {
required: true,
pattern: VALIDATION_MESSAGE_MAP.email.value,
validate: {
checkEmail: async () => {
const res = await getCheckEmail(watch('email'));
return !res;
},
},
onBlur: handleEmailBlur,
})}
hasError={!!errors.email}
helpMessage={errors.email?.type === 'checkEmail'
hasError={!!errors.email || !!duplicationValidation.email}
helpMessage={duplicationValidation.email
? VALIDATION_MESSAGE_MAP.duplicationEmail.message
: VALIDATION_MESSAGE_MAP.email.message}
/>
Expand Down Expand Up @@ -162,9 +183,8 @@ function SignupPage() {
<Spacing size={42.5} />
</>
)}

{step === 2 && (
<Terms type="signup" stepBack={step > 1 ? onBack : undefined} onClick={() => { return onSubmit(watch()); }} />
<Terms type="signup" stepBack={step > 1 ? onBack : undefined} onClick={handleSubmit(onSubmit)} />
)}
</form>
);
Expand Down
Loading