diff --git a/frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx b/frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx index 7c95ef8..15624c6 100644 --- a/frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx +++ b/frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx @@ -1,16 +1,15 @@ import { useState, useRef, useEffect } from 'react'; import styles from './PasswordChangeForm.module.css'; -export default function PasswordChangeForm({ onSubmit, pwError = false }) { - const [errorConfirmMessage, setErrorConfirmMessage] = useState(false); - const [errorSameMessage, setErrorSameMessage] = useState(false); +export default function PasswordChangeForm({ onSubmit, onError }) { + const [error, setError] = useState(null); const currentPasswordRef = useRef(''); const newPasswordRef = useRef(''); const confirmPasswordRef = useRef(''); useEffect(() => { - setErrorSameMessage(pwError); - }, [pwError]); + setError(onError); + }, [onError]); const handleSubmit = (e) => { e.preventDefault(); @@ -19,10 +18,9 @@ export default function PasswordChangeForm({ onSubmit, pwError = false }) { const confirmPassword = confirmPasswordRef.current.value; if (newPassword === confirmPassword) { - setErrorConfirmMessage(false); onSubmit(currentPassword, newPassword, confirmPassword); } else { - setErrorConfirmMessage(true); + setError('confirmError'); } }; return ( @@ -37,11 +35,11 @@ export default function PasswordChangeForm({ onSubmit, pwError = false }) { type="password" id="currentPassword" ref={currentPasswordRef} - maxLength={200} - className={errorSameMessage ? styles.inputErrorBox : styles.inputBox} + maxLength={50} + className={error === 'currentPwError' ? styles.inputErrorBox : styles.inputBox} required /> - {errorSameMessage &&
현재 비밀번호가 일치하지 않습니다.
} + {error === 'currentPwError' &&
현재 비밀번호가 일치하지 않습니다.
}
@@ -49,10 +47,11 @@ export default function PasswordChangeForm({ onSubmit, pwError = false }) { type="password" id="newPassword" ref={newPasswordRef} - maxLength={200} - className={styles.inputBox} + maxLength={50} + className={error === 'samePwError' ? styles.inputErrorBox : styles.inputBox} required /> + {error === 'samePwError' &&
현재 비밀번호와 같은 비밀번호입니다.
}
@@ -60,11 +59,11 @@ export default function PasswordChangeForm({ onSubmit, pwError = false }) { type="password" id="confirmPassword" ref={confirmPasswordRef} - maxLength={200} - className={errorConfirmMessage ? styles.inputErrorBox : styles.inputBox} + maxLength={50} + className={error === 'confirmError' ? styles.inputErrorBox : styles.inputBox} required /> - {errorConfirmMessage &&
비밀번호가 일치하지 않습니다.
} + {error === 'confirmError' &&
비밀번호가 일치하지 않습니다.
}