fix : 이전포스트, 다음포스트 수정

Author: pjj186

content/blog/to-do/index.md

@@ -10,7 +10,9 @@ tags: ["블로그", "기능"]
 
 이제 기본적인 블로그의 틀은 완성된거같구요.
 
-이제 다음으로 우선적으로 구현할 기능은 아마 목차와 댓글 기능 정도가 되겠군여.
+버그들이 좀 있는것같으니 버그들부터 빨리 수정하고,,
+
+다음으로 우선적으로 구현할 기능은 아마 목차와 댓글 기능 정도가 되겠군여.
 
 Cursor에 의지해서 너무 쉽게 여러가지 기능들을 구현하긴했는데, Gatsby에 대한 이해도를 높힐 겸 직접 이해하면서 구현해봐야겠어요.
 

gatsby-node.ts

@@ -55,6 +55,9 @@ exports.createPages = async ({
   // 1. 개별 블로그 포스트 페이지 생성
   if (posts.length > 0) {
     posts.forEach((post: any, index: number) => {
+      // posts는 최신순 정렬 (DESC)
+      // previous: 시간상 이전 포스트 (더 오래된 포스트) = index + 1
+      // next: 시간상 다음 포스트 (더 최신 포스트) = index - 1
       const previousPostId =
         index === posts.length - 1 ? null : posts[index + 1].id
       const nextPostId = index === 0 ? null : posts[index - 1].id

src/templates/blog-post.tsx

@@ -118,12 +118,8 @@ const BlogPostTemplate: React.FC<BlogPostTemplateProps> = ({
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* 이전 포스트 */}
             <div className="md:justify-self-start">
-              {previous && (
-                <Link
-                  to={previous.fields.slug}
-                  rel="prev"
-                  className="group block"
-                >
+              {next && (
+                <Link to={next.fields.slug} rel="prev" className="group block">
                   <div className="bg-card hover:bg-card/80 border rounded-lg p-6 transition-colors duration-200">
                     <div className="flex items-start space-x-3">
                       <div className="flex-shrink-0 p-2 bg-muted rounded-full group-hover:bg-muted/80 transition-colors">
@@ -134,7 +130,7 @@ const BlogPostTemplate: React.FC<BlogPostTemplateProps> = ({
                           이전 포스트
                         </p>
                         <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors line-clamp-2">
-                          {previous.frontmatter.title}
+                          {next.frontmatter.title}
                         </h3>
                       </div>
                     </div>
@@ -145,16 +141,20 @@ const BlogPostTemplate: React.FC<BlogPostTemplateProps> = ({
 
             {/* 다음 포스트 */}
             <div className="md:justify-self-end">
-              {next && (
-                <Link to={next.fields.slug} rel="next" className="group block">
+              {previous && (
+                <Link
+                  to={previous.fields.slug}
+                  rel="next"
+                  className="group block"
+                >
                   <div className="bg-card hover:bg-card/80 border rounded-lg p-6 transition-colors duration-200">
                     <div className="flex items-start space-x-3">
                       <div className="flex-1 min-w-0 text-right">
                         <p className="text-sm text-muted-foreground mb-1">
                           다음 포스트
                         </p>
                         <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors line-clamp-2">
-                          {next.frontmatter.title}
+                          {previous.frontmatter.title}
                         </h3>
                       </div>
                       <div className="flex-shrink-0 p-2 bg-muted rounded-full group-hover:bg-muted/80 transition-colors">