[박준현] sprint4

[llmojoll]

요구사항

기본

• 이메일 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 에 유효한 값을 입력하면 '회원가입' 버튼이 활성화 됩니다.
• 활성화된 '회원가입' 버튼을 누르면 로그인 페이지로 이동합니다

심화

• [] 눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.

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

주요 변경사항

스크린샷

https://lively-meringue-32685f.netlify.app/signup

멘토에게

• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[addiescode-sj]

수고하셨습니다!
미션 여러개를 올리셔서 리팩토링을 각각 하시거나 마지막 올리신 PR (이 PR)에서 일괄적으로 진행해보시면 좋을것같네요~

주요 리뷰 포인트

• 유지보수를 고려한 개발

[addiescode-sj]

여러가지 네이밍 케이스가 혼재되어있네요! 일관성을 위해 기준을 가지고 네이밍 케이스를 잘 지켜서 사용해볼까요?

참고

[addiescode-sj]

checkInput 함수가 하는 일이 너무 많아서, 함수가 하는 일이 명확하지 않고 유지보수에 힘들 것 같아요. 재사용을 고려해 로직을 분리하고, 단일 책임을 가진 함수를 만들어볼까요?

비즈니스 로직

• 유효성 검사 규칙
• 유효성 검사 수행

UI

• 이벤트 리스너 설정
• 검사 결과에 따른 UI 업데이트 (활성화/비활성화, 에러상태와 메시지 표시 등)

이렇게 크게 4가지로 분리해두고 관련있는 파일끼리 모아두면 각 함수가 명확한 역할을 가지게되고 유지보수또한 용이해질거예요.

[addiescode-sj]

위 코멘트에서 얘기드렸던것처럼 유효성 검사 규칙과 유효성 검사를 수행하는 함수는 관련이 있는 상태고, 이걸 어떻게 모을지 (관리할지) 생각해볼까요?

예시를 들어드리겠습니다 :)

export const validators = {
  email: (value) => {
    if (!value) return { isValid: false, message: "이메일을 입력해주세요" };
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
      return { isValid: false, message: "올바른 이메일 형식이 아닙니다" };
    }
    return { isValid: true, message: "" };
  },

  password: (value) => {
    if (!value) return { isValid: false, message: "비밀번호를 입력해주세요" };
    if (value.length < 8) {
      return { isValid: false, message: "비밀번호는 8자 이상이어야 합니다" };
    }
    return { isValid: true, message: "" };
  },
};

[addiescode-sj]

그렇다면 요소별로 유효성 검사를 수행하고 UI state를 업데이트 하는 함수 또한 보다 간결해질수있겠죠?

• 유효성 검사 결과에 따른 UI 업데이트

  if (result.isValid) {
    clearError(inputEl);
  } else {
    showError(inputEl, result.message);
  }

[addiescode-sj]

위 코멘트대로 유효성 검사 로직을 재사용해준다면, 계속해서 이런 값들을 새로 작성하면서 관리해줄 필요도 없어지고, 어떤 종류의 규칙인지도 한눈에 파악할수있다는 장점도 생깁니다 :)