🐛 fix: zustand state 에러 수정, ✨ Feat: reissue에러시 redirect 추가

Author: minkyung5x5

src/_queries/auth/reissue-queries.ts

@@ -1,9 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
 import { getUser } from '@/src/_apis/auth/user-apis';
-import { authStore } from '@/src/store/use-auth-store';
+import { useAuthStore } from '@/src/store/use-auth-store';
 
 export function useUser() {
-  const { token } = authStore.getState();
+  const token = useAuthStore((state) => state.token);
   return useQuery({
     queryKey: ['user'],
     queryFn: getUser,

src/_queries/auth/user-queries.ts

@@ -1,14 +1,18 @@
 'use client';
 
 import { ReactNode, useState } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
 import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental';
 import { reissue } from '../_apis/auth/reissue-apis';
 import { useAuthStore } from '../store/use-auth-store';
+import { ApiError } from '../utils/api';
 
 export default function ClientProvider({ children }: { children: ReactNode }) {
   const setToken = useAuthStore((state) => state.setToken);
+  const redirect = usePathname();
+  const router = useRouter();
 
   const [queryClient] = useState(
     () =>
@@ -25,16 +29,22 @@ export default function ClientProvider({ children }: { children: ReactNode }) {
             },
           },
         },
-        // accessToken 에러 -> reissue() -> refetch()
         queryCache: new QueryCache({
           onError: async (error, query) => {
-            if (error.message === '토큰이 올바르지 않습니다.') {
-              const { token } = await reissue();
-              if (token) setToken(token.replace(/^Bearer\s/, ''));
-              await Promise.all([
-                queryClient.refetchQueries({ queryKey: query.queryKey }),
-                queryClient.refetchQueries({ queryKey: ['user'] }),
-              ]);
+            const apiError = error as ApiError;
+            if (apiError.status === 401) {
+              try {
+                const { token } = await reissue();
+                if (token) {
+                  setToken(token.replace(/^Bearer\s/, ''));
+                  await Promise.all([
+                    queryClient.refetchQueries({ queryKey: query.queryKey }),
+                    queryClient.refetchQueries({ queryKey: ['user'] }),
+                  ]);
+                }
+              } catch {
+                router.push(`/login?redirect=${redirect}`);
+              }
             }
           },
         }),