작업 생성

작업 생성은 초안까지예요. 차트는 버튼과 그린 범위, 차트 ref에서 날짜 범위를 모아 onTaskCreate를 호출하고 행은 직접 추가하지 않아요.

작업 생성 켜기Copy Anchor Link

onTaskCreate를 넘기고 새 작업은 앱의 상태에 추가해요. 이 콜백이 없으면 버튼도 십자선 커서도 그리기 제스처도 나타나지 않아요.

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

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

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

  const handleTaskCreate = ({ startDate, endDate }: GanttTaskDraft) => {
    setTasks((current) => [
      ...current,
      {
        id: crypto.randomUUID(),
        name: 'New task',
        startDate,
        endDate,
        parentId: null,
        sequence: `${current.length + 1}`,
      },
    ]);
  };

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

초안에는 startDate와 endDate만 있어요. 현재 배율에 맞춰진 UTC ISO 문자열이에요. 초안에 행 정보가 없으니 id와 이름, parentId, sequence는 앱에서 정해요. 작업 데이터에서 확인해요.

초안만으로는 onTasksChange가 발생하지 않아요. 새 행은 앱의 상태에 작업이 들어오면 나타나요.

초안이 만들어지는 곳Copy Anchor Link

진입점 세 곳이 모두 같은 초안을 만들어요.

Add task 버튼은 작업 목록 아래쪽에 있어서 showTaskList가 필요해요. 누르면 오늘 자리에 눈금 하나 길이의 초안을 보내고, 오늘이 그려진 타임라인 밖에 있으면 첫 눈금에서 시작해요.

차트 ref의 addTask()는 직접 만든 툴바나 키보드 단축키에서 같은 초안을 보내요. 명령형 API에서 확인해요.

그리는 범위는 마지막 행 아래에서 시작해요. 그 빈 공간을 누르고 옆으로 끌었다가 놓아요. 행 위에서는 막대든 화살표든 핸들이든 행의 빈 부분이든 아무것도 그려지지 않아요.

마우스는 곧바로 그리기를 시작해요. 터치와 펜은 막대 드래그와 같은 400 ms 길게 누르기가 필요하고, 이 동작은 작업 편집에서 설명해요. 세로 이동은 무시해요. 4px보다 짧은 드래그는 아무것도 보내지 않고, Escape는 진행 중인 그리기를 취소해요.

현재 배율에 맞추기Copy Anchor Link

그린 범위는 화면에 보이는 배율의 눈금 단위까지 바깥으로 넓어져요. 눈금 하나에 담기는 단위는 타임라인과 배율에서 확인해요.

눈금 하나 안에 머무는 범위도 눈금 하나 길이가 돼요.

막대 드래그는 다른 단위로 움직여요. month 배율에서 막대는 1일 단위로 움직이고 그린 범위는 주 단위로 나와요.

그린 범위에는 minDate와 maxDate가 적용되지 않아서 초안이 minDate보다 앞에서 시작할 수 있어요. 작업 편집에서 확인해요.

작업 생성 끄기Copy Anchor Link

allowTaskCreate는 차트 전체에 적용되고 세 진입점을 함께 제어해요. false로 두면 버튼이 그려지지 않고 그리기 제스처가 꺼지고 addTask()도 아무 일도 하지 않아요.

allowTaskCreate를 넘기지 않으면 readOnly를 따라요. Task에는 allowTaskCreate 필드가 없어서 거기에 넣은 값은 무시돼요. 상호작용 설정에서 확인해요.

적용 전에 확인하기Copy Anchor Link

• onTaskCreate가 있어야 작업 생성이 동작해요. allowTaskCreate만 켜면 버튼도 그려지지 않고 제스처도 켜지지 않아요.
• visibleStart와 visibleEnd는 빈 차트에 타임라인을 만들어요. 작업도 없고 고정된 표시 범위도 없으면 범위를 맞출 눈금이 없어서 어느 진입점도 초안을 만들지 못해요.
• 그리기 제스처에는 포인터가 필요해요. 키보드로는 Add task 버튼에서 같은 초안을 만들고 이 버튼은 행 다음에 탭 스톱 하나를 차지해요. 작업 생성에 묶인 키는 없어요. 키보드와 스크린 리더에서 확인해요.
• 작업 삭제에는 포인터 경로가 없어요. 작업은 키보드에서만 지워요.

prop 정의는 GanttProps, 버튼이 놓이는 목록은 작업 목록과 계층 구조에서 확인해요.