[이수지] sprint4

[mulddang2]

요구사항

기본

로그인

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

심화

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

주요 변경사항

• sprint misson 3 리펙토링
• 로그인 페이지 유효성 검사 추가

스크린샷

멘토에게

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

[JaeSang1998]

수지님 고생하셨습니다! 다음번엔 완성을 목표로!

[JaeSang1998]

너무 잘해주셨네요 :)

[JaeSang1998]

handleEmailBlur 라는 이름 보다는 validateEmail 등의 함수 이름이 더 적절해보입니다!

password도 마찬가지구요.

[JaeSang1998]

toggleLoginButton 안에서 단순 toggle 을 해주는 것 뿐만아니라 validation까지 관리하고 있습니다.

지금은 작은 함수여서 괜찮으나 규모가 커진다면 validate 함수가 파편화되어 유지보수하기 힘들어질 수 있습니다.

updateLoginButtonStatus 정도의 이름으로 함수를 변경하고 안에서는 작은 함수로 쪼개어진 validate 함수를 호출해서 사용하거나, 혹은 toggleLoginButton 의 이름에 맞추어서 toggle만 하게 하는 좀 더 가벼운 함수로 변경하고, 함수를 호출하는 곳에서 적절한 조건에 맞게 toggle 을 해주는형태로 변경해보는것도 좋아보여요!

[JaeSang1998]

bem 규칙으로 네이밍 해주셨군요! 아주 보기 좋습니다

[JaeSang1998]

seo 정보들도 잘 넣어주셨군요 :) 좋습니다

[JaeSang1998]

여기 부분은

const {value} = passwordInput;
if(value.trim()==="") { ... }

이러헥 썼으면 조금 더 깔끔했을 것 같아요!

[JaeSang1998]

boolean 을 따로 이름지어서 선언해주시는 습관 매우 좋습니다.