From fd71ed444b5f235f22262edf96c474e42ec4c18e Mon Sep 17 00:00:00 2001
From: bluetree7878 <bluetree7878@naver.com>
Date: Tue, 5 Nov 2024 19:35:23 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9A=99=20Setting(#37):=20Route=20=EC=B5=9C?=
 =?UTF-8?q?=EC=8B=A0=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                  |  4 ++--
 src/pages/{main/Main.tsx => learn/Learn.tsx} |  2 +-
 src/route/Router.tsx                         | 16 +++++++++-------
 src/style/GlobalStyle.ts                     |  6 ++++++
 src/style/{theme.ts => media.ts}             |  8 +-------
 5 files changed, 19 insertions(+), 17 deletions(-)
 rename src/pages/{main/Main.tsx => learn/Learn.tsx} (97%)
 rename src/style/{theme.ts => media.ts} (65%)

diff --git a/src/App.tsx b/src/App.tsx
index 8a6f726..795a166 100644
--- a/src/App.tsx
+++ b/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 />
diff --git a/src/pages/main/Main.tsx b/src/pages/learn/Learn.tsx
similarity index 97%
rename from src/pages/main/Main.tsx
rename to src/pages/learn/Learn.tsx
index d17cba1..6b67c17 100644
--- a/src/pages/main/Main.tsx
+++ b/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>
diff --git a/src/route/Router.tsx b/src/route/Router.tsx
index 244d54b..05fdbaa 100644
--- a/src/route/Router.tsx
+++ b/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>
     </>
diff --git a/src/style/GlobalStyle.ts b/src/style/GlobalStyle.ts
index f8e0796..3a5443f 100644
--- a/src/style/GlobalStyle.ts
+++ b/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;
diff --git a/src/style/theme.ts b/src/style/media.ts
similarity index 65%
rename from src/style/theme.ts
rename to src/style/media.ts
index a25b6f7..a7f86a1 100644
--- a/src/style/theme.ts
+++ b/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} {