refact: clean up unused scrollbar in base layout

src/components/Layout/index.tsx

@@ -8,8 +8,6 @@
 import { graphql, useStaticQuery } from "gatsby"
 import React, { PropsWithChildren } from "react"
 
-import Scrollbar from "react-perfect-scrollbar"
-import "react-perfect-scrollbar/dist/css/styles.css"
 import { GlobalStyles } from "../../globalStyles"
 import { Container } from "../Container"
 import { Footer } from "../Footer"
@@ -28,18 +26,16 @@ export function Layout({ children }: PropsWithChildren<{}>) {
   `)
 
   return (
-    <Scrollbar>
+    <SC.LayoutWrapper>
       <GlobalStyles />
-      <SC.Main>
-        <Header />
-        <SC.MainContent>
-          <Container>
-            <h1>{data.site.siteMetadata.title}</h1>
-            {children}
-          </Container>
-        </SC.MainContent>
-        <Footer />
-      </SC.Main>
-    </Scrollbar>
+      <Header />
+      <SC.MainContent>
+        <Container>
+          <h1>{data.site.siteMetadata.title}</h1>
+          {children}
+        </Container>
+      </SC.MainContent>
+      <Footer />
+    </SC.LayoutWrapper>
   )
 }

src/components/Layout/styles.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components"
 
-export const Main = styled.div`
+export const LayoutWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;