feat: 블로그 포스트 자동화 시스템 구현

- 사이드바 자동 생성 플러그인 추가
- 포스트 데이터 자동 생성 스크립트 구현
- HMR(Hot Module Replacement) 지원
- Frontmatter 기반 메타데이터 처리
- SRP(Single Responsibility Principle) 준수한 모듈 분리

Author: toothlessdev

.vitepress/plugins/posts.ts

@@ -0,0 +1,69 @@
+import { exec } from "child_process";
+import { promisify } from "util";
+import { triggerFullReload } from "./utils";
+
+const execAsync = promisify(exec);
+
+/**
+ * 포스트 생성 스크립트를 실행합니다
+ */
+async function executePostGeneration() {
+    await execAsync("node scripts/generate-posts.mjs");
+}
+
+/**
+ * 파일이 pages 디렉토리의 마크다운 파일인지 확인합니다
+ */
+function isPagesMarkdownFile(filePath: string): boolean {
+    return filePath.includes("/pages/") && filePath.endsWith(".md");
+}
+
+/**
+ * 빌드 시작 시 포스트를 생성하는 핸들러
+ */
+async function handleBuildStart() {
+    try {
+        console.log("🔄 포스트 목록을 업데이트하는 중...");
+        await executePostGeneration();
+        console.log("✅ 포스트 목록 업데이트 완료!");
+    } catch (error) {
+        console.warn(
+            "포스트 목록 생성 실패:",
+            error instanceof Error ? error.message : String(error),
+        );
+    }
+}
+
+/**
+ * 핫 업데이트 시 포스트를 재생성하는 핸들러
+ */
+async function handleHotUpdate(ctx: any) {
+    if (isPagesMarkdownFile(ctx.file)) {
+        try {
+            console.log("📝 포스트 변경 감지, 목록 업데이트 중...");
+            await executePostGeneration();
+            console.log("✅ 포스트 목록 업데이트 완료!");
+            console.log("📋 사이드바 업데이트를 위해 개발 서버를 재시작해주세요!");
+            console.log("   또는 Ctrl+C 후 yarn docs:dev 를 다시 실행하세요.");
+
+            triggerFullReload(ctx.server);
+        } catch (error) {
+            console.warn(
+                "포스트 목록 생성 실패:",
+                error instanceof Error ? error.message : String(error),
+            );
+        }
+    }
+    return [];
+}
+
+/**
+ * 자동 포스트 생성 Vite 플러그인을 생성합니다
+ */
+export function createAutoGeneratePostsPlugin() {
+    return {
+        name: "auto-generate-posts-and-sidebar",
+        buildStart: handleBuildStart,
+        handleHotUpdate: handleHotUpdate,
+    };
+}

.vitepress/plugins/sidebar.ts

@@ -0,0 +1,140 @@
+import { readdirSync, statSync, readFileSync, Dirent } from "fs";
+import { join, extname, basename } from "path";
+import type { DefaultTheme } from "vitepress";
+import matter from "gray-matter";
+
+interface SidebarItem {
+    text: string;
+    link?: string;
+    items?: SidebarItem[];
+    collapsed?: boolean;
+}
+
+/**
+ * pages/posts 폴더 구조를 기반으로 자동으로 사이드바를 생성하는 함수
+ */
+export function generateSidebar(): DefaultTheme.SidebarItem[] {
+    const postsDir = join(process.cwd(), "pages", "posts");
+
+    try {
+        // posts 폴더가 존재하지 않으면 빈 사이드바 반환
+        if (!statSync(postsDir).isDirectory()) {
+            return [];
+        }
+    } catch (error) {
+        // posts 폴더가 없으면 빈 사이드바 반환
+        return [];
+    }
+
+    const sidebarItems = generateSidebarItems(postsDir, "/pages/posts");
+    return sidebarItems;
+}
+
+function generateSidebarItems(dir: string, basePath: string): SidebarItem[] {
+    const items: SidebarItem[] = [];
+
+    try {
+        const entries = readdirSync(dir, { withFileTypes: true });
+
+        // 파일과 폴더를 분리하여 정렬
+        const files = entries.filter(
+            (entry: Dirent) => entry.isFile() && entry.name.endsWith(".md"),
+        );
+        const folders = entries.filter((entry: Dirent) => entry.isDirectory());
+
+        // 폴더 처리 (카테고리로 취급)
+        for (const folder of folders.sort((a: Dirent, b: Dirent) => a.name.localeCompare(b.name))) {
+            const folderPath = join(dir, folder.name);
+            const folderBasePath = `${basePath}/${folder.name}`;
+
+            const folderItems = generateSidebarItems(folderPath, folderBasePath);
+
+            if (folderItems.length > 0) {
+                items.push({
+                    text: formatTitle(folder.name),
+                    items: folderItems,
+                    collapsed: true, // 기본적으로 접혀있도록 설정
+                });
+            }
+        }
+
+        // 파일 처리
+        for (const file of files.sort((a: Dirent, b: Dirent) => a.name.localeCompare(b.name))) {
+            const fileName = basename(file.name, extname(file.name));
+
+            // index.md 파일은 해당 폴더의 대표 페이지로 처리
+            if (fileName === "index") {
+                continue;
+            }
+
+            const filePath = join(dir, file.name);
+            const frontmatterTitle = getFrontmatterTitle(filePath);
+
+            items.push({
+                // frontmatter title 우선, 없으면 파일명 사용
+                text: frontmatterTitle || formatTitle(fileName),
+                link: `${basePath}/${fileName}`,
+            });
+        }
+
+        // index.md 파일이 있으면 첫 번째 항목으로 추가
+        const indexFile = files.find(
+            (file: Dirent) => basename(file.name, extname(file.name)) === "index",
+        );
+
+        if (indexFile) {
+            items.unshift({
+                text: "개요",
+                link: basePath === "/pages" ? "/pages/" : basePath,
+            });
+        }
+    } catch (error) {
+        console.warn(`사이드바 생성 중 오류 발생: ${dir}`, error);
+    }
+
+    return items;
+}
+
+/**
+ * 마크다운 파일에서 frontmatter의 title을 추출합니다
+ * @param filePath - 마크다운 파일 경로
+ * @returns frontmatter의 title 또는 null
+ */
+function getFrontmatterTitle(filePath: string): string | null {
+    try {
+        const content = readFileSync(filePath, "utf-8");
+        const { data } = matter(content);
+        return data.title || null;
+    } catch (error) {
+        console.warn(`Frontmatter 읽기 실패 (${filePath}):`, error);
+        return null;
+    }
+}
+
+/**
+ * 파일명/폴더명을 사용자 친화적인 제목으로 변환
+ */
+function formatTitle(name: string): string {
+    return name
+        .replace(/[-_]/g, " ") // 하이픈과 언더스코어를 공백으로 변환
+        .replace(/\b\w/g, (l) => l.toUpperCase()) // 각 단어의 첫 글자를 대문자로
+        .trim();
+}
+
+/**
+ * 특정 경로에 대한 사이드바만 생성 (다중 사이드바 사용 시)
+ */
+export function generateSidebarForPath(path: string): DefaultTheme.SidebarItem[] {
+    const pagesDir = join(process.cwd(), "pages");
+    const targetDir = join(pagesDir, path);
+
+    try {
+        if (!statSync(targetDir).isDirectory()) {
+            return [];
+        }
+    } catch (error) {
+        return [];
+    }
+
+    return generateSidebarItems(targetDir, `/pages/${path}`);
+}

.vitepress/plugins/utils.ts

@@ -0,0 +1,6 @@
+/**
+ * 서버에 전체 리로드 신호를 보냅니다
+ */
+export function triggerFullReload(server: any) {
+    server.ws.send({ type: "full-reload" });
+}