소개 | @jaeungkim/gantt-chart

만들 수 있는 기능과 앱에 차트를 연동하는 방식을 소개해요.

@jaeungkim/gantt-chart로 React 앱에 편집 가능한 프로젝트 일정이나 릴리스 로드맵을 만드세요. 차트는 타임라인과 편집 동작을 제공하고 앱은 작업 데이터를 전달하고 변경 사항을 저장해요.

어떤 기능을 만들 수 있나요?

작업을 옮기고 날짜와 진행률을 바꾸고 의존성 화살표로 작업을 연결할 수 있어요. 계층으로 프로젝트 단계를 묶거나 레인으로 한 행에 여러 막대를 배치할 수 있어요.

다섯 가지 타임라인 배율과 비근무일 음영, 선택적으로 켜는 근무일 스냅, 라이트 테마와 다크 테마를 제공해요. 행과 시간 셀을 가상화해 한 번에 렌더링하는 범위를 줄여요. 주요 작업은 키보드로 편집할 수 있고 접근성의 남은 한계도 문서에서 확인할 수 있어요.

플레이그라운드에서 직접 사용해 보거나 빠른 시작을 따라 앱에 차트를 추가하세요.

작업 배열을 차트에 전달하고 onTasksChange로 편집 결과를 받아요. 콜백이 넘겨주는 변경된 배열을 React 상태에 반영하면 돼요. 이벤트와 저장에서 앱에 연결하는 예제를 볼 수 있어요.

차트는 마운트된 동안 편집에 필요한 임시 상태를 유지해요. 서버나 브라우저 저장소에 데이터를 저장하지는 않아요. 데이터 불러오기와 저장, 검증, 협업이나 실행 취소 기능은 앱에서 구현해요.

차트 주변의 컨트롤도 앱에서 구성해요. 배율 선택이나 오늘로 이동하는 버튼은 ref API로 만들 수 있어요. 작업 필드를 편집하려면 상세 패널을 사용할 수 있어요.

React 18과 19를 지원하고 TypeScript 타입을 제공해요. MIT 라이선스이므로 상용 프로젝트에서도 사용할 수 있어요.

연동을 계획할 때 아래 지원 범위를 확인하세요.

의존성은 작업의 관계를 표시해요. 선행 작업을 옮겨도 후행 작업의 일정이 자동으로 바뀌지는 않아요. 의존성을 참고하세요.
레인은 막대를 시각적으로 묶어요. 리소스 배정과 부하 분산, 비용 계산 기능은 제공하지 않아요.
PDF와 이미지, 스프레드시트 내보내기나 전용 인쇄 레이아웃은 제공하지 않아요.
날짜 라벨은 현지화할 수 있어요. 내장 UI 문구와 알림은 영어이고 RTL 레이아웃은 지원하지 않아요. 로케일과 날짜 형식과 키보드와 스크린 리더를 참고하세요.

차트 밖에서 데이터를 처리할 때 쓸 수 있는 트리와 달력 헬퍼도 제공해요.

빠른 시작부터 따라 해 보세요. 용어가 궁금하면 개념으로 돌아오면 돼요. 질문이나 참여 방법은 커뮤니티와 기여에서 확인하세요.