[Day 32] 회원가입 페이지 피드백

회원가입 페이지 구현 완성

멘토님의 1차 피드백은 두 가지:

1. useState를 사용하고 함수로 State을 변경해주는데 그러지 말고 바로 사용하는 html input 부분에 삼항연산자 사용해서 적용하기

// 1번, 2번을 삭제하고 3번처럼 직접 사용

//1번
  const [accountWarning, setAccountWarning] = useState('');
  const [emailWarning, setEmailWarning] = useState('');
  const [phoneNumberWarning, setPhoneNumberWarning] = useState('');
  const [passwordWarning, setPasswordWarning] = useState('');

//2번
  const checkAccount = () =>
    isAccountValid
      ? setAccountWarning('')
      : setAccountWarning('영문소문자 또는 숫자 4~16자로 입력해 주세요.');

  const checkEmail = () =>
    isEmailValid
      ? setEmailWarning('')
      : setEmailWarning('@와 .을 포함 시켜주세요.');

  const checkPhoneNumber = () =>
    isPhoneNumberValid
      ? setPhoneNumberWarning('')
      : setPhoneNumberWarning("'-'를 제외한 숫자만 입력해주세요.");

  const checkPassword = () =>
    isPasswordValid
      ? setPasswordWarning('')
      : setPasswordWarning('비밀번호는 4~16자리로 이뤄져야 합니다.');

//3번
        <div className="accountWrapper wrapper">
          <div className="account text">아이디</div>
          <input
            type="text"
            placeholder="아이디를 입력해주세요"
            name="account"
            onChange={saveUserInfo}
            onKeyUp={checkAccount}
          />
          <div className="message">
            <span className={redWarningAccount}>
              {isAccountValid
                ? ''
                : '영문소문자 또는 숫자 4~16자로 입력해 주세요.'}
            </span>
          </div>
        </div>

2. SCSS nesting을 해주는데 css 적용사항이 없더라도 html 조건대로 className 다 적용해주기

내가 완성하면 끝난 줄 알았는데 피드백 받고 고치는 시간도 꽤 걸릴 것 같다.