반복 데이터 입력컴포넌트 통합중

This commit is contained in:
kjs 2025-12-23 16:44:53 +09:00
parent 2513b89ca2
commit 97675458d7
5 changed files with 1169 additions and 748 deletions

View File

@ -92,6 +92,14 @@ export function ComponentsPanel({
tags: ["tree", "org", "bom", "cascading", "unified"],
defaultSize: { width: 400, height: 300 },
},
{
id: "unified-repeater",
name: "통합 반복 데이터",
description: "반복 데이터 관리 (인라인/모달/버튼 모드)",
category: "data" as ComponentCategory,
tags: ["repeater", "table", "modal", "button", "unified"],
defaultSize: { width: 600, height: 300 },
},
], []);
// 카테고리별 컴포넌트 그룹화

File diff suppressed because it is too large Load Diff

View File

@ -18,6 +18,7 @@ import {
UnifiedBiz,
UnifiedHierarchy,
} from "@/components/unified";
import { UnifiedRepeater } from "@/components/unified/UnifiedRepeater";
// 컴포넌트 렌더러 인터페이스
export interface ComponentRenderer {
@ -392,6 +393,42 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
/>
);
case "unified-repeater":
return (
<UnifiedRepeater
config={{
renderMode: config.renderMode || "inline",
dataSource: config.dataSource || {
tableName: "",
foreignKey: "",
referenceKey: "",
},
columns: config.columns || [],
modal: config.modal,
button: config.button,
features: config.features || {
showAddButton: true,
showDeleteButton: true,
inlineEdit: false,
dragSort: false,
showRowNumber: false,
selectable: false,
multiSelect: false,
},
}}
parentId={props.formData?.[config.dataSource?.referenceKey] || props.formData?.id}
onDataChange={(data) => {
console.log("UnifiedRepeater data changed:", data);
}}
onRowClick={(row) => {
console.log("UnifiedRepeater row clicked:", row);
}}
onButtonClick={(action, row, buttonConfig) => {
console.log("UnifiedRepeater button clicked:", action, row, buttonConfig);
}}
/>
);
default:
return (
<div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-amber-300 bg-amber-50 p-4">

View File

@ -1,11 +1,11 @@
/**
* UnifiedRepeater
*
* :
* - simple-repeater-table: 인라인
* - modal-repeater-table: 모달
* - repeat-screen-modal: 화면
* - related-data-buttons: 버튼
* :
* - inline: 현재 (simple-repeater-table)
* - modal: 소스 / (modal-repeater-table)
* - button: 버튼으로 (related-data-buttons)
* - mixed: inline + modal
*/
// 렌더링 모드
@ -35,6 +35,7 @@ export interface RepeaterColumnConfig {
title: string;
width: ColumnWidthOption;
visible: boolean;
editable?: boolean; // 편집 가능 여부 (inline 모드)
isJoinColumn?: boolean;
sourceTable?: string;
}
@ -62,10 +63,25 @@ export interface CommonCodeButtonConfig {
variantMapping?: Record<string, ButtonVariant>; // 코드값별 색상 매핑
}
// 모달 표시 컬럼 (라벨 포함)
export interface ModalDisplayColumn {
key: string;
label: string;
}
// 모달 설정
export interface RepeaterModalConfig {
screenId?: number;
// 기본 설정
size: ModalSize;
title?: string; // 모달 제목
buttonText?: string; // 검색 버튼 텍스트
// 소스 테이블 표시 설정 (modal 모드)
sourceDisplayColumns?: ModalDisplayColumn[]; // 모달에 표시할 소스 테이블 컬럼 (라벨 포함)
searchFields?: string[]; // 검색에 사용할 필드
// 화면 기반 모달 (옵션)
screenId?: number;
titleTemplate?: {
prefix?: string;
columnKey?: string;
@ -84,25 +100,55 @@ export interface RepeaterFeatureOptions {
multiSelect: boolean;
}
// 데이터 소스 설정
export interface RepeaterDataSource {
// inline 모드: 현재 테이블 설정은 필요 없음 (컬럼만 선택)
// modal 모드: 소스 테이블 설정
sourceTable?: string; // 검색할 테이블 (엔티티 참조 테이블)
foreignKey?: string; // 현재 테이블의 FK 컬럼 (part_objid 등)
referenceKey?: string; // 소스 테이블의 PK 컬럼 (id 등)
displayColumn?: string; // 표시할 컬럼 (item_name 등)
// 추가 필터
filter?: {
column: string;
value: string;
};
}
// 컬럼 매핑 (modal 모드에서 소스→타겟 복사용)
export interface ColumnMapping {
sourceColumn: string;
targetColumn: string;
transform?: "copy" | "reference"; // copy: 값 복사, reference: ID 참조
}
// 계산 규칙
export interface CalculationRule {
id: string;
targetColumn: string;
formula: string; // 예: "quantity * unit_price"
label?: string;
}
// 메인 설정 타입
export interface UnifiedRepeaterConfig {
// 렌더링 모드
renderMode: RepeaterRenderMode;
// 데이터 소스 설정
dataSource: {
tableName: string; // 데이터 테이블
foreignKey: string; // 연결 키 (FK) - 데이터 테이블의 컬럼
referenceKey: string; // 상위 키 - 현재 화면 테이블의 컬럼 (부모 ID)
filter?: { // 추가 필터 조건
column: string;
value: string;
};
};
dataSource: RepeaterDataSource;
// 컬럼 설정
// 컬럼 설정 (inline: 입력 컬럼, modal: 표시 컬럼)
columns: RepeaterColumnConfig[];
// 컬럼 매핑 (modal 모드)
columnMappings?: ColumnMapping[];
// 계산 규칙 (modal 모드)
calculationRules?: CalculationRule[];
// 모달 설정 (modal, mixed 모드)
modal?: RepeaterModalConfig;
@ -141,14 +187,12 @@ export interface UnifiedRepeaterProps {
// 기본 설정값
export const DEFAULT_REPEATER_CONFIG: UnifiedRepeaterConfig = {
renderMode: "inline",
dataSource: {
tableName: "",
foreignKey: "",
referenceKey: "",
},
dataSource: {},
columns: [],
modal: {
size: "md",
size: "lg",
sourceDisplayColumns: [],
searchFields: [],
},
button: {
sourceType: "manual",
@ -159,20 +203,20 @@ export const DEFAULT_REPEATER_CONFIG: UnifiedRepeaterConfig = {
features: {
showAddButton: true,
showDeleteButton: true,
inlineEdit: false,
inlineEdit: true,
dragSort: false,
showRowNumber: false,
selectable: false,
multiSelect: false,
multiSelect: true,
},
};
// 고정 옵션들 (콤보박스용)
export const RENDER_MODE_OPTIONS = [
{ value: "inline", label: "인라인 (테이블)" },
{ value: "modal", label: "모달" },
{ value: "inline", label: "인라인 (직접 입력)" },
{ value: "modal", label: "모달 (검색 선택)" },
{ value: "button", label: "버튼" },
{ value: "mixed", label: "혼합 (테이블 + 버튼)" },
{ value: "mixed", label: "혼합 (입력 + 검색)" },
] as const;
export const MODAL_SIZE_OPTIONS = [
@ -227,4 +271,3 @@ export const LABEL_FIELD_OPTIONS = [
{ value: "codeName", label: "코드명" },
{ value: "codeValue", label: "코드값" },
] as const;