diff --git a/src/components/Form/JoinForm/input.js b/src/components/Form/JoinForm/input.js
index c979818..897f3b5 100644
--- a/src/components/Form/JoinForm/input.js
+++ b/src/components/Form/JoinForm/input.js
@@ -10,52 +10,55 @@ import { ShowAlert } from '../../../pages/alert.js';
const Joininput = () => {
const navigate = useNavigate();
- // 이름 , 비밀번호, 이메일 , 비밀번호 확인
- const [email, setUserEmail] = useState('');
- const [name, setUserName] = useState('');
- const [password, setUserPassword] = useState('');
+
+ // 이름, 비밀번호, 이메일, 비밀번호 확인
+ const [email, setEmail] = useState('');
+ const [name, setName] = useState('');
+ const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
- //비밀번호 유효성 검사
+ // 유효성 검사 상태 및 메시지
const [isName, setIsName] = useState(false);
const [isEmail, setIsEmail] = useState(false);
const [isPassword, setIsPassword] = useState(false);
const [isPasswordConfirm, setIsPasswordConfirm] = useState(false);
- //오류 메세지 저장
const [nameMessage, setNameMessage] = useState('');
const [emailMessage, setEmailMessage] = useState('');
const [passwordMessage, setPasswordMessage] = useState('');
const [passwordConfirmMessage, setPasswordConfirmMessage] = useState('');
+ const navigateToHome = () => navigate('/');
+
const handleEnter = (e) => {
if (e.key === 'Enter') {
- onSignUpSumit();
+ onSignUpSubmit();
}
};
useEffect(() => {
if (confirmPassword) {
- onChangePasswordConfirm(
- password,
- confirmPassword,
- setPasswordConfirmMessage,
- setIsPasswordConfirm
- );
+ validatePasswordConfirm(password, confirmPassword);
}
}, [password, confirmPassword]);
- const onSignUpSumit = () => {
- if (email === undefined || email === '' || email === null) {
- ShowAlert('이메일 입력해주세요.', 'warning');
+ const validatePasswordConfirm = (password, confirmPassword) => {
+ if (password === confirmPassword) {
+ setPasswordConfirmMessage('비밀번호를 똑같이 입력했어요 : )');
+ setIsPasswordConfirm(true);
+ } else {
+ setPasswordConfirmMessage('비밀번호가 틀립니다. 다시 입력해주세요.');
+ setIsPasswordConfirm(false);
+ }
+ };
+
+ const onSignUpSubmit = () => {
+ if (!email) {
+ ShowAlert('이메일을 입력해주세요.', 'warning');
return false;
}
- if (
- isEmail === false ||
- isPassword === false ||
- isPasswordConfirm === false
- ) {
+ if (!(isEmail && isPassword && isPasswordConfirm)) {
ShowAlert('값이 잘못 되었습니다. 다시 입력해주세요', 'warning');
return false;
}
@@ -65,7 +68,7 @@ const Joininput = () => {
.then((res) => {
if (res.status === 201) {
ShowAlert('가입되었습니다.', 'success', '확인');
- navigate('/');
+ navigateToHome();
}
})
.catch((error) => {
@@ -77,10 +80,10 @@ const Joininput = () => {
}
};
- // 이름
const onChangeName = useCallback((e) => {
- setUserName(e.target.value);
- if (e.target.value.length < 2 || e.target.value.length > 5) {
+ const nameValue = e.target.value;
+ setName(nameValue);
+ if (nameValue.length < 2 || nameValue.length > 5) {
setNameMessage('2글자 이상 5글자 미만으로 입력해주세요.');
setIsName(false);
} else {
@@ -89,11 +92,10 @@ const Joininput = () => {
}
}, []);
- //이메일
const onChangeEmail = useCallback((e) => {
- const emails = e.target.value;
- setUserEmail(emails);
- if (emailCheck(emails)) {
+ const emailValue = e.target.value;
+ setEmail(emailValue);
+ if (emailCheck(emailValue)) {
setEmailMessage('올바른 이메일 형식이에요 : )');
setIsEmail(true);
} else {
@@ -102,49 +104,26 @@ const Joininput = () => {
}
}, []);
- // 비밀번호
const onChangePassword = useCallback((e) => {
- const passwordCurrent = e.target.value;
- setUserPassword(passwordCurrent);
-
- if (!PwCheck(passwordCurrent)) {
+ const passwordValue = e.target.value;
+ setPassword(passwordValue);
+ if (!PwCheck(passwordValue)) {
setPasswordMessage(
- '숫자+영문자+특수문자 조합으로8자리 이상 입력해주세요.'
+ '숫자+영문자+특수문자 조합으로 8자리 이상 입력해주세요.'
);
setIsPassword(false);
} else {
setPasswordMessage('안전한 비밀번호에요 : )');
setIsPassword(true);
}
- },[]);
-
- //
- const onChangePasswordConfirm = (
- password,
- confirmPassword,
- setPasswordConfirmMessage,
- setIsPasswordConfirm
- ) => {
- if (password === confirmPassword) {
- setPasswordConfirmMessage('비밀번호를 똑같이 입력했어요 : )');
- setIsPasswordConfirm(true);
- } else {
- setPasswordConfirmMessage('비밀번호가 틀립니다. 다시 입력해주세요.');
- setIsPasswordConfirm(false);
- }
- };
+ }, []);
- // 비밀번호 확인
- const onPassword = useCallback(
+ //passwordConfirm 의 값이 변경될 때 호출
+ const onRepassword = useCallback(
(e) => {
- const passwordConfirmCurrent = e.target.value;
- setConfirmPassword(passwordConfirmCurrent);
- onChangePasswordConfirm(
- password,
- passwordConfirmCurrent,
- setPasswordConfirmMessage,
- setIsPasswordConfirm
- );
+ const passwordConfirmValue = e.target.value;
+ setConfirmPassword(passwordConfirmValue);
+ validatePasswordConfirm(password, passwordConfirmValue);
},
[password]
);
@@ -155,8 +134,8 @@ const Joininput = () => {
{email.length > 0 && (
@@ -168,10 +147,10 @@ const Joininput = () => {
{name.length > 0 && (
@@ -182,10 +161,10 @@ const Joininput = () => {
{password.length > 0 && (
@@ -196,11 +175,11 @@ const Joininput = () => {
{confirmPassword.length > 0 && (
@@ -216,7 +195,7 @@ const Joininput = () => {
type="submit"
disabled={!(isName && isEmail && isPassword && isPasswordConfirm)}
>
- 등록
+ 등록