feat: 에러 바운더리 적용[#82]

src/App.tsx

@@ -1,8 +1,12 @@
-import { Outlet } from "react-router-dom";
+import { Outlet } from 'react-router-dom';
+import ErrorResetBoundaryWrapper from './shared/error/ErrorResetBoundaryWrapper';
 
-/*레이아웃 컴포넌트가 감싸집니다 */
 function App() {
-  return <Outlet />;
+  return (
+    <ErrorResetBoundaryWrapper>
+      <Outlet />
+    </ErrorResetBoundaryWrapper>
+  );
 }
 
 export default App;

src/main.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
-import { RouterProvider } from 'react-router-dom';
 import ReactDOM from 'react-dom/client';
 
-import router from './router';
 import { SKIP_MSW_WARNING_URL } from './shared/constants/msw';
 
-import Layout from './Layout';
+import Providers from './providers/index.tsx';
 
 async function enableMocking() {
   const { worker } = await import('./mocks/browser.ts');
@@ -22,9 +20,7 @@ async function enableMocking() {
 enableMocking().then(() =>
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
-      <Layout>
-        <RouterProvider router={router} />
-      </Layout>
+      <Providers />
     </React.StrictMode>
   )
 );

src/providers/index.tsx

@@ -0,0 +1,21 @@
+import { RouterProvider } from 'react-router-dom';
+
+import { QueryProvider } from './QueryProvider';
+import { ThemeProvider } from './ThemeProvider';
+import ErrorBoundary from '../shared/error/ErrorBoundary';
+import FallbackComponent from '../shared/error/FallbackComponent';
+import router from '../router';
+
+const Providers = () => {
+  return (
+    <ErrorBoundary fallback={FallbackComponent}>
+      <QueryProvider>
+        <ThemeProvider>
+          <RouterProvider router={router} />
+        </ThemeProvider>
+      </QueryProvider>
+    </ErrorBoundary>
+  );
+};
+
+export default Providers;

src/shared/error/ErrorResetBoundaryWrapper.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { QueryErrorResetBoundary } from '@tanstack/react-query';
+
+import ApiErrorBoundary from './ApiErrorBoundary';
+import FallbackComponent from './FallbackComponent';
+
+const ErrorResetBoundaryWrapper = ({ children }: { children: ReactNode }) => {
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ApiErrorBoundary fallback={FallbackComponent} onReset={reset}>
+          {children}
+        </ApiErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+};
+
+export default ErrorResetBoundaryWrapper;