100 lines
2.8 KiB
TypeScript
100 lines
2.8 KiB
TypeScript
// 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 (
|
|
<QueryClientProvider client={queryClient}>
|
|
{children}
|
|
{process.env.NODE_ENV === "development" && <ReactQueryDevtools />}
|
|
</QueryClientProvider>
|
|
);
|
|
}
|