From 3bda194bf204e2f20d1eae9a334fa0204ff453cc Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Thu, 16 Oct 2025 11:09:11 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BA=94=EB=B2=84=EC=8A=A4=20=EB=8F=99?=
 =?UTF-8?q?=EC=A0=81=20=EB=86=92=EC=9D=B4=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/dashboard/DashboardCanvas.tsx       |  4 +++-
 .../admin/dashboard/DashboardDesigner.tsx     | 22 ++++++++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/components/admin/dashboard/DashboardCanvas.tsx b/frontend/components/admin/dashboard/DashboardCanvas.tsx
index f74af42d..d05f73cf 100644
--- a/frontend/components/admin/dashboard/DashboardCanvas.tsx
+++ b/frontend/components/admin/dashboard/DashboardCanvas.tsx
@@ -115,9 +115,11 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
     return (
       <div
         ref={ref}
-        className={`relative h-full w-full rounded-lg shadow-inner ${isDragOver ? "bg-blue-50/50" : ""} `}
+        className={`relative w-full rounded-lg shadow-inner ${isDragOver ? "bg-blue-50/50" : ""} `}
         style={{
           backgroundColor,
+          height: `${canvasHeight}px`,
+          minHeight: `${canvasHeight}px`,
           // 세밀한 그리드 배경
           backgroundImage: `
             linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px),
diff --git a/frontend/components/admin/dashboard/DashboardDesigner.tsx b/frontend/components/admin/dashboard/DashboardDesigner.tsx
index 63451284..86d5fa40 100644
--- a/frontend/components/admin/dashboard/DashboardDesigner.tsx
+++ b/frontend/components/admin/dashboard/DashboardDesigner.tsx
@@ -40,6 +40,22 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
   // 현재 해상도 설정 (안전하게 기본값 제공)
   const canvasConfig = RESOLUTIONS[resolution] || RESOLUTIONS.fhd;
 
+  // 캔버스 높이 동적 계산 (요소들의 최하단 위치 기준)
+  const calculateCanvasHeight = useCallback(() => {
+    if (elements.length === 0) {
+      return canvasConfig.height; // 기본 높이
+    }
+
+    // 모든 요소의 최하단 y 좌표 계산
+    const maxBottomY = Math.max(...elements.map((el) => el.position.y + el.size.height));
+
+    // 최소 높이는 기본 높이, 요소가 아래로 내려가면 자동으로 늘어남
+    // 패딩 추가 (100px 여유)
+    return Math.max(canvasConfig.height, maxBottomY + 100);
+  }, [elements, canvasConfig.height]);
+
+  const dynamicCanvasHeight = calculateCanvasHeight();
+
   // 대시보드 ID가 props로 전달되면 로드
   React.useEffect(() => {
     if (initialDashboardId) {
@@ -335,12 +351,12 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
       />
 
       {/* 캔버스 영역 - 해상도에 따른 크기, 중앙 정렬 */}
-      <div className="flex flex-1 items-center justify-center overflow-hidden bg-gray-100">
+      <div className="flex flex-1 items-start justify-center overflow-auto bg-gray-100 p-8">
         <div
           className="relative shadow-2xl"
           style={{
             width: `${canvasConfig.width}px`,
-            height: `${canvasConfig.height}px`,
+            minHeight: `${canvasConfig.height}px`,
           }}
         >
           <DashboardCanvas
@@ -354,7 +370,7 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
             onConfigureElement={openConfigModal}
             backgroundColor={canvasBackgroundColor}
             canvasWidth={canvasConfig.width}
-            canvasHeight={canvasConfig.height}
+            canvasHeight={dynamicCanvasHeight}
           />
         </div>
       </div>