캔버스 동적 높이 기능 구현

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),

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>