reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
Overview161Core55Blocks75Pages31
reopt designreopt design

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

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

© 2026 reopt-ai. All rights reserved.

Explore/페이지/SqlWorkspace

SqlWorkspace

페이지

SQL 에디터 + 쿼리 결과 테이블. SqlEditor와 QueryResultsTable 조합.

editor
관련 문서
npx @reopt-ai/opt-cli surface add sql-workspace
100%

기본 사용

SQL Workspace

Ctrl+Enter to run

No results

의존 컴포넌트

shellssql-editorshellsquery-results-tablecoreloading-overlay

관련 컴포넌트

SqlEditor

SQL 에디터. CodeMirror 기반의 SQL 편집기로 구문 강조와 자동 완성을 지원합니다.

에디터

LoadingOverlay

로딩 오버레이. Spinner + 반투명 배경으로 콘텐츠 위에 로딩 상태를 표시합니다.

피드백인디케이터

EditorToolbar

리치 텍스트 에디터 스타일 툴바. Toolbar + Tooltip 조합.

에디터

CodeSnippetViewer

코드 스니펫 뷰어. 줄 번호, 복사 버튼을 지원하는 코드 표시 컴포넌트.

에디터

QueryResultsTable

쿼리 결과 테이블. SQL 쿼리 결과를 표시하며 로딩, 에러, 빈 상태를 지원합니다.

데이터

RichTextEditor

마크다운 리치 텍스트 에디터. 서식 툴바 + textarea 조합.

에디터
이전ChatAssistant다음AlertManager
Ctrl+Enter to run

기본 사용

콘텐츠 영역

이 영역 위에 로딩 오버레이가 표시됩니다.

기본 사용



활성: bold

analytics.ts
1import { track } from "@reopt-ai/analytics";
2
3// Track a page view event
4track("page_view", {
5 path: window.location.pathname,
6 referrer: document.referrer,
7 title: document.title,
8});
#user_ideventtimestampproperties
1usr_001page_view2026-02-05 10:23:01{"path":"/home"}
2usr_002click2026-02-05 10:23:05{"button":"signup"}
3usr_001purchase2026-02-05 10:24:12{"amount":49}
4usr_003page_view2026-02-05 10:25:00{"path":"/pricing"}
4 row(s)