kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Merge pull request 'feature/screen-management' (#318) from feature/screen-management into main 

Reviewed-on: http://39.117.244.52:3000/kjs/ERP-node/pulls/318
This commit is contained in:
kjs 2025-12-30 14:19:44 +09:00
parent e902987e44 183f68e89a
commit 4421ccaa71
8 changed files with 1171 additions and 694 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/components/screen/config-panels/ButtonConfigPanel.tsx
View File

@ -3081,6 +3081,79 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
/>
)}
{/* 🆕 행 선택 시에만 활성화 설정 */}
<div className="mt-4 space-y-4 rounded-lg border bg-muted/50 p-4">
<h4 className="text-sm font-medium text-foreground">행 선택 활성화 조건</h4>
<p className="text-xs text-muted-foreground">
테이블 리스트나 분할 패널에서 데이터가 선택되었을 때만 버튼을 활성화합니다.
</p>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label>행 선택 시에만 활성화</Label>
<p className="text-xs text-muted-foreground">
체크하면 테이블에서 행을 선택해야만 버튼이 활성화됩니다.
</p>
</div>
<Switch
checked={component.componentConfig?.action?.requireRowSelection || false}
onCheckedChange={(checked) => {
onUpdateProperty("componentConfig.action.requireRowSelection", checked);
}}
/>
</div>
{component.componentConfig?.action?.requireRowSelection && (
<div className="space-y-3 pl-4 border-l-2 border-primary/20">
<div>
<Label htmlFor="row-selection-source">선택 데이터 소스</Label>
<Select
value={component.componentConfig?.action?.rowSelectionSource || "auto"}
onValueChange={(value) => {
onUpdateProperty("componentConfig.action.rowSelectionSource", value);
}}
>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="데이터 소스 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="auto">자동 감지 (권장)</SelectItem>
<SelectItem value="tableList">테이블 리스트 선택</SelectItem>
<SelectItem value="splitPanelLeft">분할 패널 좌측 선택</SelectItem>
<SelectItem value="flowWidget">플로우 위젯 선택</SelectItem>
</SelectContent>
</Select>
<p className="mt-1 text-xs text-muted-foreground">
자동 감지: 테이블, 분할 패널, 플로우 위젯 중 선택된 항목이 있으면 활성화
</p>
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label>다중 선택 허용</Label>
<p className="text-xs text-muted-foreground">
여러 행이 선택되어도 활성화 (기본: 1개 이상 선택 시 활성화)
</p>
</div>
<Switch
checked={component.componentConfig?.action?.allowMultiRowSelection ?? true}
onCheckedChange={(checked) => {
onUpdateProperty("componentConfig.action.allowMultiRowSelection", checked);
}}
/>
</div>
{!(component.componentConfig?.action?.allowMultiRowSelection ?? true) && (
<div className="rounded-md bg-yellow-50 p-2 dark:bg-yellow-950/20">
<p className="text-xs text-yellow-800 dark:text-yellow-200">
정확히 1개의 행만 선택되어야 버튼이 활성화됩니다.
</p>
</div>
)}
</div>
)}
</div>
{/* 제어 기능 섹션 */}
<div className="mt-8 border-t border-border pt-6">
<ImprovedButtonControlConfigPanel component={component} onUpdateProperty={onUpdateProperty} />

179
frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx
View File

@ -296,6 +296,145 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
return false;
}, [component.componentConfig?.action, formData, vehicleStatus, statusLoading, component.label]);
// 🆕 modalDataStore에서 선택된 데이터 확인 (분할 패널 등에서 저장됨)
const [modalStoreData, setModalStoreData] = useState<Record<string, any[]>>({});
// modalDataStore 상태 구독 (실시간 업데이트)
useEffect(() => {
const actionConfig = component.componentConfig?.action;
if (!actionConfig?.requireRowSelection) return;
// 동적 import로 modalDataStore 구독
let unsubscribe: (() => void) | undefined;
import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
// 초기값 설정
setModalStoreData(useModalDataStore.getState().dataRegistry);
// 상태 변경 구독
unsubscribe = useModalDataStore.subscribe((state) => {
setModalStoreData(state.dataRegistry);
});
});
return () => {
unsubscribe?.();
};
}, [component.componentConfig?.action?.requireRowSelection]);
// 🆕 행 선택 기반 비활성화 조건 계산
const isRowSelectionDisabled = useMemo(() => {
const actionConfig = component.componentConfig?.action;
// requireRowSelection이 활성화되어 있지 않으면 비활성화하지 않음
if (!actionConfig?.requireRowSelection) {
return false;
}
const rowSelectionSource = actionConfig.rowSelectionSource || "auto";
const allowMultiRowSelection = actionConfig.allowMultiRowSelection ?? true;
// 선택된 데이터 확인
let hasSelection = false;
let selectionCount = 0;
let selectionSource = "";
// 1. 자동 감지 모드 또는 테이블 리스트 모드
if (rowSelectionSource === "auto" || rowSelectionSource === "tableList") {
// TableList에서 선택된 행 확인 (props로 전달됨)
if (selectedRowsData && selectedRowsData.length > 0) {
hasSelection = true;
selectionCount = selectedRowsData.length;
selectionSource = "tableList (selectedRowsData)";
}
// 또는 selectedRows prop 확인
else if (selectedRows && selectedRows.length > 0) {
hasSelection = true;
selectionCount = selectedRows.length;
selectionSource = "tableList (selectedRows)";
}
}
// 2. 분할 패널 좌측 선택 데이터 확인
if (rowSelectionSource === "auto" || rowSelectionSource === "splitPanelLeft") {
// SplitPanelContext에서 확인
if (splitPanelContext?.selectedLeftData && Object.keys(splitPanelContext.selectedLeftData).length > 0) {
if (!hasSelection) {
hasSelection = true;
selectionCount = 1;
selectionSource = "splitPanelLeft (context)";
}
}
// 🆕 modalDataStore에서도 확인 (SplitPanelLayoutComponent에서 저장)
if (!hasSelection && Object.keys(modalStoreData).length > 0) {
// modalDataStore에서 데이터가 있는지 확인
for (const [sourceId, items] of Object.entries(modalStoreData)) {
if (items && items.length > 0) {
hasSelection = true;
selectionCount = items.length;
selectionSource = `modalDataStore (${sourceId})`;
break;
}
}
}
}
// 3. 플로우 위젯 선택 데이터 확인
if (rowSelectionSource === "auto" || rowSelectionSource === "flowWidget") {
// 플로우 위젯 선택 데이터 확인
if (!hasSelection && flowSelectedData && flowSelectedData.length > 0) {
hasSelection = true;
selectionCount = flowSelectedData.length;
selectionSource = "flowWidget";
}
}
// 디버깅 로그
console.log("🔍 [ButtonPrimary] 행 선택 체크:", component.label, {
rowSelectionSource,
hasSelection,
selectionCount,
selectionSource,
hasSplitPanelContext: !!splitPanelContext,
selectedLeftData: splitPanelContext?.selectedLeftData,
selectedRowsData: selectedRowsData?.length,
selectedRows: selectedRows?.length,
flowSelectedData: flowSelectedData?.length,
modalStoreDataKeys: Object.keys(modalStoreData),
});
// 선택된 데이터가 없으면 비활성화
if (!hasSelection) {
console.log("🚫 [ButtonPrimary] 행 선택 필요 → 비활성화:", component.label);
return true;
}
// 다중 선택 허용하지 않는 경우, 정확히 1개만 선택되어야 함
if (!allowMultiRowSelection && selectionCount !== 1) {
console.log("🚫 [ButtonPrimary] 정확히 1개 행 선택 필요 → 비활성화:", component.label, {
selectionCount,
allowMultiRowSelection,
});
return true;
}
console.log("✅ [ButtonPrimary] 행 선택 조건 충족:", component.label, {
selectionCount,
selectionSource,
});
return false;
}, [
component.componentConfig?.action,
component.label,
selectedRows,
selectedRowsData,
splitPanelContext?.selectedLeftData,
flowSelectedData,
splitPanelContext,
modalStoreData,
]);
// 확인 다이얼로그 상태
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
const [pendingAction, setPendingAction] = useState<{
@ -832,7 +971,14 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
}
// modalDataStore에서 선택된 데이터 가져오기 (분할 패널 등에서 선택한 데이터)
if ((!effectiveSelectedRowsData || effectiveSelectedRowsData.length === 0) && effectiveTableName) {
// 단, 모달(modal) 액션은 신규 등록이므로 modalDataStore 데이터를 가져오지 않음
// (다른 화면에서 선택한 데이터가 남아있을 수 있으므로)
const shouldFetchFromModalDataStore =
processedConfig.action.type !== "modal" &&
(!effectiveSelectedRowsData || effectiveSelectedRowsData.length === 0) &&
effectiveTableName;
if (shouldFetchFromModalDataStore) {
try {
const { useModalDataStore } = await import("@/stores/modalDataStore");
const dataRegistry = useModalDataStore.getState().dataRegistry;
@ -860,12 +1006,10 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
return;
}
// 모달 액션인데 선택된 데이터가 있으면 경고 메시지 표시하고 중단
// (신규 등록 모달에서 선택된 데이터가 초기값으로 전달되는 것을 방지)
if (processedConfig.action.type === "modal" && effectiveSelectedRowsData && effectiveSelectedRowsData.length > 0) {
toast.warning("신규 등록 시에는 테이블에서 선택된 항목을 해제해주세요.");
return;
}
// 🔧 모달 액션 시 선택 데이터 경고 제거
// 이전에는 "신규 등록 시에는 테이블에서 선택된 항목을 해제해주세요" 경고를 표시했으나,
// 다른 화면에서 선택한 데이터가 남아있는 경우 오탐이 발생하여 제거함.
// 모달 화면 내부에서 필요 시 자체적으로 선택 데이터를 무시하도록 처리하면 됨.
// 수정(edit) 액션 검증
if (processedConfig.action.type === "edit") {
@ -1088,17 +1232,26 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
}
}
// 🆕 최종 비활성화 상태 (설정 + 조건부 비활성화)
const finalDisabled = componentConfig.disabled || isOperationButtonDisabled || statusLoading;
// 🆕 최종 비활성화 상태 (설정 + 조건부 비활성화 + 행 선택 필수)
const finalDisabled = componentConfig.disabled || isOperationButtonDisabled || isRowSelectionDisabled || statusLoading;
// 공통 버튼 스타일
// 🔧 component.style에서 background/backgroundColor 충돌 방지
const userStyle = component.style
? Object.fromEntries(
Object.entries(component.style).filter(
([key]) => !["width", "height", "background", "backgroundColor"].includes(key)
)
)
: {};
const buttonElementStyle: React.CSSProperties = {
width: "100%",
height: "100%",
minHeight: "40px",
border: "none",
borderRadius: "0.5rem",
background: finalDisabled ? "#e5e7eb" : buttonColor,
backgroundColor: finalDisabled ? "#e5e7eb" : buttonColor, // 🔧 background → backgroundColor로 변경
color: finalDisabled ? "#9ca3af" : "white",
// 🔧 크기 설정 적용 (sm/md/lg)
fontSize: componentConfig.size === "sm" ? "0.75rem" : componentConfig.size === "lg" ? "1rem" : "0.875rem",
@ -1114,10 +1267,8 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
margin: "0",
lineHeight: "1.25",
boxShadow: finalDisabled ? "none" : "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
// 디자인 모드와 인터랙티브 모드 모두에서 사용자 스타일 적용 (width/height 제외)
...(component.style
? Object.fromEntries(Object.entries(component.style).filter(([key]) => key !== "width" && key !== "height"))
: {}),
// 디자인 모드와 인터랙티브 모드 모두에서 사용자 스타일 적용 (width/height/background 제외)
...userStyle,
};
const buttonContent = processedConfig.text !== undefined ? processedConfig.text : component.label || "버튼";

12
frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
View File

@ -2035,9 +2035,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
style={{
height: componentConfig.leftPanel?.panelHeaderHeight || 48,
minHeight: componentConfig.leftPanel?.panelHeaderHeight || 48,
padding: '0 1rem',
display: 'flex',
alignItems: 'center'
padding: "0 1rem",
display: "flex",
alignItems: "center",
}}
>
<div className="flex w-full items-center justify-between">
@ -2526,9 +2526,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
style={{
height: componentConfig.rightPanel?.panelHeaderHeight || 48,
minHeight: componentConfig.rightPanel?.panelHeaderHeight || 48,
padding: '0 1rem',
display: 'flex',
alignItems: 'center'
padding: "0 1rem",
display: "flex",
alignItems: "center",
}}
>
<div className="flex w-full items-center justify-between">

391
frontend/lib/registry/components/universal-form-modal/TableSectionRenderer.tsx
View File

@ -16,12 +16,7 @@ import { ItemSelectionModal } from "../modal-repeater-table/ItemSelectionModal";
import { RepeaterColumnConfig, CalculationRule } from "../modal-repeater-table/types";
// 타입 정의
import {
TableSectionConfig,
TableColumnConfig,
TableJoinCondition,
FormDataState,
} from "./types";
import { TableSectionConfig, TableColumnConfig, TableJoinCondition, FormDataState } from "./types";
interface TableSectionRendererProps {
sectionId: string;
@ -81,11 +76,13 @@ function convertToRepeaterColumn(col: TableColumnConfig): RepeaterColumnConfig {
// 외부 테이블 조회 설정 (sourceType이 "externalTable"인 경우)
externalLookup: cond.externalLookup,
// 값 변환 설정 전달 (레거시 호환)
transform: cond.transform?.enabled ? {
transform: cond.transform?.enabled
? {
tableName: cond.transform.tableName,
matchColumn: cond.transform.matchColumn,
resultColumn: cond.transform.resultColumn,
} : undefined,
}
: undefined,
})),
},
// 조회 유형 정보 추가
@ -122,7 +119,11 @@ function convertToRepeaterColumn(col: TableColumnConfig): RepeaterColumnConfig {
/**
* TableCalculationRule을 CalculationRule로 변환
*/
function convertToCalculationRule(calc: { resultField: string; formula: string; dependencies: string[] }): CalculationRule {
function convertToCalculationRule(calc: {
resultField: string;
formula: string;
dependencies: string[];
}): CalculationRule {
return {
result: calc.resultField,
formula: calc.formula,
@ -136,7 +137,7 @@ function convertToCalculationRule(calc: { resultField: string; formula: string;
*/
async function transformValue(
value: any,
transform: { tableName: string; matchColumn: string; resultColumn: string }
transform: { tableName: string; matchColumn: string; resultColumn: string },
): Promise<any> {
if (!value || !transform.tableName || !transform.matchColumn || !transform.resultColumn) {
return value;
@ -144,19 +145,16 @@ async function transformValue(
try {
// 정확히 일치하는 검색
const response = await apiClient.post(
`/table-management/tables/${transform.tableName}/data`,
{
const response = await apiClient.post(`/table-management/tables/${transform.tableName}/data`, {
search: {
[transform.matchColumn]: {
value: value,
operator: "equals"
}
operator: "equals",
},
},
size: 1,
page: 1
}
);
page: 1,
});
if (response.data.success && response.data.data?.data?.length > 0) {
const transformedValue = response.data.data.data[0][transform.resultColumn];
@ -186,7 +184,7 @@ async function fetchExternalLookupValue(
},
rowData: any,
sourceData: any,
formData: FormDataState
formData: FormDataState,
): Promise<any> {
// 1. 비교 값 가져오기
let matchValue: any;
@ -199,31 +197,32 @@ async function fetchExternalLookupValue(
}
if (matchValue === undefined || matchValue === null || matchValue === "") {
console.warn(`외부 테이블 조회: 비교 값이 없습니다. (${externalLookup.matchSourceType}.${externalLookup.matchSourceField})`);
console.warn(
`외부 테이블 조회: 비교 값이 없습니다. (${externalLookup.matchSourceType}.${externalLookup.matchSourceField})`,
);
return undefined;
}
// 2. 외부 테이블에서 값 조회 (정확히 일치하는 검색)
try {
const response = await apiClient.post(
`/table-management/tables/${externalLookup.tableName}/data`,
{
const response = await apiClient.post(`/table-management/tables/${externalLookup.tableName}/data`, {
search: {
[externalLookup.matchColumn]: {
value: matchValue,
operator: "equals"
}
operator: "equals",
},
},
size: 1,
page: 1
}
);
page: 1,
});
if (response.data.success && response.data.data?.data?.length > 0) {
return response.data.data.data[0][externalLookup.resultColumn];
}
console.warn(`외부 테이블 조회: ${externalLookup.tableName}.${externalLookup.matchColumn} = "${matchValue}" 인 행을 찾을 수 없습니다.`);
console.warn(
`외부 테이블 조회: ${externalLookup.tableName}.${externalLookup.matchColumn} = "${matchValue}" 인 행을 찾을 수 없습니다.`,
);
return undefined;
} catch (error) {
console.error("외부 테이블 조회 오류:", error);
@ -247,7 +246,7 @@ async function fetchExternalValue(
joinConditions: TableJoinCondition[],
rowData: any,
sourceData: any,
formData: FormDataState
formData: FormDataState,
): Promise<any> {
if (joinConditions.length === 0) {
return undefined;
@ -298,15 +297,16 @@ async function fetchExternalValue(
// 정확히 일치하는 검색을 위해 operator: "equals" 사용
whereConditions[condition.targetColumn] = {
value: convertedValue,
operator: "equals"
operator: "equals",
};
}
// API 호출
const response = await apiClient.post(
`/table-management/tables/${tableName}/data`,
{ search: whereConditions, size: 1, page: 1 }
);
const response = await apiClient.post(`/table-management/tables/${tableName}/data`, {
search: whereConditions,
size: 1,
page: 1,
});
if (response.data.success && response.data.data?.data?.length > 0) {
return response.data.data.data[0][valueColumn];
@ -389,14 +389,11 @@ export function TableSectionRenderer({
setDynamicOptionsLoading(true);
try {
// DISTINCT 값을 가져오기 위한 API 호출
const response = await apiClient.post(
`/table-management/tables/${tableName}/data`,
{
const response = await apiClient.post(`/table-management/tables/${tableName}/data`, {
search: filterCondition ? { _raw: filterCondition } : {},
size: 1000,
page: 1,
}
);
});
if (response.data.success && response.data.data?.data) {
const rows = response.data.data.data;
@ -406,7 +403,7 @@ export function TableSectionRenderer({
for (const row of rows) {
const value = row[valueColumn];
if (value && !uniqueValues.has(value)) {
const label = labelColumn ? (row[labelColumn] || value) : value;
const label = labelColumn ? row[labelColumn] || value : value;
uniqueValues.set(value, label);
}
}
@ -448,7 +445,7 @@ export function TableSectionRenderer({
// 동적 Select 옵션이 있는 컬럼 확인
const hasDynamicSelectColumns = useMemo(() => {
return tableConfig.columns?.some(col => col.dynamicSelectOptions?.enabled);
return tableConfig.columns?.some((col) => col.dynamicSelectOptions?.enabled);
}, [tableConfig.columns]);
// 소스 테이블 데이터 로드 (동적 Select 옵션용)
@ -467,14 +464,11 @@ export function TableSectionRenderer({
filterCondition[conditionalConfig.sourceFilter.filterColumn] = activeConditionTab;
}
const response = await apiClient.post(
`/table-management/tables/${tableConfig.source.tableName}/data`,
{
const response = await apiClient.post(`/table-management/tables/${tableConfig.source.tableName}/data`, {
search: filterCondition,
size: 1000,
page: 1,
}
);
});
if (response.data.success && response.data.data?.data) {
setSourceDataCache(response.data.data.data);
@ -510,14 +504,11 @@ export function TableSectionRenderer({
const filterCondition: Record<string, any> = {};
filterCondition[conditionalConfig.sourceFilter!.filterColumn] = activeConditionTab;
const response = await apiClient.post(
`/table-management/tables/${tableConfig.source!.tableName}/data`,
{
const response = await apiClient.post(`/table-management/tables/${tableConfig.source!.tableName}/data`, {
search: filterCondition,
size: 1000,
page: 1,
}
);
});
if (response.data.success && response.data.data?.data) {
setSourceDataCache(response.data.data.data);
@ -534,7 +525,13 @@ export function TableSectionRenderer({
};
loadSourceData();
}, [activeConditionTab, hasDynamicSelectColumns, conditionalConfig?.sourceFilter?.enabled, conditionalConfig?.sourceFilter?.filterColumn, tableConfig.source?.tableName]);
}, [
activeConditionTab,
hasDynamicSelectColumns,
conditionalConfig?.sourceFilter?.enabled,
conditionalConfig?.sourceFilter?.filterColumn,
tableConfig.source?.tableName,
]);
// 컬럼별 동적 Select 옵션 생성
const dynamicSelectOptionsMap = useMemo(() => {
@ -562,7 +559,7 @@ export function TableSectionRenderer({
if (distinct && seenValues.has(stringValue)) continue;
seenValues.add(stringValue);
const label = labelField ? (row[labelField] || stringValue) : stringValue;
const label = labelField ? row[labelField] || stringValue : stringValue;
options.push({ value: stringValue, label: String(label) });
}
@ -578,9 +575,7 @@ export function TableSectionRenderer({
let processedData = newData;
// 날짜 일괄 적용 로직: batchApply가 활성화된 날짜 컬럼 처리
const batchApplyColumns = tableConfig.columns.filter(
(col) => col.type === "date" && col.batchApply === true
);
const batchApplyColumns = tableConfig.columns.filter((col) => col.type === "date" && col.batchApply === true);
for (const dateCol of batchApplyColumns) {
// 이미 일괄 적용된 컬럼은 건너뜀
@ -608,20 +603,20 @@ export function TableSectionRenderer({
setTableData(processedData);
onTableDataChange(processedData);
},
[onTableDataChange, tableConfig.columns, batchAppliedFields]
[onTableDataChange, tableConfig.columns, batchAppliedFields],
);
// 행 선택 모드: 드롭다운 값 변경 시 같은 소스 행의 다른 컬럼들 자동 채움
const handleDynamicSelectChange = useCallback(
(rowIndex: number, columnField: string, selectedValue: string, conditionValue?: string) => {
const column = tableConfig.columns?.find(col => col.field === columnField);
const column = tableConfig.columns?.find((col) => col.field === columnField);
if (!column?.dynamicSelectOptions?.rowSelectionMode?.enabled) {
// 행 선택 모드가 아니면 일반 값 변경만
if (conditionValue && isConditionalMode) {
const currentData = conditionalTableData[conditionValue] || [];
const newData = [...currentData];
newData[rowIndex] = { ...newData[rowIndex], [columnField]: selectedValue };
setConditionalTableData(prev => ({ ...prev, [conditionValue]: newData }));
setConditionalTableData((prev) => ({ ...prev, [conditionValue]: newData }));
onConditionalTableDataChange?.(conditionValue, newData);
} else {
const newData = [...tableData];
@ -635,7 +630,7 @@ export function TableSectionRenderer({
const { sourceField } = column.dynamicSelectOptions;
const { autoFillColumns, sourceIdColumn, targetIdField } = column.dynamicSelectOptions.rowSelectionMode;
const sourceRow = sourceDataCache.find(row => String(row[sourceField]) === selectedValue);
const sourceRow = sourceDataCache.find((row) => String(row[sourceField]) === selectedValue);
if (!sourceRow) {
console.warn(`[TableSectionRenderer] 소스 행을 찾을 수 없음: ${sourceField} = ${selectedValue}`);
@ -672,7 +667,7 @@ export function TableSectionRenderer({
// 데이터 업데이트
if (conditionValue && isConditionalMode) {
setConditionalTableData(prev => ({ ...prev, [conditionValue]: newData }));
setConditionalTableData((prev) => ({ ...prev, [conditionValue]: newData }));
onConditionalTableDataChange?.(conditionValue, newData);
} else {
handleDataChange(newData);
@ -685,14 +680,23 @@ export function TableSectionRenderer({
updatedRow,
});
},
[tableConfig.columns, sourceDataCache, tableData, conditionalTableData, isConditionalMode, handleDataChange, onConditionalTableDataChange]
[
tableConfig.columns,
sourceDataCache,
tableData,
conditionalTableData,
isConditionalMode,
handleDataChange,
onConditionalTableDataChange,
],
);
// 참조 컬럼 값 조회 함수 (saveToTarget: false인 컬럼에 대해 소스 테이블 조회)
const loadReferenceColumnValues = useCallback(async (data: any[]) => {
const loadReferenceColumnValues = useCallback(
async (data: any[]) => {
// saveToTarget: false이고 referenceDisplay가 설정된 컬럼 찾기
const referenceColumns = (tableConfig.columns || []).filter(
(col) => col.saveConfig?.saveToTarget === false && col.saveConfig?.referenceDisplay
(col) => col.saveConfig?.saveToTarget === false && col.saveConfig?.referenceDisplay,
);
if (referenceColumns.length === 0) return;
@ -721,14 +725,11 @@ export function TableSectionRenderer({
try {
// 소스 테이블에서 참조 ID에 해당하는 데이터 조회
const response = await apiClient.post(
`/table-management/tables/${sourceTableName}/data`,
{
const response = await apiClient.post(`/table-management/tables/${sourceTableName}/data`, {
search: { id: Array.from(referenceIdSet) }, // ID 배열로 조회
size: 1000,
page: 1,
}
);
});
if (!response.data?.success || !response.data?.data?.data) {
console.warn("[TableSectionRenderer] 참조 데이터 조회 실패");
@ -771,7 +772,9 @@ export function TableSectionRenderer({
} catch (error) {
console.error("[TableSectionRenderer] 참조 데이터 조회 실패:", error);
}
}, [tableConfig.columns, tableConfig.source?.tableName]);
},
[tableConfig.columns, tableConfig.source?.tableName],
);
// formData에서 초기 테이블 데이터 로드 (수정 모드에서 _groupedData 표시)
useEffect(() => {
@ -796,7 +799,7 @@ export function TableSectionRenderer({
// RepeaterColumnConfig로 변환 (동적 Select 옵션 반영)
const columns: RepeaterColumnConfig[] = useMemo(() => {
return (tableConfig.columns || []).map(col => {
return (tableConfig.columns || []).map((col) => {
const baseColumn = convertToRepeaterColumn(col);
// 동적 Select 옵션이 있으면 적용
@ -840,22 +843,23 @@ export function TableSectionRenderer({
return updatedRow;
},
[calculationRules]
[calculationRules],
);
const calculateAll = useCallback(
(data: any[]): any[] => {
return data.map((row) => calculateRow(row));
},
[calculateRow]
[calculateRow],
);
// 행 변경 핸들러 (동적 Select 행 선택 모드 지원)
const handleRowChange = useCallback(
(index: number, newRow: any, conditionValue?: string) => {
const oldRow = conditionValue && isConditionalMode
? (conditionalTableData[conditionValue]?.[index] || {})
: (tableData[index] || {});
const oldRow =
conditionValue && isConditionalMode
? conditionalTableData[conditionValue]?.[index] || {}
: tableData[index] || {};
// 변경된 필드 찾기
const changedFields: string[] = [];
@ -867,7 +871,7 @@ export function TableSectionRenderer({
// 동적 Select 컬럼의 행 선택 모드 확인
for (const changedField of changedFields) {
const column = tableConfig.columns?.find(col => col.field === changedField);
const column = tableConfig.columns?.find((col) => col.field === changedField);
if (column?.dynamicSelectOptions?.rowSelectionMode?.enabled) {
// 행 선택 모드 처리 (자동 채움)
handleDynamicSelectChange(index, changedField, newRow[changedField], conditionValue);
@ -882,7 +886,7 @@ export function TableSectionRenderer({
const currentData = conditionalTableData[conditionValue] || [];
const newData = [...currentData];
newData[index] = calculatedRow;
setConditionalTableData(prev => ({ ...prev, [conditionValue]: newData }));
setConditionalTableData((prev) => ({ ...prev, [conditionValue]: newData }));
onConditionalTableDataChange?.(conditionValue, newData);
} else {
const newData = [...tableData];
@ -890,7 +894,16 @@ export function TableSectionRenderer({
handleDataChange(newData);
}
},
[tableData, conditionalTableData, isConditionalMode, tableConfig.columns, calculateRow, handleDataChange, handleDynamicSelectChange, onConditionalTableDataChange]
[
tableData,
conditionalTableData,
isConditionalMode,
tableConfig.columns,
calculateRow,
handleDataChange,
handleDynamicSelectChange,
onConditionalTableDataChange,
],
);
// 행 삭제 핸들러
@ -899,7 +912,7 @@ export function TableSectionRenderer({
const newData = tableData.filter((_, i) => i !== index);
handleDataChange(newData);
},
[tableData, handleDataChange]
[tableData, handleDataChange],
);
// 선택된 항목 일괄 삭제
@ -969,11 +982,13 @@ export function TableSectionRenderer({
// 외부 테이블 조회 설정
externalLookup: cond.externalLookup,
// 값 변환 설정 전달 (레거시 호환)
transform: cond.transform?.enabled ? {
transform: cond.transform?.enabled
? {
tableName: cond.transform.tableName,
matchColumn: cond.transform.matchColumn,
resultColumn: cond.transform.resultColumn,
} : undefined,
}
: undefined,
};
});
@ -984,7 +999,7 @@ export function TableSectionRenderer({
joinConditions,
{ ...sourceItem, ...newItem }, // rowData (현재 행)
sourceItem, // sourceData (소스 테이블 원본)
formData
formData,
);
if (value !== undefined) {
@ -1046,7 +1061,7 @@ export function TableSectionRenderer({
joinConditions,
{ ...sourceItem, ...newItem }, // rowData
sourceItem, // sourceData
formData
formData,
);
if (value !== undefined) {
newItem[col.field] = value;
@ -1070,7 +1085,7 @@ export function TableSectionRenderer({
}
return newItem;
})
}),
);
// 계산 필드 업데이트
@ -1080,7 +1095,7 @@ export function TableSectionRenderer({
const newData = [...tableData, ...calculatedItems];
handleDataChange(newData);
},
[tableConfig.columns, formData, tableData, calculateAll, handleDataChange, activeDataSources]
[tableConfig.columns, formData, tableData, calculateAll, handleDataChange, activeDataSources],
);
// 컬럼 모드/조회 옵션 변경 핸들러
@ -1140,11 +1155,13 @@ export function TableSectionRenderer({
// 외부 테이블 조회 설정
externalLookup: cond.externalLookup,
// 값 변환 설정 전달 (레거시 호환)
transform: cond.transform?.enabled ? {
transform: cond.transform?.enabled
? {
tableName: cond.transform.tableName,
matchColumn: cond.transform.matchColumn,
resultColumn: cond.transform.resultColumn,
} : undefined,
}
: undefined,
};
});
@ -1156,7 +1173,7 @@ export function TableSectionRenderer({
joinConditions,
row,
sourceData,
formData
formData,
);
if (value !== undefined) {
@ -1164,7 +1181,7 @@ export function TableSectionRenderer({
}
return { ...row, [columnField]: newValue };
})
}),
);
// 계산 필드 업데이트
@ -1199,14 +1216,14 @@ export function TableSectionRenderer({
}
return { ...row, [columnField]: newValue };
})
}),
);
// 계산 필드 업데이트
const calculatedData = calculateAll(updatedData);
handleDataChange(calculatedData);
},
[tableConfig.columns, tableData, formData, calculateAll, handleDataChange]
[tableConfig.columns, tableData, formData, calculateAll, handleDataChange],
);
// 소스 테이블 정보
@ -1216,10 +1233,16 @@ export function TableSectionRenderer({
const sourceSearchFields = source.searchColumns;
const columnLabels = source.columnLabels || {};
const modalTitle = uiConfig?.modalTitle || "항목 검색 및 선택";
const addButtonType = uiConfig?.addButtonType || "search";
const addButtonText = uiConfig?.addButtonText || (addButtonType === "addRow" ? "항목 추가" : "항목 검색");
const multiSelect = uiConfig?.multiSelect ?? true;
// 버튼 표시 설정 (두 버튼 동시 표시 가능)
// 레거시 호환: 기존 addButtonType 설정이 있으면 그에 맞게 변환
const legacyAddButtonType = uiConfig?.addButtonType;
const showSearchButton = legacyAddButtonType === "addRow" ? false : (uiConfig?.showSearchButton ?? true);
const showAddRowButton = legacyAddButtonType === "addRow" ? true : (uiConfig?.showAddRowButton ?? false);
const searchButtonText = uiConfig?.searchButtonText || uiConfig?.addButtonText || "품목 검색";
const addRowButtonText = uiConfig?.addRowButtonText || "직접 입력";
// 기본 필터 조건 생성 (사전 필터만 - 모달 필터는 ItemSelectionModal에서 처리)
const baseFilterCondition: Record<string, any> = useMemo(() => {
const condition: Record<string, any> = {};
@ -1253,7 +1276,7 @@ export function TableSectionRenderer({
column: filter.column,
label: filter.label || filter.column,
// category 타입을 select로 변환 (ModalFilterConfig 호환)
type: filter.type === "category" ? "select" as const : filter.type as "text" | "select",
type: filter.type === "category" ? ("select" as const) : (filter.type as "text" | "select"),
options: filter.options,
categoryRef: filter.categoryRef,
defaultValue: filter.defaultValue,
@ -1265,7 +1288,8 @@ export function TableSectionRenderer({
// ============================================
// 조건부 테이블: 조건 체크박스 토글
const handleConditionToggle = useCallback((conditionValue: string, checked: boolean) => {
const handleConditionToggle = useCallback(
(conditionValue: string, checked: boolean) => {
setSelectedConditions((prev) => {
if (checked) {
const newConditions = [...prev, conditionValue];
@ -1283,10 +1307,13 @@ export function TableSectionRenderer({
return newConditions;
}
});
}, [activeConditionTab]);
},
[activeConditionTab],
);
// 조건부 테이블: 조건별 데이터 변경
const handleConditionalDataChange = useCallback((conditionValue: string, newData: any[]) => {
const handleConditionalDataChange = useCallback(
(conditionValue: string, newData: any[]) => {
setConditionalTableData((prev) => ({
...prev,
[conditionValue]: newData,
@ -1315,26 +1342,35 @@ export function TableSectionRenderer({
}
onTableDataChange(allData);
}, [conditionalTableData, conditionalConfig?.conditionColumn, onConditionalTableDataChange, onTableDataChange]);
},
[conditionalTableData, conditionalConfig?.conditionColumn, onConditionalTableDataChange, onTableDataChange],
);
// 조건부 테이블: 조건별 행 변경
const handleConditionalRowChange = useCallback((conditionValue: string, index: number, newRow: any) => {
const handleConditionalRowChange = useCallback(
(conditionValue: string, index: number, newRow: any) => {
const calculatedRow = calculateRow(newRow);
const currentData = conditionalTableData[conditionValue] || [];
const newData = [...currentData];
newData[index] = calculatedRow;
handleConditionalDataChange(conditionValue, newData);
}, [conditionalTableData, calculateRow, handleConditionalDataChange]);
},
[conditionalTableData, calculateRow, handleConditionalDataChange],
);
// 조건부 테이블: 조건별 행 삭제
const handleConditionalRowDelete = useCallback((conditionValue: string, index: number) => {
const handleConditionalRowDelete = useCallback(
(conditionValue: string, index: number) => {
const currentData = conditionalTableData[conditionValue] || [];
const newData = currentData.filter((_, i) => i !== index);
handleConditionalDataChange(conditionValue, newData);
}, [conditionalTableData, handleConditionalDataChange]);
},
[conditionalTableData, handleConditionalDataChange],
);
// 조건부 테이블: 조건별 선택 행 일괄 삭제
const handleConditionalBulkDelete = useCallback((conditionValue: string) => {
const handleConditionalBulkDelete = useCallback(
(conditionValue: string) => {
const selected = conditionalSelectedRows[conditionValue] || new Set();
if (selected.size === 0) return;
@ -1347,10 +1383,13 @@ export function TableSectionRenderer({
...prev,
[conditionValue]: new Set(),
}));
}, [conditionalTableData, conditionalSelectedRows, handleConditionalDataChange]);
},
[conditionalTableData, conditionalSelectedRows, handleConditionalDataChange],
);
// 조건부 테이블: 아이템 추가 (특정 조건에)
const handleConditionalAddItems = useCallback(async (items: any[]) => {
const handleConditionalAddItems = useCallback(
async (items: any[]) => {
if (!modalCondition) return;
// 기존 handleAddItems 로직을 재사용하여 매핑된 아이템 생성
@ -1387,7 +1426,7 @@ export function TableSectionRenderer({
newItem._sourceData = sourceItem;
return newItem;
})
}),
);
// 현재 조건의 데이터에 추가
@ -1396,7 +1435,9 @@ export function TableSectionRenderer({
handleConditionalDataChange(modalCondition, newData);
setModalOpen(false);
}, [modalCondition, tableConfig.columns, formData, conditionalTableData, handleConditionalDataChange]);
},
[modalCondition, tableConfig.columns, formData, conditionalTableData, handleConditionalDataChange],
);
// 조건부 테이블: 모달 열기 (특정 조건에 대해)
const openConditionalModal = useCallback((conditionValue: string) => {
@ -1405,7 +1446,8 @@ export function TableSectionRenderer({
}, []);
// 조건부 테이블: 빈 행 추가 (addRow 모드에서 사용)
const addEmptyRowToCondition = useCallback((conditionValue: string) => {
const addEmptyRowToCondition = useCallback(
(conditionValue: string) => {
const newRow: Record<string, any> = {};
// 각 컬럼의 기본값으로 빈 행 생성
@ -1430,20 +1472,25 @@ export function TableSectionRenderer({
const currentData = conditionalTableData[conditionValue] || [];
const newData = [...currentData, newRow];
handleConditionalDataChange(conditionValue, newData);
}, [tableConfig.columns, conditionalConfig?.conditionColumn, conditionalTableData, handleConditionalDataChange]);
},
[tableConfig.columns, conditionalConfig?.conditionColumn, conditionalTableData, handleConditionalDataChange],
);
// 버튼 클릭 핸들러 (addButtonType에 따라 다르게 동작)
const handleAddButtonClick = useCallback((conditionValue: string) => {
const addButtonType = tableConfig.uiConfig?.addButtonType || "search";
if (addButtonType === "addRow") {
// 빈 행 직접 추가
addEmptyRowToCondition(conditionValue);
} else {
// 검색 모달 열기
// 검색 버튼 클릭 핸들러
const handleSearchButtonClick = useCallback(
(conditionValue: string) => {
openConditionalModal(conditionValue);
}
}, [tableConfig.uiConfig?.addButtonType, addEmptyRowToCondition, openConditionalModal]);
},
[openConditionalModal],
);
// 행 추가 버튼 클릭 핸들러
const handleAddRowButtonClick = useCallback(
(conditionValue: string) => {
addEmptyRowToCondition(conditionValue);
},
[addEmptyRowToCondition],
);
// 조건부 테이블: 초기 데이터 로드 (수정 모드)
useEffect(() => {
@ -1498,17 +1545,19 @@ export function TableSectionRenderer({
// 정적 옵션과 동적 옵션 병합 (동적 옵션이 있으면 우선 사용)
// 빈 value를 가진 옵션은 제외 (Select.Item은 빈 문자열 value를 허용하지 않음)
const effectiveOptions = (conditionalConfig.optionSource?.enabled && dynamicOptions.length > 0
const effectiveOptions = (
conditionalConfig.optionSource?.enabled && dynamicOptions.length > 0
? dynamicOptions
: conditionalConfig.options || []).filter(opt => opt.value && opt.value.trim() !== "");
: conditionalConfig.options || []
).filter((opt) => opt.value && opt.value.trim() !== "");
// 로딩 중이면 로딩 표시
if (dynamicOptionsLoading) {
return (
<div className={cn("space-y-4", className)}>
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
<div className="text-muted-foreground flex items-center justify-center py-8 text-sm">
<div className="flex items-center gap-2">
<div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
<div className="border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" />
조건 옵션을 불러오는 중...
</div>
</div>
@ -1525,7 +1574,7 @@ export function TableSectionRenderer({
{effectiveOptions.map((option) => (
<label
key={option.id}
className="flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 transition-colors hover:bg-muted/50"
className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 transition-colors"
>
<Checkbox
checked={selectedConditions.includes(option.value)}
@ -1542,7 +1591,7 @@ export function TableSectionRenderer({
</div>
{selectedConditions.length > 0 && (
<div className="text-xs text-muted-foreground">
<div className="text-muted-foreground text-xs">
{selectedConditions.length}개 유형 선택됨, 총 {totalConditionalItems}개 항목
</div>
)}
@ -1604,7 +1653,7 @@ export function TableSectionRenderer({
{/* 테이블 상단 컨트롤 */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground">
<span className="text-muted-foreground text-sm">
{data.length > 0 && `${data.length}개 항목`}
{selected.size > 0 && ` (${selected.size}개 선택됨)`}
</span>
@ -1642,17 +1691,22 @@ export function TableSectionRenderer({
선택 삭제 ({selected.size})
</Button>
)}
{showSearchButton && (
<Button onClick={() => handleSearchButtonClick(conditionValue)} className="h-8 text-xs">
<Search className="mr-2 h-4 w-4" />
{searchButtonText}
</Button>
)}
{showAddRowButton && (
<Button
onClick={() => handleAddButtonClick(conditionValue)}
variant="outline"
onClick={() => handleAddRowButtonClick(conditionValue)}
className="h-8 text-xs"
>
{addButtonType === "addRow" ? (
<Plus className="mr-2 h-4 w-4" />
) : (
<Search className="mr-2 h-4 w-4" />
)}
{addButtonText}
{addRowButtonText}
</Button>
)}
</div>
</div>
@ -1711,7 +1765,7 @@ export function TableSectionRenderer({
<TabsContent key={option.id} value={option.value} className="mt-4 space-y-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground">
<span className="text-muted-foreground text-sm">
{data.length > 0 && `${data.length}개 항목`}
{selected.size > 0 && ` (${selected.size}개 선택됨)`}
</span>
@ -1728,17 +1782,22 @@ export function TableSectionRenderer({
선택 삭제 ({selected.size})
</Button>
)}
{showSearchButton && (
<Button onClick={() => handleSearchButtonClick(option.value)} className="h-8 text-xs">
<Search className="mr-2 h-4 w-4" />
{searchButtonText}
</Button>
)}
{showAddRowButton && (
<Button
onClick={() => handleAddButtonClick(option.value)}
variant="outline"
onClick={() => handleAddRowButtonClick(option.value)}
className="h-8 text-xs"
>
{addButtonType === "addRow" ? (
<Plus className="mr-2 h-4 w-4" />
) : (
<Search className="mr-2 h-4 w-4" />
)}
{addButtonText}
{addRowButtonText}
</Button>
)}
</div>
</div>
@ -1768,10 +1827,8 @@ export function TableSectionRenderer({
{/* 조건이 선택되지 않은 경우 안내 메시지 (checkbox/dropdown 모드에서만) */}
{selectedConditions.length === 0 && triggerType !== "tabs" && (
<div className="flex flex-col items-center justify-center rounded-lg border border-dashed py-12 text-center">
<p className="text-sm text-muted-foreground">
{triggerType === "checkbox"
? "위에서 유형을 선택하여 검사항목을 추가하세요."
: "유형을 선택하세요."}
<p className="text-muted-foreground text-sm">
{triggerType === "checkbox" ? "위에서 유형을 선택하여 검사항목을 추가하세요." : "유형을 선택하세요."}
</p>
</div>
)}
@ -1779,9 +1836,7 @@ export function TableSectionRenderer({
{/* 옵션이 없는 경우 안내 메시지 */}
{effectiveOptions.length === 0 && (
<div className="flex flex-col items-center justify-center rounded-lg border border-dashed py-12 text-center">
<p className="text-sm text-muted-foreground">
조건 옵션이 설정되지 않았습니다.
</p>
<p className="text-muted-foreground text-sm">조건 옵션이 설정되지 않았습니다.</p>
</div>
)}
@ -1811,9 +1866,9 @@ export function TableSectionRenderer({
return (
<div className={cn("space-y-4", className)}>
{/* 추가 버튼 영역 */}
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground">
<span className="text-muted-foreground text-sm">
{tableData.length > 0 && `${tableData.length}개 항목`}
{selectedRows.size > 0 && ` (${selectedRows.size}개 선택됨)`}
</span>
@ -1822,17 +1877,17 @@ export function TableSectionRenderer({
variant="outline"
size="sm"
onClick={() => setWidthTrigger((prev) => prev + 1)}
className="h-7 text-xs px-2"
className="h-7 px-2 text-xs"
title={widthTrigger % 2 === 0 ? "내용에 맞게 자동 조정" : "균등 분배"}
>
{widthTrigger % 2 === 0 ? (
<>
<AlignJustify className="h-3.5 w-3.5 mr-1" />
<AlignJustify className="mr-1 h-3.5 w-3.5" />
자동 맞춤
</>
) : (
<>
<Columns className="h-3.5 w-3.5 mr-1" />
<Columns className="mr-1 h-3.5 w-3.5" />
균등 분배
</>
)}
@ -1841,17 +1896,20 @@ export function TableSectionRenderer({
</div>
<div className="flex gap-2">
{selectedRows.size > 0 && (
<Button
variant="destructive"
onClick={handleBulkDelete}
className="h-8 text-xs sm:h-10 sm:text-sm"
>
<Button variant="destructive" onClick={handleBulkDelete} className="h-8 text-xs sm:h-10 sm:text-sm">
선택 삭제 ({selectedRows.size})
</Button>
)}
{showSearchButton && (
<Button onClick={() => setModalOpen(true)} className="h-8 text-xs sm:h-10 sm:text-sm">
<Search className="mr-2 h-4 w-4" />
{searchButtonText}
</Button>
)}
{showAddRowButton && (
<Button
variant="outline"
onClick={() => {
if (addButtonType === "addRow") {
// 빈 행 추가
const newRow: Record<string, any> = {};
for (const col of columns) {
@ -1866,20 +1924,13 @@ export function TableSectionRenderer({
}
}
handleDataChange([...tableData, newRow]);
} else {
// 검색 모달 열기
setModalOpen(true);
}
}}
className="h-8 text-xs sm:h-10 sm:text-sm"
>
{addButtonType === "addRow" ? (
<Plus className="h-4 w-4 mr-2" />
) : (
<Search className="h-4 w-4 mr-2" />
)}
{addButtonText}
<Plus className="mr-2 h-4 w-4" />
{addRowButtonText}
</Button>
)}
</div>
</div>

48
frontend/lib/registry/components/universal-form-modal/UniversalFormModalComponent.tsx
View File

@ -963,6 +963,13 @@ export function UniversalFormModalComponent({
}
}
// 별도 테이블에 저장해야 하는 테이블 섹션 목록
const tableSectionsForSeparateTable = config.sections.filter(
(s) => s.type === "table" &&
s.tableConfig?.saveConfig?.targetTable &&
s.tableConfig.saveConfig.targetTable !== config.saveConfig.tableName
);
// 테이블 섹션이 있고 메인 테이블에 품목별로 저장하는 경우 (공통 + 개별 병합 저장)
// targetTable이 없거나 메인 테이블과 같은 경우
const tableSectionsForMainTable = config.sections.filter(
@ -971,6 +978,12 @@ export function UniversalFormModalComponent({
s.tableConfig.saveConfig.targetTable === config.saveConfig.tableName)
);
console.log("[saveSingleRow] 메인 테이블:", config.saveConfig.tableName);
console.log("[saveSingleRow] 메인 테이블에 저장할 테이블 섹션:", tableSectionsForMainTable.map(s => s.id));
console.log("[saveSingleRow] 별도 테이블에 저장할 테이블 섹션:", tableSectionsForSeparateTable.map(s => s.id));
console.log("[saveSingleRow] 테이블 섹션 데이터 키:", Object.keys(tableSectionData));
console.log("[saveSingleRow] dataToSave 키:", Object.keys(dataToSave));
if (tableSectionsForMainTable.length > 0) {
// 공통 저장 필드 수집 (sectionSaveModes 설정에 따라)
const commonFieldsData: Record<string, any> = {};
@ -1050,16 +1063,17 @@ export function UniversalFormModalComponent({
// 메인 레코드 ID가 필요한 경우 (response.data에서 가져오기)
const mainRecordId = response.data?.data?.id;
// 공통 저장 필드 수집 (sectionSaveModes 설정에 따라)
// 공통 저장 필드 수집: 다른 섹션(필드 타입)에서 공통 저장으로 설정된 필드 값
// 기본값: 필드 타입 섹션은 'common', 테이블 타입 섹션은 'individual'
const commonFieldsData: Record<string, any> = {};
const { sectionSaveModes } = config.saveConfig;
if (sectionSaveModes && sectionSaveModes.length > 0) {
// 다른 섹션에서 공통 저장으로 설정된 필드 값 수집
for (const otherSection of config.sections) {
if (otherSection.id === section.id) continue; // 현재 테이블 섹션은 건너뛰기
const sectionMode = sectionSaveModes.find((s) => s.sectionId === otherSection.id);
const sectionMode = sectionSaveModes?.find((s) => s.sectionId === otherSection.id);
// 기본값: 필드 타입 섹션은 'common', 테이블 타입 섹션은 'individual'
const defaultMode = otherSection.type === "table" ? "individual" : "common";
const sectionSaveMode = sectionMode?.saveMode || defaultMode;
@ -1076,8 +1090,23 @@ export function UniversalFormModalComponent({
}
}
}
// 🆕 선택적 필드 그룹 (optionalFieldGroups)도 처리
if (otherSection.optionalFieldGroups && otherSection.optionalFieldGroups.length > 0) {
for (const optGroup of otherSection.optionalFieldGroups) {
if (optGroup.fields) {
for (const field of optGroup.fields) {
// 선택적 필드 그룹은 기본적으로 common 저장
if (formData[field.columnName] !== undefined) {
commonFieldsData[field.columnName] = formData[field.columnName];
}
}
}
}
}
}
console.log("[saveSingleRow] 별도 테이블 저장 - 공통 필드:", Object.keys(commonFieldsData));
for (const item of sectionData) {
// 공통 필드 병합 + 개별 품목 데이터
@ -1091,15 +1120,26 @@ export function UniversalFormModalComponent({
}
}
// _sourceData 등 내부 메타데이터 제거
Object.keys(itemToSave).forEach((key) => {
if (key.startsWith("_")) {
delete itemToSave[key];
}
});
// 메인 레코드와 연결이 필요한 경우
if (mainRecordId && config.saveConfig.primaryKeyColumn) {
itemToSave[config.saveConfig.primaryKeyColumn] = mainRecordId;
}
await apiClient.post(
const saveResponse = await apiClient.post(
`/table-management/tables/${section.tableConfig.saveConfig.targetTable}/add`,
itemToSave
);
if (!saveResponse.data?.success) {
throw new Error(saveResponse.data?.message || `${section.title || "테이블 섹션"} 저장 실패`);
}
}
}
}

85
frontend/lib/registry/components/universal-form-modal/modals/TableSectionSettingsModal.tsx
View File

@ -2928,54 +2928,74 @@ export function TableSectionSettingsModal({
{/* UI 설정 */}
<div className="space-y-3 border rounded-lg p-4">
<h4 className="text-sm font-medium">UI 설정</h4>
{/* 버튼 표시 설정 */}
<div className="space-y-2 p-3 bg-muted/30 rounded-lg">
<Label className="text-xs font-medium">표시할 버튼 선택</Label>
<p className="text-[10px] text-muted-foreground mb-2">
두 버튼을 동시에 표시할 수 있습니다.
</p>
<div className="grid grid-cols-2 gap-4">
<div className="flex items-center gap-2">
<Switch
checked={tableConfig.uiConfig?.showSearchButton ?? true}
onCheckedChange={(checked) => updateUiConfig({ showSearchButton: checked })}
className="scale-75"
/>
<div>
<Label className="text-xs">추가 버튼 동작</Label>
<Select
value={tableConfig.uiConfig?.addButtonType || "search"}
onValueChange={(value) => updateUiConfig({ addButtonType: value as "search" | "addRow" })}
>
<SelectTrigger className="h-8 text-xs mt-1">
<SelectValue placeholder="버튼 동작 선택" />
</SelectTrigger>
<SelectContent>
<SelectItem value="search">
<div className="flex flex-col">
<span>검색 모달 열기</span>
<span className="text-[10px] text-muted-foreground">기존 데이터에서 선택</span>
<span className="text-xs font-medium">검색 버튼</span>
<p className="text-[10px] text-muted-foreground">기존 데이터에서 선택</p>
</div>
</SelectItem>
<SelectItem value="addRow">
<div className="flex flex-col">
<span>빈 행 추가</span>
<span className="text-[10px] text-muted-foreground">새 데이터 직접 입력</span>
</div>
</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex items-center gap-2">
<Switch
checked={tableConfig.uiConfig?.showAddRowButton ?? false}
onCheckedChange={(checked) => updateUiConfig({ showAddRowButton: checked })}
className="scale-75"
/>
<div>
<Label className="text-xs">추가 버튼 텍스트</Label>
<span className="text-xs font-medium">행 추가 버튼</span>
<p className="text-[10px] text-muted-foreground">빈 행 직접 입력</p>
</div>
</div>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
{/* 검색 버튼 텍스트 */}
<div>
<Label className="text-xs">검색 버튼 텍스트</Label>
<Input
value={tableConfig.uiConfig?.addButtonText || ""}
onChange={(e) => updateUiConfig({ addButtonText: e.target.value })}
placeholder={tableConfig.uiConfig?.addButtonType === "addRow" ? "항목 추가" : "항목 검색"}
value={tableConfig.uiConfig?.searchButtonText || ""}
onChange={(e) => updateUiConfig({ searchButtonText: e.target.value })}
placeholder="품목 검색"
className="h-8 text-xs mt-1"
disabled={!(tableConfig.uiConfig?.showSearchButton ?? true)}
/>
</div>
{/* 행 추가 버튼 텍스트 */}
<div>
<Label className="text-xs">모달 제목</Label>
<Label className="text-xs">행 추가 버튼 텍스트</Label>
<Input
value={tableConfig.uiConfig?.addRowButtonText || ""}
onChange={(e) => updateUiConfig({ addRowButtonText: e.target.value })}
placeholder="직접 입력"
className="h-8 text-xs mt-1"
disabled={!tableConfig.uiConfig?.showAddRowButton}
/>
</div>
{/* 모달 제목 */}
<div>
<Label className="text-xs">검색 모달 제목</Label>
<Input
value={tableConfig.uiConfig?.modalTitle || ""}
onChange={(e) => updateUiConfig({ modalTitle: e.target.value })}
placeholder="항목 검색 및 선택"
className="h-8 text-xs mt-1"
disabled={tableConfig.uiConfig?.addButtonType === "addRow"}
disabled={!(tableConfig.uiConfig?.showSearchButton ?? true)}
/>
{tableConfig.uiConfig?.addButtonType === "addRow" && (
<p className="text-[10px] text-muted-foreground mt-0.5">빈 행 추가 모드에서는 모달이 열리지 않습니다</p>
)}
</div>
{/* 테이블 최대 높이 */}
<div>
<Label className="text-xs">테이블 최대 높이</Label>
<Input
@ -2985,13 +3005,14 @@ export function TableSectionSettingsModal({
className="h-8 text-xs mt-1"
/>
</div>
{/* 다중 선택 허용 */}
<div className="flex items-end">
<label className="flex items-center gap-2 text-xs cursor-pointer">
<Switch
checked={tableConfig.uiConfig?.multiSelect ?? true}
onCheckedChange={(checked) => updateUiConfig({ multiSelect: checked })}
className="scale-75"
disabled={tableConfig.uiConfig?.addButtonType === "addRow"}
disabled={!(tableConfig.uiConfig?.showSearchButton ?? true)}
/>
<span>다중 선택 허용</span>
</label>

12
frontend/lib/registry/components/universal-form-modal/types.ts
View File

@ -253,15 +253,19 @@ export interface TableSectionConfig {
// 6. UI 설정
uiConfig?: {
addButtonText?: string; // 추가 버튼 텍스트 (기본: "품목 검색")
modalTitle?: string; // 모달 제목 (기본: "항목 검색 및 선택")
multiSelect?: boolean; // 다중 선택 허용 (기본: true)
maxHeight?: string; // 테이블 최대 높이 (기본: "400px")
// 추가 버튼 타입
// - search: 검색 모달 열기 (기본값) - 기존 데이터에서 선택
// - addRow: 빈 행 직접 추가 - 새 데이터 직접 입력
// 버튼 표시 설정 (동시 표시 가능)
showSearchButton?: boolean; // 검색 버튼 표시 (기본: true)
showAddRowButton?: boolean; // 행 추가 버튼 표시 (기본: false)
searchButtonText?: string; // 검색 버튼 텍스트 (기본: "품목 검색")
addRowButtonText?: string; // 행 추가 버튼 텍스트 (기본: "직접 입력")
// 레거시 호환용 (deprecated)
addButtonType?: "search" | "addRow";
addButtonText?: string;
};
// 7. 조건부 테이블 설정 (고급)

219
frontend/lib/utils/buttonActions.ts
View File

@ -1491,6 +1491,7 @@ export class ButtonActionExecutor {
* 🆕 Universal Form Modal 테이블 섹션 병합 저장 처리
* 범용_폼_모달 내부의 공통 필드 + _tableSection_ 데이터를 병합하여 품목별로 저장
* 수정 모드: INSERT/UPDATE/DELETE 지원
* 🆕 섹션별 저장 테이블(targetTable) 지원 추가
*/
private static async handleUniversalFormModalTableSectionSave(
config: ButtonActionConfig,
@ -1515,6 +1516,65 @@ export class ButtonActionExecutor {
const modalData = formData[universalFormModalKey];
// 🆕 universal-form-modal 컴포넌트 설정 가져오기
// 1. componentConfigs에서 컴포넌트 ID로 찾기
// 2. allComponents에서 columnName으로 찾기
// 3. 화면 레이아웃 API에서 가져오기
let modalComponentConfig = context.componentConfigs?.[universalFormModalKey];
// componentConfigs에서 직접 찾지 못한 경우, allComponents에서 columnName으로 찾기
if (!modalComponentConfig && context.allComponents) {
const modalComponent = context.allComponents.find(
(comp: any) =>
comp.columnName === universalFormModalKey || comp.properties?.columnName === universalFormModalKey,
);
if (modalComponent) {
modalComponentConfig = modalComponent.componentConfig || modalComponent.properties?.componentConfig;
console.log("🎯 [handleUniversalFormModalTableSectionSave] allComponents에서 설정 찾음:", modalComponent.id);
}
}
// 🆕 아직도 설정을 찾지 못했으면 화면 레이아웃 API에서 가져오기
if (!modalComponentConfig && screenId) {
try {
console.log("🔍 [handleUniversalFormModalTableSectionSave] 화면 레이아웃 API에서 설정 조회:", screenId);
const { screenApi } = await import("@/lib/api/screen");
const layoutData = await screenApi.getLayout(screenId);
if (layoutData && layoutData.components) {
// 레이아웃에서 universal-form-modal 컴포넌트 찾기
const modalLayout = (layoutData.components as any[]).find(
(comp) =>
comp.properties?.columnName === universalFormModalKey || comp.columnName === universalFormModalKey,
);
if (modalLayout) {
modalComponentConfig = modalLayout.properties?.componentConfig || modalLayout.componentConfig;
console.log(
"🎯 [handleUniversalFormModalTableSectionSave] 화면 레이아웃에서 설정 찾음:",
modalLayout.componentId,
);
}
}
} catch (error) {
console.warn("⚠️ [handleUniversalFormModalTableSectionSave] 화면 레이아웃 조회 실패:", error);
}
}
const sections: any[] = modalComponentConfig?.sections || [];
const saveConfig = modalComponentConfig?.saveConfig || {};
console.log("🎯 [handleUniversalFormModalTableSectionSave] 컴포넌트 설정:", {
hasComponentConfig: !!modalComponentConfig,
sectionsCount: sections.length,
mainTableName: saveConfig.tableName || tableName,
sectionSaveModes: saveConfig.sectionSaveModes,
sectionDetails: sections.map((s: any) => ({
id: s.id,
type: s.type,
targetTable: s.tableConfig?.saveConfig?.targetTable,
})),
});
// _tableSection_ 데이터 추출
const tableSectionData: Record<string, any[]> = {};
const commonFieldsData: Record<string, any> = {};
@ -1564,10 +1624,64 @@ export class ButtonActionExecutor {
let insertedCount = 0;
let updatedCount = 0;
let deletedCount = 0;
let mainRecordId: number | null = null;
// 🆕 먼저 메인 테이블에 공통 데이터 저장 (별도 테이블이 있는 경우에만)
const hasSeparateTargetTable = sections.some(
(s) =>
s.type === "table" &&
s.tableConfig?.saveConfig?.targetTable &&
s.tableConfig.saveConfig.targetTable !== tableName,
);
if (hasSeparateTargetTable && Object.keys(commonFieldsData).length > 0) {
console.log("📦 [handleUniversalFormModalTableSectionSave] 메인 테이블에 공통 데이터 저장:", tableName);
const mainRowToSave = { ...commonFieldsData, ...userInfo };
// 메타데이터 제거
Object.keys(mainRowToSave).forEach((key) => {
if (key.startsWith("_")) {
delete mainRowToSave[key];
}
});
console.log("📦 [handleUniversalFormModalTableSectionSave] 메인 테이블 저장 데이터:", mainRowToSave);
const mainSaveResult = await DynamicFormApi.saveFormData({
screenId: screenId!,
tableName: tableName!,
data: mainRowToSave,
});
if (!mainSaveResult.success) {
throw new Error(mainSaveResult.message || "메인 데이터 저장 실패");
}
mainRecordId = mainSaveResult.data?.id || null;
console.log("✅ [handleUniversalFormModalTableSectionSave] 메인 테이블 저장 완료, ID:", mainRecordId);
}
// 각 테이블 섹션 처리
for (const [sectionId, currentItems] of Object.entries(tableSectionData)) {
console.log(`🔄 [handleUniversalFormModalTableSectionSave] 섹션 ${sectionId} 처리 시작: ${currentItems.length}개 품목`);
console.log(
`🔄 [handleUniversalFormModalTableSectionSave] 섹션 ${sectionId} 처리 시작: ${currentItems.length}개 품목`,
);
// 🆕 해당 섹션의 설정 찾기
const sectionConfig = sections.find((s) => s.id === sectionId);
const targetTableName = sectionConfig?.tableConfig?.saveConfig?.targetTable;
// 🆕 실제 저장할 테이블 결정
// - targetTable이 있으면 해당 테이블에 저장
// - targetTable이 없으면 메인 테이블에 저장
const saveTableName = targetTableName || tableName!;
console.log(`📊 [handleUniversalFormModalTableSectionSave] 섹션 ${sectionId} 저장 테이블:`, {
targetTableName,
saveTableName,
isMainTable: saveTableName === tableName,
});
// 1️⃣ 신규 품목 INSERT (id가 없는 항목)
const newItems = currentItems.filter((item) => !item.id);
@ -1581,11 +1695,16 @@ export class ButtonActionExecutor {
}
});
console.log("➕ [INSERT] 신규 품목:", rowToSave);
// 🆕 메인 레코드 ID 연결 (별도 테이블에 저장하는 경우)
if (targetTableName && mainRecordId && saveConfig.primaryKeyColumn) {
rowToSave[saveConfig.primaryKeyColumn] = mainRecordId;
}
console.log("➕ [INSERT] 신규 품목:", { tableName: saveTableName, data: rowToSave });
const saveResult = await DynamicFormApi.saveFormData({
screenId: screenId!,
tableName: tableName!,
tableName: saveTableName,
data: rowToSave,
});
@ -1612,9 +1731,14 @@ export class ButtonActionExecutor {
});
delete rowToSave.id; // id 제거하여 INSERT
// 🆕 메인 레코드 ID 연결 (별도 테이블에 저장하는 경우)
if (targetTableName && mainRecordId && saveConfig.primaryKeyColumn) {
rowToSave[saveConfig.primaryKeyColumn] = mainRecordId;
}
const saveResult = await DynamicFormApi.saveFormData({
screenId: screenId!,
tableName: tableName!,
tableName: saveTableName,
data: rowToSave,
});
@ -1631,14 +1755,14 @@ export class ButtonActionExecutor {
const hasChanges = this.checkForChanges(originalItem, currentDataWithCommon);
if (hasChanges) {
console.log(`🔄 [UPDATE] 품목 수정: id=${item.id}`);
console.log(`🔄 [UPDATE] 품목 수정: id=${item.id}, tableName=${saveTableName}`);
// 변경된 필드만 추출하여 부분 업데이트
const updateResult = await DynamicFormApi.updateFormDataPartial(
item.id,
originalItem,
currentDataWithCommon,
tableName!,
saveTableName,
);
if (!updateResult.success) {
@ -1656,9 +1780,9 @@ export class ButtonActionExecutor {
const deletedItems = originalGroupedData.filter((orig) => orig.id && !currentIds.has(orig.id));
for (const deletedItem of deletedItems) {
console.log(`🗑️ [DELETE] 품목 삭제: id=${deletedItem.id}`);
console.log(`🗑️ [DELETE] 품목 삭제: id=${deletedItem.id}, tableName=${saveTableName}`);
const deleteResult = await DynamicFormApi.deleteFormDataFromTable(tableName!, deletedItem.id);
const deleteResult = await DynamicFormApi.deleteFormDataFromTable(saveTableName, deletedItem.id);
if (!deleteResult.success) {
throw new Error(deleteResult.message || "품목 삭제 실패");
@ -1670,6 +1794,7 @@ export class ButtonActionExecutor {
// 결과 메시지 생성
const resultParts: string[] = [];
if (mainRecordId) resultParts.push("메인 데이터 저장");
if (insertedCount > 0) resultParts.push(`${insertedCount}개 추가`);
if (updatedCount > 0) resultParts.push(`${updatedCount}개 수정`);
if (deletedCount > 0) resultParts.push(`${deletedCount}개 삭제`);
@ -2145,7 +2270,10 @@ export class ButtonActionExecutor {
* 연관 데이터 버튼의 선택 데이터로 모달 열기
* RelatedDataButtons 컴포넌트에서 선택된 버튼 데이터를 모달로 전달
*/
private static async handleOpenRelatedModal(config: ButtonActionConfig, context: ButtonActionContext): Promise<boolean> {
private static async handleOpenRelatedModal(
config: ButtonActionConfig,
context: ButtonActionContext,
): Promise<boolean> {
// 버튼 설정에서 targetScreenId 가져오기 (여러 위치에서 확인)
const targetScreenId = config.relatedModalConfig?.targetScreenId || config.targetScreenId;
@ -2188,7 +2316,7 @@ export class ButtonActionExecutor {
});
if (relatedConfig?.modalLink?.dataMapping && relatedConfig.modalLink.dataMapping.length > 0) {
relatedConfig.modalLink.dataMapping.forEach(mapping => {
relatedConfig.modalLink.dataMapping.forEach((mapping) => {
console.log("🔍 [openRelatedModal] 매핑 처리:", {
mapping,
sourceField: mapping.sourceField,
@ -2219,7 +2347,8 @@ export class ButtonActionExecutor {
});
// 모달 열기 이벤트 발생 (ScreenModal은 editData를 사용)
window.dispatchEvent(new CustomEvent("openScreenModal", {
window.dispatchEvent(
new CustomEvent("openScreenModal", {
detail: {
screenId: targetScreenId,
title: config.modalTitle,
@ -2230,7 +2359,8 @@ export class ButtonActionExecutor {
window.dispatchEvent(new CustomEvent("refreshTableData"));
},
},
}));
}),
);
return true;
}
@ -3296,10 +3426,7 @@ export class ButtonActionExecutor {
* EditModal 등 외부에서도 호출 가능하도록 public으로 변경
* 다중 제어 순차 실행 지원
*/
public static async executeAfterSaveControl(
config: ButtonActionConfig,
context: ButtonActionContext,
): Promise<void> {
public static async executeAfterSaveControl(config: ButtonActionConfig, context: ButtonActionContext): Promise<void> {
console.log("🎯 저장 후 제어 실행:", {
enableDataflowControl: config.enableDataflowControl,
dataflowConfig: config.dataflowConfig,
@ -4763,19 +4890,20 @@ export class ButtonActionExecutor {
if (userId) {
try {
const { apiClient } = await import("@/lib/api/client");
const statusTableName = config.trackingStatusTableName || this.trackingConfig?.trackingStatusTableName || context.tableName || "vehicles";
const statusTableName =
config.trackingStatusTableName ||
this.trackingConfig?.trackingStatusTableName ||
context.tableName ||
"vehicles";
const keyField = config.trackingStatusKeyField || this.trackingConfig?.trackingStatusKeyField || "user_id";
// DB에서 현재 차량 정보 조회
const vehicleResponse = await apiClient.post(
`/table-management/tables/${statusTableName}/data`,
{
const vehicleResponse = await apiClient.post(`/table-management/tables/${statusTableName}/data`, {
page: 1,
size: 1,
search: { [keyField]: userId },
autoFilter: true,
},
);
});
const vehicleData = vehicleResponse.data?.data?.data?.[0] || vehicleResponse.data?.data?.rows?.[0];
if (vehicleData) {
@ -4792,14 +4920,18 @@ export class ButtonActionExecutor {
// 마지막 위치 저장 (추적 중이었던 경우에만)
if (isTrackingActive) {
// DB 값 우선, 없으면 formData 사용
const departure = dbDeparture ||
this.trackingContext?.formData?.[this.trackingConfig?.trackingDepartureField || "departure"] || null;
const arrival = dbArrival ||
this.trackingContext?.formData?.[this.trackingConfig?.trackingArrivalField || "arrival"] || null;
const departure =
dbDeparture ||
this.trackingContext?.formData?.[this.trackingConfig?.trackingDepartureField || "departure"] ||
null;
const arrival =
dbArrival || this.trackingContext?.formData?.[this.trackingConfig?.trackingArrivalField || "arrival"] || null;
const departureName = this.trackingContext?.formData?.["departure_name"] || null;
const destinationName = this.trackingContext?.formData?.["destination_name"] || null;
const vehicleId = dbVehicleId ||
this.trackingContext?.formData?.[this.trackingConfig?.trackingVehicleIdField || "vehicle_id"] || null;
const vehicleId =
dbVehicleId ||
this.trackingContext?.formData?.[this.trackingConfig?.trackingVehicleIdField || "vehicle_id"] ||
null;
await this.saveLocationToHistory(
tripId,
@ -5681,10 +5813,10 @@ export class ButtonActionExecutor {
const columnMappings = quickInsertConfig.columnMappings || [];
for (const mapping of columnMappings) {
console.log(`📍 매핑 처리 시작:`, mapping);
console.log("📍 매핑 처리 시작:", mapping);
if (!mapping.targetColumn) {
console.log(`📍 targetColumn 없음, 스킵`);
console.log("📍 targetColumn 없음, 스킵");
continue;
}
@ -5692,7 +5824,7 @@ export class ButtonActionExecutor {
switch (mapping.sourceType) {
case "component":
console.log(`📍 component 타입 처리:`, {
console.log("📍 component 타입 처리:", {
sourceComponentId: mapping.sourceComponentId,
sourceColumnName: mapping.sourceColumnName,
targetColumn: mapping.targetColumn,
@ -5715,7 +5847,7 @@ export class ButtonActionExecutor {
// 3. 없으면 allComponents에서 컴포넌트를 찾아 columnName으로 시도
if (value === undefined && context.allComponents) {
const comp = context.allComponents.find((c: any) => c.id === mapping.sourceComponentId);
console.log(`📍 방법3 찾은 컴포넌트:`, comp);
console.log("📍 방법3 찾은 컴포넌트:", comp);
if (comp?.columnName) {
value = formData?.[comp.columnName];
console.log(`📍 방법3 (allComponents): ${mapping.sourceComponentId} → ${comp.columnName} = ${value}`);
@ -5742,7 +5874,7 @@ export class ButtonActionExecutor {
break;
case "leftPanel":
console.log(`📍 leftPanel 타입 처리:`, {
console.log("📍 leftPanel 타입 처리:", {
sourceColumn: mapping.sourceColumn,
selectedLeftData: splitPanelContext?.selectedLeftData,
});
@ -5786,7 +5918,7 @@ export class ButtonActionExecutor {
insertData[mapping.targetColumn] = value;
console.log(`📍 insertData에 추가됨: ${mapping.targetColumn} = ${value}`);
} else {
console.log(`📍 값이 비어있어서 insertData에 추가 안됨`);
console.log("📍 값이 비어있어서 insertData에 추가 안됨");
}
}
@ -5799,7 +5931,7 @@ export class ButtonActionExecutor {
let targetTableColumns: string[] = [];
try {
const columnsResponse = await apiClient.get(
`/table-management/tables/${quickInsertConfig.targetTable}/columns`
`/table-management/tables/${quickInsertConfig.targetTable}/columns`,
);
if (columnsResponse.data?.success && columnsResponse.data?.data) {
const columnsData = columnsResponse.data.data.columns || columnsResponse.data.data;
@ -5824,20 +5956,20 @@ export class ButtonActionExecutor {
}
// 시스템 컬럼 제외 (id, created_date, updated_date, writer 등)
const systemColumns = ['id', 'created_date', 'updated_date', 'writer', 'writer_name'];
const systemColumns = ["id", "created_date", "updated_date", "writer", "writer_name"];
if (systemColumns.includes(key)) {
console.log(`📍 자동 매핑 스킵 (시스템 컬럼): ${key}`);
continue;
}
// _label, _name 으로 끝나는 표시용 컬럼 제외
if (key.endsWith('_label') || key.endsWith('_name')) {
if (key.endsWith("_label") || key.endsWith("_name")) {
console.log(`📍 자동 매핑 스킵 (표시용 컬럼): ${key}`);
continue;
}
// 값이 있으면 자동 추가
if (val !== undefined && val !== null && val !== '') {
if (val !== undefined && val !== null && val !== "") {
insertData[key] = val;
console.log(`📍 자동 매핑 추가: ${key} = ${val}`);
}
@ -5877,14 +6009,19 @@ export class ButtonActionExecutor {
page: 1,
pageSize: 1,
search: duplicateCheckData,
}
},
);
console.log("📍 중복 체크 응답:", checkResponse.data);
// 응답 구조: { success: true, data: { data: [...], total: N } } 또는 { success: true, data: [...] }
const existingData = checkResponse.data?.data?.data || checkResponse.data?.data || [];
console.log("📍 기존 데이터:", existingData, "길이:", Array.isArray(existingData) ? existingData.length : 0);
console.log(
"📍 기존 데이터:",
existingData,
"길이:",
Array.isArray(existingData) ? existingData.length : 0,
);
if (Array.isArray(existingData) && existingData.length > 0) {
toast.error(quickInsertConfig.duplicateCheck.errorMessage || "이미 존재하는 데이터입니다.");
@ -5902,7 +6039,7 @@ export class ButtonActionExecutor {
// 데이터 저장
const response = await apiClient.post(
`/table-management/tables/${quickInsertConfig.targetTable}/add`,
insertData
insertData,
);
if (response.data?.success) {