237 lines
7.8 KiB
Markdown
237 lines
7.8 KiB
Markdown
|
# 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 모드)
|