[김승민] Sprint4

[sngminn]

기본 요구사항

• Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
• 피그마 디자인에 맞게 페이지를 만들어 주세요.
• React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.

체크리스트 [기본]

로그인

• 이메일 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” 로 이동합니다

체크리스트 [심화]

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

주요 변경사항

• 이전 PR에서 받은 피드백을 모두 반영했습니다.

스크린샷

멘토에게

• input 확인하는 부분이 많이 겹친다고 느꼈습니다. 그래서 sign.js에 자주 쓰이는 함수를 모두 담고, login.js, signup.js에서 각각 이 함수들을 가져다 쓰도록 만들었습니다.

[dongqui]

승민님 함수별로 기능을 잘 나눠 주셔서 보기가 편했습니다 👍 함수 목적과 이름을 좀 더 명확히 표현해 주시면 더욱 좋을 거 같아요!

이번 미션도 고생 많으셨습니다 💯

[dongqui]

혹시나 싶어 남겨드립니다!
절대 경로 말씀드렸던 것은 og:url 부분이었습니다 🤣
해당 부분은 유저가 공유 카드를 클릭했을 때 이동할 url 입니다. 배포를 아직 안 하셨다면 안 넣으셔도 돼요! 참고만 해주세요 :)

[dongqui]

언제나 그럴 수는 없지만 함수는 단일 책임을 가지는 것이 좋습니다~! 또한 이름을 명확하게 지어주는 것이 좋아요.
이름만 봤을 때 showInputError 의 역할은 input의 error ui를 보여주는 거 같은데, 실제로는 form 전체 에러 상태와 버튼 상태까지 관리하고 있습니다. 로직이 숨겨지게 되는 거죠!

지금은 충분히 잘하셨고 간단한 코드라 괜찮습니다 :) 참고만 해주세요~!

[dongqui]

잘못 들어간 걸까요? 🤔

[dongqui]

이왕 분리하신 거 공통으로 사용되는 유효성 검사, 메세지 등도 따로 관리해 보시는 것도 좋겠네요 🤣 (참고만 해주세요!)

[dongqui]

상수는 보통 대문자를 사용합니다!

const ERROR_CLASS = 'sign-form__input--error';

[dongqui]

정규표현식을 쓰셨군요! 👍