노드 구성 및 상세 편집 UX 개편

[HyeYeonLee0112]

목표

워크플로우 Canvas 안에서 노드 자체만으로 주요 정보 확인, 상세 옵션 편집, 출력 변수 활용이 가능하도록 노드 구성과 상호작용 방식을 개편한다. 기존처럼 노드 클릭 시 우측 패널에 의존하는 흐름을 제거하고, 노드 내부 확장/호버 패널 중심으로 편집 경험을 정리한다.

작업 범위

1. 노드 기본 정보 구성 개선

• 노드 이름 위에 노드 분류/카테고리 집합을 작은 텍스트 또는 badge 형태로 표시
• 노드 이름 아래에 짧은 노드 설명을 작은 텍스트로 표시
• 축소 상태에서도 분류, 이름, 설명이 과도하게 겹치거나 잘리지 않도록 레이아웃 정리
• 기존 노드 타입별 title/description/category 데이터를 어디서 가져올지 정리

2. 우측 설정 패널 제거 및 노드 내부 상세 편집으로 전환

• 노드 클릭 시 기존 우측 설정 패널이 열리지 않도록 변경
• 노드 우측 상단에 collapsed/expanded 토글 버튼 추가
• 토글 버튼 클릭 시 노드가 가로로 커지지 않고 세로 방향으로 확장되도록 변경
• 토글 버튼 재클릭 시 다시 접힘 상태로 돌아가도록 구현
• 기존 우측 패널에서 수정하던 파라미터를 확장된 노드 내부에서 수정 가능하게 이관
• 확장 상태에서도 edge handle, 노드 번호, 선택 상태, 드래그 동작이 깨지지 않도록 보장

3. 노드 hover output 패널 추가

• 노드에 마우스 hover 시 노드 우측에 output 패널 표시
• output 패널에는 해당 노드의 출력 변수 목록 표시
• 출력 변수는 Gumloop UI/UX를 참고해 component/chip 형태로 표시
• output 패널이 캔버스 pan/zoom, 노드 선택, edge 연결 조작을 방해하지 않도록 이벤트 처리
• hover 해제 시 패널 닫힘 동작과 지연/고정 여부 정책 정리

4. 출력 변수 Drag & Drop 입력 매핑

• output 패널의 출력 변수를 드래그 가능하게 구현
• 다음 노드의 입력 변수/파라미터 영역에 드롭하면 입력 매핑이 설정되도록 구현
• 드래그 중 드롭 가능한 입력 필드/변수 슬롯 highlight 표시
• 드롭 불가능한 대상에는 명확한 disabled/invalid 피드백 표시
• 기존 문자열 직접 입력/선택 방식과 충돌하지 않도록 데이터 모델 정리

5. 검증 기준

• mock workflow 화면에서 노드 축소/확장, hover output 패널, DnD 입력 매핑을 수동 QA
• 주요 노드 타입 최소 3종 이상에서 확장 편집이 동작하는지 확인
• TypeScript 타입체크 통과
• 관련 store/hook/util 단위 테스트 추가 또는 기존 테스트 보강
• 기존 완료 작업인 grid snap, 노드 번호 표시, 단축키 기능과 충돌하지 않는지 확인

제외 범위

• 번호 기반 edge 연결 UX는 MBA-12에서 별도 처리
• edge handle 시각화 고도화는 MBA-13에서 별도 처리
• Stitch 디자인 세트 전체 적용은 MBA-7에서 별도 처리
• Canvas 다중 선택 UX는 MBA-9에서 별도 처리

참고

• output/input 변수 UI는 Gumloop의 변수 chip 및 노드 주변 output 패널 UX를 참고
• 이번 작업은 멀티 에이전트 병렬 작업이 아니라 하나의 집중 작업으로 진행

[linear-code]

MBA-20