feat: 비밀번호 찾기 페이지 추가

frontend/src/hooks/api/usePasswordReset.js

@@ -8,19 +8,11 @@ export function usePasswordReset() {
   };
 
   const verify = (authNum, email) => {
-    const verifyBody = {
-      code: authNum,
-      email,
-    };
-    return instance.get(`${API_URL}/mail/verify`, verifyBody);
+    return instance.get(`${API_URL}/mail/verify?code=${authNum}&email=${email}`);
   };
 
-  const updatePassword = (newPw, newPwCheck) => {
-    const passwordBody = {
-      newPassword: newPw,
-      newPasswordCheck: newPwCheck,
-    };
-    return instance.put(`${API_URL}/user/updateforgottenpassword`, passwordBody);
+  const updatePassword = (newPassword, email) => {
+    return instance.put(`${API_URL}/user/updateforgottenpassword?email=${email}&newPassword=${newPassword}`);
   };
 
   return { sendEmail, verify, updatePassword };

frontend/src/pages/PasswordResetAuthPage/PasswordResetAuthPage.jsx

@@ -1,20 +1,39 @@
 import { AuthForm, InputBox } from '../../components/AuthForm';
 import { useRef, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import styles from './PasswordResetAuthPage.module.css';
+import { usePasswordReset } from '../../hooks/api/usePasswordReset';
 
 export default function PasswordResetPage() {
+  // TODO: 비밀번호 변경 기능확인 후 최종 완성
+  const location = useLocation();
+  const email = location.state;
+  const navigate = useNavigate();
+  const { verify, updatePassword } = usePasswordReset();
   const [sentAuthNum, setSentAuthNum] = useState(false);
   const authNumRef = useRef('');
   const passwordRef = useRef('');
   const passwordConfirmRef = useRef('');
 
   const [passwordMatch, setPasswordMatch] = useState(true);
+  const [authError, setAuthError] = useState(false);
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    console.log(authNumRef.current.value);
-    authNumRef.current.value = '';
-    setSentAuthNum(true);
+    setAuthError(false);
+    console.log(authNumRef.current.value, email);
+    verify(authNumRef.current.value, email)
+      .then((res) => {
+        console.log(res);
+        setSentAuthNum(true);
+      })
+      .catch((err) => {
+        console.log(err);
+        if (err.message === 'Request failed with status code 404') {
+          setAuthError(true);
+        }
+        return;
+      });
   };
 
   const handlePost = async (e) => {
@@ -25,7 +44,9 @@ export default function PasswordResetPage() {
     if (!isPWMatch) {
       return;
     }
-    console.log(passwordRef.current.value, passwordConfirmRef.current.value);
+    updatePassword(passwordRef.current.value, email).then(() => {
+      navigate('/auth/login');
+    });
   };
 
   return sentAuthNum ? (
@@ -48,9 +69,7 @@ export default function PasswordResetPage() {
           ref={passwordConfirmRef}
           hasError={!passwordMatch}
         >
-          {!passwordMatch && (
-            <div className={`${styles.textBodyStrong} ${styles.dangerColor}`}>비밀번호가 일치하지 않습니다</div>
-          )}
+          {!passwordMatch && <div>비밀번호가 일치하지 않습니다</div>}
         </InputBox>
       </AuthForm>
     </div>
@@ -66,7 +85,9 @@ export default function PasswordResetPage() {
           id="authNum"
           type="password"
           ref={authNumRef}
-        />
+        >
+          {authError && <div>잘못된 인증번호입니다</div>}
+        </InputBox>
       </AuthForm>
     </div>
   );

frontend/src/pages/PasswordResetPage/PasswordResetPage.jsx

@@ -1,23 +1,31 @@
 import { AuthForm, InputBox } from '../../components/AuthForm';
 import { useRef, useState, useEffect } from 'react';
 import styles from './PasswordResetPage.module.css';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { usePasswordReset } from '../../hooks/api/usePasswordReset';
 
 export default function PasswordResetPage() {
-  const navigate = useNavigate();
-  const [time, setTime] = useState(5);
-  const [emailSent, setEmailSent] = useState(false);
+  const [emailSent, setEmailSent] = useState('');
   const [notFound, setNotFound] = useState(false);
   const emailRef = useRef('');
 
   const { sendEmail } = usePasswordReset();
+
+  useEffect(() => {
+    if (emailSent) {
+      console.log('Updated emailSent:', emailSent);
+    }
+  }, [emailSent]);
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     setNotFound(false);
     await sendEmail(emailRef.current.value)
       .then(() => {
-        setEmailSent(true);
+        const email = emailRef.current.value;
+        console.log(email);
+        setEmailSent(email);
+        console.log(emailSent);
       })
       .catch((err) => {
         console.log(err);
@@ -28,23 +36,6 @@ export default function PasswordResetPage() {
       });
   };
 
-  useEffect(() => {
-    if (!emailSent) {
-      return;
-    }
-    const timer = setInterval(() => {
-      setTime((prev) => prev - 1);
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, [emailSent]);
-
-  useEffect(() => {
-    if (time === 0) {
-      navigate('../resetAuth');
-    }
-  }, [navigate, time]);
-
   return emailSent ? (
     <section className={styles.loginGroup}>
       <h1 className={styles.title}>인증번호 받기</h1>
@@ -52,12 +43,11 @@ export default function PasswordResetPage() {
         비밀번호 초기화 인증번호를 이메일로 보냈습니다.
         <br />
         메일함을 확인해주세요.
-        <br />
-        <span className={styles.seconds}>{time}초</span> 후에 자동으로 인증번호 입력 페이지로 이동합니다.
       </p>
       <Link
         to={'../resetAuth'}
         className={styles.linkButton}
+        state={emailSent}
       >
         인증번호 입력하러 가기
       </Link>