2351 lines
94 KiB
TypeScript
2351 lines
94 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useMemo, useCallback } from "react";
|
|
import { useSearchParams } from "next/navigation";
|
|
import { ComponentRendererProps } from "@/types/component";
|
|
import { SelectedItemsDetailInputConfig, AdditionalFieldDefinition, ItemData, GroupEntry, DisplayItem } from "./types";
|
|
import { useModalDataStore, ModalDataItem } from "@/stores/modalDataStore";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { X } from "lucide-react";
|
|
import * as LucideIcons from "lucide-react";
|
|
import { commonCodeApi } from "@/lib/api/commonCode";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface SelectedItemsDetailInputComponentProps extends ComponentRendererProps {
|
|
config?: SelectedItemsDetailInputConfig;
|
|
}
|
|
|
|
/**
|
|
* SelectedItemsDetailInput 컴포넌트
|
|
* 선택된 항목들의 상세 정보를 입력하는 컴포넌트
|
|
*/
|
|
export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInputComponentProps> = ({
|
|
component,
|
|
isDesignMode = false,
|
|
isSelected = false,
|
|
isInteractive = false,
|
|
onClick,
|
|
onDragStart,
|
|
onDragEnd,
|
|
config,
|
|
className,
|
|
style,
|
|
formData,
|
|
onFormDataChange,
|
|
screenId,
|
|
...props
|
|
}) => {
|
|
// 🆕 groupedData 추출 (DynamicComponentRenderer에서 전달)
|
|
const groupedData = (props as any).groupedData || (props as any)._groupedData;
|
|
// 🆕 URL 파라미터에서 dataSourceId 읽기
|
|
const searchParams = useSearchParams();
|
|
const urlDataSourceId = searchParams?.get("dataSourceId") || undefined;
|
|
|
|
// 컴포넌트 설정
|
|
const componentConfig = useMemo(
|
|
() =>
|
|
({
|
|
dataSourceId: component.id || "default",
|
|
displayColumns: [],
|
|
additionalFields: [],
|
|
layout: "grid",
|
|
inputMode: "inline", // 🆕 기본값
|
|
showIndex: true,
|
|
allowRemove: false,
|
|
emptyMessage: "전달받은 데이터가 없습니다.",
|
|
targetTable: "",
|
|
...config,
|
|
...component.config,
|
|
}) as SelectedItemsDetailInputConfig,
|
|
[config, component.config, component.id],
|
|
);
|
|
|
|
// 🆕 dataSourceId 우선순위: URL 파라미터 > 컴포넌트 설정 > component.id
|
|
const dataSourceId = useMemo(
|
|
() => urlDataSourceId || componentConfig.dataSourceId || component.id || "default",
|
|
[urlDataSourceId, componentConfig.dataSourceId, component.id],
|
|
);
|
|
|
|
// 전체 레지스트리를 가져와서 컴포넌트 내부에서 필터링 (캐싱 문제 회피)
|
|
const dataRegistry = useModalDataStore((state) => state.dataRegistry);
|
|
const modalData = useMemo(() => dataRegistry[dataSourceId] || [], [dataRegistry, dataSourceId]);
|
|
|
|
// 전체 dataRegistry를 사용 (모든 누적 데이터에 접근 가능)
|
|
console.log("📦 [SelectedItemsDetailInput] 사용 가능한 모든 데이터:", {
|
|
keys: Object.keys(dataRegistry),
|
|
counts: Object.entries(dataRegistry).map(([key, data]: [string, any]) => ({
|
|
table: key,
|
|
count: data.length,
|
|
})),
|
|
});
|
|
|
|
const updateItemData = useModalDataStore((state) => state.updateItemData);
|
|
|
|
// 🆕 새로운 데이터 구조: 품목별로 여러 개의 상세 데이터
|
|
const [items, setItems] = useState<ItemData[]>([]);
|
|
|
|
// 🆕 입력 모드 상태 (modal 모드일 때 사용)
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [editingItemId, setEditingItemId] = useState<string | null>(null); // 현재 편집 중인 품목 ID
|
|
const [editingGroupId, setEditingGroupId] = useState<string | null>(null); // 현재 편집 중인 그룹 ID
|
|
const [editingDetailId, setEditingDetailId] = useState<string | null>(null); // 현재 편집 중인 항목 ID
|
|
|
|
// 🆕 코드 카테고리별 옵션 캐싱
|
|
const [codeOptions, setCodeOptions] = useState<Record<string, Array<{ label: string; value: string }>>>({});
|
|
|
|
// 디버깅 로그
|
|
useEffect(() => {
|
|
console.log("📍 [SelectedItemsDetailInput] 설정 확인:", {
|
|
inputMode: componentConfig.inputMode,
|
|
urlDataSourceId,
|
|
configDataSourceId: componentConfig.dataSourceId,
|
|
componentId: component.id,
|
|
finalDataSourceId: dataSourceId,
|
|
isEditing,
|
|
editingItemId,
|
|
});
|
|
}, [
|
|
urlDataSourceId,
|
|
componentConfig.dataSourceId,
|
|
component.id,
|
|
dataSourceId,
|
|
componentConfig.inputMode,
|
|
isEditing,
|
|
editingItemId,
|
|
]);
|
|
|
|
// 🆕 필드에 codeCategory가 있으면 자동으로 옵션 로드
|
|
useEffect(() => {
|
|
const loadCodeOptions = async () => {
|
|
console.log("🔄 [loadCodeOptions] 시작:", {
|
|
additionalFields: componentConfig.additionalFields,
|
|
targetTable: componentConfig.targetTable,
|
|
});
|
|
|
|
// 🆕 code/category 타입 필드 + codeCategory가 있는 필드 모두 처리
|
|
const codeFields = componentConfig.additionalFields?.filter(
|
|
(field) => field.inputType === "code" || field.inputType === "category",
|
|
);
|
|
|
|
console.log("🔍 [loadCodeOptions] code/category 필드:", codeFields);
|
|
|
|
if (!codeFields || codeFields.length === 0) {
|
|
console.log("⚠️ [loadCodeOptions] code/category 타입 필드가 없습니다");
|
|
return;
|
|
}
|
|
|
|
const newOptions: Record<string, Array<{ label: string; value: string }>> = { ...codeOptions };
|
|
|
|
// 🆕 대상 테이블의 컬럼 메타데이터에서 codeCategory 가져오기
|
|
const targetTable = componentConfig.targetTable;
|
|
let targetTableColumns: any[] = [];
|
|
|
|
if (targetTable) {
|
|
try {
|
|
const { tableTypeApi } = await import("@/lib/api/screen");
|
|
const columnsResponse = await tableTypeApi.getColumns(targetTable);
|
|
targetTableColumns = columnsResponse || [];
|
|
} catch (error) {
|
|
console.error("❌ 대상 테이블 컬럼 조회 실패:", error);
|
|
}
|
|
}
|
|
|
|
for (const field of codeFields) {
|
|
// 이미 로드된 옵션이면 스킵
|
|
if (newOptions[field.name]) {
|
|
console.log(`⏭️ 이미 로드된 옵션 (${field.name})`);
|
|
continue;
|
|
}
|
|
|
|
try {
|
|
// 🆕 category 타입이면 table_column_category_values에서 로드
|
|
if (field.inputType === "category" && targetTable) {
|
|
console.log(`🔄 카테고리 옵션 로드 시도 (${targetTable}.${field.name})`);
|
|
|
|
const { getCategoryValues } = await import("@/lib/api/tableCategoryValue");
|
|
const response = await getCategoryValues(targetTable, field.name, false);
|
|
|
|
console.log("📥 getCategoryValues 응답:", response);
|
|
|
|
if (response.success && response.data) {
|
|
newOptions[field.name] = response.data.map((item: any) => ({
|
|
label: item.value_label || item.valueLabel,
|
|
value: item.value_code || item.valueCode,
|
|
}));
|
|
console.log(`✅ 카테고리 옵션 로드 완료 (${field.name}):`, newOptions[field.name]);
|
|
} else {
|
|
console.error(`❌ 카테고리 옵션 로드 실패 (${field.name}):`, response.error || "응답 없음");
|
|
}
|
|
} else if (field.inputType === "code") {
|
|
// code 타입이면 기존대로 code_info에서 로드
|
|
// 이미 codeCategory가 있으면 사용
|
|
let codeCategory = field.codeCategory;
|
|
|
|
// 🆕 codeCategory가 없으면 대상 테이블 컬럼에서 찾기
|
|
if (!codeCategory && targetTableColumns.length > 0) {
|
|
const columnMeta = targetTableColumns.find(
|
|
(col: any) => (col.columnName || col.column_name) === field.name,
|
|
);
|
|
if (columnMeta) {
|
|
codeCategory = columnMeta.codeCategory || columnMeta.code_category;
|
|
console.log(`🔍 필드 "${field.name}"의 codeCategory를 메타데이터에서 찾음:`, codeCategory);
|
|
}
|
|
}
|
|
|
|
if (!codeCategory) {
|
|
console.warn(`⚠️ 필드 "${field.name}"의 codeCategory를 찾을 수 없습니다`);
|
|
continue;
|
|
}
|
|
|
|
const response = await commonCodeApi.options.getOptions(codeCategory);
|
|
if (response.success && response.data) {
|
|
newOptions[field.name] = response.data.map((opt) => ({
|
|
label: opt.label,
|
|
value: opt.value,
|
|
}));
|
|
console.log(`✅ 코드 옵션 로드 완료 (${codeCategory}):`, newOptions[field.name]);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error(`❌ 옵션 로드 실패 (${field.name}):`, error);
|
|
}
|
|
}
|
|
|
|
setCodeOptions(newOptions);
|
|
};
|
|
|
|
loadCodeOptions();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [componentConfig.additionalFields, componentConfig.targetTable]);
|
|
|
|
// 🆕 모달 데이터를 ItemData 구조로 변환 (그룹별 구조)
|
|
useEffect(() => {
|
|
// 🆕 수정 모드: groupedData 또는 formData에서 데이터 로드 (URL에 mode=edit이 있으면)
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const mode = urlParams.get("mode");
|
|
|
|
// 🔧 데이터 소스 우선순위: groupedData > formData (배열) > formData (객체)
|
|
const sourceData = groupedData && Array.isArray(groupedData) && groupedData.length > 0
|
|
? groupedData
|
|
: formData;
|
|
|
|
if (mode === "edit" && sourceData) {
|
|
// 배열인지 단일 객체인지 확인
|
|
const isArray = Array.isArray(sourceData);
|
|
const dataArray = isArray ? sourceData : [sourceData];
|
|
|
|
if (dataArray.length === 0 || (dataArray.length === 1 && Object.keys(dataArray[0]).length === 0)) {
|
|
console.warn("⚠️ [SelectedItemsDetailInput] 데이터가 비어있음");
|
|
return;
|
|
}
|
|
|
|
console.log(
|
|
`📝 [SelectedItemsDetailInput] 수정 모드 - ${isArray ? "그룹 레코드" : "단일 레코드"} (${dataArray.length}개)`,
|
|
);
|
|
console.log("📝 [SelectedItemsDetailInput] 데이터 소스:", {
|
|
fromGroupedData: groupedData && Array.isArray(groupedData) && groupedData.length > 0,
|
|
dataArray: JSON.stringify(dataArray, null, 2),
|
|
});
|
|
|
|
const groups = componentConfig.fieldGroups || [];
|
|
const additionalFields = componentConfig.additionalFields || [];
|
|
|
|
// 🆕 첫 번째 레코드의 originalData를 기본 항목으로 설정
|
|
const firstRecord = dataArray[0];
|
|
const mainFieldGroups: Record<string, GroupEntry[]> = {};
|
|
|
|
// 🔧 각 그룹별로 고유한 엔트리만 수집 (중복 제거)
|
|
groups.forEach((group) => {
|
|
const groupFields = additionalFields.filter((field: any) => field.groupId === group.id);
|
|
|
|
if (groupFields.length === 0) {
|
|
mainFieldGroups[group.id] = [];
|
|
return;
|
|
}
|
|
|
|
// 🆕 각 레코드에서 그룹 데이터 추출
|
|
const entriesMap = new Map<string, GroupEntry>();
|
|
|
|
dataArray.forEach((record) => {
|
|
const entryData: Record<string, any> = {};
|
|
|
|
groupFields.forEach((field: any) => {
|
|
let fieldValue = record[field.name];
|
|
|
|
// 🆕 값이 없으면 autoFillFrom 로직 적용
|
|
if ((fieldValue === undefined || fieldValue === null) && field.autoFillFrom) {
|
|
let sourceData: any = null;
|
|
|
|
if (field.autoFillFromTable) {
|
|
// 특정 테이블에서 가져오기
|
|
const tableData = dataRegistry[field.autoFillFromTable];
|
|
if (tableData && tableData.length > 0) {
|
|
sourceData = tableData[0].originalData || tableData[0];
|
|
console.log(
|
|
`✅ [수정모드 autoFill] ${field.name} ← ${field.autoFillFrom} (테이블: ${field.autoFillFromTable}):`,
|
|
sourceData?.[field.autoFillFrom],
|
|
);
|
|
} else {
|
|
// 🆕 dataRegistry에 없으면 record에서 직접 찾기 (Entity Join된 경우)
|
|
sourceData = record;
|
|
console.log(
|
|
`⚠️ [수정모드 autoFill] dataRegistry에 ${field.autoFillFromTable} 없음, record에서 직접 찾기`,
|
|
);
|
|
}
|
|
} else {
|
|
// record 자체에서 가져오기
|
|
sourceData = record;
|
|
console.log(
|
|
`✅ [수정모드 autoFill] ${field.name} ← ${field.autoFillFrom} (레코드):`,
|
|
sourceData?.[field.autoFillFrom],
|
|
);
|
|
}
|
|
|
|
if (sourceData && sourceData[field.autoFillFrom] !== undefined) {
|
|
fieldValue = sourceData[field.autoFillFrom];
|
|
console.log(`✅ [수정모드 autoFill] ${field.name} 값 설정:`, fieldValue);
|
|
} else {
|
|
// 🆕 Entity Join의 경우 sourceColumn_fieldName 형식으로도 찾기
|
|
// 예: item_id_standard_price, customer_id_customer_name
|
|
// autoFillFromTable에서 어떤 sourceColumn인지 추론
|
|
const possibleKeys = Object.keys(sourceData || {}).filter((key) =>
|
|
key.endsWith(`_${field.autoFillFrom}`),
|
|
);
|
|
|
|
if (possibleKeys.length > 0) {
|
|
fieldValue = sourceData[possibleKeys[0]];
|
|
console.log(
|
|
`✅ [수정모드 autoFill] ${field.name} Entity Join 키로 찾음 (${possibleKeys[0]}):`,
|
|
fieldValue,
|
|
);
|
|
} else {
|
|
console.warn(
|
|
`⚠️ [수정모드 autoFill] ${field.name} ← ${field.autoFillFrom} 실패 (시도한 키들: ${field.autoFillFrom}, *_${field.autoFillFrom})`,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 🔧 값이 없으면 기본값 사용 (false, 0, "" 등 falsy 값도 유효한 값으로 처리)
|
|
if (fieldValue === undefined || fieldValue === null) {
|
|
// 기본값이 있으면 사용, 없으면 필드 타입에 따라 기본값 설정
|
|
if (field.defaultValue !== undefined) {
|
|
fieldValue = field.defaultValue;
|
|
} else if (field.type === "checkbox") {
|
|
fieldValue = false; // checkbox는 기본값 false
|
|
} else {
|
|
// 다른 타입은 null로 유지 (필수 필드가 아니면 표시 안 됨)
|
|
return;
|
|
}
|
|
}
|
|
|
|
// 🔧 날짜 타입이면 YYYY-MM-DD 형식으로 변환 (타임존 제거)
|
|
if (field.type === "date" || field.type === "datetime") {
|
|
const dateStr = String(fieldValue);
|
|
const match = dateStr.match(/^(\d{4})-(\d{2})-(\d{2})/);
|
|
if (match) {
|
|
const [, year, month, day] = match;
|
|
fieldValue = `${year}-${month}-${day}`; // ISO 형식 유지 (시간 제거)
|
|
}
|
|
}
|
|
|
|
entryData[field.name] = fieldValue;
|
|
});
|
|
|
|
// 🔑 모든 필드 값을 합쳐서 고유 키 생성 (중복 제거 기준)
|
|
const entryKey = JSON.stringify(entryData);
|
|
|
|
if (!entriesMap.has(entryKey)) {
|
|
entriesMap.set(entryKey, {
|
|
id: `${group.id}_entry_${entriesMap.size + 1}`,
|
|
...entryData,
|
|
});
|
|
}
|
|
});
|
|
|
|
mainFieldGroups[group.id] = Array.from(entriesMap.values());
|
|
});
|
|
|
|
// 그룹이 없으면 기본 그룹 생성
|
|
if (groups.length === 0) {
|
|
mainFieldGroups["default"] = [];
|
|
}
|
|
|
|
const newItem: ItemData = {
|
|
id: String(firstRecord.id || firstRecord.item_id || "edit"),
|
|
originalData: firstRecord, // 첫 번째 레코드를 대표 데이터로 사용
|
|
fieldGroups: mainFieldGroups,
|
|
};
|
|
|
|
setItems([newItem]);
|
|
|
|
console.log("✅ [SelectedItemsDetailInput] 수정 모드 데이터 로드 완료:", {
|
|
recordCount: dataArray.length,
|
|
item: newItem,
|
|
fieldGroupsKeys: Object.keys(mainFieldGroups),
|
|
firstGroupEntries: mainFieldGroups[groups[0]?.id]?.length || 0,
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 생성 모드: modalData에서 데이터 로드
|
|
if (modalData && modalData.length > 0) {
|
|
console.log("📦 [SelectedItemsDetailInput] 데이터 수신:", modalData);
|
|
|
|
// 🆕 각 품목마다 빈 fieldGroups 객체를 가진 ItemData 생성
|
|
const groups = componentConfig.fieldGroups || [];
|
|
const newItems: ItemData[] = modalData.map((item) => {
|
|
const fieldGroups: Record<string, GroupEntry[]> = {};
|
|
|
|
// 각 그룹에 대해 빈 배열 초기화
|
|
groups.forEach((group) => {
|
|
fieldGroups[group.id] = [];
|
|
});
|
|
|
|
// 그룹이 없으면 기본 그룹 생성
|
|
if (groups.length === 0) {
|
|
fieldGroups["default"] = [];
|
|
}
|
|
|
|
// 🔧 modalData의 구조 확인: item.originalData가 있으면 그것을 사용, 없으면 item 자체를 사용
|
|
const actualData = (item as any).originalData || item;
|
|
|
|
return {
|
|
id: String(item.id),
|
|
originalData: actualData, // 🔧 실제 데이터 추출
|
|
fieldGroups,
|
|
};
|
|
});
|
|
|
|
setItems(newItems);
|
|
|
|
console.log("✅ [SelectedItemsDetailInput] items 설정 완료:", {
|
|
itemsLength: newItems.length,
|
|
groups: groups.map((g) => g.id),
|
|
firstItem: newItems[0],
|
|
});
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [modalData, component.id, componentConfig.fieldGroups, formData, groupedData]); // groupedData 의존성 추가
|
|
|
|
// 🆕 Cartesian Product 생성 함수 (items에서 모든 그룹의 조합을 생성)
|
|
const generateCartesianProduct = useCallback(
|
|
(itemsList: ItemData[]): Record<string, any>[] => {
|
|
const allRecords: Record<string, any>[] = [];
|
|
const groups = componentConfig.fieldGroups || [];
|
|
const additionalFields = componentConfig.additionalFields || [];
|
|
|
|
itemsList.forEach((item, itemIndex) => {
|
|
// 각 그룹의 엔트리 배열들을 준비
|
|
// 🔧 빈 엔트리 필터링: id만 있고 실제 필드 값이 없는 엔트리는 제외
|
|
const groupEntriesArrays: GroupEntry[][] = groups.map((group) => {
|
|
const entries = item.fieldGroups[group.id] || [];
|
|
const groupFields = additionalFields.filter((f) => f.groupId === group.id);
|
|
|
|
// 실제 필드 값이 하나라도 있는 엔트리만 포함
|
|
return entries.filter((entry) => {
|
|
const hasAnyFieldValue = groupFields.some((field) => {
|
|
const value = entry[field.name];
|
|
return value !== undefined && value !== null && value !== "";
|
|
});
|
|
|
|
if (!hasAnyFieldValue && Object.keys(entry).length <= 1) {
|
|
console.log("⏭️ [generateCartesianProduct] 빈 엔트리 필터링:", {
|
|
entryId: entry.id,
|
|
groupId: group.id,
|
|
entryKeys: Object.keys(entry),
|
|
});
|
|
}
|
|
|
|
return hasAnyFieldValue;
|
|
});
|
|
});
|
|
|
|
// 🆕 모든 그룹이 비어있는지 확인
|
|
const allGroupsEmpty = groupEntriesArrays.every((arr) => arr.length === 0);
|
|
|
|
if (allGroupsEmpty) {
|
|
// 🔧 아이템이 1개뿐이면 기본 레코드 생성 (첫 저장 시)
|
|
// 아이템이 여러 개면 빈 아이템은 건너뛰기 (불필요한 NULL 레코드 방지)
|
|
if (itemsList.length === 1) {
|
|
console.log("📝 [generateCartesianProduct] 단일 아이템, 모든 그룹 비어있음 - 기본 레코드 생성", {
|
|
itemIndex,
|
|
itemId: item.id,
|
|
});
|
|
// 빈 객체를 추가하면 parentKeys와 합쳐져서 기본 레코드가 됨
|
|
allRecords.push({});
|
|
} else {
|
|
console.log("⏭️ [generateCartesianProduct] 다중 아이템 중 빈 아이템 - 건너뜀", {
|
|
itemIndex,
|
|
itemId: item.id,
|
|
totalItems: itemsList.length,
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Cartesian Product 재귀 함수
|
|
const cartesian = (arrays: GroupEntry[][], currentIndex: number, currentCombination: Record<string, any>) => {
|
|
if (currentIndex === arrays.length) {
|
|
// 모든 그룹을 순회했으면 조합 완성
|
|
allRecords.push({ ...currentCombination });
|
|
return;
|
|
}
|
|
|
|
const currentGroupEntries = arrays[currentIndex];
|
|
if (currentGroupEntries.length === 0) {
|
|
// 🆕 현재 그룹에 데이터가 없으면 빈 조합으로 다음 그룹 진행
|
|
// (그룹이 비어있어도 다른 그룹의 데이터로 레코드 생성)
|
|
cartesian(arrays, currentIndex + 1, currentCombination);
|
|
return;
|
|
}
|
|
|
|
// 현재 그룹의 각 엔트리마다 재귀
|
|
currentGroupEntries.forEach((entry) => {
|
|
const newCombination = { ...currentCombination };
|
|
|
|
// 🆕 기존 레코드의 id가 있으면 포함 (UPDATE를 위해)
|
|
if (entry.id) {
|
|
newCombination.id = entry.id;
|
|
}
|
|
|
|
// 현재 그룹의 필드들을 조합에 추가
|
|
const groupFields = additionalFields.filter((f) => f.groupId === groups[currentIndex].id);
|
|
groupFields.forEach((field) => {
|
|
if (entry[field.name] !== undefined) {
|
|
newCombination[field.name] = entry[field.name];
|
|
}
|
|
});
|
|
|
|
cartesian(arrays, currentIndex + 1, newCombination);
|
|
});
|
|
};
|
|
|
|
// 재귀 시작
|
|
cartesian(groupEntriesArrays, 0, {});
|
|
});
|
|
|
|
console.log("🔀 [generateCartesianProduct] 생성된 레코드:", {
|
|
count: allRecords.length,
|
|
records: allRecords,
|
|
});
|
|
|
|
return allRecords;
|
|
},
|
|
[componentConfig.fieldGroups, componentConfig.additionalFields],
|
|
);
|
|
|
|
// 🆕 저장 요청 시에만 데이터 전달 (이벤트 리스너 방식)
|
|
useEffect(() => {
|
|
const handleSaveRequest = async (event: Event) => {
|
|
// component.id를 문자열로 안전하게 변환
|
|
const componentKey = String(component.id || "selected_items");
|
|
|
|
console.log("🔔 [SelectedItemsDetailInput] beforeFormSave 이벤트 수신!", {
|
|
itemsCount: items.length,
|
|
hasOnFormDataChange: !!onFormDataChange,
|
|
componentId: component.id,
|
|
componentIdType: typeof component.id,
|
|
componentKey,
|
|
});
|
|
|
|
if (items.length === 0) {
|
|
console.warn("⚠️ [SelectedItemsDetailInput] 저장할 데이터 없음");
|
|
return;
|
|
}
|
|
|
|
// 🆕 수정 모드인지 확인 (URL에 mode=edit이 있으면)
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const mode = urlParams.get("mode");
|
|
const isEditMode = mode === "edit";
|
|
|
|
console.log("📝 [SelectedItemsDetailInput] 저장 모드:", { mode, isEditMode });
|
|
|
|
if (isEditMode && componentConfig.parentDataMapping && componentConfig.parentDataMapping.length > 0) {
|
|
// 🔄 수정 모드: UPSERT API 사용
|
|
try {
|
|
console.log("🔄 [SelectedItemsDetailInput] UPSERT 모드로 저장 시작");
|
|
console.log("📋 [SelectedItemsDetailInput] componentConfig:", {
|
|
targetTable: componentConfig.targetTable,
|
|
parentDataMapping: componentConfig.parentDataMapping,
|
|
fieldGroups: componentConfig.fieldGroups,
|
|
additionalFields: componentConfig.additionalFields,
|
|
});
|
|
|
|
// 부모 키 추출 (parentDataMapping에서)
|
|
const parentKeys: Record<string, any> = {};
|
|
|
|
// formData 또는 items[0].originalData에서 부모 데이터 가져오기
|
|
// formData가 배열이면 첫 번째 항목 사용
|
|
let sourceData: any = formData;
|
|
if (Array.isArray(formData) && formData.length > 0) {
|
|
sourceData = formData[0];
|
|
} else if (!formData) {
|
|
sourceData = items[0]?.originalData || {};
|
|
}
|
|
|
|
console.log("📦 [SelectedItemsDetailInput] 부모 데이터 소스:", {
|
|
formDataType: Array.isArray(formData) ? "배열" : typeof formData,
|
|
sourceData,
|
|
sourceDataKeys: Object.keys(sourceData),
|
|
parentDataMapping: componentConfig.parentDataMapping,
|
|
});
|
|
|
|
console.log(
|
|
"🔍 [SelectedItemsDetailInput] sourceData 전체 내용 (JSON):",
|
|
JSON.stringify(sourceData, null, 2),
|
|
);
|
|
|
|
componentConfig.parentDataMapping.forEach((mapping) => {
|
|
// 🆕 Entity Join 필드도 처리 (예: customer_code -> customer_id_customer_code)
|
|
const value = getFieldValue(sourceData, mapping.sourceField);
|
|
if (value !== undefined && value !== null) {
|
|
parentKeys[mapping.targetField] = value;
|
|
console.log(`✅ [parentKeys] ${mapping.sourceField} → ${mapping.targetField}:`, value);
|
|
} else {
|
|
console.warn(
|
|
`⚠️ [SelectedItemsDetailInput] 부모 키 누락: ${mapping.sourceField} → ${mapping.targetField}`,
|
|
);
|
|
}
|
|
});
|
|
|
|
console.log("🔑 [SelectedItemsDetailInput] 부모 키:", parentKeys);
|
|
|
|
// 🔒 parentKeys 유효성 검증 - 빈 값이 있으면 저장 중단
|
|
const parentKeyValues = Object.values(parentKeys);
|
|
const hasEmptyParentKey = parentKeyValues.length === 0 ||
|
|
parentKeyValues.some(v => v === null || v === undefined || v === "");
|
|
|
|
if (hasEmptyParentKey) {
|
|
console.error("❌ [SelectedItemsDetailInput] parentKeys가 비어있거나 유효하지 않습니다!", parentKeys);
|
|
window.dispatchEvent(
|
|
new CustomEvent("formSaveError", {
|
|
detail: { message: "부모 키 값이 비어있어 저장할 수 없습니다. 먼저 상위 데이터를 선택해주세요." },
|
|
}),
|
|
);
|
|
|
|
// 🔧 기본 저장 건너뛰기 - event.detail 객체 직접 수정
|
|
if (event instanceof CustomEvent && event.detail) {
|
|
(event.detail as any).skipDefaultSave = true;
|
|
console.log("🚫 [SelectedItemsDetailInput] skipDefaultSave = true (parentKeys 검증 실패)");
|
|
}
|
|
return;
|
|
}
|
|
|
|
// items를 Cartesian Product로 변환
|
|
const records = generateCartesianProduct(items);
|
|
|
|
console.log("📦 [SelectedItemsDetailInput] UPSERT 레코드:", {
|
|
parentKeys,
|
|
recordCount: records.length,
|
|
records,
|
|
});
|
|
|
|
// targetTable 검증
|
|
if (!componentConfig.targetTable) {
|
|
console.error("❌ [SelectedItemsDetailInput] targetTable이 설정되지 않았습니다!");
|
|
window.dispatchEvent(
|
|
new CustomEvent("formSaveError", {
|
|
detail: { message: "대상 테이블이 설정되지 않았습니다." },
|
|
}),
|
|
);
|
|
|
|
// 🔧 기본 저장 건너뛰기 - event.detail 객체 직접 수정
|
|
if (event instanceof CustomEvent && event.detail) {
|
|
(event.detail as any).skipDefaultSave = true;
|
|
console.log("🚫 [SelectedItemsDetailInput] skipDefaultSave = true (targetTable 없음)");
|
|
}
|
|
return;
|
|
}
|
|
|
|
// 🔧 먼저 기본 저장 로직 건너뛰기 설정 (UPSERT 전에!)
|
|
// buttonActions.ts에서 beforeSaveEventDetail 객체를 event.detail로 전달하므로 직접 수정 가능
|
|
if (event instanceof CustomEvent && event.detail) {
|
|
(event.detail as any).skipDefaultSave = true;
|
|
console.log("🚫 [SelectedItemsDetailInput] skipDefaultSave = true (UPSERT 처리)", event.detail);
|
|
} else {
|
|
console.error("❌ [SelectedItemsDetailInput] event.detail이 없습니다! 기본 저장이 실행될 수 있습니다.", event);
|
|
}
|
|
|
|
console.log("🎯 [SelectedItemsDetailInput] targetTable:", componentConfig.targetTable);
|
|
console.log("📡 [SelectedItemsDetailInput] UPSERT API 호출 직전:", {
|
|
tableName: componentConfig.targetTable,
|
|
tableNameType: typeof componentConfig.targetTable,
|
|
tableNameLength: componentConfig.targetTable?.length,
|
|
parentKeys,
|
|
recordsCount: records.length,
|
|
});
|
|
|
|
// UPSERT API 호출
|
|
const { dataApi } = await import("@/lib/api/data");
|
|
const result = await dataApi.upsertGroupedRecords(componentConfig.targetTable, parentKeys, records);
|
|
|
|
if (result.success) {
|
|
console.log("✅ [SelectedItemsDetailInput] UPSERT 성공:", {
|
|
inserted: result.inserted,
|
|
updated: result.updated,
|
|
deleted: result.deleted,
|
|
});
|
|
|
|
// 저장 성공 이벤트 발생
|
|
window.dispatchEvent(
|
|
new CustomEvent("formSaveSuccess", {
|
|
detail: { message: "데이터가 저장되었습니다." },
|
|
}),
|
|
);
|
|
} else {
|
|
console.error("❌ [SelectedItemsDetailInput] UPSERT 실패:", result.error);
|
|
window.dispatchEvent(
|
|
new CustomEvent("formSaveError", {
|
|
detail: { message: result.error || "데이터 저장 실패" },
|
|
}),
|
|
);
|
|
}
|
|
} catch (error) {
|
|
console.error("❌ [SelectedItemsDetailInput] UPSERT 오류:", error);
|
|
window.dispatchEvent(
|
|
new CustomEvent("formSaveError", {
|
|
detail: { message: "데이터 저장 중 오류가 발생했습니다." },
|
|
}),
|
|
);
|
|
|
|
// 🆕 오류 발생 시에도 기본 저장 건너뛰기 (중복 저장 방지)
|
|
if (event instanceof CustomEvent && event.detail) {
|
|
event.detail.skipDefaultSave = true;
|
|
}
|
|
}
|
|
} else {
|
|
// 📝 생성 모드: 기존 로직 (Cartesian Product 생성 후 formData에 추가)
|
|
console.log("📝 [SelectedItemsDetailInput] 생성 모드: 기존 저장 로직 사용");
|
|
|
|
console.log("📝 [SelectedItemsDetailInput] 저장 데이터 준비:", {
|
|
key: componentKey,
|
|
itemsCount: items.length,
|
|
firstItem: items[0],
|
|
});
|
|
|
|
// ✅ CustomEvent의 detail에 데이터 첨부
|
|
if (event instanceof CustomEvent && event.detail) {
|
|
// context.formData에 직접 추가
|
|
event.detail.formData[componentKey] = items;
|
|
console.log("✅ [SelectedItemsDetailInput] context.formData에 데이터 직접 추가 완료");
|
|
}
|
|
|
|
// 기존 onFormDataChange도 호출 (호환성)
|
|
if (onFormDataChange) {
|
|
onFormDataChange(componentKey, items);
|
|
}
|
|
}
|
|
};
|
|
|
|
// 저장 버튼 클릭 시 데이터 수집
|
|
window.addEventListener("beforeFormSave", handleSaveRequest as EventListener);
|
|
|
|
return () => {
|
|
window.removeEventListener("beforeFormSave", handleSaveRequest as EventListener);
|
|
};
|
|
}, [items, component.id, onFormDataChange, componentConfig, formData, generateCartesianProduct]);
|
|
|
|
// 스타일 계산
|
|
const componentStyle: React.CSSProperties = {
|
|
width: "100%",
|
|
height: "100%",
|
|
...component.style,
|
|
...style,
|
|
};
|
|
|
|
// 디자인 모드 스타일
|
|
if (isDesignMode) {
|
|
componentStyle.border = "1px dashed #cbd5e1";
|
|
componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1";
|
|
componentStyle.padding = "16px";
|
|
componentStyle.borderRadius = "8px";
|
|
}
|
|
|
|
// 이벤트 핸들러
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
onClick?.();
|
|
};
|
|
|
|
// 🆕 실시간 단가 계산 함수 (설정 기반 + 카테고리 매핑)
|
|
const calculatePrice = useCallback(
|
|
(entry: GroupEntry): number => {
|
|
// 자동 계산 설정이 없으면 계산하지 않음
|
|
if (!componentConfig.autoCalculation) return 0;
|
|
|
|
const { inputFields, valueMapping } = componentConfig.autoCalculation;
|
|
|
|
// 기본 단가
|
|
const basePrice = parseFloat(entry[inputFields.basePrice] || "0");
|
|
if (basePrice === 0) return 0;
|
|
|
|
let price = basePrice;
|
|
|
|
// 1단계: 할인 적용
|
|
const discountTypeValue = entry[inputFields.discountType];
|
|
const discountValue = parseFloat(entry[inputFields.discountValue] || "0");
|
|
|
|
// 매핑을 통해 실제 연산 타입 결정
|
|
const discountOperation = valueMapping?.discountType?.[discountTypeValue] || "none";
|
|
|
|
if (discountOperation === "rate") {
|
|
price = price * (1 - discountValue / 100);
|
|
} else if (discountOperation === "amount") {
|
|
price = price - discountValue;
|
|
}
|
|
|
|
// 2단계: 반올림 적용
|
|
const roundingTypeValue = entry[inputFields.roundingType];
|
|
const roundingUnitValue = entry[inputFields.roundingUnit];
|
|
|
|
// 매핑을 통해 실제 연산 타입 결정
|
|
const roundingOperation = valueMapping?.roundingType?.[roundingTypeValue] || "none";
|
|
const unit = valueMapping?.roundingUnit?.[roundingUnitValue] || parseFloat(roundingUnitValue) || 1;
|
|
|
|
if (roundingOperation === "round") {
|
|
price = Math.round(price / unit) * unit;
|
|
} else if (roundingOperation === "floor") {
|
|
price = Math.floor(price / unit) * unit;
|
|
} else if (roundingOperation === "ceil") {
|
|
price = Math.ceil(price / unit) * unit;
|
|
}
|
|
|
|
return price;
|
|
},
|
|
[componentConfig.autoCalculation],
|
|
);
|
|
|
|
// 🆕 그룹별 필드 변경 핸들러: itemId + groupId + entryId + fieldName
|
|
const handleFieldChange = useCallback(
|
|
(itemId: string, groupId: string, entryId: string, fieldName: string, value: any) => {
|
|
console.log("📝 [handleFieldChange] 필드 값 변경:", {
|
|
itemId,
|
|
groupId,
|
|
entryId,
|
|
fieldName,
|
|
value,
|
|
});
|
|
|
|
setItems((prevItems) => {
|
|
return prevItems.map((item) => {
|
|
if (item.id !== itemId) return item;
|
|
|
|
const groupEntries = item.fieldGroups[groupId] || [];
|
|
const existingEntryIndex = groupEntries.findIndex((e) => e.id === entryId);
|
|
|
|
if (existingEntryIndex >= 0) {
|
|
// 기존 entry 업데이트 (항상 이 경로로만 진입)
|
|
const updatedEntries = [...groupEntries];
|
|
const updatedEntry = {
|
|
...updatedEntries[existingEntryIndex],
|
|
[fieldName]: value,
|
|
};
|
|
|
|
console.log("✅ [handleFieldChange] Entry 업데이트:", {
|
|
beforeKeys: Object.keys(updatedEntries[existingEntryIndex]),
|
|
afterKeys: Object.keys(updatedEntry),
|
|
updatedEntry,
|
|
});
|
|
|
|
// 🆕 가격 관련 필드가 변경되면 자동 계산
|
|
if (componentConfig.autoCalculation) {
|
|
const { inputFields, targetField } = componentConfig.autoCalculation;
|
|
const priceRelatedFields = [
|
|
inputFields.basePrice,
|
|
inputFields.discountType,
|
|
inputFields.discountValue,
|
|
inputFields.roundingType,
|
|
inputFields.roundingUnit,
|
|
];
|
|
|
|
if (priceRelatedFields.includes(fieldName)) {
|
|
const calculatedPrice = calculatePrice(updatedEntry);
|
|
updatedEntry[targetField] = calculatedPrice;
|
|
console.log("💰 [자동 계산]", {
|
|
basePrice: updatedEntry[inputFields.basePrice],
|
|
discountType: updatedEntry[inputFields.discountType],
|
|
discountValue: updatedEntry[inputFields.discountValue],
|
|
roundingType: updatedEntry[inputFields.roundingType],
|
|
roundingUnit: updatedEntry[inputFields.roundingUnit],
|
|
calculatedPrice,
|
|
targetField,
|
|
});
|
|
}
|
|
}
|
|
|
|
updatedEntries[existingEntryIndex] = updatedEntry;
|
|
return {
|
|
...item,
|
|
fieldGroups: {
|
|
...item.fieldGroups,
|
|
[groupId]: updatedEntries,
|
|
},
|
|
};
|
|
} else {
|
|
// 이 경로는 발생하면 안 됨 (handleAddGroupEntry에서 미리 추가함)
|
|
console.warn("⚠️ entry가 없는데 handleFieldChange 호출됨:", { itemId, groupId, entryId });
|
|
return item;
|
|
}
|
|
});
|
|
});
|
|
},
|
|
[calculatePrice],
|
|
);
|
|
|
|
// 🆕 품목 제거 핸들러
|
|
const handleRemoveItem = (itemId: string) => {
|
|
setItems((prevItems) => prevItems.filter((item) => item.id !== itemId));
|
|
};
|
|
|
|
// 🆕 그룹 항목 추가 핸들러 (특정 그룹에 새 항목 추가)
|
|
const handleAddGroupEntry = (itemId: string, groupId: string) => {
|
|
const newEntryId = `entry-${Date.now()}`;
|
|
|
|
// 🔧 미리 빈 entry를 추가하여 리렌더링 방지 (autoFillFrom 처리)
|
|
setItems((prevItems) => {
|
|
return prevItems.map((item) => {
|
|
if (item.id !== itemId) return item;
|
|
|
|
const groupEntries = item.fieldGroups[groupId] || [];
|
|
const newEntry: GroupEntry = { id: newEntryId };
|
|
|
|
// 🆕 autoFillFrom 필드 자동 채우기 (tableName으로 직접 접근)
|
|
const groupFields = (componentConfig.additionalFields || []).filter((f) => f.groupId === groupId);
|
|
|
|
groupFields.forEach((field) => {
|
|
if (!field.autoFillFrom) return;
|
|
|
|
// 데이터 소스 결정
|
|
let sourceData: any = null;
|
|
|
|
if (field.autoFillFromTable) {
|
|
// 특정 테이블에서 가져오기
|
|
const tableData = dataRegistry[field.autoFillFromTable];
|
|
if (tableData && tableData.length > 0) {
|
|
// 첫 번째 항목 사용 (또는 매칭 로직 추가 가능)
|
|
sourceData = tableData[0].originalData || tableData[0];
|
|
console.log(
|
|
`✅ [autoFill 추가] ${field.name} ← ${field.autoFillFrom} (테이블: ${field.autoFillFromTable}):`,
|
|
sourceData?.[field.autoFillFrom],
|
|
);
|
|
} else {
|
|
// 🆕 dataRegistry에 없으면 item.originalData에서 찾기 (수정 모드)
|
|
sourceData = item.originalData;
|
|
console.log(`⚠️ [autoFill 추가] dataRegistry에 ${field.autoFillFromTable} 없음, originalData에서 찾기`);
|
|
}
|
|
} else {
|
|
// 주 데이터 소스 (item.originalData) 사용
|
|
sourceData = item.originalData;
|
|
console.log(
|
|
`✅ [autoFill 추가] ${field.name} ← ${field.autoFillFrom} (주 소스):`,
|
|
sourceData?.[field.autoFillFrom],
|
|
);
|
|
}
|
|
|
|
// 🆕 getFieldValue 사용하여 Entity Join 필드도 찾기
|
|
if (sourceData) {
|
|
const fieldValue = getFieldValue(sourceData, field.autoFillFrom);
|
|
if (fieldValue !== undefined && fieldValue !== null) {
|
|
newEntry[field.name] = fieldValue;
|
|
console.log(`✅ [autoFill 추가] ${field.name} 값 설정:`, fieldValue);
|
|
} else {
|
|
console.warn(`⚠️ [autoFill 추가] ${field.name} ← ${field.autoFillFrom} 실패`);
|
|
}
|
|
}
|
|
});
|
|
|
|
return {
|
|
...item,
|
|
fieldGroups: {
|
|
...item.fieldGroups,
|
|
[groupId]: [...groupEntries, newEntry],
|
|
},
|
|
};
|
|
});
|
|
});
|
|
|
|
setIsEditing(true);
|
|
setEditingItemId(itemId);
|
|
setEditingDetailId(newEntryId);
|
|
setEditingGroupId(groupId);
|
|
};
|
|
|
|
// 🆕 그룹 항목 제거 핸들러
|
|
const handleRemoveGroupEntry = (itemId: string, groupId: string, entryId: string) => {
|
|
setItems((prevItems) =>
|
|
prevItems.map((item) => {
|
|
if (item.id !== itemId) return item;
|
|
return {
|
|
...item,
|
|
fieldGroups: {
|
|
...item.fieldGroups,
|
|
[groupId]: (item.fieldGroups[groupId] || []).filter((e) => e.id !== entryId),
|
|
},
|
|
};
|
|
}),
|
|
);
|
|
};
|
|
|
|
// 🆕 그룹 항목 편집 핸들러 (클릭하면 수정 가능)
|
|
const handleEditGroupEntry = (itemId: string, groupId: string, entryId: string) => {
|
|
setIsEditing(true);
|
|
setEditingItemId(itemId);
|
|
setEditingGroupId(groupId);
|
|
setEditingDetailId(entryId);
|
|
};
|
|
|
|
// 🆕 다음 품목으로 이동
|
|
const handleNextItem = () => {
|
|
const currentIndex = items.findIndex((item) => item.id === editingItemId);
|
|
if (currentIndex < items.length - 1) {
|
|
// 다음 품목으로
|
|
const nextItem = items[currentIndex + 1];
|
|
setEditingItemId(nextItem.id);
|
|
const groups = componentConfig.fieldGroups || [];
|
|
const firstGroupId = groups.length > 0 ? groups[0].id : "default";
|
|
const newEntryId = `entry-${Date.now()}`;
|
|
setEditingDetailId(newEntryId);
|
|
setEditingGroupId(firstGroupId);
|
|
setIsEditing(true);
|
|
} else {
|
|
// 마지막 품목이면 편집 모드 종료
|
|
setIsEditing(false);
|
|
setEditingItemId(null);
|
|
setEditingDetailId(null);
|
|
setEditingGroupId(null);
|
|
}
|
|
};
|
|
|
|
// 🆕 개별 필드 렌더링 (itemId, groupId, entryId, entry 데이터 전달)
|
|
const renderField = (
|
|
field: AdditionalFieldDefinition,
|
|
itemId: string,
|
|
groupId: string,
|
|
entryId: string,
|
|
entry: GroupEntry,
|
|
) => {
|
|
const value = entry[field.name] || field.defaultValue || "";
|
|
|
|
// 🆕 계산된 필드는 읽기 전용 (자동 계산 설정 기반)
|
|
const isCalculatedField = componentConfig.autoCalculation?.targetField === field.name;
|
|
|
|
const commonProps = {
|
|
value: value || "",
|
|
disabled: componentConfig.disabled || componentConfig.readonly,
|
|
placeholder: field.placeholder,
|
|
required: field.required,
|
|
};
|
|
|
|
// 🆕 inputType이 있으면 우선 사용, 없으면 field.type 사용
|
|
const renderType = field.inputType || field.type;
|
|
|
|
// 🆕 inputType에 따라 적절한 컴포넌트 렌더링
|
|
switch (renderType) {
|
|
// 기본 타입들
|
|
case "text":
|
|
case "varchar":
|
|
case "char":
|
|
return (
|
|
<Input
|
|
{...commonProps}
|
|
type="text"
|
|
onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
|
|
maxLength={field.validation?.maxLength}
|
|
className="h-10 text-sm"
|
|
/>
|
|
);
|
|
|
|
case "number":
|
|
case "int":
|
|
case "integer":
|
|
case "bigint":
|
|
case "decimal":
|
|
case "numeric":
|
|
// 🆕 계산된 단가는 천 단위 구분 및 강조 표시
|
|
if (isCalculatedField) {
|
|
const numericValue = parseFloat(value) || 0;
|
|
const formattedValue = new Intl.NumberFormat("ko-KR").format(numericValue);
|
|
|
|
return (
|
|
<div className="relative">
|
|
<Input
|
|
value={formattedValue}
|
|
readOnly
|
|
disabled
|
|
className={cn(
|
|
"h-10 text-sm",
|
|
"bg-primary/10 border-primary/30 text-primary font-semibold",
|
|
"cursor-not-allowed",
|
|
)}
|
|
/>
|
|
<div className="text-primary/70 absolute top-1/2 right-2 -translate-y-1/2 text-[10px]">자동 계산</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Input
|
|
{...commonProps}
|
|
type="number"
|
|
onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
|
|
min={field.validation?.min}
|
|
max={field.validation?.max}
|
|
className="h-10 text-sm"
|
|
/>
|
|
);
|
|
|
|
case "date":
|
|
case "timestamp":
|
|
case "datetime":
|
|
return (
|
|
<Input
|
|
{...commonProps}
|
|
type="date"
|
|
onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
|
|
onClick={(e) => {
|
|
// 날짜 선택기 강제 열기
|
|
const target = e.target as HTMLInputElement;
|
|
if (target && target.showPicker) {
|
|
target.showPicker();
|
|
}
|
|
}}
|
|
className="h-10 cursor-pointer text-sm"
|
|
/>
|
|
);
|
|
|
|
case "checkbox":
|
|
case "boolean":
|
|
case "bool":
|
|
return (
|
|
<Checkbox
|
|
checked={value === true || value === "true"}
|
|
onCheckedChange={(checked) => handleFieldChange(itemId, groupId, entryId, field.name, checked)}
|
|
disabled={componentConfig.disabled || componentConfig.readonly}
|
|
/>
|
|
);
|
|
|
|
case "textarea":
|
|
return (
|
|
<Textarea
|
|
{...commonProps}
|
|
onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
|
|
rows={2}
|
|
className="resize-none text-xs sm:text-sm"
|
|
/>
|
|
);
|
|
|
|
// 🆕 추가 inputType들
|
|
case "code":
|
|
case "category":
|
|
// 🆕 옵션을 field.name 또는 field.codeCategory 키로 찾기
|
|
let categoryOptions = field.options; // 기본값
|
|
|
|
// 1순위: 필드 이름으로 직접 찾기 (category 타입에서 사용)
|
|
if (codeOptions[field.name]) {
|
|
categoryOptions = codeOptions[field.name];
|
|
}
|
|
// 2순위: codeCategory로 찾기 (code 타입에서 사용)
|
|
else if (field.codeCategory && codeOptions[field.codeCategory]) {
|
|
categoryOptions = codeOptions[field.codeCategory];
|
|
}
|
|
|
|
return (
|
|
<Select
|
|
value={value || ""}
|
|
onValueChange={(val) => handleFieldChange(itemId, groupId, entryId, field.name, val)}
|
|
disabled={componentConfig.disabled || componentConfig.readonly}
|
|
>
|
|
<SelectTrigger size="default" className="w-full">
|
|
<SelectValue placeholder={field.placeholder || "선택하세요"} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{categoryOptions && categoryOptions.length > 0 ? (
|
|
categoryOptions
|
|
.filter((option) => option.value !== "")
|
|
.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))
|
|
) : (
|
|
<div className="text-muted-foreground py-6 text-center text-xs">옵션 로딩 중...</div>
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
|
|
case "entity":
|
|
// TODO: EntitySelect 컴포넌트 사용
|
|
return (
|
|
<Input
|
|
{...commonProps}
|
|
type="text"
|
|
onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
);
|
|
|
|
case "select":
|
|
return (
|
|
<Select
|
|
value={value || ""}
|
|
onValueChange={(val) => handleFieldChange(itemId, groupId, entryId, field.name, val)}
|
|
disabled={componentConfig.disabled || componentConfig.readonly}
|
|
>
|
|
<SelectTrigger className="h-8 w-full text-xs sm:h-10 sm:text-sm">
|
|
<SelectValue placeholder={field.placeholder || "선택하세요"} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{field.options
|
|
?.filter((option) => option.value !== "")
|
|
.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
|
|
// 기본값: 텍스트 입력
|
|
default:
|
|
return (
|
|
<Input
|
|
{...commonProps}
|
|
type="text"
|
|
onChange={(e) => handleFieldChange(itemId, groupId, entryId, field.name, e.target.value)}
|
|
maxLength={field.validation?.maxLength}
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
);
|
|
}
|
|
};
|
|
|
|
// 🆕 Entity Join된 필드명도 찾는 헬퍼 함수
|
|
const getFieldValue = useCallback((data: Record<string, any>, fieldName: string) => {
|
|
// 1. Entity Join 형식으로 먼저 찾기 (*_fieldName) - 우선순위!
|
|
// 예: item_id_item_name (품목의 품명) vs customer_item_name (거래처 품명)
|
|
const possibleKeys = Object.keys(data).filter(
|
|
(key) => key.endsWith(`_${fieldName}`) && key !== fieldName, // 자기 자신은 제외
|
|
);
|
|
|
|
if (possibleKeys.length > 0) {
|
|
// 🆕 여러 개 있으면 가장 긴 키 선택 (더 구체적인 것)
|
|
// 예: item_id_item_name (18자) vs customer_item_name (18자) 중 정렬 순서로 선택
|
|
// 실제로는 item_id로 시작하는 것을 우선
|
|
const entityJoinKey = possibleKeys.find((key) => key.includes("_id_")) || possibleKeys[0];
|
|
console.log(`🔍 [getFieldValue] "${fieldName}" → "${entityJoinKey}" =`, data[entityJoinKey]);
|
|
return data[entityJoinKey];
|
|
}
|
|
|
|
// 2. 직접 필드명으로 찾기 (Entity Join이 없을 때만)
|
|
if (data[fieldName] !== undefined) {
|
|
console.log(`🔍 [getFieldValue] "${fieldName}" → 직접 =`, data[fieldName]);
|
|
return data[fieldName];
|
|
}
|
|
|
|
console.warn(`⚠️ [getFieldValue] "${fieldName}" 못 찾음`);
|
|
return null;
|
|
}, []);
|
|
|
|
// 🆕 displayItems를 렌더링하는 헬퍼 함수 (그룹별)
|
|
const renderDisplayItems = useCallback(
|
|
(entry: GroupEntry, item: ItemData, groupId: string) => {
|
|
// 🆕 해당 그룹의 displayItems 가져오기
|
|
const group = (componentConfig.fieldGroups || []).find((g) => g.id === groupId);
|
|
const displayItems = group?.displayItems || [];
|
|
|
|
if (displayItems.length === 0) {
|
|
// displayItems가 없으면 기본 방식 (해당 그룹의 필드만 나열)
|
|
const fields = (componentConfig.additionalFields || []).filter((f) =>
|
|
componentConfig.fieldGroups && componentConfig.fieldGroups.length > 0 ? f.groupId === groupId : true,
|
|
);
|
|
return fields
|
|
.map((f) => {
|
|
const value = entry[f.name];
|
|
if (!value) return "-";
|
|
|
|
const strValue = String(value);
|
|
|
|
// 🔧 ISO 날짜 형식 자동 감지 및 포맷팅 (필드 타입 무관)
|
|
// ISO 8601 형식: YYYY-MM-DDTHH:mm:ss.sssZ 또는 YYYY-MM-DD
|
|
const isoDateMatch = strValue.match(/^(\d{4})-(\d{2})-(\d{2})(T|\s|$)/);
|
|
if (isoDateMatch) {
|
|
const [, year, month, day] = isoDateMatch;
|
|
return `${year}.${month}.${day}`;
|
|
}
|
|
|
|
return strValue;
|
|
})
|
|
.join(" / ");
|
|
}
|
|
|
|
// displayItems 설정대로 렌더링
|
|
return (
|
|
<>
|
|
{displayItems.map((displayItem) => {
|
|
const styleClasses = cn(
|
|
displayItem.bold && "font-bold",
|
|
displayItem.underline && "underline",
|
|
displayItem.italic && "italic",
|
|
);
|
|
|
|
const inlineStyle: React.CSSProperties = {
|
|
color: displayItem.color,
|
|
backgroundColor: displayItem.backgroundColor,
|
|
};
|
|
|
|
switch (displayItem.type) {
|
|
case "icon": {
|
|
if (!displayItem.icon) return null;
|
|
const IconComponent = (LucideIcons as any)[displayItem.icon];
|
|
if (!IconComponent) return null;
|
|
return <IconComponent key={displayItem.id} className="mr-1 inline-block h-3 w-3" style={inlineStyle} />;
|
|
}
|
|
|
|
case "text":
|
|
return (
|
|
<span key={displayItem.id} className={styleClasses} style={inlineStyle}>
|
|
{displayItem.value}
|
|
</span>
|
|
);
|
|
|
|
case "field": {
|
|
const fieldValue = entry[displayItem.fieldName || ""];
|
|
const isEmpty = fieldValue === null || fieldValue === undefined || fieldValue === "";
|
|
|
|
// 🆕 빈 값 처리
|
|
if (isEmpty) {
|
|
switch (displayItem.emptyBehavior) {
|
|
case "hide":
|
|
return null; // 항목 숨김
|
|
case "default":
|
|
// 기본값 표시
|
|
const defaultValue = displayItem.defaultValue || "-";
|
|
return (
|
|
<span
|
|
key={displayItem.id}
|
|
className={cn(styleClasses, "text-muted-foreground")}
|
|
style={inlineStyle}
|
|
>
|
|
{displayItem.label}
|
|
{defaultValue}
|
|
</span>
|
|
);
|
|
case "blank":
|
|
default:
|
|
// 빈 칸으로 표시
|
|
return (
|
|
<span key={displayItem.id} className={styleClasses} style={inlineStyle}>
|
|
{displayItem.label}
|
|
</span>
|
|
);
|
|
}
|
|
}
|
|
|
|
// 값이 있는 경우, 형식에 맞게 표시
|
|
let formattedValue = fieldValue;
|
|
|
|
// 🔧 자동 날짜 감지 (format 설정 없어도 ISO 날짜 자동 변환)
|
|
const strValue = String(fieldValue);
|
|
const isoDateMatch = strValue.match(/^(\d{4})-(\d{2})-(\d{2})(T|\s|$)/);
|
|
if (isoDateMatch && !displayItem.format) {
|
|
const [, year, month, day] = isoDateMatch;
|
|
formattedValue = `${year}.${month}.${day}`;
|
|
}
|
|
|
|
switch (displayItem.format) {
|
|
case "currency":
|
|
// 천 단위 구분
|
|
formattedValue = new Intl.NumberFormat("ko-KR").format(Number(fieldValue) || 0);
|
|
break;
|
|
case "number":
|
|
formattedValue = new Intl.NumberFormat("ko-KR").format(Number(fieldValue) || 0);
|
|
break;
|
|
case "date":
|
|
// YYYY.MM.DD 형식
|
|
if (fieldValue) {
|
|
// 날짜 문자열을 직접 파싱 (타임존 문제 방지)
|
|
const dateStr = String(fieldValue);
|
|
const match = dateStr.match(/^(\d{4})-(\d{2})-(\d{2})/);
|
|
if (match) {
|
|
const [, year, month, day] = match;
|
|
formattedValue = `${year}.${month}.${day}`;
|
|
} else {
|
|
// Date 객체로 변환 시도 (fallback)
|
|
const date = new Date(fieldValue);
|
|
if (!isNaN(date.getTime())) {
|
|
formattedValue = date
|
|
.toLocaleDateString("ko-KR", {
|
|
year: "numeric",
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
})
|
|
.replace(/\. /g, ".")
|
|
.replace(/\.$/, "");
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
case "badge":
|
|
// 배지로 표시
|
|
return (
|
|
<Badge
|
|
key={displayItem.id}
|
|
variant={displayItem.badgeVariant || "default"}
|
|
className={styleClasses}
|
|
style={inlineStyle}
|
|
>
|
|
{displayItem.label}
|
|
{formattedValue}
|
|
</Badge>
|
|
);
|
|
case "text":
|
|
default:
|
|
// 일반 텍스트
|
|
break;
|
|
}
|
|
|
|
// 🔧 마지막 안전장치: formattedValue가 여전히 ISO 형식이면 한번 더 변환
|
|
let finalValue = formattedValue;
|
|
if (typeof formattedValue === "string") {
|
|
const isoCheck = formattedValue.match(/^(\d{4})-(\d{2})-(\d{2})(T|\s|$)/);
|
|
if (isoCheck) {
|
|
const [, year, month, day] = isoCheck;
|
|
finalValue = `${year}.${month}.${day}`;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<span key={displayItem.id} className={styleClasses} style={inlineStyle}>
|
|
{displayItem.label}
|
|
{finalValue}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
case "badge": {
|
|
const fieldValue = displayItem.fieldName ? entry[displayItem.fieldName] : displayItem.value;
|
|
return (
|
|
<Badge
|
|
key={displayItem.id}
|
|
variant={displayItem.badgeVariant || "default"}
|
|
className={styleClasses}
|
|
style={inlineStyle}
|
|
>
|
|
{displayItem.label}
|
|
{fieldValue}
|
|
</Badge>
|
|
);
|
|
}
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
})}
|
|
</>
|
|
);
|
|
},
|
|
[componentConfig.fieldGroups, componentConfig.additionalFields],
|
|
);
|
|
|
|
// 빈 상태 렌더링
|
|
if (items.length === 0) {
|
|
return (
|
|
<div style={componentStyle} className={className} onClick={handleClick}>
|
|
<div className="border-border bg-muted/30 flex flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 text-center">
|
|
<p className="text-muted-foreground text-sm">{componentConfig.emptyMessage}</p>
|
|
{isDesignMode && (
|
|
<p className="text-muted-foreground mt-2 text-xs">
|
|
💡 이전 모달에서 "다음" 버튼으로 데이터를 전달하면 여기에 표시됩니다.
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 🆕 그룹별로 입력 항목들 렌더링 (각 그룹이 독립적으로 여러 항목 관리)
|
|
const renderFieldsByGroup = (item: ItemData) => {
|
|
const fields = componentConfig.additionalFields || [];
|
|
const groups = componentConfig.fieldGroups || [];
|
|
|
|
// 그룹이 정의되지 않은 경우, 기본 그룹 사용
|
|
const effectiveGroups = groups.length > 0 ? groups : [{ id: "default", title: "입력 정보", order: 0 }];
|
|
|
|
const sortedGroups = [...effectiveGroups].sort((a, b) => (a.order || 0) - (b.order || 0));
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{sortedGroups.map((group) => {
|
|
const groupFields = fields.filter((f) => (groups.length === 0 ? true : f.groupId === group.id));
|
|
|
|
if (groupFields.length === 0) return null;
|
|
|
|
const groupEntries = item.fieldGroups[group.id] || [];
|
|
const isEditingThisGroup = isEditing && editingItemId === item.id && editingGroupId === group.id;
|
|
|
|
return (
|
|
<Card key={group.id} className="border-2 shadow-sm">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="flex items-center justify-between text-sm font-semibold">
|
|
<span>{group.title}</span>
|
|
<Button
|
|
type="button"
|
|
onClick={() => handleAddGroupEntry(item.id, group.id)}
|
|
size="sm"
|
|
variant="outline"
|
|
className="h-7 text-xs"
|
|
>
|
|
+ 추가
|
|
</Button>
|
|
</CardTitle>
|
|
{group.description && <p className="text-muted-foreground text-xs">{group.description}</p>}
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{/* 이미 입력된 항목들 */}
|
|
{groupEntries.length > 0 ? (
|
|
<div className="space-y-2">
|
|
{groupEntries.map((entry, idx) => {
|
|
const isEditingThisEntry = isEditingThisGroup && editingDetailId === entry.id;
|
|
|
|
if (isEditingThisEntry) {
|
|
// 편집 모드: 입력 필드 표시 (가로 배치)
|
|
return (
|
|
<Card key={entry.id} className="border-primary border-dashed">
|
|
<CardContent className="p-3">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<span className="text-xs font-medium">수정 중</span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
setIsEditing(false);
|
|
setEditingItemId(null);
|
|
setEditingGroupId(null);
|
|
setEditingDetailId(null);
|
|
}}
|
|
className="h-6 text-xs"
|
|
>
|
|
완료
|
|
</Button>
|
|
</div>
|
|
{/* 🆕 가로 Grid 배치 (2~3열) */}
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
{groupFields.map((field) => (
|
|
<div key={field.name} className="space-y-1">
|
|
<label className="text-xs font-medium">
|
|
{field.label}
|
|
{field.required && <span className="text-destructive ml-1">*</span>}
|
|
</label>
|
|
{renderField(field, item.id, group.id, entry.id, entry)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} else {
|
|
// 읽기 모드: 텍스트 표시 (클릭하면 수정)
|
|
return (
|
|
<div
|
|
key={entry.id}
|
|
className="bg-muted/30 hover:bg-muted/50 flex cursor-pointer items-center justify-between rounded border p-2 text-xs"
|
|
onClick={() => handleEditGroupEntry(item.id, group.id, entry.id)}
|
|
>
|
|
<span className="flex items-center gap-1">
|
|
{idx + 1}. {renderDisplayItems(entry, item, group.id)}
|
|
</span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleRemoveGroupEntry(item.id, group.id, entry.id);
|
|
}}
|
|
className="h-6 w-6 p-0"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
})}
|
|
</div>
|
|
) : (
|
|
<p className="text-muted-foreground text-xs italic">아직 입력된 항목이 없습니다.</p>
|
|
)}
|
|
|
|
{/* 새 항목 입력 중 */}
|
|
{isEditingThisGroup && editingDetailId && !groupEntries.find((e) => e.id === editingDetailId) && (
|
|
<Card className="border-primary border-dashed">
|
|
<CardContent className="space-y-2 p-3">
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<span className="text-xs font-medium">새 항목</span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
setIsEditing(false);
|
|
setEditingItemId(null);
|
|
setEditingGroupId(null);
|
|
setEditingDetailId(null);
|
|
}}
|
|
className="h-6 text-xs"
|
|
>
|
|
취소
|
|
</Button>
|
|
</div>
|
|
{groupFields.map((field) => (
|
|
<div key={field.name} className="space-y-1">
|
|
<label className="text-xs font-medium">
|
|
{field.label}
|
|
{field.required && <span className="text-destructive ml-1">*</span>}
|
|
</label>
|
|
{renderField(field, item.id, group.id, editingDetailId, {})}
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 🆕 Grid 레이아웃 렌더링 (완전히 재작성 - 그룹별 독립 관리)
|
|
const renderGridLayout = () => {
|
|
console.log("🎨 [renderGridLayout] 렌더링:", {
|
|
itemsLength: items.length,
|
|
displayColumns: componentConfig.displayColumns,
|
|
firstItemOriginalData: items[0]?.originalData,
|
|
});
|
|
|
|
return (
|
|
<div className="bg-card space-y-4 p-4">
|
|
{items.map((item, index) => {
|
|
// 제목용 첫 번째 컬럼 값
|
|
const titleValue = componentConfig.displayColumns?.[0]?.name
|
|
? getFieldValue(item.originalData, componentConfig.displayColumns[0].name)
|
|
: null;
|
|
|
|
// 요약용 모든 컬럼 값들
|
|
const summaryValues = componentConfig.displayColumns
|
|
?.map((col) => getFieldValue(item.originalData, col.name))
|
|
.filter(Boolean);
|
|
|
|
console.log("🔍 [renderGridLayout] 항목 렌더링:", {
|
|
index,
|
|
titleValue,
|
|
summaryValues,
|
|
displayColumns: componentConfig.displayColumns,
|
|
originalData: item.originalData,
|
|
"displayColumns[0]": componentConfig.displayColumns?.[0],
|
|
"originalData keys": Object.keys(item.originalData),
|
|
});
|
|
|
|
return (
|
|
<Card key={item.id} className="border shadow-sm">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="flex items-center justify-between text-base font-semibold">
|
|
<span>
|
|
{index + 1}. {titleValue || "항목"}
|
|
</span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleRemoveItem(item.id)}
|
|
className="h-7 w-7 p-0 text-red-500"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</CardTitle>
|
|
{/* 원본 데이터 요약 */}
|
|
{summaryValues && summaryValues.length > 0 && (
|
|
<div className="text-muted-foreground text-xs">{summaryValues.join(" | ")}</div>
|
|
)}
|
|
</CardHeader>
|
|
<CardContent>
|
|
{/* 그룹별 입력 항목들 렌더링 */}
|
|
{renderFieldsByGroup(item)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 🔧 기존 renderGridLayout (백업 - 사용 안 함)
|
|
const renderGridLayout_OLD = () => {
|
|
return (
|
|
<div className="bg-card space-y-4 p-4">
|
|
{/* Modal 모드: 추가 버튼 */}
|
|
{isModalMode && !isEditing && items.length === 0 && (
|
|
<div className="py-8 text-center">
|
|
<p className="text-muted-foreground mb-4 text-sm">항목을 추가하려면 추가 버튼을 클릭하세요</p>
|
|
<Button type="button" onClick={() => setIsEditing(true)} size="sm" className="text-xs sm:text-sm">
|
|
+ 추가
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Modal 모드: 편집 중인 항목 (입력창 표시) */}
|
|
{isModalMode &&
|
|
isEditing &&
|
|
editingItemId &&
|
|
(() => {
|
|
const editingItem = items.find((item) => item.id === editingItemId);
|
|
console.log("🔍 [Modal Mode] 편집 항목 찾기:", {
|
|
editingItemId,
|
|
itemsLength: items.length,
|
|
itemIds: items.map((i) => i.id),
|
|
editingItem: editingItem ? "찾음" : "못 찾음",
|
|
editingDetailId,
|
|
});
|
|
if (!editingItem) {
|
|
console.warn("⚠️ [Modal Mode] 편집할 항목을 찾을 수 없습니다!");
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Card className="border-primary border-2 shadow-sm">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="flex items-center justify-between text-sm font-semibold">
|
|
<span>
|
|
품목:{" "}
|
|
{getFieldValue(editingItem.originalData, componentConfig.displayColumns?.[0]?.name || "") ||
|
|
"항목"}
|
|
</span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
setIsEditing(false);
|
|
setEditingItemId(null);
|
|
setEditingDetailId(null);
|
|
}}
|
|
className="h-7 text-xs"
|
|
>
|
|
취소
|
|
</Button>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{/* 원본 데이터 요약 */}
|
|
<div className="text-muted-foreground bg-muted rounded p-2 text-xs">
|
|
{componentConfig.displayColumns
|
|
?.map((col) => editingItem.originalData[col.name])
|
|
.filter(Boolean)
|
|
.join(" | ")}
|
|
</div>
|
|
|
|
{/* 🆕 이미 입력된 상세 항목들 표시 */}
|
|
{editingItem.details.length > 0 && (
|
|
<div className="space-y-2">
|
|
<div className="text-xs font-medium">입력된 항목 ({editingItem.details.length}개)</div>
|
|
{editingItem.details.map((detail, idx) => (
|
|
<div
|
|
key={detail.id}
|
|
className="bg-muted/30 flex items-center justify-between rounded border p-2 text-xs"
|
|
>
|
|
<span>
|
|
{idx + 1}. {detail[componentConfig.additionalFields?.[0]?.name] || "입력됨"}
|
|
</span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleRemoveDetail(editingItem.id, detail.id)}
|
|
className="h-6 w-6 p-0"
|
|
>
|
|
X
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 추가 입력 필드 */}
|
|
{componentConfig.additionalFields &&
|
|
componentConfig.additionalFields.length > 0 &&
|
|
editingDetailId &&
|
|
(() => {
|
|
// 현재 편집 중인 detail 찾기 (없으면 빈 객체)
|
|
const currentDetail = editingItem.details.find((d) => d.id === editingDetailId) || {
|
|
id: editingDetailId,
|
|
};
|
|
return renderFieldsByGroup(editingItem.id, editingDetailId, currentDetail);
|
|
})()}
|
|
|
|
{/* 액션 버튼들 */}
|
|
<div className="flex justify-end gap-2 pt-2">
|
|
<Button
|
|
type="button"
|
|
onClick={() => handleAddDetail(editingItem.id)}
|
|
size="sm"
|
|
variant="outline"
|
|
className="text-xs"
|
|
>
|
|
+ 이 품목에 추가 입력
|
|
</Button>
|
|
<Button type="button" variant="default" onClick={handleNextItem} size="sm" className="text-xs">
|
|
다음 품목
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})()}
|
|
|
|
{/* 저장된 항목들 (inline 모드 또는 modal 모드에서 편집 완료된 항목) */}
|
|
{items.map((item, index) => {
|
|
// Modal 모드에서 현재 편집 중인 항목은 위에서 렌더링하므로 스킵
|
|
if (isModalMode && isEditing && item.id === editingItemId) {
|
|
return null;
|
|
}
|
|
|
|
// Modal 모드: 작은 요약 카드
|
|
if (isModalMode) {
|
|
return (
|
|
<Card key={item.id} className="bg-muted/50 border shadow-sm">
|
|
<CardContent className="p-3">
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<div className="flex-1">
|
|
<div className="mb-1 text-sm font-semibold">
|
|
{index + 1}.{" "}
|
|
{getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
|
|
</div>
|
|
<div className="text-muted-foreground text-xs">
|
|
{componentConfig.displayColumns
|
|
?.map((col) => getFieldValue(item.originalData, col.name))
|
|
.filter(Boolean)
|
|
.join(" | ")}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
setIsEditing(true);
|
|
setEditingItemId(item.id);
|
|
const newDetailId = `detail-${Date.now()}`;
|
|
setEditingDetailId(newDetailId);
|
|
}}
|
|
className="h-7 text-xs text-orange-600"
|
|
>
|
|
추가 입력
|
|
</Button>
|
|
{componentConfig.allowRemove && (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => handleRemoveItem(item.id)}
|
|
className="h-7 w-7 text-red-500"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{/* 🆕 입력된 상세 항목들 표시 */}
|
|
{item.details && item.details.length > 0 && (
|
|
<div className="border-primary mt-2 space-y-1 border-l-2 pl-4">
|
|
{item.details.map((detail, detailIdx) => (
|
|
<div key={detail.id} className="text-primary text-xs">
|
|
{detailIdx + 1}. {detail[componentConfig.additionalFields?.[0]?.name] || "입력됨"}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Inline 모드: 각 품목마다 여러 상세 항목 표시
|
|
return (
|
|
<Card key={item.id} className="border shadow-sm">
|
|
<CardContent className="space-y-3 p-4">
|
|
{/* 제목 (품명) */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-base font-semibold">
|
|
{index + 1}.{" "}
|
|
{getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
onClick={() => {
|
|
const newDetailId = `detail-${Date.now()}`;
|
|
handleAddDetail(item.id);
|
|
}}
|
|
size="sm"
|
|
variant="outline"
|
|
className="text-xs"
|
|
>
|
|
+ 상세 입력 추가
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 원본 데이터 요약 (작은 텍스트, | 구분자) */}
|
|
<div className="text-muted-foreground text-xs">
|
|
{componentConfig.displayColumns
|
|
?.map((col) => getFieldValue(item.originalData, col.name))
|
|
.filter(Boolean)
|
|
.join(" | ")}
|
|
</div>
|
|
|
|
{/* 🆕 각 상세 항목 표시 */}
|
|
{item.details && item.details.length > 0 ? (
|
|
<div className="border-primary space-y-3 border-l-2 pl-4">
|
|
{item.details.map((detail, detailIdx) => (
|
|
<Card key={detail.id} className="border-dashed">
|
|
<CardContent className="space-y-2 p-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-xs font-medium">상세 항목 {detailIdx + 1}</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleRemoveDetail(item.id, detail.id)}
|
|
className="h-6 w-6 p-0 text-red-500"
|
|
>
|
|
X
|
|
</Button>
|
|
</div>
|
|
{/* 입력 필드들 */}
|
|
{renderFieldsByGroup(item.id, detail.id, detail)}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-muted-foreground pl-4 text-xs italic">아직 입력된 상세 항목이 없습니다.</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
|
|
{/* Modal 모드: 하단 추가 버튼 (항목이 있을 때) */}
|
|
{isModalMode && !isEditing && items.length > 0 && (
|
|
<Button
|
|
type="button"
|
|
onClick={() => {
|
|
// 새 항목 추가 로직은 여기서 처리하지 않고, 기존 항목이 있으면 첫 항목을 편집 모드로
|
|
setIsEditing(true);
|
|
setEditingItemId(items[0]?.id || null);
|
|
}}
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full border-dashed text-xs sm:text-sm"
|
|
>
|
|
+ 추가
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 기존 테이블 레이아웃 (사용 안 함, 삭제 예정)
|
|
const renderOldGridLayout = () => {
|
|
return (
|
|
<div className="bg-card overflow-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow className="bg-background">
|
|
{componentConfig.showIndex && (
|
|
<TableHead className="h-12 w-12 px-4 py-3 text-center text-xs font-semibold sm:text-sm">#</TableHead>
|
|
)}
|
|
|
|
{/* 원본 데이터 컬럼 */}
|
|
{componentConfig.displayColumns?.map((col) => (
|
|
<TableHead key={col.name} className="h-12 px-4 py-3 text-xs font-semibold sm:text-sm">
|
|
{col.label || col.name}
|
|
</TableHead>
|
|
))}
|
|
|
|
{/* 추가 입력 필드 컬럼 */}
|
|
{componentConfig.additionalFields?.map((field) => (
|
|
<TableHead key={field.name} className="h-12 px-4 py-3 text-xs font-semibold sm:text-sm">
|
|
{field.label}
|
|
{field.required && <span className="text-destructive ml-1">*</span>}
|
|
</TableHead>
|
|
))}
|
|
|
|
{componentConfig.allowRemove && (
|
|
<TableHead className="h-12 w-20 px-4 py-3 text-center text-xs font-semibold sm:text-sm">작업</TableHead>
|
|
)}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{items.map((item, index) => (
|
|
<TableRow key={item.id} className="bg-background hover:bg-muted/50 transition-colors">
|
|
{/* 인덱스 번호 */}
|
|
{componentConfig.showIndex && (
|
|
<TableCell className="h-14 px-4 py-3 text-center text-xs font-medium sm:text-sm">
|
|
{index + 1}
|
|
</TableCell>
|
|
)}
|
|
|
|
{/* 원본 데이터 표시 */}
|
|
{componentConfig.displayColumns?.map((col) => (
|
|
<TableCell key={col.name} className="h-14 px-4 py-3 text-xs sm:text-sm">
|
|
{getFieldValue(item.originalData, col.name) || "-"}
|
|
</TableCell>
|
|
))}
|
|
|
|
{/* 추가 입력 필드 */}
|
|
{componentConfig.additionalFields?.map((field) => (
|
|
<TableCell key={field.name} className="h-14 px-4 py-3">
|
|
{renderField(field, item)}
|
|
</TableCell>
|
|
))}
|
|
|
|
{/* 삭제 버튼 */}
|
|
{componentConfig.allowRemove && (
|
|
<TableCell className="h-14 px-4 py-3 text-center">
|
|
{!componentConfig.disabled && !componentConfig.readonly && (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => handleRemoveItem(item.id)}
|
|
className="text-destructive hover:bg-destructive/10 hover:text-destructive h-7 w-7 sm:h-8 sm:w-8"
|
|
title="항목 제거"
|
|
>
|
|
<X className="h-3 w-3 sm:h-4 sm:w-4" />
|
|
</Button>
|
|
)}
|
|
</TableCell>
|
|
)}
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 🆕 Card 레이아웃 렌더링 (Grid와 동일)
|
|
const renderCardLayout = () => {
|
|
return renderGridLayout();
|
|
};
|
|
|
|
// 🔧 기존 renderCardLayout (백업 - 사용 안 함)
|
|
const renderCardLayout_OLD = () => {
|
|
const isModalMode = componentConfig.inputMode === "modal";
|
|
console.log("🎨 [renderCardLayout] 렌더링 모드:", {
|
|
inputMode: componentConfig.inputMode,
|
|
isModalMode,
|
|
isEditing,
|
|
editingItemId,
|
|
itemsLength: items.length,
|
|
});
|
|
|
|
return (
|
|
<div className="bg-card space-y-3 p-4">
|
|
{/* Modal 모드: 추가 버튼 */}
|
|
{isModalMode && !isEditing && items.length === 0 && (
|
|
<div className="py-8 text-center">
|
|
<p className="text-muted-foreground mb-4 text-sm">항목을 추가하려면 추가 버튼을 클릭하세요</p>
|
|
<Button type="button" onClick={() => setIsEditing(true)} size="sm" className="text-xs sm:text-sm">
|
|
+ 추가
|
|
</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Modal 모드: 편집 중인 항목 (입력창 표시) */}
|
|
{isModalMode &&
|
|
isEditing &&
|
|
editingItemId &&
|
|
(() => {
|
|
const editingItem = items.find((item) => item.id === editingItemId);
|
|
console.log("🔍 [Modal Mode - Card] 편집 항목 찾기:", {
|
|
editingItemId,
|
|
itemsLength: items.length,
|
|
itemIds: items.map((i) => i.id),
|
|
editingItem: editingItem ? "찾음" : "못 찾음",
|
|
editingDetailId,
|
|
});
|
|
if (!editingItem) {
|
|
console.warn("⚠️ [Modal Mode - Card] 편집할 항목을 찾을 수 없습니다!");
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Card className="border-primary border-2 shadow-sm">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="flex items-center justify-between text-sm font-semibold">
|
|
<span>
|
|
품목:{" "}
|
|
{getFieldValue(editingItem.originalData, componentConfig.displayColumns?.[0]?.name || "") ||
|
|
"항목"}
|
|
</span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
setIsEditing(false);
|
|
setEditingItemId(null);
|
|
setEditingDetailId(null);
|
|
}}
|
|
className="h-7 text-xs"
|
|
>
|
|
취소
|
|
</Button>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
{/* 원본 데이터 요약 */}
|
|
<div className="text-muted-foreground bg-muted rounded p-2 text-xs">
|
|
{componentConfig.displayColumns
|
|
?.map((col) => editingItem.originalData[col.name])
|
|
.filter(Boolean)
|
|
.join(" | ")}
|
|
</div>
|
|
|
|
{/* 🆕 이미 입력된 상세 항목들 표시 */}
|
|
{editingItem.details.length > 0 && (
|
|
<div className="space-y-2">
|
|
<div className="text-xs font-medium">입력된 항목 ({editingItem.details.length}개)</div>
|
|
{editingItem.details.map((detail, idx) => (
|
|
<div
|
|
key={detail.id}
|
|
className="bg-muted/30 flex items-center justify-between rounded border p-2 text-xs"
|
|
>
|
|
<span>
|
|
{idx + 1}. {detail[componentConfig.additionalFields?.[0]?.name] || "입력됨"}
|
|
</span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleRemoveDetail(editingItem.id, detail.id)}
|
|
className="h-6 w-6 p-0"
|
|
>
|
|
X
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 추가 입력 필드 */}
|
|
{componentConfig.additionalFields &&
|
|
componentConfig.additionalFields.length > 0 &&
|
|
editingDetailId &&
|
|
(() => {
|
|
// 현재 편집 중인 detail 찾기 (없으면 빈 객체)
|
|
const currentDetail = editingItem.details.find((d) => d.id === editingDetailId) || {
|
|
id: editingDetailId,
|
|
};
|
|
return renderFieldsByGroup(editingItem.id, editingDetailId, currentDetail);
|
|
})()}
|
|
|
|
{/* 액션 버튼들 */}
|
|
<div className="flex justify-end gap-2 pt-2">
|
|
<Button
|
|
type="button"
|
|
onClick={() => handleAddDetail(editingItem.id)}
|
|
size="sm"
|
|
variant="outline"
|
|
className="text-xs"
|
|
>
|
|
+ 이 품목에 추가 입력
|
|
</Button>
|
|
<Button type="button" variant="default" onClick={handleNextItem} size="sm" className="text-xs">
|
|
다음 품목
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})()}
|
|
|
|
{/* 저장된 항목들 (inline 모드 또는 modal 모드에서 편집 완료된 항목) */}
|
|
{items.map((item, index) => {
|
|
// Modal 모드에서 현재 편집 중인 항목은 위에서 렌더링하므로 스킵
|
|
if (isModalMode && isEditing && item.id === editingItemId) {
|
|
return null;
|
|
}
|
|
|
|
// Modal 모드: 작은 요약 카드
|
|
if (isModalMode) {
|
|
return (
|
|
<Card key={item.id} className="bg-muted/50 border shadow-sm">
|
|
<CardContent className="flex items-center justify-between p-3">
|
|
<div className="flex-1">
|
|
<div className="mb-1 text-sm font-semibold">
|
|
{index + 1}.{" "}
|
|
{getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
|
|
</div>
|
|
<div className="text-muted-foreground text-xs">
|
|
{componentConfig.displayColumns
|
|
?.map((col) => getFieldValue(item.originalData, col.name))
|
|
.filter(Boolean)
|
|
.join(" | ")}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
setIsEditing(true);
|
|
setEditingItemId(item.id);
|
|
}}
|
|
className="h-7 text-xs text-orange-600"
|
|
>
|
|
수정
|
|
</Button>
|
|
{componentConfig.allowRemove && (
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleRemoveItem(item.id)}
|
|
className="text-destructive h-7 text-xs"
|
|
>
|
|
X
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Inline 모드: 각 품목마다 여러 상세 항목 표시
|
|
return (
|
|
<Card key={item.id} className="border shadow-sm">
|
|
<CardContent className="space-y-3 p-4">
|
|
{/* 제목 (품명) */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-base font-semibold">
|
|
{index + 1}.{" "}
|
|
{getFieldValue(item.originalData, componentConfig.displayColumns?.[0]?.name || "") || "항목"}
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
onClick={() => {
|
|
const newDetailId = `detail-${Date.now()}`;
|
|
handleAddDetail(item.id);
|
|
}}
|
|
size="sm"
|
|
variant="outline"
|
|
className="text-xs"
|
|
>
|
|
+ 상세 입력 추가
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 원본 데이터 요약 (작은 텍스트, | 구분자) */}
|
|
<div className="text-muted-foreground text-xs">
|
|
{componentConfig.displayColumns
|
|
?.map((col) => getFieldValue(item.originalData, col.name))
|
|
.filter(Boolean)
|
|
.join(" | ")}
|
|
</div>
|
|
|
|
{/* 🆕 각 상세 항목 표시 */}
|
|
{item.details && item.details.length > 0 ? (
|
|
<div className="border-primary space-y-3 border-l-2 pl-4">
|
|
{item.details.map((detail, detailIdx) => (
|
|
<Card key={detail.id} className="border-dashed">
|
|
<CardContent className="space-y-2 p-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-xs font-medium">상세 항목 {detailIdx + 1}</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleRemoveDetail(item.id, detail.id)}
|
|
className="h-6 w-6 p-0 text-red-500"
|
|
>
|
|
X
|
|
</Button>
|
|
</div>
|
|
{/* 입력 필드들 */}
|
|
{renderFieldsByGroup(item.id, detail.id, detail)}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="text-muted-foreground pl-4 text-xs italic">아직 입력된 상세 항목이 없습니다.</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
|
|
{/* Modal 모드: 하단 추가 버튼 (항목이 있을 때) */}
|
|
{isModalMode && !isEditing && items.length > 0 && (
|
|
<Button
|
|
type="button"
|
|
onClick={() => {
|
|
// 새 항목 추가 로직은 여기서 처리하지 않고, 기존 항목이 있으면 첫 항목을 편집 모드로
|
|
setIsEditing(true);
|
|
setEditingItemId(items[0]?.id || null);
|
|
}}
|
|
variant="outline"
|
|
size="sm"
|
|
className="w-full border-dashed text-xs sm:text-sm"
|
|
>
|
|
+ 추가
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
console.log("🎨 [메인 렌더] 레이아웃 결정:", {
|
|
layout: componentConfig.layout,
|
|
willUseGrid: componentConfig.layout === "grid",
|
|
inputMode: componentConfig.inputMode,
|
|
});
|
|
|
|
return (
|
|
<div style={componentStyle} className={cn("space-y-4", className)} onClick={handleClick}>
|
|
{/* 레이아웃에 따라 렌더링 */}
|
|
{componentConfig.layout === "grid" ? renderGridLayout() : renderCardLayout()}
|
|
|
|
{/* 항목 수 표시 */}
|
|
<div className="text-muted-foreground flex justify-between text-xs">
|
|
<span>총 {items.length}개 항목</span>
|
|
{componentConfig.targetTable && <span>저장 대상: {componentConfig.targetTable}</span>}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* SelectedItemsDetailInput 래퍼 컴포넌트
|
|
* 추가적인 로직이나 상태 관리가 필요한 경우 사용
|
|
*/
|
|
export const SelectedItemsDetailInputWrapper: React.FC<SelectedItemsDetailInputComponentProps> = (props) => {
|
|
return <SelectedItemsDetailInputComponent {...props} />;
|
|
};
|