From 14d079b34fb93e759fc4f195d5b5563448f6145a Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Wed, 15 Oct 2025 10:14:10 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B8=B0=ED=83=80=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=EC=82=AC=ED=95=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/dashboard/ChartConfigPanel.tsx      | 45 ++++---------------
 .../admin/dashboard/ElementConfigModal.tsx    |  7 +--
 2 files changed, 12 insertions(+), 40 deletions(-)

diff --git a/frontend/components/admin/dashboard/ChartConfigPanel.tsx b/frontend/components/admin/dashboard/ChartConfigPanel.tsx
index 297a37da..a7649c8a 100644
--- a/frontend/components/admin/dashboard/ChartConfigPanel.tsx
+++ b/frontend/components/admin/dashboard/ChartConfigPanel.tsx
@@ -10,7 +10,7 @@ import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Separator } from "@/components/ui/separator";
-import { Settings, TrendingUp, AlertCircle } from "lucide-react";
+import { TrendingUp, AlertCircle } from "lucide-react";
 
 interface ChartConfigPanelProps {
   config?: ChartConfig;
@@ -86,25 +86,6 @@ export function ChartConfigPanel({
                 <div className="mb-2 text-gray-600">총 {queryResult.totalRows}개 데이터 중 첫 번째 행:</div>
                 <pre className="overflow-x-auto text-gray-800">{JSON.stringify(sampleData, null, 2)}</pre>
               </div>
-
-              {/* 컬럼 타입 정보 */}
-              {Object.keys(columnTypes).length > 0 && (
-                <div className="mt-3">
-                  <div className="mb-2 text-xs font-medium text-gray-700">컬럼 타입 분석:</div>
-                  <div className="flex flex-wrap gap-2">
-                    {availableColumns.map((col) => {
-                      const type = columnTypes[col];
-                      const isComplex = type === "object" || type === "array";
-                      return (
-                        <Badge key={col} variant={isComplex ? "destructive" : "secondary"} className="text-xs">
-                          {col}: {type}
-                          {isComplex && " ⚠️"}
-                        </Badge>
-                      );
-                    })}
-                  </div>
-                </div>
-              )}
             </Card>
           )}
 
@@ -159,7 +140,6 @@ export function ChartConfigPanel({
               </SelectTrigger>
               <SelectContent>
                 {simpleColumns.map((col) => {
-                  const type = columnTypes[col] || "unknown";
                   const preview = sampleData[col];
                   const previewText =
                     preview !== undefined && preview !== null
@@ -170,13 +150,8 @@ export function ChartConfigPanel({
 
                   return (
                     <SelectItem key={col} value={col}>
-                      <span className="flex items-center gap-2">
-                        <span>{col}</span>
-                        <Badge variant="outline" className="text-xs">
-                          {type}
-                        </Badge>
-                        {previewText && <span className="text-xs text-gray-500">(예: {previewText})</span>}
-                      </span>
+                      {col}
+                      {previewText && <span className="ml-2 text-xs text-gray-500">(예: {previewText})</span>}
                     </SelectItem>
                   );
                 })}
@@ -237,9 +212,6 @@ export function ChartConfigPanel({
                           />
                           <Label className="flex-1 cursor-pointer text-sm font-normal">
                             <span className="font-medium">{col}</span>
-                            <Badge variant="outline" className="ml-2 bg-green-100 text-xs">
-                              number
-                            </Badge>
                             {sampleData[col] !== undefined && (
                               <span className="ml-2 text-xs text-gray-600">(예: {sampleData[col]})</span>
                             )}
@@ -261,7 +233,6 @@ export function ChartConfigPanel({
                         const isSelected = Array.isArray(currentConfig.yAxis)
                           ? currentConfig.yAxis.includes(col)
                           : currentConfig.yAxis === col;
-                        const type = columnTypes[col];
 
                         return (
                           <div key={col} className="flex items-center gap-2 rounded p-2 hover:bg-gray-50">
@@ -290,9 +261,6 @@ export function ChartConfigPanel({
                             />
                             <Label className="flex-1 cursor-pointer text-sm font-normal">
                               {col}
-                              <Badge variant="outline" className="ml-2 text-xs">
-                                {type}
-                              </Badge>
                               {sampleData[col] !== undefined && (
                                 <span className="ml-2 text-xs text-gray-500">
                                   (예: {String(sampleData[col]).substring(0, 30)})
@@ -343,13 +311,16 @@ export function ChartConfigPanel({
               </SelectContent>
             </Select>
             <p className="text-xs text-gray-500">
-              집계 함수는 현재 쿼리 결과에 적용되지 않습니다. SQL 쿼리에서 직접 집계하는 것을 권장합니다.
+              💡 그룹핑 필드와 함께 사용하면 자동으로 데이터를 집계합니다. (예: 부서별 개수, 월별 합계)
             </p>
           </div>
 
           {/* 그룹핑 필드 (선택사항) */}
           <div className="space-y-2">
-            <Label>그룹핑 필드 (선택사항)</Label>
+            <Label>
+              그룹핑 필드 (선택사항)
+              <span className="ml-2 text-xs text-gray-500">(같은 값끼리 묶어서 집계)</span>
+            </Label>
             <Select
               value={currentConfig.groupBy || undefined}
               onValueChange={(value) => updateConfig({ groupBy: value })}
diff --git a/frontend/components/admin/dashboard/ElementConfigModal.tsx b/frontend/components/admin/dashboard/ElementConfigModal.tsx
index ccf1e94e..25371b86 100644
--- a/frontend/components/admin/dashboard/ElementConfigModal.tsx
+++ b/frontend/components/admin/dashboard/ElementConfigModal.tsx
@@ -7,7 +7,6 @@ import { ChartConfigPanel } from "./ChartConfigPanel";
 import { DataSourceSelector } from "./data-sources/DataSourceSelector";
 import { DatabaseConfig } from "./data-sources/DatabaseConfig";
 import { ApiConfig } from "./data-sources/ApiConfig";
-import { validateDataSource } from "./data-sources/dataSourceUtils";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Progress } from "@/components/ui/progress";
@@ -58,6 +57,10 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
         refreshInterval: 0,
       });
     }
+
+    // 데이터 소스 변경 시 쿼리 결과와 차트 설정 초기화
+    setQueryResult(null);
+    setChartConfig({});
   }, []);
 
   // 데이터 소스 업데이트
@@ -196,8 +199,6 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
                 ) : (
                   <div className="flex h-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8 text-center">
                     <div>
-                      <div className="mb-2 text-4xl">📊</div>
-                      <div className="text-sm font-medium text-gray-700">쿼리를 실행하세요</div>
                       <div className="mt-1 text-xs text-gray-500">데이터를 가져온 후 차트 설정이 표시됩니다</div>
                     </div>
                   </div>