리스트 위젯 제목 한 개만 렌더링

frontend/components/dashboard/widgets/CustomMetricWidget.tsx

@@ -351,7 +351,9 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
               <li>• 선택한 컬럼의 데이터로 지표를 계산합니다</li>
               <li>• COUNT, SUM, AVG, MIN, MAX 등 집계 함수 지원</li>
               <li>• 사용자 정의 단위 설정 가능</li>
-              <li>• <strong>그룹별 카드 생성 모드</strong>로 간편하게 사용 가능</li>
+              <li>
+                • <strong>그룹별 카드 생성 모드</strong>로 간편하게 사용 가능
+              </li>
             </ul>
           </div>
           <div className="mt-2 rounded-lg bg-blue-50 p-2 text-[10px] text-blue-700">
@@ -361,11 +363,7 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
                 ? "SQL 쿼리를 입력하고 실행하세요 (지표 추가 불필요)"
                 : "SQL 쿼리를 입력하고 지표를 추가하세요"}
             </p>
-            {isGroupByMode && (
-              <p className="text-[9px]">
-                💡 첫 번째 컬럼: 카드 제목, 두 번째 컬럼: 카드 값
-              </p>
-            )}
+            {isGroupByMode && <p className="text-[9px]">💡 첫 번째 컬럼: 카드 제목, 두 번째 컬럼: 카드 값</p>}
           </div>
         </div>
       </div>
@@ -386,7 +384,10 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
               const colors = colorMap[colorKey];
 
               return (
-                <div key={`group-${index}`} className={`rounded-lg border ${colors.bg} ${colors.border} p-4 text-center`}>
+                <div
+                  key={`group-${index}`}
+                  className={`rounded-lg border ${colors.bg} ${colors.border} p-4 text-center`}
+                >
                   <div className="text-sm text-gray-600">{card.label}</div>
                   <div className={`mt-2 text-3xl font-bold ${colors.text}`}>{card.value.toLocaleString()}</div>
                 </div>