feat: 로그인 토큰 인증이 새로고침시에도 동작하도록 최상위 컴포넌트에서 실행 #179

src/app/layout.tsx

@@ -8,6 +8,7 @@ import { ModalContextProvider } from '@contexts/ModalContext';
 import { CookieProvider } from '@providers/CookieProvider';
 import MockProvider from '@providers/MockProvider';
 import QueryProvider from '@providers/QueryProvider';
+import RefreshTokenProvider from '@providers/RefreshTokenProvider';
 import StoreProvider from '@providers/StoreProvider';
 // eslint-disable-next-line import/order
 // import { CookiesProvider } from 'react-cookie';
@@ -40,7 +41,9 @@ export default function RootLayout({
             <QueryProvider>
               <StoreProvider>
                 <ModalContextProvider>
-                  {children}
+                  <RefreshTokenProvider>
+                    {children}
+                  </RefreshTokenProvider>
                 </ModalContextProvider>
               </StoreProvider>
             </QueryProvider>

src/providers/RefreshTokenProvider.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+/* eslint-disable no-console */
+
+'use client';
+
+import { useEffect } from 'react';
+
+import useIntervalRefreshToken from '@hooks/useIntervalRefreshToken';
+import { useAppSelector } from '@stores/hooks';
+
+function RefreshTokenProvider({ children }: { children: React.ReactNode }) {
+  const { startRefreshTokenInterval, refreshTokenClear } = useIntervalRefreshToken();
+  const userId = useAppSelector((state) => { return state.user.id; });
+
+  useEffect(() => {
+    if (userId !== null) {
+      startRefreshTokenInterval();
+      console.log('RefreshTokenProvider mounted');
+    }
+
+    // cleanup 함수를 이용하여 컴포넌트가 unmount 될 때 clearInterval 호출
+    return () => {
+      refreshTokenClear();
+      console.log('RefreshTokenProvider unmounted');
+    };
+  }, [userId]);
+
+  return <>{children}</>;
+}
+
+export default RefreshTokenProvider;