[강석준] sprint4

css/auth.css

@@ -1,5 +1,5 @@
-@import "global.css";
 @import "reset.css";
+@import "global.css";
 
 .body {
   display: flex;
@@ -51,56 +51,53 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: var(--gray100);
+  background-color: var(--gray-100);
   border-radius: 12px;
   height: 3.5rem;
   padding: 1rem 1.5rem;
 }
 
-/*
-:focus-within이란 - 스스로 :focus 의사 클래스와 일치하거나, 그 자손 중 하나가 :focus와 일치하는 요소를 나타냄
-*/
 .form__field-input-wrapper--focused:focus-within {
-  outline: 2px solid var(--blue100);
+  outline: 2px solid var(--blue-100);
 }
 
 .form__field-input {
-  color: var(--gray800);
+  color: var(--gray-800);
   font-weight: 400;
-  background-color: var(--gray100);
+  background-color: var(--gray-100);
   width: 100%;
 }
 
 .form__field-input::placeholder {
-  color: var(--gray400);
+  color: var(--gray-400);
 }
 
-.form__field-toggle-button {
+.form__field-button {
   background-color: inherit;
   cursor: pointer;
 }
 
 .form__submit-button {
-  color: var(--gray100);
+  color: var(--gray-100);
   font-size: 1.25rem;
   font-weight: 600;
-  background-color: var(--blue100);
+  background-color: var(--blue-100);
   border-radius: 2.5rem;
   width: 100%;
   padding: 1rem 0;
   cursor: pointer;
 }
 
 .form__submit-button--disabled:disabled {
-  background-color: var(--gray400);
+  background-color: var(--gray-400);
   cursor: not-allowed;
 }
 
 .social-login {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: #e6f2ff;
+  background-color: var(--blue-50);
   width: 100%;
   padding: 1rem 2.5rem;
 }
@@ -117,7 +114,7 @@
 }
 
 .helper-text__link {
-  color: var(--blue100);
+  color: var(--blue-100);
   text-decoration: underline;
 }
 
@@ -128,3 +125,11 @@
     max-width: 400px;
   }
 }
+
+.error {
+  outline: 2px solid var(--red);
+}
+
+.form__msg-container {
+  color: var(--red);
+}

css/global.css

@@ -10,24 +10,28 @@
   font-family: "Pretendard-Regular", sans-serif;
   font-size: 16px;
 
-  --blue100: #3692ff;
-  --blue200: #1967d6;
-  --blue300: #1251aa;
+  --white: #ffffff;
+  --white-light: #fcfcfc;
+  --white-muted: #dfdfdf;
+
+  --blue-50: #cfe5ff;
+  --blue-100: #3692ff;
+  --blue-200: #1967d6;
+  --blue-300: #1251aa;
 
   --red: #f74747;
 
-  --gray50: #f9fafb;
-  --gray100: #f3f4f6;
-  --gray200: #e5e7eb;
-  --gray400: #9ca3af;
-  --gray500: #6b7280;
-  --gray600: #4b5563;
-  --gray700: #374151;
-  --gray800: #1f2937;
-  --gray900: #111827;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
 }
 
-/* Tablet, Mobile 기기에 따라 폰트 크기 조정*/
 @media (768px <= width < 1200px) {
   :root {
     font-size: 14px;

css/landing.css

@@ -1,9 +1,9 @@
-@import "global.css";
 @import "reset.css";
+@import "global.css";
 
 .header {
-  background-color: #ffffff;
-  border-bottom: solid 1px #dfdfdf;
+  background-color: var(--white);
+  border-bottom: solid 1px var(--gray-300);
   position: sticky;
   top: 0px;
   padding: 0.5rem 0;
@@ -24,24 +24,24 @@
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
-  color: #ffffff;
+  color: var(--white);
   font-weight: 600;
-  background-color: var(--blue100);
+  background-color: var(--blue-100);
   height: 48px;
   width: 128px;
   border-radius: 8px;
   cursor: pointer;
 }
 
 .header__button--primary:visited {
-  color: var(--gray100);
+  color: var(--gray-100);
 }
 
 .hero {
   display: flex;
   justify-content: center;
   align-items: end;
-  background-color: #cfe5ff;
+  background-color: var(--blue-50);
   height: 540px;
 }
 
@@ -63,8 +63,8 @@
 }
 
 .hero__button {
-  color: #ffffff;
-  background-color: var(--blue100);
+  color: var(--white);
+  background-color: var(--blue-100);
   border-radius: 40px;
   padding: 1.25rem 7.5rem;
   cursor: pointer;
@@ -96,7 +96,7 @@
   display: flex;
   justify-content: space-evenly;
   align-items: center;
-  background-color: #fcfcfc;
+  background-color: var(--white-light);
   gap: 2.5rem;
   padding: 0 1rem;
 }
@@ -150,8 +150,8 @@
 
 .footer {
   font-weight: 400;
-  color: var(--gray400);
-  background-color: var(--gray900);
+  color: var(--gray-400);
+  background-color: var(--gray-900);
   height: 160px;
   padding-top: 40px;
 }

js/auth.js

@@ -1,18 +1,112 @@
-import { isEmpty } from "./utils.js";
+import {
+  isEmpty,
+  isEmailValid,
+  isPwdValid,
+  applyClass,
+  removeClass,
+} from "./utils.js";
 
+const ERROR_EMAIL_EMPTY = "이메일을 입력해주세요.";
+const ERROR_EMAIL_PATTERN = "잘못된 이메일 형식입니다.";
+const ERROR_PASSWORD_EMPTY = "비밀번호를 입력해주세요.";
+const ERROR_PASSWORD_PATTERN = "비밀번호를 8자 이상 입력해주세요.";
+
+const IMG_VISIBLE_ON = "../assets/ic_visibility_on.svg";
+const IMG_VISIBLE_OFF = "../assets/ic_visibility_off.svg";
+
+const formInputWrappers = document.querySelectorAll(
+  ".form__field-input-wrapper"
+);
 const formInputs = document.querySelectorAll(".form__field-input");
-const submitButton = document.querySelector(".form__submit-button--disabled");
+const submitButton = document.querySelector(".form__submit-button");
+const emailInput = document.querySelector("#email");
+const emailInputWrapper = document.querySelector(
+  ".form__field-input-wrapper--email"
+);
+const emailMsgContainer = document.querySelector(".form__msg-container--email");
+const pwdInput = document.querySelector("#password");
+const pwdInputWrapper = document.querySelector(
+  ".form__field-input-wrapper--password"
+);
+const pwdMsgContainer = document.querySelector(
+  ".form__msg-container--password"
+);
+
+const pwdVisiblityButton = document.querySelector(
+  ".form__field-button.form__field-button--password"
+);
+const pwdVisiblityButtonImg = document.querySelector(
+  ".form__field-image.form__field-image--password"
+);
+
+const handleInputFocusin = () => {
+  submitButton.disabled = true;
+};
+
+formInputs.forEach((inputNode) =>
+  inputNode.addEventListener("focusin", handleInputFocusin)
+);
+
+export const isFormValid = () => {
+  const isInputsEmpty = Array.from(formInputs).some((input) =>
+    isEmpty(input.value)
+  );
+  const isInputsValid = Array.from(formInputWrappers).every(
+    (input) => !input.classList.contains("error")
+  );
+
+  return !isInputsEmpty && isInputsValid;
+};
 
-const updateSubmitButton = () => {
-  const isFormFilled = Array.from(formInputs)
-    .map((input) => input.value)
-    .every((string) => !isEmpty(string));
+const handleEmailFocusout = (e) => {
+  const email = e.target.value;
 
-  submitButton.disabled = !isFormFilled;
+  if (!isEmailValid(email)) {
+    applyClass(emailInputWrapper, "error");
+    emailMsgContainer.textContent = isEmpty(email)
+      ? ERROR_EMAIL_EMPTY
+      : ERROR_EMAIL_PATTERN;
+    return;
+  } else {
+    removeClass(emailInputWrapper, "error");
+    emailMsgContainer.textContent = "";
+  }
+
+  submitButton.disabled = !isFormValid();
+};
+
+const handlePwdFocusout = (e) => {
+  const pwd = e.target.value;
+
+  if (!isPwdValid(pwd)) {
+    applyClass(pwdInputWrapper, "error");
+    pwdMsgContainer.textContent = isEmpty(pwd)
+      ? ERROR_PASSWORD_EMPTY
+      : ERROR_PASSWORD_PATTERN;
+    return;
+  } else {
+    removeClass(pwdInputWrapper, "error");
+    pwdMsgContainer.textContent = "";
+  }
+
+  submitButton.disabled = !isFormValid();
 };
 
-formInputs.forEach((input) => {
-  input.addEventListener("input", updateSubmitButton);
-});
+emailInput.addEventListener("focusout", handleEmailFocusout);
+pwdInput.addEventListener("focusout", handlePwdFocusout);
+
+export const createVisibilityToggleHandler = (input, image) => {
+  let visible = false;
+
+  return function onClickToggleButton() {
+    visible = !visible;
+
+    input.type = visible ? "text" : "password";
+    image.src = visible ? IMG_VISIBLE_ON : IMG_VISIBLE_OFF;
+  };
+};
 
-updateSubmitButton();
+pwdVisiblityButton.addEventListener(
+  "click",
+  createVisibilityToggleHandler(pwdInput, pwdVisiblityButtonImg)
+);