feat: 비밀번호 변경 다른 비밀번호 입력 시 오류 처리 추가

frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx

@@ -1,14 +1,18 @@
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import styles from './PasswordChangeForm.module.css';
 
-export default function PasswordChangeForm({ onSubmit, onPwError = false }) {
-  // TODO: onPwError(현재 비밀번호와 같음) 시 응답을 받아 표시
+export default function PasswordChangeForm({ onSubmit, pwError = false }) {
+  // TODO:
   const [errorConfirmMessage, setErrorConfirmMessage] = useState(false);
   const [errorSameMessage, setErrorSameMessage] = useState(false);
   const currentPasswordRef = useRef('');
   const newPasswordRef = useRef('');
   const confirmPasswordRef = useRef('');
 
+  useEffect(() => {
+    setErrorSameMessage(pwError);
+  }, [pwError]);
+
   const handleSubmit = (e) => {
     e.preventDefault();
     const currentPassword = currentPasswordRef.current.value;
@@ -18,12 +22,6 @@ export default function PasswordChangeForm({ onSubmit, onPwError = false }) {
     if (newPassword === confirmPassword) {
       setErrorConfirmMessage(false);
       onSubmit(currentPassword, newPassword, confirmPassword);
-
-      if (onPwError) {
-        setErrorSameMessage(true);
-      } else {
-        setErrorSameMessage(false);
-      }
     } else {
       setErrorConfirmMessage(true);
     }

frontend/src/pages/PasswordChangePage/PasswordChangePage.jsx

@@ -1,12 +1,30 @@
 import { PasswordChangeForm } from '../../components/PasswordChangeForm';
 import { useAuth } from '../../hooks/api/useAuth';
 import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
 
 export default function PasswordChangePage() {
   const navigate = useNavigate();
+  const [pwError, setPwError] = useState(false);
   const { updatePassword } = useAuth();
   const handleSubmit = async (currentPw, newPw, newPwCheck) => {
-    await updatePassword(currentPw, newPw, newPwCheck).then(() => navigate('/'));
+    await updatePassword(currentPw, newPw, newPwCheck)
+      .then((res) => {
+        console.log(res);
+        navigate('/');
+      })
+      .catch((err) => {
+        console.log(err.response.data);
+        if (err.response.data === 'Current password is incorrect') {
+          console.log('현재 비밀번호 에러');
+          setPwError(true);
+        }
+      });
   };
-  return <PasswordChangeForm onSubmit={handleSubmit} />;
+  return (
+    <PasswordChangeForm
+      onSubmit={handleSubmit}
+      pwError={pwError}
+    />
+  );
 }