간트 차트

작업마다 시작 · 끝 날짜를 가로 막대로 그려 겹침과 공백을 보여 주는 표현 전용 차트입니다. 작업지시, 배차, 결재 소요, 프로젝트 일정에 씁니다. 눈금은 기간에 따라 날 · 주(월요일) · 달 단위로 고릅니다. progress 를 주면 막대 안쪽을 그 비율만큼 진하게 채우고, today 를 주면 오늘 선을 긋습니다. 막대 위에는 글자를 얹지 않고 작업 이름은 왼쪽 칸에 둡니다.

상태

10/510/610/710/810/910/1010/11

1호차

2호차

3호차

4호차

날 단위 눈금

10/510/1210/1910/2611/211/9

요구사항 정리

화면 설계

API 개발

오픈

오늘 2026-10-20

진행률 · 오늘 선

활용 방법

프로젝트 일정

끝날은 포함이다. 하루짜리 작업(오픈)은 start 와 end 를 같게 둔다. 막대에 마우스를 올리면 기간과 진행률이 나온다.

Preview

10/510/1210/1910/2611/211/9

요구사항 정리

화면 설계

API 개발

오픈

오늘 2026-10-20

tsx

<GanttChart
  today="2026-10-20"
  tasks={[
    { label: "요구사항 정리", start: "2026-10-01", end: "2026-10-07", progress: 1 },
    { label: "화면 설계", start: "2026-10-06", end: "2026-10-16", progress: 0.7 },
    { label: "오픈", start: "2026-11-09", end: "2026-11-09", tone: "danger" },
  ]}
/>

속성

이름	타입	기본값	설명
tasks	GanttTask[]	-	{ label, start, end, progress?, tone? }. 날짜는 "YYYY-MM-DD", 끝날 포함
today	string	-	오늘 선(YYYY-MM-DD). 기간 안일 때만 그린다
tone	ChartTone	"primary"	작업 tone 이 없을 때의 막대 색
rowH	number	26	행 높이(px)
labelW	number	88	작업 이름 칸 폭(px)