⚙ Setting(#37): Route 최신화

src/App.tsx

@@ -2,7 +2,7 @@ import Router from './route/Router';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { ThemeProvider } from 'styled-components';
-import { theme } from './style/theme';
+import { media } from './style/media';
 import GlobalStyle from './style/GlobalStyle';
 import GlobalFont from './style/GlobalFont';
 
@@ -18,7 +18,7 @@ function App() {
   return (
     <>
       <QueryClientProvider client={queryClient}>
-        <ThemeProvider theme={theme}>
+        <ThemeProvider theme={media}>
           <GlobalStyle />
           <GlobalFont />
           <Router />

src/pages/main/Main.tsx → src/pages/learn/Learn.tsx

@@ -5,7 +5,7 @@ import {
   LayOutDiv,
   FeatureDiv,
 } from '../../style/LayOut';
-export default function Main() {
+export default function Learn() {
   return (
     <AlignCenter>
       <GridContainer>

src/route/Router.tsx

@@ -1,19 +1,21 @@
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import Main from '../pages/main/Main';
+import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
+import Learn from '../pages/learn/Learn';
 import Quest from '../pages/quest/Quest';
 import Ranking from '../pages/ranking/Ranking';
 import Quiz from '../pages/quiz/Quiz';
 import Login from '../pages/login/Login';
+
 export default function Router() {
   return (
     <>
       <BrowserRouter>
         <Routes>
-          <Route path="/" element={<Main />}></Route>
-          <Route path="/quest" element={<Quest />}></Route>
-          <Route path="/ranking" element={<Ranking />}></Route>
-          <Route path="/quiz" element={<Quiz />}></Route>
-          <Route path="/login" element={<Login />}></Route>
+          <Route path="/" element={<Navigate to="/learn" />} />
+          <Route path="/learn" element={<Learn />} />
+          <Route path="/quest" element={<Quest />} />
+          <Route path="/ranking" element={<Ranking />} />
+          <Route path="/quiz" element={<Quiz />} />
+          <Route path="/login" element={<Login />} />
         </Routes>
       </BrowserRouter>
     </>

src/style/GlobalStyle.ts

@@ -7,6 +7,12 @@ const GlobalStyle = createGlobalStyle`
     padding: 0;
     box-sizing: border-box;
   }
+  body {
+    background-color: #FFF8EB;
+  }
+  button {
+    cursor: pointer;
+  }
 `;
 
 export default GlobalStyle;

src/style/theme.ts → src/style/media.ts

@@ -1,10 +1,4 @@
-export const theme = {
-  /** @example color: ${({ theme }) => theme.color.main; */
-  color: {
-    main: '#0070f3',
-    sub: '#1db954',
-  },
-
+export const media = {
   /**
    * @example
    * ${({ theme }) => theme.media.desktop} {