[한동형] Sprint 4

panda-market/login.html

@@ -15,7 +15,7 @@
       <form action="#" class="login-form">
         <div class="input-box">
           <label class="label-text" for="email">이메일 </label>
-          <div class="input-wrapper">
+          <div class="input-wrapper email">
             <input
               type="email"
               id="email"
@@ -24,10 +24,11 @@
               required
             />
           </div>
+          <div class="email error"></div>
         </div>
         <div class="input-box">
           <label class="label-text" for="password">비밀번호 </label>
-          <div class="input-wrapper">
+          <div class="input-wrapper password">
             <input
               type="password"
               id="password"
@@ -37,8 +38,14 @@
             />
             <img src="./img/closedEye.svg" alt="눈 감은 아이콘" />
           </div>
+          <div class="password error"></div>
         </div>
-        <button>
+        <button
+          type="button"
+          class="login-btn disabled"
+          onclick="location.href='./items.html'"
+          disabled
+        >
           <span class="btn-text">로그인</span>
         </button>
       </form>
@@ -58,5 +65,6 @@
         <a class="sign-up-anchor" href="sign-up.html">회원가입</a>
       </div>
     </div>
+    <script src="./scripts/login.js"></script>
   </body>
 </html>

panda-market/scripts/login.js

@@ -0,0 +1,61 @@
+const emailInput = document.querySelector("#email");
+const passwordInput = document.querySelector("#password");
+const emailError = document.querySelector(".email.error");
+const passwordError = document.querySelector(".password.error");
+const loginBtn = document.querySelector(".login-btn");
+const emailInputWrapper = document.querySelector(".input-wrapper.email");
+const passwordInputWrapper = document.querySelector(".input-wrapper.password");
+const ENTER_EMAIL = "이메일을 입력해주세요.";
+const ENTER_PASSWORD = "비밀번호를 입력해주세요.";
+const WRONG_EMAIL = "잘못된 이메일 형식입니다";
+const PASSWORD_NEED_EIGHT_WORDS = "비밀번호를 8자 이상 입력해주세요.";
+const NO_ERROR_MESSAGE = "";
+
+const toggleLoginButton = () => {
+  const isEmailValid =
+    emailInput.value && emailError.innerHTML === NO_ERROR_MESSAGE;
+  const isPasswordValid =
+    passwordInput.value && passwordError.innerHTML === NO_ERROR_MESSAGE;
+
+  if (isEmailValid && isPasswordValid) {
+    loginBtn.classList.remove("disabled");
+    loginBtn.disabled = false;
+  } else {
+    loginBtn.classList.add("disabled");
+    loginBtn.disabled = true;
+  }
+};
+
+const emailValid = () => {
+  if (!emailInput.value) {
+    emailError.innerHTML = ENTER_EMAIL;
+    emailInputWrapper.style.border = "3px solid #F74747";
+  }
+  if (emailInput.value && !emailInput.value.includes("@")) {
+    emailError.innerHTML = WRONG_EMAIL;
+    emailInputWrapper.style.border = "3px solid #F74747";
+  }
+  if (emailInput.value && emailInput.value.includes("@")) {
+    emailError.innerHTML = NO_ERROR_MESSAGE;
+    emailInputWrapper.style.border = "none";
+  }
+  toggleLoginButton();
+};
+const passwordValid = () => {
+  if (!passwordInput.value) {
+    passwordError.innerHTML = ENTER_PASSWORD;
+    passwordInputWrapper.style.border = "3px solid #F74747";
+  }
+  if (passwordInput.value && passwordInput.value.length < 8) {
+    passwordError.innerHTML = PASSWORD_NEED_EIGHT_WORDS;
+    passwordInputWrapper.style.border = "3px solid #F74747";
+  }
+  if (passwordInput.value && passwordInput.value.length >= 8) {
+    passwordError.innerHTML = NO_ERROR_MESSAGE;
+    passwordInputWrapper.style.border = "none";
+  }
+  toggleLoginButton();
+};
+
+emailInput.addEventListener("blur", emailValid);
+passwordInput.addEventListener("blur", passwordValid);

panda-market/scripts/sign-up.js

@@ -0,0 +1,105 @@
+const emailInput = document.querySelector("#email");
+const passwordInput = document.querySelector("#password");
+const nicknameInput = document.querySelector("#nickname");
+const checkPasswordInput = document.querySelector("#checkPassword");
+const emailError = document.querySelector(".email.error");
+const passwordError = document.querySelector(".password.error");
+const checkPasswordError = document.querySelector(".checkPassword.error");
+const nicknameError = document.querySelector(".nickname.error");
+const loginBtn = document.querySelector(".login-btn");
+const emailInputWrapper = document.querySelector(".input-wrapper.email");
+const passwordInputWrapper = document.querySelector(".input-wrapper.password");
+const nicknameInputWrapper = document.querySelector(".input-wrapper.nickname");
+const checkPasswordInputWrapper = document.querySelector(
+  ".input-wrapper.checkPassword"
+);
+const ENTER_EMAIL = "이메일을 입력해주세요.";
+const ENTER_NICKNAME = "닉네임을 입력해주세요.";
+const ENTER_PASSWORD = "비밀번호를 입력해주세요.";
+const WRONG_CHECK_PASSWORD = "비밀번호가 일치하지 않습니다.";
+const WRONG_EMAIL = "잘못된 이메일 형식입니다";
+const PASSWORD_NEED_EIGHT_WORDS = "비밀번호를 8자 이상 입력해주세요.";
+const NO_ERROR_MESSAGE = "";
+
+const toggleLoginButton = () => {
+  const isEmailValid =
+    emailInput.value && emailError.innerHTML === NO_ERROR_MESSAGE;
+  const isPasswordValid =
+    passwordInput.value && passwordError.innerHTML === NO_ERROR_MESSAGE;
+  const isNicknameValid =
+    nicknameInput.value && nicknameError.innerHTML === NO_ERROR_MESSAGE;
+  const isCheckPasswordValid =
+    checkPasswordInput.value &&
+    checkPasswordError.innerHTML === NO_ERROR_MESSAGE;
+
+  if (
+    isEmailValid &&
+    isPasswordValid &&
+    isNicknameValid &&
+    isCheckPasswordValid
+  ) {
+    loginBtn.classList.remove("disabled");
+    loginBtn.disabled = false;
+  } else {
+    loginBtn.classList.add("disabled");
+    loginBtn.disabled = true;
+  }
+};
+const emailValid = () => {
+  if (!emailInput.value) {
+    emailError.innerHTML = ENTER_EMAIL;
+    emailInputWrapper.style.border = "3px solid #F74747";
+  }
+  if (emailInput.value && !emailInput.value.includes("@")) {
+    emailError.innerHTML = WRONG_EMAIL;
+    emailInputWrapper.style.border = "3px solid #F74747";
+  }
+  if (emailInput.value && emailInput.value.includes("@")) {
+    emailError.innerHTML = NO_ERROR_MESSAGE;
+    emailInputWrapper.style.border = "none";
+  }
+  toggleLoginButton();
+};
+const passwordValid = () => {
+  if (!passwordInput.value) {
+    passwordError.innerHTML = ENTER_PASSWORD;
+    passwordInputWrapper.style.border = "3px solid #F74747";
+  }
+  if (passwordInput.value && passwordInput.value.length < 8) {
+    passwordError.innerHTML = PASSWORD_NEED_EIGHT_WORDS;
+    passwordInputWrapper.style.border = "3px solid #F74747";
+  }
+  if (passwordInput.value && passwordInput.value.length >= 8) {
+    passwordError.innerHTML = NO_ERROR_MESSAGE;
+    passwordInputWrapper.style.border = "none";
+  }
+  toggleLoginButton();
+};
+const nicknameValid = () => {
+  if (!nicknameInput.value) {
+    nicknameError.innerHTML = ENTER_NICKNAME;
+    nicknameInputWrapper.style.border = "3px solid #F74747";
+  } else {
+    nicknameError.innerHTML = NO_ERROR_MESSAGE;
+    nicknameInputWrapper.style.border = "none";
+  }
+
+  toggleLoginButton();
+};
+
+const checkPasswordValid = () => {
+  if (passwordInput.value !== checkPasswordInput.value) {
+    checkPasswordError.innerHTML = WRONG_CHECK_PASSWORD;
+    checkPasswordInputWrapper.style.border = "3px solid #F74747";
+  } else {
+    checkPasswordError.innerHTML = NO_ERROR_MESSAGE;
+    checkPasswordInputWrapper.style.border = "none";
+  }
+
+  toggleLoginButton();
+};
+
+emailInput.addEventListener("blur", emailValid);
+passwordInput.addEventListener("blur", passwordValid);
+nicknameInput.addEventListener("blur", nicknameValid);
+checkPasswordInput.addEventListener("blur", checkPasswordValid);

panda-market/sign-in.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>판다마켓</title>
+  </head>
+  <body>
+    sign-in
+  </body>
+</html>

panda-market/sign-up.html

@@ -15,7 +15,7 @@
       <form action="#" class="sign-up-form">
         <div class="input-box">
           <label class="label-text" for="email">이메일 </label>
-          <div class="input-wrapper">
+          <div class="input-wrapper email">
             <input
               type="email"
               id="email"
@@ -24,10 +24,11 @@
               required
             />
           </div>
+          <div class="email error"></div>
         </div>
         <div class="input-box">
           <label class="label-text" for="nickname">닉네임 </label>
-          <div class="input-wrapper">
+          <div class="input-wrapper nickname">
             <input
               type="text"
               id="nickname"
@@ -36,10 +37,11 @@
               required
             />
           </div>
+          <div class="nickname error"></div>
         </div>
         <div class="input-box">
           <label class="label-text" for="password">비밀번호 </label>
-          <div class="input-wrapper">
+          <div class="input-wrapper password">
             <input
               type="password"
               id="password"
@@ -49,10 +51,11 @@
             />
             <img src="./img/closedEye.svg" alt="눈 감은 아이콘" />
           </div>
+          <div class="password error"></div>
         </div>
         <div class="input-box">
           <label class="label-text" for="checkPassword">비밀번호 확인 </label>
-          <div class="input-wrapper">
+          <div class="input-wrapper checkPassword">
             <input
               type="password"
               id="checkPassword"
@@ -62,8 +65,14 @@
             />
             <img src="./img/closedEye.svg" alt="눈 감은 아이콘" />
           </div>
+          <div class="checkPassword error"></div>
         </div>
-        <button disabled>
+        <button
+          type="button"
+          class="login-btn disabled"
+          onclick="location.href='./sign-in.html'"
+          disabled
+        >
           <span class="btn-text">회원가입</span>
         </button>
       </form>
@@ -83,5 +92,6 @@
         <a class="login-anchor" href="login.html">로그인</a>
       </div>
     </div>
+    <script src="./scripts/sign-up.js"></script>
   </body>
 </html>

panda-market/styles/login.css

@@ -9,6 +9,11 @@
   gap: 40px;
 }
 
+.login-logo-image {
+  width: 103px;
+  height: 103px;
+}
+
 .login-logo {
   display: flex;
   align-items: center;
@@ -68,12 +73,22 @@ input::placeholder {
   border: 3px solid #3692ff;
 }
 
+.error {
+  font-family: Pretendard;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 24px;
+  color: #f74747;
+  margin-left: 16px;
+}
+
 button {
   width: 640px;
   border: none;
-  background-color: #9ca3af;
+  background-color: #3692ff;
   border-radius: 40px;
   padding: 12px 0;
+  cursor: pointer;
 }
 .btn-text {
   display: inline-block;
@@ -83,10 +98,11 @@ button {
   text-align: center;
   color: #f3f4f6;
 }
-form:has(#email:valid):has(#password:valid) button {
-  background-color: #3692ff;
-  cursor: pointer;
+button.disabled {
+  background-color: #9ca3af;
+  pointer-events: none;
 }
+
 .sns-login-box {
   display: flex;
   width: 640px;
@@ -129,3 +145,24 @@ form:has(#email:valid):has(#password:valid) button {
   line-height: 16.71px;
   text-align: left;
 }
+
+@media screen and (min-width: 375px) and (max-width: 768px) {
+  .container {
+    max-width: 400px;
+  }
+  .login-logo-image {
+    width: 52px;
+    height: 52px;
+  }
+  .home-anchor {
+    font-size: 33px;
+    line-height: 45px;
+  }
+  .login-form,
+  .input-wrapper,
+  .input-box,
+  button,
+  .sns-login-box {
+    width: 100%;
+  }
+}