Merge pull request #3 from codeit-bootcamp-frontend/Basic-강수민

Basic 강수민

js/login.js

@@ -0,0 +1,20 @@
+import { togglePwVisibility } from "./togglePwVisible.js";
+import { checkInputValidity, validateForm } from "./validation.js";
+
+const pwVisibilityToggleBtn = document.querySelector(".btn-toggle"); // [sprint3 리뷰 반영] 변수명 직관적으로 변경
+const inputs = document.querySelectorAll(".input-area > input");
+const loginButton = document.querySelector(".btn.login");
+
+pwVisibilityToggleBtn.addEventListener("click", togglePwVisibility);
+
+inputs.forEach((input) => {
+  input.addEventListener("focusout", (e) => {
+    checkInputValidity(e);
+    validateForm(e);
+  });
+});
+
+loginButton.addEventListener("click", (e) => {
+  e.preventDefault();
+  location.href = "/pages/items.html";
+});

js/signup.js

@@ -0,0 +1,22 @@
+import { togglePwVisibility } from "./togglePwVisible.js";
+import { checkInputValidity, validateForm } from "./validation.js";
+const signupButton = document.querySelector(".btn.signup");
+
+const pwVisibilityToggleBtn = document.querySelectorAll(".btn-toggle"); // [sprint3 리뷰 반영] 변수명 직관적으로 변경
+const inputs = document.querySelectorAll(".input-area > input");
+
+pwVisibilityToggleBtn.forEach((btn) => {
+  btn.addEventListener("click", togglePwVisibility);
+});
+
+inputs.forEach((input) => {
+  input.addEventListener("focusout", (e) => {
+    checkInputValidity(e);
+    validateForm(e);
+  });
+});
+
+signupButton.addEventListener("click", (e) => {
+  e.preventDefault();
+  location.href = "/pages/signin.html";
+});

js/togglePwVisible.js

@@ -0,0 +1,14 @@
+/**
+ * 비밀번호와 비밀번호 확인의 type을 변경하는 함수
+ * @param {*} e
+ */
+function togglePwVisibility(e) {
+  // [sprint3 리뷰 반영] 함수명 직관적으로 변경
+  const inputPw = e.target.closest(".password").querySelector(".pw"); // 비밀번호 input 요소
+  const type = inputPw.getAttribute("type"); // 비밀번호 | 비밀번호 확인 input의 type 속성
+
+  // [sprint3 리뷰 반영] if문 3항 연산자 사용해 코드 간결하게 수정
+  inputPw.setAttribute("type", type === "password" ? "text" : "password");
+}
+
+export { togglePwVisibility };

js/validation.js

@@ -0,0 +1,125 @@
+/**
+ * input이 공백인지 검사
+ * @param {*} target 이벤트 발생한 타겟 요소
+ * @param {*} errorMessage 에러를 표시할 <span> 태그
+ * @returns input의 입력이 공백이면 true, 공백이 아니면 false 반환
+ */
+function handleEmptyInput(target, errorMessage) {
+  if (target.value.trim("") === "") {
+    errorMessage.textContent = target.placeholder;
+    target.classList.add("invalid");
+    target.dataset.valid = false;
+    return true;
+  } else {
+    target.classList.remove("invalid");
+    target.dataset.valid = true;
+    return false;
+  }
+}
+
+/**
+ * 이메일이 [최소 한글자 이상의 영문 대소문자, 숫자]@[최소 한글자 이상의 영문 대소문자, 숫자].[최소 2글자 이상의 영문 대소문자]의 정규 표현식에 적합한지 검사
+ * @param {*} email 공백을 제거한 이메일 문자열
+ * @returns 이메일이 정규 표현식에 적합하면 true, 적합하지 않으면 false 반환
+ */
+function validateEmailFormat(email) {
+  const emailRegex = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,}$/;
+
+  return emailRegex.test(email);
+}
+
+/**
+ * 이메일 입력의 유효성 검사
+ * @param {*} target 이벤트 발생한 타겟 요소
+ * @param {*} errorMessage 에러를 표시할 <span> 태그
+ */
+function validateEmail(target, errorMessage) {
+  const isEmailValid = validateEmailFormat(target.value.trim(""));
+  if (!isEmailValid) {
+    errorMessage.textContent = "잘못된 이메일 형식입니다.";
+    target.classList.add("invalid");
+    target.dataset.valid = false;
+  } else {
+    target.classList.remove("invalid");
+    target.dataset.valid = true;
+  }
+}
+
+/**
+ * 비밀번호 입력의 유효성 검사
+ * @param {*} target 이벤트 발생한 타겟 요소
+ * @param {*} errorMessage 에러를 표시할 <span> 태그
+ */
+function validatePassword(target, errorMessage) {
+  if (target.value.trim("").length < 8) {
+    errorMessage.textContent = "비밀번호를 8자리 이상 입력해주세요.";
+    target.classList.add("invalid");
+    target.dataset.valid = false;
+  } else {
+    target.classList.remove("invalid");
+    target.dataset.valid = true;
+  }
+}
+
+/**
+ * 비밀번호 확인 입력의 유효성 검사
+ * @param {*} target 이벤트 발생한 타겟 요소
+ * @param {*} errorMessage 에러를 표시할 <span> 태그
+ */
+function validatePasswordConfirm(target, errorMessage) {
+  const password = target
+    .closest("form")
+    .querySelector("#input_password")
+    .value.trim("");
+
+  if (target.value.trim("") !== password) {
+    errorMessage.textContent = "비밀번호가 일치하지 않습니다.";
+    target.classList.add("invalid");
+    target.dataset.valid = false;
+  } else {
+    validatePassword(target, errorMessage);
+  }
+}
+
+/**
+ * form의 input 요소들의 유효성 검사
+ */
+function checkInputValidity({ target }) {
+  const errorMessage = target
+    .closest(".input-area")
+    .querySelector(".msg-error");
+  const isEmpty = handleEmptyInput(target, errorMessage);
+
+  if (!isEmpty) {
+    switch (target.id) {
+      case "input_email":
+        validateEmail(target, errorMessage);
+        break;
+      case "input_password":
+        validatePassword(target, errorMessage);
+        break;
+      case "input_password_confirm":
+        validatePasswordConfirm(target, errorMessage);
+        break;
+      default:
+        break;
+    }
+  }
+}
+
+/**
+ * 폼 태그의 모든 입력이 모두 유효성 검사를 통과했는지 체크
+ */
+function validateForm({ target }) {
+  const form = target.closest("form");
+  const inputs = form.querySelectorAll("input");
+  const btnSubmit = form.querySelector("button[type=submit]"); // 로그인 | 회원가입 버튼
+  const isFormValid = Array.from(inputs).every(
+    // (input) => input.value.trim() !== ""
+    (input) => input.dataset.valid === "true"
+  ); // form의 모든 input 요소의 data-valid가 'true'인지 체크
+
+  btnSubmit.disabled = isFormValid === true ? false : true; // 모든 입력이 공백이 아니면 로그인 버튼 활성화
+}
+
+export { checkInputValidity, validateForm };

pages/login.html

@@ -24,8 +24,10 @@ <h1 class="logo">
             type="email"
             id="input_email"
             placeholder="이메일을 입력해 주세요"
+            data-valid="false"
             required
           />
+          <span class="msg-error">에러 메시지</span>
         </div>
         <div class="input-area password">
           <label for="input_password">비밀번호</label>
@@ -34,8 +36,10 @@ <h1 class="logo">
             id="input_password"
             class="pw"
             placeholder="비밀번호를 입력해주세요"
+            data-valid="false"
             required
           />
+          <span class="msg-error">에러 메시지</span>
           <button type="button" class="btn-toggle" title="비밀번호 노출 토글">
             <span class="sr-only">비밀번호 노출 토글</span>
           </button>
@@ -70,6 +74,6 @@ <h1 class="logo">
         </div>
       </form>
     </div>
-    <script src="../js/auth.js"></script>
+    <script type="module" src="../js/login.js"></script>
   </body>
 </html>

pages/signin.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Signin</title>
+  </head>
+  <body></body>
+</html>

pages/signup.html

@@ -24,17 +24,21 @@ <h1 class="logo">
             type="email"
             id="input_email"
             placeholder="이메일을 입력해 주세요"
+            data-valid="false"
             required
           />
+          <span class="msg-error">에러 메시지</span>
         </div>
         <div class="input-area nickname">
           <label for="input_name">닉네임</label>
           <input
             type="text"
             id="input_name"
             placeholder="닉네임을 입력해 주세요"
+            data-valid="false"
             required
           />
+          <span class="msg-error">에러 메시지</span>
         </div>
         <div class="input-area password">
           <label for="input_password">비밀번호</label>
@@ -43,8 +47,10 @@ <h1 class="logo">
             id="input_password"
             class="pw"
             placeholder="비밀번호를 입력해주세요"
+            data-valid="false"
             required
           />
+          <span class="msg-error">에러 메시지</span>
           <button type="button" class="btn-toggle" title="비밀번호 노출 토글">
             <span class="sr-only">비밀번호 노출 토글</span>
           </button>
@@ -56,8 +62,10 @@ <h1 class="logo">
             id="input_password_confirm"
             class="pw"
             placeholder="비밀번호를 다시 한 번 입력해주세요"
+            data-valid="false"
             required
           />
+          <span class="msg-error">에러 메시지</span>
           <button type="button" class="btn-toggle" title="비밀번호 노출 토글">
             <span class="sr-only">비밀번호 노출 토글</span>
           </button>
@@ -92,6 +100,6 @@ <h1 class="logo">
         </div>
       </form>
     </div>
-    <script src="../js/auth.js"></script>
+    <script type="module" src="../js/signup.js"></script>
   </body>
 </html>

style/auth.css

@@ -58,15 +58,21 @@
 .container form .input-area input:focus {
   outline-color: var(--primary100);
 }
-.container form .input-area input.pw[type=password] + .btn-toggle {
+.container form .input-area input.pw[type=text] ~ .btn-toggle {
   background-image: url(../assets/images/icons/ic_visibility_on.png);
 }
-.container form .input-area input.pw[type=text] + .btn-toggle {
+.container form .input-area input.pw[type=password] ~ .btn-toggle {
   background-image: url(../assets/images/icons/ic_visibility_off.png);
 }
+.container form .input-area input.invalid {
+  border: 0.1rem solid var(--error);
+}
+.container form .input-area input.invalid ~ .msg-error {
+  display: block;
+}
 .container form .input-area .btn-toggle {
   position: absolute;
-  bottom: 1.6rem;
+  top: 5.8rem;
   right: 2.4rem;
   width: 2.4rem;
   height: 2.4rem;
@@ -81,6 +87,14 @@
   width: 100%;
   height: 100%;
 }
+.container form .input-area .msg-error {
+  display: none;
+  margin: 0.8rem 0 0 1.6rem;
+  font-size: 1.4rem;
+  font-weight: var(--semiBold);
+  line-height: 2.4rem;
+  color: var(--error);
+}
 .container form .btn {
   height: 5.6rem;
   padding: 0;