From bd7bf69a99fcfbc2b5a7657e5a997d37b8888dfa Mon Sep 17 00:00:00 2001
From: SeongHyun Kim <kksh7842@gmail.com>
Date: Tue, 10 Feb 2026 17:18:00 +0900
Subject: [PATCH] =?UTF-8?q?fix(pop-dashboard):=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=ED=85=9C/=EB=AA=A8=EB=93=9C=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EA=B2=8C=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=84=A4=EC=A0=95=20=EB=B2=84=EA=B7=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

설정 패널 버그 수정 (PopDashboardConfig):
- gaugeConfig 스프레드 순서 수정: min/max/target 값이 기존값에 덮어씌워지는 문제 해결
- 스프레드를 먼저 적용 후 변경 필드를 뒤에 배치하여 올바르게 반영

아이템 레이아웃 개선:
- KpiCard/StatCard: items-center justify-center 추가로 셀 내 중앙 정렬
- GaugeItem: SVG를 flex-1 영역에서 반응형 렌더링 (h-full w-auto)
- GaugeItem: preserveAspectRatio로 비율 유지, 라벨/목표값 shrink-0

모드 레이아웃 개선:
- ArrowsMode: 아이템이 전체 영역 사용, 화살표/인디케이터를 overlay로 변경
- ArrowsMode: 화살표 크기 축소 (h-11 -> h-8), backdrop-blur 추가
- AutoSlideMode: 슬라이드 컨테이너를 absolute inset-0으로 전체 영역 활용
- AutoSlideMode: 인디케이터를 하단 overlay로 변경

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../pop-dashboard/PopDashboardConfig.tsx      |  6 +--
 .../pop-dashboard/items/GaugeItem.tsx         | 16 ++++---
 .../pop-dashboard/items/KpiCard.tsx           |  2 +-
 .../pop-dashboard/items/StatCard.tsx          |  2 +-
 .../pop-dashboard/modes/ArrowsMode.tsx        | 39 ++++++++---------
 .../pop-dashboard/modes/AutoSlideMode.tsx     | 42 +++++++++----------
 6 files changed, 53 insertions(+), 54 deletions(-)

diff --git a/frontend/lib/registry/pop-components/pop-dashboard/PopDashboardConfig.tsx b/frontend/lib/registry/pop-components/pop-dashboard/PopDashboardConfig.tsx
index b75f9b66..1c19a856 100644
--- a/frontend/lib/registry/pop-components/pop-dashboard/PopDashboardConfig.tsx
+++ b/frontend/lib/registry/pop-components/pop-dashboard/PopDashboardConfig.tsx
@@ -1307,9 +1307,9 @@ function ItemEditor({
                     onUpdate({
                       ...item,
                       gaugeConfig: {
+                        ...item.gaugeConfig,
                         min: parseInt(e.target.value) || 0,
                         max: item.gaugeConfig?.max ?? 100,
-                        ...item.gaugeConfig,
                       },
                     })
                   }
@@ -1325,9 +1325,9 @@ function ItemEditor({
                     onUpdate({
                       ...item,
                       gaugeConfig: {
+                        ...item.gaugeConfig,
                         min: item.gaugeConfig?.min ?? 0,
                         max: parseInt(e.target.value) || 100,
-                        ...item.gaugeConfig,
                       },
                     })
                   }
@@ -1343,9 +1343,9 @@ function ItemEditor({
                     onUpdate({
                       ...item,
                       gaugeConfig: {
+                        ...item.gaugeConfig,
                         min: item.gaugeConfig?.min ?? 0,
                         max: item.gaugeConfig?.max ?? 100,
-                        ...item.gaugeConfig,
                         target: parseInt(e.target.value) || undefined,
                       },
                     })
diff --git a/frontend/lib/registry/pop-components/pop-dashboard/items/GaugeItem.tsx b/frontend/lib/registry/pop-components/pop-dashboard/items/GaugeItem.tsx
index c7313a85..cca20686 100644
--- a/frontend/lib/registry/pop-components/pop-dashboard/items/GaugeItem.tsx
+++ b/frontend/lib/registry/pop-components/pop-dashboard/items/GaugeItem.tsx
@@ -69,17 +69,21 @@ export function GaugeItemComponent({
   const largeArcFlag = percentage > 50 ? 1 : 0;
 
   return (
-    <div className="@container flex h-full w-full flex-col items-center justify-center p-3">
+    <div className="@container flex h-full w-full flex-col items-center justify-center p-2">
       {/* 라벨 */}
       {visibility.showLabel && (
-        <p className="mb-1 text-xs text-muted-foreground @[250px]:text-sm">
+        <p className="shrink-0 truncate text-xs text-muted-foreground @[250px]:text-sm">
           {item.label}
         </p>
       )}
 
-      {/* 게이지 SVG */}
-      <div className="relative w-full max-w-[200px]">
-        <svg viewBox="0 0 200 110" className="w-full">
+      {/* 게이지 SVG - 높이/너비 모두 반응형 */}
+      <div className="flex min-h-0 flex-1 items-center justify-center w-full">
+        <svg
+          viewBox="0 0 200 110"
+          className="h-full w-auto max-w-full"
+          preserveAspectRatio="xMidYMid meet"
+        >
           {/* 배경 반원 (회색) */}
           <path
             d={`M ${cx - radius} ${cy} A ${radius} ${radius} 0 0 1 ${cx + radius} ${cy}`}
@@ -128,7 +132,7 @@ export function GaugeItemComponent({
 
       {/* 목표값 */}
       {visibility.showTarget && (
-        <p className="text-xs text-muted-foreground">
+        <p className="shrink-0 text-xs text-muted-foreground">
           목표: {abbreviateNumber(target)}
         </p>
       )}
diff --git a/frontend/lib/registry/pop-components/pop-dashboard/items/KpiCard.tsx b/frontend/lib/registry/pop-components/pop-dashboard/items/KpiCard.tsx
index 29db2791..13086587 100644
--- a/frontend/lib/registry/pop-components/pop-dashboard/items/KpiCard.tsx
+++ b/frontend/lib/registry/pop-components/pop-dashboard/items/KpiCard.tsx
@@ -66,7 +66,7 @@ export function KpiCardComponent({
   const valueColor = getColorForValue(displayValue, kpiConfig?.colorRanges);
 
   return (
-    <div className="@container flex h-full w-full flex-col justify-center p-3">
+    <div className="@container flex h-full w-full flex-col items-center justify-center p-3">
       {/* 라벨 */}
       {visibility.showLabel && (
         <p className="text-xs text-muted-foreground @[250px]:text-sm">
diff --git a/frontend/lib/registry/pop-components/pop-dashboard/items/StatCard.tsx b/frontend/lib/registry/pop-components/pop-dashboard/items/StatCard.tsx
index c3c02e7b..93cc1305 100644
--- a/frontend/lib/registry/pop-components/pop-dashboard/items/StatCard.tsx
+++ b/frontend/lib/registry/pop-components/pop-dashboard/items/StatCard.tsx
@@ -37,7 +37,7 @@ export function StatCardComponent({ item, categoryData }: StatCardProps) {
   const total = Object.values(categoryData).reduce((sum, v) => sum + v, 0);
 
   return (
-    <div className="@container flex h-full w-full flex-col p-3">
+    <div className="@container flex h-full w-full flex-col items-center justify-center p-3">
       {/* 라벨 */}
       {visibility.showLabel && (
         <p className="mb-1 text-xs text-muted-foreground @[250px]:text-sm">
diff --git a/frontend/lib/registry/pop-components/pop-dashboard/modes/ArrowsMode.tsx b/frontend/lib/registry/pop-components/pop-dashboard/modes/ArrowsMode.tsx
index 51a05814..d91e6ea2 100644
--- a/frontend/lib/registry/pop-components/pop-dashboard/modes/ArrowsMode.tsx
+++ b/frontend/lib/registry/pop-components/pop-dashboard/modes/ArrowsMode.tsx
@@ -47,42 +47,37 @@ export function ArrowsModeComponent({
   }
 
   return (
-    <div className="flex h-full w-full flex-col">
-      {/* 콘텐츠 + 화살표 */}
-      <div className="relative flex min-h-0 flex-1 items-center">
-        {/* 왼쪽 화살표 */}
-        {itemCount > 1 && (
+    <div className="relative h-full w-full">
+      {/* 아이템 (전체 영역 사용) */}
+      <div className="h-full w-full">
+        {renderItem(currentIndex)}
+      </div>
+
+      {/* 좌우 화살표 (콘텐츠 위에 겹침) */}
+      {itemCount > 1 && (
+        <>
           <button
             type="button"
             onClick={goToPrev}
-            className="absolute left-0 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-background/80 shadow-sm transition-colors hover:bg-accent active:scale-95"
+            className="absolute left-1 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full bg-background/70 shadow-sm backdrop-blur-sm transition-all hover:bg-background/90 active:scale-95"
             aria-label="이전"
           >
-            <ChevronLeft className="h-5 w-5" />
+            <ChevronLeft className="h-4 w-4" />
           </button>
-        )}
-
-        {/* 아이템 */}
-        <div className="h-full w-full px-12">
-          {renderItem(currentIndex)}
-        </div>
-
-        {/* 오른쪽 화살표 */}
-        {itemCount > 1 && (
           <button
             type="button"
             onClick={goToNext}
-            className="absolute right-0 z-10 flex h-11 w-11 items-center justify-center rounded-full bg-background/80 shadow-sm transition-colors hover:bg-accent active:scale-95"
+            className="absolute right-1 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full bg-background/70 shadow-sm backdrop-blur-sm transition-all hover:bg-background/90 active:scale-95"
             aria-label="다음"
           >
-            <ChevronRight className="h-5 w-5" />
+            <ChevronRight className="h-4 w-4" />
           </button>
-        )}
-      </div>
+        </>
+      )}
 
-      {/* 페이지 인디케이터 */}
+      {/* 페이지 인디케이터 (콘텐츠 하단에 겹침) */}
       {showIndicator && itemCount > 1 && (
-        <div className="flex items-center justify-center gap-1.5 py-1">
+        <div className="absolute bottom-1 left-0 right-0 z-10 flex items-center justify-center gap-1.5">
           {Array.from({ length: itemCount }).map((_, i) => (
             <button
               type="button"
diff --git a/frontend/lib/registry/pop-components/pop-dashboard/modes/AutoSlideMode.tsx b/frontend/lib/registry/pop-components/pop-dashboard/modes/AutoSlideMode.tsx
index a984bbf6..cb67255b 100644
--- a/frontend/lib/registry/pop-components/pop-dashboard/modes/AutoSlideMode.tsx
+++ b/frontend/lib/registry/pop-components/pop-dashboard/modes/AutoSlideMode.tsx
@@ -90,39 +90,39 @@ export function AutoSlideModeComponent({
 
   return (
     <div
-      className="flex h-full w-full flex-col"
+      className="relative h-full w-full"
       onClick={handlePause}
       onTouchStart={handlePause}
       role="presentation"
     >
       {/* 콘텐츠 (슬라이드 애니메이션) */}
-      <div className="relative min-h-0 flex-1 overflow-hidden">
+      <div className="absolute inset-0 overflow-hidden">
         <div
-          className="absolute inset-0 transition-transform duration-500 ease-in-out"
-          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+          className="flex h-full transition-transform duration-500 ease-in-out"
+          style={{
+            width: `${itemCount * 100}%`,
+            transform: `translateX(-${currentIndex * (100 / itemCount)}%)`,
+          }}
         >
-          <div
-            className="flex h-full"
-            style={{ width: `${itemCount * 100}%` }}
-          >
-            {Array.from({ length: itemCount }).map((_, i) => (
-              <div
-                key={i}
-                className="h-full"
-                style={{ width: `${100 / itemCount}%` }}
-              >
-                {renderItem(i)}
-              </div>
-            ))}
-          </div>
+          {Array.from({ length: itemCount }).map((_, i) => (
+            <div
+              key={i}
+              className="h-full"
+              style={{ width: `${100 / itemCount}%` }}
+            >
+              {renderItem(i)}
+            </div>
+          ))}
         </div>
       </div>
 
-      {/* 인디케이터 + 일시정지 표시 */}
+      {/* 인디케이터 (콘텐츠 하단에 겹침) */}
       {showIndicator && itemCount > 1 && (
-        <div className="flex items-center justify-center gap-1.5 py-1">
+        <div className="absolute bottom-1 left-0 right-0 z-10 flex items-center justify-center gap-1.5">
           {isPaused && (
-            <span className="mr-2 text-[10px] text-muted-foreground">일시정지</span>
+            <span className="mr-2 text-[10px] text-muted-foreground/70">
+              일시정지
+            </span>
           )}
           {Array.from({ length: itemCount }).map((_, i) => (
             <span