[feat] 401 응답처리 로직 기능 (#124)

ahk0413 · web-flow · commit 4f91a4fcb7cc · 2025-10-12T16:56:04.000+09:00
* [feat] fetch interceptor 훅

* [fix] format 오류 해결
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,8 +5,8 @@ import Header from '@/shared/components/header/Header';
 import FooterWrapper from '@/shared/components/footer/FooterWrapper';
 import ScrollTopBtnWrapper from '@/shared/components/scroll-top/ScrollTopBtnWrapper';
 import KaKaoScript from './api/kakao/KaKaoScript';
-import IdleHandler from '@/domains/login/components/IdleHandler';
 import Provider from '@/shared/api/Provider';
+import ClientInitHook from '@/domains/login/components/ClientInitHook';
 
 export const metadata: Metadata = {
   title: { default: 'SSOUL', template: 'SSOUL | %s' },
@@ -24,7 +24,7 @@ export default function RootLayout({
       <body className="relative flex flex-col min-h-screen">
         <Provider>
           <Header />
-          <IdleHandler />
+          <ClientInitHook />
           <main className="flex flex-1 pt-[2.75rem] md:pt-[3.75rem]">{children}</main>
           <FooterWrapper />
 
diff --git a/src/domains/login/components/ClientInitHook.tsx b/src/domains/login/components/ClientInitHook.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import { useFetchInterceptor } from '@/shared/hook/useFetchInterceptor';
+import { useIdleLogout } from '../hook/useIdleLogout';
+
+function ClientInitHook() {
+  useIdleLogout();
+  useFetchInterceptor();
+  return null;
+}
+export default ClientInitHook;
diff --git a/src/domains/login/components/IdleHandler.tsx b/src/domains/login/components/IdleHandler.tsx
diff --git a/src/domains/recipe/components/main/Cocktails.tsx b/src/domains/recipe/components/main/Cocktails.tsx
@@ -10,7 +10,6 @@ import CocktailSearchBar from './CocktailSearchBar';
 import useSearchControl from '../../hook/useSearchControl';
 import CocktailSearch from '../../api/CocktailSearch';
 
-
 function Cocktails() {
   const [data, setData] = useState<Cocktail[]>([]);
   const [lastId, setLastId] = useState<number | null>(null);
diff --git a/src/shared/hook/useFetchInterceptor.tsx b/src/shared/hook/useFetchInterceptor.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { useEffect } from 'react';
+import { getApi } from '@/app/api/config/appConfig';
+import { useRouter } from 'next/navigation';
+import { useToast } from '@/shared/hook/useToast';
+
+export const useFetchInterceptor = () => {
+  const router = useRouter();
+  const { toastInfo } = useToast();
+
+  useEffect(() => {
+    const originalFetch = global.fetch;
+
+    (global.fetch as typeof global.fetch) = async (input, init?) => {
+      const response = await originalFetch(input, { ...init, credentials: 'include' });
+
+      if (response.status === 401) {
+        try {
+          const refreshRes = await originalFetch(`${getApi}/user/auth/refresh`, {
+            method: 'POST',
+            credentials: 'include',
+          });
+
+          if (refreshRes.ok) {
+            return originalFetch(input, { ...init, credentials: 'include' });
+          } else {
+            toastInfo('로그인 인증 만료로 다시 로그인해주세요.');
+            router.push('/login');
+          }
+        } catch {
+          toastInfo('로그인 인증 만료로 다시 로그인해주세요.');
+          router.push('/login');
+        }
+      }
+      return response;
+    };
+
+    return () => {
+      global.fetch = originalFetch;
+    };
+  }, [router, toastInfo]);
+};
