테마 프리셋 선택기. 프리셋과 light/dark/system 모드 전환.
선택된 브랜치: 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은 다음과 같은 상황에서 유용합니다: