refactor: Provider 컴포넌트 분리

Author: yewonJin

apps/frontend/src/app/main.tsx

@@ -1,23 +1,13 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { RouterProvider, createRouter } from "@tanstack/react-router";
 import "../shared/index.css";
-import { routeTree } from "@/app/routeTree.gen";
-
-const queryClient = new QueryClient();
-
-const router = createRouter({ routeTree });
-declare module "@tanstack/react-router" {
-  interface Register {
-    router: typeof router;
-  }
-}
+import { TanstackQueryProvider } from "./providers/TanstackQueryProvider";
+import { TanstackRouterProvider } from "./providers/TanstackRouterProvider";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={router} />
-    </QueryClientProvider>
+    <TanstackQueryProvider>
+      <TanstackRouterProvider />
+    </TanstackQueryProvider>
   </StrictMode>,
 );

apps/frontend/src/app/providers/TanstackQueryProvider.tsx

@@ -0,0 +1,13 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+export function TanstackQueryProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}

apps/frontend/src/app/providers/TanstackRouterProvider.tsx

@@ -0,0 +1,13 @@
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+import { routeTree } from "@/app/routeTree.gen";
+
+const router = createRouter({ routeTree });
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+export function TanstackRouterProvider() {
+  return <RouterProvider router={router} />;
+}