160 lines
4.8 KiB
Markdown
160 lines
4.8 KiB
Markdown
|
# PivotGrid 컴포넌트 전체 구현 계획
|
||
|
|
|
||
|
|
## 개요
|
||
|
|
DevExtreme PivotGrid (https://js.devexpress.com/React/Demos/WidgetsGallery/Demo/PivotGrid/Overview/FluentBlueLight/) 수준의 다차원 데이터 분석 컴포넌트 구현
|
||
|
|
|
||
|
|
## 현재 상태: ✅ 모든 기능 구현 완료!
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 구현된 기능 목록
|
||
|
|
|
||
|
|
### 1. 기본 피벗 테이블 ✅
|
||
|
|
- [x] 피벗 테이블 렌더링
|
||
|
|
- [x] 행/열 확장/축소
|
||
|
|
- [x] 합계/소계 표시
|
||
|
|
- [x] 전체 확장/축소 버튼
|
||
|
|
|
||
|
|
### 2. 필드 패널 (드래그앤드롭) ✅
|
||
|
|
- [x] 상단에 4개 영역 표시 (필터, 열, 행, 데이터)
|
||
|
|
- [x] 각 영역에 배치된 필드 칩/태그 표시
|
||
|
|
- [x] 필드 제거 버튼 (X)
|
||
|
|
- [x] 필드 간 드래그 앤 드롭 지원 (@dnd-kit 사용)
|
||
|
|
- [x] 영역 간 필드 이동
|
||
|
|
- [x] 같은 영역 내 순서 변경
|
||
|
|
- [x] 드래그 시 시각적 피드백
|
||
|
|
|
||
|
|
### 3. 필드 선택기 (모달) ✅
|
||
|
|
- [x] 모달 열기/닫기
|
||
|
|
- [x] 사용 가능한 필드 목록
|
||
|
|
- [x] 필드 검색 기능
|
||
|
|
- [x] 필드별 영역 선택 드롭다운
|
||
|
|
- [x] 데이터 타입 아이콘 표시
|
||
|
|
- [x] 집계 함수 선택 (데이터 영역)
|
||
|
|
- [x] 표시 모드 선택 (데이터 영역)
|
||
|
|
|
||
|
|
### 4. 데이터 요약 (누계, % 모드) ✅
|
||
|
|
- [x] 절대값 표시 (기본)
|
||
|
|
- [x] 행 총계 대비 %
|
||
|
|
- [x] 열 총계 대비 %
|
||
|
|
- [x] 전체 총계 대비 %
|
||
|
|
- [x] 행/열 방향 누계
|
||
|
|
- [x] 이전 대비 차이
|
||
|
|
- [x] 이전 대비 % 차이
|
||
|
|
|
||
|
|
### 5. 필터링 ✅
|
||
|
|
- [x] 필터 팝업 컴포넌트 (FilterPopup)
|
||
|
|
- [x] 값 검색 기능
|
||
|
|
- [x] 체크박스 기반 값 선택
|
||
|
|
- [x] 포함/제외 모드
|
||
|
|
- [x] 전체 선택/해제
|
||
|
|
- [x] 선택된 항목 수 표시
|
||
|
|
|
||
|
|
### 6. Drill Down ✅
|
||
|
|
- [x] 셀 더블클릭 시 상세 데이터 모달
|
||
|
|
- [x] 원본 데이터 테이블 표시
|
||
|
|
- [x] 검색 기능
|
||
|
|
- [x] 정렬 기능
|
||
|
|
- [x] 페이지네이션
|
||
|
|
- [x] CSV/Excel 내보내기
|
||
|
|
|
||
|
|
### 7. Virtual Scrolling ✅
|
||
|
|
- [x] useVirtualScroll 훅 (행)
|
||
|
|
- [x] useVirtualColumnScroll 훅 (열)
|
||
|
|
- [x] useVirtual2DScroll 훅 (행+열)
|
||
|
|
- [x] overscan 버퍼 지원
|
||
|
|
|
||
|
|
### 8. Excel 내보내기 ✅
|
||
|
|
- [x] xlsx 라이브러리 사용
|
||
|
|
- [x] 피벗 데이터 Excel 내보내기
|
||
|
|
- [x] Drill Down 데이터 Excel 내보내기
|
||
|
|
- [x] CSV 내보내기 (기본)
|
||
|
|
- [x] 스타일링 (헤더, 데이터, 총계)
|
||
|
|
- [x] 숫자 포맷
|
||
|
|
|
||
|
|
### 9. 차트 통합 ✅
|
||
|
|
- [x] recharts 라이브러리 사용
|
||
|
|
- [x] 막대 차트
|
||
|
|
- [x] 누적 막대 차트
|
||
|
|
- [x] 선 차트
|
||
|
|
- [x] 영역 차트
|
||
|
|
- [x] 파이 차트
|
||
|
|
- [x] 범례 표시
|
||
|
|
- [x] 커스텀 툴팁
|
||
|
|
- [x] 차트 토글 버튼
|
||
|
|
|
||
|
|
### 10. 조건부 서식 (Conditional Formatting) ✅
|
||
|
|
- [x] Color Scale (색상 그라데이션)
|
||
|
|
- [x] Data Bar (데이터 막대)
|
||
|
|
- [x] Icon Set (아이콘)
|
||
|
|
- [x] Cell Value (조건 기반 스타일)
|
||
|
|
- [x] ConfigPanel에서 설정 UI
|
||
|
|
|
||
|
|
### 11. 상태 저장/복원 ✅
|
||
|
|
- [x] usePivotState 훅
|
||
|
|
- [x] localStorage/sessionStorage 지원
|
||
|
|
- [x] 자동 저장 (디바운스)
|
||
|
|
|
||
|
|
### 12. ConfigPanel 고도화 ✅
|
||
|
|
- [x] 데이터 소스 설정 (테이블 선택)
|
||
|
|
- [x] 필드별 영역 설정 (행, 열, 데이터, 필터)
|
||
|
|
- [x] 총계 옵션 설정
|
||
|
|
- [x] 스타일 설정 (테마, 교차 색상 등)
|
||
|
|
- [x] 내보내기 설정 (Excel/CSV)
|
||
|
|
- [x] 차트 설정 UI
|
||
|
|
- [x] 필드 선택기 설정 UI
|
||
|
|
- [x] 조건부 서식 설정 UI
|
||
|
|
- [x] 크기 설정
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 파일 구조
|
||
|
|
|
||
|
|
```
|
||
|
|
pivot-grid/
|
||
|
|
├── components/
|
||
|
|
│ ├── FieldPanel.tsx # 필드 패널 (드래그앤드롭)
|
||
|
|
│ ├── FieldChooser.tsx # 필드 선택기 모달
|
||
|
|
│ ├── DrillDownModal.tsx # Drill Down 모달
|
||
|
|
│ ├── FilterPopup.tsx # 필터 팝업
|
||
|
|
│ ├── PivotChart.tsx # 차트 컴포넌트
|
||
|
|
│ └── index.ts # 내보내기
|
||
|
|
├── hooks/
|
||
|
|
│ ├── useVirtualScroll.ts # 가상 스크롤 훅
|
||
|
|
│ ├── usePivotState.ts # 상태 저장 훅
|
||
|
|
│ └── index.ts # 내보내기
|
||
|
|
├── utils/
|
||
|
|
│ ├── aggregation.ts # 집계 함수
|
||
|
|
│ ├── pivotEngine.ts # 피벗 엔진
|
||
|
|
│ ├── exportExcel.ts # Excel 내보내기
|
||
|
|
│ ├── conditionalFormat.ts # 조건부 서식
|
||
|
|
│ └── index.ts # 내보내기
|
||
|
|
├── types.ts # 타입 정의
|
||
|
|
├── PivotGridComponent.tsx # 메인 컴포넌트
|
||
|
|
├── PivotGridConfigPanel.tsx # 설정 패널
|
||
|
|
├── PivotGridRenderer.tsx # 렌더러
|
||
|
|
├── index.ts # 모듈 내보내기
|
||
|
|
└── PLAN.md # 이 파일
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 후순위 기능 (선택적)
|
||
|
|
|
||
|
|
다음 기능들은 필요 시 추가 구현 가능:
|
||
|
|
|
||
|
|
### 데이터 바인딩 확장
|
||
|
|
- [ ] OLAP Data Source 연동 (복잡)
|
||
|
|
- [ ] GraphQL 연동
|
||
|
|
- [ ] 실시간 데이터 업데이트 (WebSocket)
|
||
|
|
|
||
|
|
### 고급 기능
|
||
|
|
- [ ] 피벗 테이블 병합 (여러 데이터 소스)
|
||
|
|
- [ ] 계산 필드 (커스텀 수식)
|
||
|
|
- [ ] 데이터 정렬 옵션 강화
|
||
|
|
- [ ] 그룹핑 옵션 (날짜 그룹핑 등)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 완료일: 2026-01-08
|