ERP-node/frontend/lib/registry/components/pivot-grid/PLAN.md

PivotGrid 컴포넌트 전체 구현 계획

개요

DevExtreme PivotGrid (https://js.devexpress.com/React/Demos/WidgetsGallery/Demo/PivotGrid/Overview/FluentBlueLight/) 수준의 다차원 데이터 분석 컴포넌트 구현

현재 상태: ✅ 모든 기능 구현 완료!

---

구현된 기능 목록

1. 기본 피벗 테이블 ✅

• 피벗 테이블 렌더링
• 행/열 확장/축소
• 합계/소계 표시
• 전체 확장/축소 버튼

2. 필드 패널 (드래그앤드롭) ✅

• 상단에 4개 영역 표시 (필터, 열, 행, 데이터)
• 각 영역에 배치된 필드 칩/태그 표시
• 필드 제거 버튼 (X)
• 필드 간 드래그 앤 드롭 지원 (@dnd-kit 사용)
• 영역 간 필드 이동
• 같은 영역 내 순서 변경
• 드래그 시 시각적 피드백

3. 필드 선택기 (모달) ✅

• 모달 열기/닫기
• 사용 가능한 필드 목록
• 필드 검색 기능
• 필드별 영역 선택 드롭다운
• 데이터 타입 아이콘 표시
• 집계 함수 선택 (데이터 영역)
• 표시 모드 선택 (데이터 영역)

4. 데이터 요약 (누계, % 모드) ✅

• 절대값 표시 (기본)
• 행 총계 대비 %
• 열 총계 대비 %
• 전체 총계 대비 %
• 행/열 방향 누계
• 이전 대비 차이
• 이전 대비 % 차이

5. 필터링 ✅

• 필터 팝업 컴포넌트 (FilterPopup)
• 값 검색 기능
• 체크박스 기반 값 선택
• 포함/제외 모드
• 전체 선택/해제
• 선택된 항목 수 표시

6. Drill Down ✅

• 셀 더블클릭 시 상세 데이터 모달
• 원본 데이터 테이블 표시
• 검색 기능
• 정렬 기능
• 페이지네이션
• CSV/Excel 내보내기

7. Virtual Scrolling ✅

• useVirtualScroll 훅 (행)
• useVirtualColumnScroll 훅 (열)
• useVirtual2DScroll 훅 (행+열)
• overscan 버퍼 지원

8. Excel 내보내기 ✅

• xlsx 라이브러리 사용
• 피벗 데이터 Excel 내보내기
• Drill Down 데이터 Excel 내보내기
• CSV 내보내기 (기본)
• 스타일링 (헤더, 데이터, 총계)
• 숫자 포맷

9. 차트 통합 ✅

• recharts 라이브러리 사용
• 막대 차트
• 누적 막대 차트
• 선 차트
• 영역 차트
• 파이 차트
• 범례 표시
• 커스텀 툴팁
• 차트 토글 버튼

10. 조건부 서식 (Conditional Formatting) ✅

• Color Scale (색상 그라데이션)
• Data Bar (데이터 막대)
• Icon Set (아이콘)
• Cell Value (조건 기반 스타일)
• ConfigPanel에서 설정 UI

11. 상태 저장/복원 ✅

• usePivotState 훅
• localStorage/sessionStorage 지원
• 자동 저장 (디바운스)

12. ConfigPanel 고도화 ✅

• 데이터 소스 설정 (테이블 선택)
• 필드별 영역 설정 (행, 열, 데이터, 필터)
• 총계 옵션 설정
• 스타일 설정 (테마, 교차 색상 등)
• 내보내기 설정 (Excel/CSV)
• 차트 설정 UI
• 필드 선택기 설정 UI
• 조건부 서식 설정 UI
• 크기 설정

---

파일 구조

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