feat: react-router-dom 추가 및 레이아웃 구성 변경

Author: y00eunji

package.json

@@ -24,7 +24,8 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.5.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

pnpm-lock.yaml

@@ -1,16 +1,23 @@
-import { Global } from "@emotion/react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { ThemeProvider } from "@mui/material/styles";
 import { CssBaseline } from "@mui/material";
+import { Global } from "@emotion/react";
 import { muiTheme, globalStyles } from "./styles/globalStyles";
-
-import Header from "./components/layout/Header";
+import MainLayout from "./components/layout";
+import Test from "./components/Test";
 
 function App() {
   return (
     <ThemeProvider theme={muiTheme}>
       <CssBaseline />
       <Global styles={globalStyles} />
-      <Header />
+      <BrowserRouter>
+        <Routes>
+          <Route element={<MainLayout />}>
+            <Route path="/" element={<Test />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
     </ThemeProvider>
   );
 }