[김태일] Sprint4

sign-in.html

@@ -24,13 +24,18 @@ <h1>판다마켓</h1>
           <form>
           <div class="group">
             <label for="email">이메일</label>
-            <input type="email" id="email" name="email" placeholder="이메일을 입력해주세요.">
+            <input type="email" id="email" name="email" placeholder="이메일을 입력해주세요."
+            class="error-input">
+            <p id="emailErr" class="errMsg">잘못된 이메일 형식입니다</p>
+
           </div>
           <div class="group">
             <label for="password">비밀번호</label>
             <div class="password-input">
               <input type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요.">
+
               <img src="./image/invisible_icon.png" class="password-icon" alt="비밀번호 보기">
+              <p id="passwordErr" class="errMsg">비밀번호를 8자 이상 입력해주세요.</p>
              </div>
           </div>
             <button type="submit">로그인</button>
@@ -57,6 +62,6 @@ <h1>간편 로그인하기</h1>
 
 
     </div>
-
+    <script src="./sign-in.js"></script>
   </body>
 </html>

sign-in.js

@@ -0,0 +1,85 @@
+/* login, signup 공통 */
+
+// 이메일 유효성 검사 함수
+function emailValidation(email) {
+  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  return emailRegex.test(email);
+}
+
+// 요소 가져오기
+const emailInput = document.getElementById("email");
+const passwordInput = document.getElementById("password");
+const emailErr = document.getElementById("emailErr");
+const passwordErr = document.getElementById("passwordErr");
+const passwordVisibility = document.getElementById("passwordVisibility");
+
+// 초기 오류 메시지 숨김
+emailErr.textContent = "";
+passwordErr.textContent = "";
+
+// 이메일 검증 
+function validateEmail() {
+  const emailValue = emailInput.value.trim();
+  if (emailValue === "") {
+      emailErr.textContent = "이메일을 입력해주세요.";
+      emailInput.classList.add("error-input");
+      emailInput.classList.remove("correct-input");
+  } else if (!emailValidation(emailValue)) {
+      emailErr.textContent = "잘못된 이메일 형식입니다.";
+      emailInput.classList.add("error-input");
+      emailInput.classList.remove("correct-input");
+  } else {
+      emailErr.textContent = "";
+      emailInput.classList.remove("error-input");
+      emailInput.classList.add("correct-input");
+  }
+  toggleButton();
+}
+
+// 비밀번호 검증
+function validatePassword() {
+  const passwordValue = passwordInput.value.trim();
+  if (passwordValue === "") {
+      passwordErr.textContent = "비밀번호를 입력해주세요.";
+      passwordInput.classList.add("error-input");
+      passwordInput.classList.remove("correct-input");
+  } else if (passwordValue.length < 8) {
+      passwordErr.textContent = "비밀번호를 8자 이상 입력해주세요.";
+      passwordInput.classList.add("error-input");
+      passwordInput.classList.remove("correct-input");
+  } else {
+      passwordErr.textContent = "";
+      passwordInput.classList.remove("error-input");
+      passwordInput.classList.add("correct-input");
+  }
+  toggleButton();
+}
+
+// 비밀번호 보이기/숨기기 기능
+function togglePasswordVisibility(input, button) {
+  if (input.type === "password") {
+      input.type = "text";
+      button.innerHTML = '<img src="/images/eye-icon.png" class="eye-icon" alt="eye-off">';
+  } else {
+      input.type = "password";
+      button.innerHTML = '<img src="/images/invisible-eye-icon.png" class="eye-icon" alt="eye-on">';
+  }
+}
+
+// 이벤트 리스너 추가
+emailInput.addEventListener("focusout", validateEmail);
+passwordInput.addEventListener("focusout", validatePassword);
+passwordVisibility.addEventListener("click", () => togglePasswordVisibility(passwordInput, passwordVisibility));
+
+// 엔터 키 입력 시 검증 함수 실행
+emailInput.addEventListener("keydown", function(event) {
+  if (event.key === "Enter") {
+    validateEmail();
+  }
+});
+
+passwordInput.addEventListener("keydown", function(event) {
+  if (event.key === "Enter") {
+    validatePassword();
+  }
+});

sign-up.js

@@ -0,0 +1,133 @@
+/* login, signup 공통 */
+
+// 이메일 유효성 검사 함수
+function emailValidation(email) {
+    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    return emailRegex.test(email);
+}
+
+// 요소 가져오기
+const emailInput = document.getElementById("email");
+const passwordInput = document.getElementById("password");
+const passwordRepeatInput = document.getElementById("password-repeat");
+const emailErr = document.getElementById("emailErr");
+const passwordErr = document.getElementById("passwordErr");
+const passwordCheckErr = document.getElementById("passwordCheckErr");
+const passwordVisibility = document.getElementById("passwordVisibility");
+
+let isPasswordCheckTouched = false; // 비밀번호 확인 입력 여부 추적
+
+// 초기 오류 메시지 숨김
+emailErr.style.display = "none";
+passwordErr.style.display = "none";
+passwordCheckErr.style.display = "none";
+
+// 이메일 검증
+function validateEmail() {
+    const emailValue = emailInput.value.trim();
+    if (emailValue === "") {
+        emailErr.textContent = "이메일을 입력해주세요.";
+        emailErr.style.display = "block";
+        emailInput.classList.add("error-input");
+        emailInput.classList.remove("correct-input");
+    } else if (!emailValidation(emailValue)) {
+        emailErr.textContent = "잘못된 이메일 형식입니다.";
+        emailErr.style.display = "block";
+        emailInput.classList.add("error-input");
+        emailInput.classList.remove("correct-input");
+    } else {
+        emailErr.style.display = "none";
+        emailInput.classList.remove("error-input");
+        emailInput.classList.add("correct-input");
+    }
+    toggleButton();
+}
+
+// 비밀번호 검증
+function validatePassword() {
+    const passwordValue = passwordInput.value.trim();
+    if (passwordValue === "") {
+        passwordErr.textContent = "비밀번호를 입력해주세요.";
+        passwordErr.style.display = "block";
+        passwordInput.classList.add("error-input");
+        passwordInput.classList.remove("correct-input");
+    } else if (passwordValue.length < 8) {
+        passwordErr.textContent = "비밀번호를 8자 이상 입력해주세요.";
+        passwordErr.style.display = "block";
+        passwordInput.classList.add("error-input");
+        passwordInput.classList.remove("correct-input");
+    } else {
+        passwordErr.style.display = "none";
+        passwordInput.classList.remove("error-input");
+        passwordInput.classList.add("correct-input");
+    }
+    toggleButton();
+}
+
+// 비밀번호 확인 검증
+function validatePasswordCheck() {
+    const passwordValue = passwordInput.value.trim();
+    const passwordCheckValue = passwordRepeatInput.value.trim();
+
+    if (!isPasswordCheckTouched) {
+        passwordCheckErr.style.display = "none"; // 입력 전에는 오류 문구 숨김
+        return;
+    }
+
+    if (passwordCheckValue === "") {
+        passwordCheckErr.style.display = "none"; // 비밀번호 확인 필드가 비었을 때도 오류 메시지 숨김
+    } else if (passwordValue !== passwordCheckValue) {
+        passwordCheckErr.textContent = "비밀번호가 일치하지 않습니다.";
+        passwordCheckErr.style.display = "block";
+        passwordRepeatInput.classList.add("error-input");
+    } else {
+        passwordCheckErr.style.display = "none";
+        passwordRepeatInput.classList.remove("error-input");
+    }
+    toggleButton();
+}
+
+// 비밀번호 보이기/숨기기 기능
+function togglePasswordVisibility(input, button) {
+    if (input.type === "password") {
+        input.type = "text";
+        button.innerHTML = '<img src="/images/eye-icon.png" class="eye-icon" alt="eye-off">';
+    } else {
+        input.type = "password";
+        button.innerHTML = '<img src="/images/invisible-eye-icon.png" class="eye-icon" alt="eye-on">';
+    }
+}
+
+// 회원가입 버튼 활성화
+function toggleButton() {
+    const isFormValid =
+        emailErr.style.display === "none" &&
+        passwordErr.style.display === "none" &&
+        passwordCheckErr.style.display === "none" &&
+        emailInput.value.trim() !== "" &&
+        passwordInput.value.trim() !== "" &&
+        passwordRepeatInput.value.trim() !== "";
+
+    const signupButton = document.querySelector(".signup");
+    if (isFormValid) {
+        signupButton.disabled = false;
+        signupButton.classList.add("active");
+    } else {
+        signupButton.disabled = true;
+        signupButton.classList.remove("active");
+    }
+}
+
+// 이벤트 리스너 추가
+emailInput.addEventListener("focusout", validateEmail);
+passwordInput.addEventListener("focusout", validatePassword);
+passwordRepeatInput.addEventListener("input", () => {
+    isPasswordCheckTouched = true; // 사용자가 입력 시작했음을 추적
+    validatePasswordCheck(); // 입력 시에도 검증 함수 실행
+});
+passwordRepeatInput.addEventListener("keydown", function(event) {
+    if (event.key === "Enter") {
+        validatePasswordCheck();
+    }
+});
+passwordVisibility.addEventListener("click", () => togglePasswordVisibility(passwordInput, passwordVisibility));

signup.html

@@ -24,24 +24,30 @@ <h1>판다마켓</h1>
           <form>
           <div class="group">
             <label for="email">이메일</label>
-            <input type="email" id="email" name="email" placeholder="이메일을 입력해주세요.">
+            <input type="email" id="email" name="email" placeholder="이메일을 입력해주세요."
+            class="error-input">
+            <p id="emailErr" class="errMsg">이메일을 입력해주세요.</p>
           </div>
           <div class="group">
             <label for="username">닉네임</label>
             <input type="username" id="username" name="username" placeholder="닉네임을 입력해주세요.">
+            <p id="nicknameErr" class="errMsg"></p>
           </div>
           <div class="group">
             <label for="password">비밀번호</label>
             <div class="password-input">
             <input type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요.">
             <img src="./image/invisible_icon.png" class="password-icon" alt="비밀번호 보기">
+            <p id="passwordErr" class="errMsg">비밀번호를 8자 이상 입력해주세요.</p>
            </div>
           </div>
            <div class="group">
             <label for="password-repeat">비밀번호 확인</label>
              <div class="password-input">
-              <input id="password-repeat" name="password-repeat" placeholder="비밀번호를 다시 한 번 입력해주세요.">
-             <img src="./image/eye_icon.png" class="password-icon" alt="비밀번호 보기">
+              <input id="password-repeat" name="password-repeat" placeholder="비밀번호를 다시 한 번 입력해주세요."
+              class="error-input">
+             <img src="./image/eye_icon.png" class="password-icon1" alt="비밀번호 보기">
+             <p id="passwordCheckErr" class="errMsg">비밀번호가 일치하지 않습니다.</p>
              </div>
           </div>
             <button type="submit">회원가입</button>
@@ -67,6 +73,6 @@ <h1>간편 로그인하기</h1>
 
 
     </div>
-
+    <script src='./sign-up.js'></script>
   </body>
 </html>

style/sign-in.css

@@ -58,7 +58,7 @@
   .group {
       width: 100%;
       height: 6.125rem;
-      margin-bottom: 1rem;
+      margin-bottom: 3em;
   }
 
   .group label {
@@ -95,7 +95,12 @@
   .password-input input {
       margin-right: 1.875rem;
   }
-
+  .errMsg {
+    display: block;
+    color: red;
+    font-size: 1rem;
+    font-weight: 600;
+  }
   .password-icon {
       position: absolute;
       top: 50%;

style/signup.css

@@ -57,7 +57,7 @@
       width: 100%;
       height: 6.125rem;
       gap: 10rem;
-      margin-bottom: 1rem;
+      margin-bottom: 4em;
     }
 
     .group input {
@@ -76,6 +76,7 @@
       letter-spacing: 0%;
       color: #9CA3AF;
       text-indent: 1.5rem;
+
     }
 
     .group label {
@@ -87,7 +88,15 @@
       line-height: 1.625rem;
       letter-spacing: 0%;
     }
-
+     .errMsg{
+      display: none;
+      display: block;
+      color: red;
+      font-size: 1rem;
+      font-weight: 600;
+
+    }
+
     .password-input {
       position: relative;
     }
@@ -104,7 +113,14 @@
       width: 1.5rem;
       cursor: pointer;
     }
-
+  .password-icon1{
+    position: absolute;
+      top: 30%;
+      right: 0.625rem;
+      transform: translateY(-50%);
+      width: 1.5rem;
+      cursor: pointer;
+  }
     button {
       width: 40rem;
       height: 3.5rem;