✨ add axios interceptor

app/_components/providers/AxiosInterceptorProvider.tsx

@@ -0,0 +1,13 @@
+import { useAxiosInterceptor } from '@/app/_hooks/useAxiosInterceptor'
+
+interface Props {
+  children: React.ReactNode
+}
+
+const AxiosProvider = ({ children }: Props) => {
+  useAxiosInterceptor()
+
+  return <>{children}</>
+}
+
+export default AxiosProvider

app/_components/providers/CoreProvider.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { useAxiosInterceptor } from '@/app/_hooks/useAxiosInterceptor'
+
+import AxiosProvider from './AxiosInterceptorProvider'
+import QueryClientProvider from './QueryClientProvider'
+
+export default function CoreProvider({ children }: { children: React.ReactNode }) {
+  useAxiosInterceptor()
+
+  return (
+    <AxiosProvider>
+      <QueryClientProvider>{children}</QueryClientProvider>
+    </AxiosProvider>
+  )
+}

app/_components/providers/QueryClientProvider.tsx

@@ -2,10 +2,10 @@
 
 import { type PropsWithChildren, useState } from 'react'
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { QueryClient, QueryClientProvider as TanstackQueryProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
-export default function Providers({ children }: PropsWithChildren) {
+export default function QueryClientProvider({ children }: PropsWithChildren) {
   const [queryClient] = useState(
     () =>
       new QueryClient({
@@ -21,9 +21,9 @@ export default function Providers({ children }: PropsWithChildren) {
   )
 
   return (
-    <QueryClientProvider client={queryClient}>
+    <TanstackQueryProvider client={queryClient}>
       <ReactQueryDevtools />
       {children}
-    </QueryClientProvider>
+    </TanstackQueryProvider>
   )
 }

app/_hooks/useAxiosInterceptor.ts

@@ -0,0 +1,41 @@
+import { useEffect } from 'react'
+
+import { type AxiosError, type AxiosResponse, type InternalAxiosRequestConfig } from 'axios'
+
+import { axiosInstance } from '../_service/core/api'
+import { getAccessToken } from '../_utils/token'
+
+export const useAxiosInterceptor = () => {
+  const requestHandler = (config: InternalAxiosRequestConfig) => {
+    const accessToken = getAccessToken()
+
+    if (accessToken !== null) {
+      // eslint-disable-next-line no-param-reassign
+      config.headers.Authorization = `${accessToken}`
+    }
+
+    return config
+  }
+
+  const requestErrorHandler = (error: AxiosError) => {
+    return Promise.reject(error)
+  }
+
+  const responseHandler = (response: AxiosResponse) => {
+    return response
+  }
+
+  const responseErrorHandler = (error: any) => {
+    return Promise.reject(error)
+  }
+
+  const requestInterceptor = axiosInstance.interceptors.request.use(requestHandler, requestErrorHandler)
+  const responseInterceptor = axiosInstance.interceptors.response.use(responseHandler, responseErrorHandler)
+
+  useEffect(() => {
+    return () => {
+      axiosInstance.interceptors.request.eject(requestInterceptor)
+      axiosInstance.interceptors.request.eject(responseInterceptor)
+    }
+  }, [requestInterceptor, responseInterceptor])
+}