diff --git a/common/common.css b/common/common.css
index 655779d6..c03f2e40 100644
--- a/common/common.css
+++ b/common/common.css
@@ -25,7 +25,7 @@ header,
   align-items: flex-end;
   width: 100%;
   height: 540px;
-  background-color: #CFE5FF;
+  background-color: #cfe5ff;
   margin: 0 auto;
 }
 
@@ -34,14 +34,14 @@ main {
   margin-bottom: 120px;
 }
 
-
 footer {
   width: 100%;
   background-color: #111827;
-  padding: 32px 0 108px; 
+  padding: 32px 0 108px;
 }
 
-.login-btn {
+.login-btn,
+.signup-btn {
   display: inline-flex;
   padding: 12px 23px;
   background-color: var(--blue);
@@ -56,42 +56,59 @@ footer {
   text-decoration: none;
 }
 
-
-
 .header-btn {
   display: inline-flex;
   width: 357px;
-  height: 56px; 
+  height: 56px;
   background-color: var(--blue);
   border-radius: 40px;
-  border-style: none; 
+  border-style: none;
   text-decoration: none;
   color: var(--white);
   font-size: 20px;
-  font-weight: 600;  
+  font-weight: 600;
   justify-content: center;
   align-items: center;
   min-width: 240px;
   min-height: 48px;
-} 
+}
 
-.title:hover ,.logo:hover{
+.eye {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
   cursor: pointer;
 }
 
-.login-btn:hover , .header-btn:hover {
+.title:hover,
+.logo:hover {
   cursor: pointer;
-  background-color: #1967D6;
 }
 
-.login-btn:focus, .header-btn:focus {
-  background-color: #1251AA;
+.login-btn:hover,
+.header-btn:hover,
+.signup-btn:hover {
+  cursor: pointer;
+  background-color: #1967d6;
 }
 
-.login-btn:disabled, .header-btn:disabled {
-  background-color: var(--gray400);
+.login-btn:focus,
+.header-btn:focus,
+.signup-btn:focus {
+  background-color: #1251aa;
 }
 
+.login-btn:disabled,
+.header-btn:disabled,
+.signup-btn:disabled {
+  background-color: var(--gray400);
+  color: var(--white);
+  cursor: not-allowed;
+  pointer-events: none;
+}
 
 @media (min-width: 768px) and (max-width: 1199px) {
   nav {
@@ -107,20 +124,17 @@ footer {
   }
 
   main {
-    margin: 52px 0 82px;  
+    margin: 52px 0 82px;
     display: flex;
     flex-direction: column;
-    padding: 0 20px; 
-  }  
+    padding: 0 20px;
+  }
 
-  
-  footer { 
+  footer {
     width: 100%;
     height: 160px;
-    padding: 32px 104px 108px 104px; 
+    padding: 32px 104px 108px 104px;
   }
-
-
 }
 
 @media (max-width: 767px) {
@@ -132,22 +146,20 @@ footer {
     padding: var(--login-btn-padding);
   }
 
-  
   header {
-    height: 540px; 
+    height: 540px;
   }
 
   main {
-    margin: 52px 0 82px;  
+    margin: 52px 0 82px;
     display: flex;
     flex-direction: column;
-    padding: 0 20px; 
+    padding: 0 20px;
   }
-  
-  footer { 
+
+  footer {
     width: 100%;
     height: 160px;
-    padding: 32px 32px 30px 32px; 
+    padding: 32px 32px 30px 32px;
   }
-
 }
diff --git a/common/variables.css b/common/variables.css
index 3f3c50d5..aca6ad20 100644
--- a/common/variables.css
+++ b/common/variables.css
@@ -1,28 +1,27 @@
 :root {
   --gray900: #11827;
-  --gray800: #1F2937;
+  --gray800: #1f2937;
   --gray700: #374151;
-  --gray600: #4B5563;
-  --gray500: #6B7280;
-  --gray400: #9CA3AF;
-  --gray200: #E5E7EB;
-  --gray100: #F3F4F6;
-  --blue :#3692FF; 
-  --white: #FFFFFF;
+  --gray600: #4b5563;
+  --gray500: #6b7280;
+  --gray400: #9ca3af;
+  --gray200: #e5e7eb;
+  --gray100: #f3f4f6;
+  --blue: #3692ff;
+  --red: #f74747;
+  --white: #ffffff;
 
-  --font-size-14 : 0.875rem;
-  --font-size-16 : 1rem;
-  --font-size-18 : 1.125rem;
-  --font-size-20 : 1.25rem; 
-  --font-size-24 : 1.5rem;
-  --font-size-32 : 2rem;
-  --font-size-40 : 2.5rem;
+  --font-size-14: 0.875rem;
+  --font-size-16: 1rem;
+  --font-size-18: 1.125rem;
+  --font-size-20: 1.25rem;
+  --font-size-24: 1.5rem;
+  --font-size-32: 2rem;
+  --font-size-40: 2.5rem;
 
   --clamp-24: clamp(1rem, 2.5vw, 1.5rem);
   --clamp-40: clamp(1.8rem, 3.5vw, 2.5rem);
 
-
-
   --nav-title: 25.63px;
-  --login-btn-padding: 11px 43px;  
+  --login-btn-padding: 11px 43px;
 }
diff --git a/login/index.html b/login/index.html
index 290c89eb..e77b9043 100644
--- a/login/index.html
+++ b/login/index.html
@@ -1,50 +1,76 @@
 <!DOCTYPE html>
 <html lang="ko">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Login</title>
-  <link rel="shortcut icon" href="/images/pandaicon.png" type="image/x-icon">
-  <link rel="stylesheet" href="/common/reset.css">
-  <link rel="stylesheet" href="/common/variables.css">
-  <link rel="stylesheet" href="/common/common.css" >
-  <link rel="stylesheet" href="/login/style.css" > 
-</head>
-<body>
-  <div class="content">
-    <div class="title">
-      <img class="logo" src="/images/pandaicon.png" alt="판다마켓로고">
-      <a href="/"><h1>판다마켓</h1></a> 
-    </div>
-    <form>
-      <div class="email">
-        <label for="email">이메일</label>
-        <input class="email-input" name="email" type="email" placeholder="이메일을 입력해 주세요.">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Login</title>
+    <link
+      rel="shortcut icon"
+      href="/images/pandaicon.png"
+      type="image/x-icon"
+    />
+    <link rel="stylesheet" href="/common/reset.css" />
+    <link rel="stylesheet" href="/common/variables.css" />
+    <link rel="stylesheet" href="/common/common.css" />
+    <link rel="stylesheet" href="/login/style.css" />
+  </head>
+  <body>
+    <div class="content">
+      <div class="title">
+        <img class="logo" src="/images/pandaicon.png" alt="판다마켓로고" />
+        <a href="/"><h1>판다마켓</h1></a>
       </div>
-      <div class="pwd">
-        <label for="password">비밀번호</label>
-        <div class="pwd-content">
-          <input class="pwd-input" name="password" type="password" placeholder="비밀번호를 입력해 주세요." >
-          <img class="eye" src="/images/btn_visibility_off.png">
+      <form id="LoginForm">
+        <div class="email">
+          <label for="email">이메일</label>
+          <input
+            id="email"
+            class="email-input"
+            name="email"
+            type="email"
+            placeholder="이메일을 입력해 주세요."
+          />
+          <div id="email-error" class="error-message"></div>
+        </div>
+        <div class="pwd">
+          <label for="password">비밀번호</label>
+          <div class="pwd-content">
+            <input
+              id="password"
+              class="pwd-input"
+              name="password"
+              type="password"
+              placeholder="비밀번호를 입력해 주세요."
+            />
+            <img
+              class="eye"
+              id="eyeIcon"
+              src="/images/btn_visibility_off.png"
+            />
+          </div>
+          <div id="password-error" class="error-message"></div>
+        </div>
+        <button class="login-btn" type="submit" disabled>로그인</button>
+      </form>
+      <div class="section">
+        <div class="simple-login">
+          <h3>간편 로그인 하기</h3>
+        </div>
+        <div class="sns">
+          <a href="https://www.google.com/"
+            ><img src="/images/google.png" alt="google"
+          /></a>
+          <a href="https://www.kakaocorp.com/page/"
+            ><img src="/images/kakao.png" alt="kakao"
+          /></a>
         </div>
       </div>
-      <button class="login-btn" type="submit">로그인</button>
-    </form>
-    <div class="section">
-      <div class="simple-login">
-        <h3>간편 로그인 하기</h3>
-      </div>
-      <div class="sns">
-        <a href="https://www.google.com/"><img src="/images/google.png" alt="google"></a>
-        <a href="https://www.kakaocorp.com/page/"><img src="/images/kakao.png" alt="kakao"></a>
-      </div>
-    </div>
-    <div class="sign-up-message">
-      <div class="message">
-        판다 마켓이 처음이신가요? <a href="/signup/">회원가입</a>
+      <div class="sign-up-message">
+        <div class="message">
+          판다 마켓이 처음이신가요? <a href="/signup/">회원가입</a>
+        </div>
       </div>
     </div>
-
-  </div>
-</body>
-</html>
\ No newline at end of file
+    <script type="module" src="/login/index.js"></script>
+  </body>
+</html>
diff --git a/login/index.js b/login/index.js
new file mode 100644
index 00000000..7edd6d4b
--- /dev/null
+++ b/login/index.js
@@ -0,0 +1,71 @@
+import {
+  preventPasswordSpaces,
+  updateButtonState,
+  validateEmailInput,
+  validatePasswordInput,
+  togglePasswordVisiblity,
+} from "../shared/form-utils.js";
+
+const emailInput = document.getElementById("email");
+const emailError = document.getElementById("email-error");
+
+const passwordInput = document.getElementById("password");
+const passwordError = document.getElementById("password-error");
+
+const loginBtn = document.querySelector(".login-btn");
+const loginForm = document.getElementById("LoginForm");
+const eyeIcon = document.getElementById("eyeIcon");
+
+function validateEmail() {
+  return validateEmailInput(emailInput, emailError);
+}
+
+function validatePassword() {
+  return validatePasswordInput(passwordInput, passwordError);
+}
+
+function eyeIconClickHandler() {
+  togglePasswordVisiblity(passwordInput, eyeIcon);
+}
+
+function updateLoginBtnState() {
+  return updateButtonState({
+    inputs: [emailInput, passwordInput],
+    errors: [emailError, passwordError],
+    button: loginBtn,
+  });
+}
+
+emailInput.addEventListener("blur", () => {
+  validateEmail();
+  updateLoginBtnState();
+});
+
+passwordInput.addEventListener("blur", () => {
+  validatePassword();
+  updateLoginBtnState();
+});
+
+emailInput.addEventListener("input", () => {
+  validateEmail();
+  updateLoginBtnState();
+});
+
+passwordInput.addEventListener("input", () => {
+  validatePassword();
+  updateLoginBtnState();
+});
+
+eyeIcon.addEventListener("click", () => {
+  eyeIconClickHandler();
+});
+
+loginForm.addEventListener("submit", (e) => {
+  e.preventDefault();
+  if (!loginBtn.disabled) {
+    window.location.href = "/items";
+  }
+});
+
+preventPasswordSpaces(passwordInput);
+updateLoginBtnState(); // 초기 상태 업데이트
diff --git a/login/style.css b/login/style.css
index 9215a3ef..0d9c1d0f 100644
--- a/login/style.css
+++ b/login/style.css
@@ -22,10 +22,10 @@
 
 .email {
   display: flex;
-  flex-direction: column; 
+  flex-direction: column;
+  margin-bottom: var(--font-size-24);
 }
 
-
 .pwd {
   display: flex;
   flex-direction: column;
@@ -36,20 +36,9 @@
 }
 
 .pwd-content {
-  position: relative; 
+  position: relative;
   width: 100%;
   margin-top: 16px;
-  margin-bottom: 24px;
-}
-
-.eye {
-  position: absolute;
-  width: 24px;
-  height: 24px;
-  right: 16px;  
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer; 
 }
 
 label {
@@ -58,21 +47,33 @@ label {
   font-weight: 700;
 }
 
-
-
-.email-input, .pwd-input, .nickname-input {
+.email-input,
+.pwd-input,
+.nickname-input {
   width: 100%;
   height: 3.5rem;
   background-color: var(--gray100);
   border: none;
-  border-radius: 12px; 
+  border-radius: 12px;
   font-size: var(--font-size-16);
   padding: 16px 24px 14px;
 }
 
-.email-input, .nickname-input {
+.email-input,
+.nickname-input {
   margin-top: 16px;
-  margin-bottom: 24px;
+}
+
+.input-error {
+  border: 2px solid var(--red);
+}
+
+.error-message {
+  display: none;
+  color: var(--red);
+  font-size: var(--font-size-14);
+  font-weight: 600;
+  margin-top: 0.5rem;
 }
 
 .login-btn {
@@ -80,11 +81,12 @@ label {
   border-radius: 40px;
   height: 3.5rem;
   font-size: var(--font-size-20);
+  margin-top: var(--font-size-24);
 }
 
 .section {
   width: 100%;
-  background-color: #E6F2FF;
+  background-color: #e6f2ff;
   margin: 24px 0;
   display: flex;
   justify-content: space-between;
@@ -119,8 +121,8 @@ label {
 
 @media (min-width: 768px) and (max-width: 1199px) {
   .content {
-    margin: 190px auto; 
-    height: 618px;  
+    margin: 190px auto;
+    height: 618px;
   }
 
   .logo {
@@ -140,8 +142,8 @@ label {
 
 @media (max-width: 767px) {
   .content {
-    margin: 80px auto; 
-    height: 501px; 
+    margin: 80px auto;
+    height: 501px;
     max-width: 400px;
   }
 
@@ -163,6 +165,6 @@ label {
   .content {
     padding-left: 16px;
     padding-right: 16px;
-    width: 100% ;
+    width: 100%;
   }
 }
diff --git a/shared/form-utils.js b/shared/form-utils.js
new file mode 100644
index 00000000..043c09bc
--- /dev/null
+++ b/shared/form-utils.js
@@ -0,0 +1,101 @@
+export function validateEmailInput(inputEl, errorEl) {
+  const value = inputEl.value;
+  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+  let message = "";
+
+  if (!value) {
+    message = "이메일을 입력해주세요.";
+  } else if (!emailRegex.test(value)) {
+    message = "잘못된 이메일 형식입니다 .";
+  }
+
+  showValidation(inputEl, errorEl, message);
+  return !message;
+}
+
+export function validateNicknameInput(inputEl, errorEl) {
+  const value = inputEl.value;
+
+  let message = "";
+  if (!value) {
+    message = "닉네임을 입력해주세요.";
+  }
+
+  showValidation(inputEl, errorEl, message);
+  return !message;
+}
+
+export function validatePasswordInput(inputEl, errorEl) {
+  const value = inputEl.value;
+  let message = "";
+
+  if (!value) {
+    message = "비밀번호를 입력해주세요.";
+  } else if (value.length < 8) {
+    message = "비밀번호를 8자 이상 입력해주세요.";
+  }
+
+  showValidation(inputEl, errorEl, message);
+  return !message;
+}
+
+export function validateConfirmPasswordInput(
+  passwordInput,
+  confirmPasswordInput,
+  errorEl
+) {
+  const passwordValue = passwordInput.value;
+  const confirmPasswordValue = confirmPasswordInput.value;
+
+  let message = "";
+
+  if (!confirmPasswordValue) {
+    message = "";
+  } else if (confirmPasswordValue !== passwordValue) {
+    message = "비밀번호가 일치하지 않습니다.";
+  }
+  showValidation(confirmPasswordInput, errorEl, message);
+  return !message;
+}
+
+export function togglePasswordVisiblity(passwordInput, eyeIcon) {
+  if (!passwordInput || !eyeIcon) return;
+
+  const isPasswordVisible = passwordInput.type === "text";
+  passwordInput.type = isPasswordVisible ? "password" : "text";
+  eyeIcon.src = isPasswordVisible
+    ? "/images/btn_visibility_off.png"
+    : "/images/btn_visibility_on.png";
+}
+
+export function preventPasswordSpaces(passwordInput) {
+  if (!passwordInput) return;
+
+  passwordInput.addEventListener("keydown", (e) => {
+    if (e.key === " " || e.code === "Space") {
+      e.preventDefault();
+    }
+  });
+
+  passwordInput.addEventListener("input", () => {
+    passwordInput.value = passwordInput.value.replace(/\s/g, "");
+  });
+}
+
+export function showValidation(inputEl, errorEl, message) {
+  if (message) {
+    inputEl.classList.add("input-error");
+    errorEl.textContent = message;
+    errorEl.style.display = "block";
+  } else {
+    inputEl.classList.remove("input-error");
+    errorEl.style.display = "none";
+  }
+}
+
+export function updateButtonState({ inputs, errors, button }) {
+  const isEmpty = inputs.some((input) => !input.value);
+  const hasError = errors.some((error) => error.style.display === "block");
+  button.disabled = isEmpty || hasError;
+}
diff --git a/signup/index.html b/signup/index.html
index 579c4abd..78aaac94 100644
--- a/signup/index.html
+++ b/signup/index.html
@@ -1,65 +1,106 @@
 <!DOCTYPE html>
 <html lang="ko">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>회원가입 페이지</title>
-  <link rel="shortcut icon" href="/images/pandaicon.png" type="image/x-icon">
-  <link rel="stylesheet" href="/common/reset.css">
-  <link rel="stylesheet" href="/common/variables.css">
-  <link rel="stylesheet" href="/common/common.css" >
-  <link rel="stylesheet" href="/signup/style.css" >
-  <link rel="stylesheet" href="/login/style.css" >
-  
-  
-</head>
-<body>
-  
-  <div class="content">
-    <div class="title">
-      <img class="logo" src="/images/pandaicon.png" alt="판다마켓로고">
-      <a href="/"><h1>판다마켓</h1></a> 
-    </div>
-    <form>
-      <div class="email">
-        <label for="email">이메일</label>
-        <input class="email-input" name="email" type="email" placeholder="이메일을 입력해 주세요.">
-      </div>
-      <div class="nickname">
-        <label for="name">닉네임</label>
-        <input class="nickname-input" name="name" type="text" placeholder="닉네임을 입력해 주세요.">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>회원가입 페이지</title>
+    <link
+      rel="shortcut icon"
+      href="/images/pandaicon.png"
+      type="image/x-icon"
+    />
+    <link rel="stylesheet" href="/common/reset.css" />
+    <link rel="stylesheet" href="/common/variables.css" />
+    <link rel="stylesheet" href="/common/common.css" />
+    <link rel="stylesheet" href="/login/style.css" />
+    <link rel="stylesheet" href="/signup/style.css" />
+  </head>
+  <body>
+    <div class="content">
+      <div class="title">
+        <img class="logo" src="/images/pandaicon.png" alt="판다마켓로고" />
+        <a href="/"><h1>판다마켓</h1></a>
       </div>
-      <div class="pwd">
-        <label for="password">비밀번호</label>
-        <div class="pwd-content">
-          <input class="pwd-input" name="password" type="password" placeholder="비밀번호를 입력해 주세요.">
-          <img class="eye" src="/images/btn_visibility_off.png">
+      <form id="signupForm">
+        <div class="email">
+          <label for="email">이메일</label>
+          <input
+            id="email"
+            class="email-input"
+            name="email"
+            type="email"
+            placeholder="이메일을 입력해 주세요."
+          />
+          <div id="email-error" class="error-message"></div>
         </div>
-      </div>
-      <div class="pwd">
-        <label for="password">비밀번호 확인</label>
-        <div class="pwd-content">
-          <input class="pwd-input" name="confirmPassword" type="password" placeholder="비밀번호를 다시 한 번 입력해 주세요.">
-          <img class="eye" src="/images/btn_visibility_on.png">
+        <div class="nickname">
+          <label for="name">닉네임</label>
+          <input
+            id="nickname"
+            class="nickname-input"
+            name="name"
+            type="text"
+            placeholder="닉네임을 입력해 주세요."
+          />
+          <div id="nickname-error" class="error-message"></div>
+        </div>
+        <div class="pwd">
+          <label for="password">비밀번호</label>
+          <div class="pwd-content">
+            <input
+              id="password"
+              class="pwd-input"
+              name="password"
+              type="password"
+              placeholder="비밀번호를 입력해 주세요."
+            />
+            <img
+              class="eye"
+              id="eye-password"
+              src="/images/btn_visibility_off.png"
+            />
+          </div>
+          <div id="password-error" class="error-message"></div>
+        </div>
+        <div class="pwd-confirm">
+          <label for="password">비밀번호 확인</label>
+          <div class="pwd-content">
+            <input
+              id="confirmPassword"
+              class="pwd-input"
+              name="confirmPassword"
+              type="password"
+              placeholder="비밀번호를 다시 한 번 입력해 주세요."
+            />
+            <img
+              class="eye"
+              id="eye-confirm"
+              src="/images/btn_visibility_off.png"
+            />
+          </div>
+          <div id="confirmPassword-error" class="error-message"></div>
+        </div>
+        <button class="signup-btn" type="submit" disabled>회원가입</button>
+      </form>
+      <div class="section">
+        <div class="simple-login">
+          <h3>간편 로그인 하기</h3>
+        </div>
+        <div class="sns">
+          <a href="https://www.google.com/"
+            ><img src="/images/google.png" alt="google"
+          /></a>
+          <a href="https://www.kakaocorp.com/page/"
+            ><img src="/images/kakao.png" alt="kakao"
+          /></a>
         </div>
       </div>
-      <button class="login-btn" type="submit">회원가입</button>
-    </form>
-    <div class="section">
-      <div class="simple-login">
-        <h3>간편 로그인 하기</h3>
-      </div>
-      <div class="sns">
-        <a href="https://www.google.com/"><img src="/images/google.png" alt="google"></a>
-        <a href="https://www.kakaocorp.com/page/"><img src="/images/kakao.png" alt="kakao"></a>
-      </div>
-    </div>
-    <div class="sign-up-message">
-      <div class="message">
-        이미 회원이신가요? <a href="/login/">로그인</a>
+      <div class="sign-up-message">
+        <div class="message">
+          이미 회원이신가요? <a href="/login/">로그인</a>
+        </div>
       </div>
     </div>
-
-  </div>
-</body>
-</html>
\ No newline at end of file
+    <script type="module" src="/signup/index.js"></script>
+  </body>
+</html>
diff --git a/signup/index.js b/signup/index.js
new file mode 100644
index 00000000..9bbc62ab
--- /dev/null
+++ b/signup/index.js
@@ -0,0 +1,121 @@
+import {
+  validateEmailInput,
+  validatePasswordInput,
+  preventPasswordSpaces,
+  updateButtonState,
+  validateNicknameInput,
+  validateConfirmPasswordInput,
+  togglePasswordVisiblity,
+} from "../shared/form-utils.js";
+
+const emailInput = document.getElementById("email");
+const emailError = document.getElementById("email-error");
+
+const passwordInput = document.getElementById("password");
+const passwordError = document.getElementById("password-error");
+
+const nicknameInput = document.getElementById("nickname");
+const nicknameError = document.getElementById("nickname-error");
+
+const confirmPasswordInput = document.getElementById("confirmPassword");
+const confirmPasswordError = document.getElementById("confirmPassword-error");
+
+const signupBtn = document.querySelector(".signup-btn");
+const signupForm = document.getElementById("signupForm");
+
+const eyePassword = document.getElementById("eye-password");
+const eyeConfirm = document.getElementById("eye-confirm");
+
+function validateEmail() {
+  return validateEmailInput(emailInput, emailError);
+}
+
+function validateNickname() {
+  return validateNicknameInput(nicknameInput, nicknameError);
+}
+
+function validatePassword() {
+  return validatePasswordInput(passwordInput, passwordError);
+}
+
+function eyePasswordHandler() {
+  togglePasswordVisiblity(passwordInput, eyePassword);
+}
+
+function eyeConfirmClickHandler() {
+  togglePasswordVisiblity(confirmPasswordInput, eyeConfirm);
+}
+
+function validateConfirmPassword() {
+  return validateConfirmPasswordInput(
+    passwordInput,
+    confirmPasswordInput,
+    confirmPasswordError
+  );
+}
+
+function updateSignupBtnState() {
+  return updateButtonState({
+    inputs: [emailInput, passwordInput, nicknameInput, confirmPasswordInput],
+    errors: [emailError, passwordError, nicknameError, confirmPasswordError],
+    button: signupBtn,
+  });
+}
+
+emailInput.addEventListener("blur", () => {
+  validateEmail();
+  updateSignupBtnState();
+});
+
+nicknameInput.addEventListener("blur", () => {
+  validateNickname();
+  updateSignupBtnState();
+});
+
+passwordInput.addEventListener("blur", () => {
+  validatePassword();
+  updateSignupBtnState();
+});
+
+confirmPasswordInput.addEventListener("blur", () => {
+  validateConfirmPassword();
+  updateSignupBtnState();
+});
+
+emailInput.addEventListener("input", () => {
+  validateEmail();
+  updateSignupBtnState();
+});
+
+nicknameInput.addEventListener("input", () => {
+  validateNickname();
+  updateSignupBtnState();
+});
+
+passwordInput.addEventListener("input", () => {
+  validatePassword();
+  updateSignupBtnState();
+});
+
+confirmPasswordInput.addEventListener("input", () => {
+  validateConfirmPassword();
+  updateSignupBtnState();
+});
+
+eyePassword.addEventListener("click", () => {
+  eyePasswordHandler();
+});
+
+eyeConfirm.addEventListener("click", () => {
+  eyeConfirmClickHandler();
+});
+
+signupForm.addEventListener("submit", (e) => {
+  e.preventDefault();
+  if (!signupBtn.disabled) {
+    window.location.href = "/login";
+  }
+});
+
+preventPasswordSpaces(passwordInput);
+updateSignupBtnState();
diff --git a/signup/style.css b/signup/style.css
index 58e64729..fc3f2c6e 100644
--- a/signup/style.css
+++ b/signup/style.css
@@ -1,26 +1,41 @@
-.email {
-  display: flex;
-  flex-direction: column; 
+.nickname {
+  margin-bottom: var(--font-size-24);
 }
 
-.pwd-content {
-  position: relative; 
+.pwd {
+  margin-bottom: var(--font-size-24);
+}
+
+.input-error {
+  border: 2px solid var(--red);
+}
+
+.error-message {
+  display: none;
+  color: var(--red);
+  font-size: var(--font-size-14);
+  font-weight: 600;
+  margin-top: 0.5rem;
+}
+
+.signup-btn {
   width: 100%;
-  margin-top: 16px;
-  margin-bottom: 24px;
+  border-radius: 40px;
+  height: 3.5rem;
+  font-size: var(--font-size-20);
+  margin-top: var(--font-size-24);
 }
 
 @media (min-width: 768px) and (max-width: 1199px) {
   .content {
-    margin: 48px auto; 
-    height: auto;  
+    margin: 48px auto;
+    height: auto;
   }
-
 }
 
 @media (max-width: 767px) {
   .content {
-    margin: 24px auto;  
+    margin: 24px auto;
     height: auto;
   }
 }
diff --git a/style.css b/style.css
index 98e17d0a..8a1d8780 100644
--- a/style.css
+++ b/style.css
@@ -23,7 +23,6 @@
   text-decoration: none;
 }
 
-
 .sidebar {
   width: 100%;
   height: 51px;
@@ -48,7 +47,6 @@
   font-weight: 700;
   line-height: 140%;
   color: var(--gray700);
-  
 }
 
 .content {
@@ -56,7 +54,7 @@
   height: 444px;
   margin: 138px auto;
   padding: 0 23.5px;
-  background-color: #FCFCFC;
+  background-color: #fcfcfc;
   border-radius: 12px;
   display: flex;
   gap: 3rem;
@@ -77,7 +75,7 @@
   margin-bottom: 12px;
 }
 
-.content .content-title { 
+.content .content-title {
   font-size: var(--clamp-40);
   font-weight: 700;
   line-height: 140%;
@@ -123,8 +121,8 @@
   align-items: center;
   width: 100%;
   height: 20px;
-  margin: 0 auto; 
-  padding: 0 400px;   
+  margin: 0 auto;
+  padding: 0 400px;
   gap: 30px;
 }
 
@@ -133,7 +131,6 @@
   color: var(--gray400);
 }
 
-
 .footer .middle {
   color: var(--gray200);
   display: flex;
@@ -143,7 +140,7 @@
 
 .footer .sns {
   display: flex;
-  gap: 12px; 
+  gap: 12px;
 }
 
 .sns a {
@@ -151,14 +148,14 @@
   align-items: center;
 }
 
-/* 최대 1199px 태블릿.ver  */ 
+/* 최대 1199px 태블릿.ver  */
 
 @media (min-width: 768px) and (max-width: 1199px) {
-  .header-all { 
+  .header-all {
     padding-top: 84px;
   }
 
-  .header-title { 
+  .header-title {
     font-size: var(--font-size-40);
   }
 
@@ -168,8 +165,8 @@
   }
 
   .content-title {
-      font-size: var(--font-size-32) !important;
-  } 
+    font-size: var(--font-size-32) !important;
+  }
 
   .content-description {
     font-size: var(--font-size-18) !important;
@@ -180,10 +177,10 @@
   }
 
   .bottom-all {
-    padding-top: 201px; 
+    padding-top: 201px;
   }
 
-  .bottom-title { 
+  .bottom-title {
     font-size: var(--font-size-40);
   }
 
@@ -192,7 +189,7 @@
   }
 
   .footer p {
-    order: 1;   
+    order: 1;
   }
 
   .footer .middle {
@@ -202,78 +199,79 @@
   .footer .sns {
     order: 3;
   }
-  
 }
 
-/* 최대 767px 모바일.ver  */ 
+/* 최대 767px 모바일.ver  */
 @media (max-width: 767px) {
-    .logo {
-      display: none;
-    }
-
-    .header-all {
-      padding-top: 48px;
-    }
-
-    .header-title { 
-      font-size: var(--font-size-32); 
-    }
-
-    .tablet-hide-br {
-      display: block;
-    }
-
-    #img-header-top{ 
-      height: 204px;
-    }
-
-    .header-btn {
-      width: 240px;
-    }
-
-    .content-header {
-      font-size: var(--font-size-16) !important;
-    }
-
-    .content-title {
-      font-size: var(--font-size-24) !important;
-    }
-
-    .hide-br {
-      display: none;
-    }
-
-    .bottom-banner {
-      height: 540px;
-    }
-  
-    .bottom-all {
-      padding-top: 121px; 
-    }
-
-    .bottom-title {
-      font-size: var(--font-size-32);
-    }
-
-    #img-header-bottom {
-      height: 198px;
-    }
-
-    .footer .middle {
-      order: 1;
-    }
-
-    .footer .sns {
-      order: 2;
-    }
-
-    .footer p {
-      order: 3;  
-      width: 100%;
-    }
-}
+  .logo {
+    display: none;
+  }
+
+  .header-all {
+    padding-top: 48px;
+  }
 
+  .header-title {
+    font-size: var(--font-size-32);
+  }
+
+  .tablet-hide-br {
+    display: block;
+  }
 
+  #img-header-top {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .header-btn {
+    width: 240px;
+  }
+
+  .content-header {
+    font-size: var(--font-size-16) !important;
+  }
+
+  .content-title {
+    font-size: var(--font-size-24) !important;
+  }
+
+  .hide-br {
+    display: none;
+  }
+
+  .bottom-banner {
+    height: 540px;
+  }
+
+  .bottom-all {
+    max-width: 375px;
+    width: 100%;
+    padding-top: 121px;
+  }
+
+  .bottom-title {
+    font-size: var(--font-size-32);
+  }
+
+  #img-header-bottom {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .footer .middle {
+    order: 1;
+  }
+
+  .footer .sns {
+    order: 2;
+  }
+
+  .footer p {
+    order: 3;
+    width: 100%;
+  }
+}
 
 @media (max-width: 1199px) {
   .title {
@@ -285,7 +283,7 @@
     text-align: center;
     align-items: center;
     justify-content: space-between;
-    width: 100%; 
+    width: 100%;
     height: 100%;
   }
 
@@ -295,16 +293,15 @@
     font-weight: 700;
   }
 
-
   .content {
-      width: 100%;
-      display: flex;
-      height: auto;
-      flex-direction: column; 
-      padding: 0; 
-      margin: auto;
-      margin-bottom: 40px;
-      gap: 2rem;
+    width: 100%;
+    display: flex;
+    height: auto;
+    flex-direction: column;
+    padding: 0;
+    margin: auto;
+    margin-bottom: 40px;
+    gap: 2rem;
   }
 
   .content .img {
@@ -316,9 +313,9 @@
     order: 2;
   }
 
-  .content> .img {
+  .content > .img {
     order: 1;
-  } 
+  }
 
   .bottom-all {
     flex-direction: column;
@@ -326,13 +323,12 @@
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    height: 100%;  
+    height: 100%;
     padding-right: 0;
     padding-left: 0;
     margin: 0;
   }
 
-  
   .bottom-content {
     margin-bottom: 131px;
   }