tempt: auth error boundary 위치 layout으로 변경

woowacourse-teams · Sep 19, 2023 · 680048a · 680048a
1 parent 019fa8b
commit 680048a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
   }
 }