feat: add scss support

GBSWHS · Aug 20, 2023 · 41baa9e · 41baa9e
1 parent 1d16ecd
commit 41baa9e
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 90 deletions.
diff --git a/package.json b/package.json
@@ -12,14 +12,17 @@
   "dependencies": {
     "@cloudscape-design/components": "^3.0.364",
     "@cloudscape-design/global-styles": "^1.0.12",
+    "@fontsource/noto-sans-kr": "^5.0.7",
     "@types/node": "^20.4.9",
     "axios": "^1.4.0",
+    "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-router-dom": "^6.15.0",
     "react-select": "^5.7.4",
+    "sass": "^1.66.1",
     "socket.io-client": "^4.7.2",
     "styled-components": "^6.0.7",
     "styled-reset": "^4.5.1",
@@ -42,4 +45,4 @@
     "typescript": "*",
     "vite": "^4.4.5"
   }
-}
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,13 +6,11 @@ import Invites from './pages/Invites'
 import Search from './pages/Search'
 import PathProcesor from './components/PathProcessor'
 import { type FC } from 'react'
-import { GlobalStyles } from './styles/globals'
 import { Toaster } from 'react-hot-toast'
 
 const App: FC = () =>
   <BrowserRouter>
     <Header />
-    <GlobalStyles />
     <PathProcesor />
 
     <Routes>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -178,7 +178,6 @@ const InputBody = styled.div`
     width: 100% !important;
     display: block !important;
     position: relative !important;
-    height: 100%;
 
     input#search {
       color: rgb(255, 255, 255) !important;

diff --git a/src/global.scss b/src/global.scss
@@ -0,0 +1,81 @@
+@import 'normalize.css';
+@import '@fontsource/noto-sans-kr/400.css';
+@import '@fontsource/noto-sans-kr/700.css';
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 14px;
+  font-family: 'Noto Sans KR', Arial, Helvetica, sans-serif;
+}
+
+html, body, #root {
+  width: 100%;
+  height: 100%;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+b {
+  font-weight: 700;
+}
+
+h1, h2, h3, h4, h5, h6, p, li, ul, ol {
+  padding: 0;
+  margin: 0;
+  font-size: inherit;
+}
+
+input, select, textarea {
+  display: block;
+}
+
+button {
+  word-break: keep-all !important;
+  font-size: 14px;
+}
+
+.blueButton {
+  background-color: #007dbc !important;
+  border-color: #007dbc !important;
+}
+
+.blueButton:hover {
+  background-color: #0972d3 !important;
+  border-color: #0972d3 !important;
+}
+
+.redButton {
+  background-color: #df3312 !important;
+  border-color: #df3312 !important;
+}
+
+.redButton:hover {
+  background-color: #d91515 !important;
+  border-color: #d91515 !important;
+}
+
+.orangeButton {
+  background-color: #ff9900 !important;
+  border-color: #ff9900 !important;
+}
+
+.orangeButton:hover {
+  background-color: #ec7211 !important;
+  border-color: #ec7211 !important;
+}
+
+.greenButton {
+  background-color: rgb(60, 135, 0) !important;
+  border-color: rgb(60, 135, 0) !important; 
+}
+
+.greenButton:hover {
+  background-color: #037f0c !important;
+  border-color: #037f0c !important; 
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,6 +1,7 @@
 import { StrictMode } from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
+import './global.scss'
 
 ReactDOM
   .createRoot(document.getElementById('root') as HTMLDivElement)

diff --git a/src/styles/globals.ts b/src/styles/globals.ts
@@ -1,87 +1,4 @@
-import { createGlobalStyle, styled } from 'styled-components'
-import reset from 'styled-reset'
-
-export const GlobalStyles = createGlobalStyle`
-  ${reset}
-  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-
-  * {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    font-weight: 400;
-  }
-
-  html,
-  body {
-    max-width: 100vw;
-    width: 100vw;
-    height: 100vh;
-    font-size: 1.4rem;
-    font-family: 'Noto Sans', sans-serif;
-  }
-
-  #root {
-    height: 100%;
-  }
-
-  a {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  b {
-    font-weight: 700;
-  }
-
-  header, nav, div {
-    display: block;
-  }
-  
-  button {
-    word-break: keep-all !important;
-  }
-
-  .blueButton {
-    background-color: #007dbc !important;
-    border-color: #007dbc !important;
-  }
-
-  .blueButton:hover {
-    background-color: #0972d3 !important;
-    border-color: #0972d3 !important;
-  }
-
-  .redButton {
-    background-color: #df3312 !important;
-    border-color: #df3312 !important;
-  }
-
-  .redButton:hover {
-    background-color: #d91515 !important;
-    border-color: #d91515 !important;
-  }
-
-  .orangeButton {
-    background-color: #ff9900 !important;
-    border-color: #ff9900 !important;
-  }
-
-  .orangeButton:hover {
-    background-color: #ec7211 !important;
-    border-color: #ec7211 !important;
-  }
-
-  .greenButton {
-    background-color: rgb(60, 135, 0) !important;
-    border-color: rgb(60, 135, 0) !important; 
-  }
-
-  .greenButton:hover {
-    background-color: #037f0c !important;
-    border-color: #037f0c !important; 
-  }
-`
+import { styled } from 'styled-components'
 
 export const Body = styled.div`
   width: 100%;

diff --git a/yarn.lock b/yarn.lock
@@ -1422,6 +1422,11 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83"
   integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==
 
+"@fontsource/noto-sans-kr@^5.0.7":
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/@fontsource/noto-sans-kr/-/noto-sans-kr-5.0.7.tgz#ec4a804bbdb6f685b8826795d867945d88939847"
+  integrity sha512-EL6iFo/DN6H1glJjvyLC5IVSPdGIbiTkuQaXjXTGmhCbAHaHBOO86nZJR5gChgDdKLdnHO8nFAU3vGEIHhzBLg==
+
 "@formatjs/[email protected]":
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.0.tgz#2ce191a3bde4c65c6684e03fa247062a4a294b9e"
@@ -2049,7 +2054,7 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chokidar@^3.4.0:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.0:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -2933,6 +2938,11 @@ ignore@^5.2.0, ignore@^5.2.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
+immutable@^4.0.0:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.2.tgz#f89d910f8dfb6e15c03b2cae2faaf8c1f66455fe"
+  integrity sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==
+
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -3377,6 +3387,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize.css@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
 object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -3814,6 +3829,15 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
+sass@^1.66.1:
+  version "1.66.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.66.1.tgz#04b51c4671e4650aa393740e66a4e58b44d055b1"
+  integrity sha512-50c+zTsZOJVgFfTgwwEzkjA3/QACgdNsKueWPyAR0mRINIvLAStVQBbPg14iuqEQ74NPDbXzJARJ/O4SI1zftA==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 scheduler@^0.23.0:
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
@@ -3892,7 +3916,7 @@ socket.io-parser@~4.2.4:
     "@socket.io/component-emitter" "~3.1.0"
     debug "~4.3.1"
 
-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==