feat: MUI 테마 및 글로벌 스타일 적용으로 App 구성 변경

Author: y00eunji

src/App.tsx

@@ -1,24 +1,16 @@
 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 MainLayout from "./components/layout";
 import Test from "./components/Test";
 
 function App() {
   return (
-    <ThemeProvider theme={muiTheme}>
-      <CssBaseline />
-      <Global styles={globalStyles} />
-      <BrowserRouter>
-        <Routes>
-          <Route element={<MainLayout />}>
-            <Route path="/" element={<Test />} />
-          </Route>
-        </Routes>
-      </BrowserRouter>
-    </ThemeProvider>
+    <BrowserRouter>
+      <Routes>
+        <Route element={<MainLayout />}>
+          <Route path="/" element={<Test />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>
   );
 }
 

src/main.tsx

@@ -2,7 +2,8 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ThemeProvider, CssBaseline } from "@mui/material";
-import { theme } from "./theme";
+import { Global } from "@emotion/react";
+import { muiTheme, globalStyles } from "./styles/globalStyles";
 import "./index.css";
 import App from "./App.tsx";
 
@@ -19,8 +20,9 @@ const queryClient = new QueryClient({
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={muiTheme}>
         <CssBaseline />
+        <Global styles={globalStyles} />
         <App />
       </ThemeProvider>
     </QueryClientProvider>