Next.js MDX 컴포넌트 구성 테스트
이 문서는 프로젝트에 새로 추가한 MDX 헬퍼 컴포넌트들을 통합 테스트하기 위한 샘플 글입니다. 아래 섹션들은 실제 기술 블로그 스타일로 구성되어 있습니다.
목적
이 글은
Callout, Details, BeforeAfter, FileTree, Tabs 컴포넌트와 기존 Figure, CodeBlock의 통합 렌더링을 확인하기 위해 작성되었습니다.빠른 안내
다음은 간단한 예시입니다.
왜 이 테스트가 필요한가?
이 테스트는 MDX 콘텐츠 내에서 직접 JSX 형태로 불러 쓸 수 있는지, 그리고 스타일/타입 충돌 없이 작동하는지를 검증합니다.
Before / After 예시
아래 이미지는 Before/After 비교를 위한 예시입니다.
Old design
New design
파일 트리 예시
[object Object]
탭 예시
code snippet
BASH
npm install
npm run build
Figure 및 CodeBlock 예시
code snippet
TS
// 기존 CodeBlock이 정상적으로 동작하는지 확인합니다.
export function sum(a: number, b: number) {
return a + b
}
마무리
이 테스트 문서를 통해 렌더링을 확인한 뒤 실제 블로그에서 필요한 부분만 재사용하세요.