diff --git a/src/widgets/Sign/Sign.tsx b/src/widgets/Sign/Sign.tsx index 35daf8b..5aa970b 100644 --- a/src/widgets/Sign/Sign.tsx +++ b/src/widgets/Sign/Sign.tsx @@ -1,3 +1,4 @@ +// Sign.tsx import React, { useState } from 'react'; import Title from '@/shared/ui/Title/Title'; import Info from '@/shared/ui/Info/Info'; @@ -7,12 +8,9 @@ import Button from '@/shared/ui/Button/Button'; import { useToastStore } from '@/features/Toast/hooks/useToastStore'; import { IdContainerStyled, SignStyled } from './Sign.styled'; import useCheckEmail from '@/features/join/hook/usecheckEmail'; -import { - EMAIL_REG_EXP, - PHONE_NUMBER_REG_EXP, - PASSWORD_REG_EXP -} from './util/RegExp'; import useJoin from '@/features/join/hook/useJoin'; +import { validateForm } from './util/validator'; +import { EMAIL_REG_EXP } from './util/RegExp'; const Sign = () => { const [email, setEmail] = useState(''); @@ -24,6 +22,29 @@ const Sign = () => { const { addToast } = useToastStore(); const { checkEmail, isEmailAvailable } = useCheckEmail(); const { mutate } = useJoin(); + + const handleSignUp = () => { + const isValid = validateForm( + email, + password, + checkPassword, + name, + phoneNumber, + gender, + isEmailAvailable, + addToast + ); + if (isValid) { + mutate({ + email, + username: name, + password, + gender: gender as '남성' | '여성', + phoneNumber + }); + } + }; + return ( @@ -55,7 +76,7 @@ const Sign = () => { width="500px" height="52px" onChange={setPhoneNumber} - placeholder="휴대폰 번호를 입력해주세요" + placeholder="010-1111-1111 형식으로 입력해주세요" /> @@ -113,36 +134,7 @@ const Sign = () => { width="500px" fontSize="16px" onClick={() => { - if (!isEmailAvailable) { - addToast('이메일 중복확인을 해주세요.', 'warning'); - return; - } - if (!gender) { - addToast('성별을 골라주세요.', 'warning'); - return; - } - if (!EMAIL_REG_EXP.test(email)) { - addToast('잘못된 이메일 형식입니다.', 'warning'); - return; - } - if (!PASSWORD_REG_EXP.test(password)) { - addToast('잘못된 비밀번호 형식입니다.', 'warning'); - return; - } - if (!PHONE_NUMBER_REG_EXP.test(phoneNumber)) { - addToast('잘못된 전화번호 형식입니다.', 'warning'); - return; - } - if (password !== checkPassword) { - addToast('비밀번호가 일치하지 않습니다.', 'warning'); - } - mutate({ - email, - username: name, - password, - gender: gender as '남성' | '여성', - phoneNumber - }); + handleSignUp(); }} > 회원가입 diff --git a/src/widgets/Sign/util/validator.ts b/src/widgets/Sign/util/validator.ts new file mode 100644 index 0000000..6fb9bc8 --- /dev/null +++ b/src/widgets/Sign/util/validator.ts @@ -0,0 +1,56 @@ +import { + EMAIL_REG_EXP, + PHONE_NUMBER_REG_EXP, + PASSWORD_REG_EXP +} from './RegExp'; + +interface Validation { + condition: boolean; + message: string; +} +type ToastVariant = 'warning' | 'success' | 'error'; + +export function validateForm( + email: string, + password: string, + checkPassword: string, + name: string, + phoneNumber: string, + gender: string, + isEmailAvailable: boolean | null, + addToast: (message: string, type: ToastVariant) => void +): boolean { + const validations: Validation[] = [ + { + condition: !isEmailAvailable, + message: '이메일 중복확인을 해주세요.' + }, + { condition: !gender, message: '성별을 골라주세요.' }, + { + condition: !EMAIL_REG_EXP.test(email), + message: '잘못된 이메일 형식입니다.' + }, + { + condition: !PASSWORD_REG_EXP.test(password), + message: '잘못된 비밀번호 형식입니다.' + }, + { + condition: !PHONE_NUMBER_REG_EXP.test(phoneNumber), + message: '잘못된 전화번호 형식입니다.' + }, + { + condition: password !== checkPassword, + message: '비밀번호가 일치하지 않습니다.' + } + ]; + + const invalid = validations.some((validation) => { + if (validation.condition) { + addToast(validation.message, 'warning'); + return true; + } + return false; + }); + + return !invalid; +}