layout에서 global style을 import하도록 변경

Author: zoomkoding

gatsby-browser.js

@@ -1,6 +1 @@
-import '@fontsource/montserrat';
-import './src/styles/_reset.scss';
-import './src/styles/_colors.scss';
-import './src/styles/_global-style.scss';
-import './src/styles/_markdown-style.scss';
-import 'prismjs/themes/prism-tomorrow.css';
+require('typeface-montserrat');

src/components/layout/style.scss

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
-import PageHeader from '../page-header';
-import PageFooter from '../page-footer';
+import PageHeader from '../components/page-header';
+import PageFooter from '../components/page-footer';
 import './style.scss';
 
 const Layout = ({ children }) => {

src/components/layout/index.js renamed to src/layout/index.js

@@ -0,0 +1,47 @@
+@use '../styles/variables'as *;
+@use '../styles/mixins'as *;
+@use '../styles/reset'as *;
+@use '../styles/colors'as *;
+
+* {
+    box-sizing: border-box;
+    appearance: none;
+}
+
+html {
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+    font-size: 14px;
+}
+
+body {
+    background-color: var(--background-color) !important;
+}
+
+
+a {
+    color: var(--link-text-color);
+}
+
+.page-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-height: 100vh;
+    word-break: keep-all;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: $font-family;
+    color: var(--primary-text-color);
+    @include content-horizontal-padding;
+
+    .page-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        @include content-max-width;
+    }
+}