[김승석] Sprint4

[kss761036]

요구사항

기본

로그인

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

심화

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

멘토에게

• https://kss-sprint-mission.netlify.app/

• 디자인에는 조건에 만족한 input에 효과(파란테두리)가 적용 되어있지만,
  요구사항에는 없어서 고민하다가 일단 디자인대로 효과 적용했습니다.

• 미션5 부터는 변수명을 신경써서 작성하겠습니다.

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

[withyj-codeit]

스프린트 미션 하느라 수고 많으셨어요~👏🏻

디자인에는 조건에 만족한 input에 효과(파란테두리)가 적용 되어있지만,
요구사항에는 없어서 고민하다가 일단 디자인대로 효과 적용했습니다.

요구사항 모호한 부분은 작업하신 것 처럼 하셔도 좋아요~👍

스프린트 미션3에 모바일 사이즈 요구사항과 다른 부분이 있어 확인해 주세요.

[withyj-codeit]

해당 색상을 자주 사용하는 것 같은데,
CSS 색상 변수로 등록하면 좋을 것 같아요.

[withyj-codeit]

animate.css는 어떤 부분에 사용하기 위해 추가한 건가요?

[kss761036]

아, animate.css 사용해보려다가 안했는데 지우겠습니다~

[withyj-codeit]

switch 써도 괜찮아 보여요.

[withyj-codeit]

early return 패턴으로 오류 조건을 처리해도 좋을 것 같아요.