feat: 동적 메타데이터 생성 기능 구현

Author: Dobbymin

src/app/post/[id]/page.tsx

@@ -1,3 +1,4 @@
+import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 import { getAllPostSlugs, getPost } from '@/shared/lib';
@@ -13,6 +14,57 @@ export async function generateStaticParams() {
   return slugs.map((slug) => ({ id: slug }));
 }
 
+export async function generateMetadata({
+  params,
+}: PostDetailPageProps): Promise<Metadata> {
+  const { id } = await params;
+  const post = getPost(id);
+
+  if (!post) {
+    return {
+      title: '포스트를 찾을 수 없습니다',
+    };
+  }
+
+  const baseUrl = 'https://dobbymin.github.io';
+  const postUrl = `${baseUrl}/post/${id}`;
+  const thumbnailUrl = post.thumbnail
+    ? `${baseUrl}${post.thumbnail}`
+    : `${baseUrl}/logo.png`;
+
+  return {
+    title: post.title,
+    description: post.description,
+    keywords: [post.category, post.title, '개발 블로그'],
+    authors: [{ name: '김도비', url: 'https://github.com/Dobbymin' }],
+    creator: '김도비',
+    openGraph: {
+      type: 'article',
+      locale: 'ko_KR',
+      url: postUrl,
+      title: post.title,
+      description: post.description,
+      siteName: 'Dobby is Free',
+      publishedTime: post.date,
+      authors: ['김도비'],
+      images: [
+        {
+          url: thumbnailUrl,
+          width: 1200,
+          height: 630,
+          alt: post.title,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: post.title,
+      description: post.description,
+      images: [thumbnailUrl],
+    },
+  };
+}
+
 export default async function PostDetailPage({ params }: PostDetailPageProps) {
   const { id } = await params;
   const post = getPost(id);