블로그 기본 틀 추가, 테스트 글 추가

gatsby-config.ts

@@ -43,6 +43,13 @@ const config: GatsbyConfig = {
       },
       __key: "pages",
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `posts`,
+        path: `${__dirname}/posts/`,
+      },
+    },
     {
       resolve: `gatsby-plugin-google-gtag`,
       options: {

posts/test1/index.mdx

@@ -0,0 +1,17 @@
+---
+title: "My First Post"
+date: "2021-07-23"
+slug: "my-first-post"
+hero_image: "./michiel-annaert-qXdb_erAnqQ-unsplash.jpg"
+hero_image_alt: "A gray pitbull relaxing on the sidewalk with its tongue hanging out"
+hero_image_credit_text: "Christopher Ayme"
+hero_image_credit_link: "https://unsplash.com/photos/ocZ-_Y7-Ptg"
+---
+
+This is my first blog post! Isn't it _great_?
+
+Some of my **favorite** things are:
+
+- Petting dogs
+- Singing
+- Eating potato-based foods

posts/test2/index.mdx

@@ -0,0 +1,11 @@
+---
+title: "Another Post"
+date: "2021-07-24"
+slug: "another-post"
+hero_image: "./michiel-annaert-qXdb_erAnqQ-unsplash.jpg"
+hero_image_alt: "A gray pitbull relaxing on the sidewalk with its tongue hanging out"
+hero_image_credit_text: "Christopher Ayme"
+hero_image_credit_link: "https://unsplash.com/photos/ocZ-_Y7-Ptg"
+---
+
+Here's another post! It's even better than the first one!

src/components/GlobalStyles.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { Global, css } from "@emotion/react";
+import { Link, type HeadFC, type PageProps } from "gatsby";
+
+const globalStyles = css`
+  html {
+    font-size: 62.5%;
+  }
+
+  button {
+    background: none;
+    border: none;
+  }
+
+  a {
+    text-decoration: none;
+    font-size: 1.4rem;
+  }
+
+  @font-face {
+    font-family: "Pretendard-Regular";
+    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
+      format("woff");
+    font-weight: 400;
+    font-style: normal;
+  }
+  body {
+    font-family: "Pretendard-Regular", -apple-system, Roboto, sans-serif, serif;
+  }
+`;
+
+const GlobalStyles: React.FC<PageProps> = () => {
+  return <Global styles={globalStyles} />;
+};
+
+export default GlobalStyles;

src/components/Layout.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { Global, css } from "@emotion/react";
+import { Link, useStaticQuery, graphql } from "gatsby";
+import GlobalStyles from "./GlobalStyles";
+
+const pageStyles = {
+  color: "#232129",
+  padding: 64,
+  height: "100%",
+  // fontFamily: "-apple-system, Roboto, sans-serif, serif",
+};
+
+const Layout = ({ children }) => {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `);
+
+  return (
+    <div style={pageStyles}>
+      <GlobalStyles />
+      <div>
+        <header
+          css={css`
+            display: flex;
+            justify-content: space-between;
+            flex: 1;
+          `}
+        >
+          <div
+            css={css`
+              font-weight: bold;
+            `}
+          >
+            {data.site.siteMetadata.title}
+          </div>
+          <nav
+            css={css`
+              justify-content: space-between;
+            `}
+          >
+            <Link
+              to="/"
+              css={css`
+                font-weight: bold;
+              `}
+            >
+              Home
+            </Link>
+            <button
+              css={css`
+                font-weight: bold;
+              `}
+            >
+              Post
+            </button>
+            <Link
+              to="/resume"
+              css={css`
+                font-weight: bold;
+              `}
+            >
+              Resume
+            </Link>
+          </nav>
+        </header>
+      </div>
+      <main>{children}</main>
+      <footer>{/* Add your footer content here */}</footer>
+    </div>
+  );
+};
+
+export default Layout;