[임주민] week4

[imkrmin]

요구사항

기본

• [기본]이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지가 보이나요?

• [기본]이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 input에 빨강색 테두리와 아래에 “올바른 이메일 주소가 아닙니다.” 빨강색 에러 메세지가 보이나요?

• [기본]이메일 input에서 focus out 일 때, input 값이 test@codeit.com 일 경우 input에 빨강색 테두리와 아래에 “이미 사용 중인 이메일입니다.” 빨강색 에러 메세지가 보이나요?

• [기본]비밀번호 input에서 focus out 할 때, 값이 8자 미만으로 있거나 문자열만 있거나 숫자만 있는 경우, input에 빨강색 테두리와 아래에 “비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.” 빨강색 에러 메세지가 보이나요?

• [기본]비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input에 빨강색 테두리와 아래에 “비밀번호가 일치하지 않아요.” 빨강색 에러 메세지가 보이나요?

• [기본]회원가입을 실행할 경우, 문제가 있는 경우 문제가 있는 input에 빨강색 테두리와 에러 메세지가 보이나요?

• [기본]이외의 유효한 회원가입 시도의 경우, “/folder”로 이동하나요?

• [기본]이메일: test@codeit.com, 비밀번호: codeit101 으로 로그인 시도할 경우, “/folder” 페이지로 이동하나요?

• [기본]비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지가 보이나요?

• [기본]이외의 로그인 시도의 경우 이메일, 비밀번호 input에 빨강색 테두리와 각각의 input아래에 “이메일을 확인해주세요.”, “비밀번호를 확인해주세요.” 빨강색 에러 메세지가 보이나요?

• [기본]회원가입 버튼 클릭 또는 Enter키 입력으로 회원가입 되나요?

• [기본]이메일, 비밀번호 input에 에러 관련 디자인을 Components 영역의 에러 케이스로 적용했나요?

심화

• [심화]눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 하나요?

• [심화]비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이나요?

• [심화]로그인, 회원가입 페이지에 공통적으로 사용하는 로직이 있다면, 반복하지 않고 공통된 로직을 모듈로 분리해 사용했나요?

주요 변경사항

• 로그인 및 회원가입 페이지 에러 메시지 추가

스크린샷

멘토에게

• 3주차 위클리 미션 기능을 구현하지 못해서 템플릿 코드를 사용해서 구현했습니다.
• 이메일 입력 시 배경색이 달라지는데 아무리 찾아봐도 어디에 코드가 있는지 못 찾았습니다 ㅠㅠ...
• 회원가입 비밀번호, 비밀번호 확인 눈모양 버튼이 아래로 내려가는데 수정을 못했습니다... 해결 방법 알 수 있을까요?
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[lunaticscode]

반복적으로 스타일 코드를 지정해줘야되는 부분이 많네요. 아래처럼 해결 가능합니다.

const invalidMessageEmail = "color: red; display: block;";
const invalidUserEmailStyle = "border: 1px solid var(--linkbrary-red, #FF5B56);";

errorMessageEmail.textContent = "이메일을 입력해주세요.";
errorMessageEmail.setAttribute("style", invalidMessageEmail);
inputUserEmail.setAttribute("style", invalidUserEmailStyle);

[lunaticscode]

validateEmail 함수가 실행해야되는 코드들을 좀더 묶어서 함수화 시키면 좋을 듯 합니다.

function notifyInvalidEmail(type) {
   if(type === 1) {
     // ....
   }
   if(type === 2) {
     // ....
   }
}

function validateEmail() {
   if(!userEmail) {
       notifyInvalidEmail(1)
   } 
  
  if(!isValidEmail()) {
       notifyInvalidEmail(2)
  }
}

[lunaticscode]

• 이메일 입력 시 배경색이 달라지는데 아무리 찾아봐도 어디에 코드가 있는지 못 찾았습니다 ㅠㅠ...
  : 코드로 확인했을 때는 별도로 배경색을 지정해주는 부분이 없어보이는데, 멘토링 때 화면으로 직접 한번 보여주세요.

• 회원가입 비밀번호, 비밀번호 확인 눈모양 버튼이 아래로 내려가는데 수정을 못했습니다... 해결 방법 알 수 있을까요?
  : .sign-input-box style 코드에서 flex 속성을 다시 확인해보세요.