Kanban

컬럼 기반 칸반 보드 형태로 데이터를 시각화하는 컴포넌트

개요

Cals Kanban은 Foundation KanbanBoard를 래핑해 CALS 프로그램에 필요한 접기/펼치기 헤더, 카드 더블클릭, 카드 기본 템플릿, 헤더 액션 영역을 제공합니다.

주요 특징

• ✅ Foundation Kanban 활용: 보드/컬럼/카드 드래그는 Foundation KanbanBoard 기반
• ✅ CALS 기본 카드 템플릿: header, summary, tags를 표준 영역으로 표시
• ✅ 더블클릭 전용 동작: 단일 클릭 없이 더블클릭/키보드 Enter로 카드 액션 실행
• ✅ 접기/펼치기 헤더: title, headerActions, defaultCollapsed, collapseDisabled 지원
• ✅ CALS + 범용 API 동시 지원: headerField와 groupBy 모두 지원
• ✅ 전체 크기 모드: fullSize prop으로 외부 레이아웃 결과 반영

기본 사용

columns, items, headerField를 사용해 CALS 호환형 칸반을 렌더링합니다.

<Kanban title="업무 칸반" columns={columns} items={items} headerField="status" />

헤더 액션 + 접기/펼치기

<Kanban
  title="헤더 액션"
  columns={columns}
  items={items}
  headerField="status"
  headerActions={<button type="button">새로고침</button>}
/>

범용 groupBy 사용

headerField 대신 groupBy 함수 기반 범용 API도 지원합니다.

<Kanban
  title="범용 그룹핑"
  columns={columns}
  items={items}
  groupBy={(item) => item.status}
/>

API Reference

Props

Events

접근성

권장 사항

• ✅ 접기/펼치기 버튼 상태는 aria-expanded로 전달됩니다.
• ✅ 카드 더블클릭 액션이 있으면 Enter/Space 키로도 동일 동작을 수행할 수 있습니다.
• ✅ 헤더 제목을 통해 보드의 의미를 명확히 전달합니다.
• ❌ 단일 클릭에 필수 동작을 연결하지 마세요. CALS 기본 동작은 더블클릭 중심입니다.

관련 컴포넌트

• Foundation Kanban: 기본 칸반 보드 컴포넌트
• Dynamic: 동적 레이아웃 컨테이너