MDX DOM 트리 파싱하기

content/*.mdx → [gray-matter로 파싱] → [fs로 스캔] → content-tree.json → [페이지에서 import] → FileExplorer

---
title: React 시작하기
date: "2025-03-05"
tags: [react, frontend]
description: React의 기본...
---

const raw = fs.readFileSync(fullPath, "utf-8"); // MDX 파일 전체 읽기
const { data } = matter(raw); // frontmatter → JS 객체
// data = { title: "React 시작하기", date: "2025-03-05", tags: [...], ... }

targetPath = "/frontend/hooks"
  → segments = ["frontend", "hooks"]
  → tree에서 name === "frontend"인 폴더 찾기 → 그 children으로 이동
  → children에서 name === "hooks"인 폴더 찾기 → 그 children 반환

"generate:content": "tsx scripts/generate-content-tree.ts",
"dev": "pnpm run generate:content && vinext dev",
"build": "pnpm run generate:content && vinext build"

import contentTree from "../../generated/content-tree.json"; // 정적 import

// 쿼리스트링에서 현재 경로 추출
const currentPath =
  new URLSearchParams(window.location.search).get("path") || "/";

// 해당 경로의 아이템 가져오기
const nodes = getItemsForPath(contentTree, currentPath);

// ContentNode[] → ExplorerItem[] 변환 후 FileExplorer에 전달
const items = toExplorerItems(nodes);