검색과 필터를 한 입력으로 합친 쿼리 바. field:value, -부정, (a or b), 비교 연산, 필드·값 자동완성, 절(clause) 칩을 지원합니다.
Type a field name for completions, then a value. Enter commits; Escape reverts. Half-written input parses as a plain term rather than an error.
{
"clauses": [
{
"type": "field",
"field": "path",
"operator": "eq",
"values": [
"/checkout"
],
"negated": false
},
{
"type": "field",
"field": "status",
"operator": "eq",
"values": [
"200"
],
"negated": true
}
]
}Every clause is removable, and the text stays the source of truth: service:(api or worker) utm_source:* duration>250
path:/a -health status>=500 utm_source:* path:*checkout*
생성된 테스트 결과를 찾지 못했습니다.
QueryBar 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.
테스트를 추가한 뒤 `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은 다음과 같은 상황에서 유용합니다: