레인

짧은 작업이 많으면 작업마다 한 행씩 차지하는 타임라인을 한눈에 보기 어려워요. 관련 작업에 같은 lane 값을 주면 기간이 겹치지 않는 작업을 같은 행에 배치할 수 있어요.

작업을 레인으로 묶기Copy Anchor Link

묶고 싶은 작업에 lane을 추가해요. 별도의 차트 prop은 필요하지 않아요.

import { useState } from 'react';
import { ReactGanttChart, type Task } from '@jaeungkim/gantt-chart';
import '@jaeungkim/gantt-chart/style.css';

const initialTasks: Task[] = [
  { id: 'spec', name: 'Spec', lane: 'design', parentId: null, sequence: '1',
    startDate: '2026-09-01', endDate: '2026-09-04' },
  { id: 'review', name: 'Review', lane: 'design', parentId: null, sequence: '2',
    startDate: '2026-09-02', endDate: '2026-09-03' },
  { id: 'handoff', name: 'Handoff', lane: 'design', parentId: null, sequence: '3',
    startDate: '2026-09-07', endDate: '2026-09-09' },
];

export function LaneChart() {
  const [tasks, setTasks] = useState(initialTasks);

  return (
    <ReactGanttChart
      tasks={tasks}
      onTasksChange={setTasks}
      showTaskList
      height={360}
    />
  );
}

이 예제는 두 행으로 표시돼요.

lane이 없거나 빈 문자열인 작업은 각각 별도의 행을 사용해요.

배치 방식 이해하기Copy Anchor Link

같은 레인에서는 시작일 순서대로 작업을 확인해 비어 있는 첫 번째 행에 배치해요. 앞 작업이 끝나는 시점에 다음 작업이 시작해도 같은 행을 쓸 수 있어요. 기간이 겹치면 행을 추가하며, 작업 날짜는 바꾸지 않아요.

레인의 행들은 sequence 순서상 첫 번째 구성원이 있던 위치에 표시돼요. 레인 값은 정확히 일치해야 하므로 design과 Design은 다른 레인이에요.

레인은 parentId와 관계없이 전체 목록에서 작업을 묶어요. 서로 분리해야 하는 그룹에는 다른 레인 값을 지정해요.

공유 행에서 작업 선택하기Copy Anchor Link

작업 목록에는 시작일이 가장 빠른 작업의 이름과 나머지 작업 수를 나타내는 +N 배지가 표시돼요. 목록 항목을 클릭하면 첫 번째 작업을 선택해요. 다른 작업은 막대를 직접 클릭하거나 키보드 탐색으로 선택해요.

의존 관계는 여전히 개별 작업을 연결해요. 연결 생성과 편집은 의존 관계에서 확인해요.

적용 전에 확인하기Copy Anchor Link

• 레인은 배치를 위한 그룹이에요. 담당자 이름이 표시되는 구역은 아니에요. 레인 문자열은 화면에 표시하지 않으며, 빈 레인이나 레인 헤더를 만드는 API는 없어요.
• 여러 작업이 있는 행은 드래그로 순서를 바꾸거나 다른 행을 놓는 대상으로 사용할 수 없어요. 행 순서 변경을 참고해요.
• 요약 작업을 공유 행으로 묶지 않는 편이 좋아요. 계층 접기는 작업 id를 사용하지만 공유 행은 여러 작업을 나타내요.
• 렌더링 전에 날짜를 검증해요. 유효하지 않은 날짜가 있으면 예상대로 같은 행에 배치되지 않을 수 있어요.

작업 필드 정의는 Task, 차트가 사용하는 행 데이터는 GanttRow에서 확인해요.