Merge branch 'FE/PasswordResetAuthPage' into 'frontend'

[Front-End] feat: PasswordResetAuthPage 추가

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

frontend/src/Router.jsx

@@ -32,6 +32,7 @@ const QuizsetWritePage = lazy(async () => await import('./pages/QuizsetWritePage
 const QuizsetDetailPage = lazy(async () => await import('./pages/QuizsetDetailPage'));
 const LectureEnrollPage = lazy(async () => await import('./pages/LectureEnrollPage'));
 const QuizsetEditPage = lazy(async () => await import('./pages/QuizsetEditPage'));
+const PasswordResetAuthPage = lazy(async () => await import('./pages/PasswordResetAuthPage'));
 
 const router = createBrowserRouter([
   {
@@ -178,6 +179,10 @@ const router = createBrowserRouter([
             path: 'password-reset',
             element: <PasswordResetPage />,
           },
+          {
+            path: 'resetAuth',
+            element: <PasswordResetAuthPage />,
+          },
         ],
       },
       {

frontend/src/pages/PasswordResetAuthPage/PasswordResetAuthPage.jsx

@@ -0,0 +1,73 @@
+import { AuthForm, InputBox } from '../../components/AuthForm';
+import { useRef, useState } from 'react';
+import styles from './PasswordResetAuthPage.module.css';
+
+export default function PasswordResetPage() {
+  const [sentAuthNum, setSentAuthNum] = useState(false);
+  const authNumRef = useRef('');
+  const passwordRef = useRef('');
+  const passwordConfirmRef = useRef('');
+
+  const [passwordMatch, setPasswordMatch] = useState(true);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log(authNumRef.current.value);
+    authNumRef.current.value = '';
+    setSentAuthNum(true);
+  };
+
+  const handlePost = async (e) => {
+    e.preventDefault();
+    const isPWMatch = passwordRef.current.value === passwordConfirmRef.current.value;
+
+    setPasswordMatch(isPWMatch);
+    if (!isPWMatch) {
+      return;
+    }
+    console.log(passwordRef.current.value, passwordConfirmRef.current.value);
+  };
+
+  return sentAuthNum ? (
+    <div className={styles.wrapper}>
+      <AuthForm
+        onSubmit={handlePost}
+        title="비밀번호 변경"
+        buttonText="비밀번호 변경"
+      >
+        <InputBox
+          title="새 비밀번호"
+          type="password"
+          id="password"
+          ref={passwordRef}
+        />
+        <InputBox
+          title="새 비밀번호 확인"
+          type="password"
+          id="passwordConfirm"
+          ref={passwordConfirmRef}
+          hasError={!passwordMatch}
+        >
+          {!passwordMatch && (
+            <div className={`${styles.textBodyStrong} ${styles.dangerColor}`}>비밀번호가 일치하지 않습니다</div>
+          )}
+        </InputBox>
+      </AuthForm>
+    </div>
+  ) : (
+    <div className={styles.wrapper}>
+      <AuthForm
+        onSubmit={handleSubmit}
+        title="인증번호 입력"
+        buttonText="인증번호 입력"
+      >
+        <InputBox
+          title="인증번호"
+          id="authNum"
+          type="password"
+          ref={authNumRef}
+        />
+      </AuthForm>
+    </div>
+  );
+}

frontend/src/pages/PasswordResetAuthPage/PasswordResetAuthPage.module.css

@@ -0,0 +1,48 @@
+.wrapper,
+.loginGroup {
+  padding-top: 20px;
+  max-width: 480px;
+  margin: 0 auto;
+  color: var(--text-color);
+}
+
+.loginGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 20px 40px 0;
+  box-sizing: border-box;
+}
+
+.title {
+  font-size: 36px;
+  line-height: 1.2;
+  font-weight: 700;
+  margin: 0;
+}
+
+.text {
+  text-align: center;
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 400;
+}
+
+.linkButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background-color: var(--primary-color);
+  border: none;
+  color: var(--on-primary);
+  padding: 12px;
+  margin-top: 20px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
+  cursor: pointer;
+}

frontend/src/pages/PasswordResetAuthPage/index.js

@@ -0,0 +1 @@
+export { default } from './PasswordResetAuthPage';

frontend/src/pages/PasswordResetPage/PasswordResetPage.jsx

@@ -1,35 +1,52 @@
 import { AuthForm, InputBox } from '../../components/AuthForm';
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import styles from './PasswordResetPage.module.css';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 export default function PasswordResetPage() {
+  const navigate = useNavigate();
+  const [time, setTime] = useState(5);
   const [sendEmail, setSendEmail] = useState(false);
   const emailRef = useRef('');
   const buttonText = useRef('비밀번호 찾기');
   const handleSubmit = (e) => {
     e.preventDefault();
-    // TODO: 비밀번호 찾기 POST 기능 추가
     console.log('비밀번호 찾기', emailRef.current.value);
-    // delay
-    setTimeout(() => {
-      setSendEmail(true);
-    }, 200);
+    setSendEmail(true);
   };
 
+  useEffect(() => {
+    if (!sendEmail) {
+      return;
+    }
+    const timer = setInterval(() => {
+      setTime((prev) => prev - 1);
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [sendEmail]);
+
+  useEffect(() => {
+    if (time === 0) {
+      navigate('../resetAuth');
+    }
+  }, [navigate, time]);
+
   return sendEmail ? (
     <section className={styles.loginGroup}>
       <h1 className={styles.title}>비밀번호 찾기</h1>
       <p className={styles.text}>
-        비밀번호 초기화 이메일을 보냈습니다.
+        비밀번호 초기화 인증번호를 이메일로 보냈습니다.
         <br />
         메일함을 확인해주세요.
+        <br />
+        <span className={styles.seconds}>{time}초</span> 후에 자동으로 인증번호 입력 페이지로 이동합니다.
       </p>
       <Link
-        to={'../login'}
+        to={'../resetAuth'}
         className={styles.linkButton}
       >
-        로그인하러 가기
+        인증번호 입력하러 가기
       </Link>
     </section>
   ) : (

frontend/src/pages/PasswordResetPage/PasswordResetPage.module.css

@@ -46,3 +46,10 @@
   font-weight: 700;
   cursor: pointer;
 }
+
+.seconds {
+  color: var(--primary-color);
+  font-size: 24px;
+  line-height: 1.2;
+  font-weight: 700;
+}