From 8788b47663aa0774b179a2a75f8ef0cb14096b38 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Mon, 27 Oct 2025 15:46:13 +0900
Subject: [PATCH] =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/dashboard/DashboardViewer.tsx  | 26 ++++++++++++++-----
 .../dashboard/widgets/CustomMetricWidget.tsx  | 18 ++++++-------
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/frontend/components/dashboard/DashboardViewer.tsx b/frontend/components/dashboard/DashboardViewer.tsx
index 176acfb0..4ad23fa8 100644
--- a/frontend/components/dashboard/DashboardViewer.tsx
+++ b/frontend/components/dashboard/DashboardViewer.tsx
@@ -364,6 +364,13 @@ interface ViewerElementProps {
  * - 태블릿 이하: 세로 스택 카드 레이아웃
  */
 function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWidth = 1920 }: ViewerElementProps) {
+  const [isMounted, setIsMounted] = useState(false);
+
+  // 마운트 확인 (Leaflet 지도 초기화 문제 해결)
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   if (isMobile) {
     // 태블릿 이하: 세로 스택 카드 스타일
     return (
@@ -397,7 +404,11 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
           </div>
         )}
         <div className={element.showHeader !== false ? "p-4" : "p-4"} style={{ minHeight: "250px" }}>
-          {element.type === "chart" ? (
+          {!isMounted ? (
+            <div className="flex h-full w-full items-center justify-center">
+              <div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+            </div>
+          ) : element.type === "chart" ? (
             <ChartRenderer element={element} data={data} width={undefined} height={250} />
           ) : (
             renderWidget(element)
@@ -454,16 +465,17 @@ function ViewerElement({ element, data, isLoading, onRefresh, isMobile, canvasWi
           </button>
         </div>
       )}
-      <div
-        className={element.showHeader !== false ? "h-[calc(100%-57px)] w-full" : "h-full w-full"}
-        style={{ minHeight: "300px" }}
-      >
-        {element.type === "chart" ? (
+      <div className={element.showHeader !== false ? "h-[calc(100%-50px)] w-full" : "h-full w-full"}>
+        {!isMounted ? (
+          <div className="flex h-full w-full items-center justify-center">
+            <div className="h-6 w-6 animate-spin rounded-full border-2 border-blue-500 border-t-transparent" />
+          </div>
+        ) : element.type === "chart" ? (
           <ChartRenderer
             element={element}
             data={data}
             width={undefined}
-            height={Math.max(element.size.height - 57, 300)}
+            height={element.showHeader !== false ? element.size.height - 50 : element.size.height}
           />
         ) : (
           renderWidget(element)
diff --git a/frontend/components/dashboard/widgets/CustomMetricWidget.tsx b/frontend/components/dashboard/widgets/CustomMetricWidget.tsx
index 0dba9473..52c8411c 100644
--- a/frontend/components/dashboard/widgets/CustomMetricWidget.tsx
+++ b/frontend/components/dashboard/widgets/CustomMetricWidget.tsx
@@ -374,9 +374,9 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
   }
 
   return (
-    <div className="flex h-full w-full items-center justify-center overflow-hidden bg-white p-4">
+    <div className="flex h-full w-full items-center justify-center overflow-hidden bg-white p-2">
       {/* 콘텐츠 영역 - 스크롤 없이 자동으로 크기 조정 */}
-      <div className="grid h-full w-full gap-3" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))" }}>
+      <div className="grid h-full w-full gap-2" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))" }}>
         {/* 그룹별 카드 (활성화 시) */}
         {isGroupByMode &&
           groupedCards.map((card, index) => {
@@ -388,10 +388,10 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
             return (
               <div
                 key={`group-${index}`}
-                className={`flex flex-col items-center justify-center rounded-lg border ${colors.bg} ${colors.border} p-3`}
+                className={`flex flex-col items-center justify-center rounded-lg border ${colors.bg} ${colors.border} p-2`}
               >
-                <div className="text-xs text-gray-600">{card.label}</div>
-                <div className={`mt-1 text-2xl font-bold ${colors.text}`}>{card.value.toLocaleString()}</div>
+                <div className="text-[10px] text-gray-600">{card.label}</div>
+                <div className={`mt-0.5 text-xl font-bold ${colors.text}`}>{card.value.toLocaleString()}</div>
               </div>
             );
           })}
@@ -404,12 +404,12 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
           return (
             <div
               key={metric.id}
-              className={`flex flex-col items-center justify-center rounded-lg border ${colors.bg} ${colors.border} p-3`}
+              className={`flex flex-col items-center justify-center rounded-lg border ${colors.bg} ${colors.border} p-2`}
             >
-              <div className="text-xs text-gray-600">{metric.label}</div>
-              <div className={`mt-1 text-2xl font-bold ${colors.text}`}>
+              <div className="text-[10px] text-gray-600">{metric.label}</div>
+              <div className={`mt-0.5 text-xl font-bold ${colors.text}`}>
                 {formattedValue}
-                <span className="ml-1 text-base">{metric.unit}</span>
+                <span className="ml-0.5 text-sm">{metric.unit}</span>
               </div>
             </div>
           );