headless tree 라이브러리 #2 (moveTree)

[yoonminsang]

오늘 한 일

트리 아이템을 이동하는 moveTreeItem 유틸 함수와 TreeRef.moveItem API를 구현했다.

핵심 의사결정: DnD를 라이브러리에 포함하지 않기

처음에는 DnD 기능까지 제공하려고 했는데, 생각해보니 문제가 많았다:

• 사용자마다 UX가 완전히 다름 (딜레이, 키 조합, 드롭존 표시 등) 그렇기 때문에 headless로 제공하기가 힘들다.
• 외부 의존성 증가 (@dnd-kit 등)
• DnD가 아니라 그냥 트리 이동이 필요한 케이스도 존재함

결정: 트리 구조 조작 API만 제공하고, DnD는 스토리북으로 예시 코드만 작성

인터페이스 설계

// 유틸함수
type MoveTarget =
  | { parentId: TreeItemId | null; index: number } // Insert at specific index
  | { parentId: TreeItemId | null; position: 'first' } // Insert at the beginning
  | { parentId: TreeItemId | null; position: 'last' }; // Insert at the end

const moveTreeItem: <T extends BasicTreeItem>({ tree, parentMap, sourceId, target, }: {
    tree: TreeData<T>;
    parentMap: ParentMap;
    sourceId: TreeItemId;
    target: MoveTarget;
}) => TreeData<T>

// ref
const moveItem: (sourceId: TreeItemId, target: Parameters<typeof moveTreeItem>[0]["target"]) => void

//유틸함수
const canMoveItem: <T extends BasicTreeItem>(tree: TreeData<T>, sourceId: TreeItemId, targetId: TreeItemId) => boolean

Claude Code 활용

• 테스트 코드 자동 생성 (24개 + 14개)
• 스토리북 예시 작성
• 요구사항이 명확한 코드의 초안 작성
• 확실히 개발 시간이 몇 배 단축됨

배운 점

• table을 다루면서도 느꼈는데 dnd는 확실히 깊게 추상화하기가 어렵다. 라이브러리같이 낮은 수준의 레이어에서는 낮은 단계의 추상화가 좋다. 그 이후에 필요하다면 앱이나 도메인 단위로 추상화를 해야한다.