작업 목록과 계층 구조

프로젝트를 단계별로 묶으면 필요한 작업을 찾기 쉬워요. 작업 목록을 켜서 타임라인 옆에 이름을 표시하고, 계층 구조를 켜서 상위 작업에 하위 작업의 일정을 모아 보여줘요.

작업 트리 만들기Copy Anchor Link

하위 작업의 parentId에 상위 작업의 id를 넣어요. sequence는 상위 작업이 하위 작업보다 먼저 나오도록 지정해요.

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

const initialTasks: Task[] = [
  { id: 'release', name: 'Release', parentId: null, sequence: '1',
    startDate: '2026-09-01', endDate: '2026-09-18' },
  { id: 'design', name: 'Design', parentId: 'release', sequence: '1.1',
    startDate: '2026-09-01', endDate: '2026-09-08', progress: 100 },
  { id: 'build', name: 'Build', parentId: 'release', sequence: '1.2',
    startDate: '2026-09-08', endDate: '2026-09-18', progress: 40 },
];

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

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

showTaskList는 왼쪽 목록을 표시해요. hierarchy는 상위 작업의 요약과 접기 기능을 켜요. 둘 다 기본값은 꺼짐이므로 위 예제에서는 함께 켜요.

상위 작업의 동작 이해하기Copy Anchor Link

하위 작업이 있는 작업은 요약 행이 돼요. 표시되는 기간은 하위 작업 중 가장 이른 시작일부터 가장 늦은 종료일까지예요. 여러 단계로 중첩된 작업도 반영해요.

상위 작업에 progress가 없으면 하위 작업의 진행률을 기간에 따라 가중 평균해요. 별도로 관리하는 진행률이 있다면 상위 작업의 progress에 직접 넣어요.

요약 막대를 드래그하면 하위 작업도 함께 이동해요. 요약 막대의 길이와 진행률은 드래그로 바꿀 수 없어요. 드래그 동작은 작업 편집, 계산 규칙은 트리 헬퍼에서 확인해요.

행 순서는 여전히 sequence가 정해요. 계층 구조가 켜져 있으면 parentId가 깊이를 정하고, 꺼져 있으면 sequence의 점 개수만큼 들여쓰기해요. 작업 데이터를 준비할 때 두 필드를 일관되게 맞춰요.

구간 접기Copy Anchor Link

처음에만 구간을 접어 두고 이후 토글은 차트에 맡기려면 defaultCollapsedIds를 사용해요.

<ReactGanttChart
  tasks={tasks}
  onTasksChange={setTasks}
  showTaskList
  hierarchy
  defaultCollapsedIds={['release']}
/>

앱에서 접기 상태를 저장하려면 collapsedIds와 onCollapsedChange를 함께 사용해요.

const [collapsedIds, setCollapsedIds] = useState<string[]>(['release']);

<ReactGanttChart
  tasks={tasks}
  onTasksChange={setTasks}
  showTaskList
  hierarchy
  collapsedIds={collapsedIds}
  onCollapsedChange={setCollapsedIds}
/>

콜백은 다음 상태의 접힌 id 목록 전체를 전달해요. collapsedIds를 지정했다면 이 목록을 다시 전달해야 화면이 바뀌어요. 구간을 접으면 상위 작업은 남고 하위 작업이 숨겨져요.

작업 목록 조정하기Copy Anchor Link

showRowNumbers를 추가하면 이름 옆에 1.2 같은 계층 번호를 표시해요.

스플리터를 드래그해 너비를 바꾸거나, 두 번 클릭해 현재 보이는 작업 이름에 맞춰요. 스플리터에서 방향키와 Enter도 사용할 수 있어요. 너비는 차트 내부 상태이며 다시 마운트하면 초기화돼요. 너비를 지정하는 prop이나 변경 콜백은 없어요.

목록에는 작업 이름과 선택적으로 계층 번호가 표시돼요. 추가 필드와 편집기는 상세 패널에 배치해요. 목록 하단에서 작업을 추가하려면 작업 생성을 연결해요.

적용 전에 확인하기Copy Anchor Link

• id는 고유하게, 상위 작업 연결은 유효하게 지정해요. 존재하지 않는 상위 작업이나 순환 연결은 화면에서 루트로 처리하지만 원본 데이터는 수정하지 않아요.
• 요약 작업은 공유 레인에 넣지 않는 편이 좋아요. 여러 작업이 합쳐진 행에서는 요약 작업 접기가 제대로 동작하지 않을 수 있어요.
• 접기 기능에는 hierarchy가 필요해요. 목록에서 이름을 바로 편집할 수 없고, 사용자 정의 열, 정렬, 필터 API는 없어요.

prop 정의는 GanttProps, 탐색 방법은 키보드와 스크린 리더에서 확인해요.