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/블록/EventMetaEditor

EventMetaEditor

블록

이벤트 메타 에디터. IconPicker + ColorPicker + TagInput을 조합한 이벤트 메타데이터 편집기.

form
관련 문서
npx @reopt-ai/opt-cli surface add event-meta-editor
100%

의존 컴포넌트

coreinputcoreicon-pickercorecolor-pickercoretag-input

관련 컴포넌트

SettingsForm

데이터 기반 설정 폼. 유효성 검증, 라디오, 체크박스 지원.

폼

AuthForm

로그인/회원가입 모드 전환 가능한 인증 폼. 이메일·비밀번호 검증, FormSwitch로 로그인 상태 유지 옵션 지원.

폼

WizardForm

다단계 순차 입력 폼. FormFieldDef 기반 필드 정의, 단계별 검증, 진행 표시기, 리뷰 단계 지원.

폼

DynamicFieldForm

런타임 필드 추가/제거 폼. 최소/최대 필드 수 제약, 개별 검증, 동적 스토어 업데이트 지원.

폼

FileUploadForm

파일 선택, 메타데이터 표시, 이미지 미리보기를 포함한 업로드 폼. 파일 크기 제한, 설명 입력 지원.

폼

KeyValueEditor

키-값 쌍 편집기. 동적 행 추가/삭제, 비밀값 토글, 유효성 검사를 지원합니다.

폼
이전SqlEditor다음WidgetGrid

기본 사용

테마

로그인 / 회원가입 폼

다단계 폼 (Wizard)

1
기본 정보
2
상세 정보
3
확인

동적 필드 추가/제거

파일 업로드 폼

기본 사용

=
=
=

비밀값 토글

=
=
=

Controlled + onChange

=
=
=
[
  {
    "id": "1",
    "key": "DATABASE_URL",
    "value": "postgres://localhost:5432/mydb"
  },
  {
    "id": "2",
    "key": "API_KEY",
    "value": "sk-1234567890",
    "isSecret": true
  },
  {
    "id": "3",
    "key": "NODE_ENV",
    "value": "production"
  }
]

최대 항목 제한 (3개)

=
=
=

읽기 전용

=
=
=

빈 상태

항목이 없습니다. 추가 버튼을 눌러주세요.