WorkflowDesigner

캔버스 기반 워크플로우 편집기 컴포넌트

개요

WorkflowDesigner는 트리 구조의 워크플로우를 시각적으로 설계할 수 있는 캔버스 기반 편집기입니다. 노드와 커넥터를 자동 레이아웃하며, 팔레트에서 노드를 추가하고 캔버스에서 편집할 수 있습니다.

주요 특징

✅ 자동 레이아웃: parentId 기반 트리 구조를 자동으로 배치
✅ 팔레트: 좌측 사이드바에서 노드 유형 선택 및 추가
✅ 캔버스 조작: 줌(휠), 패닝(스페이스+드래그, 미들 클릭), 전체 화면
✅ 분기 노드: 조건 분기(Yes/No 등)와 라벨/색상 지원
✅ 커스텀 렌더링: renderNode로 노드 내부 커스터마이징
✅ 읽기 전용: readOnly 모드 지원
✅ Controlled/Uncontrolled: 선택 상태, 노드 배열 모두 제어 가능

아키텍처

영역	설명
Palette	좌측 사이드바. `nodeTypes`에 정의된 노드 유형을 그룹별로 표시
Header	캔버스 상단. `title`/`description` 또는 커스텀 `header` 렌더링
Canvas	중앙 캔버스. 노드, 커넥터, + 버튼을 렌더링
Toolbar	좌측 하단. 줌, 패닝/선택 모드, 화면 맞춤, 전체 화면 버튼

기본 사용

Preview

워크플로우

시작

트리거

실행

액션

흐름

조건

시작

이메일 발송

알림 전송

Node Status

노드는 status 속성으로 시각적 상태를 표현합니다.

Preview

워크플로우 구성

액션

완료됨

완료

오류 발생

오류

비활성

잠김

Status 설명

Status	설명	시각적 표현
default	기본 상태	기본 테두리
selected	선택됨	Primary 테두리 + 그림자
completed	완료됨	녹색 테두리
error	오류	빨간 테두리 + 그림자
disabled	비활성	50% 투명도, 클릭 불가
locked	잠김	70% 투명도, 잠금 아이콘

사용 예시

예시 1: 분기 워크플로우

조건 노드로 Yes/No 분기를 만들 수 있습니다.

Preview

워크플로우

시작

트리거

흐름

조건

실행

액션

고객 방문

VIP 여부

VIP 혜택 안내

일반 안내

예시 2: onNodesChange를 활용한 편집 모드

onNodesChange를 전달하면 내장 추가/삭제 로직이 활성화됩니다.


import { WorkflowDesigner } from "@vortex/ui-icignal"
import type { WorkflowNode, NodeTypeDefinition } from "@vortex/ui-icignal"
import { useState } from "react"
 
function WorkflowEditor() {
  const [nodes, setNodes] = useState<WorkflowNode[]>([
    { id: "1", type: "trigger", title: "시작", parentId: null },
  ])
 
  const nodeTypes: NodeTypeDefinition[] = [
    { type: "trigger", label: "트리거", maxCount: 1, maxChildren: 1 },
    { type: "action", label: "액션", maxChildren: 1 },
  ]
 
  return (
    <div style={{ height: 600 }}>
      <WorkflowDesigner
        nodes={nodes}
        nodeTypes={nodeTypes}
        onNodesChange={setNodes}
        onNodeSelect={(id) => console.log("선택:", id)}
      />
    </div>
  )
}

예시 3: 커스텀 노드 렌더링

renderNode prop으로 노드 내부를 자유롭게 커스터마이징할 수 있습니다.


<WorkflowDesigner
  nodes={nodes}
  nodeTypes={nodeTypes}
  onNodesChange={setNodes}
  renderNode={({ node, isSelected }) => (
    <div className="p-3">
      <div className="font-semibold">{node.title}</div>
      {node.description && (
        <div className="text-xs text-muted-foreground mt-1">
          {node.description}
        </div>
      )}
      {isSelected && (
        <div className="text-xs text-primary mt-2">선택됨</div>
      )}
    </div>
  )}
/>

예시 4: 커스텀 헤더

header prop으로 캔버스 상단에 커스텀 UI를 배치하거나, title/description으로 간단히 텍스트를 표시합니다.


// 간단한 텍스트 헤더
<WorkflowDesigner
  nodes={nodes}
  nodeTypes={nodeTypes}
  title="캠페인 워크플로우"
  description="고객 여정을 설계하세요"
/>
 
// 커스텀 헤더
<WorkflowDesigner
  nodes={nodes}
  nodeTypes={nodeTypes}
  header={
    <div className="flex items-center justify-between">
      <h3>캠페인 A</h3>
      <button>저장</button>
    </div>
  }
/>

예시 5: 수평 레이아웃

layoutDirection="horizontal"로 왼→오른쪽 방향 트리를 구성합니다.


<WorkflowDesigner
  nodes={nodes}
  nodeTypes={nodeTypes}
  layoutDirection="horizontal"
  onNodesChange={setNodes}
/>

API Reference