Basic 전주형 sprint3

frontend/login.html

@@ -84,21 +84,31 @@
               <input
                 name="email"
                 type="email"
+                id="login-email"
                 placeholder="이메일을 입력해주세요"
                 required
               />
             </label>
-
+            <p class="err-msg" id="login-email-err-msg"></p>
             <label>
               비밀번호
               <input
                 name="password"
                 type="password"
+                id="login-pw"
                 placeholder="비밀번호를 입력해주세요"
                 required
               />
+              <p class="err-msg" id="login-pw-err-msg"></p>
             </label>
-            <button class="button-submit-login" type="submit">로그인</button>
+            <button
+              class="button-submit-login"
+              id="login-btn"
+              type="submit"
+              disabled
+            >
+              로그인
+            </button>
           </form>
           <!-- <input class="button-submit-login" type="submit" value="로그인" /> -->
         </div>
@@ -129,5 +139,6 @@
         </div>
       </div>
     </div>
+    <script src="./scripts/auth.js" defer></script>
   </body>
 </html>

frontend/scripts/auth.js

@@ -0,0 +1,188 @@
+// login
+const loginEmail = document.getElementById('login-email');
+const loginPw = document.getElementById('login-pw');
+const loginBtn = document.getElementById('login-btn');
+const loginEmailError = document.getElementById('login-email-err-msg');
+const loginPwError = document.getElementById('login-pw-err-msg');
+
+// signup
+const signupEmail = document.getElementById('signup-email');
+const signupUserName = document.getElementById('signup-username');
+const signupPw = document.getElementById('signup-pw');
+const signupPwCheck = document.getElementById('signup-pw-check');
+const signupPwCheckError = document.getElementById('signup-pw-check-err-msg');
+const signupBtn = document.getElementById('signup-btn');
+const signupEmailError = document.getElementById('signup-email-err-msg');
+const signupPwError = document.getElementById('signup-pw-err-msg');
+
+const USER_DATA = [
+  { email: 'codeit1@codeit.com', password: 'codeit101!' },
+  { email: 'codeit2@codeit.com', password: 'codeit202!' },
+  { email: 'codeit3@codeit.com', password: 'codeit303!' },
+  { email: 'codeit4@codeit.com', password: 'codeit404!' },
+  { email: 'codeit5@codeit.com', password: 'codeit505!' },
+  { email: 'codeit6@codeit.com', password: 'codeit606!' },
+];
+
+const emailRegex = /^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
+
+// login page
+if (loginEmail && loginPw && loginBtn && loginEmailError && loginPwError) {
+  const validateEmail = () => {
+    const email = loginEmail.value.trim();
+
+    if (!emailRegex.test(email)) {
+      loginEmailError.textContent = '잘못된 이메일 형식입니다';
+      return false;
+    }
+
+    loginEmailError.textContent = '';
+    return true;
+  };
+
+  const validatePW = () => {
+    const password = loginPw.value.trim();
+
+    if (password.length < 8) {
+      loginPwError.textContent = '비밀번호를 8자 이상 입력해주세요.';
+      return false;
+    }
+
+    loginPwError.textContent = '';
+    return true;
+  };
+
+  const updateLoginBtn = () => {
+    // 둘 다 유효해야
+    if (!validateEmail() || !validatePW()) {
+      loginBtn.disabled = true;
+    } else {
+      loginBtn.disabled = false;
+    }
+  };
+
+  // input(타이핑) 시 버튼 갱신
+  loginEmail.addEventListener('input', updateLoginBtn);
+  loginPw.addEventListener('input', updateLoginBtn);
+
+  // focus out(blur) 시 에러메시지 표시 + 버튼 갱신
+  loginEmail.addEventListener('blur', updateLoginBtn);
+  loginPw.addEventListener('blur', updateLoginBtn);
+
+  // 로그인 버튼 클릭
+  loginBtn.addEventListener('click', (event) => {
+    event.preventDefault();
+    if (loginBtn.disabled) return;
+
+    const inputEmail = loginEmail.value.trim();
+    const inputPw = loginPw.value.trim();
+
+    const user = USER_DATA.find((u) => u.email === inputEmail);
+
+    if (!user || user.password !== inputPw) {
+      window.alert('비밀번호가 일치하지 않습니다.');
+      return;
+    }
+
+    window.location.href = './items.html';
+  });
+}
+
+// signup page
+if (signupEmail && signupUserName && signupPw && signupPwCheck && signupBtn) {
+  const checkEmailExists = () => {
+    const email = signupEmail.value.trim();
+    if (USER_DATA.some((user) => user.email === email)) {
+      window.alert('사용중인 이메일입니다!');
+      return true;
+    }
+    return false;
+  };
+
+  const validateSignupEmail = () => {
+    const email = signupEmail.value.trim();
+
+    if (!emailRegex.test(email)) {
+      signupEmailError.textContent = '잘못된 이메일 형식입니다';
+      return false;
+    }
+
+    signupEmailError.textContent = '';
+    return true;
+  };
+
+  const validateSignupPW = () => {
+    const password = signupPw.value.trim();
+
+    if (password.length < 8) {
+      signupPwError.textContent = '비밀번호를 8자 이상 입력해주세요.';
+      return false;
+    }
+
+    signupPwError.textContent = '';
+    return true;
+  };
+
+  const validateSignupUserName = () => {
+    const name = signupUserName.value.trim();
+    return name ? true : false;
+  };
+
+  const validatePwCheck = () => {
+    const pw1 = signupPw.value.trim();
+    const pw2 = signupPwCheck.value.trim();
+
+    if (pw1 !== pw2) {
+      signupPwCheckError.textContent = '비밀번호가 일치하지 않습니다.';
+      return false;
+    }
+
+    signupPwCheckError.textContent = '';
+    return true;
+  };
+
+  const updateSignupBtn = () => {
+    if (
+      !validateSignupEmail() ||
+      !validateSignupUserName() ||
+      !validateSignupPW() ||
+      !validatePwCheck() ||
+      checkEmailExists()
+    ) {
+      signupBtn.disabled = true;
+    } else {
+      signupBtn.disabled = false;
+    }
+  };
+
+  signupEmail.addEventListener('input', updateSignupBtn);
+  signupUserName.addEventListener('input', updateSignupBtn);
+  signupPw.addEventListener('input', updateSignupBtn);
+  signupPwCheck.addEventListener('input', updateSignupBtn);
+  signupEmail.addEventListener('blur', updateSignupBtn);
+  signupUserName.addEventListener('blur', updateSignupBtn);
+  signupPw.addEventListener('blur', updateSignupBtn);
+  signupPwCheck.addEventListener('blur', updateSignupBtn);
+
+  console.log(signupEmail.value);
+  console.log(signupPw.value);
+  console.log(signupPwCheck.value);
+  console.log(signupUserName.value);
+
+  // 회원가입 버튼 클릭
+  signupBtn.addEventListener('click', (event) => {
+    event.preventDefault();
+
+    console.log(signupEmail.value);
+    console.log(signupPw.value);
+    console.log(signupPwCheck.value);
+    console.log(signupUserName.value);
+
+    if (checkEmailExists()) {
+      window.alert('사용 중인 이메일입니다');
+      return;
+    }
+
+    window.location.href = './login.html';
+  });
+}

frontend/signup.html

@@ -12,6 +12,7 @@
     />
     <link rel="stylesheet" href="./styles/global.css" />
     <link rel="stylesheet" href="./styles/login.css" />
+    <link rel="stylesheet" href="./styles/singup.css" />
   </head>
   <body>
     <div id="signup-box" class="login-box">
@@ -84,15 +85,18 @@
               <input
                 name="email"
                 type="email"
+                id="signup-email"
                 placeholder="이메일을 입력해주세요"
                 required
               />
+              <p class="err-msg" id="signup-email-err-msg"></p>
             </label>
             <label>
               닉네임
               <input
                 name="username"
                 type="text"
+                id="signup-username"
                 placeholder="닉네임을 입력해주세요"
                 required
               />
@@ -102,20 +106,31 @@
               <input
                 name="password"
                 type="password"
+                id="signup-pw"
                 placeholder="비밀번호를 입력해주세요"
                 required
               />
+              <p class="err-msg" id="signup-pw-err-msg"></p>
             </label>
             <label>
               비밀번호 확인
               <input
                 name="password"
                 type="password"
+                id="signup-pw-check"
                 placeholder="비밀번호를 다시 한 번 입력해주세요"
                 required
               />
+              <p class="err-msg" id="signup-pw-check-err-msg"></p>
             </label>
-            <button class="button-submit-signup" type="submit">회원가입</button>
+            <button
+              class="button-submit-signup"
+              id="signup-btn"
+              type="submit"
+              disabled
+            >
+              회원가입
+            </button>
           </form>
           <!-- <input class="button-submit-signup" type="submit" value="회원가입" /> -->
         </div>
@@ -146,5 +161,6 @@
         </div>
       </div>
     </div>
+    <script src="./scripts/auth.js" defer></script>
   </body>
 </html>

frontend/styles/global.css

@@ -79,7 +79,7 @@ body {
 
 .link-home {
   color: #3692ff;
-  font-family: "ROKAF Sans";
+  font-family: 'ROKAF Sans';
   font-size: 25.633px;
   font-style: normal;
   font-weight: 700;
@@ -190,3 +190,29 @@ footer {
   align-items: center;
   flex-shrink: 0;
 }
+
+/* tablet size */
+@media (max-width: 1199px) {
+  .navbar {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+
+  footer {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
+
+/* Mobile size */
+@media (max-width: 743px) {
+  .navbar {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  footer {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+}