쿼리 결과가 놓이는 출력 패널. 대기·실행 중·오류·취소·완료 상태를 그리고, 완료는 표·차트·좌우 분할로 전환하며, 상태바에 행 수·경과·읽은 바이트·절단 여부를 남깁니다.
| # | |||
|---|---|---|---|
| 2026-08-01 | 1200 | 390 | |
| 2026-08-02 | 1422 | 393 | |
| 2026-08-03 | 1597 | 387 | |
| 2026-08-04 | 1689 | 373 | |
| 2026-08-05 | 1684 | 353 | |
| 2026-08-06 | 1589 | 331 | |
| 2026-08-07 | 1436 | 311 | |
| 2026-08-08 | 1270 | 294 | |
| 2026-08-09 | 1137 | 284 | |
| 2026-08-10 | 1079 | 283 | |
| 2026-08-11 | 1116 | 292 | |
| 2026-08-12 | 1248 | 310 | |
| 2026-08-13 | 1448 | 337 | |
| 2026-08-14 | 1676 | 371 |
생성된 테스트 결과를 찾지 못했습니다.
QueryOutputPane 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.
테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.
선택된 브랜치: main
디자인 시스템의 아키텍처를 한눈에 정리한 참조 패널입니다. UI 디버거와 별도로 @reopt-ai/opt-ui에서 export되며, 필요한 페이지에 직접 렌더링하여 사용합니다.
import { DesignGuidePanel } from "@reopt-ai/opt-ui";
// 아무 페이지에서 렌더링
<DesignGuidePanel />패널에 포함된 6개 섹션:
예제별 사용 primitive와 WAI-ARIA 역할 표
글로벌 단축키, Composite/Roving Tabindex, 예제별 키보드 조작
data-[active-item], data-[focus-visible], data-[enter]/[leave], data-[open] 등 사용법
WAI-ARIA 역할, aria-label, aria-invalid, aria-expanded, aria-live
RouteFocusManager, Sidebar activeId 동기화, focusLoop/focusWrap, Dialog 포커스 트랩
폴더 트리, 핵심 의존성 목록
DesignGuidePanel은 다음과 같은 상황에서 유용합니다: