Extract global style to component

Extract global style to component.

src/App.jsx

@@ -7,33 +7,19 @@ import {
 } from 'react-router-dom';
 
 import styled from '@emotion/styled';
-import { Global, css } from '@emotion/core';
 
+import GlobalStyle from './GlobalStyle';
 import RetrospectivesPage from './RetrospectivesPage';
 import WritingPage from './WritingPage';
 
-const GlobalStyles = css`
-  @font-face { 
-    font-family: 'MapoFlowerIsland'; 
-    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/MapoFlowerIslandA.woff') 
-    format('woff'); 
-    font-weight: normal; 
-    font-style: normal; 
-  }
-
-  * {
-    font-family: 'MapoFlowerIsland';
-  }
-`;
-
 const Header = styled.div({
   margin: '5em 10em',
 });
 
 export default function App() {
   return (
     <>
-      <Global styles={GlobalStyles} />
+      <GlobalStyle />
       <Header>
         <h1>
           <Link to="/">함께 회,고(Go) 해요.</Link>

src/GlobalStyle.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Global, css } from '@emotion/core';
+
+const GlobalStyles = css`
+@font-face { 
+  font-family: 'MapoFlowerIsland'; 
+  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/MapoFlowerIslandA.woff') 
+  format('woff'); 
+  font-weight: normal; 
+  font-style: normal; 
+}
+
+* {
+  font-family: 'MapoFlowerIsland';
+}
+`;
+
+export default function GlobalStyle() {
+  return <Global styles={GlobalStyles} />;
+}