diff --git a/css/auth.css b/css/auth.css
new file mode 100644
index 00000000..a9ac2b58
--- /dev/null
+++ b/css/auth.css
@@ -0,0 +1,130 @@
+/* login과 signup 페이지의 공통 CSS 분리 */
+
+body {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+}
+
+#wrapper {
+  width: 100%;
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.logo {
+  display: block;
+  width: 396px;
+  margin: 0 auto;
+  margin-bottom: 40px;
+}
+
+.logo img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.email_label,
+.password_label {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-family: "Pretendard", sans-serif;
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: #1f2937;
+  margin-bottom: 15px;
+}
+
+.email_input,
+.password_input {
+  width: 100%;
+  height: 56px;
+  font-family: "Pretendard", sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  color: #1f2937;
+  background-color: #f3f4f6;
+  border: none;
+  border-radius: 12px;
+  padding: 0 25px;
+}
+
+.email_error,
+.password_error {
+  font-family: "Pretendard", sans-serif;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #f74747;
+  padding-left: 20px;
+  margin-top: 15px;
+  display: none;
+}
+
+.eye_wrapper {
+  position: relative;
+}
+
+.eye_icon {
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 15.5px;
+  right: 25px;
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.eye_icon_img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+.simple_login {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 74px;
+  padding: 0 23px;
+  margin: 24px 0;
+  font-family: "Pretendard", sans-serif;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #1f2937;
+  background-color: #e6f2ff;
+  border-radius: 8px;
+}
+
+.login_sns {
+  display: flex;
+  gap: 15px;
+}
+
+.login_google,
+.login_kakao {
+  width: 42px;
+  height: 42px;
+}
+
+.login_google img,
+.login_kakao img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* 모바일용 CSS */
+
+@media (min-width: 375px) and (max-width: 767px) {
+  #wrapper {
+    max-width: 400px;
+    padding: 0 16px;
+  }
+
+  .logo {
+    width: 198px;
+  }
+}
diff --git a/css/login.css b/css/login.css
index ed557a6b..d478d0f6 100644
--- a/css/login.css
+++ b/css/login.css
@@ -1,157 +1,45 @@
-/* 공통 CSS */
-
-body {
-    display: flex;
-    justify-content: center;
-    margin-top: 50px;
-}
-
-#wrapper {
-    width: 100%;
-    max-width: 640px;
-    margin: 0 auto;
-}
-
-.logo {
-    display: block;
-    width: 396px;
-    margin: 0 auto;
-    margin-bottom: 40px;
-}
-
-.logo img {
-    display: block;
-    max-width: 100%;
-    height: auto;
-}
-
 .login_formbox {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-.email_label, .password_label {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    font-family: 'Pretendard', sans-serif;
-    font-size: 1.125rem;
-    font-weight: 700;
-    color: #1F2937;
-    margin-bottom: 15px;
-}
-
-.email_input, .password_input {
-    width: 100%;
-    height: 56px;
-    font-family: 'Pretendard', sans-serif;
-    font-size: 1rem;
-    font-weight: 400;
-    color: #1F2937;
-    background-color: #F3F4F6;
-    border: none;
-    border-radius: 12px;
-    padding: 0 25px;
-    margin-bottom: 25px;
-}
-
-.eye_wrapper {
-    position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 }
 
-.eye_icon {
-    width: 24px;
-    height: 24px;
-    position: absolute;
-    top: 15.5px;
-    right: 25px;
-    border: 0;
-    background-color: transparent;
-    cursor: pointer;
-}
-
-.eye_icon_img {
-    max-width: 100%;
-    height: auto;
-    display: block;
+.password_label {
+  margin-top: 25px;
 }
 
 .login_btn {
-    height: 56px;
-    font-family: 'Pretendard', sans-serif;
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: #F3F4F6;
-    background-color: #9CA3AF;
-    border: 0px;
-    border-radius: 40px;
-    cursor: pointer;
-}
-
-.login_btn:hover {
-    background-color: #1967D6;
-}
-
-.simple_login {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 74px;
-    padding: 0 23px;
-    margin: 24px 0;
-    font-family: 'Pretendard', sans-serif;
-    font-size: 1rem;
-    font-weight: 500;
-    color: #1F2937;
-    background-color: #E6F2FF;
-    border-radius: 8px;
-}
-
-.login_sns {
-    display: flex;
-    gap: 15px;
+  height: 56px;
+  font-family: "Pretendard", sans-serif;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #f3f4f6;
+  background-color: #1967d6;
+  border: 0px;
+  border-radius: 40px;
+  margin-top: 25px;
+  cursor: pointer;
 }
 
-.login_google, .login_kakao {
-    width: 42px;
-    height: 42px;
-}
-
-.login_google img, .login_kakao img {
-    max-width: 100%;
-    height: auto;
-    display: block;
+.login_btn:disabled {
+  background-color: #9ca3af;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
 .sign_up {
-    display: flex;
-    justify-content: center;
-    gap: 5px;
-    font-family: 'Pretendard', sans-serif;
-    font-size: 0.875rem;
-    font-weight: 500;
+  display: flex;
+  justify-content: center;
+  gap: 5px;
+  font-family: "Pretendard", sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
 }
 
 .sign_up p {
-    color: #1F2937;
+  color: #1f2937;
 }
 
 .sign_up a {
-    color: #3692FF;
+  color: #3692ff;
 }
-
-/* 모바일용 CSS */
-
-@media (min-width: 375px) and (max-width: 767px) {
-   #wrapper {
-        max-width: 400px;
-        padding: 0 16px;
-   }
-
-   .logo {
-        width: 198px;
-    }
-}
-
-
diff --git a/css/signup.css b/css/signup.css
index 9e030928..d0944b58 100644
--- a/css/signup.css
+++ b/css/signup.css
@@ -1,167 +1,101 @@
-/* 공통 CSS */
-
-body {
-    display: flex;
-    justify-content: center;
-    margin-top: 50px;
-}
-
-#wrapper {
-    width: 100%;
-    max-width: 640px;
-    margin: 0 auto;
-}
-
-.logo {
-    display: block;
-    width: 396px;
-    margin: 0 auto;
-    margin-bottom: 40px;
-}
-
-.logo img {
-    display: block;
-    max-width: 100%;
-    height: auto;
-}
-
 .signup_formbox {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 }
 
-.email_label, .nickname_label, .password_label,.password_re_label {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    font-family: 'Pretendard', sans-serif;
-    font-size: 1.125rem;
-    font-weight: 700;
-    color: #1F2937;
-    margin-bottom: 15px;
+.nickname_label,
+.password_re_label {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-family: "Pretendard", sans-serif;
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: #1f2937;
+  margin-bottom: 15px;
 }
 
-.password_label, .password_re_label {
-    position: relative;
+.nickname_label,
+.password_label,
+.password_re_label {
+  margin-top: 22px;
 }
 
-.email_input, .nickname_input, .password_input, .password_re_input {
-    width: 100%;
-    height: 56px;
-    font-family: 'Pretendard', sans-serif;
-    font-size: 1rem;
-    font-weight: 400;
-    color: #1F2937;
-    background-color: #F3F4F6;
-    border: none;
-    border-radius: 12px;
-    padding: 0 25px;
-    margin-bottom: 22px;
+.password_label,
+.password_re_label {
+  position: relative;
 }
 
-.password_btn img, .password_re_btn img {
-    max-width: 100%;
-    height: auto;
-    display: block;
-    cursor: pointer;
+.nickname_input,
+.password_re_input {
+  width: 100%;
+  height: 56px;
+  font-family: "Pretendard", sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  color: #1f2937;
+  background-color: #f3f4f6;
+  border: none;
+  border-radius: 12px;
+  padding: 0 25px;
 }
 
-.eye_wrapper, .eye_wrapper_re {
-    position: relative;
+.password_btn img,
+.password_re_btn img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  cursor: pointer;
 }
 
-.eye_icon {
-    width: 24px;
-    height: 24px;
-    position: absolute;
-    top: 15.5px;
-    right: 25px;
-    border: 0;
-    background-color: transparent;
-    cursor: pointer;
+.nickname_error,
+.password_re_error {
+  font-family: "Pretendard", sans-serif;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #f74747;
+  padding-left: 20px;
+  margin-top: 15px;
+  display: none;
 }
 
-.eye_icon_img {
-    max-width: 100%;
-    height: auto;
-    display: block;
+.eye_wrapper_re {
+  position: relative;
 }
 
 .signup_btn {
-    height: 56px;
-    font-family: 'Pretendard', sans-serif;
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: #F3F4F6;
-    background-color: #9CA3AF;
-    border: 0px;
-    border-radius: 40px;
-    cursor: pointer;
-}
-
-.signup_btn:hover {
-    background-color: #1967D6;
-}
-
-.simple_login {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 74px;
-    padding: 0 23px;
-    margin: 24px 0;
-    font-family: 'Pretendard', sans-serif;
-    font-size: 1rem;
-    font-weight: 500;
-    color: #1F2937;
-    background-color: #E6F2FF;
-    border-radius: 8px;
-}
-
-.login_sns {
-    display: flex;
-    gap: 15px;
+  height: 56px;
+  font-family: "Pretendard", sans-serif;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #f3f4f6;
+  background-color: #1967d6;
+  border: 0px;
+  border-radius: 40px;
+  margin-top: 22px;
+  cursor: pointer;
 }
 
-.login_google, .login_kakao {
-    width: 42px;
-    height: 42px;
-}
-
-.login_google img, .login_kakao img {
-    max-width: 100%;
-    height: auto;
-    display: block;
+.signup_btn:disabled {
+  background-color: #9ca3af;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
 .login {
-    display: flex;
-    justify-content: center;
-    gap: 5px;
-    font-family: 'Pretendard', sans-serif;
-    font-size: 0.875rem;
-    font-weight: 500;
+  display: flex;
+  justify-content: center;
+  gap: 5px;
+  font-family: "Pretendard", sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
 }
 
 .login p {
-    color: #1F2937;
+  color: #1f2937;
 }
 
 .login a {
-    color: #3692FF;
+  color: #3692ff;
 }
-
-/* 모바일용 CSS */
-
-@media (min-width: 375px) and (max-width: 767px) {
-    #wrapper {
-         max-width: 400px;
-         padding: 0 16px;
-    }
- 
-    .logo {
-         width: 198px;
-     }
- }
-
diff --git a/image/.DS_Store b/image/.DS_Store
deleted file mode 100644
index fae7aa1c..00000000
Binary files a/image/.DS_Store and /dev/null differ
diff --git a/js/eye-icon.js b/js/eye-icon.js
index 1a300027..4d2c422a 100644
--- a/js/eye-icon.js
+++ b/js/eye-icon.js
@@ -2,12 +2,13 @@ const eyeButtons = document.querySelectorAll('.eye_icon');
 
 eyeButtons.forEach(button => {
   button.addEventListener('click', () => {
-    const wrapper = button.closest('.eye_wrapper, .eye_wrapper_re');
-    const input = wrapper.querySelectorAll('.password_input');
-    const img = button.querySelectorAll('.eye_icon_img');
+    const inputSelector = button.dataset.target;
+    const input = document.querySelector(inputSelector);
+    const img = button.querySelector('.eye_icon_img');
 
     const isHidden = input.type === 'password';
     input.type = isHidden ? 'text' : 'password';
     img.src = isHidden ? './image/password_on.png' : './image/password_off.png';
   });
 });
+
diff --git a/js/input-error.js b/js/input-error.js
new file mode 100644
index 00000000..f25f54e2
--- /dev/null
+++ b/js/input-error.js
@@ -0,0 +1,142 @@
+const emailInput = document.querySelector(".email_input");
+const emailError = document.querySelector(".email_error");
+
+const passwordInput = document.querySelector(".password_input");
+const passwordError = document.querySelector(".password_error");
+
+const passwordReInput = document.querySelector(".password_re_input");
+const passwordReError = document.querySelector(".password_re_error");
+
+const nicknameInput = document.querySelector(".nickname_input");
+const nicknameError = document.querySelector(".nickname_error");
+
+const loginBtn = document.querySelector(".login_btn");
+const signupBtn = document.querySelector(".signup_btn");
+
+function checkEmailForm(email) {
+  const atIndex = email.indexOf("@");
+  const dotIndex = email.lastIndexOf(".");
+  return atIndex > 0 && dotIndex > atIndex + 1 && dotIndex < email.length - 1;
+}
+
+function setInputBorder(input, hasError) {
+  if (!input) return;
+  if (hasError) {
+    input.style.border = "1px solid #F74747";
+  } else {
+    input.style.border = "";
+  }
+}
+
+function checkButtonState() {
+  const checkEmailState =
+    emailInput.value.trim() !== "" && checkEmailForm(emailInput.value);
+  const checkPasswordState = passwordInput.value.length >= 8;
+
+  let checkAllForm = checkEmailState && checkPasswordState;
+
+  if (passwordReInput && nicknameInput) {
+    const checkPasswordMatch = passwordInput.value === passwordReInput.value;
+    const checkNicknameState = nicknameInput.value.trim() !== "";
+    checkAllForm = checkAllForm && checkPasswordMatch && checkNicknameState;
+  }
+
+  if (loginBtn) {
+    if (checkEmailState && checkPasswordState) {
+      loginBtn.removeAttribute("disabled");
+    } else {
+      loginBtn.setAttribute("disabled", "");
+    }
+  }
+
+  if (signupBtn) {
+    if (checkAllForm) {
+      signupBtn.removeAttribute("disabled");
+    } else {
+      signupBtn.setAttribute("disabled", "");
+    }
+  }
+}
+
+emailInput?.addEventListener("focusout", () => {
+  if (emailInput.value.trim() === "") {
+    emailError.textContent = "이메일을 입력해주세요.";
+    emailError.style.display = "block";
+    setInputBorder(emailInput, true);
+  } else if (!checkEmailForm(emailInput.value)) {
+    emailError.textContent = "잘못된 이메일 형식입니다.";
+    emailError.style.display = "block";
+    setInputBorder(emailInput, true);
+  } else {
+    emailError.style.display = "none";
+    setInputBorder(emailInput, false);
+  }
+  checkButtonState();
+});
+
+passwordInput?.addEventListener("focusout", () => {
+  if (passwordInput.value.trim() === "") {
+    passwordError.textContent = "비밀번호를 입력해주세요.";
+    passwordError.style.display = "block";
+    setInputBorder(passwordInput, true);
+  } else if (passwordInput.value.length < 8) {
+    passwordError.textContent = "비밀번호를 8자 이상 입력해주세요.";
+    passwordError.style.display = "block";
+    setInputBorder(passwordInput, true);
+  } else {
+    passwordError.style.display = "none";
+    setInputBorder(passwordInput, false);
+  }
+  checkButtonState();
+});
+
+passwordReInput?.addEventListener("focusout", () => {
+  if (passwordReInput.value.trim() === "") {
+    passwordReError.textContent = "비밀번호를 입력해주세요.";
+    passwordReError.style.display = "block";
+    setInputBorder(passwordReInput, true);
+  } else if (passwordReInput.value !== passwordInput.value) {
+    passwordReError.textContent = "비밀번호가 일치하지 않습니다.";
+    passwordReError.style.display = "block";
+    setInputBorder(passwordReInput, true);
+  } else {
+    passwordReError.style.display = "none";
+    setInputBorder(passwordReInput, false);
+  }
+  checkButtonState();
+});
+
+nicknameInput?.addEventListener("focusout", () => {
+  if (nicknameInput.value.trim() === "") {
+    nicknameError.textContent = "닉네임을 입력해주세요.";
+    nicknameError.style.display = "block";
+    setInputBorder(nicknameInput, true);
+  } else {
+    nicknameError.style.display = "none";
+    setInputBorder(nicknameInput, false);
+  }
+  checkButtonState();
+});
+
+emailInput?.addEventListener("input", checkButtonState);
+passwordInput?.addEventListener("input", checkButtonState);
+passwordReInput?.addEventListener("input", checkButtonState);
+nicknameInput?.addEventListener("input", checkButtonState);
+
+loginBtn?.addEventListener("click", (e) => {
+  if (loginBtn.disabled) {
+    e.preventDefault();
+    return;
+  }
+  e.preventDefault();
+  window.location.href = "/items";
+});
+
+signupBtn?.addEventListener("click", (e) => {
+  if (signupBtn.disabled) {
+    e.preventDefault();
+    return;
+  }
+  e.preventDefault();
+  window.location.href = "/login";
+});
diff --git a/login.html b/login.html
index de064207..741d3ab9 100644
--- a/login.html
+++ b/login.html
@@ -1,46 +1,77 @@
 <!DOCTYPE html>
 <html lang="ko">
-    <head>
-        <meta charset="utf-8">
-        <title>판다마켓 - 로그인</title>
-        <link rel="icon" href="./image/panda_favicon.png" type="image/png">
-        <link rel="stylesheet" href="./css/reset.css">
-        <link rel="stylesheet" href="./css/font.css">
-        <link rel="stylesheet" href="./css/login.css">
-    </head>
-    <body>
-        <div id="wrapper">
-            <a href="/" class="logo">
-                <img src="./image/panda_logo.png" alt="판다마켓 로고">
-            </a>
-            <form class="login_formbox">
-                <label class="email_label" for="email_input">이메일</label>
-                <input class="email_input" name="email" type="email" placeholder="이메일을 입력해주세요">
-                <label class="password_label" for="password_input">비밀번호</label>
-                <div class="eye_wrapper">
-                    <input class="password_input" name="password" type="password" placeholder="비밀번호를 입력해주세요">
-                    <button class="eye_icon" type="button" aria-label="비밀번호 보기 토글">
-                        <img class="eye_icon_img" src="./image/password_off.png" alt="비밀번호 보기">
-                    </button>
-                </div>
-                <button type="submit" class="login_btn">로그인</button>
-            </form>
-            <div class="simple_login">
-                <p>간편 로그인하기</p>
-                <div class="login_sns">
-                    <a href="https://www.google.com/" class="login_google" target="_blank">
-                        <img src="./image/google_icon.png" alt="구글 로그인 버튼">
-                    </a>
-                    <a href="https://www.kakaocorp.com/page/" class="login_kakao" target="_blank">
-                        <img src="./image/kakao_icon.png" alt="카카오 로그인 버튼">
-                    </a>
-                </div>
-            </div>
-            <div class="sign_up">
-                <p>판다마켓이 처음이신가요?</p>
-                <a href="/signup.html">회원가입</a>
-            </div>
+  <head>
+    <meta charset="utf-8" />
+    <title>판다마켓 - 로그인</title>
+    <link rel="icon" href="./image/panda_favicon.png" type="image/png" />
+    <link rel="stylesheet" href="./css/reset.css" />
+    <link rel="stylesheet" href="./css/font.css" />
+    <link rel="stylesheet" href="./css/auth.css" />
+    <link rel="stylesheet" href="./css/login.css" />
+  </head>
+  <body>
+    <div id="wrapper">
+      <a href="/" class="logo">
+        <img src="./image/panda_logo.png" alt="판다마켓 로고" />
+      </a>
+      <form class="login_formbox">
+        <label class="email_label" for="email_input">이메일</label>
+        <input
+          class="email_input"
+          name="email"
+          type="email"
+          placeholder="이메일을 입력해주세요"
+        />
+        <div class="email_error"></div>
+        <label class="password_label" for="password_input">비밀번호</label>
+        <div class="eye_wrapper">
+          <input
+            class="password_input"
+            name="password"
+            type="password"
+            placeholder="비밀번호를 입력해주세요"
+          />
+          <button
+            class="eye_icon"
+            type="button"
+            data-target=".password_input"
+            aria-label="비밀번호 보기 토글"
+          >
+            <img
+              class="eye_icon_img"
+              src="./image/password_off.png"
+              alt="비밀번호 보기"
+            />
+          </button>
         </div>
-        <script src="./js/eye-icon.js"></script>
-    </body>
-</html>
\ No newline at end of file
+        <div class="password_error"></div>
+        <button type="submit" class="login_btn" disabled>로그인</button>
+      </form>
+      <div class="simple_login">
+        <p>간편 로그인하기</p>
+        <div class="login_sns">
+          <a
+            href="https://www.google.com/"
+            class="login_google"
+            target="_blank"
+          >
+            <img src="./image/google_icon.png" alt="구글 로그인 버튼" />
+          </a>
+          <a
+            href="https://www.kakaocorp.com/page/"
+            class="login_kakao"
+            target="_blank"
+          >
+            <img src="./image/kakao_icon.png" alt="카카오 로그인 버튼" />
+          </a>
+        </div>
+      </div>
+      <div class="sign_up">
+        <p>판다마켓이 처음이신가요?</p>
+        <a href="/signup.html">회원가입</a>
+      </div>
+    </div>
+    <script src="./js/eye-icon.js"></script>
+    <script src="./js/input-error.js"></script>
+  </body>
+</html>
diff --git a/signup.html b/signup.html
index 8bac924c..9801f8b6 100644
--- a/signup.html
+++ b/signup.html
@@ -1,55 +1,109 @@
 <!DOCTYPE html>
 <html lang="ko">
-    <head>
-        <meta charset="utf-8">
-        <title>판다마켓 - 회원가입</title>
-        <link rel="icon" href="./image/panda_favicon.png" type="image/png">
-        <link rel="stylesheet" href="./css/reset.css">
-        <link rel="stylesheet" href="./css/font.css">
-        <link rel="stylesheet" href="./css/signup.css">
-    </head>
-    <body>
-        <div id="wrapper">
-            <a href="/" class="logo">
-                <img src="./image/panda_logo.png" alt="판다마켓 로고">
-            </a>
-            <form class="signup_formbox">
-                <label class="email_label" for="email_input">이메일</label>
-                <input class="email_input" name="email" type="email" placeholder="이메일을 입력해주세요">
-                <label class="nickname_label" for="nickname_input">닉네임</label>
-                <input class="nickname_input" name="nickname" type="text" placeholder="닉네임을 입력해주세요">
-                <label class="password_label" for="password_input">비밀번호</label>
-                <div class="eye_wrapper">
-                    <input class="password_input" name="password" type="password" placeholder="비밀번호를 입력해주세요">
-                    <button class="eye_icon" type="button" aria-label="비밀번호 보기 토글">
-                        <img class="eye_icon_img" src="./image/password_off.png" alt="비밀번호 보기">
-                    </button>
-                </div>
-                <label class="password_re_label" for="password_re_input">비밀번호 확인</label>
-                <div class="eye_wrapper_re">
-                    <input class="password_input" name="password" type="password" placeholder="비밀번호를 다시 한 번 입력해주세요">
-                    <button class="eye_icon" type="button" aria-label="비밀번호 보기 토글">
-                        <img class="eye_icon_img" src="./image/password_off.png" alt="비밀번호 보기">
-                    </button>
-                </div>
-                <button type="submit" class="signup_btn">회원가입</button>
-            </form>
-            <div class="simple_login">
-                <p>간편 로그인하기</p>
-                <div class="login_sns">
-                    <a href="https://www.google.com/" class="login_google" target="_blank">
-                        <img src="./image/google_icon.png" alt="구글 로그인 버튼">
-                    </a>
-                    <a href="https://www.kakaocorp.com/page/" class="login_kakao" target="_blank">
-                        <img src="./image/kakao_icon.png" alt="카카오 로그인 버튼">
-                    </a>
-                </div>
-            </div>
-            <div class="login">
-                <p>이미 회원이신가요?</p>
-                <a href="/login.html">로그인</a>
-            </div>
+  <head>
+    <meta charset="utf-8" />
+    <title>판다마켓 - 회원가입</title>
+    <link rel="icon" href="./image/panda_favicon.png" type="image/png" />
+    <link rel="stylesheet" href="./css/reset.css" />
+    <link rel="stylesheet" href="./css/font.css" />
+    <link rel="stylesheet" href="./css/auth.css" />
+    <link rel="stylesheet" href="./css/signup.css" />
+  </head>
+  <body>
+    <div id="wrapper">
+      <a href="/" class="logo">
+        <img src="./image/panda_logo.png" alt="판다마켓 로고" />
+      </a>
+      <form class="signup_formbox">
+        <label class="email_label" for="email_input">이메일</label>
+        <input
+          class="email_input"
+          name="email"
+          type="email"
+          placeholder="이메일을 입력해주세요"
+        />
+        <div class="email_error"></div>
+        <label class="nickname_label" for="nickname_input">닉네임</label>
+        <input
+          class="nickname_input"
+          name="nickname"
+          type="text"
+          placeholder="닉네임을 입력해주세요"
+        />
+        <div class="nickname_error"></div>
+        <label class="password_label" for="password_input">비밀번호</label>
+        <div class="eye_wrapper">
+          <input
+            class="password_input"
+            name="password"
+            type="password"
+            placeholder="비밀번호를 입력해주세요"
+          />
+          <button
+            class="eye_icon"
+            type="button"
+            data-target=".password_input"
+            aria-label="비밀번호 보기 토글"
+          >
+            <img
+              class="eye_icon_img"
+              src="./image/password_off.png"
+              alt="비밀번호 보기"
+            />
+          </button>
         </div>
-        <script src="./js/eye-icon.js"></script>
-    </body>
-</html>
\ No newline at end of file
+        <div class="password_error"></div>
+        <label class="password_re_label" for="password_re_input"
+          >비밀번호 확인</label
+        >
+        <div class="eye_wrapper_re">
+          <input
+            class="password_re_input"
+            name="password"
+            type="password"
+            placeholder="비밀번호를 다시 한 번 입력해주세요"
+          />
+          <button
+            class="eye_icon"
+            type="button"
+            data-target=".password_re_input"
+            aria-label="비밀번호 보기 토글"
+          >
+            <img
+              class="eye_icon_img"
+              src="./image/password_off.png"
+              alt="비밀번호 보기"
+            />
+          </button>
+        </div>
+        <div class="password_re_error"></div>
+        <button type="submit" class="signup_btn" disabled>회원가입</button>
+      </form>
+      <div class="simple_login">
+        <p>간편 로그인하기</p>
+        <div class="login_sns">
+          <a
+            href="https://www.google.com/"
+            class="login_google"
+            target="_blank"
+          >
+            <img src="./image/google_icon.png" alt="구글 로그인 버튼" />
+          </a>
+          <a
+            href="https://www.kakaocorp.com/page/"
+            class="login_kakao"
+            target="_blank"
+          >
+            <img src="./image/kakao_icon.png" alt="카카오 로그인 버튼" />
+          </a>
+        </div>
+      </div>
+      <div class="login">
+        <p>이미 회원이신가요?</p>
+        <a href="/login.html">로그인</a>
+      </div>
+    </div>
+    <script src="./js/eye-icon.js"></script>
+    <script src="./js/input-error.js"></script>
+  </body>
+</html>