From 298fd11169c61ced8cc5b8e8c18cba847c9c59c5 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Thu, 23 Oct 2025 09:52:14 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/dashboard/DashboardDesigner.tsx     | 46 +++++++++++++------
 .../components/dashboard/DashboardViewer.tsx  | 42 +++++++++--------
 2 files changed, 55 insertions(+), 33 deletions(-)

diff --git a/frontend/components/admin/dashboard/DashboardDesigner.tsx b/frontend/components/admin/dashboard/DashboardDesigner.tsx
index 83097678..0f387301 100644
--- a/frontend/components/admin/dashboard/DashboardDesigner.tsx
+++ b/frontend/components/admin/dashboard/DashboardDesigner.tsx
@@ -72,7 +72,7 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
 
   // 화면 해상도 자동 감지
   const [screenResolution] = useState<Resolution>(() => detectScreenResolution());
-  const [resolution, setResolution] = useState<Resolution>(screenResolution);
+  const [resolution, setResolution] = useState<Resolution>("fhd"); // 초기값은 FHD, 로드 시 덮어씀
 
   // resolution 변경 감지 및 요소 자동 조정
   const handleResolutionChange = useCallback(
@@ -171,23 +171,19 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
         settings,
         resolution: settings?.resolution,
         backgroundColor: settings?.backgroundColor,
-        currentResolution: resolution,
       });
 
-      if (settings?.resolution) {
-        setResolution(settings.resolution);
-        console.log("✅ Resolution 설정됨:", settings.resolution);
-      } else {
-        console.log("⚠️ Resolution 없음, 기본값 유지:", resolution);
-      }
-
+      // 배경색 설정
       if (settings?.backgroundColor) {
         setCanvasBackgroundColor(settings.backgroundColor);
         console.log("✅ BackgroundColor 설정됨:", settings.backgroundColor);
-      } else {
-        console.log("⚠️ BackgroundColor 없음, 기본값 유지:", canvasBackgroundColor);
       }
 
+      // 해상도와 요소를 함께 설정 (해상도가 먼저 반영되어야 함)
+      const loadedResolution = settings?.resolution || "fhd";
+      setResolution(loadedResolution);
+      console.log("✅ Resolution 설정됨:", loadedResolution);
+
       // 요소들 설정
       if (dashboard.elements && dashboard.elements.length > 0) {
         setElements(dashboard.elements);
@@ -432,8 +428,15 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
             id: el.id,
             type: el.type,
             subtype: el.subtype,
-            position: el.position,
-            size: el.size,
+            // 위치와 크기는 정수로 반올림 (DB integer 타입)
+            position: {
+              x: Math.round(el.position.x),
+              y: Math.round(el.position.y),
+            },
+            size: {
+              width: Math.round(el.size.width),
+              height: Math.round(el.size.height),
+            },
             title: el.title,
             customTitle: el.customTitle,
             showHeader: el.showHeader,
@@ -459,6 +462,12 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
             },
           };
 
+          console.log("💾 대시보드 업데이트 요청:", {
+            dashboardId,
+            updateData,
+            elementsCount: elementsData.length,
+          });
+
           savedDashboard = await dashboardApi.updateDashboard(dashboardId, updateData);
         } else {
           // 새 대시보드 생성
@@ -519,7 +528,18 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
         // 성공 모달 표시
         setSuccessModalOpen(true);
       } catch (error) {
+        console.error("❌ 대시보드 저장 실패:", error);
         const errorMessage = error instanceof Error ? error.message : "알 수 없는 오류";
+
+        // 상세한 에러 정보 로깅
+        if (error instanceof Error) {
+          console.error("Error details:", {
+            message: error.message,
+            stack: error.stack,
+            name: error.name,
+          });
+        }
+
         alert(`대시보드 저장 중 오류가 발생했습니다.\n\n오류: ${errorMessage}`);
         throw error;
       }
diff --git a/frontend/components/dashboard/DashboardViewer.tsx b/frontend/components/dashboard/DashboardViewer.tsx
index 5438b0c0..f784c76f 100644
--- a/frontend/components/dashboard/DashboardViewer.tsx
+++ b/frontend/components/dashboard/DashboardViewer.tsx
@@ -328,26 +328,28 @@ export function DashboardViewer({
         </div>
       ) : (
         // 데스크톱: 기존 고정 캔버스 레이아웃
-        <div className="flex min-h-screen items-start justify-center bg-gray-100 p-8">
-          <div
-            className="relative rounded-lg"
-            style={{
-              width: `${canvasConfig.width}px`,
-              minHeight: `${canvasConfig.height}px`,
-              height: `${canvasHeight}px`,
-              backgroundColor: backgroundColor,
-            }}
-          >
-            {sortedElements.map((element) => (
-              <ViewerElement
-                key={element.id}
-                element={element}
-                data={elementData[element.id]}
-                isLoading={loadingElements.has(element.id)}
-                onRefresh={() => loadElementData(element)}
-                isMobile={false}
-              />
-            ))}
+        <div className="min-h-screen bg-gray-100 py-8">
+          <div className="mx-auto" style={{ width: `${canvasConfig.width}px` }}>
+            <div
+              className="relative rounded-lg"
+              style={{
+                width: `${canvasConfig.width}px`,
+                minHeight: `${canvasConfig.height}px`,
+                height: `${canvasHeight}px`,
+                backgroundColor: backgroundColor,
+              }}
+            >
+              {sortedElements.map((element) => (
+                <ViewerElement
+                  key={element.id}
+                  element={element}
+                  data={elementData[element.id]}
+                  isLoading={loadingElements.has(element.id)}
+                  onRefresh={() => loadElementData(element)}
+                  isMobile={false}
+                />
+              ))}
+            </div>
           </div>
         </div>
       )}