[김정우] Sprint4

auth.css

@@ -5,11 +5,26 @@
 
 .head-img {
   text-align: center;
-  padding: 20px;
+  padding-bottom: 50px;
+}
+
+.login-link {
+  color: #f3f4f6;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 30px;
 }
 
 .pandaMarketImg {
-  max-width: 396px;
+  max-width: 103.53px;
+  width: 100%;
+  height: auto;
+}
+
+.pandaMarketImg-name {
+  max-width: 266px;
   width: 100%;
   height: auto;
 }
@@ -75,17 +90,16 @@
 }
 
 .login-button {
-  text-decoration: none;
   color: #f3f4f6;
   border: none;
   border-radius: 40px;
   background-color: #3692ff;
-  font-size: 20px;
-  font-weight: 600;
   line-height: 32px;
   width: 100%;
   height: 56px;
   cursor: pointer;
+  font-size: 20px;
+  font-weight: 600;
 }
 
 .blue-section {
@@ -119,6 +133,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 4px;
 }
 
 .advice {
@@ -148,16 +163,68 @@
   padding-left: 20px;
 }
 
-@media (max-width: 767px) and (min-width: 375px) {
+.error {
+  border: 1px solid red;
+}
+
+#error-message {
+  color: red;
+  font-size: 14px;
+  font-weight: 600;
+  display: none;
+  margin-left: 15px;
+}
+
+#error-password {
+  color: red;
+  font-size: 14px;
+  font-weight: 600;
+  display: none;
+  margin-left: 15px;
+}
+
+#error-nicname {
+  color: red;
+  font-size: 14px;
+  font-weight: 600;
+  display: none;
+  margin-left: 15px;
+}
+
+#error-checkPassword {
+  color: red;
+  font-size: 14px;
+  font-weight: 600;
+  display: none;
+  margin-left: 15px;
+}
+
+#signupBtn:disabled {
+  background-color: #9ca3af;
+}
+
+#loginBtn:disabled {
+  background-color: #9ca3af;
+}
+
+@media (max-width: 767px) {
   .content {
     max-width: 400px;
     width: 100%;
     padding: 0 16px;
     margin: 100px auto;
   }
   .pandaMarketImg {
-    max-width: 197px;
+    max-width: 51px;
     height: auto;
     width: 100%;
   }
+  .pandaMarketImg-name {
+    max-width: 133px;
+    height: auto;
+    width: 100%;
+  }
+  .login-link {
+    gap: 10px;
+  }
 }

index.html

@@ -17,10 +17,11 @@
       <div class="container">
         <div class="header-container">
           <a class="login-link" href="/">
-            <img class="title-logo" src="img/logo.png" />
+            <img class="title-logo" src="img/logoHead.png" />
+            <img class="title-logo-name" src="img/logoName.png" />
           </a>
           <div class="login">
-            <a class="login-link" href="login.html">로그인</a>
+            <a class="login-link-see" href="login.html">로그인</a>
           </div>
         </div>
       </div>
@@ -34,7 +35,7 @@ <h2 class="title">
               거래해 보세요
             </h2>
             <div class="button-buy">
-              <a class="login-link" href="/items">구경하러 가기</a>
+              <a class="login-link-see" href="/items">구경하러 가기</a>
             </div>
           </div>
           <img class="panda-pic" src="img/panda1.png" alt="fashionist_panda" />

login.html

@@ -16,7 +16,8 @@
     <div class="content">
       <div class="head-img">
         <a class="login-link" href="/">
-          <img class="pandaMarketImg" src="img/logo.png" />
+          <img class="pandaMarketImg" src="img/logoHead.png" />
+          <img class="pandaMarketImg-name" src="img/logoName.png" />
         </a>
       </div>
       <form action="/login" method="post">
@@ -29,6 +30,7 @@
             class="userName"
             placeholder="이메일을 입력해주세요"
           />
+          <div id="error-message"></div>
           <label for="userPassword" class="userPassword-label">비밀번호</label>
           <input
             type="password"
@@ -37,9 +39,12 @@
             class="userPassword"
             placeholder="비밀번호를 입력해주세요"
           />
+          <div id="error-password"></div>
         </div>
         <div class="content-login">
-          <button type="submit" class="login-button">로그인</button>
+          <button type="submit" class="login-button" id="loginBtn" disabled>
+            로그인
+          </button>
         </div>
       </form>
       <div>
@@ -64,5 +69,6 @@
         <a class="membership" href="signup.html">회원가입</a>
       </div>
     </div>
+    <script src="login.js"></script>
   </body>
 </html>

login.js

@@ -0,0 +1,81 @@
+const emailInput = document.getElementById("userName");
+const passwordInput = document.getElementById("userPassword");
+
+const errorMessage = document.getElementById("error-message");
+const errorPassword = document.getElementById("error-password");
+
+const loginBtn = document.getElementById("loginBtn");
+
+document.addEventListener("DOMContentLoaded", () => {
+  emailInput.addEventListener("input", () => {
+    if (emailInput.value !== "" && emailInput.value.includes("@")) {
+      emailInput.classList.remove("error");
+      errorMessage.textContent = "";
+      errorMessage.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  passwordInput.addEventListener("input", () => {
+    if (passwordInput.value.length >= 8) {
+      passwordInput.classList.remove("error");
+      errorPassword.textContent = "";
+      errorPassword.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  emailInput.addEventListener("focusout", () => {
+    if (emailInput.value === "") {
+      emailInput.classList.add("error");
+      errorMessage.textContent = "잘못된 이메일입니다.";
+      errorMessage.style.display = "block";
+    } else if (!emailInput.value.includes("@")) {
+      emailInput.classList.add("error");
+      errorMessage.textContent = "잘못된 이메일 형식입니다.";
+      errorMessage.style.display = "block";
+    } else {
+      emailInput.classList.remove("error");
+      errorMessage.textContent = "";
+      errorMessage.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  passwordInput.addEventListener("focusout", () => {
+    if (passwordInput.value === "") {
+      passwordInput.classList.add("error");
+      errorPassword.textContent = "비밀번호를 입력해주세요";
+      errorPassword.style.display = "block";
+    } else if (passwordInput.value.length < 8) {
+      passwordInput.classList.add("error");
+      errorPassword.textContent = "비밀번호를 8자 이상 입력해주세요.";
+      errorPassword.style.display = "block";
+    } else {
+      passwordInput.classList.remove("error");
+      errorPassword.textContent = "";
+      errorPassword.style.display = "none";
+    }
+    updateButtonState();
+  });
+
+  loginBtn.addEventListener("click", function (e) {
+    e.preventDefault();
+    if (!loginBtn.disabled) {
+      window.location.href = "/item";
+    }
+  });
+});
+
+function updateButtonState() {
+  const hasError =
+    emailInput.classList.contains("error") ||
+    passwordInput.classList.contains("error");
+
+  const isFilled = emailInput.value !== "" && passwordInput.value.length >= 8;
+
+  const shouldEnable = !hasError && isFilled;
+
+  loginBtn.disabled = !shouldEnable;
+}
+//비활성화 시킨 버튼 어떻게 활성화 시킬지 모르겠어서 updateButtonState()부분은 챗GPT의 도움을 받았습니다. 코드 보면서 더 공부하겠습니다.