위젯 사이드바 통일

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

@@ -0,0 +1,49 @@
+"use client";
+
+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";
+
+interface CustomMetricSectionProps {
+  queryResult: QueryResult | null;
+  config: CustomMetricConfig;
+  onConfigChange: (updates: Partial<CustomMetricConfig>) => void;
+}
+
+/**
+ * 통계 카드 설정 섹션
+ * - 메트릭 설정, 아이콘, 색상
+ * 
+ * TODO: 상세 설정 UI 추가 필요
+ */
+export function CustomMetricSection({ queryResult, config, onConfigChange }: CustomMetricSectionProps) {
+  // 쿼리 결과가 없으면 안내 메시지 표시
+  if (!queryResult || !queryResult.columns || queryResult.columns.length === 0) {
+    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">
+            먼저 데이터 소스를 설정하고 쿼리를 테스트해주세요.
+          </AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
+  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>
+  );
+}
+