558 lines
20 KiB
TypeScript
558 lines
20 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useEffect } from "react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Plus } from "lucide-react";
|
||
import { ItemSelectionModal } from "./ItemSelectionModal";
|
||
import { RepeaterTable } from "./RepeaterTable";
|
||
import { ModalRepeaterTableProps, RepeaterColumnConfig, JoinCondition } from "./types";
|
||
import { useCalculation } from "./useCalculation";
|
||
import { cn } from "@/lib/utils";
|
||
import { apiClient } from "@/lib/api/client";
|
||
import { ComponentRendererProps } from "@/types/component";
|
||
|
||
// ✅ ComponentRendererProps 상속으로 필수 props 자동 확보
|
||
export interface ModalRepeaterTableComponentProps extends ComponentRendererProps {
|
||
config?: ModalRepeaterTableProps;
|
||
// ModalRepeaterTableProps의 개별 prop들도 지원 (호환성)
|
||
sourceTable?: string;
|
||
sourceColumns?: string[];
|
||
sourceSearchFields?: string[];
|
||
targetTable?: string;
|
||
modalTitle?: string;
|
||
modalButtonText?: string;
|
||
multiSelect?: boolean;
|
||
columns?: RepeaterColumnConfig[];
|
||
calculationRules?: any[];
|
||
value?: any[];
|
||
onChange?: (newData: any[]) => void;
|
||
uniqueField?: string;
|
||
filterCondition?: Record<string, any>;
|
||
companyCode?: string;
|
||
}
|
||
|
||
/**
|
||
* 외부 테이블에서 참조 값을 조회하는 함수
|
||
* @param referenceTable 참조 테이블명 (예: "customer_item_mapping")
|
||
* @param referenceField 참조할 컬럼명 (예: "basic_price")
|
||
* @param joinConditions 조인 조건 배열
|
||
* @param sourceItem 소스 데이터 (모달에서 선택한 항목)
|
||
* @param currentItem 현재 빌드 중인 항목 (이미 설정된 필드들)
|
||
* @returns 참조된 값 또는 undefined
|
||
*/
|
||
async function fetchReferenceValue(
|
||
referenceTable: string,
|
||
referenceField: string,
|
||
joinConditions: JoinCondition[],
|
||
sourceItem: any,
|
||
currentItem: any
|
||
): Promise<any> {
|
||
if (joinConditions.length === 0) {
|
||
console.warn("⚠️ 조인 조건이 없습니다. 참조 조회를 건너뜁니다.");
|
||
return undefined;
|
||
}
|
||
|
||
try {
|
||
// 조인 조건을 WHERE 절로 변환
|
||
const whereConditions: Record<string, any> = {};
|
||
|
||
for (const condition of joinConditions) {
|
||
const { sourceTable = "target", sourceField, targetField, operator = "=" } = condition;
|
||
|
||
// 소스 테이블에 따라 값을 가져오기
|
||
let value: any;
|
||
if (sourceTable === "source") {
|
||
// 소스 테이블 (item_info 등): 모달에서 선택한 원본 데이터
|
||
value = sourceItem[sourceField];
|
||
console.log(` 📘 소스 테이블에서 값 가져오기: ${sourceField} =`, value);
|
||
} else {
|
||
// 저장 테이블 (sales_order_mng 등): 반복 테이블에 이미 복사된 값
|
||
value = currentItem[sourceField];
|
||
console.log(` 📗 저장 테이블(반복테이블)에서 값 가져오기: ${sourceField} =`, value);
|
||
}
|
||
|
||
if (value === undefined || value === null) {
|
||
console.warn(`⚠️ 조인 조건의 소스 필드 "${sourceField}" 값이 없습니다. (sourceTable: ${sourceTable})`);
|
||
return undefined;
|
||
}
|
||
|
||
// 연산자가 "=" 인 경우만 지원 (확장 가능)
|
||
if (operator === "=") {
|
||
whereConditions[targetField] = value;
|
||
} else {
|
||
console.warn(`⚠️ 연산자 "${operator}"는 아직 지원되지 않습니다.`);
|
||
}
|
||
}
|
||
|
||
console.log(`🔍 참조 조회 API 호출:`, {
|
||
table: referenceTable,
|
||
field: referenceField,
|
||
where: whereConditions,
|
||
});
|
||
|
||
// API 호출: 테이블 데이터 조회 (POST 방식)
|
||
const requestBody = {
|
||
search: whereConditions, // ✅ filters → search 변경 (백엔드 파라미터명)
|
||
size: 1, // 첫 번째 결과만 가져오기
|
||
page: 1,
|
||
};
|
||
|
||
console.log("📤 API 요청 Body:", JSON.stringify(requestBody, null, 2));
|
||
|
||
const response = await apiClient.post(
|
||
`/table-management/tables/${referenceTable}/data`,
|
||
requestBody
|
||
);
|
||
|
||
console.log("📥 API 전체 응답:", {
|
||
success: response.data.success,
|
||
dataLength: response.data.data?.data?.length, // ✅ data.data.data 구조
|
||
total: response.data.data?.total, // ✅ data.data.total
|
||
firstRow: response.data.data?.data?.[0], // ✅ data.data.data[0]
|
||
});
|
||
|
||
if (response.data.success && response.data.data?.data?.length > 0) {
|
||
const firstRow = response.data.data.data[0]; // ✅ data.data.data[0]
|
||
const value = firstRow[referenceField];
|
||
|
||
console.log(`✅ 참조 조회 성공:`, {
|
||
table: referenceTable,
|
||
field: referenceField,
|
||
value,
|
||
fullRow: firstRow,
|
||
});
|
||
|
||
return value;
|
||
} else {
|
||
console.warn(`⚠️ 참조 조회 결과 없음:`, {
|
||
table: referenceTable,
|
||
where: whereConditions,
|
||
responseData: response.data.data,
|
||
total: response.data.total,
|
||
});
|
||
return undefined;
|
||
}
|
||
} catch (error) {
|
||
console.error(`❌ 참조 조회 API 오류:`, error);
|
||
return undefined;
|
||
}
|
||
}
|
||
|
||
export function ModalRepeaterTableComponent({
|
||
// ComponentRendererProps (자동 전달)
|
||
component,
|
||
isDesignMode = false,
|
||
isSelected = false,
|
||
isInteractive = false,
|
||
onClick,
|
||
onDragStart,
|
||
onDragEnd,
|
||
className,
|
||
style,
|
||
formData,
|
||
onFormDataChange,
|
||
|
||
// ModalRepeaterTable 전용 props
|
||
config,
|
||
sourceTable: propSourceTable,
|
||
sourceColumns: propSourceColumns,
|
||
sourceSearchFields: propSourceSearchFields,
|
||
targetTable: propTargetTable,
|
||
modalTitle: propModalTitle,
|
||
modalButtonText: propModalButtonText,
|
||
multiSelect: propMultiSelect,
|
||
columns: propColumns,
|
||
calculationRules: propCalculationRules,
|
||
value: propValue,
|
||
onChange: propOnChange,
|
||
uniqueField: propUniqueField,
|
||
filterCondition: propFilterCondition,
|
||
companyCode: propCompanyCode,
|
||
|
||
...props
|
||
}: ModalRepeaterTableComponentProps) {
|
||
// ✅ config 또는 component.config 또는 개별 prop 우선순위로 병합
|
||
const componentConfig = {
|
||
...config,
|
||
...component?.config,
|
||
};
|
||
|
||
// config prop 우선, 없으면 개별 prop 사용
|
||
const sourceTable = componentConfig?.sourceTable || propSourceTable || "";
|
||
const targetTable = componentConfig?.targetTable || propTargetTable;
|
||
|
||
// sourceColumns에서 빈 문자열 필터링
|
||
const rawSourceColumns = componentConfig?.sourceColumns || propSourceColumns || [];
|
||
const sourceColumns = rawSourceColumns.filter((col: string) => col && col.trim() !== "");
|
||
|
||
const sourceSearchFields = componentConfig?.sourceSearchFields || propSourceSearchFields || [];
|
||
const modalTitle = componentConfig?.modalTitle || propModalTitle || "항목 검색";
|
||
const modalButtonText = componentConfig?.modalButtonText || propModalButtonText || "품목 검색";
|
||
const multiSelect = componentConfig?.multiSelect ?? propMultiSelect ?? true;
|
||
const calculationRules = componentConfig?.calculationRules || propCalculationRules || [];
|
||
|
||
// ✅ value는 formData[columnName] 우선, 없으면 prop 사용
|
||
const columnName = component?.columnName;
|
||
const value = (columnName && formData?.[columnName]) || componentConfig?.value || propValue || [];
|
||
|
||
// ✅ 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);
|
||
}
|
||
};
|
||
|
||
// uniqueField 자동 보정: order_no는 item_info 테이블에 없으므로 item_number로 변경
|
||
const rawUniqueField = componentConfig?.uniqueField || propUniqueField;
|
||
const uniqueField = rawUniqueField === "order_no" && sourceTable === "item_info"
|
||
? "item_number"
|
||
: rawUniqueField;
|
||
|
||
const filterCondition = componentConfig?.filterCondition || propFilterCondition || {};
|
||
const companyCode = componentConfig?.companyCode || propCompanyCode;
|
||
const [modalOpen, setModalOpen] = useState(false);
|
||
|
||
// columns가 비어있으면 sourceColumns로부터 자동 생성
|
||
const columns = React.useMemo((): RepeaterColumnConfig[] => {
|
||
const configuredColumns = componentConfig?.columns || propColumns || [];
|
||
|
||
if (configuredColumns.length > 0) {
|
||
console.log("✅ 설정된 columns 사용:", configuredColumns);
|
||
return configuredColumns;
|
||
}
|
||
|
||
// columns가 비어있으면 sourceColumns로부터 자동 생성
|
||
if (sourceColumns.length > 0) {
|
||
console.log("🔄 sourceColumns로부터 자동 생성:", sourceColumns);
|
||
const autoColumns: RepeaterColumnConfig[] = sourceColumns.map((field) => ({
|
||
field: field,
|
||
label: field, // 필드명을 라벨로 사용 (나중에 설정에서 변경 가능)
|
||
editable: false, // 기본적으로 읽기 전용
|
||
type: "text" as const,
|
||
width: "150px",
|
||
}));
|
||
console.log("📋 자동 생성된 columns:", autoColumns);
|
||
return autoColumns;
|
||
}
|
||
|
||
console.warn("⚠️ columns와 sourceColumns 모두 비어있음!");
|
||
return [];
|
||
}, [componentConfig?.columns, propColumns, sourceColumns]);
|
||
|
||
// 초기 props 로깅
|
||
useEffect(() => {
|
||
if (rawSourceColumns.length !== sourceColumns.length) {
|
||
console.warn(`⚠️ sourceColumns 필터링: ${rawSourceColumns.length}개 → ${sourceColumns.length}개 (빈 문자열 제거)`);
|
||
}
|
||
|
||
if (rawUniqueField !== uniqueField) {
|
||
console.warn(`⚠️ uniqueField 자동 보정: "${rawUniqueField}" → "${uniqueField}"`);
|
||
}
|
||
|
||
console.log("🎬 ModalRepeaterTableComponent 마운트:", {
|
||
columnsLength: columns.length,
|
||
sourceTable,
|
||
sourceColumns,
|
||
uniqueField,
|
||
});
|
||
|
||
if (columns.length === 0) {
|
||
console.error("❌ columns가 비어있습니다! sourceColumns:", sourceColumns);
|
||
} else {
|
||
console.log("✅ columns 설정 완료:", columns.map(c => c.label || c.field).join(", "));
|
||
}
|
||
}, []);
|
||
|
||
// value 변경 감지
|
||
useEffect(() => {
|
||
console.log("📦 ModalRepeaterTableComponent value 변경:", {
|
||
valueLength: value.length,
|
||
});
|
||
}, [value]);
|
||
|
||
// 🆕 저장 요청 시에만 데이터 전달 (beforeFormSave 이벤트 리스너)
|
||
useEffect(() => {
|
||
const handleSaveRequest = async (event: Event) => {
|
||
const componentKey = columnName || component?.id || "modal_repeater_data";
|
||
|
||
console.log("🔔 [ModalRepeaterTable] beforeFormSave 이벤트 수신!", {
|
||
componentKey,
|
||
itemsCount: value.length,
|
||
hasOnFormDataChange: !!onFormDataChange,
|
||
columnName,
|
||
componentId: component?.id,
|
||
targetTable,
|
||
});
|
||
|
||
if (value.length === 0) {
|
||
console.warn("⚠️ [ModalRepeaterTable] 저장할 데이터 없음");
|
||
return;
|
||
}
|
||
|
||
// 🔥 sourceColumns에 포함된 컬럼 제외 (조인된 컬럼 제거)
|
||
console.log("🔍 [ModalRepeaterTable] 필터링 전 데이터:", {
|
||
sourceColumns,
|
||
sourceTable,
|
||
targetTable,
|
||
sampleItem: value[0],
|
||
itemKeys: value[0] ? Object.keys(value[0]) : [],
|
||
});
|
||
|
||
const filteredData = value.map((item: any) => {
|
||
const filtered: Record<string, any> = {};
|
||
|
||
Object.keys(item).forEach((key) => {
|
||
// sourceColumns에 포함된 컬럼은 제외 (item_info 테이블의 컬럼)
|
||
if (sourceColumns.includes(key)) {
|
||
console.log(` ⛔ ${key} 제외 (sourceColumn)`);
|
||
return;
|
||
}
|
||
// 메타데이터 필드도 제외
|
||
if (key.startsWith("_")) {
|
||
console.log(` ⛔ ${key} 제외 (메타데이터)`);
|
||
return;
|
||
}
|
||
filtered[key] = item[key];
|
||
});
|
||
|
||
return filtered;
|
||
});
|
||
|
||
console.log("✅ [ModalRepeaterTable] 필터링 후 데이터:", {
|
||
filteredItemKeys: filteredData[0] ? Object.keys(filteredData[0]) : [],
|
||
sampleFilteredItem: filteredData[0],
|
||
});
|
||
|
||
// 🔥 targetTable 메타데이터를 배열 항목에 추가
|
||
const dataWithTargetTable = targetTable
|
||
? filteredData.map((item: any) => ({
|
||
...item,
|
||
_targetTable: targetTable, // 백엔드가 인식할 메타데이터
|
||
}))
|
||
: filteredData;
|
||
|
||
// ✅ CustomEvent의 detail에 데이터 추가
|
||
if (event instanceof CustomEvent && event.detail) {
|
||
event.detail.formData[componentKey] = dataWithTargetTable;
|
||
console.log("✅ [ModalRepeaterTable] context.formData에 데이터 추가 완료:", {
|
||
key: componentKey,
|
||
itemCount: dataWithTargetTable.length,
|
||
targetTable: targetTable || "미설정 (화면 설계에서 설정 필요)",
|
||
sampleItem: dataWithTargetTable[0],
|
||
});
|
||
}
|
||
|
||
// 기존 onFormDataChange도 호출 (호환성)
|
||
if (onFormDataChange) {
|
||
onFormDataChange(componentKey, dataWithTargetTable);
|
||
console.log("✅ [ModalRepeaterTable] onFormDataChange 호출 완료");
|
||
}
|
||
};
|
||
|
||
// 저장 버튼 클릭 시 데이터 수집
|
||
window.addEventListener("beforeFormSave", handleSaveRequest as EventListener);
|
||
|
||
return () => {
|
||
window.removeEventListener("beforeFormSave", handleSaveRequest as EventListener);
|
||
};
|
||
}, [value, columnName, component?.id, onFormDataChange, targetTable]);
|
||
|
||
const { calculateRow, calculateAll } = useCalculation(calculationRules);
|
||
|
||
// 초기 데이터에 계산 필드 적용
|
||
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
|
||
}, []);
|
||
|
||
const handleAddItems = async (items: any[]) => {
|
||
console.log("➕ handleAddItems 호출:", items.length, "개 항목");
|
||
console.log("📋 소스 데이터:", items);
|
||
|
||
// 매핑 규칙에 따라 데이터 변환 (비동기 처리)
|
||
const mappedItems = await Promise.all(items.map(async (sourceItem) => {
|
||
const newItem: any = {};
|
||
|
||
// ⚠️ 중요: reference 매핑은 다른 컬럼에 의존할 수 있으므로
|
||
// 1단계: source/manual 매핑을 먼저 처리
|
||
// 2단계: reference 매핑을 나중에 처리
|
||
|
||
const referenceColumns: typeof columns = [];
|
||
const otherColumns: typeof columns = [];
|
||
|
||
for (const col of columns) {
|
||
if (col.mapping?.type === "reference") {
|
||
referenceColumns.push(col);
|
||
} else {
|
||
otherColumns.push(col);
|
||
}
|
||
}
|
||
|
||
// 1단계: source/manual 컬럼 먼저 처리
|
||
for (const col of otherColumns) {
|
||
console.log(`🔄 컬럼 "${col.field}" 매핑 처리:`, col.mapping);
|
||
|
||
// 1. 매핑 규칙이 있는 경우
|
||
if (col.mapping) {
|
||
if (col.mapping.type === "source") {
|
||
// 소스 테이블 컬럼에서 복사
|
||
const sourceField = col.mapping.sourceField;
|
||
if (sourceField && sourceItem[sourceField] !== undefined) {
|
||
newItem[col.field] = sourceItem[sourceField];
|
||
console.log(` ✅ 소스 복사: ${sourceField} → ${col.field}:`, newItem[col.field]);
|
||
} else {
|
||
console.warn(` ⚠️ 소스 필드 "${sourceField}" 값이 없음`);
|
||
}
|
||
} else if (col.mapping.type === "manual") {
|
||
// 사용자 입력 (빈 값)
|
||
newItem[col.field] = undefined;
|
||
console.log(` ✏️ 수동 입력 필드`);
|
||
}
|
||
}
|
||
// 2. 매핑 규칙이 없는 경우 - 소스 데이터에서 같은 필드명으로 복사
|
||
else if (sourceItem[col.field] !== undefined) {
|
||
newItem[col.field] = sourceItem[col.field];
|
||
console.log(` 📝 직접 복사: ${col.field}:`, newItem[col.field]);
|
||
}
|
||
|
||
// 3. 기본값 적용
|
||
if (col.defaultValue !== undefined && newItem[col.field] === undefined) {
|
||
newItem[col.field] = col.defaultValue;
|
||
console.log(` 🎯 기본값 적용: ${col.field}:`, col.defaultValue);
|
||
}
|
||
}
|
||
|
||
// 2단계: reference 컬럼 처리 (다른 컬럼들이 모두 설정된 후)
|
||
console.log("🔗 2단계: reference 컬럼 처리 시작");
|
||
for (const col of referenceColumns) {
|
||
console.log(`🔄 컬럼 "${col.field}" 참조 매핑 처리:`, col.mapping);
|
||
|
||
// 외부 테이블 참조 (API 호출)
|
||
console.log(` ⏳ 참조 조회 시작: ${col.mapping?.referenceTable}.${col.mapping?.referenceField}`);
|
||
|
||
try {
|
||
const referenceValue = await fetchReferenceValue(
|
||
col.mapping!.referenceTable!,
|
||
col.mapping!.referenceField!,
|
||
col.mapping!.joinCondition || [],
|
||
sourceItem,
|
||
newItem
|
||
);
|
||
|
||
if (referenceValue !== null && referenceValue !== undefined) {
|
||
newItem[col.field] = referenceValue;
|
||
console.log(` ✅ 참조 조회 성공: ${col.field}:`, referenceValue);
|
||
} else {
|
||
newItem[col.field] = undefined;
|
||
console.warn(` ⚠️ 참조 조회 결과 없음`);
|
||
}
|
||
} catch (error) {
|
||
console.error(` ❌ 참조 조회 오류:`, error);
|
||
newItem[col.field] = undefined;
|
||
}
|
||
|
||
// 기본값 적용
|
||
if (col.defaultValue !== undefined && newItem[col.field] === undefined) {
|
||
newItem[col.field] = col.defaultValue;
|
||
console.log(` 🎯 기본값 적용: ${col.field}:`, col.defaultValue);
|
||
}
|
||
}
|
||
|
||
console.log("📦 변환된 항목:", newItem);
|
||
return newItem;
|
||
}));
|
||
|
||
// 계산 필드 업데이트
|
||
const calculatedItems = calculateAll(mappedItems);
|
||
|
||
// 기존 데이터에 추가
|
||
const newData = [...value, ...calculatedItems];
|
||
console.log("✅ 최종 데이터:", newData.length, "개 항목");
|
||
|
||
// ✅ 통합 onChange 호출 (formData 반영 포함)
|
||
handleChange(newData);
|
||
};
|
||
|
||
const handleRowChange = (index: number, newRow: any) => {
|
||
// 계산 필드 업데이트
|
||
const calculatedRow = calculateRow(newRow);
|
||
|
||
// 데이터 업데이트
|
||
const newData = [...value];
|
||
newData[index] = calculatedRow;
|
||
|
||
// ✅ 통합 onChange 호출 (formData 반영 포함)
|
||
handleChange(newData);
|
||
};
|
||
|
||
const handleRowDelete = (index: number) => {
|
||
const newData = value.filter((_, i) => i !== index);
|
||
|
||
// ✅ 통합 onChange 호출 (formData 반영 포함)
|
||
handleChange(newData);
|
||
};
|
||
|
||
// 컬럼명 -> 라벨명 매핑 생성
|
||
const columnLabels = columns.reduce((acc, col) => {
|
||
acc[col.field] = col.label;
|
||
return acc;
|
||
}, {} as Record<string, string>);
|
||
|
||
return (
|
||
<div className={cn("space-y-4", className)}>
|
||
{/* 추가 버튼 */}
|
||
<div className="flex justify-between items-center">
|
||
<div className="text-sm text-muted-foreground">
|
||
{value.length > 0 && `${value.length}개 항목`}
|
||
</div>
|
||
<Button
|
||
onClick={() => setModalOpen(true)}
|
||
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||
>
|
||
<Plus className="h-4 w-4 mr-2" />
|
||
{modalButtonText}
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Repeater 테이블 */}
|
||
<RepeaterTable
|
||
columns={columns}
|
||
data={value}
|
||
onDataChange={handleChange}
|
||
onRowChange={handleRowChange}
|
||
onRowDelete={handleRowDelete}
|
||
/>
|
||
|
||
{/* 항목 선택 모달 */}
|
||
<ItemSelectionModal
|
||
open={modalOpen}
|
||
onOpenChange={setModalOpen}
|
||
sourceTable={sourceTable}
|
||
sourceColumns={sourceColumns}
|
||
sourceSearchFields={sourceSearchFields}
|
||
multiSelect={multiSelect}
|
||
filterCondition={filterCondition}
|
||
modalTitle={modalTitle}
|
||
alreadySelected={value}
|
||
uniqueField={uniqueField}
|
||
onSelect={handleAddItems}
|
||
columnLabels={columnLabels}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|