💫 Sprint Mission 4 Complete

login.html

@@ -19,16 +19,20 @@
           <div class="email">
             <h3>이메일</h3>
             <input type="text" placeholder="이메일을 입력해주세요" />
+            <span id="email-error" class="error-message"></span>
           </div>
           <div class="password">
             <h3>비밀번호</h3>
             <div class="password-input">
               <input type="password" placeholder="비밀번호를 입력해주세요" />
               <img src="image/hidden.png" width="24px" height="24px" alt="" />
             </div>
+            <span id="password-error" class="error-message"></span>
           </div>
         </div>
-        <button>로그인</button>
+        <a>
+          <button id="login-button">로그인</button>
+        </a>
         <div class="easy-login">
           <h2>간편 로그인하기</h2>
           <div class="social-login">
@@ -46,5 +50,6 @@ <h2>간편 로그인하기</h2>
         <a href="/signup.html">회원가입</a>
       </div>
     </div>
+    <script src="login.js"></script>
   </body>
 </html>

login.js

@@ -0,0 +1,56 @@
+const emailInput = document.querySelector('.email input');
+const emailError = document.querySelector('#email-error');
+const loginButton = document.querySelector('#login-button');
+
+const passwordInput = document.querySelector('.password input');
+const passwordError = document.querySelector('#password-error');
+
+function validateEmail() {
+  if (emailInput.value.trim() === '') {
+    emailError.textContent = '이메일을 입력해주세요.';
+    emailError.style.display = 'block';
+    emailInput.style.border = '1px solid red';
+    return false;
+  } else if (!emailInput.value.includes('@')) {
+    emailError.textContent = '잘못된 이메일 형식입니다.';
+    emailError.style.display = 'block';
+    emailInput.style.border = '1px solid red';
+    return false;
+  } else {
+    emailError.textContent = '';
+    emailError.style.display = 'none';
+    emailInput.style.border = 'none';
+    return true;
+  }
+}
+
+function validatePassword() {
+  if (passwordInput.value.trim() === '') {
+    passwordError.textContent = '비밀번호를 입력해주세요.';
+    passwordError.style.display = 'block';
+    return false;
+  } else if (passwordInput.value.length < 8) {
+    passwordError.textContent = '비밀번호를 8자 이상 입력해주세요.';
+    passwordError.style.display = 'block';
+    return false;
+  } else {
+    passwordError.textContent = '';
+    passwordError.style.display = 'none';
+    return true;
+  }
+}
+
+function validateForm() {
+  const isEmailValid = validateEmail();
+  const isPasswordValid = validatePassword();
+  if (isEmailValid && isPasswordValid) {
+    loginButton.parentNode.href = '/items.html';
+  } else {
+    loginButton.removeAttribute('href');
+  }
+}
+
+emailInput.addEventListener('blur', validateEmail);
+passwordInput.addEventListener('blur', validatePassword);
+
+loginButton.addEventListener('click', validateForm);