[TypeScript] 팀프로젝트 리팩토링 2일차

Signup.js 리펙토링

interface SignupProps {}

const Signup: React.FC<SignupProps> = () => {
  const navigate = useNavigate();
  const [emailInputValue, setEmailInputValue] = useState('');
  const [passwordInputValue, setPasswordInputValue] = useState('');
  const [DisplayNameInputValue, setDisplayNameInputValue] = useState('');
  const [passwordWarning, setPasswordWarning] = useState('');
  window.scrollTo(0, 0);
  const handlePasswordChange = (e:React.ChangeEvent<HTMLInputElement>) => {
    setPasswordInputValue(e.target.value);
    const password = e.target.value;
    if (password.length < 8) {
      setPasswordWarning(
        '경고) 비밀번호의 길이는 최소 8자리 이상을 권장합니다',
      );
    } else if (
      !/[a-zA-Z]/.test(password) ||
      !/\d/.test(password) ||
      !/[\s~`!@#$%^&*()-_=+{}[\]|\\;:'",.<>/?]/.test(password)
    ) {
      setPasswordWarning(
        '경고) 비밀번호는 영문, 숫자, 특수문자의 조합을 권장합니다',
      );
    } else {
      setPasswordWarning('');
    }
  };
  const handleSignup = async (e:React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    try {
      await Axios.post('/users/signup', {
        email: emailInputValue,
        displayName: DisplayNameInputValue,
        password: passwordInputValue,
      });
      alert('회원가입 성공!');
      navigate('/login');
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <Layout>
      <SignupWrapper>
        <GoogleSignup href="https://server.dowajoyak.store/oauth2/authorization/google">
          <GoogleLogo src={googleLogo} alt="logo" />
          구글로 회원가입
        </GoogleSignup>
        <KakaoSignup href="https://server.dowajoyak.store/oauth2/authorization/kakao">
          <KakaoLogo src={kakaoLogo} alt="logo" />
          카카오로 회원가입
        </KakaoSignup>
        <NaverSignup href="https://server.dowajoyak.store/oauth2/authorization/naver">
          <NaverLogo src={naverLogo} alt="logo" />
          네이버로 회원가입
        </NaverSignup>
        <EmailSignup onSubmit={handleSignup}>
          <DisplayNameWrapper>
            <DisplayNameLabel>사용자명</DisplayNameLabel>
          </DisplayNameWrapper>
          <DisplayNameInput
            type="name"
            onChange={(e) => setDisplayNameInputValue(e.target.value)}
          />
          <EmailWrapper>
            <EmailLabel>이메일</EmailLabel>
          </EmailWrapper>
          <EmailInput
            type="email"
            onChange={(e) => setEmailInputValue(e.target.value)}
          />
          <PasswordWrapper>
            <PasswordLabel>비밀번호</PasswordLabel>
          </PasswordWrapper>
          <PasswordInput type="password" onChange={handlePasswordChange} />
          {passwordWarning && (
            <WarningMessage>{passwordWarning}</WarningMessage>
          )}
          <SignupButton type="submit">회원가입</SignupButton>
        </EmailSignup>
      </SignupWrapper>
    </Layout>
  );
};
export default Signup;

어제 Login.js를 바꿀때 파일 세팅을 해두어서 크게 바꿀건 없었다.
1. const Signup = () => { 을 const Signup: React.FC = () => { 으로 바꿔줄수도 있다. 단, props가 없는경우 생략해도 되니 그대로 두었다.
2. 이벤트핸들러 함수의 매개변수 e의 타입을 정해주었다. e > e: React.FormEvent 이제 e는 form엘리먼트의 이벤트객체를 나타냄.
3. App.js 에서 import할때 import Signup from './page/user/Signup.tsx';로 명시했음.