통계 카드 작동하도록 고침

frontend/components/admin/dashboard/WidgetConfigSidebar.tsx

@@ -144,7 +144,7 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
   const [chartConfig, setChartConfig] = useState<ChartConfig>({});
 
   // 커스텀 메트릭 설정
-  const [customMetricConfig, setCustomMetricConfig] = useState<CustomMetricConfig>({ metrics: [] });
+  const [customMetricConfig, setCustomMetricConfig] = useState<CustomMetricConfig>({});
 
   // 사이드바 열릴 때 초기화
   useEffect(() => {
@@ -175,7 +175,7 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
       setChartConfig(element.chartConfig || {});
 
       // 커스텀 메트릭 설정 초기화
-      setCustomMetricConfig(element.customMetricConfig || { metrics: [] });
+      setCustomMetricConfig(element.customMetricConfig || {});
     } else if (!isOpen) {
       // 사이드바 닫힐 때 초기화
       setCustomTitle("");
@@ -194,7 +194,7 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
         cardColumns: 3,
       });
       setChartConfig({});
-      setCustomMetricConfig({ metrics: [] });
+      setCustomMetricConfig({});
     }
   }, [isOpen, element]);
 
@@ -336,6 +336,12 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
         : {}),
     };
 
+    console.log("🔧 [WidgetConfigSidebar] handleApply 호출:", {
+      subtype: element.subtype,
+      customMetricConfig,
+      updatedElement,
+    });
+
     onApply(updatedElement);
     onClose();
   }, [
@@ -431,9 +437,7 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
           <TabsContent value="data" className="mt-0 flex-1 overflow-y-auto p-3">
             <div className="space-y-3">
               {/* 데이터 소스 선택 - 단일 데이터 소스 위젯에만 표시 */}
-              {!["map-summary-v2", "chart", "list-v2", "custom-metric-v2", "risk-alert-v2"].includes(
-                element.subtype,
-              ) && (
+              {!["map-summary-v2", "chart", "risk-alert-v2"].includes(element.subtype) && (
                 <div className="bg-background rounded-lg p-3 shadow-sm">
                   <Label className="mb-2 block text-xs font-semibold">데이터 소스</Label>
 
@@ -478,9 +482,9 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
               )}
 
               {/* 다중 데이터 소스 설정 */}
-              {["map-summary-v2", "chart", "list-v2", "custom-metric-v2", "risk-alert-v2"].includes(
-                element.subtype,
-              ) && <MultiDataSourceConfig dataSources={dataSources} onChange={handleDataSourcesChange} />}
+              {["map-summary-v2", "chart", "risk-alert-v2"].includes(element.subtype) && (
+                <MultiDataSourceConfig dataSources={dataSources} onChange={handleDataSourcesChange} />
+              )}
 
               {/* 위젯별 커스텀 섹션 */}
               {element.subtype === "list-v2" && (

frontend/components/admin/dashboard/types.ts

@@ -380,15 +380,18 @@ export interface YardManagementConfig {
 
 // 사용자 커스텀 카드 설정
 export interface CustomMetricConfig {
-  groupByMode?: boolean; // 그룹별 카드 생성 모드 (기본: false)
-  groupByDataSource?: ChartDataSource; // 그룹별 카드 전용 데이터 소스 (선택사항)
-  metrics: Array<{
-    id: string; // 고유 ID
-    field: string; // 집계할 컬럼명
-    label: string; // 표시할 라벨
-    aggregation: "count" | "sum" | "avg" | "min" | "max"; // 집계 함수
-    unit: string; // 단위 (%, 건, 일, km, 톤 등)
-    color: "indigo" | "green" | "blue" | "purple" | "orange" | "gray";
-    decimals: number; // 소수점 자릿수
+  // 단일 통계 카드 설정
+  valueColumn?: string; // 계산할 컬럼명
+  aggregation?: "sum" | "avg" | "count" | "min" | "max"; // 계산 방식
+  title?: string; // 카드 제목
+  unit?: string; // 표시 단위 (원, 건, % 등)
+  color?: "indigo" | "green" | "blue" | "purple" | "orange" | "gray"; // 카드 색상
+  decimals?: number; // 소수점 자릿수 (기본: 0)
+
+  // 필터 조건
+  filters?: Array<{
+    column: string; // 필터 컬럼명
+    operator: "=" | "!=" | ">" | "<" | ">=" | "<=" | "contains" | "not_contains"; // 조건 연산자
+    value: string; // 비교값
   }>;
 }

frontend/components/admin/dashboard/widget-sections/CustomMetricSection.tsx

@@ -4,7 +4,10 @@ import React from "react";
 import { CustomMetricConfig, QueryResult } from "../types";
 import { Label } from "@/components/ui/label";
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { AlertCircle } from "lucide-react";
+import { AlertCircle, Plus, X } from "lucide-react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 
 interface CustomMetricSectionProps {
   queryResult: QueryResult | null;
@@ -14,36 +17,244 @@ interface CustomMetricSectionProps {
 
 /**
  * 통계 카드 설정 섹션
- * - 메트릭 설정, 아이콘, 색상
- * 
- * TODO: 상세 설정 UI 추가 필요
+ * - 쿼리 결과를 받아서 어떻게 통계를 낼지 설정
+ * - 컬럼 선택, 계산 방식(합계/평균/개수 등), 표시 방식
+ * - 필터 조건 추가 가능
  */
 export function CustomMetricSection({ queryResult, config, onConfigChange }: CustomMetricSectionProps) {
-  // 쿼리 결과가 없으면 안내 메시지 표시
+  console.log("⚙️ [CustomMetricSection] 렌더링:", { config, queryResult });
+
+  // 초기값 설정 (aggregation이 없으면 기본값 "sum" 설정)
+  React.useEffect(() => {
+    if (queryResult && queryResult.columns && queryResult.columns.length > 0 && !config.aggregation) {
+      console.log("🔧 기본 aggregation 설정: sum");
+      onConfigChange({ aggregation: "sum" });
+    }
+  }, [queryResult, config.aggregation, onConfigChange]);
+
+  // 쿼리 결과가 없으면 안내 메시지
   if (!queryResult || !queryResult.columns || queryResult.columns.length === 0) {
     return (
-      <div className="rounded-lg bg-background p-3 shadow-sm">
+      <div className="bg-background rounded-lg p-3 shadow-sm">
         <Label className="mb-2 block text-xs font-semibold">통계 카드 설정</Label>
         <Alert>
           <AlertCircle className="h-4 w-4" />
           <AlertDescription className="text-xs">
-            먼저 데이터 소스를 설정하고 쿼리를 테스트해주세요.
+            먼저 데이터 소스 탭에서 쿼리를 실행하고 결과를 확인해주세요.
           </AlertDescription>
         </Alert>
       </div>
     );
   }
 
+  // 필터 추가
+  const addFilter = () => {
+    const newFilters = [
+      ...(config.filters || []),
+      { column: queryResult.columns[0] || "", operator: "=" as const, value: "" },
+    ];
+    onConfigChange({ filters: newFilters });
+  };
+
+  // 필터 제거
+  const removeFilter = (index: number) => {
+    const newFilters = [...(config.filters || [])];
+    newFilters.splice(index, 1);
+    onConfigChange({ filters: newFilters });
+  };
+
+  // 필터 업데이트
+  const updateFilter = (index: number, field: string, value: string) => {
+    const newFilters = [...(config.filters || [])];
+    newFilters[index] = { ...newFilters[index], [field]: value };
+    onConfigChange({ filters: newFilters });
+  };
+
+  // 통계 설정
   return (
-    <div className="rounded-lg bg-background p-3 shadow-sm">
-      <Label className="mb-2 block text-xs font-semibold">통계 카드 설정</Label>
-      <Alert>
-        <AlertCircle className="h-4 w-4" />
-        <AlertDescription className="text-xs">
-          통계 카드 상세 설정 UI는 추후 추가 예정입니다.
-        </AlertDescription>
-      </Alert>
+    <div className="bg-background space-y-4 rounded-lg p-3 shadow-sm">
+      <div>
+        <Label className="mb-2 block text-xs font-semibold">통계 카드 설정</Label>
+        <p className="text-muted-foreground text-xs">쿼리 결과를 바탕으로 통계를 계산하고 표시합니다</p>
+      </div>
+
+      {/* 1. 필터 조건 (선택사항) */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <Label className="text-xs font-medium">필터 조건 (선택사항)</Label>
+          <Button onClick={addFilter} variant="outline" size="sm" className="h-7 gap-1 text-xs">
+            <Plus className="h-3 w-3" />
+            필터 추가
+          </Button>
+        </div>
+
+        {config.filters && config.filters.length > 0 ? (
+          <div className="space-y-2">
+            {config.filters.map((filter, index) => (
+              <div key={index} className="bg-muted/50 flex items-center gap-2 rounded-md border p-2">
+                {/* 컬럼 선택 */}
+                <Select value={filter.column} onValueChange={(value) => updateFilter(index, "column", value)}>
+                  <SelectTrigger className="h-8 flex-1 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {queryResult.columns.map((col) => (
+                      <SelectItem key={col} value={col} className="text-xs">
+                        {col}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+
+                {/* 연산자 선택 */}
+                <Select value={filter.operator} onValueChange={(value) => updateFilter(index, "operator", value)}>
+                  <SelectTrigger className="h-8 w-[100px] text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="=" className="text-xs">
+                      같음 (=)
+                    </SelectItem>
+                    <SelectItem value="!=" className="text-xs">
+                      다름 (≠)
+                    </SelectItem>
+                    <SelectItem value=">" className="text-xs">
+                      큼 (&gt;)
+                    </SelectItem>
+                    <SelectItem value="<" className="text-xs">
+                      작음 (&lt;)
+                    </SelectItem>
+                    <SelectItem value=">=" className="text-xs">
+                      크거나 같음 (≥)
+                    </SelectItem>
+                    <SelectItem value="<=" className="text-xs">
+                      작거나 같음 (≤)
+                    </SelectItem>
+                    <SelectItem value="contains" className="text-xs">
+                      포함
+                    </SelectItem>
+                    <SelectItem value="not_contains" className="text-xs">
+                      미포함
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+
+                {/* 값 입력 */}
+                <Input
+                  value={filter.value}
+                  onChange={(e) => updateFilter(index, "value", e.target.value)}
+                  placeholder="값"
+                  className="h-8 flex-1 text-xs"
+                />
+
+                {/* 삭제 버튼 */}
+                <Button onClick={() => removeFilter(index)} variant="ghost" size="icon" className="h-8 w-8">
+                  <X className="h-3 w-3" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-muted-foreground text-xs">필터 없음 (전체 데이터 사용)</p>
+        )}
+      </div>
+
+      {/* 2. 계산할 컬럼 선택 */}
+      <div className="space-y-2">
+        <Label className="text-xs font-medium">계산 컬럼</Label>
+        <Select value={config.valueColumn || ""} onValueChange={(value) => onConfigChange({ valueColumn: value })}>
+          <SelectTrigger className="h-9 text-xs">
+            <SelectValue placeholder="컬럼 선택" />
+          </SelectTrigger>
+          <SelectContent>
+            {queryResult.columns.map((col) => (
+              <SelectItem key={col} value={col} className="text-xs">
+                {col}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 3. 계산 방식 선택 */}
+      <div className="space-y-2">
+        <Label className="text-xs font-medium">계산 방식</Label>
+        <Select
+          value={config.aggregation || "sum"}
+          onValueChange={(value) => {
+            console.log("📐 계산 방식 변경:", value);
+            onConfigChange({ aggregation: value as "sum" | "avg" | "count" | "min" | "max" });
+          }}
+        >
+          <SelectTrigger className="h-9 text-xs">
+            <SelectValue placeholder="계산 방식" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="sum" className="text-xs">
+              합계 (SUM)
+            </SelectItem>
+            <SelectItem value="avg" className="text-xs">
+              평균 (AVG)
+            </SelectItem>
+            <SelectItem value="count" className="text-xs">
+              개수 (COUNT)
+            </SelectItem>
+            <SelectItem value="min" className="text-xs">
+              최소값 (MIN)
+            </SelectItem>
+            <SelectItem value="max" className="text-xs">
+              최대값 (MAX)
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 4. 카드 제목 */}
+      <div className="space-y-2">
+        <Label className="text-xs font-medium">카드 제목</Label>
+        <Input
+          value={config.title || ""}
+          onChange={(e) => onConfigChange({ title: e.target.value })}
+          placeholder="예: 총 매출액"
+          className="h-9 text-xs"
+        />
+      </div>
+
+      {/* 5. 표시 단위 (선택사항) */}
+      <div className="space-y-2">
+        <Label className="text-xs font-medium">표시 단위 (선택사항)</Label>
+        <Input
+          value={config.unit || ""}
+          onChange={(e) => onConfigChange({ unit: e.target.value })}
+          placeholder="예: 원, 건, %"
+          className="h-9 text-xs"
+        />
+      </div>
+
+      {/* 미리보기 */}
+      {config.valueColumn && config.aggregation && (
+        <div className="bg-muted/50 space-y-1 rounded-md border p-3">
+          <p className="text-muted-foreground text-xs font-semibold">설정 미리보기</p>
+
+          {/* 필터 조건 표시 */}
+          {config.filters && config.filters.length > 0 && (
+            <div className="space-y-1">
+              <p className="text-xs font-medium">필터:</p>
+              {config.filters.map((filter, idx) => (
+                <p key={idx} className="text-muted-foreground text-xs">
+                  · {filter.column} {filter.operator} &quot;{filter.value}&quot;
+                </p>
+              ))}
+            </div>
+          )}
+
+          {/* 계산 표시 */}
+          <p className="text-xs font-medium">
+            {config.title || "통계 제목"}: {config.aggregation?.toUpperCase()}({config.valueColumn})
+            {config.unit ? ` ${config.unit}` : ""}
+          </p>
+        </div>
+      )}
     </div>
   );
 }
-