스키마·편집기·출력의 3-pane 쿼리 워크스페이스. 패널은 리사이즈되고 사이드바는 접히며, storageKey로 레이아웃을 기억합니다. 툴바·편집기·출력은 슬롯입니다.
Run the query to see what it returns.
생성된 테스트 결과를 찾지 못했습니다.
QueryWorkspace 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.
테스트를 추가한 뒤 `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은 다음과 같은 상황에서 유용합니다: