WorkflowCanvas

shell

워크플로우 캔버스. 그리드 셀 기반 스텝 배치, SVG 연결선, 키보드 이동을 지원합니다.

깊이

100%

2026년 2월 4일

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

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

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

Prop	타입	기본값	설명
`steps`*	`WorkflowCanvasStep[]`	—	스텝 배열. { id, title, row, col, status? }
`connections`	`WorkflowCanvasConnection[]`	`[]`	연결선 배열. { from, to, label? }
`onStepMove`	`(stepId: string, row: number, col: number) => void`	—	화살표 키 이동 핸들러
`onSelectStep`	`(step: WorkflowCanvasStep) => void`	—	스텝 선택 핸들러

tsx

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

키	동작
↑ ↓ ← →	선택 스텝 이동 (onStepMove 제공 시)
Enter	스텝 선택