feat: add MDX support and blog functionality

- Updated next.config.ts to include MDX support with new page extensions.
- Added dependencies for MDX in package.json.
- Refactored Home component to include BlogList.
- Adjusted layout and styling in Projects and Timeline components.
- Implemented dynamic blog post routing with generateStaticParams and BlogPost component.
- Created BlogLayout for consistent blog page structure.
- Added initial blog post in MDX format.
- Developed BlogList component to display a list of blog posts.
- Introduced blog utility functions to read and parse MDX files.

src/app/blog/[slug/]/page.tsx

@@ -0,0 +1,30 @@
+import { notFound } from "next/navigation";
+import { readdirSync } from "fs";
+import { join } from "path";
+
+export async function generateStaticParams() {
+  const blogDir = join(process.cwd(), "src/app/blog/posts");
+  const files = readdirSync(blogDir).filter((file) => file.endsWith(".mdx"));
+
+  return files.map((file) => ({
+    slug: file.replace(".mdx", ""),
+  }));
+}
+
+export default async function BlogPost({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+
+  try {
+    const Post = (
+      await import(`@/app/blog/posts/${slug}.mdx`)
+    ).default;
+
+    return <Post />;
+  } catch {
+    notFound();
+  }
+}

src/app/blog/layout.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Blog",
+  description: "My thoughts and experiences",
+};
+
+export default function BlogLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <article className="min-h-screen max-w-3xl mx-auto px-6 py-12">
+      <div className="prose prose-invert max-w-none">
+        {children}
+      </div>
+    </article>
+  );
+}

src/app/blog/posts/2024-11-20-first-post.mdx

@@ -0,0 +1,8 @@
+---
+title: "삣삐"
+description: "삣삐"
+date: "2025-11-20"
+tags: ["삣삐"]
+---
+
+# 삣삐

src/app/page.tsx

@@ -1,9 +1,10 @@
+import BlogList from "@/components/BlogList";
 import NeoFetch from "@/components/NeoFetch";
 import Projects from "@/components/Projects";
 import TimelineComponent from "@/components/timeline";
 import Top from "@/components/Top";
 
-export default function Home() {
+export default async function BlogIndex() {
   return (
     <main className="min-h-screen">
       <Top />
@@ -17,10 +18,14 @@ export default function Home() {
           <p>최근에는 정보보안 분야 중 <strong>웹 해킹</strong>에 관심이 많습니다.</p>
           <br />
           <p>대표적인 프로젝트들은 아래와 같습니다.</p>
+          <br />
           <Projects />
         </div>
 
         <TimelineComponent />
+        <div className="px-12 mt-8 w-full lg:w-2/3 xl:w-1/2">
+          <BlogList />
+        </div>
       </section>
     </main>
   );

src/components/BlogList.tsx

@@ -0,0 +1,55 @@
+import Link from "next/link";
+import { getPosts, type Post } from "@/lib/blog";
+import { Badge } from "@/components/ui/badge";
+import { ArrowRight } from "lucide-react";
+
+
+export default async function BlogList() {
+    const posts = await getPosts();
+
+    return (
+        <div className="space-y-2">
+            {posts.length === 0 ? (
+                <div className="rounded-lg border bg-background px-4 py-3">
+                    <p className="text-muted-foreground text-center">No posts yet...</p>
+                </div>
+            ) : (
+                posts.map((post) => (
+                    <Link
+                        key={post.slug}
+                        href={`/blog/${post.slug}`}
+                        className="block group"
+                    >
+                        <div className="rounded-lg border bg-background px-4 py-3 hover:bg-muted transition-colors">
+                            <div className="flex justify-between items-start gap-4 mb-2">
+                                <div className="flex-1">
+                                    <h3 className="font-semibold group-hover:text-primary transition-colors">
+                                        {post.title}
+                                    </h3>
+                                    <p className="text-xs text-muted-foreground mt-1">
+                                        {post.date}
+                                    </p>
+                                </div>
+                                <ArrowRight className="h-4 w-4 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
+                            </div>
+                            {post.description && (
+                                <p className="text-sm text-muted-foreground mb-2">
+                                    {post.description}
+                                </p>
+                            )}
+                            {post.tags && post.tags.length > 0 && (
+                                <div className="flex gap-2 flex-wrap">
+                                    {post.tags.map((tag) => (
+                                        <Badge key={tag} variant="secondary" className="text-xs">
+                                            {tag}
+                                        </Badge>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </Link>
+                ))
+            )}
+        </div>
+    );
+}

src/components/Projects.tsx

@@ -22,7 +22,7 @@ const projects = [
 
 export default function Projects() {
   return (
-    <section className="break-keep break-words w-full lg:w-1/2">
+    <section className="break-keep break-words w-full lg:w-2/3 xl:w-1/2">
       <div className="space-y-8">
         {projects.map((project, idx) => (
           <div className="space-y-2" key={idx}>

src/components/timeline.tsx

@@ -25,7 +25,7 @@ export default function TimelineComponent() {
   return (
     <div
       id="timeline"
-      className="w-full lg:w-1/2 flex flex-col items-center justify-center px-12 mt-8"
+      className="w-full lg:w-2/3 xl:w-1/2 flex flex-col items-center justify-center px-12 mt-8"
     >
       <div className="w-full">
         <h1 className="text-2xl font-bold mb-4 w-full">🌠 수상 및 교육</h1>

src/lib/blog.ts

@@ -0,0 +1,42 @@
+"use server";
+
+import { readdirSync, readFileSync } from "fs";
+import { join } from "path";
+import matter from "gray-matter";
+
+export interface Post {
+  slug: string;
+  title: string;
+  description: string;
+  date: string;
+  tags?: string[];
+}
+
+export async function getPosts(): Promise<Post[]> {
+  const postsDir = join(process.cwd(), "src/app/blog/posts");
+  const files = readdirSync(postsDir).filter((file) => file.endsWith(".mdx"));
+
+  const posts = files
+    .map((file) => {
+      const filePath = join(postsDir, file);
+      const fileContent = readFileSync(filePath, "utf-8");
+      const { data } = matter(fileContent);
+      const slug = file.replace(".mdx", "");
+
+      return {
+        slug,
+        title: data.title || "Untitled",
+        description: data.description || "",
+        date: data.date || "",
+        tags: data.tags || [],
+      };
+    })
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+
+  return posts;
+}
+
+export async function getPostBySlug(slug: string): Promise<Post | null> {
+  const posts = await getPosts();
+  return posts.find((post) => post.slug === slug) || null;
+}