reopt designreopt design
DocsExploreToolsPricingBuilder
로그인
Explore/
opt-ui201opt-charts37opt-datagrid7opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview201Core74Shells95Blocks32
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 소개
  • 문의
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/셸/QueryFiltersMenu

QueryFiltersMenu

셸

기간과 속성 조건을 데이터로 들고 {filters} 플레이스홀더로 SQL에 전달하는 메뉴. 플레이스홀더가 없으면 조건이 적용되지 않는다고 경고하고 삽입 버튼을 제공합니다.

nav
관련 문서
npx @reopt-ai/opt-cli surface add query-filters-menu
100%

Conditions the reader would rather not type

The query has no {filters} yet — set a filter to see the warning.
{
  "dateRange": null,
  "properties": []
}

컴포넌트 의존 관계

깊이
▼ USES (5)QueryFiltersMenupopoverdate-range-pickerselectcomboboxcallout

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

QueryFiltersMenu 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

관련 컴포넌트

ContentTabs

탭 콘텐츠 패널. Tabs primitive 래퍼.

네비게이션표시

SidebarNav

Composite 기반 사이드바 네비게이션. pathname 자동 동기화.

네비게이션

AppMenubar

데스크톱 스타일 메뉴바. 체크박스, 라디오 메뉴 항목 지원.

네비게이션

CommandPalette

Cmd+K 스타일 커맨드 팔레트. Dialog + Combobox + match-sorter 퍼지 검색.

네비게이션

CommandPaletteTrigger

CommandPalette + Cmd+K 키보드 단축키 자동 바인딩.

네비게이션

ProjectSwitcher

프로젝트 검색 전환기. Combobox + match-sorter 퍼지 검색 지원.

네비게이션
이전QueryResultChart다음QueryVariablesMenu

기본 사용

프로젝트 개요 콘텐츠입니다.

기본 선택 탭 설정

설정 탭이 기본 선택됩니다.

기본 사용

홈
대시보드
프로젝트
관리
설정
사용자
결제

기본 사용

기본 사용 (Dialog)

또는 Cmd+K (전역 트리거가 활성화된 경우)

Inline 모드

사용법

이 컴포넌트는 전역 키보드 단축키(Cmd+K / Ctrl+K)를 자동으로 등록합니다. 앱 루트 레이아웃에 한 번만 배치하면 됩니다. 현재 페이지에서 Cmd+K를 눌러 직접 확인할 수 있습니다.

tsx
import { CommandPaletteTrigger } from "@reopt-ai/opt-ui";

const commands = [
  { id: "nav-home", label: "홈으로 이동", group: "네비게이션", shortcut: "G H" },
  { id: "nav-dashboard", label: "대시보드 열기", group: "네비게이션" },
  { id: "theme-dark", label: "다크 모드", group: "테마" },
];

// 앱 루트에 배치 — Cmd+K로 자동 열림
<CommandPaletteTrigger
  commands={commands}
  onSelect={(cmd) => console.log("선택:", cmd.label)}
/>

기본 사용

선택된 프로젝트: my-app