From e1c40b23fb1a6529f61bb0c9b5ac3ff107dff14f Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Tue, 28 Oct 2025 15:36:37 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BB=A4=EC=8A=A4=ED=85=80=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EB=B0=B0=EC=B9=98=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/widgets/CustomMetricWidget.tsx  | 75 ++++++++++---------
 1 file changed, 39 insertions(+), 36 deletions(-)

diff --git a/frontend/components/dashboard/widgets/CustomMetricWidget.tsx b/frontend/components/dashboard/widgets/CustomMetricWidget.tsx
index 90d763d0..9c23c714 100644
--- a/frontend/components/dashboard/widgets/CustomMetricWidget.tsx
+++ b/frontend/components/dashboard/widgets/CustomMetricWidget.tsx
@@ -373,50 +373,53 @@ export default function CustomMetricWidget({ element }: CustomMetricWidgetProps)
     );
   }
 
+  // 위젯 높이에 따라 레이아웃 결정 (세로 1칸이면 가로, 2칸 이상이면 세로)
+  // 실제 측정된 1칸 높이: 119px
+  const isHorizontalLayout = element?.size?.height && element.size.height <= 130; // 1칸 여유 (119px + 약간의 마진)
+
   return (
-    <div className="flex h-full w-full items-center justify-center overflow-hidden bg-white p-1">
-      {/* 콘텐츠 영역 - 스크롤 없이 자동으로 크기 조정 */}
-      <div className="grid h-full w-full gap-1" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(35px, 1fr))" }}>
-        {/* 그룹별 카드 (활성화 시) */}
-        {isGroupByMode &&
-          groupedCards.map((card, index) => {
-            // 색상 순환 (6가지 색상)
-            const colorKeys = Object.keys(colorMap) as Array<keyof typeof colorMap>;
-            const colorKey = colorKeys[index % colorKeys.length];
-            const colors = colorMap[colorKey];
-
-            return (
-              <div
-                key={`group-${index}`}
-                className={`flex flex-col items-center justify-center rounded border ${colors.bg} ${colors.border} p-0.5`}
-              >
-                <div className="text-[8px] leading-tight text-gray-600">{card.label}</div>
-                <div className={`mt-0 text-xs leading-none font-bold ${colors.text}`}>
-                  {card.value.toLocaleString()}
-                </div>
-              </div>
-            );
-          })}
-
-        {/* 일반 지표 카드 (항상 표시) */}
-        {metrics.map((metric) => {
-          const colors = colorMap[metric.color as keyof typeof colorMap] || colorMap.gray;
-          const formattedValue = metric.calculatedValue.toFixed(metric.decimals);
+    <div
+      className={`flex h-full w-full overflow-hidden bg-white p-0.5 ${
+        isHorizontalLayout ? "flex-row gap-0.5" : "flex-col gap-0.5"
+      }`}
+    >
+      {/* 그룹별 카드 (활성화 시) */}
+      {isGroupByMode &&
+        groupedCards.map((card, index) => {
+          // 색상 순환 (6가지 색상)
+          const colorKeys = Object.keys(colorMap) as Array<keyof typeof colorMap>;
+          const colorKey = colorKeys[index % colorKeys.length];
+          const colors = colorMap[colorKey];
 
           return (
             <div
-              key={metric.id}
-              className={`flex flex-col items-center justify-center rounded border ${colors.bg} ${colors.border} p-0.5`}
+              key={`group-${index}`}
+              className={`flex flex-1 flex-col items-center justify-center rounded border ${colors.bg} ${colors.border} p-0.5`}
             >
-              <div className="text-[8px] leading-tight text-gray-600">{metric.label}</div>
-              <div className={`mt-0 text-xs leading-none font-bold ${colors.text}`}>
-                {formattedValue}
-                <span className="ml-0 text-[8px]">{metric.unit}</span>
-              </div>
+              <div className="text-[8px] leading-tight text-gray-600">{card.label}</div>
+              <div className={`mt-0 text-xs leading-none font-bold ${colors.text}`}>{card.value.toLocaleString()}</div>
             </div>
           );
         })}
-      </div>
+
+      {/* 일반 지표 카드 (항상 표시) */}
+      {metrics.map((metric) => {
+        const colors = colorMap[metric.color as keyof typeof colorMap] || colorMap.gray;
+        const formattedValue = metric.calculatedValue.toFixed(metric.decimals);
+
+        return (
+          <div
+            key={metric.id}
+            className={`flex flex-1 flex-col items-center justify-center rounded border ${colors.bg} ${colors.border} p-0.5`}
+          >
+            <div className="text-[8px] leading-tight text-gray-600">{metric.label}</div>
+            <div className={`mt-0 text-xs leading-none font-bold ${colors.text}`}>
+              {formattedValue}
+              <span className="ml-0 text-[8px]">{metric.unit}</span>
+            </div>
+          </div>
+        );
+      })}
     </div>
   );
 }