Merge branch 'FE/PasswordChangeForm' into 'frontend'

[Front-End] feat: 현재 비밀번호 입력 시 에러 처리 추가

See merge request s11-webmobile1-sub2/S11P12A701!184

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 }) {
+export default function PasswordChangeForm({ onSubmit, onError }) {
-  const [errorConfirmMessage, setErrorConfirmMessage] = useState(false);
+  const [error, setError] = useState(null);
-  const [errorSameMessage, setErrorSameMessage] = useState(false);
   const currentPasswordRef = useRef('');
   const newPasswordRef = useRef('');
   const confirmPasswordRef = useRef('');
 
   useEffect(() => {
-    setErrorSameMessage(pwError);
+    setError(onError);
-  }, [pwError]);
+  }, [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}
+          maxLength={50}
-          className={errorSameMessage ? styles.inputErrorBox : styles.inputBox}
+          className={error === 'currentPwError' ? styles.inputErrorBox : styles.inputBox}
           required
         />
-        {errorSameMessage && <div className={styles.errorMessage}>현재 비밀번호가 일치하지 않습니다.</div>}
+        {error === 'currentPwError' && <div className={styles.errorMessage}>현재 비밀번호가 일치하지 않습니다.</div>}
       </div>
       <div className={styles.inputGroup}>
         <label htmlFor="newPassword">새 비밀번호</label>
@@ -49,10 +47,11 @@ export default function PasswordChangeForm({ onSubmit, pwError = false }) {
           type="password"
           id="newPassword"
           ref={newPasswordRef}
-          maxLength={200}
+          maxLength={50}
-          className={styles.inputBox}
+          className={error === 'samePwError' ? styles.inputErrorBox : styles.inputBox}
           required
         />
+        {error === 'samePwError' && <div className={styles.errorMessage}>현재 비밀번호와 같은 비밀번호입니다.</div>}
       </div>
       <div className={styles.inputGroup}>
         <label htmlFor="confirmPassword">새 비밀번호 확인</label>
@@ -60,11 +59,11 @@ export default function PasswordChangeForm({ onSubmit, pwError = false }) {
           type="password"
           id="confirmPassword"
           ref={confirmPasswordRef}
-          maxLength={200}
+          maxLength={50}
-          className={errorConfirmMessage ? styles.inputErrorBox : styles.inputBox}
+          className={error === 'confirmError' ? styles.inputErrorBox : styles.inputBox}
           required
         />
-        {errorConfirmMessage && <div className={styles.errorMessage}>비밀번호가 일치하지 않습니다.</div>}
+        {error === 'confirmError' && <div className={styles.errorMessage}>비밀번호가 일치하지 않습니다.</div>}
       </div>
       <button
         className={styles.button}

frontend/src/pages/PasswordChangePage/PasswordChangePage.jsx

@@ -5,23 +5,27 @@ import { useState } from 'react';
 
 export default function PasswordChangePage() {
   const navigate = useNavigate();
-  const [pwError, setPwError] = useState(false);
+  const [error, setError] = useState('none');
   const { updatePassword } = useAuth();
   const handleSubmit = async (currentPw, newPw, newPwCheck) => {
+    setError('none');
     await updatePassword(currentPw, newPw, newPwCheck)
       .then(() => {
         navigate('/');
       })
       .catch((err) => {
         if (err.response.data === 'Current password is incorrect') {
-          setPwError(true);
+          setError('currentPwError');
+        }
+        if (err.response.data === 'New password cannot be the same as the current password') {
+          setError('samePwError');
         }
       });
   };
   return (
     <PasswordChangeForm
       onSubmit={handleSubmit}
-      pwError={pwError}
+      onError={error}
     />
   );
 }