테스트 프로젝트 테이블 생성 및 오류들 수정

frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx

@@ -6,7 +6,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Switch } from "@/components/ui/switch";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Check, ChevronsUpDown, Search, Info, Settings } from "lucide-react";
+import { Check, ChevronsUpDown, Search, Info, Settings, FileText, Table, Layers } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { ComponentData, ButtonDataflowConfig } from "@/types/screen";
 import { apiClient } from "@/lib/api/client";
@@ -111,16 +111,38 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
       const response = await apiClient.get(`/test-button-dataflow/diagrams/${diagramId}/relationships`);
 
       if (response.data.success && Array.isArray(response.data.data)) {
-        const relationshipList = response.data.data.map((rel: any) => ({
-          id: rel.id,
-          name: rel.name || `${rel.sourceTable} → ${rel.targetTable}`,
-          sourceTable: rel.sourceTable,
-          targetTable: rel.targetTable,
-          category: rel.category || "data-save",
-        }));
+        console.log("🔍 백엔드에서 받은 관계 데이터:", response.data.data);
+
+        const relationshipList = response.data.data.map((rel: any) => {
+          console.log("🔍 개별 관계 데이터:", rel);
+
+          // 여러 가지 가능한 필드명 시도 (백엔드 로그 기준으로 수정)
+          const relationshipName =
+            rel.relationshipName || // 백엔드에서 이 필드 사용
+            rel.name ||
+            rel.relationship_name ||
+            rel.label ||
+            rel.title ||
+            rel.description ||
+            `${rel.fromTable || rel.sourceTable || rel.source_table} → ${rel.toTable || rel.targetTable || rel.target_table}`;
+
+          const sourceTable = rel.fromTable || rel.sourceTable || rel.source_table || "Unknown"; // fromTable 우선
+          const targetTable = rel.toTable || rel.targetTable || rel.target_table || "Unknown"; // toTable 우선
+
+          const mappedRel = {
+            id: rel.id,
+            name: relationshipName,
+            sourceTable,
+            targetTable,
+            category: rel.category || rel.type || "data-save",
+          };
+
+          console.log("🔍 매핑된 관계 데이터:", mappedRel);
+          return mappedRel;
+        });
 
         setRelationships(relationshipList);
-        console.log(`✅ 관계 ${relationshipList.length}개 로딩 완료`);
+        console.log(`✅ 관계 ${relationshipList.length}개 로딩 완료:`, relationshipList);
       }
     } catch (error) {
       console.error("❌ 관계 목록 로딩 실패:", error);
@@ -173,6 +195,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
       close: "닫기",
       popup: "팝업",
       navigate: "페이지 이동",
+      control: "제어",
     };
     return displayNames[actionType] || actionType;
   };
@@ -215,6 +238,50 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
       </div>
 
       {/* 🔥 제어관리가 활성화된 경우에만 설정 표시 */}
+      {config.enableDataflowControl && (
+        <>
+          {/* 🔥 제어 데이터 소스 선택 */}
+          <div className="space-y-3">
+            <Label className="text-sm font-medium">📊 제어 데이터 소스</Label>
+            <Select
+              value={dataflowConfig.controlDataSource || "form"}
+              onValueChange={(value) => onUpdateProperty("webTypeConfig.dataflowConfig.controlDataSource", value)}
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="제어 데이터 소스 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="form">
+                  <div className="flex items-center space-x-2">
+                    <FileText className="h-4 w-4" />
+                    <span>폼 데이터 기반</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="table-selection">
+                  <div className="flex items-center space-x-2">
+                    <Table className="h-4 w-4" />
+                    <span>테이블 선택 기반</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="both">
+                  <div className="flex items-center space-x-2">
+                    <Layers className="h-4 w-4" />
+                    <span>폼 + 테이블 선택</span>
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-xs text-gray-500">
+              {dataflowConfig.controlDataSource === "form" && "현재 폼의 입력값으로 조건을 체크합니다"}
+              {dataflowConfig.controlDataSource === "table-selection" &&
+                "테이블에서 선택된 항목의 데이터로 조건을 체크합니다"}
+              {dataflowConfig.controlDataSource === "both" && "폼 데이터와 선택된 항목 데이터를 모두 사용합니다"}
+              {!dataflowConfig.controlDataSource && "폼 데이터를 기본으로 사용합니다"}
+            </p>
+          </div>
+        </>
+      )}
+
       {config.enableDataflowControl && (
         <div className="space-y-6 border-l-2 border-blue-200 pl-4">
           {/* 현재 액션 정보 (간소화) */}