codeit-bootcamp-frontend · jiwonll · Feb 5, 2026 · Feb 5, 2026 · Feb 5, 2026 · Feb 5, 2026
diff --git a/images/preview.svg b/images/preview.svg
diff --git a/index.css b/index.css
@@ -3,7 +3,7 @@ a {
   text-decoration: none;
 }
 
-header {
+.header-content {
   width: 1120px;
   margin: 9.5px auto;
   position: sticky;
@@ -127,7 +127,7 @@ div > h1 {
   height: 172px;
 }
 
-footer {
+.footer {
   background-color: #111827;
   height: 160px;
   margin: auto;

diff --git a/index.html b/index.html
@@ -91,32 +91,34 @@ <h2>믿을 수 있는 판다마켓 중고 거래</h2>
       </div>
     </main>
     <footer>
-      <div class="footer-content">
-        <img src="images/codeit_text.svg" />
-        <div class="Pricy_FAQ">
-          <a href="/pricy">
-            <span>Pricy Policy</span>
-          </a>
-          <a href="faq">
-            <img src="images/FAQ.svg" />
-          </a>
-        </div>
-        <div class="icon">
-          <a href="https://www.facebook.com" target="_blank">
-            <img src="images/ic_img/ic_facebook.svg" alt="페이스북" />
-          </a>
+      <div class="footer">
+        <div class="footer-content">
+          <img src="images/codeit_text.svg" />
+          <div class="Pricy_FAQ">
+            <a href="/pricy">
+              <span>Pricy Policy</span>
+            </a>
+            <a href="faq">
+              <img src="images/FAQ.svg" />
+            </a>
+          </div>
+          <div class="icon">
+            <a href="https://www.facebook.com" target="_blank">
+              <img src="images/ic_img/ic_facebook.svg" alt="페이스북" />
+            </a>
 
-          <a href="https://www.twitter.com" target="_blank">
-            <img src="images/ic_img/ic_twitter.svg" alt="트위터" />
-          </a>
+            <a href="https://www.twitter.com" target="_blank">
+              <img src="images/ic_img/ic_twitter.svg" alt="트위터" />
+            </a>
 
-          <a href="https://www.youtube.com" target="_blank">
-            <img src="images/ic_img/ic_youtube.svg" alt="유튜브" />
-          </a>
+            <a href="https://www.youtube.com" target="_blank">
+              <img src="images/ic_img/ic_youtube.svg" alt="유튜브" />
+            </a>
 
-          <a href="https://www.instagram.com" target="_blank">
-            <img src="images/ic_img/ic_instagram.svg" alt="인스타그램" />
-          </a>
+            <a href="https://www.instagram.com" target="_blank">
+              <img src="images/ic_img/ic_instagram.svg" alt="인스타그램" />
+            </a>
+          </div>
         </div>
       </div>
     </footer>

diff --git a/login.css b/login.css
@@ -76,15 +76,15 @@ img[src*="logo"] {
   display: flex;
   flex-direction: row;
   justify-content: center;
+  gap: 4px;
 }
 
 .sign-up a {
   color: #3692ff;
 }
 
 .password-input {
-  background-image: url("images/login_page/eyes-close.svg");
-  background-repeat: no-repeat;
+  width: 640px;
   display: flex;
   background-position: right 24px center;
 }
@@ -131,4 +131,54 @@ img[src*="logo"] {
   .form-group {
     gap: 8px;
   }
+
+  .password-input {
+    width: 100%;
+  }
+
+
+}
+
+.error {
+  border: 1px solid red;
+}
+
+.error-text {
+  color: red;
+  font: 600 14px/24px "Pretendard";
+  margin-top: -8px;
+  margin-left: 16px;
+}
+.disabled {
+  background-color: #9ca3af;
+}
+
+.login-button {
+  cursor: pointer;
+  margin-top: 24px;
+}
+
+.login-button.disabled {
+  cursor: not-allowed;
+}
+
+.password-wrapper {
+  position: relative;
+  height: 56px;
+}
+
+.toggle-eye {
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.eyeBtn {
+  cursor: pointer;
+}
+
+.password-wrapper .error-text {
+  position: absolute;
+  top: calc(100% + 16px);
 }
diff --git a/login.html b/login.html
@@ -20,44 +20,49 @@
         <div class="login-form">
           <div class="form-group">
             <label for="email">이메일</label>
-            <input id="email" type="email" placeholder="이메일을 입력해주세요" />
+            <input
+              id="email"
+              type="email"
+              placeholder="이메일을 입력해주세요"
+            />
           </div>
 
           <div class="form-group">
             <label for="password">비밀번호</label>
-            <input id="password" type="email" placeholder="비밀번호를 입력해주세요" class="password-input" />
+            <div class="password-wrapper">
+              <input
+                id="password"
+                type="password"
+                placeholder="비밀번호를 입력해주세요"
+                class="password-input"
+              />
+              <img src="images/login_page/eyes-close.svg" class="toggle-eye" />
+            </div>
           </div>
 
-          <button class="login-button">
-
-              로그인    
-
-          </button>
+          <button class="login-button" type="button">로그인</button>
         </div>
 
         <div class="social-login">
           <div class="social-login-container">
-            <p>
-                간편 로그인하기
-            </p>
+            <p>간편 로그인하기</p>
             <div class="icon-container">
               <a href="https://www.google.com/">
-                  <img src="images/ic_img/ic_google.svg">
+                <img src="images/ic_img/ic_google.svg" />
               </a>
               <a href="https://www.kakaocorp.com/page/">
-                  <img src="images/ic_img/ic_kakao.svg">
+                <img src="images/ic_img/ic_kakao.svg" />
               </a>
             </div>
-
           </div>
         </div>
 
         <div class="sign-up">
-          <span>판다마켓이 처음이신가요?
+          <span>판다마켓이 처음이신가요?</span>
           <a href="signup.html">회원가입</a>
         </div>
-
       </div>
     </div>
+    <script src="login.js"></script>
   </body>
 </html>
diff --git a/login.js b/login.js
@@ -0,0 +1,92 @@
+const emailInput = document.querySelector("#email");
+const passwordInput = document.querySelector("#password");
+const loginBtn = document.querySelector(".login-button");
+
+const emailError = document.createElement("p");
+const passwordError = document.createElement("p");
+
+emailError.classList.add("error-text");
+passwordError.classList.add("error-text");
+
+emailInput.parentNode.appendChild(emailError);
+passwordInput.parentNode.appendChild(passwordError);
+
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+let isEmail = false;
+let isPassword = false;
+updateButtonState();
+
+function validateEmail() {
+  const emailValue = emailInput.value.trim();
+
+  if (emailValue === "") {
+    emailError.textContent = "이메일을 입력해주세요";
+    emailInput.classList.add("error");
+    isEmail = false;
+  } else if (!emailRegex.test(emailValue)) {
+    emailError.textContent = "잘못된 이메일 형식입니다.";
+    emailInput.classList.add("error");
+    isEmail = false;
+  } else {
+    emailError.textContent = "";
+    emailInput.classList.remove("error");
+    isEmail = true;
+  }
+  updateButtonState();
+
+}
+
+function validatePassword() {
+  const passwordValue = passwordInput.value.trim();
+
+  if (passwordValue === "") {
+    passwordError.textContent = "비밀번호를 입력해주세요.";
+    passwordInput.classList.add("error");
+    isPassword = false;
+  } else if (passwordValue.length < 8) {
+    passwordError.textContent = "비밀번호를 8자 이상 입력해주세요";
+    passwordInput.classList.add("error");
+    isPassword = false;
+  } else {
+    passwordError.textContent = "";
+    passwordInput.classList.remove("error");
+    isPassword = true;
+  }
+  updateButtonState();
+}
+
+function updateButtonState() {
+  loginBtn.disabled = !(isEmail && isPassword);
+
+  if (loginBtn.disabled == true) {
+    loginBtn.classList.add("disabled");
+  } else {
+    loginBtn.classList.remove("disabled");
+  }
+}
+
+emailInput.addEventListener("focusout", validateEmail);
+emailInput.addEventListener("input", validateEmail);
+
+passwordInput.addEventListener("focusout", validatePassword);
+passwordInput.addEventListener("input", validatePassword);
+
+loginBtn.addEventListener("click", (e) => {
+  if (loginBtn.disabled) return;
+
+  window.location.href = "/items";
+});
+
+const eyeBtn = document.querySelector(".toggle-eye");
+eyeBtn.classList.add("eyeBtn");
+
+eyeBtn.addEventListener("click", () => {
+  if (passwordInput.type === "password") {
+    passwordInput.type = "text";
+    eyeBtn.src = "images/login_page/eyes-open.svg";
+  } else {
+    passwordInput.type = "password";
+    eyeBtn.src = "images/login_page/eyes-close.svg";
+  }
+});