[최성락] Sprint11

[rak517]

요구사항

회원가입

• 유효한 정보를 입력하고 스웨거 명세된 “/auth/signUp”으로 POST 요청해서 성공 응답을 받으면 회원가입이 완료됩니다.
• 회원가입이 완료되면 “/login”로 이동합니다.
• 회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.

로그인

• 회원가입을 성공한 정보를 입력하고 스웨거 명세된 “/auth/signIp”으로 POST 요청을 하면 로그인이 완료됩니다.
• 로그인이 완료되면 로컬 스토리지에 accessToken을 저장하고 “/” 로 이동합니다.
• 로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.

메인

• 로컬 스토리지에 accessToken이 있는 경우 상단바 ‘로그인’ 버튼이 판다 이미지로 바뀝니다.

주요 변경사항

• 스프린트 미션 진행 전 리뷰 반영해서 리팩토링
• react-hook-form, zod 적용해봤습니다.
• refreshToken을 사용해 accessToken을 갱신할 수 있도록 만들어봤습니다.
• requestHandler.ts에 authenticatedFetch 함수 추가하여 인증된 API 요청 처리
• accessToken을 로컬 스토리지에서 지우고 테스트 결과 refreshToken만 있다면 다시 받아오는 걸 확인했습니다.

멘토에게

• react-hook-form은 사실 잘 사용하고 있는건지 모르겠습니다.
• 스키마 기반 유효성 검사도 이렇게 하는게 맞나요?

[Lanace]

코드도 너무 깔끔하고 일관되게 짜주셔서 보기도 너무 좋았습니다ㅎㅎ

그러다보니 리뷰할것도 별로 없었네요...;;ㅠ

잘 짜주셔서 감사합니다~!!
고생하셨구 멘토링떄 뵐게여ㅎㅎ

[Lanace]

네 맞아요ㅎㅎ 이렇게 사용하는거에요.

엄청 잘 하셨는데여! 👍

[Lanace]

이미 useEffect에 왔다는거부터가 클라이언트 컴포넌트라서... window가 없을 수 없었을거에요ㅎㅎ;;

그래서 가급적이면 이런 redirect 처리는 서버쪽에서 처리해주는게 가장 좋아요~

[Lanace]

이거 2개의 필드가 계속해서 나오는데, 차라리 인터페이스를 분리하고 합성해서 쓰는식은 어떨까요?

export interface AuthTokens {
  accessToken: string;
  refreshToken: string;
}

export interface SignupResponse extends AuthTokens {
  user: {
    id: number;
    email: string;
    image: null;
    nickname: string;
    updatedAt: string;
    createdAt: string;
  };
}

export interface LoginResponse extends AuthTokens {
  user: {
    id: number;
    email: string;
    image: null;
    nickname: string;
    updatedAt: string;
    createdAt: string;
  };
}