From 60090873b325fa01600c1fddbbe14ac87bfda237 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Tue, 14 Oct 2025 15:59:16 +0900
Subject: [PATCH] =?UTF-8?q?=EB=82=B4=EB=B6=80=20db=EB=A1=9C=EB=A7=8C=20?=
 =?UTF-8?q?=EC=9A=94=EC=B2=AD=EC=9D=B4=20=EB=B3=B4=EB=82=B4=EC=A7=80?=
 =?UTF-8?q?=EB=8A=94=20=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/dashboard/CanvasElement.tsx         | 49 ++++++++++++++-----
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/frontend/components/admin/dashboard/CanvasElement.tsx b/frontend/components/admin/dashboard/CanvasElement.tsx
index 43ce5163..f7b765c8 100644
--- a/frontend/components/admin/dashboard/CanvasElement.tsx
+++ b/frontend/components/admin/dashboard/CanvasElement.tsx
@@ -252,26 +252,51 @@ export function CanvasElement({
 
     setIsLoadingData(true);
     try {
-      // console.log('🔄 쿼리 실행 시작:', element.dataSource.query);
+      let result;
 
-      // 실제 API 호출
-      const { dashboardApi } = await import("@/lib/api/dashboard");
-      const result = await dashboardApi.executeQuery(element.dataSource.query);
+      // 외부 DB vs 현재 DB 분기
+      if (element.dataSource.connectionType === "external" && element.dataSource.externalConnectionId) {
+        // 외부 DB
+        const { ExternalDbConnectionAPI } = await import("@/lib/api/externalDbConnection");
+        const externalResult = await ExternalDbConnectionAPI.executeQuery(
+          parseInt(element.dataSource.externalConnectionId),
+          element.dataSource.query,
+        );
 
-      // console.log('✅ 쿼리 실행 결과:', result);
+        if (!externalResult.success) {
+          throw new Error(externalResult.message || "외부 DB 쿼리 실행 실패");
+        }
 
-      setChartData({
-        columns: result.columns || [],
-        rows: result.rows || [],
-        totalRows: result.rowCount || 0,
-        executionTime: 0,
-      });
+        setChartData({
+          columns: externalResult.data?.[0] ? Object.keys(externalResult.data[0]) : [],
+          rows: externalResult.data || [],
+          totalRows: externalResult.data?.length || 0,
+          executionTime: 0,
+        });
+      } else {
+        // 현재 DB
+        const { dashboardApi } = await import("@/lib/api/dashboard");
+        result = await dashboardApi.executeQuery(element.dataSource.query);
+
+        setChartData({
+          columns: result.columns || [],
+          rows: result.rows || [],
+          totalRows: result.rowCount || 0,
+          executionTime: 0,
+        });
+      }
     } catch (error) {
+      console.error("Chart data loading error:", error);
       setChartData(null);
     } finally {
       setIsLoadingData(false);
     }
-  }, [element.dataSource?.query, element.type]);
+  }, [
+    element.dataSource?.query,
+    element.dataSource?.connectionType,
+    element.dataSource?.externalConnectionId,
+    element.type,
+  ]);
 
   // 컴포넌트 마운트 시 및 쿼리 변경 시 데이터 로딩
   useEffect(() => {