제어관리 데이터 저장기능
This commit is contained in:
parent
2a4e379dc4
commit
9454e3a81f
|
|
@ -88,16 +88,19 @@ app.use(
|
|||
// Rate Limiting (개발 환경에서는 완화)
|
||||
const limiter = rateLimit({
|
||||
windowMs: 1 * 60 * 1000, // 1분
|
||||
max: config.nodeEnv === "development" ? 5000 : 100, // 개발환경에서는 5000으로 증가, 운영환경에서는 100
|
||||
max: config.nodeEnv === "development" ? 10000 : 100, // 개발환경에서는 10000으로 증가, 운영환경에서는 100
|
||||
message: {
|
||||
error: "너무 많은 요청이 발생했습니다. 잠시 후 다시 시도해주세요.",
|
||||
},
|
||||
skip: (req) => {
|
||||
// 헬스 체크와 테이블/컬럼 조회는 Rate Limiting 완화
|
||||
// 헬스 체크와 자주 호출되는 API들은 Rate Limiting 완화
|
||||
return (
|
||||
req.path === "/health" ||
|
||||
req.path.includes("/table-management/") ||
|
||||
req.path.includes("/external-db-connections/")
|
||||
req.path.includes("/external-db-connections/") ||
|
||||
req.path.includes("/screen-management/") ||
|
||||
req.path.includes("/multi-connection/") ||
|
||||
req.path.includes("/dataflow-diagrams/")
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -63,9 +63,19 @@ export class CommonCodeController {
|
|||
size: size ? parseInt(size as string) : undefined,
|
||||
});
|
||||
|
||||
// 프론트엔드가 기대하는 형식으로 데이터 변환
|
||||
const transformedData = result.data.map((code: any) => ({
|
||||
codeValue: code.code_value,
|
||||
codeName: code.code_name,
|
||||
description: code.description,
|
||||
sortOrder: code.sort_order,
|
||||
isActive: code.is_active === "Y",
|
||||
useYn: code.is_active,
|
||||
}));
|
||||
|
||||
return res.json({
|
||||
success: true,
|
||||
data: result.data,
|
||||
data: transformedData,
|
||||
total: result.total,
|
||||
message: `코드 목록 조회 성공 (${categoryCode})`,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -617,18 +617,56 @@ export class MultiConnectionQueryService {
|
|||
`✅ 메인 DB 컬럼 조회 성공: ${columnsResult.columns.length}개`
|
||||
);
|
||||
|
||||
return columnsResult.columns.map((column) => ({
|
||||
// 디버깅: inputType이 'code'인 컬럼들 확인
|
||||
const codeColumns = columnsResult.columns.filter(
|
||||
(col) => col.inputType === "code"
|
||||
);
|
||||
console.log(
|
||||
"🔍 메인 DB 코드 타입 컬럼들:",
|
||||
codeColumns.map((col) => ({
|
||||
columnName: col.columnName,
|
||||
inputType: col.inputType,
|
||||
webType: col.webType,
|
||||
codeCategory: col.codeCategory,
|
||||
}))
|
||||
);
|
||||
|
||||
const mappedColumns = columnsResult.columns.map((column) => ({
|
||||
columnName: column.columnName,
|
||||
displayName: column.displayName || column.columnName, // 라벨이 있으면 라벨 사용, 없으면 컬럼명
|
||||
dataType: column.dataType,
|
||||
dbType: column.dataType, // dataType을 dbType으로 사용
|
||||
webType: column.webType || "text", // webType 사용, 기본값 text
|
||||
inputType: column.inputType || "direct", // column_labels의 input_type 추가
|
||||
codeCategory: column.codeCategory, // 코드 카테고리 정보 추가
|
||||
isNullable: column.isNullable === "Y",
|
||||
isPrimaryKey: column.isPrimaryKey || false,
|
||||
defaultValue: column.defaultValue,
|
||||
maxLength: column.maxLength,
|
||||
description: column.description,
|
||||
connectionId: 0, // 메인 DB 구분용
|
||||
}));
|
||||
|
||||
// 디버깅: 매핑된 컬럼 정보 확인
|
||||
console.log(
|
||||
"🔍 매핑된 컬럼 정보 샘플:",
|
||||
mappedColumns.slice(0, 3).map((col) => ({
|
||||
columnName: col.columnName,
|
||||
inputType: col.inputType,
|
||||
webType: col.webType,
|
||||
connectionId: col.connectionId,
|
||||
}))
|
||||
);
|
||||
|
||||
// status 컬럼 특별 확인
|
||||
const statusColumn = mappedColumns.find(
|
||||
(col) => col.columnName === "status"
|
||||
);
|
||||
if (statusColumn) {
|
||||
console.log("🔍 status 컬럼 상세 정보:", statusColumn);
|
||||
}
|
||||
|
||||
return mappedColumns;
|
||||
}
|
||||
|
||||
// 외부 DB 연결 정보 가져오기
|
||||
|
|
@ -701,6 +739,7 @@ export class MultiConnectionQueryService {
|
|||
dataType: dataType,
|
||||
dbType: dataType,
|
||||
webType: this.mapDataTypeToWebType(dataType),
|
||||
inputType: "direct", // 외부 DB는 항상 direct (코드 타입 없음)
|
||||
isNullable:
|
||||
column.nullable === "YES" || // MSSQL (MSSQLConnector alias)
|
||||
column.is_nullable === "YES" || // PostgreSQL
|
||||
|
|
@ -715,6 +754,7 @@ export class MultiConnectionQueryService {
|
|||
column.max_length || // MSSQL (MSSQLConnector alias)
|
||||
column.character_maximum_length || // PostgreSQL
|
||||
column.CHARACTER_MAXIMUM_LENGTH,
|
||||
connectionId: connectionId, // 외부 DB 구분용
|
||||
description: columnComment,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -52,22 +52,45 @@ export default function DataFlowList({ onDesignDiagram }: DataFlowListProps) {
|
|||
const response = await DataFlowAPI.getJsonDataFlowDiagrams(currentPage, 20, searchTerm, companyCode);
|
||||
|
||||
// JSON API 응답을 기존 형식으로 변환
|
||||
const convertedDiagrams = response.diagrams.map((diagram) => ({
|
||||
const convertedDiagrams = response.diagrams.map((diagram) => {
|
||||
// relationships 구조 분석
|
||||
const relationships = diagram.relationships || {};
|
||||
|
||||
// 테이블 정보 추출
|
||||
const tables: string[] = [];
|
||||
if (relationships.fromTable?.tableName) {
|
||||
tables.push(relationships.fromTable.tableName);
|
||||
}
|
||||
if (
|
||||
relationships.toTable?.tableName &&
|
||||
relationships.toTable.tableName !== relationships.fromTable?.tableName
|
||||
) {
|
||||
tables.push(relationships.toTable.tableName);
|
||||
}
|
||||
|
||||
// 관계 수 계산 (actionGroups 기준)
|
||||
const actionGroups = relationships.actionGroups || [];
|
||||
const relationshipCount = actionGroups.reduce((count: number, group: any) => {
|
||||
return count + (group.actions?.length || 0);
|
||||
}, 0);
|
||||
|
||||
return {
|
||||
diagramId: diagram.diagram_id,
|
||||
relationshipId: diagram.diagram_id, // 호환성을 위해 추가
|
||||
diagramName: diagram.diagram_name,
|
||||
connectionType: "json-based", // 새로운 JSON 기반 타입
|
||||
connectionType: relationships.connectionType || "data_save", // 실제 연결 타입 사용
|
||||
relationshipType: "multi-relationship", // 다중 관계 타입
|
||||
relationshipCount: diagram.relationships?.relationships?.length || 0,
|
||||
tableCount: diagram.relationships?.tables?.length || 0,
|
||||
tables: diagram.relationships?.tables || [],
|
||||
relationshipCount: relationshipCount || 1, // 최소 1개는 있다고 가정
|
||||
tableCount: tables.length,
|
||||
tables: tables,
|
||||
companyCode: diagram.company_code, // 회사 코드 추가
|
||||
createdAt: new Date(diagram.created_at || new Date()),
|
||||
createdBy: diagram.created_by || "SYSTEM",
|
||||
updatedAt: new Date(diagram.updated_at || diagram.created_at || new Date()),
|
||||
updatedBy: diagram.updated_by || "SYSTEM",
|
||||
lastUpdated: diagram.updated_at || diagram.created_at || new Date().toISOString(),
|
||||
}));
|
||||
};
|
||||
});
|
||||
|
||||
setDiagrams(convertedDiagrams);
|
||||
setTotal(response.pagination.total || 0);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ import { toast } from "sonner";
|
|||
import { X, ArrowLeft } from "lucide-react";
|
||||
|
||||
// API import
|
||||
import { saveDataflowRelationship } from "@/lib/api/dataflowSave";
|
||||
import { saveDataflowRelationship, checkRelationshipNameDuplicate } from "@/lib/api/dataflowSave";
|
||||
import { getColumnsFromConnection } from "@/lib/api/multiConnection";
|
||||
|
||||
// 타입 import
|
||||
import {
|
||||
|
|
@ -26,7 +27,6 @@ import { ColumnInfo, Connection, TableInfo } from "@/lib/types/multiConnection";
|
|||
// 컴포넌트 import
|
||||
import LeftPanel from "./LeftPanel/LeftPanel";
|
||||
import RightPanel from "./RightPanel/RightPanel";
|
||||
import SaveRelationshipDialog from "./SaveRelationshipDialog";
|
||||
|
||||
/**
|
||||
* 🎨 데이터 연결 설정 메인 디자이너
|
||||
|
|
@ -74,6 +74,7 @@ const DataConnectionDesigner: React.FC<DataConnectionDesignerProps> = ({
|
|||
isEnabled: true,
|
||||
},
|
||||
],
|
||||
groupsLogicalOperator: "AND" as "AND" | "OR",
|
||||
|
||||
// 기존 호환성 필드들 (deprecated)
|
||||
actionType: "insert",
|
||||
|
|
@ -81,11 +82,15 @@ const DataConnectionDesigner: React.FC<DataConnectionDesignerProps> = ({
|
|||
actionFieldMappings: [],
|
||||
isLoading: false,
|
||||
validationErrors: [],
|
||||
|
||||
// 컬럼 정보 초기화
|
||||
fromColumns: [],
|
||||
toColumns: [],
|
||||
...initialData,
|
||||
}));
|
||||
|
||||
// 💾 저장 다이얼로그 상태
|
||||
const [showSaveDialog, setShowSaveDialog] = useState(false);
|
||||
// 🔧 수정 모드 감지 (initialData에 diagramId가 있으면 수정 모드)
|
||||
const diagramId = initialData?.diagramId;
|
||||
|
||||
// 🔄 초기 데이터 로드
|
||||
useEffect(() => {
|
||||
|
|
@ -96,15 +101,50 @@ const DataConnectionDesigner: React.FC<DataConnectionDesignerProps> = ({
|
|||
setState((prev) => ({
|
||||
...prev,
|
||||
connectionType: initialData.connectionType || prev.connectionType,
|
||||
|
||||
// 🔧 관계 정보 로드
|
||||
relationshipName: initialData.relationshipName || prev.relationshipName,
|
||||
description: initialData.description || prev.description,
|
||||
groupsLogicalOperator: initialData.groupsLogicalOperator || prev.groupsLogicalOperator,
|
||||
|
||||
fromConnection: initialData.fromConnection || prev.fromConnection,
|
||||
toConnection: initialData.toConnection || prev.toConnection,
|
||||
fromTable: initialData.fromTable || prev.fromTable,
|
||||
toTable: initialData.toTable || prev.toTable,
|
||||
actionType: initialData.actionType || prev.actionType,
|
||||
controlConditions: initialData.controlConditions || prev.controlConditions,
|
||||
actionConditions: initialData.actionConditions || prev.actionConditions,
|
||||
fieldMappings: initialData.fieldMappings || prev.fieldMappings,
|
||||
currentStep: initialData.fromConnection && initialData.toConnection ? 2 : 1, // 연결 정보가 있으면 2단계부터 시작
|
||||
|
||||
// 🔧 액션 그룹 데이터 로드 (기존 호환성 포함)
|
||||
actionGroups:
|
||||
initialData.actionGroups ||
|
||||
// 기존 단일 액션 데이터를 그룹으로 변환
|
||||
(initialData.actionType || initialData.actionConditions
|
||||
? [
|
||||
{
|
||||
id: "group_1",
|
||||
name: "기본 액션 그룹",
|
||||
logicalOperator: "AND" as const,
|
||||
actions: [
|
||||
{
|
||||
id: "action_1",
|
||||
name: "액션 1",
|
||||
actionType: initialData.actionType || ("insert" as const),
|
||||
conditions: initialData.actionConditions || [],
|
||||
fieldMappings: initialData.actionFieldMappings || [],
|
||||
isEnabled: true,
|
||||
},
|
||||
],
|
||||
isEnabled: true,
|
||||
},
|
||||
]
|
||||
: prev.actionGroups),
|
||||
|
||||
// 기존 호환성 필드들
|
||||
actionType: initialData.actionType || prev.actionType,
|
||||
actionConditions: initialData.actionConditions || prev.actionConditions,
|
||||
actionFieldMappings: initialData.actionFieldMappings || prev.actionFieldMappings,
|
||||
|
||||
currentStep: initialData.fromConnection && initialData.toConnection ? 4 : 1, // 연결 정보가 있으면 4단계부터 시작
|
||||
}));
|
||||
|
||||
console.log("✅ 초기 데이터 로드 완료");
|
||||
|
|
@ -130,6 +170,26 @@ const DataConnectionDesigner: React.FC<DataConnectionDesignerProps> = ({
|
|||
toast.success(`연결 타입이 ${type === "data_save" ? "데이터 저장" : "외부 호출"}로 변경되었습니다.`);
|
||||
}, []),
|
||||
|
||||
// 🔧 관계 정보 설정
|
||||
setRelationshipName: useCallback((name: string) => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
relationshipName: name,
|
||||
}));
|
||||
}, []),
|
||||
|
||||
setDescription: useCallback((description: string) => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
description: description,
|
||||
}));
|
||||
}, []),
|
||||
|
||||
setGroupsLogicalOperator: useCallback((operator: "AND" | "OR") => {
|
||||
setState((prev) => ({ ...prev, groupsLogicalOperator: operator }));
|
||||
console.log("🔄 그룹 간 논리 연산자 변경:", operator);
|
||||
}, []),
|
||||
|
||||
// 단계 이동
|
||||
goToStep: useCallback((step: 1 | 2 | 3 | 4) => {
|
||||
setState((prev) => ({ ...prev, currentStep: step }));
|
||||
|
|
@ -152,21 +212,75 @@ const DataConnectionDesigner: React.FC<DataConnectionDesignerProps> = ({
|
|||
setState((prev) => ({
|
||||
...prev,
|
||||
[type === "from" ? "fromTable" : "toTable"]: table,
|
||||
// 테이블 변경 시 매핑 초기화
|
||||
// 테이블 변경 시 매핑과 컬럼 정보 초기화
|
||||
fieldMappings: [],
|
||||
fromColumns: type === "from" ? [] : prev.fromColumns,
|
||||
toColumns: type === "to" ? [] : prev.toColumns,
|
||||
}));
|
||||
toast.success(
|
||||
`${type === "from" ? "소스" : "대상"} 테이블이 선택되었습니다: ${table.displayName || table.tableName}`,
|
||||
);
|
||||
}, []),
|
||||
|
||||
// 필드 매핑 생성
|
||||
// 컬럼 정보 로드 (중앙 관리)
|
||||
loadColumns: useCallback(async () => {
|
||||
if (!state.fromConnection || !state.toConnection || !state.fromTable || !state.toTable) {
|
||||
console.log("❌ 컬럼 로드: 필수 정보 누락");
|
||||
return;
|
||||
}
|
||||
|
||||
// 이미 로드된 경우 스킵 (배열 길이로 확인)
|
||||
if (state.fromColumns && state.toColumns && state.fromColumns.length > 0 && state.toColumns.length > 0) {
|
||||
console.log("✅ 컬럼 정보 이미 로드됨, 스킵", {
|
||||
fromColumns: state.fromColumns.length,
|
||||
toColumns: state.toColumns.length,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("🔄 중앙 컬럼 로드 시작:", {
|
||||
from: `${state.fromConnection.id}/${state.fromTable.tableName}`,
|
||||
to: `${state.toConnection.id}/${state.toTable.tableName}`,
|
||||
});
|
||||
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isLoading: true,
|
||||
fromColumns: [],
|
||||
toColumns: [],
|
||||
}));
|
||||
|
||||
try {
|
||||
const [fromCols, toCols] = await Promise.all([
|
||||
getColumnsFromConnection(state.fromConnection.id, state.fromTable.tableName),
|
||||
getColumnsFromConnection(state.toConnection.id, state.toTable.tableName),
|
||||
]);
|
||||
|
||||
console.log("✅ 중앙 컬럼 로드 완료:", {
|
||||
fromColumns: fromCols.length,
|
||||
toColumns: toCols.length,
|
||||
});
|
||||
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
fromColumns: Array.isArray(fromCols) ? fromCols : [],
|
||||
toColumns: Array.isArray(toCols) ? toCols : [],
|
||||
isLoading: false,
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error("❌ 중앙 컬럼 로드 실패:", error);
|
||||
setState((prev) => ({ ...prev, isLoading: false }));
|
||||
toast.error("컬럼 정보를 불러오는데 실패했습니다.");
|
||||
}
|
||||
}, [state.fromConnection, state.toConnection, state.fromTable, state.toTable, state.fromColumns, state.toColumns]),
|
||||
|
||||
// 필드 매핑 생성 (호환성용 - 실제로는 각 액션에서 직접 관리)
|
||||
createMapping: useCallback((fromField: ColumnInfo, toField: ColumnInfo) => {
|
||||
const newMapping: FieldMapping = {
|
||||
id: `${fromField.columnName}_to_${toField.columnName}_${Date.now()}`,
|
||||
fromField,
|
||||
toField,
|
||||
isValid: true, // 기본적으로 유효하다고 가정, 나중에 검증
|
||||
isValid: true,
|
||||
validationMessage: undefined,
|
||||
};
|
||||
|
||||
|
|
@ -175,6 +289,11 @@ const DataConnectionDesigner: React.FC<DataConnectionDesignerProps> = ({
|
|||
fieldMappings: [...prev.fieldMappings, newMapping],
|
||||
}));
|
||||
|
||||
console.log("🔗 전역 매핑 생성 (호환성):", {
|
||||
newMapping,
|
||||
fieldName: `${fromField.columnName} → ${toField.columnName}`,
|
||||
});
|
||||
|
||||
toast.success(`매핑이 생성되었습니다: ${fromField.columnName} → ${toField.columnName}`);
|
||||
}, []),
|
||||
|
||||
|
|
@ -188,12 +307,14 @@ const DataConnectionDesigner: React.FC<DataConnectionDesignerProps> = ({
|
|||
}));
|
||||
}, []),
|
||||
|
||||
// 필드 매핑 삭제
|
||||
// 필드 매핑 삭제 (호환성용 - 실제로는 각 액션에서 직접 관리)
|
||||
deleteMapping: useCallback((mappingId: string) => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
fieldMappings: prev.fieldMappings.filter((mapping) => mapping.id !== mappingId),
|
||||
}));
|
||||
|
||||
console.log("🗑️ 전역 매핑 삭제 (호환성):", { mappingId });
|
||||
toast.success("매핑이 삭제되었습니다.");
|
||||
}, []),
|
||||
|
||||
|
|
@ -404,10 +525,73 @@ const DataConnectionDesigner: React.FC<DataConnectionDesignerProps> = ({
|
|||
toast.success("액션이 삭제되었습니다.");
|
||||
}, []),
|
||||
|
||||
// 매핑 저장 (다이얼로그 표시)
|
||||
// 매핑 저장 (직접 저장)
|
||||
saveMappings: useCallback(async () => {
|
||||
setShowSaveDialog(true);
|
||||
}, []),
|
||||
// 관계명과 설명이 없으면 저장할 수 없음
|
||||
if (!state.relationshipName?.trim()) {
|
||||
toast.error("관계 이름을 입력해주세요.");
|
||||
actions.goToStep(1); // 첫 번째 단계로 이동
|
||||
return;
|
||||
}
|
||||
|
||||
// 중복 체크 (수정 모드가 아닌 경우에만)
|
||||
if (!diagramId) {
|
||||
try {
|
||||
const duplicateCheck = await checkRelationshipNameDuplicate(state.relationshipName, diagramId);
|
||||
if (duplicateCheck.isDuplicate) {
|
||||
toast.error(`"${state.relationshipName}" 이름이 이미 사용 중입니다. 다른 이름을 사용해주세요.`);
|
||||
actions.goToStep(1); // 첫 번째 단계로 이동
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("중복 체크 실패:", error);
|
||||
toast.error("관계명 중복 체크 중 오류가 발생했습니다.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setState((prev) => ({ ...prev, isLoading: true }));
|
||||
|
||||
try {
|
||||
// 실제 저장 로직 구현
|
||||
const saveData = {
|
||||
relationshipName: state.relationshipName,
|
||||
description: state.description,
|
||||
connectionType: state.connectionType,
|
||||
fromConnection: state.fromConnection,
|
||||
toConnection: state.toConnection,
|
||||
fromTable: state.fromTable,
|
||||
toTable: state.toTable,
|
||||
// 🔧 멀티 액션 그룹 데이터 포함
|
||||
actionGroups: state.actionGroups,
|
||||
groupsLogicalOperator: state.groupsLogicalOperator,
|
||||
// 기존 호환성을 위한 필드들 (첫 번째 액션 그룹의 첫 번째 액션에서 추출)
|
||||
actionType: state.actionGroups[0]?.actions[0]?.actionType || state.actionType || "insert",
|
||||
controlConditions: state.controlConditions,
|
||||
actionConditions: state.actionGroups[0]?.actions[0]?.conditions || state.actionConditions || [],
|
||||
fieldMappings: state.actionGroups[0]?.actions[0]?.fieldMappings || state.fieldMappings || [],
|
||||
};
|
||||
|
||||
console.log("💾 직접 저장 시작:", { saveData, diagramId, isEdit: !!diagramId });
|
||||
|
||||
// 백엔드 API 호출 (수정 모드인 경우 diagramId 전달)
|
||||
const result = await saveDataflowRelationship(saveData, diagramId);
|
||||
|
||||
console.log("✅ 저장 완료:", result);
|
||||
|
||||
setState((prev) => ({ ...prev, isLoading: false }));
|
||||
toast.success(`"${state.relationshipName}" 관계가 성공적으로 저장되었습니다.`);
|
||||
|
||||
// 저장 후 닫기
|
||||
if (onClose) {
|
||||
onClose();
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("❌ 저장 실패:", error);
|
||||
setState((prev) => ({ ...prev, isLoading: false }));
|
||||
toast.error(error.message || "저장 중 오류가 발생했습니다.");
|
||||
}
|
||||
}, [state, diagramId, onClose]),
|
||||
|
||||
// 테스트 실행
|
||||
testExecution: useCallback(async (): Promise<TestResult> => {
|
||||
|
|
@ -434,52 +618,6 @@ const DataConnectionDesigner: React.FC<DataConnectionDesignerProps> = ({
|
|||
}, []),
|
||||
};
|
||||
|
||||
// 💾 실제 저장 함수
|
||||
const handleSaveWithName = useCallback(
|
||||
async (relationshipName: string, description?: string) => {
|
||||
setState((prev) => ({ ...prev, isLoading: true }));
|
||||
|
||||
try {
|
||||
// 실제 저장 로직 구현
|
||||
const saveData = {
|
||||
relationshipName,
|
||||
description,
|
||||
connectionType: state.connectionType,
|
||||
fromConnection: state.fromConnection,
|
||||
toConnection: state.toConnection,
|
||||
fromTable: state.fromTable,
|
||||
toTable: state.toTable,
|
||||
actionType: state.actionType,
|
||||
controlConditions: state.controlConditions,
|
||||
actionConditions: state.actionConditions,
|
||||
fieldMappings: state.fieldMappings,
|
||||
};
|
||||
|
||||
console.log("💾 저장 시작:", saveData);
|
||||
|
||||
// 백엔드 API 호출
|
||||
const result = await saveDataflowRelationship(saveData);
|
||||
|
||||
console.log("✅ 저장 완료:", result);
|
||||
|
||||
setState((prev) => ({ ...prev, isLoading: false }));
|
||||
toast.success(`"${relationshipName}" 관계가 성공적으로 저장되었습니다.`);
|
||||
|
||||
// 저장 후 상위 컴포넌트에 알림 (필요한 경우)
|
||||
if (onClose) {
|
||||
onClose();
|
||||
}
|
||||
} catch (error: any) {
|
||||
setState((prev) => ({ ...prev, isLoading: false }));
|
||||
|
||||
const errorMessage = error.message || "저장 중 오류가 발생했습니다.";
|
||||
toast.error(errorMessage);
|
||||
console.error("❌ 저장 오류:", error);
|
||||
}
|
||||
},
|
||||
[state, onClose],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-lg border bg-white shadow-sm">
|
||||
{/* 상단 네비게이션 */}
|
||||
|
|
@ -514,16 +652,6 @@ const DataConnectionDesigner: React.FC<DataConnectionDesignerProps> = ({
|
|||
<RightPanel state={state} actions={actions} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 💾 저장 다이얼로그 */}
|
||||
<SaveRelationshipDialog
|
||||
open={showSaveDialog}
|
||||
onOpenChange={setShowSaveDialog}
|
||||
onSave={handleSaveWithName}
|
||||
actionType={state.actionType}
|
||||
fromTable={state.fromTable?.tableName}
|
||||
toTable={state.toTable?.tableName}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,8 +11,6 @@ import { LeftPanelProps } from "../types/redesigned";
|
|||
import ConnectionTypeSelector from "./ConnectionTypeSelector";
|
||||
import MappingDetailList from "./MappingDetailList";
|
||||
import ActionSummaryPanel from "./ActionSummaryPanel";
|
||||
import AdvancedSettings from "./AdvancedSettings";
|
||||
import ActionButtons from "./ActionButtons";
|
||||
|
||||
/**
|
||||
* 📋 좌측 패널 (30% 너비)
|
||||
|
|
@ -35,12 +33,31 @@ const LeftPanel: React.FC<LeftPanelProps> = ({ state, actions }) => {
|
|||
<Separator />
|
||||
|
||||
{/* 매핑 상세 목록 */}
|
||||
{state.fieldMappings.length > 0 && (
|
||||
{(() => {
|
||||
// 액션 그룹에서 모든 매핑 수집
|
||||
const allMappings = state.actionGroups.flatMap((group) =>
|
||||
group.actions.flatMap((action) => action.fieldMappings || []),
|
||||
);
|
||||
|
||||
// 기존 fieldMappings와 병합 (중복 제거)
|
||||
const combinedMappings = [...state.fieldMappings, ...allMappings];
|
||||
const uniqueMappings = combinedMappings.filter(
|
||||
(mapping, index, arr) => arr.findIndex((m) => m.id === mapping.id) === index,
|
||||
);
|
||||
|
||||
console.log("🔍 LeftPanel - 매핑 데이터 수집:", {
|
||||
stateFieldMappings: state.fieldMappings,
|
||||
actionGroupMappings: allMappings,
|
||||
combinedMappings: uniqueMappings,
|
||||
});
|
||||
|
||||
return (
|
||||
uniqueMappings.length > 0 && (
|
||||
<>
|
||||
<div>
|
||||
<h3 className="text-muted-foreground mb-2 text-sm font-medium">매핑 상세 목록</h3>
|
||||
<MappingDetailList
|
||||
mappings={state.fieldMappings}
|
||||
mappings={uniqueMappings}
|
||||
selectedMapping={state.selectedMapping}
|
||||
onSelectMapping={(mappingId) => {
|
||||
// TODO: 선택된 매핑 상태 업데이트
|
||||
|
|
@ -52,28 +69,17 @@ const LeftPanel: React.FC<LeftPanelProps> = ({ state, actions }) => {
|
|||
|
||||
<Separator />
|
||||
</>
|
||||
)}
|
||||
)
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* 액션 설정 요약 */}
|
||||
<div>
|
||||
<h3 className="text-muted-foreground mb-2 text-sm font-medium">액션 설정</h3>
|
||||
<ActionSummaryPanel state={state} />
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 고급 설정 */}
|
||||
<div>
|
||||
<h3 className="text-muted-foreground mb-2 text-sm font-medium">고급 설정</h3>
|
||||
<AdvancedSettings connectionType={state.connectionType} />
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{/* 하단 액션 버튼들 - 고정 위치 */}
|
||||
<div className="flex-shrink-0 border-t bg-white p-3 shadow-sm">
|
||||
<ActionButtons state={state} actions={actions} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -28,7 +28,35 @@ const MappingDetailList: React.FC<MappingDetailListProps> = ({
|
|||
<CardContent className="p-0">
|
||||
<ScrollArea className="h-[300px]">
|
||||
<div className="space-y-3 p-4">
|
||||
{mappings.map((mapping, index) => (
|
||||
{(() => {
|
||||
console.log("🔍 MappingDetailList - 전체 매핑 데이터:", mappings);
|
||||
|
||||
const validMappings = mappings.filter((mapping) => {
|
||||
const isValid =
|
||||
mapping.fromField && mapping.toField && mapping.fromField.columnName && mapping.toField.columnName;
|
||||
console.log(`🔍 매핑 유효성 검사:`, {
|
||||
mapping,
|
||||
isValid,
|
||||
hasFromField: !!mapping.fromField,
|
||||
hasToField: !!mapping.toField,
|
||||
fromColumnName: mapping.fromField?.columnName,
|
||||
toColumnName: mapping.toField?.columnName,
|
||||
});
|
||||
return isValid;
|
||||
});
|
||||
|
||||
if (validMappings.length === 0) {
|
||||
return (
|
||||
<div className="text-muted-foreground flex h-[200px] items-center justify-center">
|
||||
<div className="text-center">
|
||||
<p className="text-sm">매핑된 필드가 없습니다</p>
|
||||
<p className="text-xs">INSERT 액션이 있을 때 필드 매핑을 설정하세요</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return validMappings.map((mapping, index) => (
|
||||
<div
|
||||
key={mapping.id}
|
||||
className={`cursor-pointer rounded-lg border p-3 transition-colors ${
|
||||
|
|
@ -40,14 +68,14 @@ const MappingDetailList: React.FC<MappingDetailListProps> = ({
|
|||
<div className="mb-2 flex items-start justify-between">
|
||||
<div className="min-w-0 flex-1">
|
||||
<h4 className="truncate text-sm font-medium">
|
||||
{index + 1}. {mapping.fromField.displayName || mapping.fromField.columnName} →{" "}
|
||||
{mapping.toField.displayName || mapping.toField.columnName}
|
||||
{index + 1}. {mapping.fromField?.displayName || mapping.fromField?.columnName || "Unknown"} →{" "}
|
||||
{mapping.toField?.displayName || mapping.toField?.columnName || "Unknown"}
|
||||
</h4>
|
||||
<div className="mt-1 flex items-center gap-2">
|
||||
{mapping.isValid ? (
|
||||
<Badge variant="outline" className="text-xs text-green-600">
|
||||
<CheckCircle className="mr-1 h-3 w-3" />
|
||||
{mapping.fromField.webType} → {mapping.toField.webType}
|
||||
{mapping.fromField?.webType || "Unknown"} → {mapping.toField?.webType || "Unknown"}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-xs text-orange-600">
|
||||
|
|
@ -94,14 +122,8 @@ const MappingDetailList: React.FC<MappingDetailListProps> = ({
|
|||
<div className="mt-1 text-xs text-orange-600">{mapping.validationMessage}</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{mappings.length === 0 && (
|
||||
<div className="text-muted-foreground py-8 text-center text-sm">
|
||||
<p>매핑된 필드가 없습니다.</p>
|
||||
<p className="mt-1 text-xs">우측에서 필드를 연결해주세요.</p>
|
||||
</div>
|
||||
)}
|
||||
));
|
||||
})()}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</CardContent>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ interface ActionConditionBuilderProps {
|
|||
toColumns: ColumnInfo[];
|
||||
conditions: ActionCondition[];
|
||||
fieldMappings: FieldValueMapping[];
|
||||
columnMappings?: any[]; // 컬럼 매핑 정보 (이미 매핑된 필드들)
|
||||
onConditionsChange: (conditions: ActionCondition[]) => void;
|
||||
onFieldMappingsChange: (mappings: FieldValueMapping[]) => void;
|
||||
showFieldMappings?: boolean; // 필드 매핑 섹션 표시 여부
|
||||
|
|
@ -53,12 +54,41 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
|
|||
toColumns,
|
||||
conditions,
|
||||
fieldMappings,
|
||||
columnMappings = [],
|
||||
onConditionsChange,
|
||||
onFieldMappingsChange,
|
||||
showFieldMappings = true,
|
||||
}) => {
|
||||
const [availableCodes, setAvailableCodes] = useState<Record<string, CodeItem[]>>({});
|
||||
|
||||
// 컬럼 매핑인지 필드값 매핑인지 구분하는 함수
|
||||
const isColumnMapping = (mapping: any): boolean => {
|
||||
return mapping.fromField && mapping.toField && mapping.fromField.columnName && mapping.toField.columnName;
|
||||
};
|
||||
|
||||
// 이미 컬럼 매핑된 필드들을 가져오는 함수
|
||||
const getMappedFieldNames = (): string[] => {
|
||||
if (!columnMappings || columnMappings.length === 0) return [];
|
||||
return columnMappings.filter((mapping) => isColumnMapping(mapping)).map((mapping) => mapping.toField.columnName);
|
||||
};
|
||||
|
||||
// 매핑되지 않은 필드들만 필터링하는 함수
|
||||
const getUnmappedToColumns = (): ColumnInfo[] => {
|
||||
const mappedFieldNames = getMappedFieldNames();
|
||||
return toColumns.filter((column) => !mappedFieldNames.includes(column.columnName));
|
||||
};
|
||||
|
||||
// 필드값 설정에서 사용 가능한 필드들 (이미 필드값 설정에서 사용된 필드 제외)
|
||||
const getAvailableFieldsForMapping = (currentIndex?: number): ColumnInfo[] => {
|
||||
const unmappedColumns = getUnmappedToColumns();
|
||||
const usedFieldNames = fieldMappings
|
||||
.filter((_, index) => index !== currentIndex) // 현재 편집 중인 항목 제외
|
||||
.map((mapping) => mapping.targetField)
|
||||
.filter((field) => field); // 빈 값 제외
|
||||
|
||||
return unmappedColumns.filter((column) => !usedFieldNames.includes(column.columnName));
|
||||
};
|
||||
|
||||
const operators = [
|
||||
{ value: "=", label: "같음 (=)" },
|
||||
{ value: "!=", label: "다름 (!=)" },
|
||||
|
|
@ -75,9 +105,25 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
|
|||
// 코드 정보 로드
|
||||
useEffect(() => {
|
||||
const loadCodes = async () => {
|
||||
const codeFields = [...fromColumns, ...toColumns].filter(
|
||||
(col) => col.webType === "code" || col.dataType?.toLowerCase().includes("code"),
|
||||
const codeFields = [...fromColumns, ...toColumns].filter((col) => {
|
||||
// 메인 DB(connectionId === 0 또는 undefined)인 경우: column_labels의 input_type이 'code'인 경우만
|
||||
if (col.connectionId === 0 || col.connectionId === undefined) {
|
||||
return col.inputType === "code";
|
||||
}
|
||||
// 외부 DB인 경우: 코드 타입 없음
|
||||
return false;
|
||||
});
|
||||
|
||||
console.log(
|
||||
"🔍 ActionConditionBuilder - 모든 컬럼 정보:",
|
||||
[...fromColumns, ...toColumns].map((col) => ({
|
||||
columnName: col.columnName,
|
||||
connectionId: col.connectionId,
|
||||
inputType: col.inputType,
|
||||
webType: col.webType,
|
||||
})),
|
||||
);
|
||||
console.log("🔍 ActionConditionBuilder - 코드 타입 컬럼들:", codeFields);
|
||||
|
||||
for (const field of codeFields) {
|
||||
try {
|
||||
|
|
@ -100,6 +146,23 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
|
|||
}
|
||||
}, [fromColumns, toColumns]);
|
||||
|
||||
// 컬럼 매핑이 변경될 때 필드값 설정에서 이미 매핑된 필드들 제거
|
||||
useEffect(() => {
|
||||
const mappedFieldNames = getMappedFieldNames();
|
||||
if (mappedFieldNames.length > 0) {
|
||||
const updatedFieldMappings = fieldMappings.filter((mapping) => !mappedFieldNames.includes(mapping.targetField));
|
||||
|
||||
// 변경된 내용이 있으면 업데이트
|
||||
if (updatedFieldMappings.length !== fieldMappings.length) {
|
||||
console.log("🧹 매핑된 필드들을 필드값 설정에서 제거:", {
|
||||
removed: fieldMappings.filter((mapping) => mappedFieldNames.includes(mapping.targetField)),
|
||||
remaining: updatedFieldMappings,
|
||||
});
|
||||
onFieldMappingsChange(updatedFieldMappings);
|
||||
}
|
||||
}
|
||||
}, [columnMappings]); // columnMappings 변경 시에만 실행
|
||||
|
||||
// 조건 추가
|
||||
const addCondition = () => {
|
||||
const newCondition: ActionCondition = {
|
||||
|
|
@ -129,6 +192,20 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
|
|||
|
||||
// 필드 매핑 추가
|
||||
const addFieldMapping = () => {
|
||||
// 임시로 검증을 완화 - 매핑되지 않은 필드가 있으면 추가 허용
|
||||
const unmappedColumns = getUnmappedToColumns();
|
||||
console.log("🔍 필드 추가 시도:", {
|
||||
unmappedColumns,
|
||||
unmappedColumnsCount: unmappedColumns.length,
|
||||
fieldMappings,
|
||||
columnMappings,
|
||||
});
|
||||
|
||||
if (unmappedColumns.length === 0) {
|
||||
console.warn("매핑되지 않은 필드가 없습니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
const newMapping: FieldValueMapping = {
|
||||
id: Date.now().toString(),
|
||||
targetField: "",
|
||||
|
|
@ -136,6 +213,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
|
|||
value: "",
|
||||
};
|
||||
|
||||
console.log("✅ 새 필드 매핑 추가:", newMapping);
|
||||
onFieldMappingsChange([...fieldMappings, newMapping]);
|
||||
};
|
||||
|
||||
|
|
@ -153,7 +231,11 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
|
|||
|
||||
// 필드의 값 입력 컴포넌트 렌더링
|
||||
const renderValueInput = (mapping: FieldValueMapping, index: number, targetColumn?: ColumnInfo) => {
|
||||
if (mapping.valueType === "code" && targetColumn?.webType === "code") {
|
||||
if (
|
||||
mapping.valueType === "code" &&
|
||||
(targetColumn?.connectionId === 0 || targetColumn?.connectionId === undefined) &&
|
||||
targetColumn?.inputType === "code"
|
||||
) {
|
||||
const codes = availableCodes[targetColumn.columnName] || [];
|
||||
|
||||
return (
|
||||
|
|
@ -164,12 +246,7 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
|
|||
<SelectContent>
|
||||
{codes.map((code) => (
|
||||
<SelectItem key={code.code} value={code.code}>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{code.code}
|
||||
</Badge>
|
||||
<span>{code.name}</span>
|
||||
</div>
|
||||
{code.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
|
|
@ -227,6 +304,129 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
|
|||
);
|
||||
}
|
||||
|
||||
// 날짜 타입에 대한 특별 처리
|
||||
if (
|
||||
targetColumn?.webType === "date" ||
|
||||
targetColumn?.webType === "datetime" ||
|
||||
targetColumn?.dataType?.toLowerCase().includes("date")
|
||||
) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{/* 날짜 타입 선택 */}
|
||||
<Select
|
||||
value={mapping.value?.startsWith("#") ? mapping.value : "#custom"}
|
||||
onValueChange={(value) => {
|
||||
if (value === "#custom") {
|
||||
updateFieldMapping(index, { value: "" });
|
||||
} else {
|
||||
updateFieldMapping(index, { value });
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="날짜 타입 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="#NOW">🕐 현재 시간 (NOW)</SelectItem>
|
||||
<SelectItem value="#TODAY">📅 오늘 날짜 (TODAY)</SelectItem>
|
||||
<SelectItem value="#YESTERDAY">📅 어제 날짜</SelectItem>
|
||||
<SelectItem value="#TOMORROW">📅 내일 날짜</SelectItem>
|
||||
<SelectItem value="#WEEK_START">📅 이번 주 시작일</SelectItem>
|
||||
<SelectItem value="#MONTH_START">📅 이번 달 시작일</SelectItem>
|
||||
<SelectItem value="#YEAR_START">📅 올해 시작일</SelectItem>
|
||||
<SelectItem value="#custom">✏️ 직접 입력</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* 직접 입력이 선택된 경우 */}
|
||||
{(!mapping.value?.startsWith("#") || mapping.value === "#custom") && (
|
||||
<div className="space-y-2">
|
||||
<Input
|
||||
type={targetColumn?.webType === "datetime" ? "datetime-local" : "date"}
|
||||
placeholder="날짜 입력"
|
||||
value={mapping.value?.startsWith("#") ? "" : mapping.value}
|
||||
onChange={(e) => updateFieldMapping(index, { value: e.target.value })}
|
||||
/>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
상대적 날짜: +7D (7일 후), -30D (30일 전), +1M (1개월 후), +1Y (1년 후)
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 선택된 날짜 타입에 대한 설명 */}
|
||||
{mapping.value?.startsWith("#") && mapping.value !== "#custom" && (
|
||||
<div className="text-muted-foreground rounded bg-blue-50 p-2 text-xs">
|
||||
{mapping.value === "#NOW" && "⏰ 현재 날짜와 시간이 저장됩니다"}
|
||||
{mapping.value === "#TODAY" && "📅 현재 날짜 (00:00:00)가 저장됩니다"}
|
||||
{mapping.value === "#YESTERDAY" && "📅 어제 날짜가 저장됩니다"}
|
||||
{mapping.value === "#TOMORROW" && "📅 내일 날짜가 저장됩니다"}
|
||||
{mapping.value === "#WEEK_START" && "📅 이번 주 월요일이 저장됩니다"}
|
||||
{mapping.value === "#MONTH_START" && "📅 이번 달 1일이 저장됩니다"}
|
||||
{mapping.value === "#YEAR_START" && "📅 올해 1월 1일이 저장됩니다"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 숫자 타입에 대한 특별 처리
|
||||
if (
|
||||
targetColumn?.webType === "number" ||
|
||||
targetColumn?.webType === "decimal" ||
|
||||
targetColumn?.dataType?.toLowerCase().includes("int") ||
|
||||
targetColumn?.dataType?.toLowerCase().includes("decimal") ||
|
||||
targetColumn?.dataType?.toLowerCase().includes("numeric")
|
||||
) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{/* 숫자 타입 선택 */}
|
||||
<Select
|
||||
value={mapping.value?.startsWith("#") ? mapping.value : "#custom"}
|
||||
onValueChange={(value) => {
|
||||
if (value === "#custom") {
|
||||
updateFieldMapping(index, { value: "" });
|
||||
} else {
|
||||
updateFieldMapping(index, { value });
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="숫자 타입 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="#AUTO_INCREMENT">🔢 자동 증가 (AUTO_INCREMENT)</SelectItem>
|
||||
<SelectItem value="#RANDOM_INT">🎲 랜덤 정수 (1-1000)</SelectItem>
|
||||
<SelectItem value="#ZERO">0️⃣ 0</SelectItem>
|
||||
<SelectItem value="#ONE">1️⃣ 1</SelectItem>
|
||||
<SelectItem value="#SEQUENCE">📈 시퀀스값</SelectItem>
|
||||
<SelectItem value="#custom">✏️ 직접 입력</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* 직접 입력이 선택된 경우 */}
|
||||
{(!mapping.value?.startsWith("#") || mapping.value === "#custom") && (
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="숫자 입력"
|
||||
value={mapping.value?.startsWith("#") ? "" : mapping.value}
|
||||
onChange={(e) => updateFieldMapping(index, { value: e.target.value })}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 선택된 숫자 타입에 대한 설명 */}
|
||||
{mapping.value?.startsWith("#") && mapping.value !== "#custom" && (
|
||||
<div className="text-muted-foreground rounded bg-green-50 p-2 text-xs">
|
||||
{mapping.value === "#AUTO_INCREMENT" && "🔢 데이터베이스에서 자동으로 증가하는 값이 할당됩니다"}
|
||||
{mapping.value === "#RANDOM_INT" && "🎲 1부터 1000 사이의 랜덤한 정수가 생성됩니다"}
|
||||
{mapping.value === "#ZERO" && "0️⃣ 0 값이 저장됩니다"}
|
||||
{mapping.value === "#ONE" && "1️⃣ 1 값이 저장됩니다"}
|
||||
{mapping.value === "#SEQUENCE" && "📈 시퀀스에서 다음 값을 가져옵니다"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Input
|
||||
placeholder="값 입력"
|
||||
|
|
@ -467,8 +667,16 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
|
|||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="flex items-center justify-between text-base">
|
||||
<div>
|
||||
<span>필드 값 설정 (SET)</span>
|
||||
<Button variant="outline" size="sm" onClick={addFieldMapping}>
|
||||
<p className="text-muted-foreground mt-1 text-xs">매핑되지 않은 필드의 기본값 설정</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={addFieldMapping}
|
||||
disabled={getUnmappedToColumns().length === 0}
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
필드 추가
|
||||
</Button>
|
||||
|
|
@ -476,13 +684,32 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
|
|||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-3">
|
||||
{fieldMappings.length === 0 ? (
|
||||
{/* 매핑되지 않은 필드가 없는 경우 */}
|
||||
{getUnmappedToColumns().length === 0 ? (
|
||||
<div className="rounded-lg border bg-green-50 p-4 text-center">
|
||||
<div className="mb-2 text-green-600">✅ 모든 필드가 매핑되었습니다</div>
|
||||
<p className="text-sm text-green-700">
|
||||
컬럼 매핑으로 모든 TO 테이블 필드가 처리되고 있어 별도의 기본값 설정이 필요하지 않습니다.
|
||||
</p>
|
||||
</div>
|
||||
) : fieldMappings.length === 0 ? (
|
||||
<div className="rounded-lg border-2 border-dashed p-6 text-center">
|
||||
<Settings className="text-muted-foreground mx-auto mb-2 h-6 w-6" />
|
||||
<p className="text-muted-foreground text-sm">조건을 만족할 때 설정할 필드 값을 지정하세요</p>
|
||||
<p className="text-muted-foreground text-sm">매핑되지 않은 필드의 기본값을 설정하세요</p>
|
||||
<p className="text-muted-foreground mt-1 text-xs">
|
||||
컬럼 매핑으로 처리되지 않은 필드들만 여기서 설정됩니다
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-2 text-xs">
|
||||
현재 {getUnmappedToColumns().length}개 필드가 매핑되지 않음
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
fieldMappings.map((mapping, index) => {
|
||||
(() => {
|
||||
console.log("🎨 필드값 설정 렌더링:", {
|
||||
fieldMappings,
|
||||
fieldMappingsCount: fieldMappings.length,
|
||||
});
|
||||
return fieldMappings.map((mapping, index) => {
|
||||
const targetColumn = toColumns.find((col) => col.columnName === mapping.targetField);
|
||||
|
||||
return (
|
||||
|
|
@ -490,13 +717,19 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
|
|||
{/* 대상 필드 */}
|
||||
<Select
|
||||
value={mapping.targetField}
|
||||
onValueChange={(value) => updateFieldMapping(index, { targetField: value })}
|
||||
onValueChange={(value) =>
|
||||
updateFieldMapping(index, {
|
||||
targetField: value,
|
||||
value: "", // 필드 변경 시 값 초기화
|
||||
sourceField: "", // 소스 필드도 초기화
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-40">
|
||||
<SelectValue placeholder="대상 필드" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{toColumns.map((column) => (
|
||||
{getAvailableFieldsForMapping(index).map((column) => (
|
||||
<SelectItem key={column.columnName} value={column.columnName}>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{column.displayName || column.columnName}</span>
|
||||
|
|
@ -512,7 +745,13 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
|
|||
{/* 값 타입 */}
|
||||
<Select
|
||||
value={mapping.valueType}
|
||||
onValueChange={(value) => updateFieldMapping(index, { valueType: value as any })}
|
||||
onValueChange={(value) =>
|
||||
updateFieldMapping(index, {
|
||||
valueType: value as any,
|
||||
value: "", // 값 타입 변경 시 값 초기화
|
||||
sourceField: "", // 소스 필드도 초기화
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue />
|
||||
|
|
@ -520,7 +759,8 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
|
|||
<SelectContent>
|
||||
<SelectItem value="static">고정값</SelectItem>
|
||||
<SelectItem value="source_field">소스필드</SelectItem>
|
||||
{targetColumn?.webType === "code" && <SelectItem value="code">코드선택</SelectItem>}
|
||||
{(targetColumn?.connectionId === 0 || targetColumn?.connectionId === undefined) &&
|
||||
targetColumn?.inputType === "code" && <SelectItem value="code">코드선택</SelectItem>}
|
||||
<SelectItem value="calculated">계산식</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
|
@ -534,7 +774,8 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
|
|||
</Button>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
});
|
||||
})()
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { ArrowRight, Database, Globe, Loader2 } from "lucide-react";
|
||||
import { ArrowRight, Database, Globe, Loader2, AlertTriangle, CheckCircle } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
// API import
|
||||
import { getActiveConnections, ConnectionInfo } from "@/lib/api/multiConnection";
|
||||
import { checkRelationshipNameDuplicate } from "@/lib/api/dataflowSave";
|
||||
|
||||
// 타입 import
|
||||
import { Connection } from "@/lib/types/multiConnection";
|
||||
|
|
@ -18,7 +22,12 @@ interface ConnectionStepProps {
|
|||
connectionType: "data_save" | "external_call";
|
||||
fromConnection?: Connection;
|
||||
toConnection?: Connection;
|
||||
relationshipName?: string;
|
||||
description?: string;
|
||||
diagramId?: number; // 🔧 수정 모드 감지용
|
||||
onSelectConnection: (type: "from" | "to", connection: Connection) => void;
|
||||
onSetRelationshipName: (name: string) => void;
|
||||
onSetDescription: (description: string) => void;
|
||||
onNext: () => void;
|
||||
}
|
||||
|
||||
|
|
@ -29,9 +38,21 @@ interface ConnectionStepProps {
|
|||
* - 지연시간 정보
|
||||
*/
|
||||
const ConnectionStep: React.FC<ConnectionStepProps> = React.memo(
|
||||
({ connectionType, fromConnection, toConnection, onSelectConnection, onNext }) => {
|
||||
({
|
||||
connectionType,
|
||||
fromConnection,
|
||||
toConnection,
|
||||
relationshipName,
|
||||
description,
|
||||
diagramId,
|
||||
onSelectConnection,
|
||||
onSetRelationshipName,
|
||||
onSetDescription,
|
||||
onNext,
|
||||
}) => {
|
||||
const [connections, setConnections] = useState<Connection[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [nameCheckStatus, setNameCheckStatus] = useState<"idle" | "checking" | "valid" | "duplicate">("idle");
|
||||
|
||||
// API 응답을 Connection 타입으로 변환
|
||||
const convertToConnection = (connectionInfo: ConnectionInfo): Connection => ({
|
||||
|
|
@ -48,6 +69,45 @@ const ConnectionStep: React.FC<ConnectionStepProps> = React.memo(
|
|||
updatedDate: connectionInfo.updated_date,
|
||||
});
|
||||
|
||||
// 🔍 관계명 중복 체크 (디바운스 적용)
|
||||
const checkNameDuplicate = useCallback(
|
||||
async (name: string) => {
|
||||
if (!name.trim()) {
|
||||
setNameCheckStatus("idle");
|
||||
return;
|
||||
}
|
||||
|
||||
setNameCheckStatus("checking");
|
||||
|
||||
try {
|
||||
const result = await checkRelationshipNameDuplicate(name, diagramId);
|
||||
setNameCheckStatus(result.isDuplicate ? "duplicate" : "valid");
|
||||
|
||||
if (result.isDuplicate) {
|
||||
toast.warning(`"${name}" 이름이 이미 사용 중입니다. (${result.duplicateCount}개 발견)`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("중복 체크 실패:", error);
|
||||
setNameCheckStatus("idle");
|
||||
}
|
||||
},
|
||||
[diagramId],
|
||||
);
|
||||
|
||||
// 관계명 변경 시 중복 체크 (디바운스)
|
||||
useEffect(() => {
|
||||
if (!relationshipName) {
|
||||
setNameCheckStatus("idle");
|
||||
return;
|
||||
}
|
||||
|
||||
const timeoutId = setTimeout(() => {
|
||||
checkNameDuplicate(relationshipName);
|
||||
}, 500); // 500ms 디바운스
|
||||
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [relationshipName, checkNameDuplicate]);
|
||||
|
||||
// 연결 목록 로드
|
||||
useEffect(() => {
|
||||
const loadConnections = async () => {
|
||||
|
|
@ -150,6 +210,50 @@ const ConnectionStep: React.FC<ConnectionStepProps> = React.memo(
|
|||
</CardHeader>
|
||||
|
||||
<CardContent className="max-h-[calc(100vh-400px)] min-h-[400px] space-y-6 overflow-y-auto">
|
||||
{/* 관계 정보 입력 */}
|
||||
<div className="bg-muted/30 space-y-4 rounded-lg border p-4">
|
||||
<h3 className="font-medium">관계 정보</h3>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="relationshipName">관계 이름 *</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="relationshipName"
|
||||
placeholder="예: 사용자 데이터 동기화"
|
||||
value={relationshipName || ""}
|
||||
onChange={(e) => onSetRelationshipName(e.target.value)}
|
||||
className={`pr-10 ${
|
||||
nameCheckStatus === "duplicate"
|
||||
? "border-red-500 focus:border-red-500"
|
||||
: nameCheckStatus === "valid"
|
||||
? "border-green-500 focus:border-green-500"
|
||||
: ""
|
||||
}`}
|
||||
/>
|
||||
<div className="absolute top-1/2 right-3 -translate-y-1/2">
|
||||
{nameCheckStatus === "checking" && (
|
||||
<Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
|
||||
)}
|
||||
{nameCheckStatus === "valid" && <CheckCircle className="h-4 w-4 text-green-500" />}
|
||||
{nameCheckStatus === "duplicate" && <AlertTriangle className="h-4 w-4 text-red-500" />}
|
||||
</div>
|
||||
</div>
|
||||
{nameCheckStatus === "duplicate" && <p className="text-sm text-red-600">이미 사용 중인 이름입니다.</p>}
|
||||
{nameCheckStatus === "valid" && <p className="text-sm text-green-600">사용 가능한 이름입니다.</p>}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">설명</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="이 관계에 대한 설명을 입력하세요"
|
||||
value={description || ""}
|
||||
onChange={(e) => onSetDescription(e.target.value)}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<Loader2 className="mr-2 h-6 w-6 animate-spin" />
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { ArrowLeft, CheckCircle, AlertCircle, Settings, Plus, Trash2 } from "luc
|
|||
// 타입 import
|
||||
import { DataConnectionState, DataConnectionActions } from "../types/redesigned";
|
||||
import { ColumnInfo } from "@/lib/types/multiConnection";
|
||||
import { getColumnsFromConnection } from "@/lib/api/multiConnection";
|
||||
// 컬럼 로드는 중앙에서 관리
|
||||
import { getCodesForColumn, CodeItem } from "@/lib/api/codeManagement";
|
||||
|
||||
// 컴포넌트 import
|
||||
|
|
@ -29,61 +29,66 @@ interface ControlConditionStepProps {
|
|||
* - INSERT/UPDATE/DELETE 트리거 조건
|
||||
*/
|
||||
const ControlConditionStep: React.FC<ControlConditionStepProps> = ({ state, actions, onBack, onNext }) => {
|
||||
const { controlConditions, fromTable, toTable, fromConnection, toConnection } = state;
|
||||
|
||||
const [fromColumns, setFromColumns] = useState<ColumnInfo[]>([]);
|
||||
const [toColumns, setToColumns] = useState<ColumnInfo[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const {
|
||||
controlConditions,
|
||||
fromTable,
|
||||
toTable,
|
||||
fromConnection,
|
||||
toConnection,
|
||||
fromColumns = [],
|
||||
toColumns = [],
|
||||
isLoading = false,
|
||||
} = state;
|
||||
const [availableCodes, setAvailableCodes] = useState<Record<string, CodeItem[]>>({});
|
||||
|
||||
// 컬럼 정보 로드
|
||||
// 컴포넌트 마운트 시 컬럼 로드
|
||||
useEffect(() => {
|
||||
const loadColumns = async () => {
|
||||
console.log("🔄 ControlConditionStep 컬럼 로드 시작");
|
||||
console.log("fromConnection:", fromConnection);
|
||||
console.log("toConnection:", toConnection);
|
||||
console.log("fromTable:", fromTable);
|
||||
console.log("toTable:", toTable);
|
||||
|
||||
if (!fromConnection || !toConnection || !fromTable || !toTable) {
|
||||
console.log("❌ 필수 정보 누락으로 컬럼 로드 중단");
|
||||
return;
|
||||
if (
|
||||
fromConnection &&
|
||||
toConnection &&
|
||||
fromTable &&
|
||||
toTable &&
|
||||
fromColumns.length === 0 &&
|
||||
toColumns.length === 0 &&
|
||||
!isLoading
|
||||
) {
|
||||
console.log("🔄 ControlConditionStep: 컬럼 로드 시작");
|
||||
actions.loadColumns();
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
console.log(
|
||||
`🚀 컬럼 조회 시작: FROM=${fromConnection.id}/${fromTable.tableName}, TO=${toConnection.id}/${toTable.tableName}`,
|
||||
);
|
||||
|
||||
const [fromCols, toCols] = await Promise.all([
|
||||
getColumnsFromConnection(fromConnection.id, fromTable.tableName),
|
||||
getColumnsFromConnection(toConnection.id, toTable.tableName),
|
||||
}, [
|
||||
fromConnection?.id,
|
||||
toConnection?.id,
|
||||
fromTable?.tableName,
|
||||
toTable?.tableName,
|
||||
fromColumns.length,
|
||||
toColumns.length,
|
||||
isLoading,
|
||||
]);
|
||||
|
||||
console.log(`✅ 컬럼 조회 완료: FROM=${fromCols.length}개, TO=${toCols.length}개`);
|
||||
setFromColumns(fromCols);
|
||||
setToColumns(toCols);
|
||||
} catch (error) {
|
||||
console.error("❌ 컬럼 정보 로드 실패:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadColumns();
|
||||
}, [fromConnection, toConnection, fromTable, toTable]);
|
||||
|
||||
// 코드 타입 컬럼의 코드 로드
|
||||
useEffect(() => {
|
||||
const loadCodes = async () => {
|
||||
const allColumns = [...fromColumns, ...toColumns];
|
||||
const codeColumns = allColumns.filter(
|
||||
(col) => col.webType === "code" || col.dataType?.toLowerCase().includes("code"),
|
||||
);
|
||||
const codeColumns = allColumns.filter((col) => {
|
||||
// 메인 DB(connectionId === 0 또는 undefined)인 경우: column_labels의 input_type이 'code'인 경우만
|
||||
if (col.connectionId === 0 || col.connectionId === undefined) {
|
||||
return col.inputType === "code";
|
||||
}
|
||||
// 외부 DB인 경우: 코드 타입 없음
|
||||
return false;
|
||||
});
|
||||
|
||||
if (codeColumns.length === 0) return;
|
||||
|
||||
console.log(
|
||||
"🔍 모든 컬럼 정보:",
|
||||
allColumns.map((col) => ({
|
||||
columnName: col.columnName,
|
||||
connectionId: col.connectionId,
|
||||
inputType: col.inputType,
|
||||
webType: col.webType,
|
||||
})),
|
||||
);
|
||||
console.log("🔍 코드 타입 컬럼들:", codeColumns);
|
||||
|
||||
const codePromises = codeColumns.map(async (col) => {
|
||||
|
|
@ -213,6 +218,7 @@ const ControlConditionStep: React.FC<ControlConditionStepProps> = ({ state, acti
|
|||
actions.updateControlCondition(index, {
|
||||
...condition,
|
||||
field: value,
|
||||
value: "", // 필드 변경 시 값 초기화
|
||||
});
|
||||
}
|
||||
}}
|
||||
|
|
@ -272,15 +278,18 @@ const ControlConditionStep: React.FC<ControlConditionStepProps> = ({ state, acti
|
|||
);
|
||||
const isCodeField =
|
||||
selectedField &&
|
||||
(selectedField.webType === "code" ||
|
||||
selectedField.dataType?.toLowerCase().includes("code"));
|
||||
(selectedField.connectionId === 0 || selectedField.connectionId === undefined) && // 임시: undefined도 메인 DB로 간주
|
||||
selectedField.inputType === "code";
|
||||
const fieldCodes = condition.field ? availableCodes[condition.field] : [];
|
||||
|
||||
// 디버깅 정보 출력
|
||||
console.log("🔍 값 입력 필드 디버깅:", {
|
||||
conditionField: condition.field,
|
||||
selectedField: selectedField,
|
||||
selectedFieldKeys: selectedField ? Object.keys(selectedField) : [],
|
||||
webType: selectedField?.webType,
|
||||
inputType: selectedField?.inputType,
|
||||
connectionId: selectedField?.connectionId,
|
||||
dataType: selectedField?.dataType,
|
||||
isCodeField: isCodeField,
|
||||
fieldCodes: fieldCodes,
|
||||
|
|
@ -323,7 +332,7 @@ const ControlConditionStep: React.FC<ControlConditionStepProps> = ({ state, acti
|
|||
key={`code_${condition.field}_${code.code || codeIndex}_${codeIndex}`}
|
||||
value={code.code || `unknown_${codeIndex}`}
|
||||
>
|
||||
{code.name || code.description || `코드 ${codeIndex + 1}`}
|
||||
{code.name}
|
||||
</SelectItem>
|
||||
);
|
||||
})}
|
||||
|
|
@ -373,7 +382,7 @@ const ControlConditionStep: React.FC<ControlConditionStepProps> = ({ state, acti
|
|||
)}
|
||||
|
||||
{/* 조건 없음 안내 */}
|
||||
{!isLoading && controlConditions.length === 0 && (
|
||||
{!isLoading && fromColumns.length > 0 && toColumns.length > 0 && controlConditions.length === 0 && (
|
||||
<div className="rounded-lg border-2 border-dashed p-8 text-center">
|
||||
<AlertCircle className="text-muted-foreground mx-auto mb-3 h-8 w-8" />
|
||||
<h3 className="mb-2 text-lg font-medium">제어 실행 조건 없음</h3>
|
||||
|
|
@ -395,7 +404,7 @@ const ControlConditionStep: React.FC<ControlConditionStepProps> = ({ state, acti
|
|||
)}
|
||||
|
||||
{/* 컬럼 정보 로드 실패 시 안내 */}
|
||||
{!isLoading && fromColumns.length === 0 && toColumns.length === 0 && controlConditions.length === 0 && (
|
||||
{fromColumns.length === 0 && toColumns.length === 0 && controlConditions.length === 0 && (
|
||||
<div className="rounded-lg border border-yellow-200 bg-yellow-50 p-4">
|
||||
<h4 className="mb-2 text-sm font-medium text-yellow-800">컬럼 정보를 불러올 수 없습니다</h4>
|
||||
<div className="space-y-2 text-sm text-yellow-700">
|
||||
|
|
|
|||
|
|
@ -24,8 +24,7 @@ import {
|
|||
} from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
// API import
|
||||
import { getColumnsFromConnection } from "@/lib/api/multiConnection";
|
||||
// API import (컬럼 로드는 중앙에서 관리)
|
||||
|
||||
// 타입 import
|
||||
import { ColumnInfo, Connection, TableInfo } from "@/lib/types/multiConnection";
|
||||
|
|
@ -40,6 +39,9 @@ interface MultiActionConfigStepProps {
|
|||
toTable?: TableInfo;
|
||||
fromConnection?: Connection;
|
||||
toConnection?: Connection;
|
||||
// 컬럼 정보 (중앙에서 관리) 🔧 추가
|
||||
fromColumns?: ColumnInfo[];
|
||||
toColumns?: ColumnInfo[];
|
||||
// 제어 조건 관련
|
||||
controlConditions: any[];
|
||||
onUpdateControlCondition: (index: number, condition: any) => void;
|
||||
|
|
@ -47,12 +49,14 @@ interface MultiActionConfigStepProps {
|
|||
onAddControlCondition: () => void;
|
||||
// 액션 그룹 관련
|
||||
actionGroups: ActionGroup[];
|
||||
groupsLogicalOperator?: "AND" | "OR";
|
||||
onUpdateActionGroup: (groupId: string, updates: Partial<ActionGroup>) => void;
|
||||
onDeleteActionGroup: (groupId: string) => void;
|
||||
onAddActionGroup: () => void;
|
||||
onAddActionToGroup: (groupId: string) => void;
|
||||
onUpdateActionInGroup: (groupId: string, actionId: string, updates: Partial<SingleAction>) => void;
|
||||
onDeleteActionFromGroup: (groupId: string, actionId: string) => void;
|
||||
onSetGroupsLogicalOperator?: (operator: "AND" | "OR") => void;
|
||||
// 필드 매핑 관련
|
||||
fieldMappings: FieldMapping[];
|
||||
onCreateMapping: (fromField: ColumnInfo, toField: ColumnInfo) => void;
|
||||
|
|
@ -60,6 +64,8 @@ interface MultiActionConfigStepProps {
|
|||
// 네비게이션
|
||||
onNext: () => void;
|
||||
onBack: () => void;
|
||||
// 컬럼 로드 액션
|
||||
onLoadColumns?: () => Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -75,55 +81,41 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
|||
toTable,
|
||||
fromConnection,
|
||||
toConnection,
|
||||
fromColumns = [], // 🔧 중앙에서 관리되는 컬럼 정보
|
||||
toColumns = [], // 🔧 중앙에서 관리되는 컬럼 정보
|
||||
controlConditions,
|
||||
onUpdateControlCondition,
|
||||
onDeleteControlCondition,
|
||||
onAddControlCondition,
|
||||
actionGroups,
|
||||
groupsLogicalOperator = "AND",
|
||||
onUpdateActionGroup,
|
||||
onDeleteActionGroup,
|
||||
onAddActionGroup,
|
||||
onAddActionToGroup,
|
||||
onUpdateActionInGroup,
|
||||
onDeleteActionFromGroup,
|
||||
onSetGroupsLogicalOperator,
|
||||
fieldMappings,
|
||||
onCreateMapping,
|
||||
onDeleteMapping,
|
||||
onNext,
|
||||
onBack,
|
||||
onLoadColumns,
|
||||
}) => {
|
||||
const [fromColumns, setFromColumns] = useState<ColumnInfo[]>([]);
|
||||
const [toColumns, setToColumns] = useState<ColumnInfo[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set(["group_1"])); // 첫 번째 그룹은 기본 열림
|
||||
const [activeTab, setActiveTab] = useState<"control" | "actions" | "mapping">("control"); // 현재 활성 탭
|
||||
|
||||
// 컬럼 정보 로드
|
||||
// 컬럼 로딩 상태 확인
|
||||
const isColumnsLoaded = fromColumns.length > 0 && toColumns.length > 0;
|
||||
|
||||
// 컴포넌트 마운트 시 컬럼 로드
|
||||
useEffect(() => {
|
||||
const loadColumns = async () => {
|
||||
if (!fromConnection || !toConnection || !fromTable || !toTable) {
|
||||
return;
|
||||
if (!isColumnsLoaded && fromConnection && toConnection && fromTable && toTable && onLoadColumns) {
|
||||
console.log("🔄 MultiActionConfigStep: 컬럼 로드 시작");
|
||||
onLoadColumns();
|
||||
}
|
||||
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const [fromCols, toCols] = await Promise.all([
|
||||
getColumnsFromConnection(fromConnection.id, fromTable.tableName),
|
||||
getColumnsFromConnection(toConnection.id, toTable.tableName),
|
||||
]);
|
||||
|
||||
setFromColumns(Array.isArray(fromCols) ? fromCols : []);
|
||||
setToColumns(Array.isArray(toCols) ? toCols : []);
|
||||
} catch (error) {
|
||||
console.error("❌ 컬럼 정보 로드 실패:", error);
|
||||
toast.error("필드 정보를 불러오는데 실패했습니다.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadColumns();
|
||||
}, [fromConnection, toConnection, fromTable, toTable]);
|
||||
}, [isColumnsLoaded, fromConnection?.id, toConnection?.id, fromTable?.tableName, toTable?.tableName]);
|
||||
|
||||
// 그룹 확장/축소 토글
|
||||
const toggleGroupExpansion = (groupId: string) => {
|
||||
|
|
@ -171,13 +163,10 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
|||
group.actions.some((action) => action.actionType === "insert" && action.isEnabled),
|
||||
);
|
||||
|
||||
// 탭 정보
|
||||
// 탭 정보 (컬럼 매핑 탭 제거)
|
||||
const tabs = [
|
||||
{ id: "control" as const, label: "제어 조건", icon: "🎯", description: "전체 제어 실행 조건" },
|
||||
{ id: "actions" as const, label: "액션 설정", icon: "⚙️", description: "액션 그룹 및 실행 조건" },
|
||||
...(hasInsertActions
|
||||
? [{ id: "mapping" as const, label: "컬럼 매핑", icon: "🔗", description: "INSERT 액션 필드 매핑" }]
|
||||
: []),
|
||||
];
|
||||
|
||||
return (
|
||||
|
|
@ -280,10 +269,62 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
|||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 그룹 간 논리 연산자 선택 */}
|
||||
{actionGroups.length > 1 && (
|
||||
<div className="rounded-md border bg-blue-50 p-3">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<h4 className="text-sm font-medium text-blue-900">그룹 간 실행 조건</h4>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
id="groups-and"
|
||||
name="groups-operator"
|
||||
checked={groupsLogicalOperator === "AND"}
|
||||
onChange={() => onSetGroupsLogicalOperator?.("AND")}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<label htmlFor="groups-and" className="text-sm text-blue-800">
|
||||
<span className="font-medium">AND</span> - 모든 그룹의 조건이 참일 때 실행
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
id="groups-or"
|
||||
name="groups-operator"
|
||||
checked={groupsLogicalOperator === "OR"}
|
||||
onChange={() => onSetGroupsLogicalOperator?.("OR")}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<label htmlFor="groups-or" className="text-sm text-blue-800">
|
||||
<span className="font-medium">OR</span> - 하나 이상의 그룹 조건이 참일 때 실행
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 액션 그룹 목록 */}
|
||||
<div className="space-y-4">
|
||||
{actionGroups.map((group, groupIndex) => (
|
||||
<div key={group.id} className="bg-card rounded-lg border">
|
||||
<div key={group.id}>
|
||||
{/* 그룹 간 논리 연산자 표시 (첫 번째 그룹 제외) */}
|
||||
{groupIndex > 0 && (
|
||||
<div className="my-2 flex items-center justify-center">
|
||||
<div
|
||||
className={`rounded px-2 py-1 text-xs font-medium ${
|
||||
groupsLogicalOperator === "AND"
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-orange-100 text-orange-800"
|
||||
}`}
|
||||
>
|
||||
{groupsLogicalOperator}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="bg-card rounded-lg border">
|
||||
{/* 그룹 헤더 */}
|
||||
<Collapsible
|
||||
open={expandedGroups.has(group.id)}
|
||||
|
|
@ -424,19 +465,185 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
|||
</div>
|
||||
|
||||
{/* 액션 조건 설정 */}
|
||||
{isColumnsLoaded ? (
|
||||
<ActionConditionBuilder
|
||||
actionType={action.actionType}
|
||||
fromColumns={fromColumns}
|
||||
toColumns={toColumns}
|
||||
conditions={action.conditions}
|
||||
fieldMappings={action.fieldMappings}
|
||||
fieldMappings={(() => {
|
||||
// 필드값 설정용: FieldValueMapping 타입만 필터링
|
||||
const fieldValueMappings = (action.fieldMappings || []).filter(
|
||||
(mapping) =>
|
||||
mapping.valueType && // valueType이 있고
|
||||
!mapping.fromField && // fromField가 없고
|
||||
!mapping.toField, // toField가 없으면 FieldValueMapping
|
||||
);
|
||||
|
||||
console.log("📋 ActionConditionBuilder에 전달되는 필드값 설정:", {
|
||||
allMappings: action.fieldMappings,
|
||||
filteredFieldValueMappings: fieldValueMappings,
|
||||
});
|
||||
|
||||
return fieldValueMappings;
|
||||
})()}
|
||||
columnMappings={
|
||||
// 컬럼 매핑용: FieldMapping 타입만 필터링
|
||||
(action.fieldMappings || []).filter(
|
||||
(mapping) =>
|
||||
mapping.fromField &&
|
||||
mapping.toField &&
|
||||
mapping.fromField.columnName &&
|
||||
mapping.toField.columnName,
|
||||
)
|
||||
}
|
||||
onConditionsChange={(conditions) =>
|
||||
onUpdateActionInGroup(group.id, action.id, { conditions })
|
||||
}
|
||||
onFieldMappingsChange={(fieldMappings) =>
|
||||
onUpdateActionInGroup(group.id, action.id, { fieldMappings })
|
||||
}
|
||||
onFieldMappingsChange={(newFieldMappings) => {
|
||||
// 필드값 설정만 업데이트, 컬럼 매핑은 유지
|
||||
const existingColumnMappings = (action.fieldMappings || []).filter(
|
||||
(mapping) =>
|
||||
mapping.fromField &&
|
||||
mapping.toField &&
|
||||
mapping.fromField.columnName &&
|
||||
mapping.toField.columnName,
|
||||
);
|
||||
|
||||
console.log("🔄 필드값 설정 업데이트:", {
|
||||
existingColumnMappings,
|
||||
newFieldMappings,
|
||||
combined: [...existingColumnMappings, ...newFieldMappings],
|
||||
});
|
||||
|
||||
onUpdateActionInGroup(group.id, action.id, {
|
||||
fieldMappings: [...existingColumnMappings, ...newFieldMappings],
|
||||
});
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="text-muted-foreground flex items-center justify-center py-4">
|
||||
컬럼 정보를 불러오는 중...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* INSERT 액션일 때만 필드 매핑 UI 표시 */}
|
||||
{action.actionType === "insert" && isColumnsLoaded && (
|
||||
<div className="mt-4 space-y-3">
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between">
|
||||
<h5 className="text-sm font-medium">필드 매핑</h5>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{action.fieldMappings?.length || 0}개 매핑
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* 컬럼 매핑 캔버스 */}
|
||||
<div className="rounded-lg border bg-white p-3">
|
||||
<FieldMappingCanvas
|
||||
fromFields={fromColumns}
|
||||
toFields={toColumns}
|
||||
mappings={
|
||||
// 컬럼 매핑만 FieldMappingCanvas에 전달
|
||||
(action.fieldMappings || []).filter(
|
||||
(mapping) =>
|
||||
mapping.fromField &&
|
||||
mapping.toField &&
|
||||
mapping.fromField.columnName &&
|
||||
mapping.toField.columnName,
|
||||
)
|
||||
}
|
||||
onCreateMapping={(fromField, toField) => {
|
||||
const newMapping = {
|
||||
id: `${fromField.columnName}_to_${toField.columnName}_${Date.now()}`,
|
||||
fromField,
|
||||
toField,
|
||||
isValid: true,
|
||||
validationMessage: undefined,
|
||||
};
|
||||
|
||||
// 기존 필드값 설정은 유지하고 새 컬럼 매핑만 추가
|
||||
const existingFieldValueMappings = (action.fieldMappings || []).filter(
|
||||
(mapping) =>
|
||||
mapping.valueType && // valueType이 있고
|
||||
!mapping.fromField && // fromField가 없고
|
||||
!mapping.toField, // toField가 없으면 FieldValueMapping
|
||||
);
|
||||
|
||||
const existingColumnMappings = (action.fieldMappings || []).filter(
|
||||
(mapping) =>
|
||||
mapping.fromField &&
|
||||
mapping.toField &&
|
||||
mapping.fromField.columnName &&
|
||||
mapping.toField.columnName,
|
||||
);
|
||||
|
||||
onUpdateActionInGroup(group.id, action.id, {
|
||||
fieldMappings: [
|
||||
...existingFieldValueMappings,
|
||||
...existingColumnMappings,
|
||||
newMapping,
|
||||
],
|
||||
});
|
||||
}}
|
||||
onDeleteMapping={(mappingId) => {
|
||||
// 컬럼 매핑만 삭제하고 필드값 설정은 유지
|
||||
const remainingMappings = (action.fieldMappings || []).filter(
|
||||
(mapping) => mapping.id !== mappingId,
|
||||
);
|
||||
|
||||
onUpdateActionInGroup(group.id, action.id, {
|
||||
fieldMappings: remainingMappings,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 매핑되지 않은 필드 처리 옵션 */}
|
||||
<div className="rounded-md border bg-yellow-50 p-3">
|
||||
<h6 className="mb-2 flex items-center gap-1 text-xs font-medium text-yellow-800">
|
||||
<AlertTriangle className="h-3 w-3" />
|
||||
매핑되지 않은 필드 처리
|
||||
</h6>
|
||||
<div className="space-y-2 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
id={`empty-${action.id}`}
|
||||
name={`unmapped-${action.id}`}
|
||||
defaultChecked
|
||||
className="h-3 w-3"
|
||||
/>
|
||||
<label htmlFor={`empty-${action.id}`} className="text-yellow-700">
|
||||
비워두기 (NULL 값)
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
id={`default-${action.id}`}
|
||||
name={`unmapped-${action.id}`}
|
||||
className="h-3 w-3"
|
||||
/>
|
||||
<label htmlFor={`default-${action.id}`} className="text-yellow-700">
|
||||
기본값 사용
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="radio"
|
||||
id={`skip-${action.id}`}
|
||||
name={`unmapped-${action.id}`}
|
||||
className="h-3 w-3"
|
||||
/>
|
||||
<label htmlFor={`skip-${action.id}`} className="text-yellow-700">
|
||||
필드 제외
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -458,90 +665,12 @@ const MultiActionConfigStep: React.FC<MultiActionConfigStepProps> = ({
|
|||
</div>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
||||
{/* 그룹 간 연결선 (마지막 그룹이 아닌 경우) */}
|
||||
{groupIndex < actionGroups.length - 1 && (
|
||||
<div className="flex justify-center py-2">
|
||||
<div className="text-muted-foreground flex items-center gap-2 text-xs">
|
||||
<div className="bg-border h-px w-8"></div>
|
||||
<span>다음 그룹</span>
|
||||
<div className="bg-border h-px w-8"></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "mapping" && hasInsertActions && (
|
||||
<div className="space-y-4">
|
||||
{/* 컬럼 매핑 헤더 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-lg font-medium">컬럼 매핑</h3>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{fieldMappings.length}개 매핑
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-muted-foreground text-sm">INSERT 액션에 필요한 필드들을 매핑하세요</div>
|
||||
</div>
|
||||
|
||||
{/* 컬럼 매핑 캔버스 */}
|
||||
{isLoading ? (
|
||||
<div className="flex h-64 items-center justify-center">
|
||||
<div className="text-muted-foreground">컬럼 정보를 불러오는 중...</div>
|
||||
</div>
|
||||
) : fromColumns.length > 0 && toColumns.length > 0 ? (
|
||||
<div className="rounded-lg border bg-white p-4">
|
||||
<FieldMappingCanvas
|
||||
fromFields={fromColumns}
|
||||
toFields={toColumns}
|
||||
mappings={fieldMappings}
|
||||
onCreateMapping={onCreateMapping}
|
||||
onDeleteMapping={onDeleteMapping}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-64 flex-col items-center justify-center space-y-3 rounded-lg border border-dashed">
|
||||
<AlertTriangle className="text-muted-foreground h-8 w-8" />
|
||||
<div className="text-muted-foreground">컬럼 정보를 찾을 수 없습니다.</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
FROM 컬럼: {fromColumns.length}개, TO 컬럼: {toColumns.length}개
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 매핑되지 않은 필드 처리 옵션 */}
|
||||
<div className="rounded-md border bg-yellow-50 p-4">
|
||||
<h4 className="mb-3 flex items-center gap-2 font-medium text-yellow-800">
|
||||
<AlertTriangle className="h-4 w-4" />
|
||||
매핑되지 않은 필드 처리
|
||||
</h4>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<input type="radio" id="empty" name="unmapped-strategy" defaultChecked className="h-4 w-4" />
|
||||
<label htmlFor="empty" className="text-yellow-700">
|
||||
비워두기 (NULL 또는 빈 값)
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input type="radio" id="default" name="unmapped-strategy" className="h-4 w-4" />
|
||||
<label htmlFor="default" className="text-yellow-700">
|
||||
기본값 사용 (데이터베이스 DEFAULT 값)
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input type="radio" id="skip" name="unmapped-strategy" className="h-4 w-4" />
|
||||
<label htmlFor="skip" className="text-yellow-700">
|
||||
해당 필드 제외 (INSERT 구문에 포함하지 않음)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 하단 네비게이션 */}
|
||||
|
|
|
|||
|
|
@ -59,7 +59,12 @@ const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
|
|||
connectionType={state.connectionType}
|
||||
fromConnection={state.fromConnection}
|
||||
toConnection={state.toConnection}
|
||||
relationshipName={state.relationshipName}
|
||||
description={state.description}
|
||||
diagramId={state.diagramId} // 🔧 수정 모드 감지용
|
||||
onSelectConnection={actions.selectConnection}
|
||||
onSetRelationshipName={actions.setRelationshipName}
|
||||
onSetDescription={actions.setDescription}
|
||||
onNext={() => actions.goToStep(2)}
|
||||
/>
|
||||
);
|
||||
|
|
@ -84,7 +89,11 @@ const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
|
|||
state={state}
|
||||
actions={actions}
|
||||
onBack={() => actions.goToStep(2)}
|
||||
onNext={() => actions.goToStep(4)}
|
||||
onNext={() => {
|
||||
// 4단계로 넘어가기 전에 컬럼 로드
|
||||
actions.loadColumns();
|
||||
actions.goToStep(4);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
|
|
@ -96,20 +105,25 @@ const RightPanel: React.FC<RightPanelProps> = ({ state, actions }) => {
|
|||
toTable={state.toTable}
|
||||
fromConnection={state.fromConnection}
|
||||
toConnection={state.toConnection}
|
||||
fromColumns={state.fromColumns} // 🔧 중앙에서 관리되는 컬럼 정보
|
||||
toColumns={state.toColumns} // 🔧 중앙에서 관리되는 컬럼 정보
|
||||
controlConditions={state.controlConditions}
|
||||
onUpdateControlCondition={actions.updateControlCondition}
|
||||
onDeleteControlCondition={actions.deleteControlCondition}
|
||||
onAddControlCondition={actions.addControlCondition}
|
||||
actionGroups={state.actionGroups}
|
||||
groupsLogicalOperator={state.groupsLogicalOperator}
|
||||
onUpdateActionGroup={actions.updateActionGroup}
|
||||
onDeleteActionGroup={actions.deleteActionGroup}
|
||||
onAddActionGroup={actions.addActionGroup}
|
||||
onAddActionToGroup={actions.addActionToGroup}
|
||||
onUpdateActionInGroup={actions.updateActionInGroup}
|
||||
onDeleteActionFromGroup={actions.deleteActionFromGroup}
|
||||
onSetGroupsLogicalOperator={actions.setGroupsLogicalOperator}
|
||||
fieldMappings={state.fieldMappings}
|
||||
onCreateMapping={actions.createMapping}
|
||||
onDeleteMapping={actions.deleteMapping}
|
||||
onLoadColumns={actions.loadColumns}
|
||||
onNext={() => {
|
||||
// 완료 처리 - 저장 및 상위 컴포넌트 알림
|
||||
actions.saveMappings();
|
||||
|
|
|
|||
|
|
@ -214,10 +214,12 @@ const FieldMappingCanvas: React.FC<FieldMappingCanvasProps> = ({
|
|||
// 매핑 여부 확인
|
||||
const isFieldMapped = useCallback(
|
||||
(field: ColumnInfo, type: "from" | "to") => {
|
||||
return mappings.some((mapping) =>
|
||||
return mappings
|
||||
.filter((mapping) => mapping.fromField && mapping.toField) // 유효한 매핑만 확인
|
||||
.some((mapping) =>
|
||||
type === "from"
|
||||
? mapping.fromField.columnName === field.columnName
|
||||
: mapping.toField.columnName === field.columnName,
|
||||
? mapping.fromField?.columnName === field.columnName
|
||||
: mapping.toField?.columnName === field.columnName,
|
||||
);
|
||||
},
|
||||
[mappings],
|
||||
|
|
|
|||
|
|
@ -1,150 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { CheckCircle, Save } from "lucide-react";
|
||||
|
||||
interface SaveRelationshipDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onSave: (relationshipName: string, description?: string) => void;
|
||||
actionType: "insert" | "update" | "delete" | "upsert";
|
||||
fromTable?: string;
|
||||
toTable?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 💾 관계 저장 다이얼로그
|
||||
* - 관계 이름 입력
|
||||
* - 설명 입력 (선택사항)
|
||||
* - 액션 타입별 제안 이름
|
||||
*/
|
||||
const SaveRelationshipDialog: React.FC<SaveRelationshipDialogProps> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
onSave,
|
||||
actionType,
|
||||
fromTable,
|
||||
toTable,
|
||||
}) => {
|
||||
const [relationshipName, setRelationshipName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
|
||||
// 액션 타입별 제안 이름 생성
|
||||
const generateSuggestedName = () => {
|
||||
if (!fromTable || !toTable) return "";
|
||||
|
||||
const actionMap = {
|
||||
insert: "입력",
|
||||
update: "수정",
|
||||
delete: "삭제",
|
||||
upsert: "병합",
|
||||
};
|
||||
|
||||
return `${fromTable}_${toTable}_${actionMap[actionType]}`;
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (!relationshipName.trim()) return;
|
||||
|
||||
onSave(relationshipName.trim(), description.trim() || undefined);
|
||||
onOpenChange(false);
|
||||
|
||||
// 폼 초기화
|
||||
setRelationshipName("");
|
||||
setDescription("");
|
||||
};
|
||||
|
||||
const handleSuggestName = () => {
|
||||
const suggested = generateSuggestedName();
|
||||
if (suggested) {
|
||||
setRelationshipName(suggested);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Save className="h-5 w-5" />
|
||||
관계 저장
|
||||
</DialogTitle>
|
||||
<DialogDescription>데이터 연결 관계의 이름과 설명을 입력하세요.</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
{/* 관계 이름 */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="relationshipName">관계 이름 *</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="relationshipName"
|
||||
placeholder="예: 사용자_주문_입력"
|
||||
value={relationshipName}
|
||||
onChange={(e) => setRelationshipName(e.target.value)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button variant="outline" size="sm" onClick={handleSuggestName} disabled={!fromTable || !toTable}>
|
||||
제안
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 설명 (선택사항) */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">설명 (선택사항)</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
placeholder="이 관계에 대한 설명을 입력하세요..."
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 정보 요약 */}
|
||||
<div className="bg-muted/50 rounded-lg p-3">
|
||||
<div className="space-y-1 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">액션 타입:</span>
|
||||
<span className="font-medium">{actionType.toUpperCase()}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">소스 테이블:</span>
|
||||
<span className="font-medium">{fromTable || "미선택"}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">대상 테이블:</span>
|
||||
<span className="font-medium">{toTable || "미선택"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={!relationshipName.trim()}>
|
||||
<CheckCircle className="mr-2 h-4 w-4" />
|
||||
저장
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default SaveRelationshipDialog;
|
||||
|
|
@ -89,6 +89,11 @@ export interface DataConnectionState {
|
|||
connectionType: "data_save" | "external_call";
|
||||
currentStep: 1 | 2 | 3 | 4;
|
||||
|
||||
// 관계 정보
|
||||
diagramId?: number; // 🔧 수정 모드 감지용
|
||||
relationshipName?: string;
|
||||
description?: string;
|
||||
|
||||
// 연결 정보
|
||||
fromConnection?: Connection;
|
||||
toConnection?: Connection;
|
||||
|
|
@ -104,6 +109,7 @@ export interface DataConnectionState {
|
|||
|
||||
// 액션 설정 (멀티 액션 지원)
|
||||
actionGroups: ActionGroup[];
|
||||
groupsLogicalOperator?: "AND" | "OR"; // 그룹 간의 논리 연산자
|
||||
|
||||
// 기존 호환성을 위한 필드들 (deprecated)
|
||||
actionType?: "insert" | "update" | "delete" | "upsert";
|
||||
|
|
@ -112,6 +118,8 @@ export interface DataConnectionState {
|
|||
|
||||
// UI 상태
|
||||
selectedMapping?: string;
|
||||
fromColumns?: ColumnInfo[]; // 🔧 FROM 테이블 컬럼 정보 (중앙 관리)
|
||||
toColumns?: ColumnInfo[]; // 🔧 TO 테이블 컬럼 정보 (중앙 관리)
|
||||
isLoading: boolean;
|
||||
validationErrors: ValidationError[];
|
||||
}
|
||||
|
|
@ -121,6 +129,11 @@ export interface DataConnectionActions {
|
|||
// 연결 타입
|
||||
setConnectionType: (type: "data_save" | "external_call") => void;
|
||||
|
||||
// 관계 정보
|
||||
setRelationshipName: (name: string) => void;
|
||||
setDescription: (description: string) => void;
|
||||
setGroupsLogicalOperator: (operator: "AND" | "OR") => void;
|
||||
|
||||
// 단계 진행
|
||||
goToStep: (step: 1 | 2 | 3 | 4) => void;
|
||||
|
||||
|
|
@ -128,6 +141,9 @@ export interface DataConnectionActions {
|
|||
selectConnection: (type: "from" | "to", connection: Connection) => void;
|
||||
selectTable: (type: "from" | "to", table: TableInfo) => void;
|
||||
|
||||
// 컬럼 정보 로드 (중앙 관리)
|
||||
loadColumns: () => Promise<void>;
|
||||
|
||||
// 필드 매핑
|
||||
createMapping: (fromField: ColumnInfo, toField: ColumnInfo) => void;
|
||||
updateMapping: (mappingId: string, updates: Partial<FieldMapping>) => void;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,43 @@
|
|||
import { apiClient } from "./client";
|
||||
|
||||
// 관계명 중복 체크
|
||||
export const checkRelationshipNameDuplicate = async (relationshipName: string, excludeDiagramId?: number) => {
|
||||
try {
|
||||
console.log(`🔍 관계명 중복 체크: "${relationshipName}", 제외 ID: ${excludeDiagramId}`);
|
||||
|
||||
const response = await apiClient.get("/dataflow-diagrams", {
|
||||
params: {
|
||||
searchTerm: relationshipName,
|
||||
page: 1,
|
||||
size: 100, // 충분히 큰 수로 설정
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.data.success) {
|
||||
throw new Error("관계명 중복 체크 실패");
|
||||
}
|
||||
|
||||
const diagrams = response.data.data.diagrams || [];
|
||||
|
||||
// 정확히 일치하는 이름 찾기 (대소문자 구분)
|
||||
const duplicates = diagrams.filter(
|
||||
(diagram: any) =>
|
||||
diagram.diagram_name === relationshipName && (!excludeDiagramId || diagram.diagram_id !== excludeDiagramId),
|
||||
);
|
||||
|
||||
console.log(`✅ 중복 체크 결과: ${duplicates.length}개 중복 발견`);
|
||||
|
||||
return {
|
||||
isDuplicate: duplicates.length > 0,
|
||||
duplicateCount: duplicates.length,
|
||||
duplicateDiagrams: duplicates,
|
||||
};
|
||||
} catch (error: any) {
|
||||
console.error("❌ 관계명 중복 체크 실패:", error);
|
||||
throw new Error("관계명 중복 체크 중 오류가 발생했습니다.");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 저장된 dataflow diagram으로부터 관계 정보를 조회하여 DataConnectionDesigner에서 사용할 수 있는 형태로 변환
|
||||
*/
|
||||
|
|
@ -75,31 +113,22 @@ export const loadDataflowRelationship = async (diagramId: number) => {
|
|||
else if (diagram.relationships && typeof diagram.relationships === "object") {
|
||||
console.log("🔄 다른 구조 감지, relationships 전체를 확인 중:", diagram.relationships);
|
||||
|
||||
// relationships 자체가 데이터인 경우 (레거시 구조)
|
||||
if (
|
||||
diagram.relationships.description ||
|
||||
diagram.relationships.connectionType ||
|
||||
diagram.relationships.fromTable
|
||||
) {
|
||||
relationshipsData = diagram.relationships;
|
||||
console.log("✅ 레거시 구조 감지:", relationshipsData);
|
||||
}
|
||||
// relationships가 빈 객체이거나 예상치 못한 구조인 경우
|
||||
else {
|
||||
console.log("⚠️ 알 수 없는 relationships 구조, 기본값 생성");
|
||||
// 현재 DB에 저장된 구조 처리 (relationships 객체에 모든 데이터가 있음)
|
||||
relationshipsData = {
|
||||
description: "",
|
||||
connectionType: "data_save",
|
||||
fromConnection: { id: 0, name: "메인 데이터베이스 (현재 시스템)" },
|
||||
toConnection: { id: 0, name: "메인 데이터베이스 (현재 시스템)" },
|
||||
fromTable: "",
|
||||
toTable: "",
|
||||
actionType: "insert",
|
||||
controlConditions: [],
|
||||
actionConditions: [],
|
||||
fieldMappings: [],
|
||||
description: diagram.relationships.description || "",
|
||||
connectionType: diagram.relationships.connectionType || "data_save",
|
||||
fromConnection: diagram.relationships.fromConnection || { id: 0, name: "메인 데이터베이스 (현재 시스템)" },
|
||||
toConnection: diagram.relationships.toConnection || { id: 0, name: "메인 데이터베이스 (현재 시스템)" },
|
||||
fromTable: diagram.relationships.fromTable,
|
||||
toTable: diagram.relationships.toTable,
|
||||
actionType: diagram.relationships.actionType || "insert",
|
||||
controlConditions: diagram.relationships.controlConditions || [],
|
||||
actionConditions: diagram.relationships.actionConditions || [],
|
||||
fieldMappings: diagram.relationships.fieldMappings || [],
|
||||
// 🔧 멀티 액션 그룹 데이터 로드
|
||||
actionGroups: diagram.relationships.actionGroups || null,
|
||||
};
|
||||
}
|
||||
console.log("✅ 현재 DB 구조 처리 완료:", relationshipsData);
|
||||
} else {
|
||||
throw new Error("관계 데이터가 없습니다.");
|
||||
}
|
||||
|
|
@ -108,8 +137,9 @@ export const loadDataflowRelationship = async (diagramId: number) => {
|
|||
|
||||
// DataConnectionDesigner에서 사용하는 형태로 변환
|
||||
const loadedData = {
|
||||
diagramId: diagram.diagram_id, // 🔧 수정 모드를 위한 diagramId 추가
|
||||
relationshipName: diagram.diagram_name,
|
||||
description: relationshipsData.description || "",
|
||||
description: relationshipsData.description || diagram.description || "", // 🔧 diagram.description도 확인
|
||||
connectionType: relationshipsData.connectionType || "data_save",
|
||||
fromConnection: relationshipsData.fromConnection || { id: 0, name: "메인 데이터베이스 (현재 시스템)" },
|
||||
toConnection: relationshipsData.toConnection || { id: 0, name: "메인 데이터베이스 (현재 시스템)" },
|
||||
|
|
@ -119,6 +149,8 @@ export const loadDataflowRelationship = async (diagramId: number) => {
|
|||
controlConditions: relationshipsData.controlConditions || [],
|
||||
actionConditions: relationshipsData.actionConditions || [],
|
||||
fieldMappings: relationshipsData.fieldMappings || [],
|
||||
// 🔧 멀티 액션 그룹 데이터 포함
|
||||
actionGroups: relationshipsData.actionGroups,
|
||||
};
|
||||
|
||||
console.log("✨ 변환된 로드 데이터:", loadedData);
|
||||
|
|
@ -141,9 +173,9 @@ export const loadDataflowRelationship = async (diagramId: number) => {
|
|||
}
|
||||
};
|
||||
|
||||
export const saveDataflowRelationship = async (data: any) => {
|
||||
export const saveDataflowRelationship = async (data: any, diagramId?: number) => {
|
||||
try {
|
||||
console.log("💾 임시 저장 방식 사용 - dataflow-diagrams API 활용");
|
||||
console.log("💾 데이터플로우 관계 저장:", { diagramId, isEdit: !!diagramId });
|
||||
|
||||
// dataflow-diagrams API 형식에 맞게 데이터 변환
|
||||
const requestData = {
|
||||
|
|
@ -160,6 +192,8 @@ export const saveDataflowRelationship = async (data: any) => {
|
|||
controlConditions: data.controlConditions,
|
||||
actionConditions: data.actionConditions,
|
||||
description: data.description,
|
||||
// 🔧 멀티 액션 그룹 데이터 추가
|
||||
actionGroups: data.actionGroups,
|
||||
},
|
||||
category: {
|
||||
type: "data-connection",
|
||||
|
|
@ -177,8 +211,10 @@ export const saveDataflowRelationship = async (data: any) => {
|
|||
|
||||
console.log("📡 변환된 요청 데이터:", requestData);
|
||||
|
||||
// dataflow-diagrams API로 저장 (임시 해결책)
|
||||
const response = await apiClient.post("/dataflow-diagrams", requestData);
|
||||
// 수정 모드인 경우 PUT, 신규 생성인 경우 POST
|
||||
const response = diagramId
|
||||
? await apiClient.put(`/dataflow-diagrams/${diagramId}`, requestData)
|
||||
: await apiClient.post("/dataflow-diagrams", requestData);
|
||||
|
||||
console.log("✅ dataflow-diagrams 저장 성공:", response.data);
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,9 @@ export interface ColumnInfo {
|
|||
displayName?: string;
|
||||
dataType: string;
|
||||
webType?: string;
|
||||
inputType?: string; // column_labels의 input_type (코드 타입 판단용)
|
||||
codeCategory?: string; // 코드 카테고리 정보
|
||||
connectionId?: number; // 메인 DB(0) vs 외부 DB 구분
|
||||
isRequired?: boolean;
|
||||
description?: string;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue