feat: 구글 로그인 및 토큰 인증 서비스 구현

[ssolfa]

1️⃣ 어떤 작업을 했나요? (Summary)

• resolved feat: 구글 로그인 구현 #8

2025-02-13.3.06.03.mov

• API 통신을 위한 ky 인스턴스 구현
  • ky의 prefixUrl, retry, hooks 옵션을 활용하여 base URL 설정, 재시도 로직, 인터셉터 구현
  • 401 에러 발생 시 자동으로 토큰을 갱신하고 재시도하는 로직을 추가
  • 모든 API 요청에 자동으로 인증 토큰이 포함되도록 구현
• 토큰 관리 및 갱신 로직 구현
• Google OAuth 로그인/로그아웃 기능 구현
  • 디자인이 아직 없어서 오른쪽 상단 네비게이션에 있는 프로필 누르면 Google OAuth 페이지로 리다이렉트되도록 함
  • 로그인 성공 시 토큰 localStorage에 저장 / 로그아웃 시 토큰 삭제 + 홈으로 리다이렉트되도록 구현
• Navigation 컴포넌트에 로그인 상태 표시 추가
  • 토큰 유무에 따라 로그인/로그아웃 상태를 표시 - 일단 p 태그...
  • 클릭 시 상태에 따라 로그인/로그아웃

2️⃣ 알아두시면 좋아요!

• .env는 노션에 있습니다.
• 소셜 로그인 시 authorization code는 1회만 사용 가능한데요, React의 StrictMode 환경에서 중복 호출을 방지하기 위해 useRef()를 사용했습니다. const processedRef = useRef(false); 이거에여~ 대안으로 useOnceEffect와 같은 커스텀 훅을 만들어서 사용하는 방법도 있는데 뭐가 더 좋으신가여??
• 401 에러 발생시 자동으로 토큰을 갱신하고 재시도합니다.
  • AccessToken 유효성 검사 api가 존재하긴 하는데 이걸 사용해서 토큰 갱신 하는 것 보다 401 에러 발생 감지 후 갱신이 낫다고 판단해서 이렇게 했습니다. 다른 의견 있으면 깁미깁미
• 토큰 갱신 실패시 자동으로 로그아웃됩니다.
  • DEFAULT_API_RETRY_LIMIT = 2로 설정되어 있습니당 두 번 시도 후 실패 시 로그아웃 됩니다.
• API 요청시 별도의 인증 헤더 설정이 필요하지 않습니다

export const api = ky.create({
  prefixUrl: API_CONFIG.BASE_URL,
  retry: {
    limit: DEFAULT_API_RETRY_LIMIT,
  },
  hooks: {
    beforeRequest: [setAuthHeader],
    beforeRetry: [handleTokenRefresh],
  },
});

• ky의 beforeRequest 사용해서 헤더에 인증 토큰 같이 보내주고 beforeRetry로 401 에러라면 토큰 재발급 하는 로직입니당

3️⃣ 추후 작업

• 에러 처리 관련해서 커스텀 에러나 타입 구분하는 부분 추가하기
• 제롬 계정 정보 지우기 ㅎㅎ ;;
• 기능 3 호다닥 만들기

4️⃣ 체크리스트 (Checklist)

• main 브랜치의 최신 코드를 pull 받았나요?