From 0953b157f40ee49c3f5e96d31f1645077c1b8f54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= <wjdrldud98@gmail.com>
Date: Tue, 13 Aug 2024 12:34:08 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=98=84=EC=9E=AC=20=EB=B9=84=EB=B0=80?=
 =?UTF-8?q?=EB=B2=88=ED=98=B8=20=EC=9E=85=EB=A0=A5=20=EC=8B=9C=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PasswordChangeForm/PasswordChangeForm.jsx | 29 +++++++++----------
 .../PasswordChangePage/PasswordChangePage.jsx | 10 +++++--
 2 files changed, 21 insertions(+), 18 deletions(-)

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 && <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}
-          className={styles.inputBox}
+          maxLength={50}
+          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}
-          className={errorConfirmMessage ? styles.inputErrorBox : styles.inputBox}
+          maxLength={50}
+          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}
diff --git a/frontend/src/pages/PasswordChangePage/PasswordChangePage.jsx b/frontend/src/pages/PasswordChangePage/PasswordChangePage.jsx
index 67a630c..1d49289 100644
--- a/frontend/src/pages/PasswordChangePage/PasswordChangePage.jsx
+++ b/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}
     />
   );
 }