리스트 위젯 업데이트

frontend/components/admin/dashboard/widgets/custom-metric/CustomMetricConfigSidebar.tsx

@@ -37,8 +37,13 @@ export default function CustomMetricConfigSidebar({
   const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
   const [customTitle, setCustomTitle] = useState<string>(element.customTitle || element.title || "");
   const [showHeader, setShowHeader] = useState<boolean>(element.showHeader !== false);
+  const [groupByMode, setGroupByMode] = useState<boolean>(element.customMetricConfig?.groupByMode || false);
+  const [groupByDataSource, setGroupByDataSource] = useState<ChartDataSource | undefined>(
+    element.customMetricConfig?.groupByDataSource,
+  );
+  const [groupByQueryColumns, setGroupByQueryColumns] = useState<string[]>([]);
 
-  // 쿼리 실행 결과 처리
+  // 쿼리 실행 결과 처리 (일반 지표용)
   const handleQueryTest = (result: any) => {
     // QueryEditor에서 오는 경우: { success: true, data: { columns: [...], rows: [...] } }
     if (result.success && result.data?.columns) {
@@ -54,6 +59,17 @@ export default function CustomMetricConfigSidebar({
     }
   };
 
+  // 쿼리 실행 결과 처리 (그룹별 카드용)
+  const handleGroupByQueryTest = (result: any) => {
+    if (result.success && result.data?.columns) {
+      setGroupByQueryColumns(result.data.columns);
+    } else if (result.columns && Array.isArray(result.columns)) {
+      setGroupByQueryColumns(result.columns);
+    } else {
+      setGroupByQueryColumns([]);
+    }
+  };
+
   // 메트릭 추가
   const addMetric = () => {
     const newMetric = {
@@ -135,12 +151,20 @@ export default function CustomMetricConfigSidebar({
     setQueryColumns([]);
   };
 
+  // 그룹별 데이터 소스 업데이트
+  const handleGroupByDataSourceUpdate = (updates: Partial<ChartDataSource>) => {
+    const newDataSource = { ...groupByDataSource, ...updates } as ChartDataSource;
+    setGroupByDataSource(newDataSource);
+  };
+
   // 저장
   const handleSave = () => {
     onApply({
       customTitle: customTitle,
       showHeader: showHeader,
       customMetricConfig: {
+        groupByMode,
+        groupByDataSource: groupByMode ? groupByDataSource : undefined,
         metrics,
       },
     });
@@ -250,17 +274,21 @@ export default function CustomMetricConfigSidebar({
             <ApiConfig dataSource={dataSource} onChange={handleDataSourceUpdate} onTestResult={handleQueryTest} />
           )}
 
-          {/* 지표 설정 섹션 - 쿼리 실행 후에만 표시 */}
-          {queryColumns.length > 0 && (
-            <div className="rounded-lg bg-white p-3 shadow-sm">
-              <div className="mb-3 flex items-center justify-between">
-                <div className="text-[10px] font-semibold tracking-wide text-gray-500 uppercase">지표</div>
+          {/* 일반 지표 설정 (항상 표시) */}
+          <div className="rounded-lg bg-white p-3 shadow-sm">
+            <div className="mb-3 flex items-center justify-between">
+              <div className="text-[10px] font-semibold tracking-wide text-gray-500 uppercase">일반 지표</div>
+              {queryColumns.length > 0 && (
                 <Button size="sm" variant="outline" className="h-7 gap-1 text-xs" onClick={addMetric}>
                   <Plus className="h-3 w-3" />
                   추가
                 </Button>
-              </div>
+              )}
+            </div>
 
+            {queryColumns.length === 0 ? (
+              <p className="text-xs text-gray-500">먼저 쿼리를 실행하세요</p>
+            ) : (
               <div className="space-y-2">
                 {metrics.length === 0 ? (
                   <p className="text-xs text-gray-500">추가된 지표가 없습니다</p>
@@ -410,6 +438,65 @@ export default function CustomMetricConfigSidebar({
                   ))
                 )}
               </div>
+            )}
+          </div>
+
+          {/* 그룹별 카드 생성 모드 (항상 표시) */}
+          <div className="rounded-lg bg-white p-3 shadow-sm">
+                <div className="mb-2 text-[10px] font-semibold tracking-wide text-gray-500 uppercase">표시 모드</div>
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <label className="text-xs font-medium text-gray-900">그룹별 카드 생성</label>
+                      <p className="mt-0.5 text-[9px] text-gray-500">
+                        쿼리 결과의 각 행을 개별 카드로 표시
+                      </p>
+                    </div>
+                    <button
+                      onClick={() => {
+                        setGroupByMode(!groupByMode);
+                        if (!groupByMode && !groupByDataSource) {
+                          // 그룹별 모드 활성화 시 기본 데이터 소스 초기화
+                          setGroupByDataSource({ type: "database", connectionType: "current", refreshInterval: 0 });
+                        }
+                      }}
+                      className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+                        groupByMode ? "bg-primary" : "bg-gray-300"
+                      }`}
+                    >
+                      <span
+                        className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                          groupByMode ? "translate-x-5" : "translate-x-0.5"
+                        }`}
+                      />
+                    </button>
+                  </div>
+                  {groupByMode && (
+                    <div className="rounded-md bg-blue-50 p-2 text-[9px] text-blue-700">
+                      <p className="font-medium">💡 사용 방법</p>
+                      <ul className="mt-1 space-y-0.5 pl-3 text-[8px]">
+                        <li>• 첫 번째 컬럼: 카드 제목</li>
+                        <li>• 두 번째 컬럼: 카드 값</li>
+                        <li>• 예: SELECT status, COUNT(*) FROM drivers GROUP BY status</li>
+                        <li>• <strong>아래 별도 쿼리로 설정</strong> (일반 지표와 독립적)</li>
+                      </ul>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+          {/* 그룹별 카드 전용 쿼리 (활성화 시에만 표시) */}
+          {groupByMode && groupByDataSource && (
+            <div className="rounded-lg bg-white p-3 shadow-sm">
+              <div className="mb-2 text-[10px] font-semibold tracking-wide text-gray-500 uppercase">
+                그룹별 카드 쿼리
+              </div>
+              <DatabaseConfig dataSource={groupByDataSource} onChange={handleGroupByDataSourceUpdate} />
+              <QueryEditor
+                dataSource={groupByDataSource}
+                onDataSourceChange={handleGroupByDataSourceUpdate}
+                onQueryTest={handleGroupByQueryTest}
+              />
             </div>
           )}
         </div>