의존 관계
작업 사이의 선후 관계를 표시하고, 타임라인에서 연결을 만들거나 삭제해요.
다른 작업에 의존하는 작업이 있다면 막대 사이에 화살표를 연결해요. 타임라인에서 관계를 확인하고 연결을 추가하거나 삭제할 수 있어요.
의존 관계는 계획을 표현해요. 일정을 자동으로 조정하지는 않아요. Design을 Build에 연결해도 Build의 시작일은 바뀌지 않아요.
데이터에 의존 관계 넣기
선행 작업을 기다리는 작업에 의존 관계를 저장해요. Build가 Design을 기다린다면 Build에 항목을 넣고 targetId를 Design의 id로 지정해요.
const tasks: Task[] = [
{
id: 'design',
name: 'Design',
startDate: '2026-03-02',
endDate: '2026-03-06',
parentId: null,
sequence: '1',
},
{
id: 'build',
name: 'Build',
startDate: '2026-03-06',
endDate: '2026-03-13',
parentId: null,
sequence: '2',
dependencies: [{ targetId: 'design', type: 'FS' }],
},
];이 데이터는 Design에서 Build로 향하는 화살표를 그려요. Task는 @jaeungkim/gantt-chart에서 가져와요. 전체 데이터 구조는 작업 타입에서 확인해요.
targetId는 이름과 달리 화살표가 도착하는 작업이 아니라 선행 작업을 가리켜요. 각 항목에는 연결 유형인 type도 필요해요.
관계 유형 고르기
첫 글자는 선행 작업의 끝점을, 두 번째 글자는 후행 작업의 끝점을 뜻해요. S는 시작, F는 종료예요.
| 유형 | 표현하려는 관계 |
|---|---|
FS | Design이 끝난 뒤 Build를 시작해요 |
SS | Design이 시작한 뒤 Build를 시작해요 |
FF | Design이 끝난 뒤 Build를 끝내요 |
SF | Design이 시작한 뒤 Build를 끝내요 |
일정 계획에서 사용하는 의미이며, 차트가 강제하는 날짜 제한은 아니에요. 실제 날짜가 관계에 맞는지는 앱에서 판단해요.
연결 그리기
- 선행 작업 막대에 마우스를 올리거나 선택해 연결점을 표시해요.
- 시작점이나 종료점에서 후행 작업의 행으로 드래그해요.
- 후행 작업의 시작이나 종료 근처에서 놓아요. 놓기 전에 미리보기에서 연결 유형을 확인할 수 있어요.
대상 행 전체에 놓을 수 있어요. 막대 오른쪽 끝 근처부터 그 오른쪽까지는 종료 영역이고, 나머지는 시작으로 처리해요. 여러 막대가 있는 레인에서는 가장 가까운 막대에 연결해요.
타임라인 가장자리로 드래그하면 스크롤돼요. Escape로 취소할 수 있어요. 호버가 없는 터치 기기에서는 연결점이 계속 보여요.
자기 자신으로의 연결, 같은 방향의 중복 연결, 순환 의존 관계는 만들 수 없어요. 허용되지 않는 대상에는 이유를 표시하고 데이터를 바꾸지 않아요. 이 검사는 그리기로 연결할 때만 적용하므로 가져온 데이터는 앱에서 검증해요.
변경 저장하거나 거절하기
생성하거나 삭제한 연결을 유지하려면 onTasksChange를 상태에 연결해요. 앱에서 특정 관계만 허용하려면 동기 콜백으로 검사해요. 다음 예제는 종료-시작 연결만 허용해요.
<ReactGanttChart
tasks={tasks}
onTasksChange={setTasks}
onDependencyCreate={({ type }) => {
if (type !== 'FS') return false;
}}
/>onDependencyCreate에서 정확히 false를 반환하면 변경을 취소해요. onDependencyDelete도 같은 방식으로 동작해요. 콜백의 Promise를 기다리지 않으므로 서버 검증은 앱의 저장 과정에서 처리해요.
allowLinkCreate와 allowLinkDelete로 연결 편집을 제어해요. 작업의 연결 생성을 끄면 들어오는 연결과 나가는 연결을 모두 막아요. 삭제 권한은 의존 관계 항목을 가진 후행 작업을 기준으로 판단해요.
콜백 시그니처는 props, 권한 우선순위는 상호작용 설정을 참고해요.
연결 삭제하거나 변경하기
화살표를 클릭한 뒤 삭제 버튼을 눌러요. 선택한 상태에서 Delete나 Backspace를 눌러도 삭제해요. Escape는 선택을 해제해요.
작업 막대에 키보드 포커스가 남아 있으면 삭제 키가 그 작업까지 삭제할 수 있어요. 이 동작이 겹치지 않도록 화살표의 삭제 버튼을 사용해요. 자세한 내용은 키보드 조작을 참고해요.
연결 유형을 바꾸려면 tasks 배열의 항목을 수정해요. 기본 유형 편집 UI는 없어요. 선행 작업과 후행 작업 쌍마다 항목을 하나만 유지해요. 삭제할 때는 유형이 달라도 같은 쌍의 항목을 모두 제거해요.
화살표가 보이지 않을 때
양쪽 작업이 모두 보여야 화살표를 그려요. 작업을 필터로 숨기거나 부모를 접으면 의존 관계 데이터는 유지한 채 화살표만 숨겨요. 존재하지 않는 작업 id를 가리키는 항목도 건너뛰어요.
연결 생성에는 포인터가 필요해요. 키보드로 연결을 만들거나 화살표를 선택하는 기능은 없고, 여러 화살표를 함께 선택할 수도 없어요. 경로는 자동으로 정하며 다른 막대를 가로지를 수 있어요.