diff --git a/src/app/(non-header)/signup/components/SignupForm.tsx b/src/app/(non-header)/signup/components/SignupForm.tsx index 2b6ed6ec..dd4f5057 100644 --- a/src/app/(non-header)/signup/components/SignupForm.tsx +++ b/src/app/(non-header)/signup/components/SignupForm.tsx @@ -60,9 +60,23 @@ export default function SignupForm() { passwordConfirmation: '', }); - const hasErrors = Object.values(errors).some((msg) => msg !== ''); - const isAllFilled = email && nickname && password && passwordConfirmation; - const isDisabled = !isAllFilled || hasErrors; + const validateAll = () => ({ + email: validateEmail(email), + nickname: validateNickname(nickname), + password: validatePassword(password), + passwordConfirmation: validatePasswordConfirmation( + passwordConfirmation, + password, + ), + }); + + const hasErrors = (errs: typeof errors) => + Object.values(errs).some((msg) => msg !== ''); + + const isAllFilled = () => + email && nickname && password && passwordConfirmation; + + const disabled = !isAllFilled() || hasErrors(errors); const [errorPopupOpen, setErrorPopupOpen] = useState(false); const [errorMessage, setErrorMessage] = useState(''); @@ -85,6 +99,22 @@ export default function SignupForm() { } }, [state, setUser]); + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + + const newErrors = validateAll(); + setErrors(newErrors); + + if (!isAllFilled() || hasErrors(newErrors)) return; + + const formData = new FormData(); + formData.append('email', email); + formData.append('nickname', nickname); + formData.append('password', password); + + formAction(formData); + }; + /** * 카카오 회원가입 버튼 클릭 시 실행되는 함수입니다. * 환경변수에서 리디렉션 URI와 클라이언트 ID를 읽어, @@ -121,7 +151,7 @@ export default function SignupForm() { -
+
회원가입 하기 diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx index e44e13c0..50f03427 100644 --- a/src/components/Popup.tsx +++ b/src/components/Popup.tsx @@ -67,6 +67,7 @@ export default function Popup({ 'text-md h-42 w-138 rounded-lg font-medium md:h-48 md:w-120 md:self-end md:text-lg', )} onClick={onClose} + autoFocus > 확인