[박형준] Sprint 4

[junAlexx]

요구사항

기본

로그인

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

심화

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

주요 변경사항

• 깃허브 웹호스팅 배포 : https://junalexx.github.io/web_hosting_2/
• 스프린트 요구사항 외에는 큰 변경사항은 없습니다.

스크린샷

로그인

<입력 없이 focusout 되었을 때>

<유효성에 맞지 않을 때>

<모두 만족하고 로그인 버튼 활성화>

회원가입

<입력 없이 focusout 되었을 때>

<유효성에 맞지 않을 때>

<모두 만족하고 회원가입 버튼 활성화>

멘토에게

• 뭔가 js코드가 정리가 안되는 느낌입니다. 잘 하고 있는건지 모르겠습니다. DM으로 연락드리겠습니다.
• 가감없는 리뷰 부탁드립니다. 갑사합니다.
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[kich555]

잘 해주셨어요! 고생하셨습니다!

[kich555]

객체로 관리하는게 어떠세요?

 const validationState = {
    email: false,
    nickname: false,
    password: false,
    passwordConfirm: false,
  };

[junAlexx]

다음 스프린트에 수정 반영하겠습니다!! :)

[kich555]

이렇게 생긴 로직이 여기저기 많이 보이는데

  function showAlert(inputElement, alertMessages, visibleIndex) {
    alertMessages.forEach((alert, index) => {
      alert.style.display = index === visibleIndex ? 'block' : 'none';
    });
    inputElement.style.border = '1px solid #F74747';
  }

  function hideAlert(inputElement, alertMessages) {
    alertMessages.forEach(alert => {
      alert.style.display = 'none';
    });
    inputElement.style.border = 'none';
  }

이렇게 별도의 함수를 구성하고 활용하는게 어떤가요? ㅎ

[junAlexx]

저도 똑같은 코드가 너무 반복되다보니 이 부분이 찜찜했었는데, 앞으론 함수를 활용해서 로직을 구조화시킬 방법을 더 고민해보겠습니다. 리뷰 내용은 다음 스프린트에 수정반영하겠습니다.