작업 데이터

API, 로컬 파일, React 상태에서 작업을 가져올 수 있어요. 각 항목을 Task 형식으로 맞춘 뒤 배열을 차트에 전달해요.

작업 하나로 시작하기Copy Anchor Link

각 작업에는 id, 이름, 시작일, 종료일, 상위 작업 id, 순서가 필요해요. 상위 작업이 없다면 parentId: null을 사용해요.

import type { Task } from '@jaeungkim/gantt-chart';

const tasks: Task[] = [
  {
    id: 'design',
    name: 'Design',
    startDate: '2026-09-01',
    endDate: '2026-09-08',
    parentId: null,
    sequence: '1',
    progress: 40,
  },
];

progress는 선택 사항이에요. 0부터 100 사이의 숫자를 넣으면 진행률을 표시하고, 생략하면 진행률 채움이 없는 막대로 표시해요. "40" 같은 숫자 문자열은 자동으로 변환하지 않아요.

id는 고유해야 하고 편집 후에도 유지해야 해요. 차트는 id로 작업을 찾고, 의존 관계를 연결하고, 계층 구조를 만들어요. 전체 필드 정의는 Task에서 확인해요.

날짜 형식 정하기Copy Anchor Link

날짜 단위 계획에는 YYYY-MM-DD를 사용해요. 차트는 UTC 기준으로 날짜를 읽으므로 어느 시간대에서 보더라도 같은 날짜에 표시돼요.

시간 단위 계획에는 오프셋이 명시된 ISO 문자열을 사용해요.

오프셋이 없는 날짜도 UTC로 읽어요. 편집 결과는 전체 UTC ISO 문자열로 전달하므로 2026-09-01이 2026-09-01T00:00:00.000Z로 돌아올 수 있어요.

현지 시간대 모드는 제공하지 않아요. 로케일과 날짜 형식은 표시 문구를 바꾸며, 배치에 사용하는 시간대는 바꾸지 않아요.

순서와 구조 정하기Copy Anchor Link

sequence가 행 순서를 정해요. 점으로 구분된 숫자를 비교하므로 1.2는 1.10보다 앞에 와요. 평면 목록이라면 1, 2, 3을 사용해요.

중첩된 작업은 하위 작업의 parentId를 지정하고 1.1 같은 순서를 부여해요. hierarchy를 켜면 상위 작업 요약과 접기 기능이 있는 트리로 표시해요. 작업 목록과 계층 구조를 참고해요.

차트가 하위 작업을 상위 작업 아래로 자동 정렬하지는 않아요. sequence와 상위 작업 연결을 일관되게 유지해요. 사용자가 행 순서를 변경하면 차트가 이 필드들을 갱신해요.

편집 결과를 상태에 반영하기Copy Anchor Link

onTasksChange가 전달한 전체 배열을 tasks로 다시 전달해요.

const [tasks, setTasks] = useState<Task[]>(initialTasks);

<ReactGanttChart tasks={tasks} onTasksChange={setTasks} />

저장할 때 의존 관계와 진행률 같은 선택 필드도 유지해요. API에 다른 날짜 형식이나 필드 구조가 필요하다면 API에 보낼 별도 데이터만 변환해요. 앱 상태 연결은 이벤트에서 확인해요.

앱이 작업을 직접 수정할 때는 새 배열과 변경된 작업의 새 객체를 만들어요. 기존 배열을 직접 변경하면 동기화가 실행되지 않아요.

차트는 새로 받은 데이터와 이전에 받은 데이터를 JSON 직렬화 결과로도 비교해요. 이전 값을 다시 전달하는 것만으로 차트 편집을 거부할 수 있다고 가정하면 안 돼요. 직렬화 결과가 같으면 차트 내부 데이터를 교체하지 않아요. 속성 순서와 추가 필드도 이 비교에 영향을 줄 수 있어요.

필요한 정보 추가하기Copy Anchor Link

프로젝트에 필요한 선택 필드를 추가해요.

• 의존 관계로 서로 의존하는 작업을 연결해요.
• 레인으로 여러 작업이 행을 공유하게 해요.
• 스타일링에서 작업 색상과 CSS 클래스를 설정해요.
• 작업 편집에서 작업별 권한과 날짜 범위를 설정해요.

새 작업을 만들 때는 초안을 받은 앱이 id, 이름, 순서를 채워요. 작업 생성을 참고해요.

외부 데이터 검증하기Copy Anchor Link

Task는 TypeScript 타입이며 런타임 검증기는 아니에요. API나 사용자 파일에서 받은 데이터는 차트에 전달하기 전에 검증해요.

필수 필드, 고유한 id, 유효한 날짜 범위, 상위 작업 연결을 확인해요. 특히 sequence가 없으면 렌더링이 실패할 수 있어요. 잘못된 날짜나 중복 id는 별도 오류 없이 막대나 연결을 잘못 표시할 수 있어요.

입력에는 Task[]를 전달해요. TaskTransformed는 렌더링 정보를 추가한 콜백과 렌더러용 출력 타입이에요. 작업 타입에서 확인해요.