From fe575c18b26eeabdd04b071dc61623e5b10ceb15 Mon Sep 17 00:00:00 2001
From: seoyeong <bsy0313@gmail.com>
Date: Tue, 20 Feb 2024 12:49:33 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=86=A0?=
 =?UTF-8?q?=ED=81=B0=20=EC=9D=B8=EC=A6=9D=EC=9D=B4=20=EC=83=88=EB=A1=9C?=
 =?UTF-8?q?=EA=B3=A0=EC=B9=A8=EC=8B=9C=EC=97=90=EB=8F=84=20=EB=8F=99?=
 =?UTF-8?q?=EC=9E=91=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=B5=9C=EC=83=81?=
 =?UTF-8?q?=EC=9C=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EC=8B=A4=ED=96=89=20#179?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.tsx                     |  5 ++++-
 src/providers/RefreshTokenProvider.tsx | 31 ++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 src/providers/RefreshTokenProvider.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 89dd48e8..9e4b876c 100644
--- a/src/app/layout.tsx
+++ b/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>
diff --git a/src/providers/RefreshTokenProvider.tsx b/src/providers/RefreshTokenProvider.tsx
new file mode 100644
index 00000000..28f3050d
--- /dev/null
+++ b/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;