signup 페이지도 완료

codeit-bootcamp-frontend · Sep 28, 2024 · 927ed0a · 927ed0a
1 parent 036ebd3
commit 927ed0a
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 29 deletions.
diff --git a/css/login.css b/css/login.css
@@ -96,7 +96,7 @@ body {
 .error-message {
   color: red;
   font-size: 12px;
-  margin-top: 5px;
+
   margin: 0;
 }
 

diff --git a/css/signup.css b/css/signup.css
@@ -45,7 +45,7 @@ body {
   display: flex;
   flex-direction: column;
   height: 98px;
-  gap: 16px;
+  gap: 12px;
 }
 .form-group-input {
   height: 56px;
@@ -97,7 +97,19 @@ body {
 .footer-login-link {
   color: var(--blue-primary);
 }
+.error-message {
+  color: red;
+  font-size: 12px;
+}
 
+.invalid-input {
+  border: 2px solid red;
+}
+
+button:disabled {
+  background-color: grey;
+  cursor: not-allowed;
+}
 /*  ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ mobile ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ  375px~767px */
 @media (max-width: 767px) {
   body {

diff --git a/js/login.js b/js/login.js
@@ -5,58 +5,79 @@ const passwordError = document.getElementById("password-error");
 const loginButton = document.getElementById("login-button");
 
 // 이메일 유효성 검사 함수
-function validateEmail() {
+function validateEmail(showError = true) {
   const emailValue = emailInput.value.trim();
-  emailError.textContent = "";
-  emailInput.classList.remove("invalid-input");
+  if (showError) {
+    emailError.textContent = ""; // 에러 메시지 초기화
+    emailInput.classList.remove("invalid-input"); // 빨간 테두리 제거
+  }
 
   if (!emailValue) {
-    emailError.textContent = "이메일을 입력해주세요.";
-    emailInput.classList.add("invalid-input");
+    if (showError) {
+      emailError.textContent = "이메일을 입력해주세요.";
+      emailInput.classList.add("invalid-input"); // 빨간 테두리 추가
+    }
     return false;
   } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(emailValue)) {
-    emailError.textContent = "잘못된 이메일 형식입니다.";
-    emailInput.classList.add("invalid-input");
+    if (showError) {
+      emailError.textContent = "잘못된 이메일 형식입니다.";
+      emailInput.classList.add("invalid-input");
+    }
     return false;
   }
 
   return true;
 }
 
 // 비밀번호 유효성 검사 함수
-function validatePassword() {
+function validatePassword(showError = true) {
   const passwordValue = passwordInput.value.trim();
-  passwordError.textContent = "";
-  passwordInput.classList.remove("invalid-input");
+  if (showError) {
+    passwordError.textContent = ""; // 에러 메시지 초기화
+    passwordInput.classList.remove("invalid-input"); // 빨간 테두리 제거
+  }
 
   if (!passwordValue) {
-    passwordError.textContent = "비밀번호를 입력해주세요.";
-    passwordInput.classList.add("invalid-input");
+    if (showError) {
+      passwordError.textContent = "비밀번호를 입력해주세요.";
+      passwordInput.classList.add("invalid-input"); // 빨간 테두리 추가
+    }
     return false;
   } else if (passwordValue.length < 8) {
-    passwordError.textContent = "비밀번호를 8자 이상 입력해주세요.";
-    passwordInput.classList.add("invalid-input");
+    if (showError) {
+      passwordError.textContent = "비밀번호를 8자 이상 입력해주세요.";
+      passwordInput.classList.add("invalid-input");
+    }
     return false;
   }
 
   return true;
 }
 
-// 폼 전체 유효성 검사 함수
-function validateForm() {
-  const isEmailValid = validateEmail();
-  const isPasswordValid = validatePassword();
+// 로그인 버튼 상태 업데이트 함수
+function updateLoginButtonState() {
+  // 여기서는 에러 메시지를 보여주지 않음 (단순 상태 확인)
+  const isEmailValid = validateEmail(false);
+  const isPasswordValid = validatePassword(false);
 
+  // 둘 다 유효할 때만 버튼 활성화
   loginButton.disabled = !(isEmailValid && isPasswordValid);
 }
 
-// 포커스 아웃 시 각각의 유효성 검사 실행
-emailInput.addEventListener("focusout", validateEmail);
-passwordInput.addEventListener("focusout", validatePassword);
+// 포커스 아웃 시 해당 필드만 유효성 검사
+emailInput.addEventListener("focusout", () => {
+  validateEmail(); // 이메일 필드만 유효성 검사
+  updateLoginButtonState(); // 전체 폼 상태 업데이트
+});
+
+passwordInput.addEventListener("focusout", () => {
+  validatePassword(); // 비밀번호 필드만 유효성 검사
+  updateLoginButtonState(); // 전체 폼 상태 업데이트
+});
 
-// 입력 중일 때 폼 전체의 유효성 검사
-emailInput.addEventListener("input", validateForm);
-passwordInput.addEventListener("input", validateForm);
+// 입력 중일 때 폼 전체의 유효성 검사 (에러 메시지는 표시되지 않음)
+emailInput.addEventListener("input", updateLoginButtonState);
+passwordInput.addEventListener("input", updateLoginButtonState);
 
 // 로그인 버튼을 눌렀을 때 페이지 이동 처리
 document

diff --git a/js/signup.js b/js/signup.js
@@ -0,0 +1,120 @@
+const emailInput = document.getElementById("email-input");
+const nicknameInput = document.getElementById("nickname-input");
+const passwordInput = document.getElementById("password-input");
+const passwordConfirmInput = document.getElementById("password-confirm-input");
+const emailError = document.getElementById("email-error");
+const nicknameError = document.getElementById("nickname-error");
+const passwordError = document.getElementById("password-error");
+const passwordConfirmError = document.getElementById("password-confirm-error");
+const signupButton = document.getElementById("signup-button");
+
+// 이메일 유효성 검사
+function validateEmail() {
+  const emailValue = emailInput.value.trim();
+  emailError.textContent = ""; // 에러 메시지 초기화
+  emailInput.classList.remove("invalid-input"); // 빨간 테두리 제거
+
+  if (!emailValue) {
+    emailError.textContent = "이메일을 입력해주세요.";
+    emailInput.classList.add("invalid-input"); // 빨간 테두리 추가
+    return false;
+  } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(emailValue)) {
+    emailError.textContent = "잘못된 이메일 형식입니다.";
+    emailInput.classList.add("invalid-input");
+    return false;
+  }
+
+  return true;
+}
+
+// 닉네임 유효성 검사
+function validateNickname() {
+  const nicknameValue = nicknameInput.value.trim();
+  nicknameError.textContent = ""; // 에러 메시지 초기화
+  nicknameInput.classList.remove("invalid-input");
+
+  if (!nicknameValue) {
+    nicknameError.textContent = "닉네임을 입력해주세요.";
+    nicknameInput.classList.add("invalid-input");
+    return false;
+  }
+
+  return true;
+}
+
+// 비밀번호 유효성 검사
+function validatePassword() {
+  const passwordValue = passwordInput.value.trim();
+  passwordError.textContent = "";
+  passwordInput.classList.remove("invalid-input");
+
+  if (!passwordValue) {
+    passwordError.textContent = "비밀번호를 입력해주세요.";
+    passwordInput.classList.add("invalid-input");
+    return false;
+  } else if (passwordValue.length < 8) {
+    passwordError.textContent = "비밀번호를 8자 이상 입력해주세요.";
+    passwordInput.classList.add("invalid-input");
+    return false;
+  }
+
+  return true;
+}
+
+// 비밀번호 확인 유효성 검사
+function validatePasswordConfirm() {
+  const passwordValue = passwordInput.value.trim();
+  const passwordConfirmValue = passwordConfirmInput.value.trim();
+  passwordConfirmError.textContent = "";
+  passwordConfirmInput.classList.remove("invalid-input");
+
+  if (passwordValue !== passwordConfirmValue) {
+    passwordConfirmError.textContent = "비밀번호가 일치하지 않습니다.";
+    passwordConfirmInput.classList.add("invalid-input");
+    return false;
+  }
+
+  return true;
+}
+
+// 포커스 아웃 시 해당 필드에 대한 유효성 검사만 수행
+emailInput.addEventListener("focusout", () => {
+  validateEmail(); // 이메일 필드만 유효성 검사
+  updateSignupButtonState(); // 회원가입 버튼 상태 업데이트
+});
+
+nicknameInput.addEventListener("focusout", () => {
+  validateNickname(); // 닉네임 필드만 유효성 검사
+  updateSignupButtonState();
+});
+
+passwordInput.addEventListener("focusout", () => {
+  validatePassword(); // 비밀번호 필드만 유효성 검사
+  updateSignupButtonState();
+});
+
+passwordConfirmInput.addEventListener("focusout", () => {
+  validatePasswordConfirm(); // 비밀번호 확인 필드만 유효성 검사
+  updateSignupButtonState();
+});
+
+// 모든 필드가 유효할 때만 회원가입 버튼을 활성화하는 함수
+function updateSignupButtonState() {
+  const isFormValid =
+    validateEmail() &&
+    validateNickname() &&
+    validatePassword() &&
+    validatePasswordConfirm();
+  signupButton.disabled = !isFormValid; // 폼이 유효하지 않으면 버튼 비활성화
+}
+
+// 회원가입 버튼 클릭 시 페이지 이동 처리
+document
+  .querySelector(".email-signup-section-form")
+  .addEventListener("submit", (event) => {
+    event.preventDefault(); // 기본 제출 동작 방지
+
+    if (!signupButton.disabled) {
+      window.location.href = "/signin"; // 유효한 경우 /signin으로 이동
+    }
+  });
diff --git a/pages/login.html b/pages/login.html
@@ -45,7 +45,7 @@
                 class="form-group-input"
                 placeholder="이메일을 입력해주세요"
               />
-              <div id="email-error" class="error-message" style={{margin:'0'}}></div>
+              <div id="email-error" class="error-message"></div>
             </div>
 
             <div class="form-group">

diff --git a/pages/signup.html b/pages/signup.html
@@ -48,7 +48,9 @@
                 class="form-group-input"
                 placeholder="이메일을 입력해주세요"
               />
+              <div id="email-error" class="error-message"></div>
             </div>
+
             <div class="form-group">
               <label class="font-label" for="nickname-input">닉네임</label>
               <input
@@ -57,6 +59,7 @@
                 class="form-group-input"
                 placeholder="닉네임을 입력해주세요"
               />
+              <div id="nickname-error" class="error-message"></div>
             </div>
             <div class="form-group">
               <label for="password-input">비밀번호</label>
@@ -66,6 +69,7 @@
                 class="form-group-input"
                 placeholder="비밀번호를 입력해주세요"
               />
+              <div id="password-error" class="error-message"></div>
             </div>
             <div class="form-group">
               <label for="password-confirm-input">비밀번호 확인</label>
@@ -75,9 +79,16 @@
                 class="form-group-input"
                 placeholder="비밀번호를 다시 한 번 입력해주세요"
               />
+              <div id="password-confirm-error" class="error-message"></div>
             </div>
-
-            <button class="button-login" type="submit">로그인</button>
+            <button
+              id="signup-button"
+              class="button-login"
+              type="submit"
+              disabled
+            >
+              회원가입
+            </button>
           </form>
         </section>
 
@@ -101,5 +112,6 @@
         </div>
       </footer>
     </div>
+    <script src="../js/signup.js"></script>
   </body>
 </html>