[배민지] Sprint4

FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.html

@@ -26,14 +26,18 @@
         <div class="form__user-info">
           <label for="form__email">이메일</label>
           <input id="form__email" name = "inpo__email" placeholder="이메일을 입력하세요." type="email">
+          <div id="form__email--message" class="error__message">이메일을 입력해주세요.</div>
+          <div id="form__email--invalid-message" class="error__message">잘못된 이메일 형식입니다.</div>
           <div class="form__password--wrapper">
             <label for="form__password">비밀번호</label>
             <img class="input-icon" src="images/btn_visibility_on_24px.png" alt="숨김 아이콘">
             <input id="form__password" name = "inpo__password" placeholder="비밀번호를 입력하세요." type="password">
+            <div id="form__password--message" class="error__message">비밀번호를 입력해주세요.</div>
+            <div id="form__password--invalid-message" class="error__message">비밀번호를 8자 이상 입력해주세요.</div>
           </div>
         </div>
         <a href="/login" aria-label="로그인">
-          <button class="button flex-center" type="button">
+          <button id="login-button" class="button button--disabled flex-center" type="button" disabled>
           로그인
           </button>
         </a>
@@ -56,5 +60,6 @@
         </div>
       </form> 
     </div>
+    <script type="module" src="/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.js"></script>
   </body>
 </html>

FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.js

@@ -0,0 +1,83 @@
+const inputEmail = document.querySelector("#form__email");
+const emailErrorMessage = document.querySelector("#form__email--message");
+const emailInvalidMessage = document.querySelector(
+  "#form__email--invalid-message"
+);
+
+const inputPassword = document.querySelector("#form__password");
+const passwordErrorMessage = document.querySelector("#form__password--message");
+const passwordInvalidMessage = document.querySelector(
+  "#form__password--invalid-message"
+);
+
+const loginButton = document.querySelector("#login-button");
+
+const toggleIcon = document.querySelector(
+  ".form__password--wrapper .input-icon"
+);
+
+function checkLoginFormValidity() {
+  const emailValue = inputEmail.value.trim();
+  const passwordValue = inputPassword.value.trim();
+
+  const emailIsValid =
+    /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+$/.test(emailValue);
+  const passwordValid = passwordValue.length >= 8;
+
+  if (emailIsValid && passwordValid) {
+    loginButton.disabled = false;
+    loginButton.classList.remove("button--disabled");
+  } else {
+    loginButton.disabled = true;
+    loginButton.classList.add("button--disabled");
+  }
+}
+
+inputEmail.addEventListener("blur", function (e) {
+  const emailValue = e.target.value.trim();
+
+  if (emailValue === "") {
+    inputEmail.style.border = "1px solid red";
+    emailErrorMessage.style.display = "block";
+    emailInvalidMessage.style.display = "none";
+  } else if (
+    !/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+$/.test(emailValue)
+  ) {
+    inputEmail.style.border = "1px solid red";
+    emailErrorMessage.style.display = "none";
+    emailInvalidMessage.style.display = "block";
+  } else {
+    inputEmail.style.border = "1px solid var(--gray-100)";
+    emailErrorMessage.style.display = "none";
+    emailInvalidMessage.style.display = "none";
+  }
+
+  checkLoginFormValidity();
+});
+
+inputPassword.addEventListener("blur", function (e) {
+  const passwordValue = e.target.value.trim();
+
+  if (passwordValue === "") {
+    inputPassword.style.border = "1px solid red";
+    passwordErrorMessage.style.display = "block";
+    passwordInvalidMessage.style.display = "none";
+  } else if (passwordValue.length < 8) {
+    inputPassword.style.border = "1px solid red";
+    passwordErrorMessage.style.display = "none";
+    passwordInvalidMessage.style.display = "block";
+  } else {
+    inputPassword.style.border = "1px solid var(--gray-100)";
+    passwordErrorMessage.style.display = "none";
+    passwordInvalidMessage.style.display = "none";
+  }
+  checkLoginFormValidity();
+});
+
+toggleIcon.addEventListener("click", function (e) {
+  inputPassword.type = inputPassword.type === "password" ? "text" : "password";
+  toggleIcon.src =
+    inputPassword.type === "password"
+      ? "images/btn_visibility_on_24px.png"
+      : "images/btn_visibility_on_24px 2.png";
+});

FE-Sprint-Mission2/FE-Sprint-Mission1-week1/signup.html

@@ -27,24 +27,31 @@
         <div class="form__user-info">
           <label for="form__email">이메일</label>
           <input id="form__email" name = "inpo__email" placeholder="이메일을 입력하세요." type="email">
+          <div id="form__email--message" class="error__message">이메일을 입력해주세요.</div>
+          <div id="form__email--invalid-message" class="error__message">잘못된 이메일 형식입니다.</div>
+
+          <label for="form__nickName">닉네임</label>
+          <input id="form__nickName" name = "inpo__nickName" placeholder="판다" type="text">
+          <div id="form__nickName--invalid-message" class="error__message">닉네임을 입력해주세요.</div>
 
-          <label for="nickName">닉네임</label>
-          <input id="nickName" name = "inpo__nickName" placeholder="판다" type="text">
 
           <div class="form__password--wrapper">
             <label for="form__password">비밀번호</label>
             <img class="input-icon" src="images/btn_visibility_on_24px.png" alt="숨김 아이콘">
             <input id="form__password" name = "inpo__password" placeholder="비밀번호를 입력하세요." type="password">
+            <div id="form__password--message" class="error__message">비밀번호를 입력해주세요.</div>
+            <div id="form__password--invalid-message" class="error__message">비밀번호를 8자 이상 입력해주세요.</div>
           </div>
 
           <div class="form__password--wrapper">
             <label for="passwordCheck">비밀번호 확인</label>
-            <img class="input-icon" src="images/btn_visibility_on_24px 2.png" alt="숨김 아이콘">
-            <input id="passwordCheck" name = "inpo__passwordCheck" placeholder="비밀번호 확인" type="text">
+            <img class="input-icon" src="images/btn_visibility_on_24px.png" alt="숨김 아이콘">
+            <input id="passwordCheck" name = "inpo__passwordCheck" placeholder="비밀번호 확인" type="password">
+            <div id="passwordCheck--message" class="error__message">비밀번호가 일치하지 않습니다.</div>
           </div>
         </div>
-        <a>
-          <button class="button flex-center" type="button" aria-label="회원가입">
+        <a href="/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/login.html">
+          <button id="signup-button" class="button button--disabled flex-center" type="button" aria-label="회원가입" disabled>
           회원가입
           </button>
         </a>
@@ -67,6 +74,6 @@
         </div>
       </form> 
     </div>
-
+    <script type="module" src="/FE-Sprint-Mission2/FE-Sprint-Mission1-week1/signup.js"></script>
   </body>
 </html>

FE-Sprint-Mission2/FE-Sprint-Mission1-week1/signup.js

@@ -0,0 +1,127 @@
+const inputEmail = document.querySelector("#form__email");
+const emailErrorMessage = document.querySelector("#form__email--message");
+const emailInvalidMessage = document.querySelector(
+  "#form__email--invalid-message"
+);
+
+const inputPassword = document.querySelector("#form__password");
+const passwordErrorMessage = document.querySelector("#form__password--message");
+const passwordInvalidMessage = document.querySelector(
+  "#form__password--invalid-message"
+);
+
+const signupButton = document.querySelector("#signup-button");
+
+const toggleIcon = document.querySelectorAll(
+  ".form__password--wrapper .input-icon"
+);
+
+const inputpasswordCheck = document.querySelector("#passwordCheck");
+const passwordCheckMessage = document.querySelector("#passwordCheck--message");
+
+const inputNickName = document.querySelector("#form__nickName");
+const nickNameInvalidMessage = document.querySelector(
+  "#form__nickName--invalid-message"
+);
+
+function checkSignupFormValidity() {
+  const emailValue = inputEmail.value.trim();
+  const passwordValue = inputPassword.value.trim();
+  const passwordCheckValue = inputpasswordCheck.value.trim();
+  const nickNameValue = inputNickName.value.trim();
+
+  const emailIsValid =
+    /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+$/.test(emailValue);
+  const passwordValid = passwordValue.length >= 8;
+
+  if (
+    emailIsValid &&
+    passwordValid &&
+    passwordValue === passwordCheckValue &&
+    nickNameValue !== ""
+  ) {
+    signupButton.disabled = false;
+    signupButton.classList.remove("button--disabled");
+  } else {
+    signupButton.disabled = true;
+    signupButton.classList.add("button--disabled");
+  }
+}
+
+inputEmail.addEventListener("blur", function (e) {
+  const emailValue = e.target.value.trim();
+
+  if (emailValue === "") {
+    inputEmail.style.border = "1px solid red";
+    emailErrorMessage.style.display = "block";
+    emailInvalidMessage.style.display = "none";
+  } else if (
+    !/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+$/.test(emailValue)
+  ) {
+    inputEmail.style.border = "1px solid red";
+    emailErrorMessage.style.display = "none";
+    emailInvalidMessage.style.display = "block";
+  } else {
+    inputEmail.style.border = "1px solid var(--gray-100)";
+    emailErrorMessage.style.display = "none";
+    emailInvalidMessage.style.display = "none";
+  }
+
+  checkSignupFormValidity();
+});
+
+inputPassword.addEventListener("blur", function (e) {
+  const passwordValue = e.target.value.trim();
+
+  if (passwordValue === "") {
+    inputPassword.style.border = "1px solid red";
+    passwordErrorMessage.style.display = "block";
+    passwordInvalidMessage.style.display = "none";
+  } else if (passwordValue.length < 8) {
+    inputPassword.style.border = "1px solid red";
+    passwordErrorMessage.style.display = "none";
+    passwordInvalidMessage.style.display = "block";
+  } else {
+    inputPassword.style.border = "1px solid var(--gray-100)";
+    passwordErrorMessage.style.display = "none";
+    passwordInvalidMessage.style.display = "none";
+  }
+  checkSignupFormValidity();
+});
+
+inputpasswordCheck.addEventListener("blur", function (e) {
+  const passwordValue = inputPassword.value.trim();
+  const passwordCheckValue = e.target.value.trim();
+
+  if (passwordValue !== passwordCheckValue) {
+    inputpasswordCheck.style.border = "1px solid red";
+    passwordCheckMessage.style.display = "block";
+  } else {
+    inputpasswordCheck.style.border = "1px solid var(--gray-100)";
+    passwordCheckMessage.style.display = "none";
+  }
+  checkSignupFormValidity();
+});
+
+inputNickName.addEventListener("blur", function (e) {
+  const nickNameValue = e.target.value.trim();
+
+  if (nickNameValue === "") {
+    inputNickName.style.border = "1px solid red";
+    nickNameInvalidMessage.style.display = "block";
+  }
+  checkSignupFormValidity();
+});
+
+toggleIcon.forEach(function (icon) {
+  icon.addEventListener("click", function () {
+    const wrapper = icon.closest(".form__password--wrapper");
+    const input = wrapper.querySelector("input");
+
+    const isPassword = input.type === "password";
+    input.type = isPassword ? "text" : "password";
+    icon.src = isPassword
+      ? "images/btn_visibility_on_24px 2.png"
+      : "images/btn_visibility_on_24px.png";
+  });
+});

FE-Sprint-Mission2/FE-Sprint-Mission1-week1/styles/login.css

@@ -62,6 +62,20 @@ input {
   line-height: 32px;
 }
 
+.button--disabled {
+  background-color: var(--gray-400);
+  width: 640px;
+  height: 56px;
+  margin: 0 auto;
+  padding: 16px;
+  border: 1px solid var(--gray-400);
+  border-radius: 40px;
+  color: var(--gray-100);
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 32px;
+}
+
 .form__social-login {
   display: flex;
   justify-content: space-between;
@@ -90,6 +104,14 @@ input {
   color: var(--gray-800);
 }
 
+.error__message {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--error);
+  display: none;
+  margin: 0 16px 18px;
+}
+
 a {
   color: var(--blue);
   text-decoration: underline;

FE-Sprint-Mission2/FE-Sprint-Mission1-week1/styles/reset.css

@@ -140,6 +140,7 @@ table {
   --gray-50: #f9fafb;
   --blue: #3692ff;
   --skyBlue: #e6f2ff;
+  --error: #f74747;
 }
 
 * {