#1 글로벌 스타일 설정하기

dlgustn555 · Aug 22, 2021 · 861580b · 861580b
1 parent d1f58cf
commit 861580b
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
     "next": "^11.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.0"
+    "styled-components": "^5.3.0",
+    "styled-reset": "^4.3.4"
   },
   "devDependencies": {
     "@types/node": "^16.7.1",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -0,0 +1,13 @@
+import { AppProps } from 'next/app'
+import GlobalStyle from '../styles/GlobalStyle'
+
+const app = ({ Component, pageProps }: AppProps) => {
+  return (
+    <>
+      <GlobalStyle />
+      <Component {...pageProps} />
+    </>
+  )
+}
+
+export default app
diff --git a/pages/_documnt.tsx → pages/_document.tsx b/pages/_documnt.tsx → pages/_document.tsx
@@ -1,4 +1,4 @@
-import Document, { DocumentContext } from 'next/document'
+import Document, { DocumentContext, Html, Head, Main, NextScript } from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
 
 class MyDocument extends Document {
@@ -24,6 +24,22 @@ class MyDocument extends Document {
       sheet.seal()
     }
   }
+
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
+          <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap" rel="stylesheet" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
 }
 
 export default MyDocument
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,10 +1,16 @@
 import React, { FC } from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div`
+  font-size: 21px;
+  color: red;
+`
 
 const index: FC = () => {
   return (
-    <div>
-      <h1>HI</h1>
-    </div>
+    <Container>
+      <h1>Almost before we knew it, we had left the ground.</h1>
+    </Container>
   )
 }
 

diff --git a/styles/GlobalStyle.ts b/styles/GlobalStyle.ts
@@ -0,0 +1,26 @@
+import reset from 'styled-reset'
+import { createGlobalStyle, css } from 'styled-components'
+import palette from './palette'
+
+const globalStyle = css`
+  ${reset};
+  * {
+    box-sizing: border-box;
+  }
+  body {
+    /* font-family: Noto Sans, Noto Sans KR; */
+    font-family: 'Nunito', sans-serif;
+    color: ${palette.black};
+    line-height: 1.2;
+  }
+  a {
+    text-decoration: none;
+    color: ${palette.black};
+  }
+`
+
+const GlobalStyle = createGlobalStyle`
+    ${globalStyle};
+`
+
+export default GlobalStyle
diff --git a/styles/palette.ts b/styles/palette.ts
@@ -0,0 +1,27 @@
+export default {
+  cardinal: '#a41850',
+  davidson_orange: '#c13515',
+  tawny: '#d93900',
+  amaranth: '#E51E53',
+  orange: '#fc642d',
+  main_pink: '#FF385C',
+  bittersweet: '#ff5a5f',
+  black: '#222222',
+  charcoal: '#484848',
+  snow: '#FFF8F6',
+  gray_48: '#484848',
+  gray_71: '#717171',
+  gray_76: '#767676',
+  gray_80: '#808080',
+  gray_85: '#858585',
+  gray_aa: '#aaa',
+  gray_bb: '#bbb',
+  gray_b0: '#b0b0b0',
+  gray_c4: '#c4c4c4',
+  gray_dd: '#ddd',
+  gray_eb: '#ebebeb',
+  gray_e5: '#e5e5e5',
+  gray_f7: '#f7f7f7',
+  dark_cyan: '#008489',
+  green: '#008A05',
+}