// src/providers.tsx "use client"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { useAuthStore } from "@/stores/auth"; import { useEffect, useState } from "react"; import { api } from "@/lib/api"; import Cookies from "js-cookie"; export function Providers({ children }: { children: React.ReactNode }) { // 상태 초기화 여부를 추적 const [isInitialized, setIsInitialized] = useState(false); const [queryClient] = useState( () => new QueryClient({ defaultOptions: { queries: { staleTime: 60 * 1000, retry: 1, refetchOnWindowFocus: false, }, }, }) ); // 앱 시작시 인증 상태 초기화 useEffect(() => { try { const savedToken = localStorage.getItem("token"); if (savedToken) { // localStorage와 쿠키의 토큰을 동기화 useAuthStore.setState({ token: savedToken }); Cookies.set("token", savedToken, { path: "/" }); } } catch (error) { console.error("Failed to initialize auth state:", error); } finally { setIsInitialized(true); } }, []); const clearAuth = useAuthStore((state) => state.clearAuth); // API 인터셉터 설정 useEffect(() => { if (!isInitialized) return; // 초기화가 완료된 후에만 인터셉터 설정 // 요청 인터셉터 const requestInterceptor = api.interceptors.request.use( (config) => { const currentToken = useAuthStore.getState().token; if (currentToken) { config.headers.Authorization = `Bearer ${currentToken}`; } return config; }, (error) => { return Promise.reject(error); } ); // 응답 인터셉터 const responseInterceptor = api.interceptors.response.use( (response) => response, (error) => { if (error.response?.status === 401) { clearAuth(); localStorage.removeItem("token"); Cookies.remove("token", { path: "/" }); // 필요한 경우 로그인 페이지로 리디렉션 if (typeof window !== "undefined") { window.location.href = "/login"; } } return Promise.reject(error); } ); return () => { api.interceptors.request.eject(requestInterceptor); api.interceptors.response.eject(responseInterceptor); }; }, [isInitialized, clearAuth]); // 초기화가 완료될 때까지 로딩 상태를 표시할 수 있습니다 if (!isInitialized) { return null; // 또는 로딩 컴포넌트 } return ( {children} {process.env.NODE_ENV === "development" && } ); }