reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview165Core59Shells75Blocks31
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Shells/SqlEditor

SqlEditor

Shell

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

editor
Related docs
npx @reopt-ai/opt-cli surface add sql-editor
100%
Ctrl+Enter to run

컴포넌트 의존 관계

깊이
▲ USED BY (1)▼ USES (1)sql-workspaceSqlEditorbutton

테스트 커버리지

2026년 7월 9일1/1 통과
1성공
0실패
1전체
  • CodeMirror를 동적 초기화하고 실행 버튼으로 현재 SQL을 전달한다

Related components

EditorToolbar

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

Editor

CodeSnippetViewer

코드 스니펫 뷰어. 줄 번호, 복사 버튼, 포커스 가능한 스크롤 영역, syntaxTheme 톤을 지원합니다.

Editor

RichTextEditor

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

Editor

CodeDiffViewer

코드 비교 뷰어. LCS 알고리즘 기반 unified/split 모드 diff와 포커스 가능한 스크롤 영역을 제공합니다.

Editor

SqlWorkspace

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

Editor

Button

접근성 버튼 컴포넌트. 4가지 변형(primary, secondary, ghost, danger), 3가지 크기, 로딩/아이콘과 aria-busy 상태를 지원합니다.

Input
PreviousAlertBuilderNextEventMetaEditor

기본 사용



활성: 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});
terminal-theme.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});
9
10const longLine = "가로 스크롤과 키보드 포커스를 확인하기 위한 매우 긴 코드 줄입니다.".repeat(4);
1- function greet(name) {
2- console.log("Hello " + name);
1+ function greet(name: string) {
2+ console.log(`Hello ${name}`);
3+ console.log("Done");
34 return true;
45 }
1- function greet(name) {
2- console.log("Hello " + name);
3 return true;
4 }
1+ function greet(name: string) {
2+ console.log(`Hello ${name}`);
3+ console.log("Done");
4 return true;
5 }

기본 사용

SQL Workspace

Ctrl+Enter to run

No results

Variants

Sizes

States

Loading & Disabled

With Icons