From 05273daa920131768077c867762c554606137be8 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Fri, 14 Nov 2025 11:35:16 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=86=B5?=
 =?UTF-8?q?=EA=B3=84=20=EC=B9=B4=EB=93=9C=20=EC=9C=84=EC=A0=AF=EC=9D=84=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../widgets/CustomMetricTestWidget.tsx        | 25 ++++++++-----------
 .../dashboard/widgets/CustomMetricWidget.tsx  | 23 ++++++-----------
 2 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/frontend/components/dashboard/widgets/CustomMetricTestWidget.tsx b/frontend/components/dashboard/widgets/CustomMetricTestWidget.tsx
index f7d97779..1b78801e 100644
--- a/frontend/components/dashboard/widgets/CustomMetricTestWidget.tsx
+++ b/frontend/components/dashboard/widgets/CustomMetricTestWidget.tsx
@@ -209,10 +209,10 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
 
   if (loading) {
     return (
-      <div className="flex h-full items-center justify-center bg-background">
+      <div className="bg-background flex h-full items-center justify-center">
         <div className="text-center">
           <div className="border-primary mx-auto h-8 w-8 animate-spin rounded-full border-2 border-t-transparent" />
-          <p className="mt-2 text-sm text-muted-foreground">데이터 로딩 중...</p>
+          <p className="text-muted-foreground mt-2 text-sm">데이터 로딩 중...</p>
         </div>
       </div>
     );
@@ -220,12 +220,12 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
 
   if (error) {
     return (
-      <div className="flex h-full items-center justify-center bg-background p-4">
+      <div className="bg-background flex h-full items-center justify-center p-4">
         <div className="text-center">
-          <p className="text-sm text-destructive">⚠️ {error}</p>
+          <p className="text-destructive text-sm">⚠️ {error}</p>
           <button
             onClick={loadData}
-            className="mt-2 rounded bg-destructive/10 px-3 py-1 text-xs text-destructive hover:bg-destructive/20"
+            className="bg-destructive/10 text-destructive hover:bg-destructive/20 mt-2 rounded px-3 py-1 text-xs"
           >
             다시 시도
           </button>
@@ -244,10 +244,10 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
   // 설정이 없으면 안내 화면
   if (!hasDataSource || !hasConfig) {
     return (
-      <div className="flex h-full items-center justify-center bg-background p-4">
+      <div className="bg-background flex h-full items-center justify-center p-4">
         <div className="max-w-xs space-y-2 text-center">
-          <h3 className="text-sm font-bold text-foreground">통계 카드</h3>
-          <div className="space-y-1.5 text-xs text-foreground">
+          <h3 className="text-foreground text-sm font-bold">통계 카드</h3>
+          <div className="text-foreground space-y-1.5 text-xs">
             <p className="font-medium">📊 단일 통계 위젯</p>
             <ul className="space-y-0.5 text-left">
               <li>• 데이터 소스에서 쿼리를 실행합니다</li>
@@ -256,7 +256,7 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
               <li>• COUNT, SUM, AVG, MIN, MAX 지원</li>
             </ul>
           </div>
-          <div className="mt-2 rounded-lg bg-primary/10 p-2 text-[10px] text-primary">
+          <div className="bg-primary/10 text-primary mt-2 rounded-lg p-2 text-[10px]">
             <p className="font-medium">⚙️ 설정 방법</p>
             <p>1. 데이터 탭에서 쿼리 실행</p>
             <p>2. 필터 조건 추가 (선택사항)</p>
@@ -274,7 +274,7 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
 
   // 통계 카드 렌더링 (전체 크기 꽉 차게)
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center rounded-lg border bg-card p-6 text-center shadow-sm">
+    <div className="bg-card flex h-full w-full flex-col items-center justify-center rounded-lg p-6 text-center">
       {/* 제목 */}
       <div className="text-muted-foreground mb-2 text-sm font-medium">{config?.title || "통계"}</div>
 
@@ -283,11 +283,6 @@ export default function CustomMetricTestWidget({ element }: CustomMetricTestWidg
         <span className="text-primary text-4xl font-bold">{formattedValue}</span>
         {config?.unit && <span className="text-muted-foreground text-lg">{config.unit}</span>}
       </div>
-
-      {/* 필터 표시 (디버깅용, 작게) */}
-      {config?.filters && config.filters.length > 0 && (
-        <div className="text-muted-foreground mt-2 text-xs">필터: {config.filters.length}개 적용됨</div>
-      )}
     </div>
   );
 }
diff --git a/frontend/components/dashboard/widgets/CustomMetricWidget.tsx b/frontend/components/dashboard/widgets/CustomMetricWidget.tsx
index 3f3538b4..fcd5593f 100644
--- a/frontend/components/dashboard/widgets/CustomMetricWidget.tsx
+++ b/frontend/components/dashboard/widgets/CustomMetricWidget.tsx
@@ -268,23 +268,14 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
 
   // 통계 카드 렌더링
   return (
-    <div className="flex h-full w-full items-center justify-center bg-background p-4">
-      <div className="flex flex-col items-center justify-center rounded-lg border bg-card p-6 text-center shadow-sm">
-        {/* 제목 */}
-        <div className="text-muted-foreground mb-2 text-sm font-medium">{config?.title || "통계"}</div>
+    <div className="flex h-full w-full flex-col items-center justify-center bg-card p-6 text-center">
+      {/* 제목 */}
+      <div className="text-muted-foreground mb-2 text-sm font-medium">{config?.title || "통계"}</div>
 
-        {/* 값 */}
-        <div className="flex items-baseline gap-1">
-          <span className="text-primary text-4xl font-bold">{formattedValue}</span>
-          {config?.unit && <span className="text-muted-foreground text-lg">{config.unit}</span>}
-        </div>
-
-        {/* 필터 표시 (디버깅용, 작게) */}
-        {config?.filters && config.filters.length > 0 && (
-          <div className="text-muted-foreground mt-2 text-xs">
-            필터: {config.filters.length}개 적용됨
-          </div>
-        )}
+      {/* 값 */}
+      <div className="flex items-baseline gap-1">
+        <span className="text-primary text-4xl font-bold">{formattedValue}</span>
+        {config?.unit && <span className="text-muted-foreground text-lg">{config.unit}</span>}
       </div>
     </div>
   );