KanbanBoard

@hua-labs/ui/interactive/kanban

v1.1.0

Pro

베타

Pro 플랜 컴포넌트

곧 출시됩니다! 웨이팅리스트에 등록하고 소식을 받아보세요.

웨이팅리스트 등록

작업 관리를 위한 드래그앤드롭 칸반 보드 컴포넌트입니다. HTML5 DnD API, WIP 제한, 우선순위 배지 등을 지원합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { KanbanBoard } from "@hua-labs/ui/interactive/kanban";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

카드를 드래그하여 다른 컬럼으로 이동해보세요. '진행 중' 컬럼은 WIP 제한이 3개입니다.

주요 기능

HTML5 드래그앤드롭

외부 라이브러리 없이 네이티브 HTML5 DnD API 사용

WIP 제한

컬럼별 최대 카드 수 제한으로 작업 흐름 관리

우선순위 시각화

낮음/중간/높음/긴급 4단계 우선순위 색상 표시

Controlled/Uncontrolled

두 가지 상태 관리 방식 모두 지원

Props

이름	타입	기본값	설명
`columns`	`KanbanColumn[]`	-	컬럼 배열 (제어 모드)
`cards`	`KanbanCard[]`	-	카드 배열 (제어 모드)
`defaultColumns`	`KanbanColumn[]`	-	초기 컬럼 (비제어 모드)
`defaultCards`	`KanbanCard[]`	-	초기 카드 (비제어 모드)
`onColumnsChange`	`(columns: KanbanColumn[]) => void`	-	컬럼 변경 시 콜백
`onCardsChange`	`(cards: KanbanCard[]) => void`	-	카드 변경 시 콜백
`onCardMove`	`(event: KanbanCardMoveEvent) => void`	-	카드 이동 시 콜백
`variant`	`"default" \| "gradient" \| "outline" \| "elevated"`	`"elevated"`	시각적 스타일 변형
`allowAddColumn`	`boolean`	`false`	컬럼 추가 버튼 표시
`allowAddCard`	`boolean`	`true`	카드 추가 버튼 표시
`allowColumnDrag`	`boolean`	`true`	컬럼 드래그 허용
`allowCardDrag`	`boolean`	`true`	카드 드래그 허용
`readOnly`	`boolean`	`false`	읽기 전용 모드

코드 예시

docs:common.basicUsagetsx

import { useState } from 'react';
import { KanbanBoard } from '@hua-labs/ui/interactive/kanban';

function ProjectBoard() {
  const [columns, setColumns] = useState([
    { id: 'todo', title: '할 일', color: 'blue' },
    { id: 'doing', title: '진행 중', color: 'orange', limit: 3 },
    { id: 'done', title: '완료', color: 'green' },
  ]);

  const [cards, setCards] = useState([
    { id: '1', columnId: 'todo', title: 'UI 디자인', priority: 'high' },
    { id: '2', columnId: 'doing', title: 'API 개발', priority: 'medium' },
  ]);

  return (
    <KanbanBoard
      columns={columns}
      cards={cards}
      onColumnsChange={setColumns}
      onCardsChange={setCards}
      allowAddColumn
      allowAddCard
    />
  );
}

docs:components.kanbanBoard.demo.cardTypestsx

interface KanbanCard {
  id: string;           // 고유 ID
  columnId: string;     // 소속 컬럼 ID
  title: string;        // 카드 제목
  description?: string; // 설명
  priority?: 'low' | 'medium' | 'high' | 'urgent';
  tags?: string[];      // 태그
  assignee?: {          // 담당자
    name: string;
    avatar?: string;
  };
  dueDate?: Date | string; // 마감일
}

docs:components.kanbanBoard.demo.handlingMoveEventstsx

<KanbanBoard
  columns={columns}
  cards={cards}
  onColumnsChange={setColumns}
  onCardsChange={setCards}
  onCardMove={(event) => {
    console.log(`Card ${event.cardId} moved`);
    console.log(`From: ${event.fromColumnId}`);
    console.log(`To: ${event.toColumnId} at index ${event.toIndex}`);

    // 서버에 동기화
    syncToServer(event);
  }}
  onColumnMove={(event) => {
    console.log(`Column ${event.columnId} moved to index ${event.toIndex}`);
  }}
/>

접근성

•키보드 내비게이션: Tab으로 카드 간 이동, Enter/Space로 드래그 시작
•ARIA 레이블: 컬럼과 카드에 설명적인 ARIA 레이블 제공
•포커스 관리: 드래그앤드롭 작업 중 포커스 유지
•스크린 리더 지원: 카드 위치 및 컬럼 변경 사항 안내

ImageReveal StatsPanelPro