feat(docs): 컴포넌트 라이브 Playground 추가 (Button 파일럿)

[Yeom-JinHo]

Changes

• 컴포넌트 문서용 Playground 추가 (Button 파일럿): 빌드타임 props 추출(react-docgen-typescript) + react-live 라이브 편집. Preview/Code 동시 노출, Controls→Code 단방향.

Visuals

못생긴건 좀 이해해주십셔 ㅎ_ㅎ

Checklist

• Have you written the functional specifications?
• Have you written the test code?

Additional Discussion Points

 [자동 · 빌드]   Button.tsx ──props 추출──▶ props JSON
                  @sipe-team/side ──빌드──▶ dist (JS + CSS)
                       │
  [자동 · 연결]   docusaurus: alias + customCss   (side dist 소비)
                       │
  [수동 · 작성]   button.mdx <Playground/>  +  registry.ts 등록
                       │
  [자동 · 런타임] react-live ▶ Controls ─단방향▶ Preview(다크 스테이지) + Code(Copy)

단계	작업	자동/수동	비고
빌드타임	tsx 소스에서 props 추출	🤖 자동	react-docgen-typescript → JSON
빌드타임	@sipe-team/side dist 빌드	🤖 자동	self-contained (전 컴포넌트 + 토큰 컴파일)
빌드타임	extract:props 호출	🖐️ 수동	현재 --component button 하드코딩
연결	alias + customCss	🤖 자동	umbrella 패키지 하나로 집약
작성	MDX 페이지	🖐️ 수동	<Playground /> 한 줄
작성	registry 등록	🖐️ 수동	1 항목 (component / props / scope)
런타임	라이브 렌더 · Controls · 코드 생성	🤖 자동	react-live, Controls → Code 단방향

[changeset-bot]

🦋 Changeset detected

Latest commit: 55dccbf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 17 packages

Name	Type
@sipe-team/side	Patch
@sipe-team/tokens	Patch
@sipe-team/accordion	Patch
@sipe-team/avatar	Patch
@sipe-team/badge	Patch
@sipe-team/button	Patch
@sipe-team/card	Patch
@sipe-team/checkbox	Patch
@sipe-team/chip	Patch
@sipe-team/divider	Patch
@sipe-team/input	Patch
@sipe-team/radio	Patch
@sipe-team/skeleton	Patch
@sipe-team/switch	Patch
@sipe-team/theme	Patch
@sipe-team/typography	Patch
docs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 3cd30b62-1c89-4c05-93a5-fe9d0c37ac51

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/docs-playground-jinho

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Yeom-JinHo]

머지하지 않을 예정이지만 공유차 PR 올립니다.

Playground 자동화 관련

지금은 자동화하지 않는 방향이 맞는거 같습니다.

1. 자동화해도 핵심(예시 선택·문서 설명)은 여전히 수동이라 효용이 절반뿐입니다.
2. 별도 생성 스크립트는 추후 기여자에게 유지보수 부담이 됩니다.
3. 현재 컴포넌트 수가 많지 않아 수동으로 충분합니다.
4. Token쪽 Theme 구도를 바꿀 수 밖에 없습니다.