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

• Loginmodal.js 리펙토링

//LoginModal.tsx

interface LoginModalProps {
  onClose: () => void;
  isClosing: boolean;
}
const LoginModal = ({ onClose, isClosing }: LoginModalProps) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [email, setEmail] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  window.scrollTo(0, 0);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    try {
      const response = await Axios.post('/users/login', {
        username: email,
        password,
      });
      const accessToken = response.headers['authorization'];
      const refreshToken = response.headers['refresh'];
      localStorage.setItem('accessToken', accessToken);
      const date = new Date();
      //쿠키 만료시간 7일뒤
      date.setDate(date.getDate() + 7);
      document.cookie = `refreshToken=${refreshToken}; expires=${date.toUTCString()}; path=/`;
      alert('로그인 성공!');
      navigate('/');
      dispatch(login());
    } catch (error) {
      alert('로그인에 실패했습니다! Email과 Password를 다시 확인해주세요.');
      console.error(error);
    }
  };
  return (
    <ModalWrapper>
      <ModalContent isClosing={isClosing}>
        <CloseButton onClick={onClose}>X</CloseButton>
        <LoginWrapperForModal>
          <Logo src={logo} alt="logo" />
          <GoogleLogin href="https://server.dowajoyak.store/oauth2/authorization/google">
            <GoogleLogo src={googleLogo} alt="logo" />
            구글로 로그인
          </GoogleLogin>
          <KakaoLogin href="https://server.dowajoyak.store/oauth2/authorization/kakao">
            <KakaoLogo src={kakaoLogo} alt="logo" />
            카카오로 로그인
          </KakaoLogin>
          <NaverLogin href="https://server.dowajoyak.store/oauth2/authorization/naver">
            <NaverLogo src={naverLogo} alt="logo" />
            네이버로 로그인
          </NaverLogin>
          <EmailLogin onSubmit={handleSubmit}>
            <EmailWrapper>
              <EmailLabel>이메일</EmailLabel>
            </EmailWrapper>
            <EmailInput
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <PasswordWrapper>
              <PasswordLabel>비밀번호</PasswordLabel>
            </PasswordWrapper>
            <PasswordInput
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
            <LoginButton type="submit">로그인</LoginButton>
            <Message>아직 회원이 아니신가요?</Message>
            <StyledLink to="/signup">회원가입</StyledLink>
          </EmailLogin>
        </LoginWrapperForModal>
      </ModalContent>
    </ModalWrapper>
  );
};

해준작업

• js > tsx 파일명 변경
• props에 타입 지정 : 새로 인터페이스 LoginModalProps 정의, onClose, isClosing에 타입지정
• email, password state에 타입지정