fix: refreshToken 만료 시 UI 동기화되지 않는 이슈 해결

[ziyoungsRoom]

📌 PR 제목

• refreshToken 만료 시 UI 동기화되지 않던 이슈 해결

이슈

refreshToken 만료 시 헤더 UI가 동기화되지 않는 이슈가 있었습니다.
user api 요청 실패로 인한 로그인 요청 모달이 뜨면서도 헤더 UI는 로그인 상태를 유지하고 있었습니다. 또한, middleware에서 쿠키를 찾지 못해 redirect 될 때도 마찬가지로 UI 변경이 이루어지지 않았습니다.

해결

기존 구조를 유지하면서 변경하고자 시도했던 일들은 다음과 같습니다.

1. invalidateQueries : 401 error -> 404 error -> refetch -> 401 error ... 비로그인 상태에서 무한 요청이 발생했습니다.
2. setQueriesData + removeQuery : user queryKey 에 해당하는 data를 null 로 변경 및 캐싱된 데이터 삭제
   -> 리다이렉트로 인해 header 컴포넌트가 리렌더링될 때만 변경, 이 외에는 UI 변경이 이루어지지 않았습니다.

이 외에도 여러가지 방법을 생각해봤지만..
제가 내린 결론은 react는 상태 기반으로 UI를 업데이트하기 때문에 인증 여부에 대한 상태를 전역 클라이언트 상태로 관리하여 일관적인 UI를 제공하는 것이었습니다.

🔍 변경 사항

• zustand useAuthStore 관리 : isSignedIn - 현재 로그인 상태인지, 아닌지 판단하는 boolean 값만 관리
• 변경 시점 : 로그인 / 로그아웃 시에는 useMutation 에 적용하여 자동적으로 상태 업데이트되도록 수정
  : 1. 로그인 버튼 클릭 2. 로그아웃 버튼 클릭 3. refreshToken 만료
• zustand persist 를 통해 새로고침 시에도 상태를 기억해서 보여줄 수 있도록 적용
• 기존 user api 를 호출해서 로그인 여부를 판단하던 곳 중 불필요하다고 판단되는 곳은 isSignedIn로 변경
• api.ts 에서 queryClient 접근이 안되는 문제로 인해, 로그인 요청 시 이전 캐싱 데이터 삭제 queryClient.clear() 하도록 로직 추가

// apis/auth/mutation/use-sign-in.ts
...
useMutation({
    mutationFn: (data: SignInRequest) => signInUser(data),
    onMutate: async () => {
      queryClient.clear();
    },
    onSuccess: () => useAuthStore.getState().setSignedIn(),
  });

🧐 고민되는 부분

REFRESHTOKEN_NOT_FOUND 가 비로그인 상태일 때도 발생하다보니 로그아웃이 된 후 모달 혹은 토스트를 띄워주기가 애매하더라구요,, 그래서 일단 로그아웃 처리만 되도록 수정하였습니다.

참고했던 글 : React Query는 훌륭하지만, 인증 관리 매니저는 아닙니다

[phantom2115]

고생많으셨습니다