ERP-node/frontend/lib/registry/components/repeat-screen-modal

RepeatScreenModal 컴포넌트 v2

개요

RepeatScreenModal은 선택한 데이터를 그룹핑하여 카드 형태로 표시하고, 각 카드 내에서 데이터를 편집할 수 있는 만능 폼 컴포넌트입니다.

이 컴포넌트 하나로 대부분의 ERP 화면을 설정만으로 구현할 수 있습니다.

핵심 철학

┌─────────────────────────────────────────────────────────────────┐
│                    ERP 화면 구성의 핵심                          │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  1. 어떤 테이블에서 → 어떤 컬럼을 → 어떻게 보여줄 것인가?        │
│                                                                 │
│  2. 보기만 할 것인가? vs 수정 가능하게 할 것인가?                │
│                                                                 │
│  3. 수정한다면 → 어떤 테이블의 → 어떤 컬럼에 저장할 것인가?      │
│                                                                 │
│  4. 데이터를 어떻게 그룹화해서 보여줄 것인가?                    │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

카드 모드

1. Simple 모드 (단순)

• 1행 = 1카드: 선택한 각 행이 독립적인 카드로 표시
• 자유로운 레이아웃 구성 (행/컬럼 기반)
• 적합한 상황: 단순 데이터 편집, 개별 레코드 수정

2. WithTable 모드 (테이블 포함)

• N행 = 1카드: 그룹핑된 여러 행이 하나의 카드로 표시
• 카드 = 헤더 영역 + 테이블 영역
• 헤더: 그룹 대표값, 집계값 표시
• 테이블: 그룹 내 각 행을 테이블로 표시
• 적합한 상황: 출하계획, 구매발주, 생산계획 등 일괄 등록

주요 기능

기능	설명
그룹핑	특정 필드 기준으로 여러 행을 하나의 카드로 묶음
집계	그룹 내 데이터의 합계/개수/평균/최소/최대 자동 계산
카드 내 테이블	그룹 내 각 행을 테이블 형태로 표시
테이블 내 편집	테이블의 특정 컬럼을 편집 가능하게 설정
다중 테이블 저장	하나의 카드에서 여러 테이블 동시 저장
컬럼별 소스 설정	직접 조회/조인 조회/수동 입력 선택
컬럼별 타겟 설정	저장할 테이블과 컬럼 지정

사용 시나리오

시나리오 1: 출하계획 동시 등록

그룹핑: part_code (품목코드)
헤더: 품목정보 + 총수주잔량 + 현재고
테이블: 수주별 출하계획 입력

설정 예시:

{
  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	사용자 직접 입력

타겟 설정 (데이터 저장)

• 저장 테이블: 데이터를 저장할 테이블
• 저장 컬럼: 데이터를 저장할 컬럼
• 저장 활성화: 저장 여부

타입 정의

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