React 앱에서 직접 편집하는 프로젝트 타임라인
작업을 끌어 옮기고 의존성을 연결하고 프로젝트를 계층형 타임라인으로 정리하세요. 근무일 달력과 키보드 편집, 라이트와 다크 테마를 기본으로 제공해요.
오픈 소스, MIT 라이선스, React 18과 19 지원, TypeScript 타입 제공
pnpm add @jaeungkim/gantt-chart직접 해보기
아래 차트는 배포된 실제 컴포넌트예요. 막대를 끌고 가장자리를 당기고 두 행 사이에 링크를 그어 보세요.
타임라인에서 바로 편집
막대를 끌어 옮기고 가장자리를 당겨 크기를 조절해요. 핸들을 끌면 진행률이 정해지고 화살표를 그으면 두 행이 연결돼요. 모든 제스처가 다음 tasks 배열 전체로 onTasksChange를 호출해요.
키보드와 스크린 리더
로빙 tabindex와 방향키 이동을 지원하는 ARIA treegrid예요. 키보드로 만든 편집은 role="status" 요소로 알려요. 남은 한계는 접근성 문서에 정리해 뒀어요.
더 큰 계획도 한눈에
행과 타임라인 눈금을 모두 가상화해요. 화면에 보이는 범위와 오버스캔만큼만 렌더링해요.
프로젝트 단계를 한 번에 이동
작업을 접고 펼칠 수 있는 계층으로 정리하세요. 요약 행을 옮기면 하위 작업이 함께 움직여요.
근무일에 맞춘 일정
근무 요일을 정하고 휴일마다 이름과 색을 지정하세요. workingCalendar를 켜면 비근무일에 놓은 막대가 다음 근무일에 놓여요.
앱에 어울리는 디자인
모든 색을 CSS 커스텀 속성에서 읽어요. theme prop을 넘기지 않으면 호스트 페이지의 color-scheme을 그대로 따라요.
문서 읽기
모든 prop과 가이드, 레퍼런스 페이지를 영어와 한국어로 제공해요.