366 lines
13 KiB
Markdown
366 lines
13 KiB
Markdown
# 테이블 그룹핑 기능 구현 계획서
|
||
|
||
## 📋 개요
|
||
|
||
테이블 리스트 컴포넌트와 플로우 위젯에 그룹핑 기능을 추가하여, 사용자가 선택한 컬럼(들)을 기준으로 데이터를 그룹화하여 표시합니다.
|
||
|
||
## 🎯 핵심 요구사항
|
||
|
||
### 1. 기능 요구사항
|
||
- ✅ 그룹핑할 컬럼을 다중 선택 가능
|
||
- ✅ 선택한 컬럼 순서대로 계층적 그룹화
|
||
- ✅ 그룹 헤더에 그룹 정보와 데이터 개수 표시
|
||
- ✅ 그룹 펼치기/접기 기능
|
||
- ✅ localStorage에 그룹 설정 저장/복원
|
||
- ✅ 그룹 해제 기능
|
||
|
||
### 2. 적용 대상
|
||
- TableListComponent (`frontend/lib/registry/components/table-list/TableListComponent.tsx`)
|
||
- FlowWidget (`frontend/components/screen/widgets/FlowWidget.tsx`)
|
||
|
||
## 🎨 UI 디자인
|
||
|
||
### 그룹 설정 다이얼로그
|
||
|
||
```tsx
|
||
┌─────────────────────────────────────┐
|
||
│ 📊 그룹 설정 │
|
||
│ 데이터를 그룹화할 컬럼을 선택하세요 │
|
||
├─────────────────────────────────────┤
|
||
│ │
|
||
│ [x] 통화 │
|
||
│ [ ] 단위 │
|
||
│ [ ] 품목코드 │
|
||
│ [ ] 품목명 │
|
||
│ [ ] 규격 │
|
||
│ │
|
||
│ 💡 선택된 그룹: 통화 │
|
||
│ │
|
||
├─────────────────────────────────────┤
|
||
│ [취소] [적용] │
|
||
└─────────────────────────────────────┘
|
||
```
|
||
|
||
### 그룹화된 테이블 표시
|
||
|
||
```tsx
|
||
┌─────────────────────────────────────────────────────┐
|
||
│ 📦 판매품목 목록 총 3개 [🎨 그룹: 통화 ×] │
|
||
├─────────────────────────────────────────────────────┤
|
||
│ │
|
||
│ ▼ 통화: KRW > 단위: EA (2건) │
|
||
│ ┌─────────────────────────────────────────────┐ │
|
||
│ │ 품목코드 │ 품목명 │ 규격 │ 단위 │ │
|
||
│ ├─────────────────────────────────────────────┤ │
|
||
│ │ SALE-001 │ 볼트 M8x20 │ M8x20 │ EA │ │
|
||
│ │ SALE-004 │ 스프링 와셔 │ M10 │ EA │ │
|
||
│ └─────────────────────────────────────────────┘ │
|
||
│ │
|
||
│ ▼ 통화: USD > 단위: EA (1건) │
|
||
│ ┌─────────────────────────────────────────────┐ │
|
||
│ │ 품목코드 │ 품목명 │ 규격 │ 단위 │ │
|
||
│ ├─────────────────────────────────────────────┤ │
|
||
│ │ SALE-002 │ 너트 M8 │ M8 │ EA │ │
|
||
│ └─────────────────────────────────────────────┘ │
|
||
│ │
|
||
└─────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
## 🔧 기술 구현
|
||
|
||
### 1. 상태 관리
|
||
|
||
```typescript
|
||
// 그룹 설정 관련 상태
|
||
const [groupByColumns, setGroupByColumns] = useState<string[]>([]); // 그룹화할 컬럼 목록
|
||
const [isGroupSettingOpen, setIsGroupSettingOpen] = useState(false); // 그룹 설정 다이얼로그
|
||
const [collapsedGroups, setCollapsedGroups] = useState<Set<string>>(new Set()); // 접힌 그룹
|
||
```
|
||
|
||
### 2. 데이터 그룹화 로직
|
||
|
||
```typescript
|
||
interface GroupedData {
|
||
groupKey: string; // "통화:KRW > 단위:EA"
|
||
groupValues: Record<string, any>; // { 통화: "KRW", 단위: "EA" }
|
||
items: any[]; // 그룹에 속한 데이터
|
||
count: number; // 항목 개수
|
||
}
|
||
|
||
const groupDataByColumns = (
|
||
data: any[],
|
||
groupColumns: string[]
|
||
): GroupedData[] => {
|
||
if (groupColumns.length === 0) return [];
|
||
|
||
const grouped = new Map<string, any[]>();
|
||
|
||
data.forEach(item => {
|
||
// 그룹 키 생성: "통화:KRW > 단위:EA"
|
||
const keyParts = groupColumns.map(col => `${col}:${item[col] || '-'}`);
|
||
const groupKey = keyParts.join(' > ');
|
||
|
||
if (!grouped.has(groupKey)) {
|
||
grouped.set(groupKey, []);
|
||
}
|
||
grouped.get(groupKey)!.push(item);
|
||
});
|
||
|
||
return Array.from(grouped.entries()).map(([groupKey, items]) => {
|
||
const groupValues: Record<string, any> = {};
|
||
groupColumns.forEach(col => {
|
||
groupValues[col] = items[0]?.[col];
|
||
});
|
||
|
||
return {
|
||
groupKey,
|
||
groupValues,
|
||
items,
|
||
count: items.length,
|
||
};
|
||
});
|
||
};
|
||
```
|
||
|
||
### 3. localStorage 저장/로드
|
||
|
||
```typescript
|
||
// 저장 키
|
||
const groupSettingKey = useMemo(() => {
|
||
if (!tableConfig.selectedTable) return null;
|
||
return `table-list-group-${tableConfig.selectedTable}`;
|
||
}, [tableConfig.selectedTable]);
|
||
|
||
// 그룹 설정 저장
|
||
const saveGroupSettings = useCallback(() => {
|
||
if (!groupSettingKey) return;
|
||
|
||
try {
|
||
localStorage.setItem(groupSettingKey, JSON.stringify(groupByColumns));
|
||
setIsGroupSettingOpen(false);
|
||
toast.success("그룹 설정이 저장되었습니다");
|
||
} catch (error) {
|
||
console.error("그룹 설정 저장 실패:", error);
|
||
toast.error("설정 저장에 실패했습니다");
|
||
}
|
||
}, [groupSettingKey, groupByColumns]);
|
||
|
||
// 그룹 설정 로드
|
||
useEffect(() => {
|
||
if (!groupSettingKey || visibleColumns.length === 0) return;
|
||
|
||
try {
|
||
const saved = localStorage.getItem(groupSettingKey);
|
||
if (saved) {
|
||
const savedGroups = JSON.parse(saved);
|
||
setGroupByColumns(savedGroups);
|
||
}
|
||
} catch (error) {
|
||
console.error("그룹 설정 불러오기 실패:", error);
|
||
}
|
||
}, [groupSettingKey, visibleColumns]);
|
||
```
|
||
|
||
### 4. 그룹 헤더 렌더링
|
||
|
||
```tsx
|
||
const renderGroupHeader = (group: GroupedData) => {
|
||
const isCollapsed = collapsedGroups.has(group.groupKey);
|
||
|
||
return (
|
||
<div
|
||
className="bg-muted/50 flex items-center gap-3 border-b p-3 cursor-pointer hover:bg-muted"
|
||
onClick={() => toggleGroupCollapse(group.groupKey)}
|
||
>
|
||
{/* 펼치기/접기 아이콘 */}
|
||
{isCollapsed ? (
|
||
<ChevronRight className="h-4 w-4" />
|
||
) : (
|
||
<ChevronDown className="h-4 w-4" />
|
||
)}
|
||
|
||
{/* 그룹 정보 */}
|
||
<span className="font-medium text-sm">
|
||
{groupByColumns.map((col, idx) => (
|
||
<span key={col}>
|
||
{idx > 0 && <span className="text-muted-foreground"> > </span>}
|
||
<span className="text-muted-foreground">{columnLabels[col] || col}:</span>
|
||
{" "}
|
||
<span className="text-foreground">{group.groupValues[col]}</span>
|
||
</span>
|
||
))}
|
||
</span>
|
||
|
||
{/* 항목 개수 */}
|
||
<span className="text-muted-foreground text-xs ml-auto">
|
||
({group.count}건)
|
||
</span>
|
||
</div>
|
||
);
|
||
};
|
||
```
|
||
|
||
### 5. 그룹 설정 다이얼로그
|
||
|
||
```tsx
|
||
<Dialog open={isGroupSettingOpen} onOpenChange={setIsGroupSettingOpen}>
|
||
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
||
<DialogHeader>
|
||
<DialogTitle className="text-base sm:text-lg">그룹 설정</DialogTitle>
|
||
<DialogDescription className="text-xs sm:text-sm">
|
||
데이터를 그룹화할 컬럼을 선택하세요. 여러 컬럼을 선택하면 계층적으로 그룹화됩니다.
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="space-y-3 sm:space-y-4">
|
||
{/* 컬럼 목록 */}
|
||
<div className="max-h-[50vh] space-y-2 overflow-y-auto rounded border p-2">
|
||
{visibleColumns
|
||
.filter((col) => col.columnName !== "__checkbox__")
|
||
.map((col) => (
|
||
<div key={col.columnName} className="hover:bg-muted/50 flex items-center gap-3 rounded p-2">
|
||
<Checkbox
|
||
id={`group-${col.columnName}`}
|
||
checked={groupByColumns.includes(col.columnName)}
|
||
onCheckedChange={() => toggleGroupColumn(col.columnName)}
|
||
/>
|
||
<Label
|
||
htmlFor={`group-${col.columnName}`}
|
||
className="flex-1 cursor-pointer text-xs font-normal sm:text-sm"
|
||
>
|
||
{columnLabels[col.columnName] || col.displayName || col.columnName}
|
||
</Label>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 선택된 그룹 안내 */}
|
||
<div className="text-muted-foreground bg-muted/30 rounded p-3 text-xs">
|
||
{groupByColumns.length === 0 ? (
|
||
<span>그룹화할 컬럼을 선택하세요</span>
|
||
) : (
|
||
<span>
|
||
선택된 그룹: <span className="text-primary font-semibold">
|
||
{groupByColumns.map((col) => columnLabels[col] || col).join(" → ")}
|
||
</span>
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<DialogFooter className="gap-2 sm:gap-0">
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => setIsGroupSettingOpen(false)}
|
||
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
||
>
|
||
취소
|
||
</Button>
|
||
<Button onClick={saveGroupSettings} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
|
||
적용
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
```
|
||
|
||
### 6. 그룹 해제 버튼
|
||
|
||
```tsx
|
||
{/* 헤더 영역 */}
|
||
<div className="flex items-center justify-between">
|
||
<h2>{tableLabel}</h2>
|
||
<div className="flex items-center gap-2">
|
||
{/* 그룹 표시 배지 */}
|
||
{groupByColumns.length > 0 && (
|
||
<div className="bg-primary/10 text-primary flex items-center gap-2 rounded px-3 py-1 text-xs">
|
||
<span>그룹: {groupByColumns.map(col => columnLabels[col] || col).join(", ")}</span>
|
||
<button
|
||
onClick={() => {
|
||
setGroupByColumns([]);
|
||
localStorage.removeItem(groupSettingKey || "");
|
||
toast.success("그룹이 해제되었습니다");
|
||
}}
|
||
className="hover:bg-primary/20 rounded p-0.5"
|
||
>
|
||
<X className="h-3 w-3" />
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* 그룹 설정 버튼 */}
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setIsGroupSettingOpen(true)}
|
||
>
|
||
<Layers className="mr-2 h-4 w-4" />
|
||
그룹 설정
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
## 📝 구현 순서
|
||
|
||
### Phase 1: TableListComponent 구현
|
||
1. ✅ 상태 관리 추가 (groupByColumns, isGroupSettingOpen, collapsedGroups)
|
||
2. ✅ 그룹화 로직 구현 (groupDataByColumns 함수)
|
||
3. ✅ localStorage 저장/로드 로직
|
||
4. ✅ 그룹 설정 다이얼로그 UI
|
||
5. ✅ 그룹 헤더 렌더링
|
||
6. ✅ 그룹별 데이터 렌더링
|
||
7. ✅ 그룹 해제 기능
|
||
|
||
### Phase 2: FlowWidget 구현
|
||
1. ✅ TableListComponent와 동일한 로직 적용
|
||
2. ✅ 스텝 데이터에 그룹화 적용
|
||
3. ✅ UI 통일성 유지
|
||
|
||
### Phase 3: 테스트 및 최적화
|
||
1. ✅ 다중 그룹 계층 테스트
|
||
2. ✅ 대량 데이터 성능 테스트
|
||
3. ✅ localStorage 저장/복원 테스트
|
||
4. ✅ 그룹 펼치기/접기 테스트
|
||
|
||
## 🎯 예상 효과
|
||
|
||
### 사용자 경험 개선
|
||
- 데이터를 논리적으로 그룹화하여 가독성 향상
|
||
- 대량 데이터를 효율적으로 탐색 가능
|
||
- 사용자 정의 뷰 제공
|
||
|
||
### 데이터 분석 지원
|
||
- 카테고리별 데이터 분석 용이
|
||
- 통계 정보 제공 (그룹별 개수)
|
||
- 계층적 데이터 구조 시각화
|
||
|
||
## ⚠️ 주의사항
|
||
|
||
### 성능 고려사항
|
||
- 그룹화는 클라이언트 측에서 수행
|
||
- 대량 데이터의 경우 성능 저하 가능
|
||
- 필요시 서버 측 그룹화로 전환 검토
|
||
|
||
### 사용성
|
||
- 그룹화 해제가 쉽게 가능해야 함
|
||
- 그룹 설정이 직관적이어야 함
|
||
- 모바일에서도 사용 가능한 UI
|
||
|
||
## 📊 구현 상태
|
||
|
||
- [ ] Phase 1: TableListComponent 구현
|
||
- [ ] 상태 관리 추가
|
||
- [ ] 그룹화 로직 구현
|
||
- [ ] localStorage 연동
|
||
- [ ] UI 구현
|
||
- [ ] Phase 2: FlowWidget 구현
|
||
- [ ] Phase 3: 테스트 및 최적화
|
||
|
||
---
|
||
|
||
**작성일**: 2025-11-03
|
||
**버전**: 1.0
|
||
**상태**: 구현 예정
|
||
|