[이태식] sprint4

signup.css → auth.css

@@ -2,54 +2,84 @@ html {
   color: var(--gray800);
 }
 
+body {
+  padding: 10vh 0;
+}
+
 .wrap {
   max-width: 640px;
   width: 100%;
   margin: 0 auto;
 }
 
-.logo {
-  margin-top: 240px;
-}
-
-.logo a{
+.logo a {
   display: flex;
   justify-content: center;
 }
 
-.logo img  {
+.logo img {
   width: 60%;
 }
 
-.signup-form{
+.login-form,
+.signup-form {
   display: flex;
   flex-direction: column;
   gap: 24px;
-  margin-top: 40px;
+  margin-top: 55px;
 }
 
-.input-group{
+.input-group {
   display: flex;
   flex-direction: column;
   gap: 16px;
   position: relative;
 }
 
-.input-group input{
+.input-group input {
   padding: 16px 24px;
   background-color: var(--gray100);
   border-width: 0;
   border-radius: 12px;
 }
 
-.input-group img {
+.input-error {
+  outline: var(--error) solid 1.5px;
+}
+
+.input-valid {
+  outline: var(--blue) solid 1.5px;
+}
+
+.error-message {
+  color: var(--error);
+  padding-left: 16px;
+}
+
+.input-group button {
   position: absolute;
   right: 24px;
-  bottom: 16px;
+  top: 54px;
   width: 24px;
+  height: 24px;
+  padding: 0px;
+  background-color: transparent;
 }
 
-.simple-login{
+.input-group img {
+  width: 100%;
+}
+
+.button-disabled {
+  background-color: var(--gray400);
+}
+
+.button-disabled:active,
+.button-disabled:hover {
+  background-color: var(--gray400)
+}
+
+.simple-login {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -59,22 +89,35 @@ html {
   background-color: #E6F2FF;
 }
 
-.simple-login ul{
+.simple-login ul {
   display: flex;
   gap: 16px;
 }
 
-.simple-login ul li img{
+.simple-login ul li img {
   width: 42px;
 }
 
-.to-login{
+.to-signup,
+.to-login {
   display: flex;
   justify-content: center;
   gap: 4px;
   margin-top: 24px;
 }
 
+.to-signup a,
 .to-login a {
   text-decoration: underline;
+}
+
+/* Mobile */
+@media (min-width:375px) and (max-width:767px) {
+  body {
+    padding: 10vh 16px;
+  }
+
+  .wrap {
+    max-width: 400px;
+  }
 }

auth.js

@@ -0,0 +1,174 @@
+const loginForm = document.querySelector(".login-form");
+const signupForm = document.querySelector(".signup-form");
+
+const setInputError = (event) => {
+  if (event.target.closest("button")) {
+    return;
+  }
+  if (event.target.value === "") {
+    event.target.nextElementSibling?.remove();
+    event.target.classList.add("input-error");
+    setErrorMessage(event.target, "empty");
+  } else if (event.target.id === "useremail") {
+    event.target.nextElementSibling?.remove();
+    if (event.target.validationMessage) {
+      event.target.classList.add("input-error");
+      setErrorMessage(event.target, "email");
+    } else {
+      event.target.classList.remove("input-error");
+    }
+  } else if (
+    event.target.id === "password" ||
+    event.target.id === "passwordCheck"
+  ) {
+    event.target.nextElementSibling?.remove();
+    if (event.target.value.length < 8) {
+      event.target.classList.add("input-error");
+      setErrorMessage(event.target, "password");
+    } else {
+      event.target.classList.remove("input-error");
+      checkPassword();
+    }
+  } else {
+    event.target.classList.remove("input-error");
+    event.target.nextElementSibling?.remove();
+  }
+};
+
+const checkPassword = () => {
+  const password = document.querySelector("#password");
+  const passwordCheck = document.querySelector("#passwordCheck");
+  if (
+    password.value !== passwordCheck?.value &&
+    passwordCheck?.value.length >= 8
+  ) {
+    passwordCheck.nextElementSibling?.remove();
+    passwordCheck.classList.add("input-error");
+    passwordCheck.classList.remove("input-valid");
+    setErrorMessage(passwordCheck, "passwordCheck");
+  } else if (password.value === passwordCheck?.value) {
+    passwordCheck.nextElementSibling?.remove();
+    passwordCheck.classList.remove("input-error");
+    passwordCheck.classList.add("input-valid");
+  }
+};
+
+const setErrorMessage = (element, type) => {
+  const errorMessage = document.createElement("p");
+  errorMessage.classList.add("error-message", "text-lg", "semibold");
+  if (type === "empty") {
+    if (!element.nextElementSibling) {
+      switch (element.id) {
+        case "useremail":
+          errorMessage.textContent = "이메일을 입력해주세요.";
+          break;
+        case "password":
+          errorMessage.textContent = "비밀번호를 입력해주세요.";
+          break;
+        case "nickname":
+          errorMessage.textContent = "닉네임을 입력해주세요.";
+          break;
+        case "passwordCheck":
+          errorMessage.textContent = "비밀번호 확인을 입력해주세요.";
+          break;
+      }
+      element.after(errorMessage);
+    }
+  } else if (type === "email") {
+    errorMessage.textContent = "잘못된 이메일 형식입니다.";
+    element.after(errorMessage);
+  } else if (type === "password") {
+    errorMessage.textContent = "비밀번호를 8자 이상 입력해주세요.";
+    element.after(errorMessage);
+  } else if (type === "passwordCheck") {
+    errorMessage.textContent = "비밀번호가 일치하지 않습니다.";
+    element.after(errorMessage);
+  }
+};
+
+const setInputValid = (event) => {
+  if (event.target.closest("button")) {
+    return;
+  }
+  if (!event.target.classList.contains("input-error")) {
+    event.target.classList.add("input-valid");
+  } else {
+    event.target.classList.remove("input-valid");
+  }
+};
+
+const isValidForm = (event) => {
+  for (let e of event.currentTarget) {
+    if (e.tagName === "INPUT" && !e.classList.contains("input-valid")) {
+      return false;
+    }
+  }
+  return true;
+};
+
+const loginButton = document.querySelector(".login-button");
+const signupButton = document.querySelector(".signup-button");
+
+const toItems = (e) => {
+  e.preventDefault();
+  location.href = "./items.html";
+};
+
+const toLogin = (e) => {
+  e.preventDefault();
+  location.href = "./login.html";
+};
+
+const setLoginButton = (event) => {
+  if (isValidForm(event)) {
+    loginButton.disabled = false;
+    loginButton.classList.remove("button-disabled");
+    loginButton.addEventListener("click", toItems);
+  } else {
+    loginButton.disabled = true;
+    loginButton.classList.add("button-disabled");
+    loginButton.removeEventListener("click", toItems);
+  }
+};
+
+const setSignupButton = (event) => {
+  if (isValidForm(event)) {
+    signupButton.disabled = false;
+    signupButton.classList.remove("button-disabled");
+    signupButton.addEventListener("click", toLogin);
+  } else {
+    signupButton.disabled = true;
+    signupButton.classList.add("button-disabled");
+    signupButton.removeEventListener("click", toLogin);
+  }
+};
+
+const visibilityBtn = document.querySelectorAll(".visibility-btn");
+let isVisible = false;
+const toggleVisibility = (event) => {
+  if (isVisible) {
+    event.target.alt = "눈감음";
+    event.target.src = "images/ic_visibility_off.png";
+    event.target.parentElement.nextElementSibling.nextElementSibling.type =
+      "password";
+  } else {
+    event.target.alt = "눈 뜸";
+    event.target.src = "images/ic_visibility_on.png";
+    event.target.parentElement.nextElementSibling.nextElementSibling.type =
+      "text";
+  }
+  isVisible = !isVisible;
+};
+console.log(visibilityBtn);
+for (let ele of visibilityBtn) {
+  console.log(ele);
+  ele.addEventListener("click", toggleVisibility);
+}
+
+loginForm?.addEventListener("focusout", setInputError);
+loginForm?.addEventListener("focusout", setInputValid);
+loginForm?.addEventListener("focusout", setLoginButton);
+
+signupForm?.addEventListener("focusout", setInputError);
+signupForm?.addEventListener("focusout", setInputValid);
+signupForm?.addEventListener("focusout", setSignupButton);

common.css

@@ -0,0 +1,22 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: Pretendard, sans-serif;
+  font-size: 16px;
+}
+
+:root {
+  --gray900: #111827;
+  --gray800: #1F2937;
+  --gray700: #374151;
+  --gray600: #4B5563;
+  --gray500: #6B7280;
+  --gray400: #9CA3AF;
+  --gray200: #E5E7EB;
+  --gray100: #F3F4F6;
+  --gray50: #F9FAFB;
+  --blue: #3692FF;
+  --error: #F74747;
+}