From 680048ae4cbd4a1e34a3bff3d4b03dbef606c2ce Mon Sep 17 00:00:00 2001
From: ukkodeveloper <ukkodeveloper@gmail.com>
Date: Tue, 19 Sep 2023 16:38:17 +0900
Subject: [PATCH] =?UTF-8?q?tempt:=20auth=20error=20boundary=20=EC=9C=84?=
 =?UTF-8?q?=EC=B9=98=20layout=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/index.tsx                        | 19 ++++++++-----------
 frontend/src/router.tsx                       |  7 ++++++-
 frontend/src/shared/hooks/useMutation.ts      |  8 +++-----
 .../src/shared/remotes/AuthErrorBoundary.tsx  |  5 +++--
 4 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 56f612d5f..be07a2c66 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
-import AuthErrorBoundary from '@/shared/remotes/AuthErrorBoundary';
 import GlobalStyles from '@/shared/styles/GlobalStyles';
 import AuthProvider from './features/auth/components/AuthProvider';
 import { loadIFrameApi } from './features/youtube/remotes/loadIframeApi';
@@ -29,16 +28,14 @@ async function main() {
 
   root.render(
     <React.StrictMode>
-      <AuthErrorBoundary>
-        <AuthProvider>
-          <GlobalStyles />
-          <ThemeProvider theme={theme}>
-            <ToastProvider>
-              <RouterProvider router={router} />
-            </ToastProvider>
-          </ThemeProvider>
-        </AuthProvider>
-      </AuthErrorBoundary>
+      <AuthProvider>
+        <GlobalStyles />
+        <ThemeProvider theme={theme}>
+          <ToastProvider>
+            <RouterProvider router={router} />
+          </ToastProvider>
+        </ThemeProvider>
+      </AuthProvider>
     </React.StrictMode>
   );
 }
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index dab277283..e979a6156 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -1,5 +1,6 @@
 import { createBrowserRouter } from 'react-router-dom';
 import EditProfilePage from '@/pages/EditProfilePage';
+import AuthErrorBoundary from '@/shared/remotes/AuthErrorBoundary';
 import AuthPage from './pages/AuthPage';
 import LoginPage from './pages/LoginPage';
 import MainPage from './pages/MainPage';
@@ -13,7 +14,11 @@ import ROUTE_PATH from './shared/constants/path';
 const router = createBrowserRouter([
   {
     path: ROUTE_PATH.ROOT,
-    element: <Layout />,
+    element: (
+      <AuthErrorBoundary>
+        <Layout />
+      </AuthErrorBoundary>
+    ),
     children: [
       {
         index: true,
diff --git a/frontend/src/shared/hooks/useMutation.ts b/frontend/src/shared/hooks/useMutation.ts
index 1b2d47c46..b0ba09068 100644
--- a/frontend/src/shared/hooks/useMutation.ts
+++ b/frontend/src/shared/hooks/useMutation.ts
@@ -1,15 +1,13 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 // eslint-disable-next-line
 export const useMutation = <T, P extends any[]>(mutateFn: (...params: P) => Promise<T>) => {
   const [data, setData] = useState<T | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
-  const isErrored = useRef(false);
+  // const isErrored = useRef(false);
 
-  if (error && !isErrored.current) {
-    isErrored.current = true;
-    console.log('useMutation throw error!');
+  if (error) {
     throw error;
   }
 
diff --git a/frontend/src/shared/remotes/AuthErrorBoundary.tsx b/frontend/src/shared/remotes/AuthErrorBoundary.tsx
index 539f09370..ad77a5237 100644
--- a/frontend/src/shared/remotes/AuthErrorBoundary.tsx
+++ b/frontend/src/shared/remotes/AuthErrorBoundary.tsx
@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import LoginPopUp from '@/features/auth/components/LoginPopUp';
+// import LoginPopUp from '@/features/auth/components/LoginPopUp';
 import type { ReactNode } from 'react';
 
 interface Props {
@@ -24,9 +24,10 @@ class AuthErrorBoundary extends Component<Props, State> {
   render() {
     if (this.state.hasError) {
       console.log('errorboudary render fallback');
-      return <LoginPopUp />;
+      return <div>아아아아아아</div>;
     }
 
+    console.log('정상 렌더링');
     return this.props.children;
   }
 }