160 lines
5.3 KiB
Markdown
160 lines
5.3 KiB
Markdown
# v2-timeline-scheduler
|
|
|
|
간트차트 형태의 일정/계획 시각화 및 편집 컴포넌트
|
|
|
|
## 개요
|
|
|
|
`v2-timeline-scheduler`는 생산계획, 일정관리 등에서 사용할 수 있는 타임라인 기반의 스케줄러 컴포넌트입니다. 리소스(설비, 작업자 등)별로 스케줄을 시각화하고, 드래그/리사이즈로 일정을 조정할 수 있습니다.
|
|
|
|
## 핵심 기능
|
|
|
|
| 기능 | 설명 |
|
|
|------|------|
|
|
| 타임라인 그리드 | 일/주/월 단위 그리드 표시 |
|
|
| 스케줄 바 | 시작~종료 기간 바 렌더링 |
|
|
| 리소스 행 | 설비/작업자별 행 구분 |
|
|
| 드래그 이동 | 스케줄 바 드래그로 날짜 변경 |
|
|
| 리사이즈 | 바 양쪽 핸들로 기간 조정 |
|
|
| 줌 레벨 | 일/주/월 단위 전환 |
|
|
| 진행률 표시 | 바 내부 진행률 표시 |
|
|
| 오늘 표시선 | 현재 날짜 표시선 |
|
|
|
|
## 사용법
|
|
|
|
### 기본 사용
|
|
|
|
```tsx
|
|
import { TimelineSchedulerComponent } from "@/lib/registry/components/v2-timeline-scheduler";
|
|
|
|
<TimelineSchedulerComponent
|
|
config={{
|
|
selectedTable: "production_schedule",
|
|
resourceTable: "equipment",
|
|
fieldMapping: {
|
|
id: "id",
|
|
resourceId: "equipment_id",
|
|
title: "plan_name",
|
|
startDate: "start_date",
|
|
endDate: "end_date",
|
|
status: "status",
|
|
progress: "progress",
|
|
},
|
|
resourceFieldMapping: {
|
|
id: "id",
|
|
name: "equipment_name",
|
|
},
|
|
defaultZoomLevel: "day",
|
|
editable: true,
|
|
}}
|
|
onScheduleClick={(event) => {
|
|
console.log("클릭된 스케줄:", event.schedule);
|
|
}}
|
|
onDragEnd={(event) => {
|
|
console.log("드래그 완료:", event);
|
|
}}
|
|
/>
|
|
```
|
|
|
|
### 설정 옵션
|
|
|
|
| 옵션 | 타입 | 기본값 | 설명 |
|
|
|------|------|--------|------|
|
|
| `selectedTable` | string | - | 스케줄 데이터 테이블명 |
|
|
| `resourceTable` | string | - | 리소스 테이블명 |
|
|
| `fieldMapping` | object | - | 스케줄 필드 매핑 |
|
|
| `resourceFieldMapping` | object | - | 리소스 필드 매핑 |
|
|
| `defaultZoomLevel` | "day" \| "week" \| "month" | "day" | 기본 줌 레벨 |
|
|
| `editable` | boolean | true | 편집 가능 여부 |
|
|
| `draggable` | boolean | true | 드래그 이동 가능 |
|
|
| `resizable` | boolean | true | 리사이즈 가능 |
|
|
| `rowHeight` | number | 50 | 행 높이 (px) |
|
|
| `headerHeight` | number | 60 | 헤더 높이 (px) |
|
|
| `resourceColumnWidth` | number | 150 | 리소스 컬럼 너비 (px) |
|
|
| `showTodayLine` | boolean | true | 오늘 표시선 |
|
|
| `showProgress` | boolean | true | 진행률 표시 |
|
|
| `showToolbar` | boolean | true | 툴바 표시 |
|
|
| `height` | number \| string | 500 | 컴포넌트 높이 |
|
|
|
|
### 필드 매핑
|
|
|
|
스케줄 테이블의 컬럼을 매핑합니다:
|
|
|
|
```typescript
|
|
fieldMapping: {
|
|
id: "id", // 필수: 고유 ID
|
|
resourceId: "equipment_id", // 필수: 리소스 ID (FK)
|
|
title: "plan_name", // 필수: 표시 제목
|
|
startDate: "start_date", // 필수: 시작일
|
|
endDate: "end_date", // 필수: 종료일
|
|
status: "status", // 선택: 상태
|
|
progress: "progress", // 선택: 진행률 (0-100)
|
|
color: "color", // 선택: 바 색상
|
|
}
|
|
```
|
|
|
|
### 이벤트
|
|
|
|
| 이벤트 | 파라미터 | 설명 |
|
|
|--------|----------|------|
|
|
| `onScheduleClick` | `{ schedule, resource }` | 스케줄 클릭 |
|
|
| `onCellClick` | `{ resourceId, date }` | 빈 셀 클릭 |
|
|
| `onDragEnd` | `{ scheduleId, newStartDate, newEndDate }` | 드래그 완료 |
|
|
| `onResizeEnd` | `{ scheduleId, newStartDate, newEndDate, direction }` | 리사이즈 완료 |
|
|
| `onAddSchedule` | `(resourceId, date)` | 추가 버튼 클릭 |
|
|
|
|
### 상태별 색상
|
|
|
|
기본 상태별 색상:
|
|
|
|
| 상태 | 색상 | 의미 |
|
|
|------|------|------|
|
|
| `planned` | 파랑 (#3b82f6) | 계획됨 |
|
|
| `in_progress` | 주황 (#f59e0b) | 진행중 |
|
|
| `completed` | 초록 (#10b981) | 완료 |
|
|
| `delayed` | 빨강 (#ef4444) | 지연 |
|
|
| `cancelled` | 회색 (#6b7280) | 취소 |
|
|
|
|
## 파일 구조
|
|
|
|
```
|
|
v2-timeline-scheduler/
|
|
├── index.ts # Definition
|
|
├── types.ts # 타입 정의
|
|
├── config.ts # 기본 설정값
|
|
├── TimelineSchedulerComponent.tsx # 메인 컴포넌트
|
|
├── TimelineSchedulerConfigPanel.tsx # 설정 패널
|
|
├── TimelineSchedulerRenderer.tsx # 레지스트리 등록
|
|
├── README.md # 문서
|
|
├── components/
|
|
│ ├── index.ts
|
|
│ ├── TimelineHeader.tsx # 날짜 헤더
|
|
│ ├── ScheduleBar.tsx # 스케줄 바
|
|
│ └── ResourceRow.tsx # 리소스 행
|
|
└── hooks/
|
|
└── useTimelineData.ts # 데이터 관리 훅
|
|
```
|
|
|
|
## v2-table-list와의 차이점
|
|
|
|
| 특성 | v2-table-list | v2-timeline-scheduler |
|
|
|------|---------------|----------------------|
|
|
| 표현 방식 | 행 기반 테이블 | 시간축 기반 간트차트 |
|
|
| 데이터 구조 | 단순 목록 | 리소스 + 스케줄 (2개 테이블) |
|
|
| 편집 방식 | 폼 입력 | 드래그/리사이즈 |
|
|
| 시간 표현 | 텍스트 | 시각적 바 |
|
|
| 용도 | 일반 데이터 | 일정/계획 관리 |
|
|
|
|
## 향후 개선 사항
|
|
|
|
- [ ] 충돌 감지 및 표시
|
|
- [ ] 가상 스크롤 (대량 데이터)
|
|
- [ ] 마일스톤 표시
|
|
- [ ] 의존성 연결선
|
|
- [ ] 드래그로 새 스케줄 생성
|
|
- [ ] 컨텍스트 메뉴
|
|
|
|
---
|
|
|
|
**버전**: 2.0.0
|
|
**최종 수정**: 2026-01-30
|