diff --git a/frontend/src/components/LoginAndSignUpForm.module.css b/frontend/src/components/LoginAndSignUpForm.module.css
index 90e8ee2d..89a9c7ad 100644
--- a/frontend/src/components/LoginAndSignUpForm.module.css
+++ b/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;
+}
diff --git a/frontend/src/components/login/LoginForm.jsx b/frontend/src/components/login/LoginForm.jsx
index 5f93630c..3a00b383 100644
--- a/frontend/src/components/login/LoginForm.jsx
+++ b/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
diff --git a/frontend/src/components/signup/SignUpForm.jsx b/frontend/src/components/signup/SignUpForm.jsx
index 811f5572..7067a3b0 100644
--- a/frontend/src/components/signup/SignUpForm.jsx
+++ b/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>
diff --git a/frontend/src/utils/auth.js b/frontend/src/utils/auth.js
new file mode 100644
index 00000000..f32fa21d
--- /dev/null
+++ b/frontend/src/utils/auth.js
@@ -0,0 +1,53 @@
+import { api } from './axios.js';
+
+const DEFAULT_ROLE = 'TEAM_MEMBER';
+
+export const signUp = async (
+  { nickname, email, password, phoneNumber },
+  signal
+) => {
+  const payload = {
+    name: nickname.trim(),
+    email: email.trim(),
+    password: password,
+    role: DEFAULT_ROLE,
+    phoneNumber: phoneNumber.trim(),
+  };
+  const res = await api.post('/api/auth/signup', payload, { signal });
+  return res.data;
+};
+
+export const login = async ({ email, password }, signal) => {
+  const paylaod = { email, password };
+
+  const res = await api.post('/api/auth/login', paylaod, { signal });
+
+  const { accessToken, refreshToken } = res.data;
+  if (accessToken && refreshToken) {
+    // 3. 로컬 스토리지에 각 토큰을 저장
+    localStorage.setItem('accessToken', accessToken);
+    localStorage.setItem('refreshToken', refreshToken);
+  }
+
+  return res.data;
+};
+
+export const sendVerificationNumber = async ({ email }, signal) => {
+  const res = await api.post('/api/email/send', null, {
+    params: { email },
+    signal,
+  });
+
+  return res.data;
+};
+export const checkVerificationNumber = async (
+  { email, verificationNumber },
+  signal
+) => {
+  const res = await api.post('/api/email/verify', null, {
+    params: { email, code: verificationNumber },
+    signal,
+  });
+
+  return res.data;
+};
diff --git a/frontend/src/utils/axios.js b/frontend/src/utils/axios.js
new file mode 100644
index 00000000..20005fb1
--- /dev/null
+++ b/frontend/src/utils/axios.js
@@ -0,0 +1,55 @@
+import axios from 'axios';
+
+export const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+  withCredentials: true,
+});
+
+api.interceptors.response.use(
+  (res) => res,
+  async (err) => {
+    // 토큰 로직
+    const originRequest = err.config;
+
+    // 액세스 토큰 만료 확인
+    if (err.response?.status === 401 && !originRequest._retry) {
+      originRequest._retry = true;
+
+      try {
+        const rt = localStorage.getItem('refreshToken');
+        const res = await axios.post(
+          `${import.meta.env.VITE_API_URL}/api/auth/reissue`,
+          { refreshToken: rt },
+          { withCredentials: true }
+        );
+
+        const newAccessToken = res.data.accessToken;
+
+        localStorage.setItem('accessToken', newAccessToken);
+        originRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+
+        return api(originRequest);
+      } catch (refreshError) {
+        console.error('Token refresh failed: ', refreshError);
+        localStorage.removeItem('accessToken');
+        localStorage.removeItem('refreshToken');
+
+        window.location.href = '/login';
+        return Promise.reject(refreshError);
+      }
+    }
+
+    const status = err.response?.status;
+    const message =
+      err.response?.data?.message ||
+      err.response?.statusText ||
+      '오류가 발생했습니다.';
+    return Promise.reject({ status, message, data: err.response?.data });
+  }
+);
+
+api.interceptors.request.use((config) => {
+  const at = localStorage.getItem('accessToken');
+  if (at) config.headers.Authorization = `Bearer ${at}`;
+  return config;
+});