[심예진] sprint4

[druidshim]

요구사항

기본

로그인

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

심화

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

주요 변경사항

스크린샷

멘토에게

• 작성한 js 코드가 올바른지 확인 부탁드리며, 개선할 부분이 있으면 알려주시면 감사하겠습니다!
• 심화 작업을 해보려고 했는데 중간에 막혔습니다 ㅠ 혹시 제가 접근한 방향이 맞는걸까요? 만약 아니라면 접근 방향만 알려주실 수 있을까요? 🥹
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[baeggmin]

첫 JS 미션 수행하시느라 고생 많으셨습니다! 👍👍
질문 주신 내용에 대해서는 인라인 코멘트로 남겨두었으니 참고 부탁드립니다.

[baeggmin]

역할별로 함수 분리를 잘 해주셨습니다! 👍
다만 에러 출력과 스타일 조작 로직이 매번 반복되고 있는데요, 아래와 같이 공용 함수로 분리하면 좋을 것 같습니다.

function setError(inputEl, errorEl, message) {
 errorEl.textContent = message;
 inputEl.classList.add("input-error");
}

function clearError(inputEl, errorEl) {
 errorEl.textContent = "";
 inputEl.classList.remove("input-error");
}

[baeggmin]

passwordDouble이란 명칭이 조금 모호한 것 같아요. passwordConfirm 어떠신가요?

[baeggmin]

공백 처리를 위한 trim 메소드 사용 좋습니다!👏

[baeggmin]

비밀번호 토글 로직을 아주 잘 작성해주셨습니다! 코드만 봤을땐 문제없이 동작할거같은데, 잘 안되었나요??🤔

[baeggmin]

현재는.disabled 클래스만 변경하고 있는데, 실제로 버튼 클릭을 막고 싶다면 button.disabled = true도 병행해주는 것이 좋습니다.

[baeggmin]

로직은 깔끔하게 잘 작성해주셨지만 해당 함수의 책임이 조금 많은 것 같습니다.

유효성 검사와 UI 상태 변경까지 이 함수에서 동시에 처리하고 있어서 함수 역할이 모호해진 것 같아요.

아래와 같은 방식로 '판단로직'과 '결과반영' 을 분리해주시면 가독성과 유지보수성이 좋아질 것 같습니다.

function isFormValid() {
  const emailValid = validateEmail(emailInput.value);
  const passwordValid = passwordInput.value.length >= 8;
  const noErrors = !emailError.textContent && !passwordError.textContent;

  return emailInput.value && passwordInput.value && emailValid && passwordValid && noErrors;
}

function updateButtonState() {
  if (isFormValid()) {
    loginBtn.classList.remove("disabled");
    loginBtn.disabled = false;
  } else {
    loginBtn.classList.add("disabled");
    loginBtn.disabled = true;
  }
}

[baeggmin]

login.js와 signup.js 에 중복 로직이 꽤 있는 것 같습니다. 각각의 파일에서 핵심 로직만 남기고, 공통 처리는 formUtils.js 같은 파일로 분리하면 좋겠네요.

//formUtil.js

export function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

export function setError(inputEl, errorEl, message) {
  errorEl.textContent = message;
  inputEl.classList.add("input-error");
}

export function clearError(inputEl, errorEl) {
  errorEl.textContent = "";
  inputEl.classList.remove("input-error");
}

export function updateButtonState(buttonEl, isValid) {
  buttonEl.disabled = !isValid;
  buttonEl.classList.toggle("disabled", !isValid);
}