MDX 내 React 기반 라이브 컴포넌트 데모 임베드

[hyoseong1994]

문서 MDX에서 실제 달레 UI 컴포넌트를 라이브로 렌더링하는 인프라입니다. (closes #28)

코드 펜스에 preview를 붙이면 remark 플러그인이 프리뷰 JSX + 원본 코드 펜스로 묶습니다. 펜스를 그대로 남기므로 Expressive Code 하이라이팅이 유지되고, 보이는 코드와 렌더링 결과가 같은 문자열에서 나옵니다.

```tsx preview
<Button type="submit" variant="solid" tone="brand">
  저장
</Button>
```

프리뷰와 코드는 기존 CodeTabs를 재사용한 탭으로 나뉩니다. 코드 탭이 평소의 코드 블록과 같으므로 복사 버튼도 Expressive Code 기본 동작을 그대로 씁니다. 인라인 편집은 브라우저용 JSX 컴파일러 비용이 커서 지원하지 않고, 펜스 안에는 JSX만 쓸 수 있습니다(import·설명이 섞이면 빌드 실패). 작성 규칙은 CONTRIBUTING.md에 적었습니다.

테스팅

• bun run lint · bunx tsc -b · bun run format · bun run coverage(156 통과, 신규 파일 100%) · bun run build 통과
• dev 서버 /docs/button에서 라이트·다크 모드와 두 탭을 확인했고, 프리렌더 HTML에도 실제 Button 마크업이 들어갑니다

체크 리스트

• 코드 리뷰를 요청하기 전에 반드시 CI가 통과하는지 확인해주세요.
• Cloudflare Preview URL에서 수정한 내용이 의도대로 잘 동작하는지 확인해 주세요.

[github-actions]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Ready View logs	daleui	018d68d	Commit Preview URL	Oct 14 2026, 12:01 AM

[SimYunSup]

고생하셨습니다. 다만 몇 가지 수정을 제안드립니다. 다른 디자인 시스템에서는 MDX 내 라이브 데모를 어떻게 구현하는지 살펴봤습니다.

• Chakra UI: MDX에 <ExampleTabs name="button-basic" />를 작성합니다. 별도 TSX 예제를 렌더링하고, 같은 파일을 읽어 코드로 보여줍니다.
• shadcn/ui: <ComponentPreview name="…" />로 등록된 React 예제와 소스를 불러옵니다.
• Mantine: 예제 컴포넌트·코드·컨트롤을 함께 정의합니다. 속성 컨트롤을 바꾸면 프리뷰와 표시 코드가 함께 바뀝니다.
• Radix Themes: 이 PR처럼 코드 펜스를 실행하지만, MDX로 다시 파싱하지 않고 JSX/TypeScript 컴파일러로 변환해서 실행합니다.

이 PR에서는 예제를 별도 TSX 파일로 작성하고, MDX에서 참조하는 방식을 제안드립니다.

• 현재 parsePreview()는 JSX를 MDX로 파싱해서 원본과 다른 결과를 만들 수 있습니다. 예를 들어 <Text>**bold**</Text>의 별표가 강조 표시로 해석되고, 여러 줄 JSX 내부에 <p>가 추가됩니다. 배포된 Button 예제에서도 저장이 <p>로 감싸지는 것을 확인했습니다.
• button-basic.tsx에 실제 예제를 작성하고, 프리뷰에서는 해당 컴포넌트를 import해서 렌더링하면 이 문제를 피할 수 있습니다. useState나 이벤트 핸들러가 필요한 예제도 같은 방식으로 작성할 수 있습니다.
• 코드 탭에는 동일한 TSX 파일의 원문을 읽어 보여주면 됩니다. 표시할 코드를 별도로 작성할 필요가 없고, 기존 Expressive Code 하이라이팅·복사 기능도 유지할 수 있습니다.
• MDX에는 예제를 참조하는 태그만 두고, 기존 프리뷰/코드 탭 UI는 그대로 활용하면 좋겠습니다. 브라우저에서 JSX를 컴파일하거나 코드를 직접 편집하는 기능은 추가하지 않아도 됩니다.

이렇게 하면 작성 시 예제 파일 하나가 추가되지만, 일반 React 코드와 동일하게 실행되면서 코드 표시도 같은 파일을 기준으로 유지할 수 있을 것 같습니다.