docs: v2-timeline-scheduler 구현 완료 및 상태 업데이트
- v2-timeline-scheduler의 구현 상태를 체크리스트에 반영하였으며, 관련 문서화 작업을 완료하였습니다. - 각 구성 요소의 구현 완료 상태를 명시하고, 향후 작업 계획을 업데이트하였습니다. - 타임라인 스케줄러 컴포넌트를 레지스트리에 추가하여 통합하였습니다.
This commit is contained in:
kjs
159
frontend/lib/registry/components/v2-timeline-scheduler/README.md
Normal file
159
frontend/lib/registry/components/v2-timeline-scheduler/README.md
Normal file
@@ -0,0 +1,159 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user