사용법
개발할 때 필요한 상태 값을 접을 수 있는 패널로 표시해요.
디버그 대상 영역
인터페이스
DebugPanelProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| enabled | boolean | — | 패널 표시 여부 |
| title | string | Debug | 패널 제목 |
| position | "top-left" | "top-right" | "bottom-left" | "bottom-right" | bottom-right | 고정 위치 |
| defaultOpen | boolean | true | 초기 펼침 상태 |
| items | readonly DebugPanelItem[] | [] | 표시할 디버그 값 |
| children | ReactNode | — | 추가 패널 콘텐츠 |
| className | string | — | 루트 클래스 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수 |
DebugPanel 컴포넌트 Props 표
가져오기
모션 CSS는 @goldtreedev/ui/motion.css를 함께 import해요.
@import "@goldtreedev/ui/motion.css";
import { DebugPanel } from "@goldtreedev/ui";