Merge pull request #2 from Iam2Jo/T2-11--feature/quiz

Design: Add globalStyle
KDT1-FE · Nov 8, 2023 · e7c4bf9 · e7c4bf9
2 parents 3f2e6c4 + 98c9d1d
commit e7c4bf9
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 10 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,22 +1,26 @@
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import './globals.css'
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import GlobalStyle from '../styles/globalStyle';
+import '../styles/fonts/font.css';
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
-}
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
+    <>
+      <GlobalStyle />
+      <html lang="en">
+        <body className={inter.className}>{children}</body>
+      </html>
+    </>
+  );
 }
diff --git a/styles/fonts/NotoSansKR-Bold.woff b/styles/fonts/NotoSansKR-Bold.woff
diff --git a/styles/fonts/NotoSansKR-Medium.woff b/styles/fonts/NotoSansKR-Medium.woff
diff --git a/styles/fonts/NotoSansKR-Regular.woff b/styles/fonts/NotoSansKR-Regular.woff
diff --git a/styles/fonts/font.css b/styles/fonts/font.css
@@ -0,0 +1,18 @@
+@font-face {
+  font-family: "Noto Sans KR";
+  font-style: normal;
+  font-weight: 400;
+  src: url(./NotoSansKR-Regular.woff) format("woff");
+}
+@font-face {
+  font-family: "Noto Sans KR";
+  font-style: normal;
+  font-weight: 500;
+  src: url(./NotoSansKR-Medium.woff) format("woff");
+}
+@font-face {
+  font-family: "Noto Sans KR";
+  font-style: normal;
+  font-weight: 700;
+  src: url(./NotoSansKR-Bold.woff) format("woff");
+}
diff --git a/styles/globalStyle.ts b/styles/globalStyle.ts
@@ -0,0 +1,70 @@
+'use client';
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+  * {
+    font-family: "Noto Sans KR";
+    line-height: 1.5;
+    font-size: 16px;
+    box-sizing: border-box;
+  }
+
+  #root {
+    position: relative;
+  }
+  
+  html {
+    --color-main-yellow: #F2CC00;
+    --color-main-black: #050505;
+    --color-white: #ffffff;
+    --color-gray: #050505;
+    --color-disabled: #424242;
+  }
+
+  * {
+    padding: 0;
+    margin: 0;
+  }
+
+  body {    
+    background-color: #222;
+  }
+  
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+  
+  div,
+  li,
+  section {
+    box-sizing: border-box;
+  }
+  
+  ul,
+  li {
+    list-style: none;
+  }
+  
+  input {
+    color: inherit;
+    font-family: inherit;
+  }  
+
+  textarea {
+    color: inherit;
+    font-family: inherit;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-gray);
+    border: 0;
+    border-radius: 12px 12px 12px 12px;
+  }
+
+`;
+
+export default GlobalStyle;