회원가입 페이지 구현 완성
멘토님의 1차 피드백은 두 가지:
// 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>
내가 완성하면 끝난 줄 알았는데 피드백 받고 고치는 시간도 꽤 걸릴 것 같다.