블로그 목록 페이지 스타일 변경

Author: constmoon

src/pages/blog.js

@@ -2,21 +2,42 @@ import React from "react"
 import { Link, graphql } from "gatsby"
 import Layout from "@components/layout"
 import SEO from "@components/seo"
+import { groupBy, orderBy } from "es-toolkit/array"
 
-const ProjectPage = ({ data }) => {
+const BlogPage = ({ data }) => {
   const edges = data?.allMarkdownRemark?.edges ?? []
+
+  const groups = groupBy(edges, (post) => {
+    const rawDate = post?.node?.frontmatter?.date
+    const year = rawDate ? new Date(rawDate).getFullYear() : NaN
+    return Number.isFinite(year) ? String(year) : "Unknown"
+  })
+
+  const yearGroups = orderBy(
+    Object.entries(groups),
+    [([year]) => (year === "Unknown" ? -Infinity : Number(year))],
+    ["desc"]
+  )
+
   return (
     <Layout>
       <SEO title="Blog" />
-      <ul>
-        {edges.map((post) => (
-          <li key={post.node.id} className="project-list">
-            <Link to={post.node.frontmatter.path}>
-              <h2>{post.node.frontmatter.title}</h2>
-            </Link>
-          </li>
+      <div className="blog-list">
+        {yearGroups.map(([year, posts]) => (
+          <section key={year} className="year-group">
+            <h2 className="year">{year}</h2>
+            <ul className="year-list">
+              {posts.map(({ node }) => (
+                <li key={node.id} className="year-item">
+                  <Link to={node.frontmatter.path}>
+                    {node.frontmatter.title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </section>
         ))}
-      </ul>
+      </div>
     </Layout>
   )
 }
@@ -30,7 +51,6 @@ export const pageQuery = graphql`
       edges {
         node {
           id
-          excerpt(pruneLength: 250)
           frontmatter {
             path
             title
@@ -43,4 +63,4 @@ export const pageQuery = graphql`
   }
 `
 
-export default ProjectPage
+export default BlogPage

src/styles/blog.scss

@@ -2,6 +2,20 @@
   a:hover {
     text-decoration: underline;
   }
+  .year {
+    font-style: italic;
+    margin-bottom: 12px;
+  }
+
+  .year-list {
+    padding-left: 16px;
+  }
+
+  .year-item {
+    list-style: disc;
+    margin-left: 12px;
+    font-size: 16px;
+  }
 }
 
 .blog-header {