FRONTENDSCHOOL7 · timetam24 · Aug 4, 2023 · Aug 4, 2023 · Aug 7, 2023 · Aug 7, 2023
diff --git a/login-modal/app.js b/login-modal/app.js
@@ -0,0 +1,69 @@
+const loginBtn = document.querySelector(".login-btn");
+
+const userId = document.querySelector(".user-id");
+const userPwd = document.querySelector(".user-pwd");
+const firstErrorMsg = document.createElement("p");
+const secondErrorMsg = document.createElement("p");
+
+const loginBtnHandler = (event) => {
+  event.preventDefault();
+
+  const createErrorMsg = (element, className, text, nodeBehindErrorMsg) => {
+    element.classList.add(className);
+    element.innerText = text;
+    userPwd.parentNode.insertBefore(element, nodeBehindErrorMsg);
+  };
+
+  const removeErrorMsg = (errorMsg) => {
+    if (errorMsg.parentNode) {
+      errorMsg.parentNode.removeChild(errorMsg);
+    } else {
+      return;
+    }
+  };
+
+  const checkFocusAndErrorMsg = (input, errorMsg) => {
+    input.classList.remove("focus");
+    removeErrorMsg(errorMsg);
+  };
+
+  if (userId.value === "weniv07" && userPwd.value === "frontend07!") {
+    alert("로그인 성공!");
+    checkFocusAndErrorMsg(userId, firstErrorMsg);
+    checkFocusAndErrorMsg(userPwd, secondErrorMsg);
+  } else if (!userId.value.trim()) {
+    // 아이디 미입력 시
+    userId.classList.add("focus");
+    createErrorMsg(
+      firstErrorMsg,
+      "first-error-msg",
+      "아이디를 입력해주세요.",
+      userPwd
+    );
+    secondErrorMsg ? checkFocusAndErrorMsg(userPwd, secondErrorMsg) : null;
+    return;
+  } else if (userId.value.trim() && !userPwd.value.trim()) {
+    // 비밀번호 미입력 시
+    checkFocusAndErrorMsg(userId, firstErrorMsg);
+    userPwd.classList.add("focus");
+    createErrorMsg(
+      secondErrorMsg,
+      "second-error-msg",
+      "비밀번호를 입력해주세요.",
+      userPwd.nextSibling
+    );
+    return;
+  } else if (userId.value !== "weniv07" || userPwd.value !== "frontend07!") {
+    // 아이디 또는 비밀번호 불일치 시
+    userPwd.classList.remove("focus");
+    createErrorMsg(
+      secondErrorMsg,
+      "second-error-msg",
+      "아이디 혹은 비밀번호가 일치하지 않습니다.",
+      userPwd.nextSibling
+    );
+    firstErrorMsg ? checkFocusAndErrorMsg(userId, firstErrorMsg) : null;
+  }
+};
+
+loginBtn.addEventListener("click", loginBtnHandler);
diff --git a/login-modal/images/background.png b/login-modal/images/background.png
diff --git a/login-modal/images/check-box-on.svg b/login-modal/images/check-box-on.svg
diff --git a/login-modal/images/check-box.svg b/login-modal/images/check-box.svg
diff --git a/login-modal/images/icon-sprites.png b/login-modal/images/icon-sprites.png
diff --git a/login-modal/images/modal-close.png b/login-modal/images/modal-close.png
diff --git a/login-modal/index.html b/login-modal/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>로그인 | 위니브</title>
+    <link rel="shortcut icon" href="#" />
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div id="modal-login">
+      <header>
+        <h1>로그인 또는 회원가입</h1>
+      </header>
+      <main>
+        <section class="weniv-login">
+          <h2>위니브에서 여러분의 궁금증을 해결하세요! :&#41;</h2>
+          <form action="#" class="login-form">
+            <label class="a11y-hidden" for="id">아이디</label>
+            <input type="text" id="id" class="user-id" placeholder="아이디" />
+            <label class="a11y-hidden" for="pwd">비밀번호</label>
+            <input
+              type="password"
+              id="pwd"
+              class="user-pwd"
+              placeholder="비밀번호"
+              autocomplete="off"
+            />
+            <input type="checkbox" id="inpHold" class="inp-hold txt-hide" />
+            <label for="inpHold" class="labl-hold">로그인 상태 유지</label>
+            <button type="submit" class="login-btn">로그인</button>
+          </form>
+          <ul class="login-service">
+            <li>
+              <a href="#" class="join-member">회원가입</a>
+            </li>
+            <li><a href="#">아이디/비밀번호 찾기</a></li>
+          </ul>
+        </section>
+        <div class="or">또는</div>
+        <section class="social-login">
+          <h3 class="txt-hide">소셜서비스로 로그인</h3>
+          <ul>
+            <li>
+              <a href="#" class="icon-google"
+                ><span>구글 계정으로 로그인</span></a
+              >
+            </li>
+            <li>
+              <a href="#" class="icon-facebook"
+                ><span>페이스북 계정으로 로그인</span></a
+              >
+            </li>
+            <li>
+              <a href="#" class="icon-naver"
+                ><span>네이버 계정으로 로그인</span></a
+              >
+            </li>
+            <li>
+              <a href="#" class="icon-kakaotalk"
+                ><span>카카오톡 계정으로 로그인</span></a
+              >
+            </li>
+          </ul>
+        </section>
+      </main>
+      <a href="https://litt.ly/weniv" class="link-go-to-weniv">
+        <img src="./images/modal-close.png" alt="로그인 모달 닫기"
+      /></a>
+    </div>
+    <script src="./app.js"></script>
+  </body>
+</html>