diff --git a/src/App.tsx b/src/App.tsx
index 2e0130d..45106fd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,18 +1,6 @@
-import { useState } from 'react';
+import { Outlet } from 'react-router-dom';
 
+// TODO : Layout으로 Outlet 감싸기
 export const App = () => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
-    </>
-  );
+  return <Outlet />;
 };
diff --git a/src/main.tsx b/src/main.tsx
index 3df5aba..7179fc6 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,4 +1,5 @@
 import { StrictMode } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createRoot } from 'react-dom/client';
 
 import { App } from './App.tsx';
@@ -8,8 +9,20 @@ if (import.meta.env.DEV) {
   const { worker } = await import('./mocks/browser.ts');
   worker.start();
 }
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 3,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </StrictMode>
 );
diff --git a/src/routes/route.tsx b/src/routes/route.tsx
new file mode 100644
index 0000000..92016f4
--- /dev/null
+++ b/src/routes/route.tsx
@@ -0,0 +1,10 @@
+import { createBrowserRouter } from 'react-router-dom';
+
+import { App } from '@/App';
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+  },
+]);