작업 편집

타임라인에서 바로 일정을 수정할 수 있어요. 막대를 옮기거나 양쪽 끝을 늘리고 줄여 날짜를 바꾸고, 진행률 핸들로 완료 비율을 조정해요.

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

작업 상태를 차트에 전달하고 onTasksChange로 갱신해요. 이동, 크기 조절, 진행률 편집은 기본으로 켜져 있어요.

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

export function ProjectPlan({ initialTasks }: { initialTasks: Task[] }) {
  const [tasks, setTasks] = useState(initialTasks);

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

편집을 마치면 변경된 전체 배열을 한 번 전달해요. 이 배열을 tasks로 다시 넘기면 변경 사항이 유지돼요. 서버 저장과 업무 규칙 검증은 앱에서 처리해요. 연결 방법은 이벤트를 참고해요.

날짜와 진행률 바꾸기Copy Anchor Link

날짜는 타임라인 스케일에 따라 정해진 간격으로 이동해요. 자정에 맞추지 않고 원래 시각을 유지해요. 크기를 조절할 때는 최소 한 이동 간격만큼의 기간을 남기므로, 그보다 짧은 작업은 더 길어질 수 있어요.

Escape를 눌러도 이동과 크기 조절, 진행률 드래그는 취소되지 않아요. 포인터를 놓으면 편집이 확정돼요.

계층 구조를 켜면 요약 막대를 움직일 때 하위 작업도 함께 이동해요. 요약 막대의 날짜와 진행률은 하위 작업에서 계산하므로 직접 크기를 조절하거나 진행률을 드래그할 수 없어요.

정확한 값을 입력하려면 상세 패널을 사용해요. 날짜와 진행률은 키보드로도 편집할 수 있어요.

허용할 편집 정하기Copy Anchor Link

보기 전용 차트는 readOnly로 시작해요.

<ReactGanttChart tasks={tasks} readOnly />

날짜는 고정하고 진행률만 수정하게 하려면 날짜 편집을 꺼요.

<ReactGanttChart
  tasks={tasks}
  onTasksChange={setTasks}
  allowMove={false}
  allowResize={false}
/>

작업별 권한 필드로 차트 설정을 덮어쓸 수 있어요. 예를 들어 readOnly: true로 작업을 잠그고, 같은 작업에 allowProgressChange: true를 지정하면 진행률만 수정할 수 있어요. 작업에 명시한 권한은 차트 전체의 readOnly도 덮어쓸 수 있어요.

우선순위는 상호작용 설정, 전체 옵션은 props에서 확인해요. 이 설정은 차트 조작을 제어하므로 데이터를 저장할 때도 앱의 권한을 확인해야 해요.

날짜 범위 제한하기Copy Anchor Link

minDate와 maxDate로 이동과 크기 조절 범위를 제한해요.

<ReactGanttChart
  tasks={tasks}
  onTasksChange={setTasks}
  minDate="2026-03-01T00:00:00Z"
  maxDate="2026-04-01T00:00:00Z"
/>

작업마다 다른 범위를 지정할 수 있어요. 요약 막대를 이동하면 하위 작업 중 가장 엄격한 제한을 따라요. 허용 범위보다 긴 작업은 기간을 유지하므로 maxDate를 넘을 수 있어요.

근무 달력으로 근무일에 맞출 수도 있어요. 근무일 보정 뒤에 날짜 제한을 적용하므로 경계에 걸린 날짜는 비근무일일 수 있어요. 드래그로 만드는 새 작업 초안에는 이 제한을 적용하지 않아요.

터치와 긴 타임라인 사용하기Copy Anchor Link

터치나 펜에서는 막대를 400 ms 동안 누른 뒤 드래그해요. 쓸어 넘기면 타임라인이 스크롤돼요. 좁은 막대에는 터치용 크기 조절 영역이 없으므로 상세 패널을 사용하거나 더 세밀한 스케일로 바꿔요.

막대를 이동하거나 크기를 조절하면서 타임라인 좌우 끝에 가까이 가면 자동으로 스크롤돼요. autoScrollOnDrag={false}로 끌 수 있어요. 진행률 편집 중에는 자동 스크롤하지 않아요.

함께 사용할 기능Copy Anchor Link

• 버튼이나 날짜 범위 드래그로 작업을 만들어요.
• 작업 순서나 계층을 바꾸려면 행 순서를 변경해요. 막대를 드래그하면 원래 행 안에서만 움직여요.
• 작업의 관계를 보여주려면 의존 관계를 연결해요. 연결해도 일정이 자동으로 바뀌지는 않아요.

여러 막대를 선택해 한 번에 편집하는 기능은 없어요. 프로젝트 단계를 통째로 옮기려면 요약 막대를 이동해요.