# 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 모드)