차트 구현 1차 완료(바 차트 작동)

frontend/components/admin/dashboard/charts/ChartRenderer.tsx

@@ -1,14 +1,11 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { DashboardElement, QueryResult } from '../types';
-import { BarChartComponent } from './BarChartComponent';
-import { PieChartComponent } from './PieChartComponent';
-import { LineChartComponent } from './LineChartComponent';
-import { AreaChartComponent } from './AreaChartComponent';
-import { StackedBarChartComponent } from './StackedBarChartComponent';
-import { DonutChartComponent } from './DonutChartComponent';
-import { ComboChartComponent } from './ComboChartComponent';
+import React, { useEffect, useState } from "react";
+import { DashboardElement, QueryResult, ChartData } from "../types";
+import { Chart } from "./Chart";
+import { transformQueryResultToChartData } from "../utils/chartDataTransform";
+import { ExternalDbConnectionAPI } from "@/lib/api/externalDbConnection";
+import { dashboardApi } from "@/lib/api/dashboard";
 
 interface ChartRendererProps {
   element: DashboardElement;
@@ -18,85 +15,140 @@ interface ChartRendererProps {
 }
 
 /**
- * 차트 렌더러 컴포넌트 (단순 버전)
- * - 데이터를 받아서 차트에 그대로 전달
- * - 복잡한 변환 로직 제거
+ * 차트 렌더러 컴포넌트 (D3 기반)
+ * - 데이터 소스에서 데이터 페칭
+ * - QueryResult를 ChartData로 변환
+ * - D3 Chart 컴포넌트에 전달
  */
 export function ChartRenderer({ element, data, width = 250, height = 200 }: ChartRendererProps) {
-  // console.log('🎬 ChartRenderer:', {
-  //   elementId: element.id,
-  //   hasData: !!data,
-  //   dataRows: data?.rows?.length,
-  //   xAxis: element.chartConfig?.xAxis,
-  //   yAxis: element.chartConfig?.yAxis
-  // });
+  const [chartData, setChartData] = useState<ChartData | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-  // 데이터나 설정이 없으면 메시지 표시
-  if (!data || !element.chartConfig?.xAxis || !element.chartConfig?.yAxis) {
+  // 데이터 페칭
+  useEffect(() => {
+    const fetchData = async () => {
+      // 이미 data가 전달된 경우 사용
+      if (data) {
+        const transformed = transformQueryResultToChartData(data, element.chartConfig || {});
+        setChartData(transformed);
+        return;
+      }
+
+      // 데이터 소스가 설정되어 있으면 페칭
+      if (element.dataSource && element.dataSource.query && element.chartConfig) {
+        setIsLoading(true);
+        setError(null);
+
+        try {
+          let queryResult: QueryResult;
+
+          // 현재 DB vs 외부 DB 분기
+          if (element.dataSource.connectionType === "external" && element.dataSource.externalConnectionId) {
+            // 외부 DB
+            const result = await ExternalDbConnectionAPI.executeQuery(
+              parseInt(element.dataSource.externalConnectionId),
+              element.dataSource.query,
+            );
+
+            if (!result.success) {
+              throw new Error(result.message || "외부 DB 쿼리 실행 실패");
+            }
+
+            queryResult = {
+              columns: result.data?.[0] ? Object.keys(result.data[0]) : [],
+              rows: result.data || [],
+              totalRows: result.data?.length || 0,
+              executionTime: 0,
+            };
+          } else {
+            // 현재 DB
+            const result = await dashboardApi.executeQuery(element.dataSource.query);
+            queryResult = {
+              columns: result.columns,
+              rows: result.rows,
+              totalRows: result.rowCount,
+              executionTime: 0,
+            };
+          }
+
+          // ChartData로 변환
+          const transformed = transformQueryResultToChartData(queryResult, element.chartConfig);
+          setChartData(transformed);
+        } catch (err) {
+          const errorMessage = err instanceof Error ? err.message : "데이터 로딩 실패";
+          setError(errorMessage);
+        } finally {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    fetchData();
+
+    // 자동 새로고침 설정 (0이면 수동이므로 interval 설정 안 함)
+    const refreshInterval = element.dataSource?.refreshInterval;
+    if (refreshInterval && refreshInterval > 0) {
+      const interval = setInterval(fetchData, refreshInterval);
+      return () => clearInterval(interval);
+    }
+  }, [
+    element.dataSource?.query,
+    element.dataSource?.connectionType,
+    element.dataSource?.externalConnectionId,
+    element.dataSource?.refreshInterval,
+    element.chartConfig,
+    data,
+  ]);
+
+  // 로딩 중
+  if (isLoading) {
     return (
-      <div className="w-full h-full flex items-center justify-center text-gray-500 text-sm">
+      <div className="flex h-full w-full items-center justify-center text-gray-500">
         <div className="text-center">
-          <div className="text-2xl mb-2">📊</div>
-          <div>데이터를 설정해주세요</div>
-          <div className="text-xs mt-1">⚙️ 버튼을 클릭하여 설정</div>
+          <div className="mx-auto mb-2 h-6 w-6 animate-spin rounded-full border-2 border-blue-600 border-t-transparent" />
+          <div className="text-sm">데이터 로딩 중...</div>
         </div>
       </div>
     );
   }
 
-  // 데이터가 비어있으면
-  if (!data.rows || data.rows.length === 0) {
+  // 에러
+  if (error) {
     return (
-      <div className="w-full h-full flex items-center justify-center text-red-500 text-sm">
+      <div className="flex h-full w-full items-center justify-center text-red-500">
         <div className="text-center">
-          <div className="text-2xl mb-2">⚠️</div>
-          <div>데이터가 없습니다</div>
+          <div className="mb-2 text-2xl">⚠️</div>
+          <div className="text-sm font-medium">오류 발생</div>
+          <div className="mt-1 text-xs">{error}</div>
         </div>
       </div>
     );
   }
 
-  // 데이터를 그대로 전달 (변환 없음!)
-  const chartData = data.rows;
-
-  // console.log('📊 Chart Data:', {
-  //   dataLength: chartData.length,
-  //   firstRow: chartData[0],
-  //   columns: Object.keys(chartData[0] || {})
-  // });
-
-  // 차트 공통 props
-  const chartProps = {
-    data: chartData,
-    config: element.chartConfig,
-    width: width - 20,
-    height: height - 60,
-  };
-
-  // 차트 타입에 따른 렌더링
-  switch (element.subtype) {
-    case 'bar':
-      return <BarChartComponent {...chartProps} />;
-    case 'pie':
-      return <PieChartComponent {...chartProps} />;
-    case 'line':
-      return <LineChartComponent {...chartProps} />;
-    case 'area':
-      return <AreaChartComponent {...chartProps} />;
-    case 'stacked-bar':
-      return <StackedBarChartComponent {...chartProps} />;
-    case 'donut':
-      return <DonutChartComponent {...chartProps} />;
-    case 'combo':
-      return <ComboChartComponent {...chartProps} />;
-    default:
-      return (
-        <div className="w-full h-full flex items-center justify-center text-gray-500 text-sm">
-          <div className="text-center">
-            <div className="text-2xl mb-2">❓</div>
-            <div>지원하지 않는 차트 타입</div>
-          </div>
+  // 데이터나 설정이 없으면
+  if (!chartData || !element.chartConfig?.xAxis || !element.chartConfig?.yAxis) {
+    return (
+      <div className="flex h-full w-full items-center justify-center text-gray-500">
+        <div className="text-center">
+          <div className="mb-2 text-2xl">📊</div>
+          <div className="text-sm">데이터를 설정해주세요</div>
+          <div className="mt-1 text-xs">⚙️ 버튼을 클릭하여 설정</div>
         </div>
-      );
+      </div>
+    );
   }
+
+  // D3 차트 렌더링
+  return (
+    <div className="flex h-full w-full items-center justify-center bg-white p-2">
+      <Chart
+        chartType={element.subtype}
+        data={chartData}
+        config={element.chartConfig}
+        width={width - 20}
+        height={height - 20}
+      />
+    </div>
+  );
 }