[이상달] Sprint4

[asksa1256]

요구사항

기본

로그인

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

심화

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

주요 변경사항

• css 폴더 구조 수정 (용도, 페이지별 분기)
• 로그인/회원가입 페이지 로드 시 첫번째 input에 focus 추가 (사용자가 클릭하지 않아도 바로 첫번째 input에 입력할 수 있음)

배포 사이트

https://panda-market-fe16sd.netlify.app/login

스크린샷

로그인 유효성 검사

회원가입 유효성 검사

비밀번호 숨김/표시 토글

멘토에게

• 자동완성된 input을 포함한 유효성 검사는 어떻게 해야 될지 모르겠습니다. DOMContentLoaded로 페이지 로드 시 input들이 자동완성 되어있으면 폼 버튼이 활성화되도록 해봤는데, 자동완성된 input도 focus out이 되어야 버튼이 활성화되네요.. 잘 안돼서 일단 해당 코드는 지웠습니다.
• validatePassword() 함수에서 이중 if문을 쓰게 되었는데 이건 어떻게 리팩토링해야 할까요..? 비밀번호 input 유효성 검사는 비밀번호 확인 input과 연동이 필요해보여서 두 기능을 일부러 결합했는데, 그 과정에서 생긴 코드입니다..ㅎㅎ
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[addiescode-sj]

수고하셨습니다!
코드가 정말 읽기 편안하네요 :)
이제 상달님이 짜신 코드의 의도를 최대한 살리되 관심사 분리와 응집도 관점에서 필요한 설계를 하셨는지, 더 효율적인 방식은 없을지 제가 드린 코멘트의 내용을 잘 참고하고 고민해보시면 많은 도움될것같습니다!

주요 리뷰 포인트

• 관심사 분리와 응집도 관점에서 코드 리팩토링
• 유지보수를 고려한 개발

[addiescode-sj]

질문에 대한 답변

멘토에게

• 자동완성된 input을 포함한 유효성 검사는 어떻게 해야 될지 모르겠습니다. DOMContentLoaded로 페이지 로드 시 input들이 자동완성 되어있으면 폼 버튼이 활성화되도록 해봤는데, 자동완성된 input도 focus out이 되어야 버튼이 활성화되네요.. 잘 안돼서 일단 해당 코드는 지웠습니다.
• validatePassword() 함수에서 이중 if문을 쓰게 되었는데 이건 어떻게 리팩토링해야 할까요..? 비밀번호 input 유효성 검사는 비밀번호 확인 input과 연동이 필요해보여서 두 기능을 일부러 결합했는데, 그 과정에서 생긴 코드입니다..ㅎㅎ
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

첫번째 질문의 경우 PR본문 내에서 드린 코멘트 참고해보시면 도움이 될것같네요 :)
이중 If문을 썼다고해서 문제가 되는건 아니지만, 이런식으로 if문을 하나의 뎁스로 줄이게되면 코드가 명확하게 보여지겠죠?

// 빈 값 체크
 if (value.length === 0) {
   setValid(input, false, "비밀번호를 입력해주세요.");
   return false;
 }
 
 // 길이 체크
 if (value.length < 8) {
   setValid(input, false, "비밀번호를 8자 이상 입력해주세요.");
   return false;
 }
 
 // 비밀번호는 유효함
 setValid(input);