feat: #6 글로벌 스타일 (#18)

imb96 · dlwl98 · web-flow · commit afcf1525df97 · 2023-10-27T17:59:58.000+09:00
Co-authored-by: 이진욱 &lt;ff981113@hanyang.ac.kr&gt;
diff --git a/index.html b/index.html
@@ -3,6 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://webfontworld.github.io/gmarket/GmarketSans.css"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>픽플</title>
   </head>
diff --git a/src/App.tsx b/src/App.tsx
@@ -7,6 +7,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import { router } from '@routes/router';
 
+import GlobalStyle from '@styles/globalStyle';
 import { theme } from '@styles/theme';
 
 const queryClient = new QueryClient();
@@ -17,6 +18,7 @@ function App() {
       <ThemeProvider theme={theme}>
         <RouterProvider router={router} />
         <ReactQueryDevtools />
+        <GlobalStyle />
       </ThemeProvider>
     </QueryClientProvider>
   );
diff --git a/src/styles/emotion.d.ts b/src/styles/emotion.d.ts
@@ -0,0 +1,34 @@
+import '@emotion/react';
+
+import { theme } from '@styles/theme';
+
+type Palette = typeof theme.PALETTE;
+type Styles = typeof theme.STYLES;
+type FontSize = typeof theme.FONT_SIZE;
+type FontWeight = typeof theme.FONT_WEIGHT;
+type LineHeight = typeof theme.LINE_HEIGHT;
+
+declare module '@emotion/react' {
+  export interface Theme
+    extends Palette,
+      Styles,
+      FontSize,
+      FontWeight,
+      LineHeight {
+    PALETTE: {
+      [key in keyof Palette]: string;
+    };
+    STYLES: {
+      [key in keyof Styles]: string;
+    };
+    FONT_SIZE: {
+      [key in keyof FontSize]: string;
+    };
+    FONT_WEIGHT: {
+      [key in keyof FontWeight]: string;
+    };
+    LINE_HEIGHT: {
+      [key in keyof LineHeight]: string;
+    };
+  }
+}
diff --git a/src/styles/globalStyle.tsx b/src/styles/globalStyle.tsx
@@ -0,0 +1,24 @@
+import { Global, css } from '@emotion/react';
+
+const style = css`
+  * {
+    box-sizing: border-box;
+  }
+
+  body {
+    width: 100vw;
+    height: 100vh;
+  }
+
+  #root {
+    font-family: 'GmarketSans';
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+  }
+`;
+const GlobalStyle = () => {
+  return <Global styles={style} />;
+};
+
+export default GlobalStyle;
