feat: 신규 컴포넌트 2종 추가 (SimpleRepeaterTable, RepeatScreenModal) 및 속성 패널 스크롤 개선
- SimpleRepeaterTable: 검색/추가 없이 데이터 표시 및 편집, 자동 계산 지원 - RepeatScreenModal: 그룹핑 기반 카드 레이아웃, 집계 기능, 테이블 모드 지원 - UnifiedPropertiesPanel: overflow-x-auto 추가로 가로 스크롤 활성화
This commit is contained in:
SeongHyun Kim
parent
244c597ac9
commit
c94b9da813
|
|
@ -238,9 +238,9 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
|
||||||
// 컴포넌트가 선택되지 않았을 때도 해상도 설정과 격자 설정은 표시
|
// 컴포넌트가 선택되지 않았을 때도 해상도 설정과 격자 설정은 표시
|
||||||
if (!selectedComponent) {
|
if (!selectedComponent) {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full flex-col bg-white">
|
<div className="flex h-full flex-col bg-white overflow-x-auto">
|
||||||
{/* 해상도 설정과 격자 설정 표시 */}
|
{/* 해상도 설정과 격자 설정 표시 */}
|
||||||
<div className="flex-1 overflow-y-auto p-2">
|
<div className="flex-1 overflow-y-auto overflow-x-auto p-2">
|
||||||
<div className="space-y-4 text-xs">
|
<div className="space-y-4 text-xs">
|
||||||
{/* 해상도 설정 */}
|
{/* 해상도 설정 */}
|
||||||
{currentResolution && onResolutionChange && (
|
{currentResolution && onResolutionChange && (
|
||||||
|
|
@ -1418,7 +1418,7 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 통합 컨텐츠 (탭 제거) */}
|
{/* 통합 컨텐츠 (탭 제거) */}
|
||||||
<div className="flex-1 overflow-y-auto p-2">
|
<div className="flex-1 overflow-y-auto overflow-x-auto p-2">
|
||||||
<div className="space-y-4 text-xs">
|
<div className="space-y-4 text-xs">
|
||||||
{/* 해상도 설정 - 항상 맨 위에 표시 */}
|
{/* 해상도 설정 - 항상 맨 위에 표시 */}
|
||||||
{currentResolution && onResolutionChange && (
|
{currentResolution && onResolutionChange && (
|
||||||
|
|
|
||||||
|
|
@ -49,6 +49,8 @@ import "./customer-item-mapping/CustomerItemMappingRenderer"; // 🆕 거래처
|
||||||
import "./autocomplete-search-input/AutocompleteSearchInputRenderer";
|
import "./autocomplete-search-input/AutocompleteSearchInputRenderer";
|
||||||
import "./entity-search-input/EntitySearchInputRenderer";
|
import "./entity-search-input/EntitySearchInputRenderer";
|
||||||
import "./modal-repeater-table/ModalRepeaterTableRenderer";
|
import "./modal-repeater-table/ModalRepeaterTableRenderer";
|
||||||
|
import "./simple-repeater-table/SimpleRepeaterTableRenderer"; // 🆕 단순 반복 테이블
|
||||||
|
import "./repeat-screen-modal/RepeatScreenModalRenderer"; // 🆕 반복 화면 모달 (카드 형태)
|
||||||
import "./order-registration-modal/OrderRegistrationModalRenderer";
|
import "./order-registration-modal/OrderRegistrationModalRenderer";
|
||||||
|
|
||||||
// 🆕 조건부 컨테이너 컴포넌트
|
// 🆕 조건부 컨테이너 컴포넌트
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,236 @@
|
||||||
|
# RepeatScreenModal 컴포넌트 v2
|
||||||
|
|
||||||
|
## 개요
|
||||||
|
|
||||||
|
`RepeatScreenModal`은 선택한 데이터를 그룹핑하여 카드 형태로 표시하고, 각 카드 내에서 데이터를 편집할 수 있는 **만능 폼 컴포넌트**입니다.
|
||||||
|
|
||||||
|
**이 컴포넌트 하나로 대부분의 ERP 화면을 설정만으로 구현할 수 있습니다.**
|
||||||
|
|
||||||
|
## 핵심 철학
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────────────┐
|
||||||
|
│ ERP 화면 구성의 핵심 │
|
||||||
|
├─────────────────────────────────────────────────────────────────┤
|
||||||
|
│ │
|
||||||
|
│ 1. 어떤 테이블에서 → 어떤 컬럼을 → 어떻게 보여줄 것인가? │
|
||||||
|
│ │
|
||||||
|
│ 2. 보기만 할 것인가? vs 수정 가능하게 할 것인가? │
|
||||||
|
│ │
|
||||||
|
│ 3. 수정한다면 → 어떤 테이블의 → 어떤 컬럼에 저장할 것인가? │
|
||||||
|
│ │
|
||||||
|
│ 4. 데이터를 어떻게 그룹화해서 보여줄 것인가? │
|
||||||
|
│ │
|
||||||
|
└─────────────────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
## 카드 모드
|
||||||
|
|
||||||
|
### 1. Simple 모드 (단순)
|
||||||
|
|
||||||
|
- **1행 = 1카드**: 선택한 각 행이 독립적인 카드로 표시
|
||||||
|
- 자유로운 레이아웃 구성 (행/컬럼 기반)
|
||||||
|
- 적합한 상황: 단순 데이터 편집, 개별 레코드 수정
|
||||||
|
|
||||||
|
### 2. WithTable 모드 (테이블 포함)
|
||||||
|
|
||||||
|
- **N행 = 1카드**: 그룹핑된 여러 행이 하나의 카드로 표시
|
||||||
|
- 카드 = 헤더 영역 + 테이블 영역
|
||||||
|
- 헤더: 그룹 대표값, 집계값 표시
|
||||||
|
- 테이블: 그룹 내 각 행을 테이블로 표시
|
||||||
|
- 적합한 상황: 출하계획, 구매발주, 생산계획 등 일괄 등록
|
||||||
|
|
||||||
|
## 주요 기능
|
||||||
|
|
||||||
|
| 기능 | 설명 |
|
||||||
|
|------|------|
|
||||||
|
| 그룹핑 | 특정 필드 기준으로 여러 행을 하나의 카드로 묶음 |
|
||||||
|
| 집계 | 그룹 내 데이터의 합계/개수/평균/최소/최대 자동 계산 |
|
||||||
|
| 카드 내 테이블 | 그룹 내 각 행을 테이블 형태로 표시 |
|
||||||
|
| 테이블 내 편집 | 테이블의 특정 컬럼을 편집 가능하게 설정 |
|
||||||
|
| 다중 테이블 저장 | 하나의 카드에서 여러 테이블 동시 저장 |
|
||||||
|
| 컬럼별 소스 설정 | 직접 조회/조인 조회/수동 입력 선택 |
|
||||||
|
| 컬럼별 타겟 설정 | 저장할 테이블과 컬럼 지정 |
|
||||||
|
|
||||||
|
## 사용 시나리오
|
||||||
|
|
||||||
|
### 시나리오 1: 출하계획 동시 등록
|
||||||
|
|
||||||
|
```
|
||||||
|
그룹핑: part_code (품목코드)
|
||||||
|
헤더: 품목정보 + 총수주잔량 + 현재고
|
||||||
|
테이블: 수주별 출하계획 입력
|
||||||
|
```
|
||||||
|
|
||||||
|
**설정 예시:**
|
||||||
|
```typescript
|
||||||
|
{
|
||||||
|
cardMode: "withTable",
|
||||||
|
dataSource: {
|
||||||
|
sourceTable: "sales_order_mng",
|
||||||
|
filterField: "selectedIds"
|
||||||
|
},
|
||||||
|
grouping: {
|
||||||
|
enabled: true,
|
||||||
|
groupByField: "part_code",
|
||||||
|
aggregations: [
|
||||||
|
{ sourceField: "balance_qty", type: "sum", resultField: "total_balance", label: "총수주잔량" },
|
||||||
|
{ sourceField: "id", type: "count", resultField: "order_count", label: "수주건수" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
tableLayout: {
|
||||||
|
headerRows: [
|
||||||
|
{
|
||||||
|
columns: [
|
||||||
|
{ field: "part_code", label: "품목코드", type: "text", editable: false },
|
||||||
|
{ field: "part_name", label: "품목명", type: "text", editable: false },
|
||||||
|
{ field: "total_balance", label: "총수주잔량", type: "aggregation", aggregationField: "total_balance" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tableColumns: [
|
||||||
|
{ field: "order_no", label: "수주번호", type: "text", editable: false },
|
||||||
|
{ field: "partner_id", label: "거래처", type: "text", editable: false },
|
||||||
|
{ field: "due_date", label: "납기일", type: "date", editable: false },
|
||||||
|
{ field: "balance_qty", label: "미출하", type: "number", editable: false },
|
||||||
|
{
|
||||||
|
field: "plan_qty",
|
||||||
|
label: "출하계획",
|
||||||
|
type: "number",
|
||||||
|
editable: true,
|
||||||
|
targetConfig: { targetTable: "shipment_plan", targetColumn: "plan_qty", saveEnabled: true }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 시나리오 2: 구매발주 일괄 등록
|
||||||
|
|
||||||
|
```
|
||||||
|
그룹핑: supplier_id (공급업체)
|
||||||
|
헤더: 공급업체정보 + 총발주금액
|
||||||
|
테이블: 품목별 발주수량 입력
|
||||||
|
```
|
||||||
|
|
||||||
|
### 시나리오 3: 생산계획 일괄 등록
|
||||||
|
|
||||||
|
```
|
||||||
|
그룹핑: product_code (제품코드)
|
||||||
|
헤더: 제품정보 + 현재고 + 필요수량
|
||||||
|
테이블: 작업지시별 생산수량 입력
|
||||||
|
```
|
||||||
|
|
||||||
|
### 시나리오 4: 입고검사 일괄 처리
|
||||||
|
|
||||||
|
```
|
||||||
|
그룹핑: po_no (발주번호)
|
||||||
|
헤더: 발주정보 + 공급업체
|
||||||
|
테이블: 품목별 검사결과 입력
|
||||||
|
```
|
||||||
|
|
||||||
|
## ConfigPanel 사용법
|
||||||
|
|
||||||
|
### 1. 기본 설정 탭
|
||||||
|
|
||||||
|
- **카드 제목**: `{field}` 형식으로 동적 제목 설정
|
||||||
|
- **카드 간격**: 카드 사이 간격 (8px ~ 32px)
|
||||||
|
- **테두리**: 카드 테두리 표시 여부
|
||||||
|
- **저장 모드**: 전체 저장 / 개별 저장
|
||||||
|
- **카드 모드**: 단순 / 테이블
|
||||||
|
|
||||||
|
### 2. 데이터 소스 탭
|
||||||
|
|
||||||
|
- **소스 테이블**: 데이터를 조회할 테이블
|
||||||
|
- **필터 필드**: formData에서 가져올 필터 필드명 (예: `selectedIds`)
|
||||||
|
|
||||||
|
### 3. 그룹핑 탭 (테이블 모드에서 활성화)
|
||||||
|
|
||||||
|
- **그룹핑 활성화**: ON/OFF
|
||||||
|
- **그룹 기준 필드**: 그룹핑할 필드 선택
|
||||||
|
- **집계 설정**: 합계/개수/평균 등 집계 추가
|
||||||
|
|
||||||
|
### 4. 레이아웃 탭
|
||||||
|
|
||||||
|
**Simple 모드:**
|
||||||
|
- 행 추가/삭제
|
||||||
|
- 각 행에 컬럼 추가/삭제
|
||||||
|
- 컬럼별 필드명, 라벨, 타입, 너비, 편집 가능 여부 설정
|
||||||
|
|
||||||
|
**WithTable 모드:**
|
||||||
|
- 헤더 영역: 그룹 대표값, 집계값 표시용 행/컬럼 설정
|
||||||
|
- 테이블 영역: 그룹 내 각 행을 표시할 테이블 컬럼 설정
|
||||||
|
|
||||||
|
## 컬럼 설정 상세
|
||||||
|
|
||||||
|
### 소스 설정 (데이터 조회)
|
||||||
|
|
||||||
|
| 타입 | 설명 |
|
||||||
|
|------|------|
|
||||||
|
| direct | 소스 테이블에서 직접 조회 |
|
||||||
|
| join | 다른 테이블과 조인하여 조회 |
|
||||||
|
| manual | 사용자 직접 입력 |
|
||||||
|
|
||||||
|
### 타겟 설정 (데이터 저장)
|
||||||
|
|
||||||
|
- **저장 테이블**: 데이터를 저장할 테이블
|
||||||
|
- **저장 컬럼**: 데이터를 저장할 컬럼
|
||||||
|
- **저장 활성화**: 저장 여부
|
||||||
|
|
||||||
|
## 타입 정의
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface RepeatScreenModalProps {
|
||||||
|
// 기본 설정
|
||||||
|
cardTitle?: string;
|
||||||
|
cardSpacing?: string;
|
||||||
|
showCardBorder?: boolean;
|
||||||
|
saveMode?: "all" | "individual";
|
||||||
|
cardMode?: "simple" | "withTable";
|
||||||
|
|
||||||
|
// 데이터 소스
|
||||||
|
dataSource?: DataSourceConfig;
|
||||||
|
|
||||||
|
// 그룹핑 설정
|
||||||
|
grouping?: GroupingConfig;
|
||||||
|
|
||||||
|
// 레이아웃
|
||||||
|
cardLayout?: CardRowConfig[]; // simple 모드
|
||||||
|
tableLayout?: TableLayoutConfig; // withTable 모드
|
||||||
|
}
|
||||||
|
|
||||||
|
interface GroupingConfig {
|
||||||
|
enabled: boolean;
|
||||||
|
groupByField: string;
|
||||||
|
aggregations?: AggregationConfig[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AggregationConfig {
|
||||||
|
sourceField: string;
|
||||||
|
type: "sum" | "count" | "avg" | "min" | "max";
|
||||||
|
resultField: string;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TableLayoutConfig {
|
||||||
|
headerRows: CardRowConfig[];
|
||||||
|
tableColumns: TableColumnConfig[];
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 파일 구조
|
||||||
|
|
||||||
|
```
|
||||||
|
repeat-screen-modal/
|
||||||
|
├── index.ts # 컴포넌트 정의 및 export
|
||||||
|
├── types.ts # 타입 정의
|
||||||
|
├── RepeatScreenModalComponent.tsx # 메인 컴포넌트
|
||||||
|
├── RepeatScreenModalConfigPanel.tsx # 설정 패널
|
||||||
|
├── RepeatScreenModalRenderer.tsx # 자동 등록
|
||||||
|
└── README.md # 문서
|
||||||
|
```
|
||||||
|
|
||||||
|
## 버전 히스토리
|
||||||
|
|
||||||
|
- **v2.0.0**: 그룹핑, 집계, 테이블 모드 추가
|
||||||
|
- **v1.0.0**: 초기 버전 (Simple 모드)
|
||||||
|
|
@ -0,0 +1,885 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useState, useEffect, useMemo } from "react";
|
||||||
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||||
|
import { Loader2, Save, X, Layers, Table as TableIcon } from "lucide-react";
|
||||||
|
import {
|
||||||
|
RepeatScreenModalProps,
|
||||||
|
CardData,
|
||||||
|
CardColumnConfig,
|
||||||
|
GroupedCardData,
|
||||||
|
CardRowData,
|
||||||
|
AggregationConfig,
|
||||||
|
TableColumnConfig,
|
||||||
|
} from "./types";
|
||||||
|
import { ComponentRendererProps } from "@/types/component";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { apiClient } from "@/lib/api/client";
|
||||||
|
|
||||||
|
export interface RepeatScreenModalComponentProps extends ComponentRendererProps {
|
||||||
|
config?: RepeatScreenModalProps;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function RepeatScreenModalComponent({
|
||||||
|
component,
|
||||||
|
isDesignMode = false,
|
||||||
|
formData,
|
||||||
|
onFormDataChange,
|
||||||
|
config,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: RepeatScreenModalComponentProps) {
|
||||||
|
const componentConfig = {
|
||||||
|
...config,
|
||||||
|
...component?.config,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 설정 값 추출
|
||||||
|
const cardLayout = componentConfig?.cardLayout || [];
|
||||||
|
const dataSource = componentConfig?.dataSource;
|
||||||
|
const saveMode = componentConfig?.saveMode || "all";
|
||||||
|
const cardSpacing = componentConfig?.cardSpacing || "24px";
|
||||||
|
const showCardBorder = componentConfig?.showCardBorder ?? true;
|
||||||
|
const cardTitle = componentConfig?.cardTitle || "카드 {index}";
|
||||||
|
const cardMode = componentConfig?.cardMode || "simple";
|
||||||
|
const grouping = componentConfig?.grouping;
|
||||||
|
const tableLayout = componentConfig?.tableLayout;
|
||||||
|
|
||||||
|
// 상태
|
||||||
|
const [rawData, setRawData] = useState<any[]>([]); // 원본 데이터
|
||||||
|
const [cardsData, setCardsData] = useState<CardData[]>([]); // simple 모드용
|
||||||
|
const [groupedCardsData, setGroupedCardsData] = useState<GroupedCardData[]>([]); // withTable 모드용
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [loadError, setLoadError] = useState<string | null>(null);
|
||||||
|
const [isSaving, setIsSaving] = useState(false);
|
||||||
|
|
||||||
|
// 초기 데이터 로드
|
||||||
|
useEffect(() => {
|
||||||
|
const loadInitialData = async () => {
|
||||||
|
if (!dataSource || !dataSource.sourceTable) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true);
|
||||||
|
setLoadError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 필터 조건 생성
|
||||||
|
const filters: Record<string, any> = {};
|
||||||
|
|
||||||
|
if (dataSource.filterField && formData) {
|
||||||
|
const filterValue = formData[dataSource.filterField];
|
||||||
|
if (filterValue) {
|
||||||
|
// 배열이면 IN 조건, 아니면 단일 조건
|
||||||
|
if (Array.isArray(filterValue)) {
|
||||||
|
filters.id = filterValue;
|
||||||
|
} else {
|
||||||
|
filters.id = filterValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// API 호출
|
||||||
|
const response = await apiClient.post(`/table-management/tables/${dataSource.sourceTable}/data`, {
|
||||||
|
search: filters,
|
||||||
|
page: 1,
|
||||||
|
size: 1000,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.data.success && response.data.data?.data) {
|
||||||
|
const loadedData = response.data.data.data;
|
||||||
|
setRawData(loadedData);
|
||||||
|
|
||||||
|
// 모드에 따라 데이터 처리
|
||||||
|
if (cardMode === "withTable" && grouping?.enabled && grouping.groupByField) {
|
||||||
|
// 그룹핑 모드
|
||||||
|
const grouped = processGroupedData(loadedData, grouping);
|
||||||
|
setGroupedCardsData(grouped);
|
||||||
|
} else {
|
||||||
|
// 단순 모드
|
||||||
|
const initialCards: CardData[] = await Promise.all(
|
||||||
|
loadedData.map(async (row: any, index: number) => ({
|
||||||
|
_cardId: `card-${index}-${Date.now()}`,
|
||||||
|
_originalData: { ...row },
|
||||||
|
_isDirty: false,
|
||||||
|
...(await loadCardData(row)),
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
setCardsData(initialCards);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setLoadError("데이터를 불러오는데 실패했습니다.");
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("데이터 로드 실패:", error);
|
||||||
|
setLoadError(error.message || "데이터 로드 중 오류가 발생했습니다.");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
loadInitialData();
|
||||||
|
}, [dataSource, formData, cardMode, grouping?.enabled, grouping?.groupByField]);
|
||||||
|
|
||||||
|
// 그룹화된 데이터 처리
|
||||||
|
const processGroupedData = (data: any[], groupingConfig: typeof grouping): GroupedCardData[] => {
|
||||||
|
if (!groupingConfig?.enabled || !groupingConfig.groupByField) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const groupByField = groupingConfig.groupByField;
|
||||||
|
const groupMap = new Map<string, any[]>();
|
||||||
|
|
||||||
|
// 그룹별로 데이터 분류
|
||||||
|
data.forEach((row) => {
|
||||||
|
const groupKey = String(row[groupByField] || "");
|
||||||
|
if (!groupMap.has(groupKey)) {
|
||||||
|
groupMap.set(groupKey, []);
|
||||||
|
}
|
||||||
|
groupMap.get(groupKey)!.push(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
// GroupedCardData 생성
|
||||||
|
const result: GroupedCardData[] = [];
|
||||||
|
let cardIndex = 0;
|
||||||
|
|
||||||
|
groupMap.forEach((rows, groupKey) => {
|
||||||
|
// 집계 계산
|
||||||
|
const aggregations: Record<string, number> = {};
|
||||||
|
if (groupingConfig.aggregations) {
|
||||||
|
groupingConfig.aggregations.forEach((agg) => {
|
||||||
|
aggregations[agg.resultField] = calculateAggregation(rows, agg);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 행 데이터 생성
|
||||||
|
const cardRows: CardRowData[] = rows.map((row, idx) => ({
|
||||||
|
_rowId: `row-${cardIndex}-${idx}-${Date.now()}`,
|
||||||
|
_originalData: { ...row },
|
||||||
|
_isDirty: false,
|
||||||
|
...row,
|
||||||
|
}));
|
||||||
|
|
||||||
|
result.push({
|
||||||
|
_cardId: `grouped-card-${cardIndex}-${Date.now()}`,
|
||||||
|
_groupKey: groupKey,
|
||||||
|
_groupField: groupByField,
|
||||||
|
_aggregations: aggregations,
|
||||||
|
_rows: cardRows,
|
||||||
|
_representativeData: rows[0] || {},
|
||||||
|
});
|
||||||
|
|
||||||
|
cardIndex++;
|
||||||
|
});
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 집계 계산
|
||||||
|
const calculateAggregation = (rows: any[], agg: AggregationConfig): number => {
|
||||||
|
const values = rows.map((row) => Number(row[agg.sourceField]) || 0);
|
||||||
|
|
||||||
|
switch (agg.type) {
|
||||||
|
case "sum":
|
||||||
|
return values.reduce((a, b) => a + b, 0);
|
||||||
|
case "count":
|
||||||
|
return values.length;
|
||||||
|
case "avg":
|
||||||
|
return values.length > 0 ? values.reduce((a, b) => a + b, 0) / values.length : 0;
|
||||||
|
case "min":
|
||||||
|
return values.length > 0 ? Math.min(...values) : 0;
|
||||||
|
case "max":
|
||||||
|
return values.length > 0 ? Math.max(...values) : 0;
|
||||||
|
default:
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 카드 데이터 로드 (소스 설정에 따라)
|
||||||
|
const loadCardData = async (originalData: any): Promise<Record<string, any>> => {
|
||||||
|
const cardData: Record<string, any> = {};
|
||||||
|
|
||||||
|
for (const row of cardLayout) {
|
||||||
|
for (const col of row.columns) {
|
||||||
|
if (col.sourceConfig) {
|
||||||
|
if (col.sourceConfig.type === "direct") {
|
||||||
|
cardData[col.field] = originalData[col.sourceConfig.sourceColumn || col.field];
|
||||||
|
} else if (col.sourceConfig.type === "join" && col.sourceConfig.joinTable) {
|
||||||
|
cardData[col.field] = null; // 조인은 나중에 일괄 처리
|
||||||
|
} else if (col.sourceConfig.type === "manual") {
|
||||||
|
cardData[col.field] = null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
cardData[col.field] = originalData[col.field];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return cardData;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Simple 모드: 카드 데이터 변경
|
||||||
|
const handleCardDataChange = (cardId: string, field: string, value: any) => {
|
||||||
|
setCardsData((prev) =>
|
||||||
|
prev.map((card) => (card._cardId === cardId ? { ...card, [field]: value, _isDirty: true } : card))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// WithTable 모드: 행 데이터 변경
|
||||||
|
const handleRowDataChange = (cardId: string, rowId: string, field: string, value: any) => {
|
||||||
|
setGroupedCardsData((prev) =>
|
||||||
|
prev.map((card) => {
|
||||||
|
if (card._cardId !== cardId) return card;
|
||||||
|
|
||||||
|
const updatedRows = card._rows.map((row) =>
|
||||||
|
row._rowId === rowId ? { ...row, [field]: value, _isDirty: true } : row
|
||||||
|
);
|
||||||
|
|
||||||
|
// 집계값 재계산
|
||||||
|
const newAggregations: Record<string, number> = {};
|
||||||
|
if (grouping?.aggregations) {
|
||||||
|
grouping.aggregations.forEach((agg) => {
|
||||||
|
newAggregations[agg.resultField] = calculateAggregation(updatedRows, agg);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...card,
|
||||||
|
_rows: updatedRows,
|
||||||
|
_aggregations: newAggregations,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 카드 제목 생성
|
||||||
|
const getCardTitle = (data: Record<string, any>, index: number): string => {
|
||||||
|
let title = cardTitle;
|
||||||
|
title = title.replace("{index}", String(index + 1));
|
||||||
|
|
||||||
|
const matches = title.match(/\{(\w+)\}/g);
|
||||||
|
if (matches) {
|
||||||
|
matches.forEach((match) => {
|
||||||
|
const field = match.slice(1, -1);
|
||||||
|
const value = data[field] || "";
|
||||||
|
title = title.replace(match, String(value));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return title;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 전체 저장
|
||||||
|
const handleSaveAll = async () => {
|
||||||
|
setIsSaving(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (cardMode === "withTable") {
|
||||||
|
await saveGroupedData();
|
||||||
|
} else {
|
||||||
|
await saveSimpleData();
|
||||||
|
}
|
||||||
|
|
||||||
|
alert("저장되었습니다.");
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("저장 실패:", error);
|
||||||
|
alert(`저장 중 오류가 발생했습니다: ${error.message}`);
|
||||||
|
} finally {
|
||||||
|
setIsSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Simple 모드 저장
|
||||||
|
const saveSimpleData = async () => {
|
||||||
|
const dirtyCards = cardsData.filter((card) => card._isDirty);
|
||||||
|
|
||||||
|
if (dirtyCards.length === 0) {
|
||||||
|
alert("변경된 데이터가 없습니다.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const groupedData: Record<string, any[]> = {};
|
||||||
|
|
||||||
|
for (const card of dirtyCards) {
|
||||||
|
for (const row of cardLayout) {
|
||||||
|
for (const col of row.columns) {
|
||||||
|
if (col.targetConfig && col.targetConfig.saveEnabled !== false) {
|
||||||
|
const targetTable = col.targetConfig.targetTable;
|
||||||
|
const targetColumn = col.targetConfig.targetColumn;
|
||||||
|
const value = card[col.field];
|
||||||
|
|
||||||
|
if (!groupedData[targetTable]) {
|
||||||
|
groupedData[targetTable] = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
let existingRow = groupedData[targetTable].find((r) => r._cardId === card._cardId);
|
||||||
|
|
||||||
|
if (!existingRow) {
|
||||||
|
existingRow = {
|
||||||
|
_cardId: card._cardId,
|
||||||
|
_originalData: card._originalData,
|
||||||
|
};
|
||||||
|
groupedData[targetTable].push(existingRow);
|
||||||
|
}
|
||||||
|
|
||||||
|
existingRow[targetColumn] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
await saveToTables(groupedData);
|
||||||
|
|
||||||
|
setCardsData((prev) => prev.map((card) => ({ ...card, _isDirty: false })));
|
||||||
|
};
|
||||||
|
|
||||||
|
// WithTable 모드 저장
|
||||||
|
const saveGroupedData = async () => {
|
||||||
|
const dirtyCards = groupedCardsData.filter((card) => card._rows.some((row) => row._isDirty));
|
||||||
|
|
||||||
|
if (dirtyCards.length === 0) {
|
||||||
|
alert("변경된 데이터가 없습니다.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const groupedData: Record<string, any[]> = {};
|
||||||
|
|
||||||
|
for (const card of dirtyCards) {
|
||||||
|
const dirtyRows = card._rows.filter((row) => row._isDirty);
|
||||||
|
|
||||||
|
for (const row of dirtyRows) {
|
||||||
|
// 테이블 컬럼에서 저장 대상 추출
|
||||||
|
if (tableLayout?.tableColumns) {
|
||||||
|
for (const col of tableLayout.tableColumns) {
|
||||||
|
if (col.editable && col.targetConfig && col.targetConfig.saveEnabled !== false) {
|
||||||
|
const targetTable = col.targetConfig.targetTable;
|
||||||
|
const targetColumn = col.targetConfig.targetColumn;
|
||||||
|
const value = row[col.field];
|
||||||
|
|
||||||
|
if (!groupedData[targetTable]) {
|
||||||
|
groupedData[targetTable] = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
let existingRow = groupedData[targetTable].find((r) => r._rowId === row._rowId);
|
||||||
|
|
||||||
|
if (!existingRow) {
|
||||||
|
existingRow = {
|
||||||
|
_rowId: row._rowId,
|
||||||
|
_originalData: row._originalData,
|
||||||
|
};
|
||||||
|
groupedData[targetTable].push(existingRow);
|
||||||
|
}
|
||||||
|
|
||||||
|
existingRow[targetColumn] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
await saveToTables(groupedData);
|
||||||
|
|
||||||
|
setGroupedCardsData((prev) =>
|
||||||
|
prev.map((card) => ({
|
||||||
|
...card,
|
||||||
|
_rows: card._rows.map((row) => ({ ...row, _isDirty: false })),
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 테이블별 저장
|
||||||
|
const saveToTables = async (groupedData: Record<string, any[]>) => {
|
||||||
|
const savePromises = Object.entries(groupedData).map(async ([tableName, rows]) => {
|
||||||
|
return Promise.all(
|
||||||
|
rows.map(async (row) => {
|
||||||
|
const { _cardId, _rowId, _originalData, ...dataToSave } = row;
|
||||||
|
const id = _originalData?.id;
|
||||||
|
|
||||||
|
if (id) {
|
||||||
|
await apiClient.put(`/table-management/tables/${tableName}/data/${id}`, dataToSave);
|
||||||
|
} else {
|
||||||
|
await apiClient.post(`/table-management/tables/${tableName}/data`, dataToSave);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
await Promise.all(savePromises);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 수정 여부 확인
|
||||||
|
const hasDirtyData = useMemo(() => {
|
||||||
|
if (cardMode === "withTable") {
|
||||||
|
return groupedCardsData.some((card) => card._rows.some((row) => row._isDirty));
|
||||||
|
}
|
||||||
|
return cardsData.some((c) => c._isDirty);
|
||||||
|
}, [cardMode, cardsData, groupedCardsData]);
|
||||||
|
|
||||||
|
// 디자인 모드 렌더링
|
||||||
|
if (isDesignMode) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"w-full h-full min-h-[400px] border-2 border-dashed border-primary/50 rounded-lg p-8 bg-gradient-to-br from-primary/5 to-primary/10",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col items-center justify-center h-full space-y-6">
|
||||||
|
{/* 아이콘 */}
|
||||||
|
<div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center">
|
||||||
|
{cardMode === "withTable" ? <TableIcon className="w-10 h-10 text-primary" /> : <Layers className="w-10 h-10 text-primary" />}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 제목 */}
|
||||||
|
<div className="text-center space-y-2">
|
||||||
|
<div className="text-xl font-bold text-primary">Repeat Screen Modal</div>
|
||||||
|
<div className="text-base font-semibold text-foreground">반복 화면 모달</div>
|
||||||
|
<Badge variant={cardMode === "withTable" ? "default" : "secondary"}>
|
||||||
|
{cardMode === "withTable" ? "테이블 모드" : "단순 모드"}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 통계 정보 */}
|
||||||
|
<div className="flex gap-6 text-center">
|
||||||
|
{cardMode === "simple" ? (
|
||||||
|
<>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="text-2xl font-bold text-primary">{cardLayout.length}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">행 (Rows)</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-px bg-border" />
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="text-2xl font-bold text-primary">
|
||||||
|
{cardLayout.reduce((sum, row) => sum + row.columns.length, 0)}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-muted-foreground">컬럼 (Columns)</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="text-2xl font-bold text-primary">{tableLayout?.headerRows?.length || 0}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">헤더 행</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-px bg-border" />
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="text-2xl font-bold text-primary">{tableLayout?.tableColumns?.length || 0}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">테이블 컬럼</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-px bg-border" />
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="text-2xl font-bold text-primary">{grouping?.aggregations?.length || 0}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">집계</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<div className="w-px bg-border" />
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="text-2xl font-bold text-primary">{dataSource?.sourceTable ? "✓" : "○"}</div>
|
||||||
|
<div className="text-xs text-muted-foreground">데이터 소스</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 그룹핑 정보 */}
|
||||||
|
{grouping?.enabled && (
|
||||||
|
<div className="text-xs bg-purple-100 dark:bg-purple-900 px-3 py-2 rounded-md">
|
||||||
|
그룹핑: <strong>{grouping.groupByField}</strong>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 설정 안내 */}
|
||||||
|
<div className="text-xs text-muted-foreground bg-muted/50 px-4 py-2 rounded-md border">
|
||||||
|
오른쪽 패널에서 카드 레이아웃과 데이터 소스를 설정하세요
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 로딩 상태
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center p-12">
|
||||||
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||||
|
<span className="ml-3 text-sm text-muted-foreground">데이터를 불러오는 중...</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 오류 상태
|
||||||
|
if (loadError) {
|
||||||
|
return (
|
||||||
|
<div className="p-6 border border-destructive/50 rounded-lg bg-destructive/5">
|
||||||
|
<div className="flex items-center gap-2 text-destructive mb-2">
|
||||||
|
<X className="h-5 w-5" />
|
||||||
|
<span className="font-semibold">데이터 로드 실패</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">{loadError}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// WithTable 모드 렌더링
|
||||||
|
if (cardMode === "withTable" && grouping?.enabled) {
|
||||||
|
return (
|
||||||
|
<div className={cn("space-y-6 overflow-x-auto", className)}>
|
||||||
|
<div className="space-y-4 min-w-[800px]" style={{ gap: cardSpacing }}>
|
||||||
|
{groupedCardsData.map((card, cardIndex) => (
|
||||||
|
<Card
|
||||||
|
key={card._cardId}
|
||||||
|
className={cn(
|
||||||
|
"transition-shadow",
|
||||||
|
showCardBorder && "border-2",
|
||||||
|
card._rows.some((r) => r._isDirty) && "border-primary shadow-lg"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-lg flex items-center justify-between">
|
||||||
|
<span>{getCardTitle(card._representativeData, cardIndex)}</span>
|
||||||
|
{card._rows.some((r) => r._isDirty) && (
|
||||||
|
<Badge variant="outline" className="text-xs text-primary">
|
||||||
|
수정됨
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
{/* 헤더 영역 (그룹 대표값, 집계값) */}
|
||||||
|
{tableLayout?.headerRows && tableLayout.headerRows.length > 0 && (
|
||||||
|
<div className="space-y-3 p-4 bg-muted/30 rounded-lg">
|
||||||
|
{tableLayout.headerRows.map((row, rowIndex) => (
|
||||||
|
<div
|
||||||
|
key={row.id || `hrow-${rowIndex}`}
|
||||||
|
className={cn(
|
||||||
|
"grid gap-4",
|
||||||
|
row.layout === "vertical" ? "grid-cols-1" : "grid-flow-col auto-cols-fr",
|
||||||
|
row.backgroundColor && getBackgroundClass(row.backgroundColor),
|
||||||
|
row.rounded && "rounded-lg",
|
||||||
|
row.padding && `p-${row.padding}`
|
||||||
|
)}
|
||||||
|
style={{ gap: row.gap || "16px" }}
|
||||||
|
>
|
||||||
|
{row.columns.map((col, colIndex) => (
|
||||||
|
<div key={col.id || `hcol-${colIndex}`} style={{ width: col.width }}>
|
||||||
|
{renderHeaderColumn(col, card, grouping?.aggregations || [])}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 테이블 영역 */}
|
||||||
|
{tableLayout?.tableColumns && tableLayout.tableColumns.length > 0 && (
|
||||||
|
<div className="border rounded-lg overflow-hidden">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow className="bg-muted/50">
|
||||||
|
{tableLayout.tableColumns.map((col) => (
|
||||||
|
<TableHead
|
||||||
|
key={col.id}
|
||||||
|
style={{ width: col.width }}
|
||||||
|
className={cn("text-xs", col.align && `text-${col.align}`)}
|
||||||
|
>
|
||||||
|
{col.label}
|
||||||
|
</TableHead>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{card._rows.map((row) => (
|
||||||
|
<TableRow key={row._rowId} className={cn(row._isDirty && "bg-primary/5")}>
|
||||||
|
{tableLayout.tableColumns.map((col) => (
|
||||||
|
<TableCell
|
||||||
|
key={`${row._rowId}-${col.id}`}
|
||||||
|
className={cn("text-sm", col.align && `text-${col.align}`)}
|
||||||
|
>
|
||||||
|
{renderTableCell(col, row, (value) =>
|
||||||
|
handleRowDataChange(card._cardId, row._rowId, col.field, value)
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 저장 버튼 */}
|
||||||
|
{groupedCardsData.length > 0 && (
|
||||||
|
<div className="flex justify-end gap-2">
|
||||||
|
<Button onClick={handleSaveAll} disabled={isSaving || !hasDirtyData} className="gap-2">
|
||||||
|
{isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
|
||||||
|
전체 저장
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 데이터 없음 */}
|
||||||
|
{groupedCardsData.length === 0 && !isLoading && (
|
||||||
|
<div className="text-center py-12 text-muted-foreground">표시할 데이터가 없습니다.</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Simple 모드 렌더링
|
||||||
|
return (
|
||||||
|
<div className={cn("space-y-6 overflow-x-auto", className)}>
|
||||||
|
<div className="space-y-4 min-w-[600px]" style={{ gap: cardSpacing }}>
|
||||||
|
{cardsData.map((card, cardIndex) => (
|
||||||
|
<Card
|
||||||
|
key={card._cardId}
|
||||||
|
className={cn("transition-shadow", showCardBorder && "border-2", card._isDirty && "border-primary shadow-lg")}
|
||||||
|
>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<CardTitle className="text-lg flex items-center justify-between">
|
||||||
|
<span>{getCardTitle(card, cardIndex)}</span>
|
||||||
|
{card._isDirty && <span className="text-xs text-primary font-normal">(수정됨)</span>}
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
{cardLayout.map((row, rowIndex) => (
|
||||||
|
<div
|
||||||
|
key={row.id || `row-${rowIndex}`}
|
||||||
|
className={cn(
|
||||||
|
"grid gap-4",
|
||||||
|
row.layout === "vertical" ? "grid-cols-1" : "grid-flow-col auto-cols-fr"
|
||||||
|
)}
|
||||||
|
style={{ gap: row.gap || "16px" }}
|
||||||
|
>
|
||||||
|
{row.columns.map((col, colIndex) => (
|
||||||
|
<div key={col.id || `col-${colIndex}`} style={{ width: col.width }}>
|
||||||
|
{renderColumn(col, card, (value) => handleCardDataChange(card._cardId, col.field, value))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 저장 버튼 */}
|
||||||
|
{cardsData.length > 0 && (
|
||||||
|
<div className="flex justify-end gap-2">
|
||||||
|
<Button onClick={handleSaveAll} disabled={isSaving || !hasDirtyData} className="gap-2">
|
||||||
|
{isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
|
||||||
|
{saveMode === "all" ? "전체 저장" : "저장"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 데이터 없음 */}
|
||||||
|
{cardsData.length === 0 && !isLoading && (
|
||||||
|
<div className="text-center py-12 text-muted-foreground">표시할 데이터가 없습니다.</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 배경색 클래스 변환
|
||||||
|
function getBackgroundClass(color: string): string {
|
||||||
|
const colorMap: Record<string, string> = {
|
||||||
|
blue: "bg-blue-50 dark:bg-blue-950",
|
||||||
|
green: "bg-green-50 dark:bg-green-950",
|
||||||
|
purple: "bg-purple-50 dark:bg-purple-950",
|
||||||
|
orange: "bg-orange-50 dark:bg-orange-950",
|
||||||
|
};
|
||||||
|
return colorMap[color] || "";
|
||||||
|
}
|
||||||
|
|
||||||
|
// 헤더 컬럼 렌더링 (집계값 포함)
|
||||||
|
function renderHeaderColumn(
|
||||||
|
col: CardColumnConfig,
|
||||||
|
card: GroupedCardData,
|
||||||
|
aggregations: AggregationConfig[]
|
||||||
|
) {
|
||||||
|
let value: any;
|
||||||
|
|
||||||
|
// 집계값 타입이면 집계 결과에서 가져옴
|
||||||
|
if (col.type === "aggregation" && col.aggregationField) {
|
||||||
|
value = card._aggregations[col.aggregationField];
|
||||||
|
const aggConfig = aggregations.find((a) => a.resultField === col.aggregationField);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label className="text-xs font-medium text-muted-foreground">{col.label}</Label>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"text-lg font-bold",
|
||||||
|
col.textColor && `text-${col.textColor}`,
|
||||||
|
col.fontSize && `text-${col.fontSize}`
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{typeof value === "number" ? value.toLocaleString() : value || "-"}
|
||||||
|
{aggConfig && <span className="text-xs font-normal text-muted-foreground ml-1">({aggConfig.type})</span>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 일반 필드는 대표 데이터에서 가져옴
|
||||||
|
value = card._representativeData[col.field];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label className="text-xs font-medium text-muted-foreground">{col.label}</Label>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"text-sm",
|
||||||
|
col.fontWeight && `font-${col.fontWeight}`,
|
||||||
|
col.fontSize && `text-${col.fontSize}`
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{value || "-"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 테이블 셀 렌더링
|
||||||
|
function renderTableCell(col: TableColumnConfig, row: CardRowData, onChange: (value: any) => void) {
|
||||||
|
const value = row[col.field];
|
||||||
|
|
||||||
|
// Badge 타입
|
||||||
|
if (col.type === "badge") {
|
||||||
|
const badgeColor = col.badgeColorMap?.[value] || col.badgeVariant || "default";
|
||||||
|
return <Badge variant={badgeColor as any}>{value || "-"}</Badge>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 읽기 전용
|
||||||
|
if (!col.editable) {
|
||||||
|
if (col.type === "number") {
|
||||||
|
return <span>{typeof value === "number" ? value.toLocaleString() : value || "-"}</span>;
|
||||||
|
}
|
||||||
|
return <span>{value || "-"}</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 편집 가능
|
||||||
|
switch (col.type) {
|
||||||
|
case "text":
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
value={value || ""}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
className="h-8 text-sm"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "number":
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={value || ""}
|
||||||
|
onChange={(e) => onChange(Number(e.target.value) || 0)}
|
||||||
|
className="h-8 text-sm text-right"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "date":
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
value={value || ""}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
className="h-8 text-sm"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return <span>{value || "-"}</span>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 컬럼 렌더링 함수 (Simple 모드)
|
||||||
|
function renderColumn(col: CardColumnConfig, card: CardData, onChange: (value: any) => void) {
|
||||||
|
const value = card[col.field];
|
||||||
|
const isReadOnly = !col.editable;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<Label className="text-xs font-medium">
|
||||||
|
{col.label}
|
||||||
|
{col.required && <span className="text-destructive ml-1">*</span>}
|
||||||
|
</Label>
|
||||||
|
|
||||||
|
{isReadOnly && (
|
||||||
|
<div className="text-sm text-muted-foreground bg-muted px-3 py-2 rounded-md min-h-[40px] flex items-center">
|
||||||
|
{value || "-"}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isReadOnly && (
|
||||||
|
<>
|
||||||
|
{col.type === "text" && (
|
||||||
|
<Input
|
||||||
|
value={value || ""}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
placeholder={col.placeholder}
|
||||||
|
className="h-10 text-sm"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{col.type === "number" && (
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={value || ""}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
placeholder={col.placeholder}
|
||||||
|
className="h-10 text-sm"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{col.type === "date" && (
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
value={value || ""}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
className="h-10 text-sm"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{col.type === "select" && (
|
||||||
|
<Select value={value || ""} onValueChange={onChange}>
|
||||||
|
<SelectTrigger className="h-10 text-sm">
|
||||||
|
<SelectValue placeholder={col.placeholder || "선택하세요"} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{col.selectOptions?.map((option) => (
|
||||||
|
<SelectItem key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{col.type === "textarea" && (
|
||||||
|
<Textarea
|
||||||
|
value={value || ""}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
placeholder={col.placeholder}
|
||||||
|
className="text-sm min-h-[80px]"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{col.type === "component" && col.componentType && (
|
||||||
|
<div className="text-xs text-muted-foreground p-2 border rounded">
|
||||||
|
컴포넌트: {col.componentType} (개발 중)
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,13 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
|
||||||
|
import { RepeatScreenModalDefinition } from "./index";
|
||||||
|
|
||||||
|
// 컴포넌트 자동 등록
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
ComponentRegistry.registerComponent(RepeatScreenModalDefinition);
|
||||||
|
console.log("✅ RepeatScreenModal 컴포넌트 등록 완료");
|
||||||
|
}
|
||||||
|
|
||||||
|
export {};
|
||||||
|
|
||||||
|
|
@ -0,0 +1,140 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { createComponentDefinition } from "../../utils/createComponentDefinition";
|
||||||
|
import { ComponentCategory } from "@/types/component";
|
||||||
|
import { RepeatScreenModalComponent } from "./RepeatScreenModalComponent";
|
||||||
|
import { RepeatScreenModalConfigPanel } from "./RepeatScreenModalConfigPanel";
|
||||||
|
import type {
|
||||||
|
RepeatScreenModalProps,
|
||||||
|
CardRowConfig,
|
||||||
|
CardColumnConfig,
|
||||||
|
ColumnSourceConfig,
|
||||||
|
ColumnTargetConfig,
|
||||||
|
DataSourceConfig,
|
||||||
|
CardData,
|
||||||
|
GroupingConfig,
|
||||||
|
AggregationConfig,
|
||||||
|
TableLayoutConfig,
|
||||||
|
TableColumnConfig,
|
||||||
|
GroupedCardData,
|
||||||
|
CardRowData,
|
||||||
|
} from "./types";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* RepeatScreenModal 컴포넌트 정의 v2
|
||||||
|
* 반복 화면 모달 - 선택한 행 개수만큼 카드를 생성하며, 각 카드는 커스터마이징 가능한 레이아웃
|
||||||
|
*
|
||||||
|
* 주요 기능:
|
||||||
|
* - 🆕 카드 모드: 단순(simple) / 테이블(withTable) 모드 선택
|
||||||
|
* - 🆕 그룹핑: 특정 필드 기준으로 여러 행을 하나의 카드로 묶기
|
||||||
|
* - 🆕 집계: 그룹 내 데이터의 합계/평균/개수 등 자동 계산
|
||||||
|
* - 🆕 카드 내 테이블: 그룹 내 각 행을 테이블 형태로 표시
|
||||||
|
* - 유연한 레이아웃: 행/컬럼 기반 자유로운 구조
|
||||||
|
* - 컬럼별 소스 설정: 직접 조회/조인 조회/수동 입력
|
||||||
|
* - 컬럼별 타겟 설정: 어느 테이블의 어느 컬럼에 저장할지 설정
|
||||||
|
* - 다중 테이블 저장: 하나의 카드에서 여러 테이블 동시 저장
|
||||||
|
*
|
||||||
|
* 사용 시나리오:
|
||||||
|
* - 출하계획 동시 등록 (품목별 그룹핑 + 수주별 테이블)
|
||||||
|
* - 구매발주 일괄 등록 (공급업체별 그룹핑 + 품목별 테이블)
|
||||||
|
* - 생산계획 일괄 등록 (제품별 그룹핑 + 작업지시별 테이블)
|
||||||
|
* - 입고검사 일괄 처리 (발주번호별 그룹핑 + 품목별 검사결과)
|
||||||
|
*/
|
||||||
|
export const RepeatScreenModalDefinition = createComponentDefinition({
|
||||||
|
id: "repeat-screen-modal",
|
||||||
|
name: "반복 화면 모달",
|
||||||
|
nameEng: "Repeat Screen Modal",
|
||||||
|
description:
|
||||||
|
"선택한 행을 그룹핑하여 카드로 표시하고, 각 카드는 헤더+테이블 구조로 편집 가능한 폼 (출하계획, 구매발주 등)",
|
||||||
|
category: ComponentCategory.DATA,
|
||||||
|
webType: "form",
|
||||||
|
component: RepeatScreenModalComponent,
|
||||||
|
defaultConfig: {
|
||||||
|
// 기본 설정
|
||||||
|
cardTitle: "{part_code} - {part_name}",
|
||||||
|
cardSpacing: "24px",
|
||||||
|
showCardBorder: true,
|
||||||
|
saveMode: "all",
|
||||||
|
|
||||||
|
// 카드 모드 (simple: 1행=1카드, withTable: 그룹핑+테이블)
|
||||||
|
cardMode: "simple",
|
||||||
|
|
||||||
|
// 데이터 소스
|
||||||
|
dataSource: {
|
||||||
|
sourceTable: "",
|
||||||
|
filterField: "selectedIds",
|
||||||
|
},
|
||||||
|
|
||||||
|
// 그룹핑 설정 (withTable 모드에서 사용)
|
||||||
|
grouping: {
|
||||||
|
enabled: false,
|
||||||
|
groupByField: "",
|
||||||
|
aggregations: [],
|
||||||
|
},
|
||||||
|
|
||||||
|
// Simple 모드 레이아웃
|
||||||
|
cardLayout: [
|
||||||
|
{
|
||||||
|
id: "row-1",
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
id: "col-1",
|
||||||
|
field: "name",
|
||||||
|
label: "이름",
|
||||||
|
type: "text",
|
||||||
|
width: "50%",
|
||||||
|
editable: true,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "col-2",
|
||||||
|
field: "status",
|
||||||
|
label: "상태",
|
||||||
|
type: "select",
|
||||||
|
width: "50%",
|
||||||
|
editable: true,
|
||||||
|
required: false,
|
||||||
|
selectOptions: [
|
||||||
|
{ value: "active", label: "활성" },
|
||||||
|
{ value: "inactive", label: "비활성" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
gap: "16px",
|
||||||
|
layout: "horizontal",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// WithTable 모드 레이아웃
|
||||||
|
tableLayout: {
|
||||||
|
headerRows: [],
|
||||||
|
tableColumns: [],
|
||||||
|
},
|
||||||
|
} as Partial<RepeatScreenModalProps>,
|
||||||
|
defaultSize: { width: 1000, height: 800 },
|
||||||
|
configPanel: RepeatScreenModalConfigPanel,
|
||||||
|
icon: "LayoutGrid",
|
||||||
|
tags: ["모달", "폼", "반복", "카드", "그룹핑", "집계", "테이블", "편집", "데이터", "출하계획", "일괄등록"],
|
||||||
|
version: "2.0.0",
|
||||||
|
author: "개발팀",
|
||||||
|
});
|
||||||
|
|
||||||
|
// 타입 재 export
|
||||||
|
export type {
|
||||||
|
RepeatScreenModalProps,
|
||||||
|
CardRowConfig,
|
||||||
|
CardColumnConfig,
|
||||||
|
ColumnSourceConfig,
|
||||||
|
ColumnTargetConfig,
|
||||||
|
DataSourceConfig,
|
||||||
|
CardData,
|
||||||
|
GroupingConfig,
|
||||||
|
AggregationConfig,
|
||||||
|
TableLayoutConfig,
|
||||||
|
TableColumnConfig,
|
||||||
|
GroupedCardData,
|
||||||
|
CardRowData,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 컴포넌트 재 export
|
||||||
|
export { RepeatScreenModalComponent, RepeatScreenModalConfigPanel };
|
||||||
|
|
@ -0,0 +1,222 @@
|
||||||
|
import { ComponentRendererProps } from "@/types/component";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* RepeatScreenModal Props
|
||||||
|
* 선택한 행 개수만큼 카드를 생성하며, 각 카드는 커스터마이징 가능한 레이아웃을 가짐
|
||||||
|
*
|
||||||
|
* 🆕 v2: 그룹핑, 집계, 카드 내 테이블 기능 추가
|
||||||
|
*/
|
||||||
|
export interface RepeatScreenModalProps {
|
||||||
|
// === 기본 설정 ===
|
||||||
|
cardTitle?: string; // 카드 제목 템플릿 (예: "{order_no} - {item_code}")
|
||||||
|
cardSpacing?: string; // 카드 간 간격 (기본: 24px)
|
||||||
|
showCardBorder?: boolean; // 카드 테두리 표시 여부
|
||||||
|
saveMode?: "all" | "individual"; // 저장 모드
|
||||||
|
|
||||||
|
// === 데이터 소스 ===
|
||||||
|
dataSource?: DataSourceConfig; // 데이터 소스 설정
|
||||||
|
|
||||||
|
// === 🆕 그룹핑 설정 ===
|
||||||
|
grouping?: GroupingConfig; // 그룹핑 설정
|
||||||
|
|
||||||
|
// === 🆕 카드 모드 ===
|
||||||
|
cardMode?: "simple" | "withTable"; // 단순 필드 vs 테이블 포함
|
||||||
|
|
||||||
|
// === 레이아웃 (simple 모드) ===
|
||||||
|
cardLayout?: CardRowConfig[]; // 카드 내부 레이아웃 (행/컬럼 구조)
|
||||||
|
|
||||||
|
// === 🆕 레이아웃 (withTable 모드) ===
|
||||||
|
tableLayout?: TableLayoutConfig; // 테이블 포함 레이아웃
|
||||||
|
|
||||||
|
// === 값 ===
|
||||||
|
value?: any[];
|
||||||
|
onChange?: (newData: any[]) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 데이터 소스 설정
|
||||||
|
*/
|
||||||
|
export interface DataSourceConfig {
|
||||||
|
sourceTable: string; // 조회할 테이블 (예: "sales_order_mng")
|
||||||
|
filterField?: string; // formData에서 필터링할 필드 (예: "selectedIds")
|
||||||
|
selectColumns?: string[]; // 선택할 컬럼 목록
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 🆕 그룹핑 설정
|
||||||
|
* 특정 필드 기준으로 여러 행을 하나의 카드로 묶음
|
||||||
|
*/
|
||||||
|
export interface GroupingConfig {
|
||||||
|
enabled: boolean; // 그룹핑 활성화 여부
|
||||||
|
groupByField: string; // 그룹 기준 필드 (예: "part_code")
|
||||||
|
|
||||||
|
// 집계 설정 (그룹별 합계, 개수 등)
|
||||||
|
aggregations?: AggregationConfig[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 🆕 집계 설정
|
||||||
|
*/
|
||||||
|
export interface AggregationConfig {
|
||||||
|
sourceField: string; // 원본 필드 (예: "balance_qty")
|
||||||
|
type: "sum" | "count" | "avg" | "min" | "max"; // 집계 타입
|
||||||
|
resultField: string; // 결과 필드명 (예: "total_balance_qty")
|
||||||
|
label: string; // 표시 라벨 (예: "총수주잔량")
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 🆕 테이블 포함 레이아웃 설정
|
||||||
|
* 카드 = 헤더 영역 + 테이블 영역
|
||||||
|
*/
|
||||||
|
export interface TableLayoutConfig {
|
||||||
|
// 헤더 영역: 그룹 대표값, 집계값 표시
|
||||||
|
headerRows: CardRowConfig[];
|
||||||
|
|
||||||
|
// 테이블 영역: 그룹 내 각 행을 테이블로 표시
|
||||||
|
tableColumns: TableColumnConfig[];
|
||||||
|
|
||||||
|
// 테이블 설정
|
||||||
|
tableTitle?: string; // 테이블 제목
|
||||||
|
showTableHeader?: boolean; // 테이블 헤더 표시 여부 (기본: true)
|
||||||
|
tableMaxHeight?: string; // 테이블 최대 높이 (스크롤용)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 🆕 테이블 컬럼 설정
|
||||||
|
*/
|
||||||
|
export interface TableColumnConfig {
|
||||||
|
id: string; // 컬럼 고유 ID
|
||||||
|
field: string; // 필드명
|
||||||
|
label: string; // 헤더 라벨
|
||||||
|
type: "text" | "number" | "date" | "select" | "badge"; // 타입
|
||||||
|
width?: string; // 너비 (예: "100px", "20%")
|
||||||
|
align?: "left" | "center" | "right"; // 정렬
|
||||||
|
editable: boolean; // 편집 가능 여부
|
||||||
|
required?: boolean; // 필수 입력 여부
|
||||||
|
|
||||||
|
// Select 타입 옵션
|
||||||
|
selectOptions?: { value: string; label: string }[];
|
||||||
|
|
||||||
|
// Badge 타입 설정
|
||||||
|
badgeVariant?: "default" | "secondary" | "destructive" | "outline";
|
||||||
|
badgeColorMap?: Record<string, string>; // 값별 색상 매핑
|
||||||
|
|
||||||
|
// 데이터 소스 설정
|
||||||
|
sourceConfig?: ColumnSourceConfig;
|
||||||
|
|
||||||
|
// 데이터 타겟 설정
|
||||||
|
targetConfig?: ColumnTargetConfig;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 카드 행 설정
|
||||||
|
* 카드는 여러 행(Row)으로 구성되며, 각 행은 여러 컬럼을 가짐
|
||||||
|
*/
|
||||||
|
export interface CardRowConfig {
|
||||||
|
id: string; // 행 고유 ID
|
||||||
|
columns: CardColumnConfig[]; // 이 행에 배치할 컬럼들
|
||||||
|
gap?: string; // 컬럼 간 간격 (기본: 16px)
|
||||||
|
layout?: "horizontal" | "vertical"; // 레이아웃 방향 (기본: horizontal)
|
||||||
|
|
||||||
|
// 🆕 행 스타일 설정
|
||||||
|
backgroundColor?: string; // 배경색 (예: "blue", "green")
|
||||||
|
padding?: string; // 패딩
|
||||||
|
rounded?: boolean; // 둥근 모서리
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 카드 컬럼 설정
|
||||||
|
*/
|
||||||
|
export interface CardColumnConfig {
|
||||||
|
id: string; // 컬럼 고유 ID
|
||||||
|
field: string; // 필드명 (데이터 바인딩)
|
||||||
|
label: string; // 라벨
|
||||||
|
type: "text" | "number" | "date" | "select" | "textarea" | "component" | "aggregation"; // 🆕 aggregation 추가
|
||||||
|
width?: string; // 너비 (예: "50%", "200px", "1fr")
|
||||||
|
editable: boolean; // 편집 가능 여부
|
||||||
|
required?: boolean; // 필수 입력 여부
|
||||||
|
placeholder?: string; // 플레이스홀더
|
||||||
|
|
||||||
|
// Select 타입 옵션
|
||||||
|
selectOptions?: { value: string; label: string }[];
|
||||||
|
|
||||||
|
// 데이터 소스 설정 (어디서 조회?)
|
||||||
|
sourceConfig?: ColumnSourceConfig;
|
||||||
|
|
||||||
|
// 데이터 타겟 설정 (어디에 저장?)
|
||||||
|
targetConfig?: ColumnTargetConfig;
|
||||||
|
|
||||||
|
// Component 타입일 때
|
||||||
|
componentType?: string; // 삽입할 컴포넌트 타입 (예: "simple-repeater-table")
|
||||||
|
componentConfig?: any; // 컴포넌트 설정
|
||||||
|
|
||||||
|
// 🆕 Aggregation 타입일 때 (집계값 표시)
|
||||||
|
aggregationField?: string; // 표시할 집계 필드명 (GroupingConfig.aggregations의 resultField)
|
||||||
|
|
||||||
|
// 🆕 스타일 설정
|
||||||
|
textColor?: string; // 텍스트 색상
|
||||||
|
fontSize?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl"; // 폰트 크기
|
||||||
|
fontWeight?: "normal" | "medium" | "semibold" | "bold"; // 폰트 굵기
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 컬럼 데이터 소스 설정 (SimpleRepeaterTable과 동일)
|
||||||
|
*/
|
||||||
|
export interface ColumnSourceConfig {
|
||||||
|
type: "direct" | "join" | "manual"; // 조회 타입
|
||||||
|
sourceTable?: string; // type: "direct" - 조회할 테이블
|
||||||
|
sourceColumn?: string; // type: "direct" - 조회할 컬럼
|
||||||
|
joinTable?: string; // type: "join" - 조인할 테이블
|
||||||
|
joinColumn?: string; // type: "join" - 조인 테이블에서 가져올 컬럼
|
||||||
|
joinKey?: string; // type: "join" - 현재 데이터의 조인 키 컬럼
|
||||||
|
joinRefKey?: string; // type: "join" - 조인 테이블의 참조 키 컬럼
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 컬럼 데이터 타겟 설정 (SimpleRepeaterTable과 동일)
|
||||||
|
*/
|
||||||
|
export interface ColumnTargetConfig {
|
||||||
|
targetTable: string; // 저장할 테이블
|
||||||
|
targetColumn: string; // 저장할 컬럼
|
||||||
|
saveEnabled?: boolean; // 저장 활성화 여부 (기본 true)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 카드 데이터 (각 카드의 상태)
|
||||||
|
*/
|
||||||
|
export interface CardData {
|
||||||
|
_cardId: string; // 카드 고유 ID
|
||||||
|
_originalData: Record<string, any>; // 원본 데이터 (조회된 데이터)
|
||||||
|
_isDirty: boolean; // 수정 여부
|
||||||
|
[key: string]: any; // 실제 필드 데이터
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 🆕 그룹화된 카드 데이터
|
||||||
|
*/
|
||||||
|
export interface GroupedCardData {
|
||||||
|
_cardId: string; // 카드 고유 ID
|
||||||
|
_groupKey: string; // 그룹 키 값 (예: "PROD-001")
|
||||||
|
_groupField: string; // 그룹 기준 필드명 (예: "part_code")
|
||||||
|
_aggregations: Record<string, number>; // 집계 결과 (예: { total_balance_qty: 100 })
|
||||||
|
_rows: CardRowData[]; // 그룹 내 각 행 데이터
|
||||||
|
_representativeData: Record<string, any>; // 그룹 대표 데이터 (첫 번째 행 기준)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 🆕 그룹 내 행 데이터
|
||||||
|
*/
|
||||||
|
export interface CardRowData {
|
||||||
|
_rowId: string; // 행 고유 ID
|
||||||
|
_originalData: Record<string, any>; // 원본 데이터
|
||||||
|
_isDirty: boolean; // 수정 여부
|
||||||
|
[key: string]: any; // 실제 필드 데이터
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 테이블 정보 (API 응답용)
|
||||||
|
*/
|
||||||
|
export interface TableInfo {
|
||||||
|
tableName: string;
|
||||||
|
displayName?: string;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,535 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Trash2, Loader2, X } from "lucide-react";
|
||||||
|
import { SimpleRepeaterTableProps, SimpleRepeaterColumnConfig } from "./types";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { ComponentRendererProps } from "@/types/component";
|
||||||
|
import { useCalculation } from "./useCalculation";
|
||||||
|
import { apiClient } from "@/lib/api/client";
|
||||||
|
|
||||||
|
export interface SimpleRepeaterTableComponentProps extends ComponentRendererProps {
|
||||||
|
config?: SimpleRepeaterTableProps;
|
||||||
|
// SimpleRepeaterTableProps의 개별 prop들도 지원 (호환성)
|
||||||
|
value?: any[];
|
||||||
|
onChange?: (newData: any[]) => void;
|
||||||
|
columns?: SimpleRepeaterColumnConfig[];
|
||||||
|
calculationRules?: any[];
|
||||||
|
readOnly?: boolean;
|
||||||
|
showRowNumber?: boolean;
|
||||||
|
allowDelete?: boolean;
|
||||||
|
maxHeight?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SimpleRepeaterTableComponent({
|
||||||
|
// ComponentRendererProps (자동 전달)
|
||||||
|
component,
|
||||||
|
isDesignMode = false,
|
||||||
|
isSelected = false,
|
||||||
|
isInteractive = false,
|
||||||
|
onClick,
|
||||||
|
className,
|
||||||
|
formData,
|
||||||
|
onFormDataChange,
|
||||||
|
|
||||||
|
// SimpleRepeaterTable 전용 props
|
||||||
|
config,
|
||||||
|
value: propValue,
|
||||||
|
onChange: propOnChange,
|
||||||
|
columns: propColumns,
|
||||||
|
calculationRules: propCalculationRules,
|
||||||
|
readOnly: propReadOnly,
|
||||||
|
showRowNumber: propShowRowNumber,
|
||||||
|
allowDelete: propAllowDelete,
|
||||||
|
maxHeight: propMaxHeight,
|
||||||
|
|
||||||
|
...props
|
||||||
|
}: SimpleRepeaterTableComponentProps) {
|
||||||
|
// config 또는 component.config 또는 개별 prop 우선순위로 병합
|
||||||
|
const componentConfig = {
|
||||||
|
...config,
|
||||||
|
...component?.config,
|
||||||
|
};
|
||||||
|
|
||||||
|
// config prop 우선, 없으면 개별 prop 사용
|
||||||
|
const columns = componentConfig?.columns || propColumns || [];
|
||||||
|
const calculationRules = componentConfig?.calculationRules || propCalculationRules || [];
|
||||||
|
const readOnly = componentConfig?.readOnly ?? propReadOnly ?? false;
|
||||||
|
const showRowNumber = componentConfig?.showRowNumber ?? propShowRowNumber ?? true;
|
||||||
|
const allowDelete = componentConfig?.allowDelete ?? propAllowDelete ?? true;
|
||||||
|
const maxHeight = componentConfig?.maxHeight || propMaxHeight || "240px";
|
||||||
|
|
||||||
|
// value는 formData[columnName] 우선, 없으면 prop 사용
|
||||||
|
const columnName = component?.columnName;
|
||||||
|
const value = (columnName && formData?.[columnName]) || componentConfig?.value || propValue || [];
|
||||||
|
|
||||||
|
// 🆕 로딩 상태
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [loadError, setLoadError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// onChange 래퍼 (기존 onChange 콜백 + onFormDataChange 호출)
|
||||||
|
const handleChange = (newData: any[]) => {
|
||||||
|
// 기존 onChange 콜백 호출 (호환성)
|
||||||
|
const externalOnChange = componentConfig?.onChange || propOnChange;
|
||||||
|
if (externalOnChange) {
|
||||||
|
externalOnChange(newData);
|
||||||
|
}
|
||||||
|
|
||||||
|
// onFormDataChange 호출하여 EditModal의 groupData 업데이트
|
||||||
|
if (onFormDataChange && columnName) {
|
||||||
|
onFormDataChange(columnName, newData);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 계산 hook
|
||||||
|
const { calculateRow, calculateAll } = useCalculation(calculationRules);
|
||||||
|
|
||||||
|
// 🆕 초기 데이터 로드
|
||||||
|
useEffect(() => {
|
||||||
|
const loadInitialData = async () => {
|
||||||
|
const initialConfig = componentConfig?.initialDataConfig;
|
||||||
|
if (!initialConfig || !initialConfig.sourceTable) {
|
||||||
|
return; // 초기 데이터 설정이 없으면 로드하지 않음
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsLoading(true);
|
||||||
|
setLoadError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 필터 조건 생성
|
||||||
|
const filters: Record<string, any> = {};
|
||||||
|
|
||||||
|
if (initialConfig.filterConditions) {
|
||||||
|
for (const condition of initialConfig.filterConditions) {
|
||||||
|
let filterValue = condition.value;
|
||||||
|
|
||||||
|
// formData에서 값 가져오기
|
||||||
|
if (condition.valueFromField && formData) {
|
||||||
|
filterValue = formData[condition.valueFromField];
|
||||||
|
}
|
||||||
|
|
||||||
|
filters[condition.field] = filterValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// API 호출
|
||||||
|
const response = await apiClient.post(
|
||||||
|
`/table-management/tables/${initialConfig.sourceTable}/data`,
|
||||||
|
{
|
||||||
|
search: filters,
|
||||||
|
page: 1,
|
||||||
|
size: 1000, // 대량 조회
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.data.success && response.data.data?.data) {
|
||||||
|
const loadedData = response.data.data.data;
|
||||||
|
|
||||||
|
// 1. 기본 데이터 매핑 (Direct & Manual)
|
||||||
|
const baseMappedData = loadedData.map((row: any) => {
|
||||||
|
const mappedRow: any = { ...row }; // 원본 데이터 유지 (조인 키 참조용)
|
||||||
|
|
||||||
|
for (const col of columns) {
|
||||||
|
if (col.sourceConfig) {
|
||||||
|
if (col.sourceConfig.type === "direct" && col.sourceConfig.sourceColumn) {
|
||||||
|
mappedRow[col.field] = row[col.sourceConfig.sourceColumn];
|
||||||
|
} else if (col.sourceConfig.type === "manual") {
|
||||||
|
mappedRow[col.field] = col.defaultValue;
|
||||||
|
}
|
||||||
|
// Join은 2단계에서 처리
|
||||||
|
} else {
|
||||||
|
mappedRow[col.field] = row[col.field] ?? col.defaultValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return mappedRow;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 2. 조인 데이터 처리
|
||||||
|
const joinColumns = columns.filter(
|
||||||
|
(col) => col.sourceConfig?.type === "join" && col.sourceConfig.joinTable && col.sourceConfig.joinKey
|
||||||
|
);
|
||||||
|
|
||||||
|
if (joinColumns.length > 0) {
|
||||||
|
// 조인 테이블별로 그룹화
|
||||||
|
const joinGroups = new Map<string, { key: string; refKey: string; cols: typeof columns }>();
|
||||||
|
|
||||||
|
joinColumns.forEach((col) => {
|
||||||
|
const table = col.sourceConfig!.joinTable!;
|
||||||
|
const key = col.sourceConfig!.joinKey!;
|
||||||
|
// refKey가 없으면 key와 동일하다고 가정 (하위 호환성)
|
||||||
|
const refKey = col.sourceConfig!.joinRefKey || key;
|
||||||
|
const groupKey = `${table}:${key}:${refKey}`;
|
||||||
|
|
||||||
|
if (!joinGroups.has(groupKey)) {
|
||||||
|
joinGroups.set(groupKey, { key, refKey, cols: [] });
|
||||||
|
}
|
||||||
|
joinGroups.get(groupKey)!.cols.push(col);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 각 그룹별로 데이터 조회 및 병합
|
||||||
|
await Promise.all(
|
||||||
|
Array.from(joinGroups.entries()).map(async ([groupKey, { key, refKey, cols }]) => {
|
||||||
|
const [tableName] = groupKey.split(":");
|
||||||
|
|
||||||
|
// 조인 키 값 수집 (중복 제거)
|
||||||
|
const keyValues = Array.from(new Set(
|
||||||
|
baseMappedData
|
||||||
|
.map((row: any) => row[key])
|
||||||
|
.filter((v: any) => v !== undefined && v !== null)
|
||||||
|
));
|
||||||
|
|
||||||
|
if (keyValues.length === 0) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 조인 테이블 조회
|
||||||
|
// refKey(타겟 테이블 컬럼)로 검색
|
||||||
|
const response = await apiClient.post(
|
||||||
|
`/table-management/tables/${tableName}/data`,
|
||||||
|
{
|
||||||
|
search: { [refKey]: keyValues }, // { id: [1, 2, 3] }
|
||||||
|
page: 1,
|
||||||
|
size: 1000,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.data.success && response.data.data?.data) {
|
||||||
|
const joinedRows = response.data.data.data;
|
||||||
|
// 조인 데이터 맵 생성 (refKey -> row)
|
||||||
|
const joinMap = new Map(joinedRows.map((r: any) => [r[refKey], r]));
|
||||||
|
|
||||||
|
// 데이터 병합
|
||||||
|
baseMappedData.forEach((row: any) => {
|
||||||
|
const keyValue = row[key];
|
||||||
|
const joinedRow = joinMap.get(keyValue);
|
||||||
|
|
||||||
|
if (joinedRow) {
|
||||||
|
cols.forEach((col) => {
|
||||||
|
if (col.sourceConfig?.joinColumn) {
|
||||||
|
row[col.field] = joinedRow[col.sourceConfig.joinColumn];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`조인 실패 (${tableName}):`, error);
|
||||||
|
// 실패 시 무시하고 진행 (값은 undefined)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const mappedData = baseMappedData;
|
||||||
|
|
||||||
|
// 계산 필드 적용
|
||||||
|
const calculatedData = calculateAll(mappedData);
|
||||||
|
handleChange(calculatedData);
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("초기 데이터 로드 실패:", error);
|
||||||
|
setLoadError(error.message || "데이터를 불러올 수 없습니다");
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
loadInitialData();
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [componentConfig?.initialDataConfig]);
|
||||||
|
|
||||||
|
// 초기 데이터에 계산 필드 적용
|
||||||
|
useEffect(() => {
|
||||||
|
if (value.length > 0 && calculationRules.length > 0) {
|
||||||
|
const calculated = calculateAll(value);
|
||||||
|
// 값이 실제로 변경된 경우만 업데이트
|
||||||
|
if (JSON.stringify(calculated) !== JSON.stringify(value)) {
|
||||||
|
handleChange(calculated);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 🆕 저장 요청 시 테이블별로 데이터 그룹화 (beforeFormSave 이벤트 리스너)
|
||||||
|
useEffect(() => {
|
||||||
|
const handleSaveRequest = async (event: Event) => {
|
||||||
|
if (value.length === 0) {
|
||||||
|
console.warn("⚠️ [SimpleRepeaterTable] 저장할 데이터 없음");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 🆕 테이블별로 데이터 그룹화
|
||||||
|
const dataByTable: Record<string, any[]> = {};
|
||||||
|
|
||||||
|
for (const row of value) {
|
||||||
|
// 각 행의 데이터를 테이블별로 분리
|
||||||
|
for (const col of columns) {
|
||||||
|
// 저장 설정이 있고 저장이 활성화된 경우에만
|
||||||
|
if (col.targetConfig && col.targetConfig.targetTable && col.targetConfig.saveEnabled !== false) {
|
||||||
|
const targetTable = col.targetConfig.targetTable;
|
||||||
|
const targetColumn = col.targetConfig.targetColumn || col.field;
|
||||||
|
|
||||||
|
// 테이블 그룹 초기화
|
||||||
|
if (!dataByTable[targetTable]) {
|
||||||
|
dataByTable[targetTable] = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 해당 테이블의 데이터 찾기 또는 생성
|
||||||
|
let tableRow = dataByTable[targetTable].find((r: any) => r._rowIndex === row._rowIndex);
|
||||||
|
if (!tableRow) {
|
||||||
|
tableRow = { _rowIndex: row._rowIndex };
|
||||||
|
dataByTable[targetTable].push(tableRow);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 컬럼 값 저장
|
||||||
|
tableRow[targetColumn] = row[col.field];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// _rowIndex 제거
|
||||||
|
Object.keys(dataByTable).forEach((tableName) => {
|
||||||
|
dataByTable[tableName] = dataByTable[tableName].map((row: any) => {
|
||||||
|
const { _rowIndex, ...rest } = row;
|
||||||
|
return rest;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("✅ [SimpleRepeaterTable] 테이블별 저장 데이터:", dataByTable);
|
||||||
|
|
||||||
|
// CustomEvent의 detail에 테이블별 데이터 추가
|
||||||
|
if (event instanceof CustomEvent && event.detail) {
|
||||||
|
// 각 테이블별로 데이터 전달
|
||||||
|
Object.entries(dataByTable).forEach(([tableName, rows]) => {
|
||||||
|
const key = `${columnName || component?.id}_${tableName}`;
|
||||||
|
event.detail.formData[key] = rows.map((row: any) => ({
|
||||||
|
...row,
|
||||||
|
_targetTable: tableName,
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("✅ [SimpleRepeaterTable] 저장 데이터 준비:", {
|
||||||
|
tables: Object.keys(dataByTable),
|
||||||
|
totalRows: Object.values(dataByTable).reduce((sum, rows) => sum + rows.length, 0),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 기존 onFormDataChange도 호출 (호환성)
|
||||||
|
if (onFormDataChange && columnName) {
|
||||||
|
// 테이블별 데이터를 통합하여 전달
|
||||||
|
onFormDataChange(columnName, Object.entries(dataByTable).flatMap(([table, rows]) =>
|
||||||
|
rows.map((row: any) => ({ ...row, _targetTable: table }))
|
||||||
|
));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 저장 버튼 클릭 시 데이터 수집
|
||||||
|
window.addEventListener("beforeFormSave", handleSaveRequest as EventListener);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("beforeFormSave", handleSaveRequest as EventListener);
|
||||||
|
};
|
||||||
|
}, [value, columns, columnName, component?.id, onFormDataChange]);
|
||||||
|
|
||||||
|
const handleCellEdit = (rowIndex: number, field: string, cellValue: any) => {
|
||||||
|
const newRow = { ...value[rowIndex], [field]: cellValue };
|
||||||
|
|
||||||
|
// 계산 필드 업데이트
|
||||||
|
const calculatedRow = calculateRow(newRow);
|
||||||
|
|
||||||
|
const newData = [...value];
|
||||||
|
newData[rowIndex] = calculatedRow;
|
||||||
|
handleChange(newData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRowDelete = (rowIndex: number) => {
|
||||||
|
const newData = value.filter((_, i) => i !== rowIndex);
|
||||||
|
handleChange(newData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderCell = (
|
||||||
|
row: any,
|
||||||
|
column: SimpleRepeaterColumnConfig,
|
||||||
|
rowIndex: number
|
||||||
|
) => {
|
||||||
|
const cellValue = row[column.field];
|
||||||
|
|
||||||
|
// 계산 필드는 편집 불가
|
||||||
|
if (column.calculated || !column.editable || readOnly) {
|
||||||
|
return (
|
||||||
|
<div className="px-2 py-1">
|
||||||
|
{column.type === "number"
|
||||||
|
? typeof cellValue === "number"
|
||||||
|
? cellValue.toLocaleString()
|
||||||
|
: cellValue || "0"
|
||||||
|
: cellValue || "-"}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 편집 가능한 필드
|
||||||
|
switch (column.type) {
|
||||||
|
case "number":
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={cellValue || ""}
|
||||||
|
onChange={(e) =>
|
||||||
|
handleCellEdit(rowIndex, column.field, parseFloat(e.target.value) || 0)
|
||||||
|
}
|
||||||
|
className="h-7 text-xs"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
case "date":
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
value={cellValue || ""}
|
||||||
|
onChange={(e) => handleCellEdit(rowIndex, column.field, e.target.value)}
|
||||||
|
className="h-7 text-xs"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
case "select":
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
value={cellValue || ""}
|
||||||
|
onValueChange={(newValue) =>
|
||||||
|
handleCellEdit(rowIndex, column.field, newValue)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="h-7 text-xs">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{column.selectOptions?.map((option) => (
|
||||||
|
<SelectItem key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
);
|
||||||
|
|
||||||
|
default: // text
|
||||||
|
return (
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
value={cellValue || ""}
|
||||||
|
onChange={(e) => handleCellEdit(rowIndex, column.field, e.target.value)}
|
||||||
|
className="h-7 text-xs"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 로딩 중일 때
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className={cn("border rounded-md overflow-hidden bg-background", className)}>
|
||||||
|
<div className="flex items-center justify-center py-12" style={{ minHeight: maxHeight }}>
|
||||||
|
<div className="text-center">
|
||||||
|
<Loader2 className="h-8 w-8 animate-spin text-primary mx-auto mb-2" />
|
||||||
|
<p className="text-sm text-muted-foreground">데이터를 불러오는 중...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 에러 발생 시
|
||||||
|
if (loadError) {
|
||||||
|
return (
|
||||||
|
<div className={cn("border rounded-md overflow-hidden bg-background", className)}>
|
||||||
|
<div className="flex items-center justify-center py-12" style={{ minHeight: maxHeight }}>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center mx-auto mb-2">
|
||||||
|
<X className="h-6 w-6 text-destructive" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm font-medium text-destructive mb-1">데이터 로드 실패</p>
|
||||||
|
<p className="text-xs text-muted-foreground">{loadError}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={cn("border rounded-md overflow-hidden bg-background", className)}>
|
||||||
|
<div
|
||||||
|
className="overflow-x-auto overflow-y-auto"
|
||||||
|
style={{ maxHeight }}
|
||||||
|
>
|
||||||
|
<table className="w-full text-xs sm:text-sm">
|
||||||
|
<thead className="bg-muted sticky top-0 z-10">
|
||||||
|
<tr>
|
||||||
|
{showRowNumber && (
|
||||||
|
<th className="px-4 py-2 text-left font-medium text-muted-foreground w-12">
|
||||||
|
#
|
||||||
|
</th>
|
||||||
|
)}
|
||||||
|
{columns.map((col) => (
|
||||||
|
<th
|
||||||
|
key={col.field}
|
||||||
|
className="px-4 py-2 text-left font-medium text-muted-foreground"
|
||||||
|
style={{ width: col.width }}
|
||||||
|
>
|
||||||
|
{col.label}
|
||||||
|
{col.required && <span className="text-destructive ml-1">*</span>}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
{!readOnly && allowDelete && (
|
||||||
|
<th className="px-4 py-2 text-left font-medium text-muted-foreground w-20">
|
||||||
|
삭제
|
||||||
|
</th>
|
||||||
|
)}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-background">
|
||||||
|
{value.length === 0 ? (
|
||||||
|
<tr>
|
||||||
|
<td
|
||||||
|
colSpan={columns.length + (showRowNumber ? 1 : 0) + (allowDelete && !readOnly ? 1 : 0)}
|
||||||
|
className="px-4 py-8 text-center text-muted-foreground"
|
||||||
|
>
|
||||||
|
표시할 데이터가 없습니다
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
) : (
|
||||||
|
value.map((row, rowIndex) => (
|
||||||
|
<tr key={rowIndex} className="border-t hover:bg-accent/50">
|
||||||
|
{showRowNumber && (
|
||||||
|
<td className="px-4 py-2 text-center text-muted-foreground">
|
||||||
|
{rowIndex + 1}
|
||||||
|
</td>
|
||||||
|
)}
|
||||||
|
{columns.map((col) => (
|
||||||
|
<td key={col.field} className="px-2 py-1">
|
||||||
|
{renderCell(row, col, rowIndex)}
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
{!readOnly && allowDelete && (
|
||||||
|
<td className="px-4 py-2 text-center">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleRowDelete(rowIndex)}
|
||||||
|
className="h-7 w-7 p-0 text-destructive hover:text-destructive"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</td>
|
||||||
|
)}
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,16 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { ComponentRegistry } from "../../ComponentRegistry";
|
||||||
|
import { SimpleRepeaterTableDefinition } from "./index";
|
||||||
|
import { SimpleRepeaterTableComponent } from "./SimpleRepeaterTableComponent";
|
||||||
|
import { ComponentRendererProps } from "@/types/component";
|
||||||
|
|
||||||
|
// 컴포넌트 자동 등록
|
||||||
|
ComponentRegistry.registerComponent(SimpleRepeaterTableDefinition);
|
||||||
|
|
||||||
|
console.log("✅ SimpleRepeaterTable 컴포넌트 등록 완료");
|
||||||
|
|
||||||
|
export function SimpleRepeaterTableRenderer(props: ComponentRendererProps) {
|
||||||
|
return <SimpleRepeaterTableComponent {...props} />;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { createComponentDefinition } from "../../utils/createComponentDefinition";
|
||||||
|
import { ComponentCategory } from "@/types/component";
|
||||||
|
import { SimpleRepeaterTableComponent } from "./SimpleRepeaterTableComponent";
|
||||||
|
import { SimpleRepeaterTableConfigPanel } from "./SimpleRepeaterTableConfigPanel";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 🆕 SimpleRepeaterTable 컴포넌트 정의
|
||||||
|
* 단순 반복 테이블 - 검색/추가 없이 데이터 표시 및 편집만
|
||||||
|
*
|
||||||
|
* 주요 기능:
|
||||||
|
* - 초기 데이터 로드: 어떤 테이블에서 어떤 조건으로 데이터를 가져올지 설정
|
||||||
|
* - 컬럼별 소스 설정: 각 컬럼의 데이터를 어디서 조회할지 설정 (직접 조회/조인 조회/수동 입력)
|
||||||
|
* - 컬럼별 타겟 설정: 각 컬럼의 데이터를 어느 테이블의 어느 컬럼에 저장할지 설정
|
||||||
|
* - 자동 계산: 수량 * 단가 = 금액 같은 자동 계산 지원
|
||||||
|
* - 읽기 전용 모드: 전체 테이블을 보기 전용으로 설정
|
||||||
|
*/
|
||||||
|
export const SimpleRepeaterTableDefinition = createComponentDefinition({
|
||||||
|
id: "simple-repeater-table",
|
||||||
|
name: "단순 반복 테이블",
|
||||||
|
nameEng: "Simple Repeater Table",
|
||||||
|
description: "어떤 테이블에서 조회하고 어떤 테이블에 저장할지 컬럼별로 설정 가능한 반복 테이블 (검색/추가 없음, 자동 계산 지원)",
|
||||||
|
category: ComponentCategory.DATA,
|
||||||
|
webType: "table",
|
||||||
|
component: SimpleRepeaterTableComponent,
|
||||||
|
defaultConfig: {
|
||||||
|
columns: [],
|
||||||
|
calculationRules: [],
|
||||||
|
initialDataConfig: undefined,
|
||||||
|
readOnly: false,
|
||||||
|
showRowNumber: true,
|
||||||
|
allowDelete: true,
|
||||||
|
maxHeight: "240px",
|
||||||
|
},
|
||||||
|
defaultSize: { width: 800, height: 400 },
|
||||||
|
configPanel: SimpleRepeaterTableConfigPanel,
|
||||||
|
icon: "Table",
|
||||||
|
tags: ["테이블", "반복", "편집", "데이터", "목록", "계산", "조회", "저장"],
|
||||||
|
version: "2.0.0",
|
||||||
|
author: "개발팀",
|
||||||
|
});
|
||||||
|
|
||||||
|
// 타입 내보내기
|
||||||
|
export type {
|
||||||
|
SimpleRepeaterTableProps,
|
||||||
|
SimpleRepeaterColumnConfig,
|
||||||
|
CalculationRule,
|
||||||
|
ColumnSourceConfig,
|
||||||
|
ColumnTargetConfig,
|
||||||
|
InitialDataConfig,
|
||||||
|
DataFilterCondition,
|
||||||
|
SourceJoinCondition,
|
||||||
|
} from "./types";
|
||||||
|
|
||||||
|
// 컴포넌트 내보내기
|
||||||
|
export { SimpleRepeaterTableComponent } from "./SimpleRepeaterTableComponent";
|
||||||
|
export { SimpleRepeaterTableConfigPanel } from "./SimpleRepeaterTableConfigPanel";
|
||||||
|
export { useCalculation } from "./useCalculation";
|
||||||
|
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
/**
|
||||||
|
* SimpleRepeaterTable 컴포넌트 타입 정의
|
||||||
|
* 데이터 검색/추가 없이 주어진 데이터를 표시하고 편집하는 경량 테이블
|
||||||
|
*/
|
||||||
|
|
||||||
|
export interface SimpleRepeaterTableProps {
|
||||||
|
// 데이터
|
||||||
|
value?: any[]; // 현재 표시할 데이터
|
||||||
|
onChange?: (newData: any[]) => void; // 데이터 변경 콜백
|
||||||
|
|
||||||
|
// 테이블 설정
|
||||||
|
columns: SimpleRepeaterColumnConfig[]; // 테이블 컬럼 설정
|
||||||
|
|
||||||
|
// 🆕 초기 데이터 로드 설정
|
||||||
|
initialDataConfig?: InitialDataConfig;
|
||||||
|
|
||||||
|
// 계산 규칙
|
||||||
|
calculationRules?: CalculationRule[]; // 자동 계산 규칙 (수량 * 단가 = 금액)
|
||||||
|
|
||||||
|
// 옵션
|
||||||
|
readOnly?: boolean; // 읽기 전용 모드 (편집 불가)
|
||||||
|
showRowNumber?: boolean; // 행 번호 표시 (기본: true)
|
||||||
|
allowDelete?: boolean; // 삭제 버튼 표시 (기본: true)
|
||||||
|
maxHeight?: string; // 테이블 최대 높이 (기본: "240px")
|
||||||
|
|
||||||
|
// 스타일
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SimpleRepeaterColumnConfig {
|
||||||
|
field: string; // 필드명 (화면에 표시용 임시 키)
|
||||||
|
label: string; // 컬럼 헤더 라벨
|
||||||
|
type?: "text" | "number" | "date" | "select"; // 입력 타입
|
||||||
|
editable?: boolean; // 편집 가능 여부
|
||||||
|
calculated?: boolean; // 계산 필드 여부 (자동 계산되는 필드)
|
||||||
|
width?: string; // 컬럼 너비
|
||||||
|
required?: boolean; // 필수 입력 여부
|
||||||
|
defaultValue?: any; // 기본값
|
||||||
|
selectOptions?: { value: string; label: string }[]; // select일 때 옵션
|
||||||
|
|
||||||
|
// 🆕 데이터 조회 설정 (어디서 가져올지)
|
||||||
|
sourceConfig?: ColumnSourceConfig;
|
||||||
|
|
||||||
|
// 🆕 데이터 저장 설정 (어디에 저장할지)
|
||||||
|
targetConfig?: ColumnTargetConfig;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 🆕 데이터 조회 설정
|
||||||
|
* 어떤 테이블에서 어떤 컬럼을 어떤 조건으로 조회할지 정의
|
||||||
|
*/
|
||||||
|
export interface ColumnSourceConfig {
|
||||||
|
/** 조회 타입 */
|
||||||
|
type: "direct" | "join" | "manual";
|
||||||
|
|
||||||
|
// type: "direct" - 직접 조회 (단일 테이블에서 바로 가져오기)
|
||||||
|
sourceTable?: string; // 조회할 테이블 (예: "sales_order_mng")
|
||||||
|
sourceColumn?: string; // 조회할 컬럼 (예: "item_name")
|
||||||
|
|
||||||
|
// type: "join" - 조인 조회 (다른 테이블과 조인하여 가져오기)
|
||||||
|
joinTable?: string; // 조인할 테이블 (예: "customer_item_mapping")
|
||||||
|
joinColumn?: string; // 조인 테이블에서 가져올 컬럼 (예: "basic_price")
|
||||||
|
joinKey?: string; // 🆕 조인 키 (현재 테이블의 컬럼, 예: "sales_order_id")
|
||||||
|
joinRefKey?: string; // 🆕 참조 키 (조인 테이블의 컬럼, 예: "id")
|
||||||
|
joinConditions?: SourceJoinCondition[]; // 조인 조건 (어떤 키로 조인할지)
|
||||||
|
|
||||||
|
// type: "manual" - 사용자 직접 입력 (조회 안 함)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 🆕 데이터 저장 설정
|
||||||
|
* 어떤 테이블의 어떤 컬럼에 저장할지 정의
|
||||||
|
*/
|
||||||
|
export interface ColumnTargetConfig {
|
||||||
|
targetTable?: string; // 저장할 테이블 (예: "shipment_plan")
|
||||||
|
targetColumn?: string; // 저장할 컬럼 (예: "plan_qty")
|
||||||
|
saveEnabled?: boolean; // 저장 활성화 여부 (false면 읽기 전용)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 🆕 소스 조인 조건
|
||||||
|
* 데이터를 조회할 때 어떤 키로 조인할지 정의
|
||||||
|
*/
|
||||||
|
export interface SourceJoinCondition {
|
||||||
|
/** 기준 테이블 */
|
||||||
|
baseTable: string; // 기준이 되는 테이블 (예: "sales_order_mng")
|
||||||
|
/** 기준 컬럼 */
|
||||||
|
baseColumn: string; // 기준 테이블의 컬럼 (예: "item_code")
|
||||||
|
/** 조인 테이블의 컬럼 */
|
||||||
|
joinColumn: string; // 조인 테이블에서 매칭할 컬럼 (예: "item_code")
|
||||||
|
/** 비교 연산자 */
|
||||||
|
operator?: "=" | "!=" | ">" | "<" | ">=" | "<=";
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 🆕 초기 데이터 로드 설정
|
||||||
|
* 컴포넌트가 로드될 때 어떤 데이터를 가져올지
|
||||||
|
*/
|
||||||
|
export interface InitialDataConfig {
|
||||||
|
/** 로드할 테이블 */
|
||||||
|
sourceTable: string; // 예: "sales_order_mng"
|
||||||
|
|
||||||
|
/** 필터 조건 */
|
||||||
|
filterConditions?: DataFilterCondition[];
|
||||||
|
|
||||||
|
/** 선택할 컬럼 목록 */
|
||||||
|
selectColumns?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 데이터 필터 조건
|
||||||
|
*/
|
||||||
|
export interface DataFilterCondition {
|
||||||
|
/** 필드명 */
|
||||||
|
field: string;
|
||||||
|
/** 연산자 */
|
||||||
|
operator: "=" | "!=" | ">" | "<" | ">=" | "<=" | "LIKE" | "IN";
|
||||||
|
/** 값 (또는 다른 필드 참조) */
|
||||||
|
value: any;
|
||||||
|
/** 값을 다른 필드에서 가져올지 */
|
||||||
|
valueFromField?: string; // 예: "order_no" (formData에서 가져오기)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 계산 규칙 (자동 계산)
|
||||||
|
*/
|
||||||
|
export interface CalculationRule {
|
||||||
|
result: string; // 결과를 저장할 필드 (예: "total_amount")
|
||||||
|
formula: string; // 계산 공식 (예: "quantity * unit_price")
|
||||||
|
dependencies: string[]; // 의존하는 필드들 (예: ["quantity", "unit_price"])
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
import { useCallback } from "react";
|
||||||
|
import { CalculationRule } from "./types";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 계산 필드 자동 업데이트 훅
|
||||||
|
*/
|
||||||
|
export function useCalculation(calculationRules: CalculationRule[] = []) {
|
||||||
|
/**
|
||||||
|
* 단일 행의 계산 필드 업데이트
|
||||||
|
*/
|
||||||
|
const calculateRow = useCallback(
|
||||||
|
(row: any): any => {
|
||||||
|
if (calculationRules.length === 0) return row;
|
||||||
|
|
||||||
|
const updatedRow = { ...row };
|
||||||
|
|
||||||
|
for (const rule of calculationRules) {
|
||||||
|
try {
|
||||||
|
// formula에서 필드명 자동 추출 (영문자, 숫자, 언더스코어로 구성된 단어)
|
||||||
|
let formula = rule.formula;
|
||||||
|
const fieldMatches = formula.match(/[a-zA-Z_][a-zA-Z0-9_]*/g) || [];
|
||||||
|
|
||||||
|
// 추출된 필드명들을 사용 (dependencies가 없으면 자동 추출 사용)
|
||||||
|
const dependencies = rule.dependencies && rule.dependencies.length > 0
|
||||||
|
? rule.dependencies
|
||||||
|
: fieldMatches;
|
||||||
|
|
||||||
|
// 필드명을 실제 값으로 대체
|
||||||
|
for (const dep of dependencies) {
|
||||||
|
// 결과 필드는 제외
|
||||||
|
if (dep === rule.result) continue;
|
||||||
|
|
||||||
|
const value = parseFloat(row[dep]) || 0;
|
||||||
|
// 정확한 필드명만 대체 (단어 경계 사용)
|
||||||
|
formula = formula.replace(new RegExp(`\\b${dep}\\b`, "g"), value.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
// 계산 실행 (Function 사용)
|
||||||
|
const result = new Function(`return ${formula}`)();
|
||||||
|
updatedRow[rule.result] = result;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`계산 오류 (${rule.formula}):`, error);
|
||||||
|
updatedRow[rule.result] = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return updatedRow;
|
||||||
|
},
|
||||||
|
[calculationRules]
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 전체 데이터의 계산 필드 업데이트
|
||||||
|
*/
|
||||||
|
const calculateAll = useCallback(
|
||||||
|
(data: any[]): any[] => {
|
||||||
|
return data.map((row) => calculateRow(row));
|
||||||
|
},
|
||||||
|
[calculateRow]
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
calculateRow,
|
||||||
|
calculateAll,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue