[박다인] sprint4

auth.js

@@ -0,0 +1,157 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const emailInput = document.getElementById("email"); 
+  const usernameInput = document.getElementById("username");
+  const passwordInput = document.getElementById("password");
+  const repeatInput = document.getElementById("password-repeat");
+
+  const emailError = document.getElementById("email-error"); 
+  const usernameError = document.getElementById("username-error");
+  const passwordError = document.getElementById("password-error");
+  const repeatError = document.getElementById('repeat-error');
+  const form = document.querySelector("form");
+  const loginButton = form.querySelector("button[type='submit']");
+
+  const isSignup = usernameInput && repeatInput;
+
+  const togglePasswordIcon = document.getElementById("togglePassword");
+  const togglePasswordRepeatIcon = document.getElementById("togglePassword-repeat");
+
+  if (togglePasswordIcon && passwordInput) {
+    togglePasswordIcon.addEventListener("click", () => {
+      const isHidden = passwordInput.type === "password";
+
+      passwordInput.type = isHidden ? "text" : "password";
+
+      togglePasswordIcon.src = isHidden
+        ? "images/btn_visibility.png"
+        : "images/btn_unvisibility.png"; 
+    });
+  }
+  if (togglePasswordRepeatIcon && repeatInput) {
+    togglePasswordRepeatIcon.addEventListener("click", () => {
+      const isHidden = repeatInput.type === "password";
+
+      repeatInput.type = isHidden ? "text" : "password";
+
+      togglePasswordRepeatIcon.src = isHidden
+        ? "images/btn_visibility.png"
+        : "images/btn_unvisibility.png"; 
+    });
+  }
+
+  loginButton.disabled = true;
+
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+  const state = {
+    emailValid : false,
+    usernameValid: !!usernameInput,
+    passwordValid: false,
+    repeatValid: !!repeatInput
+  }
+
+  function validateEmail() {
+    const emailValue = emailInput.value.trim();
+    emailInput.classList.remove("invalid");
+
+    if(!emailValue) {
+      emailError.innerText = "이메일을 입력해주세요.";
+      emailInput.classList.add("invalid");
+      state.emailValid = false;
+    } else if (!emailRegex.test(emailValue)) {
+      emailError.innerText = "잘못된 이메일 형식입니다.";
+      emailInput.classList.add("invalid");
+      state.emailValid = false;
+    } else {
+      emailError.innerText = "";
+      state.emailValid = true;
+    }
+
+    updateButtonState();
+  }
+
+  function validateUsername() {
+    const usernameValue = usernameInput.value.trim();
+    usernameInput.classList.remove("invalid");
+
+    if(!usernameValue) {
+      usernameError.innerText = "닉네임을 입력해주세요.";
+      usernameInput.classList.add("invalid");
+      state.usernameValid = false;
+    } else {
+      usernameError.innerText = "";
+      state.usernameValid = true;
+    }
+
+    updateButtonState();
+
+  }
+
+  function validatePassword() {
+    const passwordValue = passwordInput.value.trim();
+    passwordInput.classList.remove("invalid");
+
+    if(!passwordValue) {
+      passwordError.innerText = "비밀번호를 입력해주세요.";
+      passwordInput.classList.add("invalid");
+      state.passwordValid = false;
+    } else if (passwordValue.length < 8) {
+      passwordError.innerText = "비밀번호를 8자 이상 입력해주세요.";
+      passwordInput.classList.add("invalid");
+      state.passwordValid = false;
+    } else {
+      passwordError.innerText = "";
+      state.passwordValid = true;
+    }
+
+    updateButtonState();
+  }
+
+  function validatePasswordRepeat() {
+    const repeatValue = repeatInput.value.trim();
+    const passwordValue = passwordInput.value.trim();
+    repeatInput.classList.remove("invalid");
+
+    if(repeatValue !== passwordValue) {
+      repeatError.innerText = "비밀번호가 일치하지 않습니다.";
+      repeatInput.classList.add("invalid");
+      state.repeatValid = false;
+    } else {
+      repeatError.innerText = "";
+      state.repeatValid = true;
+    }
+
+    updateButtonState();
+  }
+
+
+  function updateButtonState() {
+    if (isSignup) {
+      loginButton.disabled = !(state.emailValid && state.passwordValid && state.usernameValid && state.repeatValid);
+    } else {
+      loginButton.disabled = !(state.emailValid && state.passwordValid);
+    }
+  }
+
+  emailInput.addEventListener("focusout", validateEmail);
+  passwordInput.addEventListener("focusout", validatePassword);
+
+  if (usernameInput && repeatInput) {
+    usernameInput.addEventListener("focusout", validateUsername);
+    repeatInput.addEventListener("focusout", validatePasswordRepeat);
+  }
+
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    updateButtonState();
+
+    if (!loginButton.disabled) {
+      if(isSignup) {
+        window.location.href = "login.html";
+      } else {
+        window.location.href = "/items";
+      }
+    }
+  });
+});

login.html

@@ -22,15 +22,17 @@
     <div class="login-content">
       <form>
         <div>
-          <label for="login-email">이메일</label>
-          <input id="login-email" name="email" type="email" placeholder="이메일을 입력해주세요">
+          <label for="email">이메일</label>
+          <input id="email" name="email" type="email" placeholder="이메일을 입력해주세요">
+          <div id="email-error" class="error-message"></div>
         </div>
         <div>
-          <label for="login-password">비밀번호</label>
+          <label for="password">비밀번호</label>
           <div class="password-container">
-            <input id="login-password" name="password" type="password" placeholder="비밀번호를 입력해주세요">
+            <input id="password" name="password" type="password" placeholder="비밀번호를 입력해주세요">
             <img src="images/btn_unvisibility.png" id="togglePassword">
           </div>
+          <div id="password-error" class="error-message"></div>
         </div>
         <button class="button auth-button" type="submit">
           로그인
@@ -57,5 +59,6 @@
       </div>
     </div>
   </div>
+  <script src="auth.js"></script>
 </body>
 </html>

signup.html

@@ -23,24 +23,28 @@
           <div>
             <label for="email">이메일</label>
             <input id="email" name="email" type="email" placeholder="이메일을 입력해주세요">
+            <div id="email-error" class="error-message"></div>
           </div>
           <div>
             <label for="username">닉네임</label>
             <input id="username" name="username" placeholder="닉네임을 입력해주세요">
+            <div id="username-error" class="error-message"></div>
           </div>
           <div>
             <label for="password">비밀번호</label>
             <div class="password-container">
               <input id="password" name="password" type="password" placeholder="비밀번호를 입력해주세요">
               <img src="images/btn_unvisibility.png" id="togglePassword">
             </div>
+            <div id="password-error" class="error-message"></div>
           </div>
           <div>
             <label for="password-repeat">비밀번호 확인</label>
             <div class="password-container">
               <input id="password-repeat" name="password-repeat" type="password" placeholder="비밀번호를 다시 한 번 입력해주세요">
-              <img src="images/btn_visibility.png" id="togglePassword-repeat">
+              <img src="images/btn_unvisibility.png" id="togglePassword-repeat">
             </div>
+            <div id="repeat-error" class="error-message"></div>
           </div>
           <button class="button auth-button" type="submit">
             회원가입
@@ -51,7 +55,7 @@
           <div class="login-easy">
             간편 로그인 하기
             <div class="social-login">
-              <a href="https://www.google.com/," target="_blank">
+              <a href="https://www.google.com/" target="_blank">
                 <img src="images/google.png" alt="google" width="42">
               </a>
               <a href="https://kakaocorp.com/page/" target="_blank">
@@ -67,5 +71,6 @@
         </div>
       </div>
     </div>
+    <script src="auth.js"></script>
   </body>
 </html>

styles/auth.css

@@ -111,4 +111,62 @@
 .link_to_signup a {
   color: #3692FF;
   text-decoration: underline;
+}
+
+input.invalid {
+  border-color: red;
+}
+
+.password-container input.invalid {
+  border-color: red;
+}
+
+.error-message {
+  color: red;
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+@media (min-width: 375px) and (max-width: 767px) {
+
+  .auth-contents {
+    width: 100%;
+    height: 100%;
+    padding: 0 16px;
+    margin: 0 auto;
+    gap: 24px;
+  }
+
+  .auth-logo {
+    gap: 8px;
+  }
+
+  .auth-logo img {
+    width: 40px;
+    height: 40px;
+  }
+
+  .auth-logo a {
+    font-size: 45px;
+  }
+
+  .login-content {
+    width: 100%;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+
+  form,
+  input,
+  .auth-button,
+  .other-login {
+    width: 100%;
+    max-width: 400px;
+    gap: 12px;
+  }
+
+  label,
+  input {
+    font-size: var(--text-sm);
+  }
 }

styles/common.css

@@ -104,4 +104,40 @@ h1 {
   font-weight: 700;
   border-radius: 999px;
   padding: 16px 124px;
+}
+
+@media (min-width: 375px) and (max-width: 767px) {
+  header {
+    padding: 0 16px;
+  }
+
+  footer {
+    padding: 32px 32px 64px 32px;
+  }
+
+  h1 {
+    font-size: 32px;
+  }
+
+  .pill-button {
+    font-size: 20px;
+  }
+}
+
+@media (min-width : 768px) and (max-width: 1199px) {
+  header {
+    padding: 0 24px;
+  }
+
+  footer {
+    padding: 32px 104px 64px 104px;
+  }
+
+  h1 {
+    font-size: var(--text-3xl);
+  }
+
+  .pill-button {
+    font-size: 20px;
+  }
 }