[최제원] Sprint4

[CJewon]

요구사항

기본

로그인 홈페이지

• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다,
• 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
• input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
• Input 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.
• 활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다

회원가입 홈페이지

• 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
• 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다,
• 비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
• 닉네임 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “닉네임을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
• 비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않습니다..” 에러 메세지를 보입니다.
• input 에 빈 값이 있거나 에러 메세지가 있으면 ‘회원가입’ 버튼은 비활성화 됩니다.
• Input 에 유효한 값을 입력하면 ‘회원가입' 버튼이 활성화 됩니다.
• 활성화된 ‘회원가입’ 버튼을 누르면 “/signin” 로 이동합니다

심화

• 눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.
• 비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이도록 합니다.

주요 변경사항

스크린샷

멘토에게

• form이나 input 태그 관련해서 추가해야하는 속성이나 불필요한 속성이 있다면 PR 부탁드립니다 !
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[CJewon]

안녕하세요 멘토님 ! 작업을 하다보니 반복되는 함수(로직)이 눈에 들어와 분리하는 작업을 시도해보려고 하는데 괜찮을까요..?
일단 생각해본 구성은 login.html에 관한 이벤트리스너 관리는 login.js 에서, signup.html에 관한 이벤트리스너 관리는 signup.js에서 하되, 모든 함수(로직)는 inputFocus.js안에서 만들어놓으려고 합니다. 모든 함수(로직)는 이벤트리스너 관리하는 js파일로 export하고, 필요한 변수들은 파라미터로 전달하는 방식입니다.

[kich555]

고생하셨습니다!

[kich555]

각각의 조건을 변수로 등록하고 활용하면 좀더 가독성이 좋을것 같네요 ㅎ

    const isEmailValid = emailErrorMessage.textContent === "";
    const isPasswordValid = passwordErrorMessage.textContent === "";
    const isEnabled = isEmailValid && isPasswordValid;

    loginButton.disabled = !isEnabled;
    loginButton.style.backgroundColor = isEnabled ? "#3692ff" : "#9ca3af";

[kich555]

위 구문이 지금 지속적으로 반복되는데

  // 에러 메시지 표시 및 입력 필드 스타일 변경 함수
  function showError(inputElement, errorElement, message) {
    errorElement.textContent = message;
    errorElement.style.display = "block";
    inputElement.classList.add("error");
  }

  // 에러 메시지 숨기고 입력 필드 스타일 복원하는 함수
  function hideError(inputElement, errorElement) {
    errorElement.textContent = "";
    errorElement.style.display = "none";
    inputElement.classList.remove("error");
  }

이렇게 별도의 함수로 빼는게 어때요?

[kich555]

최종적으로는

   if (!emailValue) {
      showError(inputEmail, emailErrorMessage, "이메일을 입력해주세요.");
    } else if (!emailRegex.test(emailValue)) {
      showError(inputEmail, emailErrorMessage, "잘못된 이메일 형식입니다.");
    } else {
      hideError(inputEmail, emailErrorMessage);
    }

이렇게 쓰일 수 있게? ㅎ

[kich555]

요기도 마찬가지로

  if (!passwordValue) {
      showError(inputPassword, passwordErrorMessage, "비밀번호를 입력해주세요.");
    } else if (passwordValue.length < 8) {
      showError(inputPassword, passwordErrorMessage, "비밀번호를 8자 이상 입력해주세요.");
    } else {
      hideError(inputPassword, passwordErrorMessage);
    }

요렇게 ㅎ

[kich555]

로그인 form 내부의 로그인 button의 타입이 button으로 바뀐 이유가 뭔가요? submit이 맞는거같은데 ㅎ