Skip to content

Refactor: Extract useKanbanDnD hook from KanbanBoard (God Component decomposition) #141

@ryota-murakami

Description

@ryota-murakami

Background

Code quality analysis (2026-02-20) identified KanbanBoard as a God Component — 553 lines with 3 distinct concerns mixed together. This is the highest-priority refactoring item.

Current State

src/components/Board/KanbanBoard.tsx contains ~200 lines of DnD logic:

  • Sensor configuration (Mouse, Touch, Keyboard)
  • Custom collision detection (forgivingCollisionDetection)
  • handleDragStart / handleDragEnd (~80 lines, deeply nested)
  • Column operation sub-handlers: handleNewRowDrop, handleColumnInsertDrop, handleColumnSwap
  • Grid dimension calculations, insertion zone calculations
  • activeId / activeDragType state

Proposed Change

Extract a useKanbanDnD hook:

// src/hooks/board/useKanbanDnD.ts
const {
  sensors, activeId, activeDragType, insertionZones,
  handleDragStart, handleDragEnd,
} = useKanbanDnD({ statuses, cards, dispatch, recordColumnHistory })

Acceptance Criteria

  • New src/hooks/board/useKanbanDnD.ts with explicit TypeScript interfaces (Params + Return)
  • All returned functions wrapped in useCallback
  • KanbanBoard reduced by ~200 lines (rendering + wiring only)
  • No behavior changes — pure refactoring
  • All existing tests pass (pnpm test && pnpm build && pnpm e2e:parallel)

Impact

  • KanbanBoard: 553 → ~350 lines
  • DnD logic becomes independently testable
  • Follows the established pattern from BoardPageClient hook extraction

Metadata

Metadata

Assignees

No one assigned

    Labels

    refactoringCode quality and structural improvements

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions