From b8c0917c769899442069d2c4cc1a48aeaf8b036b Mon Sep 17 00:00:00 2001 From: jgjgill Date: Mon, 13 Nov 2023 05:16:51 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20Road=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../slug/BlogPost.tsx} | 36 ++---- src/components/slug/MyRoad.tsx | 111 ++++++++++++++++++ src/pages/404.tsx | 6 +- src/pages/road.tsx | 2 - .../{mdx.frontmatter__slug}.tsx | 71 +++++++++++ src/types/content.ts | 4 + 6 files changed, 200 insertions(+), 30 deletions(-) rename src/{pages/post/{mdx.frontmatter__slug}.tsx => components/slug/BlogPost.tsx} (67%) create mode 100644 src/components/slug/MyRoad.tsx create mode 100644 src/pages/{mdx.frontmatter__type}/{mdx.frontmatter__slug}.tsx diff --git a/src/pages/post/{mdx.frontmatter__slug}.tsx b/src/components/slug/BlogPost.tsx similarity index 67% rename from src/pages/post/{mdx.frontmatter__slug}.tsx rename to src/components/slug/BlogPost.tsx index 65e08ba..c4314ec 100644 --- a/src/pages/post/{mdx.frontmatter__slug}.tsx +++ b/src/components/slug/BlogPost.tsx @@ -4,7 +4,6 @@ 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' @@ -12,22 +11,24 @@ import { readingTimeWithCount } from 'utils/reading-time' interface Props { mdx: Blog + children: React.ReactNode } -const BlogPost = ({ data, children }: PageProps) => { - 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 ( -

{data.mdx.frontmatter.title}

- +

{mdx.frontmatter.title}

+ {readingTime.minutes} min read - + - + ) => { ) } -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, diff --git a/src/components/slug/MyRoad.tsx b/src/components/slug/MyRoad.tsx new file mode 100644 index 0000000..a2aefdf --- /dev/null +++ b/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 ( + + + + + + + {children} + + + + ) +} + +export const Head: HeadFC = () => + +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; + } +` diff --git a/src/pages/404.tsx b/src/pages/404.tsx index fc2c324..b06426b 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -40,7 +40,11 @@ export const Head: HeadFC = () => 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") diff --git a/src/pages/road.tsx b/src/pages/road.tsx index f275638..02b5c39 100644 --- a/src/pages/road.tsx +++ b/src/pages/road.tsx @@ -18,8 +18,6 @@ interface Props { } const LoadPage = ({ data, children }: PageProps) => { - console.log(data) - return ( diff --git a/src/pages/{mdx.frontmatter__type}/{mdx.frontmatter__slug}.tsx b/src/pages/{mdx.frontmatter__type}/{mdx.frontmatter__slug}.tsx new file mode 100644 index 0000000..fc23fdf --- /dev/null +++ b/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) => { + if (data.mdx.fields.source === 'roads') { + return {children} + } + + if (data.mdx.fields.source === 'contents') { + return {children} + } +} + +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) => { + return ( + + ) +} + +export default Slug + +const ThumbnailImage = styled(GatsbyImage)` + margin: 20px 0; + + width: 50%; + + @media (max-width: 480px) { + width: 100%; + } +` diff --git a/src/types/content.ts b/src/types/content.ts index c44e8e3..8256c06 100644 --- a/src/types/content.ts +++ b/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