[FE] SISC1-195 [FEAT] 로그인, 회원가입, 이메일 인증번호 전송 및 이메일 번호 인증 api 연동

frontend/src/components/LoginAndSignUpForm.module.css

@@ -159,3 +159,19 @@
   background-color: #bce5ff;
   cursor: not-allowed;
 }
+
+.passwordPolicy {
+  list-style: none;
+  padding: 0;
+  margin: 8px 0px 0px 8px;
+  font-size: 13px;
+  color: #868e96;
+}
+
+.passwordPolicy li {
+  transition: color 0.2s ease-in-out;
+}
+
+.passwordPolicy li.valid {
+  color: #28a745;
+}

frontend/src/components/login/LoginForm.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useNavigate, NavLink } from 'react-router-dom';
 import styles from '../LoginAndSignUpForm.module.css';
 import sejong_logo from '../../assets/sejong_logo.png';
@@ -8,6 +8,8 @@ import VerificationModal from './../VerificationModal';
 import ResetPasswordModal from './ResetPasswordModal';
 import FindEmailResultModal from './FindEmailResultModal';
 
+import { login } from '../../utils/auth';
+
 const LoginForm = () => {
   const nav = useNavigate();
 
@@ -17,7 +19,7 @@ const LoginForm = () => {
   const [foundEmail, setFoundEmail] = useState('');
 
   // 전화번호 인증 성공 시 호출하는 함수
-  const handlePhoneVerificationSuccess = (result) => {
+  const handlePhoneVerificationSuccess = () => {
     if (modalStep === 'verifyPhoneForEmail') {
       setFoundEmail('example@google.com');
       setModalStep('showEmail');
@@ -32,17 +34,32 @@ const LoginForm = () => {
 
   const isFormValid = email.trim() !== '' && password.trim() !== '';
 
-  const handleLogin = (e) => {
+  const abortRef = useRef(null);
+
+  const handleLogin = async (e) => {
     e.preventDefault();
-    // 안전장치
-    if (!email || !password) {
-      alert('이메일과 비밀번호를 모두 입력해주세요.');
-      return;
-    }
 
-    // 로그인 성공 시 로직
-    localStorage.setItem('authToken', 'dummy-token-12345');
-    nav('/');
+    // 도중에 요청 시 전 요청 취소
+    abortRef.current?.abort();
+    abortRef.current = new AbortController();
+
+    try {
+      await login(
+        {
+          email,
+          password,
+        },
+        abortRef.current.signal
+      );
+
+      nav('/');
+    } catch (err) {
+      console.dir(err);
+      alert(
+        err.data?.errorMessage ||
+          '로그인에 실패하였습니다. 이메일과 비밀번호를 확인해주세요.'
+      );
+    }
   };
 
   return (
@@ -69,6 +86,7 @@ const LoginForm = () => {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               placeholder="이메일을 입력하세요"
+              autoComplete="email"
             />
           </div>
           <div className={styles.inputGroup}>
@@ -79,6 +97,7 @@ const LoginForm = () => {
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               placeholder="비밀번호를 입력하세요"
+              autoComplete="current-password"
             />
           </div>
           <button

frontend/src/components/signup/SignUpForm.jsx

@@ -1,22 +1,52 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styles from '../LoginAndSignUpForm.module.css';
 import sejong_logo from '../../assets/sejong_logo.png';
-import EmailVerificationModal from './../VerificationModal';
+
+import {
+  sendVerificationNumber,
+  signUp,
+  checkVerificationNumber,
+} from '../../utils/auth.js';
+
+const passwordPolicy = [
+  { label: '8~20자 이내', test: (pw) => pw.length >= 8 && pw.length <= 20 },
+  { label: '최소 1개의 대문자 포함', test: (pw) => /[A-Z]/.test(pw) },
+  { label: '최소 1개의 소문자 포함', test: (pw) => /[a-z]/.test(pw) },
+  { label: '최소 1개의 숫자 포함', test: (pw) => /[0-9]/.test(pw) },
+  { label: '최소 1개의 특수문자 포함', test: (pw) => /[\W_]/.test(pw) },
+];
 
 const SignUpForm = () => {
   const [nickname, setNickname] = useState('');
-  const [phoneNumber, setPhoneNumber] = useState('');
   const [verificationNumber, setVerificationNumber] = useState('');
   const [email, setEmail] = useState('');
+  const [phoneNumber, setPhoneNumber] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+  const [passwordValid, setPasswordValid] = useState(
+    Array(passwordPolicy.length).fill(false)
+  );
 
-  const [isVerificationNumberSent, setVerificationNumberSent] = useState(false);
+  const [isSending, setIsSending] = useState(false);
+
+  const [isVerificationSent, setVerificationSent] = useState(false);
+  const [isVerificationChecked, setVerificationChecked] = useState(false);
+
+  const abortRef = useRef(null);
 
   const nav = useNavigate();
 
-  // 이메일 입력 형태가 맞는지 검사
+  const handlePasswordChange = (e) => {
+    const newPassword = e.target.value;
+    setPassword(newPassword);
+    const newPasswordValid = passwordPolicy.map((rule) =>
+      rule.test(newPassword)
+    );
+    setPasswordValid(newPasswordValid);
+  };
+
+  // 이메일 유효성 검사
   const isEmailValid = () => {
     const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
     return emailRegex.test(email);
@@ -29,27 +59,80 @@ const SignUpForm = () => {
   };
 
   // 회원가입 제출 유효성 검사
+  const isPasswordValid = passwordValid.every(Boolean);
+
   const isFormValid =
     nickname.trim() !== '' &&
     isEmailValid() &&
-    isPhoneNumberValid() &&
-    password.trim() !== '' &&
+    isVerificationSent &&
+    isVerificationChecked &&
+    isPhoneNumberValid &&
+    isPasswordValid &&
     password === confirmPassword;
 
-  const handleSendVerificationNumber = () => {
-    // 전송 state 변경
-    setVerificationNumberSent(true);
+  const handleSendVerificationNumber = async (e) => {
+    e.preventDefault();
+
+    // 도중에 요청 시 전 요청 취소
+    abortRef.current?.abort();
+    abortRef.current = new AbortController();
+
+    setIsSending(true);
+
+    // 인증번호 발송 로직 & api 자리
+    try {
+      await sendVerificationNumber({ email: email }, abortRef.current.signal);
+
+      setVerificationSent(true);
+      alert('인증번호가 발송되었습니다.');
+    } catch (err) {
+      alert(err.data?.errorMessage || '전송 오류가 발생했습니다.');
+    } finally {
+      setIsSending(false);
+    }
+  };
+  const handleCheckVerificationNumber = async () => {
+    // 도중에 요청 시 전 요청 취소
+    abortRef.current?.abort();
+    abortRef.current = new AbortController();
+
+    // 인증번호 발송 로직 & api 자리
+    try {
+      await checkVerificationNumber(
+        { email: email, verificationNumber: verificationNumber },
+        abortRef.current.signal
+      );
 
-    // 인증번호 발송 로직
-    alert('인증번호가 발송되었습니다.');
+      setVerificationChecked(true);
+      alert('인증되었습니다.');
+    } catch (err) {
+      alert(err.response?.data?.message || '인증에 실패했습니다.');
+    }
   };
-  const handleSignUp = (e) => {
+
+  const handleSignUp = async (e) => {
     e.preventDefault();
 
-    // api 자리
+    // 도중에 요청 시 전 요청 취소
+    abortRef.current?.abort();
+    abortRef.current = new AbortController();
+
+    try {
+      await signUp(
+        {
+          nickname,
+          email,
+          password,
+          phoneNumber,
+        },
+        abortRef.current.signal
+      );
 
-    // localStorage.setItem('authToken', 'dummy-token-12345');
-    nav('/login'); // 회원가입 성공 시 로그인 페이지 이동
+      alert('회원가입이 완료되었습니다.');
+      nav('/login');
+    } catch (err) {
+      alert(err.data?.errorMessage || '회원가입에 실패하였습니다.');
+    }
   };
 
   return (
@@ -78,44 +161,59 @@ const SignUpForm = () => {
             />
           </div>
           <div className={styles.inputGroup}>
-            <label htmlFor="phoneNumber">휴대전화</label>
+            <label htmlFor="email">Email</label>
             <div className={styles.phoneVerificationContainer}>
               <input
-                type="phoneNumber"
-                id="text"
-                value={phoneNumber}
-                onChange={(e) => setPhoneNumber(e.target.value)}
-                placeholder="ex) 01012345678"
+                type="email"
+                id="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="ex) abcde@gmail.com"
                 className={styles.phoneNumberInput}
               />
               <button
                 type="button"
                 className={styles.verifyButton}
                 onClick={handleSendVerificationNumber}
-                disabled={!isPhoneNumberValid()}
+                disabled={!isEmailValid() || isSending}
               >
-                인증번호 발송
+                {isSending
+                  ? '전송 중...'
+                  : isVerificationSent
+                    ? '재전송'
+                    : '인증번호 발송'}
               </button>
             </div>
           </div>
           <div className={styles.inputGroup}>
             <label htmlFor="verificationNumber">인증번호</label>
-            <input
-              type="text"
-              id="verificationNumber"
-              value={verificationNumber}
-              onChange={(e) => setVerificationNumber(e.target.value)}
-              placeholder="인증번호를 입력해주세요"
-            />
+            <div className={styles.phoneVerificationContainer}>
+              <input
+                type="text"
+                id="verificationNumber"
+                value={verificationNumber}
+                onChange={(e) => setVerificationNumber(e.target.value)}
+                placeholder="인증번호를 입력해주세요"
+              />
+              <button
+                type="button"
+                className={styles.verifyButton}
+                onClick={handleCheckVerificationNumber}
+                disabled={!isVerificationSent}
+              >
+                인증번호 확인
+              </button>
+            </div>
           </div>
           <div className={styles.inputGroup}>
-            <label htmlFor="email">Email</label>
+            <label htmlFor="phoneNumber">전화번호</label>
             <input
-              type="email"
-              id="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="이메일을 입력해주세요"
+              type="text"
+              id="phoneNumber"
+              value={phoneNumber}
+              onChange={(e) => setPhoneNumber(e.target.value)}
+              placeholder="ex) 01012345678"
+              autoComplete="tel"
             />
           </div>
           <div className={styles.inputGroup}>
@@ -124,9 +222,20 @@ const SignUpForm = () => {
               type="password"
               id="password"
               value={password}
-              onChange={(e) => setPassword(e.target.value)}
+              onChange={handlePasswordChange}
               placeholder="비밀번호를 입력해주세요"
+              autoComplete="new-password"
             />
+            <ul className={styles.passwordPolicy}>
+              {passwordPolicy.map((rule, index) => (
+                <li
+                  key={rule.label}
+                  className={passwordValid[index] ? styles.valid : ''}
+                >
+                  {rule.label}
+                </li>
+              ))}
+            </ul>
           </div>
           <div className={styles.inputGroup}>
             <label htmlFor="confirm-password">비밀번호 확인</label>