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

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

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

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

© 2026 reopt Inc. All rights reserved.

SqlEditor

셸

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

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

라이브 미리보기

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

100%
Ctrl+Enter to run

SqlEditor

Prop타입기본값설명
value필수string—편집 중인 SQL
onChange필수(sql: string) => void—본문 변경 핸들러
onRun(sql: string, context: SqlEditorRunContext) => void—Mod+Enter 실행 핸들러. 두 번째 인자로 선택 영역과 커서 위치
onRunAndAdvance(sql: string, context: SqlEditorRunContext) => void—Shift+Enter — 실행 후 다음 셀/탭으로 이동
schemaSqlEditorSchema—테이블/컬럼 자동완성 스키마. 변경 시 에디터를 다시 만들지 않고 자동완성만 재구성
completionSourcesSqlEditorCompletionSource[]—스키마 자동완성에 더할 완성 소스 (함수 시그니처, 스니펫)
keymapSqlEditorKeyBinding[]—추가 키 바인딩. 내장 실행 바인딩보다 먼저 평가
extensionsSqlEditorExtension[]—임의의 CodeMirror 확장. 내장 확장 뒤에 붙어 우선권을 가짐
heightnumber | "fill"—px 고정 높이. fill이면 부모가 정한 높이를 채움
placeholderstring—빈 편집기 안내 문구
readOnlyboolean—편집 잠금
ariaLabelstring—편집 영역 접근성 레이블
autoFocusboolean—마운트 시 포커스
showFooterboolean—실행 힌트/버튼 표시. 기본값은 onRun이 있을 때 표시
lineNumbersbooleantrue줄 번호 거터
themeSqlEditorTheme"auto"편집기 색상. auto는 OptThemeProvider의 resolved mode를 따름
labelsSqlEditorLabels—문구 오버라이드
classNamestring—기본 스타일 오버라이드

컴포넌트 의존 관계

깊이
▲ USED BY (1)▼ USES (1)sql-workspaceSqlEditorbutton
테스트 결과 자세히 보기

테스트 커버리지

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

이 컴포넌트를 쓰는 블록

opt-ui

SqlWorkspace

Blocks

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

관련 컴포넌트

opt-ui

EditorToolbar

Shells

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

opt-ui

CodeSnippetViewer

Shells

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

opt-ui

RichTextEditor

Shells

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

opt-ui

CodeDiffViewer

Shells

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

opt-ui

Button

Core

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

opt-ui

FaqAccordion

Shells

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

이전AlertBuilder다음EventMetaEditor