From f8a40a5737497aafe74b974fc764d1b53f8ec9d8 Mon Sep 17 00:00:00 2001 From: bottlewook Date: Sat, 2 Mar 2024 15:04:23 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=ED=9A=8C=EC=9B=90=20=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EC=8B=9C=20api=202=EB=B2=88=20=EC=9A=94=EC=B2=AD?= =?UTF-8?q?=20=EB=90=98=EB=8A=94=20=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(auth)/signup/page.tsx | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx index 61e69d0b..9d7921dc 100644 --- a/src/app/(auth)/signup/page.tsx +++ b/src/app/(auth)/signup/page.tsx @@ -27,7 +27,7 @@ type SignUpFormType = { function SignupPage() { const { - register, handleSubmit, formState: { errors, isValid, isDirty }, watch, + register, formState: { errors, isValid, isDirty }, watch, } = useForm({ defaultValues: { id: '', @@ -61,7 +61,7 @@ function SignupPage() { }; return ( -
+ {step === 1 && ( <>
@@ -75,12 +75,6 @@ function SignupPage() { {...register('id', { required: true, pattern: VALIDATION_MESSAGE_MAP.id.value, - validate: { - checkId: async () => { - const res = await getCheckId(watch('id')); - return !res; - }, - }, })} hasError={!!errors.id} helpMessage={errors.id?.type === 'checkId' @@ -123,12 +117,6 @@ function SignupPage() { {...register('email', { required: true, pattern: VALIDATION_MESSAGE_MAP.email.value, - validate: { - checkEmail: async () => { - const res = await getCheckEmail(watch('email')); - return !res; - }, - }, })} hasError={!!errors.email} helpMessage={errors.email?.type === 'checkEmail' From 5f7d5919e7e6cbbca53b71cb85c2ccb92ebe5122 Mon Sep 17 00:00:00 2001 From: bottlewook Date: Sat, 2 Mar 2024 17:46:20 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C?= =?UTF-8?q?=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=A6=9D=20api=20?= =?UTF-8?q?=EC=9A=94=EC=B2=AD=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(auth)/signup/page.tsx | 48 ++++++++++++++++++++++++++++------ 1 file changed, 40 insertions(+), 8 deletions(-) diff --git a/src/app/(auth)/signup/page.tsx b/src/app/(auth)/signup/page.tsx index 9d7921dc..8725cae0 100644 --- a/src/app/(auth)/signup/page.tsx +++ b/src/app/(auth)/signup/page.tsx @@ -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'; @@ -26,8 +28,14 @@ type SignUpFormType = { } & ISignUp; function SignupPage() { + const router = useRouter(); + const [duplicationValidation, setDuplicationValidation] = useState({ + id: false, + email: false, + }); + const { - register, formState: { errors, isValid, isDirty }, watch, + register, getValues, handleSubmit, formState: { errors, isValid, isDirty }, watch, } = useForm({ defaultValues: { id: '', @@ -48,6 +56,7 @@ function SignupPage() { mutate({ id, password, email, gender, age, }); + router.push('/login'); }; const [step, setStep] = useState(1); @@ -60,6 +69,28 @@ 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 ( {step === 1 && ( @@ -75,9 +106,10 @@ function SignupPage() { {...register('id', { required: true, pattern: VALIDATION_MESSAGE_MAP.id.value, + 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} /> @@ -117,9 +149,10 @@ function SignupPage() { {...register('email', { required: true, pattern: VALIDATION_MESSAGE_MAP.email.value, + 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} /> @@ -150,9 +183,8 @@ function SignupPage() { )} - {step === 2 && ( - 1 ? onBack : undefined} onClick={() => { return onSubmit(watch()); }} /> + 1 ? onBack : undefined} onClick={handleSubmit(onSubmit)} /> )} );