reopt design
DocsExploreTemplatesCanvasToolsPricing
로그인
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
QueryWorkspace
reopt designreopt design

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

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

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

© 2026 reopt Inc. All rights reserved.

QueryWorkspace

셸

스키마·편집기·출력의 3-pane 쿼리 워크스페이스. 패널은 리사이즈되고 사이드바는 접히며, storageKey로 레이아웃을 기억합니다. 툴바·편집기·출력은 슬롯입니다.

관련 문서
bun add @reopt-ai/opt-ui
설치 및 가져오기
bash
bun add @reopt-ai/opt-ui
tsx
import { QueryWorkspace } from "@reopt-ai/opt-ui";

라이브 미리보기

화면 너비와 테마를 바꾸고 컴포넌트를 직접 조작해 보세요.

100%

편집 → 실행 → 문장별 결과

실제 DB에 연결하지 않는 모의 실행입니다. 아래 두 SELECT만 지원하며 600ms 후 결과를 표시합니다. 커서를 두 번째 문장으로 옮겨 실행하거나 실행 메뉴에서 전체 실행을 선택하세요. 실행 중 취소할 수 있고, 다른 SQL은 오류를 표시합니다.

실행 전

    • nameVARCHAR
Results

Results will appear here

Run the query to see what it returns.

⌘↵

사용 가이드

권장 사용법

  • QueryWorkspace는 레이아웃만 소유합니다. SqlEditor의 문서·커서, QueryToolbar의 실행, QueryOutputPane의 결과 수명주기는 호스트에서 연결하세요.
  • 커서 실행은 sqlStatementAtOffset, 전체 실행은 splitSqlStatements를 사용합니다. 전체 실행에서는 문장별 결과를 보관하고 오류 시 중단·계속 정책을 명시하세요.
  • 실행할 때 편집기 문서를 캡처하고 성공한 스냅샷과 현재 문서를 비교해 runState를 계산하세요. 실행 중 편집하거나 취소해도 이전 응답이 새 실행을 덮지 않아야 합니다.
  • 부모에 높이를 지정하고 SqlEditor height="fill"과 QueryResultsTable maxHeight="fill"을 조합하세요. storageKey는 워크스페이스마다 구분합니다.
  • 아래 통합 예제는 두 SELECT만 지원하는 600ms 모의 실행기입니다. 실제 제품에서는 인증된 실행 API·취소 신호·결과 제한·이력 저장을 호스트에 연결하세요.

주의할 사용법

  • 레이아웃 컴포넌트에 실행 엔진이 포함되어 있다고 가정하지 마세요. UI 숨김은 서버의 접근 권한 검사를 대체하지 않습니다.

사용 예제

SQL 워크스페이스 통합

QueryWorkspace

Prop타입기본값설명
sidebarReactNode—왼쪽 패널 내용
sidebarOpenboolean—제어형 사이드바 열림
onSidebarOpenChange(open: boolean) => void—사이드바 열림 변경
headerReactNode—툴바 위 — 탭이나 페이지 헤더
toolbarReactNode—툴바
editor필수ReactNode—편집기
output필수ReactNode—출력
storageKeystring—패널 크기를 localStorage에 기억할 키
defaultSidebarSizenumber22사이드바 폭(%)
defaultEditorSizenumber40편집기 높이(%)
labelsQueryWorkspaceLabels—문구 오버라이드

컴포넌트 의존 관계

깊이
▼ USES (2)QueryWorkspaceresizablebutton
테스트 결과 자세히 보기

테스트 커버리지

2026년 7월 9일

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

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

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

관련 컴포넌트

opt-ui

FaqAccordion

Shells

FAQ 질문/답변 아코디언. Composite + Disclosure 조합.

opt-ui

PageAside

Shells

Sticky 페이지 사이드 aside chrome. 고정 너비 + header/body/footer 3-slot.

opt-ui

EnvPanel

Shells

환경변수 패널. Disclosure로 환경별 그룹 접기/펼치기, Composite로 변수 탐색.

opt-ui

BranchSelect

Shells

Git 브랜치 선택 드롭다운. Select primitive 래퍼.

opt-ui

DesignGuidePanel

Shells

디자인 시스템 참조 패널. 프리미티브 맵, 키보드 패턴, Tailwind 셀렉터, 접근성 속성 등 6개 섹션 제공.

opt-ui

QuickActions

Shells

빠른 작업 패널. 그리드/리스트 레이아웃, 단축키 표시 지원.

이전SaveQueryDialog다음ReplayScrubber