이 블로그는 어떻게 만들어졌을까 — MDX 블로그 제작기

# 제목
 
**굵은 텍스트**, _기울임_, [링크](https://example.com)
 
- 리스트 항목 1
- 리스트 항목 2
 
` ``js
console.log("코드 블록"); ` ``

# 제목
 
일반 Markdown은 그대로 작동합니다.
 
<Counter />
 
<Callout type="tip" title="이런 것도 됩니다">
  컴포넌트 안에 **Markdown**을 넣을 수도 있습니다.
</Callout>

import fs from "fs";
import path from "path";
import matter from "gray-matter";
 
const POSTS_DIR = path.join(process.cwd(), "content/posts");
 
export function getAllPosts(): PostMeta[] {
  return fs
    .readdirSync(POSTS_DIR) // 폴더 안 파일 목록
    .filter((f) => f.endsWith(".mdx")) // .mdx 파일만
    .map((file) => {
      const slug = file.replace(/\.mdx$/, "");
      const raw = fs.readFileSync(path.join(POSTS_DIR, file), "utf-8");
      const { data } = matter(raw); // frontmatter 파싱
      return { slug, ...data } satisfies PostMeta;
    })
    .filter((p) => !p.draft) // draft: true 글 제외
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); // 날짜 내림차순 정렬
}

import { MDXRemote } from "next-mdx-remote/rsc";
import rehypePrettyCode from "rehype-pretty-code";
import rehypeSlug from "rehype-slug";
import remarkGfm from "remark-gfm";
 
export function MdxContent({ source }: { source: string }) {
  return (
    <MDXRemote
      source={source}
      options={{
        mdxOptions: {
          remarkPlugins: [remarkGfm],
          rehypePlugins: [
            rehypeSlug,
            [
              rehypePrettyCode,
              {
                theme: { dark: "github-dark", light: "github-light-default" },
                keepBackground: false,
              },
            ],
          ],
        },
      }}
      components={mdxComponents}
    />
  );
}

/* 라이트 모드에서는 --shiki-light 변수 사용 */
[data-rehype-pretty-code-figure] code {
  color: var(--shiki-light);
}
 
/* 다크 모드에서는 --shiki-dark 변수 사용 */
.dark [data-rehype-pretty-code-figure] code {
  color: var(--shiki-dark);
}

<Callout type="tip" title="팁 제목">
  **Markdown**도 안에서 그대로 동작합니다. - 리스트도 됩니다 - `인라인 코드`도
  됩니다
</Callout>

<Counter />

// Callout.tsx (서버 컴포넌트 — "use client" 없음)
export function Callout({ type, title, children }) {
  return (
    <div className={...}>
      {title && <div>{title}</div>}
      {children}
    </div>
  );
}
 
// Counter.tsx (클라이언트 컴포넌트 — 상태가 필요함)
"use client";
export function Counter() {
  const [count, setCount] = useState(0);
  return ( ... );
}

import { Callout } from "./Callout";
import { Counter } from "./Counter";
 
export const mdxComponents = {
  // 기존 HTML 태그 오버라이드 (h1, p, a, code, ...)
  h1: ({ children, id }) => (
    <h1 id={id} className="...">
      {" "}
      {children}{" "}
    </h1>
  ),
 
  // 커스텀 컴포넌트 추가
  Callout,
  Counter,
};

<Callout type="warning" title="주의">
  이 방법은 개발 환경에서만 동작합니다.
</Callout>

export function extractHeadings(content: string) {
  const headings = [];
  for (const line of content.split("\n")) {
    const match = line.match(/^(#{2,3})\s+(.+)$/);
    if (!match) continue;
 
    const text = match[2]
      .replace(/\*\*(.+?)\*\*/g, "$1") // **굵게** 제거
      .replace(/`(.+?)`/g, "$1"); // `코드` 제거
 
    headings.push({
      level: match[1].length, // 2 = ##, 3 = ###
      text,
      id: text
        .toLowerCase()
        .replace(/\s+/g, "-")
        .replace(/[^\p{L}\p{N}-]/gu, ""),
    });
  }
  return headings;
}

const observer = new IntersectionObserver(
  (entries) => {
    for (const entry of entries) {
      if (entry.isIntersecting) {
        setActiveId(entry.target.id);
        break;
      }
    }
  },
  { rootMargin: "-80px 0px -60% 0px", threshold: 0 },
);