feat: Road 페이지 추가에 따른 수정 작업

src/pages/post/{mdx.frontmatter__slug}.tsx → src/components/slug/BlogPost.tsx

@@ -4,30 +4,31 @@ import App from 'App'
 import { Comment, Layout, Mdx, Seo, Toc } from 'components'
 import { Flex } from 'components/@shared'
 import { HeadProps } from 'gatsby'
-import { graphql, PageProps } from 'gatsby'
 import { GatsbyImage, getImage } from 'gatsby-plugin-image'
 import React from 'react'
 import { Blog } from 'types/content'
 import { readingTimeWithCount } from 'utils/reading-time'
 
 interface Props {
   mdx: Blog
+  children: React.ReactNode
 }
 
-const BlogPost = ({ data, children }: PageProps<Props>) => {
-  const thumbnail = getImage(data.mdx.frontmatter.thumbnail)
-  const readingTime = readingTimeWithCount(data.mdx.body)
+const BlogPost = ({ mdx, children }: Props) => {
+  const thumbnail = getImage(mdx.frontmatter.thumbnail)
+  const readingTime = readingTimeWithCount(mdx.body)
 
   if (!thumbnail) throw new Error('이미지가 존재하지 않습니다!')
+
   return (
     <App>
       <Layout>
-        <h1>{data.mdx.frontmatter.title}</h1>
-        <time>{data.mdx.frontmatter.date}</time>
+        <h1>{mdx.frontmatter.title}</h1>
+        <time>{mdx.frontmatter.date}</time>
         <span>{readingTime.minutes} min read</span>
-        <Toc toc={data.mdx.tableOfContents} />
+        <Toc toc={mdx.tableOfContents} />
         <Flex justifyContent="center">
-          <ThumbnailImage image={thumbnail} alt={data.mdx.frontmatter.thumbnail_alt} />
+          <ThumbnailImage image={thumbnail} alt={mdx.frontmatter.thumbnail_alt} />
         </Flex>
 
         <MDXProvider
@@ -53,25 +54,6 @@ const BlogPost = ({ data, children }: PageProps<Props>) => {
   )
 }
 
-export const query = graphql`
-  query ($id: String) {
-    mdx(id: { eq: $id }) {
-      frontmatter {
-        title
-        date
-        thumbnail_alt
-        thumbnail {
-          childImageSharp {
-            gatsbyImageData(transformOptions: { fit: FILL })
-          }
-        }
-      }
-      body
-      tableOfContents
-    }
-  }
-`
-
 export const Head = ({
   location,
   pageContext,

src/components/slug/MyRoad.tsx

@@ -0,0 +1,111 @@
+import styled from '@emotion/styled'
+import { MDXProvider } from '@mdx-js/react'
+import App from 'App'
+import { Layout, Mdx, Seo } from 'components'
+import { graphql, HeadFC, useStaticQuery } from 'gatsby'
+import React from 'react'
+import { Blog, Content } from 'types/content'
+
+interface Props {
+  mdx: Blog
+  children: React.ReactNode
+}
+
+interface Roads {
+  allMdx: {
+    nodes: Content[]
+    totalCount: number
+    group: {
+      totalCount: number
+      fieldValue: string
+    }[]
+  }
+}
+
+const MyRoad = ({ mdx, children }: Props) => {
+  const data: Roads = useStaticQuery(graphql`
+    query {
+      allMdx(
+        filter: { fields: { source: { eq: "roads" } } }
+        sort: { frontmatter: { date: DESC } }
+      ) {
+        totalCount
+        nodes {
+          fields {
+            source
+            slug
+          }
+          id
+          body
+          frontmatter {
+            date
+          }
+        }
+      }
+    }
+  `)
+
+  return (
+    <App>
+      <Layout>
+        <Aside>
+          <h2>Recent Posts</h2>
+          <ul>
+            {data.allMdx.nodes.map((node) => (
+              <li key={node.id}>{node.frontmatter.date.replaceAll('-', '.')}</li>
+            ))}
+          </ul>
+        </Aside>
+        <time>{mdx.frontmatter.date}</time>
+
+        <MDXProvider
+          components={{
+            h1: Mdx.H1,
+            h2: Mdx.H2,
+            h3: Mdx.H3,
+            p: Mdx.P,
+            ul: Mdx.UL,
+            li: Mdx.LI,
+            a: Mdx.ANCHOR,
+            blockquote: Mdx.BLOCKQUOTE,
+            Image: Mdx.IMAGE,
+            Callout: Mdx.CALLOUT,
+          }}
+        >
+          {children}
+        </MDXProvider>
+      </Layout>
+    </App>
+  )
+}
+
+export const Head: HeadFC = () => <Seo />
+
+export default MyRoad
+
+const Aside = styled.aside`
+  position: fixed;
+  top: 100px;
+  left: 20px;
+  border-left: 3px solid ${({ theme }) => theme.colors.primary.base};
+  width: 300px;
+  height: calc(100vh - 128px);
+  padding: 0 10px;
+  overflow-y: scroll;
+  ::-webkit-scrollbar {
+    width: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 20px;
+    background: ${({ theme }) => theme.colors.primary.base};
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: ${({ theme }) => theme.colors.primary.light};
+  }
+
+  @media (max-width: 1400px) {
+    display: none;
+  }
+`

src/pages/404.tsx

@@ -40,7 +40,11 @@ export const Head: HeadFC = () => <Seo />
 
 export const query = graphql`
   query {
-    allMdx(limit: 3, sort: { frontmatter: { date: DESC } }) {
+    allMdx(
+      limit: 3
+      sort: { frontmatter: { date: DESC } }
+      filter: { fields: { source: { eq: "contents" } } }
+    ) {
       nodes {
         frontmatter {
           date(formatString: "MMMM DD, YYYY")

src/pages/road.tsx

@@ -18,8 +18,6 @@ interface Props {
 }
 
 const LoadPage = ({ data, children }: PageProps<Props>) => {
-  console.log(data)
-
   return (
     <App>
       <Layout>

src/pages/{mdx.frontmatter__type}/{mdx.frontmatter__slug}.tsx

@@ -0,0 +1,71 @@
+import styled from '@emotion/styled'
+import { Seo } from 'components'
+import BlogPost from 'components/slug/BlogPost'
+import MyRoad from 'components/slug/MyRoad'
+import { HeadProps } from 'gatsby'
+import { graphql, PageProps } from 'gatsby'
+import { GatsbyImage } from 'gatsby-plugin-image'
+import React from 'react'
+import { Blog } from 'types/content'
+
+interface Props {
+  mdx: Blog
+}
+
+const Slug = ({ data, children }: PageProps<Props>) => {
+  if (data.mdx.fields.source === 'roads') {
+    return <MyRoad mdx={data.mdx}>{children}</MyRoad>
+  }
+
+  if (data.mdx.fields.source === 'contents') {
+    return <BlogPost mdx={data.mdx}>{children}</BlogPost>
+  }
+}
+
+export const query = graphql`
+  query ($id: String) {
+    mdx(id: { eq: $id }) {
+      frontmatter {
+        title
+        date
+        thumbnail_alt
+        thumbnail {
+          childImageSharp {
+            gatsbyImageData(transformOptions: { fit: FILL })
+          }
+        }
+      }
+      fields {
+        slug
+        source
+      }
+      body
+      tableOfContents
+    }
+  }
+`
+
+export const Head = ({
+  location,
+  pageContext,
+}: HeadProps<object, { frontmatter: { title: string; description: string } }>) => {
+  return (
+    <Seo
+      title={pageContext.frontmatter.title}
+      description={pageContext.frontmatter.description}
+      siteUrl={`https://jgjgill-blog.netlify.app${location.pathname}`}
+    />
+  )
+}
+
+export default Slug
+
+const ThumbnailImage = styled(GatsbyImage)`
+  margin: 20px 0;
+
+  width: 50%;
+
+  @media (max-width: 480px) {
+    width: 100%;
+  }
+`

src/types/content.ts

@@ -18,6 +18,10 @@ export type Frontmatter = {
 }
 
 export interface Blog {
+  fields: {
+    slug: string
+    source: 'contents' | 'roads'
+  }
   frontmatter: {
     title: string
     date: string