컴포넌트/DnD (Drag and Drop)

DnD (Drag and Drop)

드래그앤드롭 기능을 제공하는 컴포넌트입니다. @dnd-kit을 기반으로 하며, 칸반보드 등을 쉽게 구현할 수 있습니다.

설치

Terminal

npx @msub-core/ui-cli add dnd

사용법

TSX

import {
  DndContext,
  KanbanBoard,
  KanbanColumn,
  KanbanCard,
  arrayMove,
  findContainer,
  type DragEndEvent,
  type DragOverEvent,
} from "@msub-core/ui/components/dnd"

function MyKanban() {
  const [tasks, setTasks] = useState({
    todo: [{ id: "1", title: "태스크 1" }],
    done: [{ id: "2", title: "태스크 2" }],
  })

  const handleDragOver = (event: DragOverEvent) => {
    // 컬럼 간 이동 처리
  }

  const handleDragEnd = (event: DragEndEvent) => {
    // 같은 컬럼 내 정렬 처리
  }

  return (
    <DndContext onDragOver={handleDragOver} onDragEnd={handleDragEnd}>
      <KanbanBoard>
        <KanbanColumn id="todo" title="할 일" itemIds={["1"]}>
          <KanbanCard id="1">태스크 1</KanbanCard>
        </KanbanColumn>
      </KanbanBoard>
    </DndContext>
  )
}

칸반보드

카드를 드래그하여 컬럼 간 이동 및 순서 변경이 가능합니다.

할 일

디자인 시스템 문서 작성

높음

API 엔드포인트 설계

보통

진행중

로그인 페이지 구현

높음

완료

프로젝트 초기 설정

낮음

DndContext Props

Prop	Type	Default	Required	Description
onDragStart	(event: DragStartEvent) => void	-	No	드래그 시작 시 호출
onDragOver	(event: DragOverEvent) => void	-	No	다른 요소 위로 드래그 시 호출 (컬럼 간 이동에 필수)
onDragEnd	(event: DragEndEvent) => void	-	No	드래그 완료 시 호출

KanbanColumn Props

Prop	Type	Default	Required	Description
id	string	-	No	컬럼 고유 ID (필수)
title	string	-	No	컬럼 제목 (필수)
itemIds	UniqueIdentifier[]	-	No	컬럼 내 아이템 ID 배열 (필수)
count	number	-	No	아이템 개수 표시
color	string	-	No	컬럼 색상 (헤더 점)

KanbanCard Props

Prop	Type	Default	Required	Description
id	string	-	No	카드 고유 ID (필수)
children	ReactNode	-	No	카드 내용 (필수)
className	string	-	No	추가 스타일

유틸리티 함수

arrayMove

배열 내 아이템의 위치를 변경합니다.

TSX

import { arrayMove } from "@msub-core/ui/components/dnd"

const items = ["a", "b", "c", "d"]
const newItems = arrayMove(items, 0, 2) // ["b", "c", "a", "d"]

findContainer

아이템 ID가 속한 컨테이너를 찾습니다.

TSX

import { findContainer } from "@msub-core/ui/components/dnd"

const items = {
  todo: ["1", "2"],
  done: ["3", "4"],
}
const container = findContainer("2", items) // "todo"

컴포넌트 구성

DndContext

드래그앤드롭 컨텍스트

Droppable

드롭 가능 영역

Draggable

드래그 가능 아이템

KanbanBoard

칸반보드 컨테이너

KanbanColumn

칸반보드 컬럼

KanbanCard

칸반보드 카드