Merge pull request #61 from modern-agile-team/setting/#37/Styled-comp…

…onents_theme Styled-components의 글로벌 스타일 및 미디어(반응형) 적용
modern-agile-team · Nov 7, 2024 · d6ba8cd · d6ba8cd
2 parents 7555211 + 94f4e96
commit d6ba8cd
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -2,10 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="./src/style/index.css" />
-    <title>Vite + React + TS</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/subsets/Maplestory-dynamic-subset.css"
+      type="text/css"
+    />
+    <title>CokoEdu</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.59.0",
-    "@tanstack/react-query-devtools": "^5.59.0",
+    "@tanstack/react-query": "^5.59.9",
+    "@tanstack/react-query-devtools": "^5.59.9",
     "@types/dompurify": "^3.0.5",
     "axios": "^1.7.7",
     "dompurify": "^3.1.7",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,10 @@
 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 { media } from './style/media';
+import GlobalStyle from './style/GlobalStyle';
+
 function App() {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -13,7 +17,10 @@ function App() {
   return (
     <>
       <QueryClientProvider client={queryClient}>
-        <Router />
+        <ThemeProvider theme={media}>
+          <GlobalStyle />
+          <Router />
+        </ThemeProvider>
         <ReactQueryDevtools initialIsOpen={false} />
       </QueryClientProvider>
     </>

diff --git a/src/pages/main/Main.tsx → src/pages/learn/Learn.tsx b/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>

diff --git 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 Quest from '../pages/Quest/Quest';
-import Ranking from '../pages/Ranking/Ranking';
+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
@@ -0,0 +1,18 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`  
+  *, *::before, *::after {
+    font-family : Maplestory;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  body {
+    background-color: #FFF8EB;
+  }
+  button {
+    cursor: pointer;
+  }
+`;
+
+export default GlobalStyle;
diff --git a/src/style/index.css b/src/style/index.css
diff --git a/src/style/media.ts b/src/style/media.ts
@@ -0,0 +1,11 @@
+export const media = {
+  /**
+   * @example
+   * ${({ media }) => media.desktop} {
+   *   padding: 3px;
+   * }
+   */
+  desktop: '@media (min-width: 1280px)',
+  tablet: '@media (min-width: 768px) and (max-width: 1279px)',
+  mobile: '@media (max-width: 767px)',
+};