KeyValueEditor

shell

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

100%

기본 사용

비밀값 토글

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개)

읽기 전용

빈 상태

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

테스트 커버리지

2026년 2월 4일

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

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

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

KeyValueEditor Props

Prop	타입	기본값	설명
`value`	`KeyValueEntry[]`	—	현재 엔트리 (controlled 모드)
`defaultValue`	`KeyValueEntry[]`	—	초기 엔트리 (uncontrolled 모드)
`onChange`	`(entries: KeyValueEntry[]) => void`	—	엔트리 변경 핸들러
`showSecretToggle`	`boolean`	`false`	비밀값 표시/숨김 토글 버튼 활성화
`maxEntries`	`number`	—	최대 항목 수 제한
`readOnly`	`boolean`	`false`	읽기 전용 모드
`labels`	`KeyValueEditorLabels`	—	i18n 라벨 오버라이드
`renderActions`	`(entry: KeyValueEntry, index: number) => ReactNode`	—	항목별 커스텀 액션 슬롯
`validateKey`	`(key: string, entries: KeyValueEntry[]) => string \| undefined`	—	키 유효성 검사 함수

Import

tsx

import { KeyValueEditor } from "@reopt-ai/opt-ui";

키보드 동작

키	동작
Tab	키/값 필드 간 이동