제어관리 데이터 저장기능

frontend/components/dataflow/connection/redesigned/RightPanel/ControlConditionStep.tsx

@@ -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;
-      }
-
-      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),
-        ]);
-
-        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]);
+    if (
+      fromConnection &&
+      toConnection &&
+      fromTable &&
+      toTable &&
+      fromColumns.length === 0 &&
+      toColumns.length === 0 &&
+      !isLoading
+    ) {
+      console.log("🔄 ControlConditionStep: 컬럼 로드 시작");
+      actions.loadColumns();
+    }
+  }, [
+    fromConnection?.id,
+    toConnection?.id,
+    fromTable?.tableName,
+    toTable?.tableName,
+    fromColumns.length,
+    toColumns.length,
+    isLoading,
+  ]);
 
   // 코드 타입 컬럼의 코드 로드
   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">