개념과 용어
차트의 구성 요소와 그 바탕이 되는 작업 데이터를 알아봐요
간트 차트가 처음이라면 막대, 행, 연결선이 무엇을 뜻하는지 여기서 알아볼 수 있어요. 빠른 시작으로 바로 시작하고, 낯선 용어가 나올 때 돌아와도 좋아요.
차트의 구성 요소
- 위쪽 헤더 행이에요. 화면에 들어오는 기간을 스케일 한 단위씩 묶어서 보여줘요.
- 눈금 행이에요. 눈금 하나가 덮는 기간은 스케일이 정하고, 폭이 모자라면 라벨을 솎아내요.
- 요약 행이에요.
hierarchy가 켜져 있고parentId로 자식이 달린 작업이고, 날짜는 자식에게서 와요. - 레인 행이에요.
lane값이 같고 기간이 겹치지 않는 두 작업이 한 행에 실렸어요. - 보통 행이에요. 작업 하나가 막대 하나로 그려져요.
| 용어 | 뜻 |
|---|---|
| 작업(task) | tasks 배열의 항목 하나예요. 이름과 시작일, 종료일을 가져요. |
| 막대(bar) | 작업 기간을 나타내는 가로 블록이에요. 끌어서 작업을 편집해요. |
| 행(row) | 차트의 가로 한 줄이에요. 보통 작업 하나가 들어가요. |
| 작업 목록(task list) | 타임라인 왼쪽에 작업 이름을 보여 주는 선택 사항인 패널이에요. |
| 타임라인(timeline) | 날짜 눈금에 맞춰 막대를 보여 주는 영역이에요. |
| 배율(scale) | 눈금 하나가 나타내는 시간 범위예요. 세밀한 일 단위 보기부터 연 단위 보기까지 있어요. |
| 상세 패널(detail panel) | 선택한 작업의 정보를 보여 주는 선택 사항인 패널이에요. |
날짜 표시를 바꾸려면 타임라인을 참고하면 돼요. 작업 정보를 더 보여 주려면 상세 패널을 참고하면 돼요.
작업 데이터와 앱
앱은 <ReactGanttChart>에 작업 데이터를 넘겨요. 편집이 확정되면 차트는 갱신된 배열을
onTasksChange로 전달해요. 저장 방법은 앱에서 정해요.
**초안(draft)**은 onTaskCreate로 전달되는 새 작업의 후보예요. 앱에서 식별 정보를 채워 넣고
작업 배열에 추가해요. 자세한 흐름은 작업 생성에서 다뤄요.
React 상태에 연결하는 예제는 빠른 시작에 있어요. 필수 필드와 날짜 형식, 앱에서 데이터를 검증할 때 알아둘 내용은 작업 데이터에서 설명해요.
프로젝트 구조
**계층(hierarchy)**은 작업을 프로젝트 단계와 하위 작업으로 묶는 구조예요. parentId는 상위
작업을 가리키고, sequence는 표시 순서를 정해요. hierarchy를 켜면 그룹을 접고 펼칠 수 있어요.
**요약 행(summary row)**은 상위 작업을 나타내요. 날짜와 진행률은 하위 작업에서 계산하며, 이 계산을 **롤업(roll-up)**이라고 해요. 요약 막대를 끌면 그룹 전체가 함께 움직여요. 자세한 내용은 작업 목록과 계층에 있어요.
**레인(lane)**은 여러 작업을 한 행에 나란히 배치해요. 기간이 겹치는 작업은 다른 행에 놓여요. 화면에서 작업을 함께 배치하는 기능이며, 부모 자식 관계를 만들지는 않아요. 배치 규칙은 레인에서 설명해요.
작업 사이의 연결
**의존성(dependency)**은 두 작업을 연결해요. **선행 작업(predecessor)**은 다른 작업이 의존하는 작업이고, **후행 작업(successor)**은 그 작업에 의존하는 작업이에요.
예를 들어 Build에 Design을 가리키는 finish-to-start(FS) 의존성이 있으면 Design이 끝난 뒤
Build를 시작한다는 뜻이에요. 의존성은 Build에 저장하고, targetId에 Design의 ID를 넣어요.
연결선을 그려도 작업 일정이 자동으로 조정되지는 않아요. 네 가지 연결 유형과 동작은 의존성에서 확인할 수 있어요.
근무일
**근무일 달력(working calendar)**은 차트에 적용할 근무 요일과 휴일을 정해요.
workingCalendar를 켜면 드래그 결과가 비근무일에 놓이지 않도록 날짜를 조정할 수 있어요.
타임라인에는 주말과 휴일을 포함한 모든 날짜가 계속 표시돼요. 날짜 조정 규칙은 근무일 달력에 있고, 음영 표시는 타임라인에서 다뤄요.
이제 차트를 추가하려면 빠른 시작으로 이어가면 돼요.