polarvo-layout 1.0.88 → 1.0.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polarvo-layout",
-  "version": "1.0.88",
+  "version": "1.0.90",
   "type": "module",
   "author": "unigence <unigencelab@gmail.com>",
   "repository": {

package/src/components/Layout/BaseLayout.vue

@@ -11,7 +11,7 @@
       <PolarLayout
         :id="preview ? `${key}Preview` : `${key}Layout`"
         :mode="section.mode"
-        :style="getSectionStyle(section)"
+        :style="getSectionStyle(key, section)"
         :class="[getSectionClass(key, section), activeSection === key && preview ? 'text-blue-400 bg-blue-50' : 'text-gray-400']"
         @click.stop="emit('click:section', key)"
       >
@@ -19,7 +19,14 @@
           {{ key }}
         </div>
         <template v-if="section.mode === 'grid'">
-          <GridLayout :polarvo="polarvo" :preview="preview" :sectionKey="key" :sectionData="section" :elementIds="section.elementIds" />
+          <GridLayout
+            :polarvo="polarvo"
+            :preview="preview"
+            :sectionKey="key"
+            :sectionData="section"
+            :elementIds="section.elementIds"
+            :extraHeight="getSectionExtraHeight(section)"
+          />
         </template>
 
         <template v-else>
@@ -37,11 +44,12 @@
 </template>
 
 <script setup>
-import { toRefs, computed, onMounted, onUnmounted, ref, inject } from 'vue';
+import { toRefs, computed, onMounted, onUnmounted, ref, inject, unref } from 'vue';
 
 import PolarLayout from './PolarLayout.vue';
 import FreeLayout from './FreeLayout.vue';
 import GridLayout from './GridLayout.vue';
+import { getGridRowMinPx, getRowExtraPx, toGridTrackSizes, toGridRowSizes, toSectionRowSizes, isInLastLayoutRow } from '../../utils/grid-track.js';
 
 // 우클릭 방지
 // window.oncontextmenu = () => {
@@ -69,29 +77,63 @@ const layoutType = computed(() => {
 });
 const { layoutName, layoutData, activeSection, gapSize, gridNumber, gridRatio } = toRefs(props.polarvo.layout.state);
 const { activeDesign } = toRefs(props.polarvo.display.state);
+const { elements: gridElements } = toRefs(props.polarvo.gridDrop.state);
 const selectedElement = inject('selectedElement');
 const activeEditMode = inject('activeEditMode');
 const activeLeaf = inject('activeLeaf');
+const canvasExtraHeight = inject('canvasExtraHeight', 0); // CanvasContainer 확장 높이 (미리보기는 0)
+
+const extraHeight = computed(() => (props.preview ? 0 : (unref(canvasExtraHeight) ?? 0)));
+
+// 확장 높이는 마지막 행 섹션만 가져감
+const getSectionExtraHeight = (section) => (isInLastLayoutRow(section, gridRatio.value?.row?.length) ? extraHeight.value : 0);
+
+// 레이아웃 행 크기
+// - 미리보기: 부모 높이를 벗어나지 않도록 min 0 + 비율(fr)만 사용
+// - 편집 화면: 확장 높이가 있으면 마지막 행만 가져감 (min은 기존 fr과 동일하게 auto - 섹션 콘텐츠 최소 높이 유지), 없으면 기존 fr
+const getBaseRows = () => {
+  const rowRatio = gridRatio.value?.row;
+  if (!rowRatio) return undefined;
+  if (props.preview) return rowRatio.map((ratio) => `minmax(0, ${ratio}fr)`).join(' ');
+  if (!(extraHeight.value > 0)) return rowRatio.map((ratio) => `${ratio}fr`).join(' ');
+  return toGridRowSizes(
+    rowRatio,
+    rowRatio.map(() => 'auto'),
+    gapSize.value ?? 0,
+    extraHeight.value,
+  );
+};
 
 const getBaseStyle = computed(() => {
   return {
     gridTemplateColumns: gridRatio.value?.column.map((ratio) => `${ratio}fr`).join(' '),
-    gridTemplateRows: gridRatio.value?.row.map((ratio) => `${ratio}fr`).join(' '),
+    gridTemplateRows: getBaseRows(),
     marginRight: layoutType.value === 'no-split' ? '0' : layoutType.value === 'three-column-split' ? '14px' : '8px',
     gap: `${gapSize.value}px`,
   };
 });
 
-const getSectionStyle = (section) => ({
-  '--grid-columns': section.config?.gridColumns ?? 3,
-  '--grid-rows': section.config?.gridRows ?? 3,
-  '--grid-gap': `${section.config?.gridGap ?? 5}px`,
-  '--grid-row-sizes': section.config?.gridRowRatio?.length ? section.config.gridRowRatio.map((r) => `${r}fr`).join(' ') : undefined, // 비어있으면 아예 안 넣어서 CSS 기본값으로 폴백
-  '--grid-column-sizes': section.config?.gridColumnRatio?.length
-    ? section.config.gridColumnRatio.map((r) => `${r}fr`).join(' ')
-    : undefined,
-  position: 'relative',
-});
+const getSectionStyle = (key, section) => {
+  const gridRows = section.config?.gridRows ?? 3;
+  const rowRatio = section.config?.gridRowRatio?.length ? section.config.gridRowRatio : Array(gridRows).fill(1);
+  const sectionElements = gridElements.value.filter((el) => el.section === key && section.elementIds?.includes(el.id));
+  const gap = section.config?.gridGap ?? 5;
+  const extraHeight = getSectionExtraHeight(section);
+  // 미리보기는 요소 최소 높이(편집 화면 px) 미적용 - 부모 높이 초과 방지
+  const minPx = props.preview
+    ? []
+    : getGridRowMinPx(sectionElements, gridRows, rowRatio, gap, getRowExtraPx(section.config?.gridRowExtra, gridRows, extraHeight));
+
+  return {
+    '--grid-columns': section.config?.gridColumns ?? 3,
+    '--grid-rows': gridRows,
+    '--grid-gap': `${section.config?.gridGap ?? 5}px`,
+    // 비율(gridRowRatio)은 확장 높이 제외 기준 - 확장 높이는 마지막 행 + 위로 넘어간 몫(gridRowExtra)으로 편집 화면에만 붙음
+    '--grid-row-sizes': toSectionRowSizes(rowRatio, minPx, gap, extraHeight, section.config?.gridRowExtra),
+    '--grid-column-sizes': section.config?.gridColumnRatio?.length ? toGridTrackSizes(section.config.gridColumnRatio) : undefined, // 비어있으면 아예 안 넣어서 CSS 기본값으로 폴백
+    position: 'relative',
+  };
+};
 
 const getSectionClass = (key, section) => ({
   [key]: true,

package/src/components/Layout/CanvasContainer.vue

@@ -24,8 +24,9 @@
 </template>
 
 <script setup>
-import { toRefs, ref, computed, watch } from 'vue';
+import { toRefs, ref, computed, watch, provide, onMounted } from 'vue';
 import BaseLayout from './BaseLayout.vue';
+import { GRID_MIN_ROW_PX, isInLastLayoutRow, getRowExtraPx, satisfiesGridRowMin } from '../../utils/grid-track.js';
 
 const props = defineProps({
   polarvo: {
@@ -43,7 +44,13 @@ const DEFAULT_DISPLAY_SIZE = {
 
 // height 관련 여유 공간 추가하여 계산함 (50, 200)
 const { displaySize, canvasSize } = toRefs(props.polarvo.display.state);
-const { elements, activeMode } = toRefs(props.polarvo.layout.state);
+const { elements, layoutData, gridRatio, canvasExtraHeight } = toRefs(props.polarvo.layout.state);
+const { setCanvasExtraHeight } = props.polarvo.layout;
+const { elements: gridElements } = toRefs(props.polarvo.gridDrop.state);
+const { elements: freeElements } = toRefs(props.polarvo.freeDrop.state);
+
+// 화면에 그리드 섹션이 하나라도 있는지 - 높이 계산 기준 (선택된 섹션 모드와 무관하게 화면 단위로 고정)
+const hasGridSection = computed(() => Object.values(layoutData.value ?? {}).some((section) => section?.mode === 'grid'));
 
 const defaultHeight = computed(() => {
   const freeElementsBottom =
@@ -59,8 +66,8 @@ const defaultHeight = computed(() => {
   // 저장된 canvasSize가 없으면 free 요소 기준 계산값만 사용 (grid 섹션은 기본값 750으로 취급)
   if (!canvasSize.value) return freeElementsBottom;
 
-  // grid: 라이브로 정확히 계산할 방법이 없어 저장된 값을 그대로 신뢰
-  if (activeMode.value === 'grid') {
+  // 그리드 섹션이 있는 화면: 라이브로 정확히 계산할 방법이 없어 저장된 값을 그대로 신뢰
+  if (hasGridSection.value) {
     return canvasSize.value.defaultHeight ?? freeElementsBottom;
   }
 
@@ -73,7 +80,7 @@ const defaultHeight = computed(() => {
 function restoreAdditionalHeight() {
   if (!canvasSize.value) return 0;
 
-  if (activeMode.value === 'grid') {
+  if (hasGridSection.value) {
     return canvasSize.value.additionalHeight ?? 0;
   }
 
@@ -81,7 +88,13 @@ function restoreAdditionalHeight() {
   return Math.max(0, savedTotal - defaultHeight.value);
 }
 
-const additionalHeight = ref(restoreAdditionalHeight());
+// 확장 높이는 LayoutEngine 상태(canvasExtraHeight)로 관리 - 섹션 행 비율과 함께 히스토리(undo/redo)에 기록됨
+// 직접 대입은 히스토리 없이 동기화만 함 (화면 전환 시 복원 등)
+const additionalHeight = computed({
+  get: () => canvasExtraHeight.value ?? 0,
+  set: (value) => setCanvasExtraHeight(value),
+});
+additionalHeight.value = restoreAdditionalHeight();
 
 // canvasSize(저장된 캔버스 크기)가 바뀌면(=화면 전환) 그 값으로 복원, 없으면 0
 watch(
@@ -134,14 +147,113 @@ const containerStyle = computed(() => {
 
 defineExpose({ defaultHeight, additionalHeight, displayHeight });
 
+// 확장 높이는 BaseLayout/GridLayout에서 마지막 행에만 붙임
+provide('canvasExtraHeight', additionalHeight);
+
+const RESIZE_STEP = 200;
+
+// 확장 높이가 delta만큼 줄었을 때 행별 확장 높이 몫 - 마지막 행 몫부터 줄이고, 모자라면 아래쪽 행부터 줄임
+function reduceExtraShares(shares, delta) {
+  const reduced = [...shares];
+  for (let i = reduced.length - 1; i >= 0 && delta > 0; i--) {
+    const take = Math.min(reduced[i], delta);
+    reduced[i] -= take;
+    delta -= take;
+  }
+  return reduced;
+}
+
+// 마지막 행 그리드 섹션의 현재 행 px / 행별 확장 높이 몫 / 요소 (DOM 기준)
+function getGridSectionInfo(key, section, sectionEl) {
+  const gridRows = section.config?.gridRows || 1;
+  const trackPx = getComputedStyle(sectionEl)
+    .gridTemplateRows.split(' ')
+    .slice(0, gridRows)
+    .map((v) => parseFloat(v) || 0);
+
+  // GridLayout.filteredElements와 동일 (범위 밖 요소 제외)
+  const elements = (gridElements.value ?? []).filter(
+    (el) => el.section === key && section.elementIds?.includes(el.id) && el.position.row >= 1 && el.position.row + el.size.rowSpan - 1 <= gridRows,
+  );
+
+  return {
+    trackPx,
+    shares: getRowExtraPx(section.config?.gridRowExtra, gridRows, additionalHeight.value),
+    elements,
+    gap: section.config?.gridGap ?? 5,
+  };
+}
+
+// 그리드 섹션이 행/요소 최소 크기를 유지하면서 줄어들 수 있는 최대 px (limit 이하)
+function getGridShrinkable({ trackPx, shares, elements, gap }, limit) {
+  const canShrinkBy = (delta) => {
+    const next = reduceExtraShares(shares, delta);
+    const nextPx = trackPx.map((v, i) => v - (shares[i] - next[i]));
+    // 줄어드는 행만 검사 (기존에 이미 최소 크기를 못 맞춘 다른 행 때문에 막히지 않도록)
+    const shrunkRows = next.map((v, i) => (v < shares[i] ? i : -1)).filter((i) => i >= 0);
+    return satisfiesGridRowMin(elements, nextPx, gap, GRID_MIN_ROW_PX, shrunkRows);
+  };
+
+  for (let delta = limit; delta > 0; delta--) {
+    if (canShrinkBy(delta)) return delta;
+  }
+  return 0;
+}
+
+// 확장 높이를 받는 마지막 행 섹션 목록 (DOM이 있는 것만)
+function getExtraSections() {
+  return Object.entries(layoutData.value ?? {})
+    .filter(([, section]) => isInLastLayoutRow(section, gridRatio.value?.row?.length))
+    .map(([key, section]) => ({ key, section, sectionEl: document.getElementById(`${key}Layout`) }))
+    .filter(({ sectionEl }) => sectionEl);
+}
+
+// 확장 높이를 받는 마지막 행 섹션들이 요소 최소 크기를 유지하면서 줄어들 수 있는 높이(px, limit 이하)
+function getShrinkableHeight(limit = additionalHeight.value) {
+  let slack = Math.max(0, Math.floor(limit));
+
+  getExtraSections().forEach(({ key, section, sectionEl }) => {
+    if (section.mode === 'grid') {
+      slack = Math.min(slack, getGridShrinkable(getGridSectionInfo(key, section, sectionEl), slack));
+    } else {
+      const sectionElements = (freeElements.value ?? []).filter((el) => el.section === key && section.elementIds?.includes(el.id));
+      const bottom = sectionElements.reduce((max, el) => Math.max(max, (el.position?.y || 0) + (el.size?.h || 0)), 0);
+      slack = Math.min(slack, Math.floor(sectionEl.clientHeight - bottom));
+    }
+  });
+
+  return Math.max(0, slack);
+}
+
+// 확장: 늘어난 높이는 마지막 행이 전부 가져감 (비율/위로 넘어간 확장분은 그대로)
 function expandContainer() {
-  additionalHeight.value += 200;
+  setCanvasExtraHeight(additionalHeight.value + RESIZE_STEP, {}, true);
 }
 
-// displayHeight(=defaultHeight + additionalHeight)는 항상 defaultHeight 이상으로 유지
-const canShrink = computed(() => additionalHeight.value > 0);
+// 요소 크기/배치·레이아웃·확장 높이가 바뀔 때마다 DOM 반영 후 다시 계산
+const shrinkableHeight = ref(0);
+const updateShrinkableHeight = () => {
+  shrinkableHeight.value = getShrinkableHeight(Math.min(RESIZE_STEP, additionalHeight.value));
+};
+watch([displayHeight, gridElements, freeElements, layoutData, gridRatio], updateShrinkableHeight, { deep: true, flush: 'post' });
+onMounted(updateShrinkableHeight);
+
+// 축소: 마지막 행 몫부터 줄이고, 모자라면 위로 넘어간 확장분(gridRowExtra)도 줄임 - 확장 높이와 함께 히스토리에 한 번 기록
+// displayHeight(=defaultHeight + additionalHeight)는 항상 defaultHeight 이상, 요소 최소 크기 이상으로 유지
+const canShrink = computed(() => shrinkableHeight.value > 0);
 function shrinkContainer() {
-  additionalHeight.value = Math.max(0, additionalHeight.value - 200);
+  const delta = getShrinkableHeight(Math.min(RESIZE_STEP, additionalHeight.value));
+  if (!delta) return;
+
+  // 위로 넘어간 확장분(gridRowExtra)이 줄어드는 섹션만 함께 저장
+  const rowExtras = {};
+  getExtraSections().forEach(({ key, section, sectionEl }) => {
+    if (section.mode !== 'grid' || !section.config?.gridRowExtra?.length) return;
+    const moved = reduceExtraShares(getGridSectionInfo(key, section, sectionEl).shares, delta).slice(0, -1);
+    if (moved.some((v, i) => v !== section.config.gridRowExtra[i])) rowExtras[key] = moved;
+  });
+
+  setCanvasExtraHeight(additionalHeight.value - delta, rowExtras, true);
 }
 </script>
 

package/src/components/Layout/GridLayout.vue

@@ -1,8 +1,8 @@
 <template>
   <template v-if="!preview">
     <GridItem
-      v-for="(item, index) in mergedData"
-      :key="item.id || `empty-${index}`"
+      v-for="item in mergedData"
+      :key="item.id || `empty-${item.row}-${item.col}`"
       :item="item"
       :polarvo="props.polarvo"
       :sectionKey="props.sectionKey"
@@ -74,6 +74,7 @@
 
 <script setup>
 import GridItem from './GridItem.vue';
+import { GRID_MIN_ROW_PX, getGridRowMinPx, toGridTrackSizes, toSectionRowSizes, getRowExtraPx } from '../../utils/grid-track.js';
 
 import { ref, toRefs, getCurrentInstance, onMounted, onUnmounted, inject, watch, computed } from 'vue';
 
@@ -98,6 +99,11 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  // 캔버스 확장 높이 - 이 섹션이 추가로 가져가는 px (BaseLayout에서 마지막 행 섹션에만 전달, 미리보기는 0)
+  extraHeight: {
+    type: Number,
+    default: 0,
+  },
 });
 
 const { setActiveDesign, setActiveMenu } = props.polarvo.display;
@@ -121,7 +127,7 @@ const gridRows = ref(1); // 동적으로 계산
 const gridGap = computed(() => props.sectionData?.config?.gridGap ?? 5); // BaseLayout.vue --grid-gap과 동일한 소스/기본값
 
 // row, col Resize
-const MIN_ROW_PX = 20; // 행 최소 높이(px)
+const MIN_ROW_PX = GRID_MIN_ROW_PX; // 행 최소 높이(px)
 const MIN_COL_PX = 20; // 열 최소 너비(px)
 
 const DRAG_CONFIG = {
@@ -133,6 +139,22 @@ const DRAG_CONFIG = {
     clientKey: 'clientY',
     positionKey: 'y',
     cssVar: '--grid-row-sizes',
+    posKey: 'row',
+    spanKey: 'rowSpan',
+    getMinPx: (el) => el.size?.h ?? MIN_ROW_PX, // GridDropEngine.getElementStyle의 minHeight와 동일
+    // 행별 확장 높이 몫 - 비율에는 섞지 않고 편집 화면에만 붙임
+    getExtraPx: () => getRowExtraPx(props.sectionData?.config?.gridRowExtra, gridRows.value, props.extraHeight),
+    // BaseLayout과 동일한 형식
+    toSizes: (ratio, extras) =>
+      toSectionRowSizes(
+        ratio,
+        getGridRowMinPx(filteredElements.value, ratio.length, ratio, gridGap.value, extras),
+        gridGap.value,
+        props.extraHeight,
+        extras.slice(0, -1),
+      ),
+    // 확장 높이를 받는 섹션만 gridRowExtra를 함께 저장 (비율 + 확장분 한 번에 히스토리 기록)
+    toConfig: (ratio, extras) => (props.extraHeight > 0 ? { ratio, extra: extras.slice(0, -1).map((v) => Math.max(0, v)) } : ratio),
   },
   col: {
     ref: gridColumns,
@@ -142,6 +164,12 @@ const DRAG_CONFIG = {
     clientKey: 'clientX',
     positionKey: 'x',
     cssVar: '--grid-column-sizes',
+    posKey: 'col',
+    spanKey: 'colSpan',
+    getMinPx: () => MIN_COL_PX,
+    getExtraPx: () => Array(gridColumns.value).fill(0),
+    toSizes: (ratio) => toGridTrackSizes(ratio), // BaseLayout과 동일한 형식
+    toConfig: (ratio) => ratio,
   },
 };
 
@@ -157,7 +185,8 @@ function handleMouseDown(event, axis, index) {
   event.preventDefault();
   event.stopPropagation();
 
-  const { ref, minPx, ratioKey, gridTemplateKey, clientKey, positionKey, cssVar } = DRAG_CONFIG[axis];
+  const { ref, minPx, ratioKey, gridTemplateKey, clientKey, positionKey, cssVar, posKey, spanKey, getMinPx, getExtraPx, toSizes, toConfig } =
+    DRAG_CONFIG[axis];
 
   dragState.value.axis = axis;
   dragState.value.activeIdx = index;
@@ -168,6 +197,7 @@ function handleMouseDown(event, axis, index) {
 
   let dragSnapShot = null; // 드래그 시작 시 스냅샷
   let liveRatio = null; // 미리보기 중 계산된 최종 fr 배열 (stopDrag에서 커밋)
+  let liveExtras = null; // 미리보기 중 계산된 트랙별 확장 높이 px (stopDrag에서 커밋)
   let pendingClient = null;
   let rafId = null;
 
@@ -207,32 +237,72 @@ function handleMouseDown(event, axis, index) {
 
     const configured = props.sectionData?.config?.[ratioKey];
     const baselineRatio =
-      (Array.isArray(configured) && configured.length === ref.value) || configured.some((v) => typeof v !== 'number' || !(v > 0))
+      Array.isArray(configured) && configured.length === ref.value && configured.every((v) => typeof v === 'number' && v > 0)
         ? [...configured]
         : Array(ref.value).fill(1);
 
     const trackPx = getComputedStyle(container)
       [gridTemplateKey].split(' ')
+      .slice(0, ref.value)
       .map((v) => parseFloat(v));
 
-    // 총 Fr 계산
-    const totalFr = baselineRatio.reduce((sum, v) => sum + v, 0);
-    // 총 px 계산
-    const totalPx = trackPx.reduce((sum, v) => sum + v, 0);
-    // 1px당 Fr 계산
-    const frPerPx = totalFr / totalPx;
+    const prevIdx = index - 1; // 드래그 행 위쪽 행 인덱스
+    const nextIdx = index; // 드래그 행 인덱스
+
+    // 트랙 px = 비율 몫(basePx) + 확장 높이 몫(extraPx)
+    const baselineExtras = getExtraPx();
+    const basePx = trackPx.map((v, i) => v - baselineExtras[i]);
+
+    // 1px당 Fr 계산 - 드래그로 바뀌는 두 트랙의 비율 몫 기준 (확장 높이는 비율과 무관)
+    const frPerPx = (baselineRatio[prevIdx] + baselineRatio[nextIdx]) / (basePx[prevIdx] + basePx[nextIdx]);
+
+    // 요소 최소 크기 때문에 두 트랙이 가져야 하는 최소 px (확장 높이 포함한 트랙 전체 기준)
+    const { prevMinPx, nextMinPx } = _getElementMinPx(trackPx, prevIdx, nextIdx);
 
     dragSnapShot = {
       container,
       baselineRatio,
+      baselineExtras,
       frPerPx,
-      minFr: minPx * frPerPx, // 최소 Fr 계산
+      // 두 트랙이 각각 줄어들 수 있는 최대 px
+      prevShrinkPx: Math.max(0, trackPx[prevIdx] - Math.max(minPx, prevMinPx)),
+      nextShrinkPx: Math.max(0, trackPx[nextIdx] - Math.max(minPx, nextMinPx)),
+      // 비율 몫이 줄어들 수 있는 최대 px (미리보기에서도 행 최소 크기 유지)
+      prevBaseShrinkPx: Math.max(0, basePx[prevIdx] - minPx),
+      nextBaseShrinkPx: Math.max(0, basePx[nextIdx] - minPx),
     };
 
     document.addEventListener('mousemove', _startDragMove);
     document.addEventListener('mouseup', _stopDrag);
   }
 
+  // 드래그로 바뀌는 트랙(prev/next) 중 하나에만 걸친 요소 기준으로, 각 트랙이 가져야 하는 최소 px 계산
+  // (두 트랙 모두에 걸친 요소는 합이 그대로라 제약 없음)
+  function _getElementMinPx(trackPx, prevIdx, nextIdx) {
+    const gap = gridGap.value;
+    let prevMinPx = 0;
+    let nextMinPx = 0;
+
+    filteredElements.value.forEach((el) => {
+      const start = el.position[posKey] - 1; // 0-based 트랙 인덱스
+      const end = start + el.size[spanKey] - 1;
+      const coversPrev = start <= prevIdx && prevIdx <= end;
+      const coversNext = start <= nextIdx && nextIdx <= end;
+      if (coversPrev === coversNext) return;
+
+      const targetIdx = coversPrev ? prevIdx : nextIdx;
+      // 요소가 걸친 나머지 트랙 + gap 만큼은 이미 확보되어 있음
+      let otherPx = gap * (end - start);
+      for (let t = start; t <= end; t++) if (t !== targetIdx) otherPx += trackPx[t];
+
+      const required = getMinPx(el) - otherPx;
+      if (coversPrev) prevMinPx = Math.max(prevMinPx, required);
+      else nextMinPx = Math.max(nextMinPx, required);
+    });
+
+    return { prevMinPx, nextMinPx };
+  }
+
   function _startDragMove(e) {
     if (!dragSnapShot) return;
     pendingClient = e[clientKey];
@@ -243,26 +313,42 @@ function handleMouseDown(event, axis, index) {
     rafId = requestAnimationFrame(() => {
       rafId = null;
 
-      const { baselineRatio, frPerPx, minFr, container } = dragSnapShot;
+      const { baselineRatio, baselineExtras, frPerPx, prevShrinkPx, nextShrinkPx, prevBaseShrinkPx, nextBaseShrinkPx, container } =
+        dragSnapShot;
       const prevIdx = index - 1; // 드래그 행 위쪽 행 인덱스
       const nextIdx = index; // 드래그 행 인덱스
 
-      // 순수 이동량
-      let delta = (pendingClient - startPos.value[positionKey]) * frPerPx;
-      // 위쪽 행 작아지는 것 방지: 가장 커져도 minFr - baselineRatio[prevIdx] (음수값 = 위로 이동)
-      delta = Math.max(minFr - baselineRatio[prevIdx], delta);
-      // 아래쪽 행 작아지는 것 방지: 가장 작아져도 minFr (양수값 = 아래로 이동)
-      delta = Math.min(baselineRatio[nextIdx] - minFr, delta);
+      // 순수 이동량(px) - 양수 = 아래로 이동(위쪽 행 커짐), 음수 = 위로 이동(아래쪽 행 커짐)
+      // 두 트랙 모두 요소/행 최소 크기 이하로 작아지지 않도록 제한
+      const movePx = Math.min(Math.max(pendingClient - startPos.value[positionKey], -prevShrinkPx), nextShrinkPx);
+
+      // 줄어드는 트랙에서 옮길 px를 비율 몫 / 확장 높이 몫으로 나눔 - 확장 높이는 아래 행에 우선 배정
+      // 아래쪽 행이 줄어들 때: 비율 몫 먼저 → 최소치에 닿으면 확장 높이 몫을 위 행으로 넘김
+      // 위쪽 행이 줄어들 때: 넘겨받은 확장 높이 몫 먼저 아래 행으로 돌려줌 → 그다음 비율 몫
+      let ratioPx = 0; // 위쪽 행으로 옮겨지는 비율 몫 px (음수 = 아래쪽 행으로)
+      let extraPx = 0; // 위쪽 행으로 옮겨지는 확장 높이 몫 px (음수 = 아래쪽 행으로)
+      if (movePx >= 0) {
+        ratioPx = Math.min(movePx, nextBaseShrinkPx);
+        extraPx = Math.min(movePx - ratioPx, baselineExtras[nextIdx]);
+      } else {
+        extraPx = -Math.min(-movePx, baselineExtras[prevIdx]);
+        ratioPx = -Math.min(-movePx + extraPx, prevBaseShrinkPx);
+      }
 
       // 미리보기용
       const preview = [...baselineRatio];
-      preview[prevIdx] += delta;
-      preview[nextIdx] -= delta;
+      preview[prevIdx] += ratioPx * frPerPx;
+      preview[nextIdx] -= ratioPx * frPerPx;
+
+      const extras = [...baselineExtras];
+      extras[prevIdx] += extraPx;
+      extras[nextIdx] -= extraPx;
 
       liveRatio = preview;
+      liveExtras = extras;
 
       // 화면에만 즉시 반영
-      container.style.setProperty(cssVar, preview.map((v) => `${v}fr`).join(' '));
+      container.style.setProperty(cssVar, toSizes(preview, extras));
     });
   }
   function _stopDrag() {
@@ -271,12 +357,13 @@ function handleMouseDown(event, axis, index) {
     dragState.value.activeIdx = null;
 
     if (liveRatio) {
-      setSectionConfig(ratioKey, liveRatio);
+      setSectionConfig(ratioKey, toConfig(liveRatio, liveExtras));
     }
 
     startPos.value = { x: 0, y: 0 };
     dragSnapShot = null;
     liveRatio = null;
+    liveExtras = null;
     pendingClient = null;
     rafId = null;
 

package/src/components/Layout/PolarLayout.vue

@@ -17,9 +17,9 @@ const props = defineProps({
 <style scoped>
 .polar-grid {
   display: grid;
-  grid-template-columns: var(--grid-column-sizes, repeat(var(--grid-columns, 3), 1fr));
+  grid-template-columns: var(--grid-column-sizes, repeat(var(--grid-columns, 3), minmax(0, 1fr)));
   /* grid-template-rows: repeat(var(--grid-rows, 3), 1fr); */
-  grid-template-rows: var(--grid-row-sizes, repeat(var(--grid-rows, 3), 1fr));
+  grid-template-rows: var(--grid-row-sizes, repeat(var(--grid-rows, 3), minmax(0, 1fr)));
   gap: var(--grid-gap, 5px);
   width: 100%;
   height: 100%;

package/src/core/engines/GridDropEngine.js

@@ -1,4 +1,5 @@
 import { cloneDeep } from 'lodash-es';
+import { GRID_MIN_ROW_PX } from '../../utils/grid-track.js';
 
 // event 발행 시 'gridDrop'으로 시작하는 이름 사용
 class GridDropEngine {
@@ -245,12 +246,10 @@ class GridDropEngine {
    * @returns {object} - 스타일 객체
    */
   getElementStyle(type, cell) {
-    const MIN_CELL_PX = 20; // GridLayout.vue의 MIN_ROW_PX와 동일한 값
-
     if (type == 'empty') {
       return {
         gridArea: `${cell.row} / ${cell.col} / span 1 / span 1`,
-        minHeight: `${MIN_CELL_PX}px`,
+        minHeight: `${GRID_MIN_ROW_PX}px`,
       };
     } else if (type == 'element') {
       const { row, col } = cell.position;
@@ -258,7 +257,7 @@ class GridDropEngine {
 
       return {
         gridArea: `${row} / ${col} / span ${rowSpan} / span ${colSpan}`,
-        minHeight: `${cell.size?.h ?? MIN_CELL_PX}px`,
+        minHeight: `${cell.size?.h ?? GRID_MIN_ROW_PX}px`,
       };
     }
   }
@@ -477,10 +476,21 @@ class GridDropEngine {
         console.error('[GridDropEngine] 활성화된 배치요소를 찾을 수 없습니다.');
         return false;
       }
-      if (col === this._activeElement.position.col && row === this._activeElement.position.row) return;
 
-      this._activeElement.position.col = col;
-      this._activeElement.position.row = row;
+      // 요소 크기만큼 그리드 범위 안으로 제한 (범위를 벗어나면 GridLayout.filteredElements에서 제외되어 사라짐)
+      const { colSpan, rowSpan } = this._activeElement.size;
+      const { gridColumns, gridRows } = this._activeConfig ?? {};
+      const nextCol = Math.max(1, Math.min(col, (gridColumns ?? col) - colSpan + 1));
+      const nextRow = Math.max(1, Math.min(row, (gridRows ?? row) - rowSpan + 1));
+
+      if (nextCol === this._activeElement.position.col && nextRow === this._activeElement.position.row) return;
+
+      // 다른 요소와 겹치면 이동하지 않음
+      const nextPosition = { ...this._activeElement.position, col: nextCol, row: nextRow };
+      if (this._detectElementCollision(nextPosition, this._activeElement.size)) return;
+
+      this._activeElement.position.col = nextCol;
+      this._activeElement.position.row = nextRow;
 
       this.eventBus.emit('gridDrop:requestUpdateLocalBounds', {
         elementId: this._activeElement.id,

package/src/core/engines/LayoutEngine.js

@@ -12,6 +12,7 @@ class LayoutEngine {
     this.gridNumber = { column: 1, row: 1 }; // 레이아웃 그리드 수
     this.gridRatio = { column: [100], row: [100] }; // 레이아웃 그리드 비율
     this.gapSize = 8; // 레이아웃 갭 간격
+    this.canvasExtraHeight = 0; // 캔버스 확장 높이(px) - 마지막 행에 배정, 히스토리에 기록
 
     this._subscriptions = []; // 구독 해제 함수 저장용
     this._setupSubscriptions();
@@ -139,6 +140,7 @@ class LayoutEngine {
       gridNumber: this.gridNumber,
       gridRatio: this.gridRatio,
       gapSize: this.gapSize,
+      canvasExtraHeight: this.canvasExtraHeight,
     });
   }
 
@@ -154,6 +156,10 @@ class LayoutEngine {
       row: [...state.gridRatio?.row],
     };
     this.gapSize = state.gapSize;
+    // 이전 버전 스냅샷에는 값이 없으므로 있을 때만 복원
+    if (typeof state.canvasExtraHeight === 'number') {
+      this.canvasExtraHeight = state.canvasExtraHeight;
+    }
   }
 
   /** ---------------------------------- 공통 메소드 ---------------------------------- **/
@@ -278,6 +284,49 @@ class LayoutEngine {
     return { result: true, message: '갭 사이즈가 성공적으로 변경되었습니다.' };
   }
 
+  /** 캔버스 확장 높이 변경 (+ 확장분을 받는 섹션들의 gridRowExtra 일괄 변경)
+   * gridRowExtra: 편집 화면 전용 - 마지막 행에서 위 행으로 넘어간 확장 높이(px), 길이 = gridRows - 1
+   * (미리보기용 비율 gridRowRatio에는 확장 높이가 섞이지 않음)
+   * @param {number} height - 새로운 확장 높이(px)
+   * @param {object} rowExtras - { [sectionKey]: gridRowExtra[] } - 함께 바꿀 섹션 값 (축소로 넘어간 확장분이 줄어드는 경우)
+   * @param {boolean} record - 히스토리 기록 여부 (확장/축소 버튼 = true, 화면 전환 시 복원 = false)
+   */
+  setCanvasExtraHeight(height, rowExtras = {}, record = false) {
+    const value = Number(height);
+    if (!Number.isFinite(value) || value < 0) {
+      return { result: false, message: '잘못된 캔버스 확장 높이입니다.' };
+    }
+
+    const changedSections = {};
+    Object.entries(rowExtras ?? {}).forEach(([key, extra]) => {
+      const section = this.layoutData?.[key];
+      const gridRows = section?.config?.gridRows || 1;
+      if (!section || !Array.isArray(extra) || extra.length !== gridRows - 1 || extra.some((v) => typeof v !== 'number' || !(v >= 0))) return;
+
+      changedSections[key] = { ...section, config: { ...section.config, gridRowExtra: [...extra] } };
+    });
+
+    const sectionKeys = Object.keys(changedSections);
+    if (value === this.canvasExtraHeight && !sectionKeys.length) {
+      return { result: true, message: '변경 사항이 없습니다.' };
+    }
+
+    if (sectionKeys.length) {
+      this.layoutData = { ...this.layoutData, ...changedSections };
+    }
+    this.canvasExtraHeight = value;
+
+    this.eventBus.emit('layout:updateCanvasExtraHeight', {
+      $canvasExtraHeight: this.canvasExtraHeight,
+      $layoutData: this.layoutData,
+      $sections: sectionKeys,
+      $record: record,
+      timestamp: Date.now(),
+    });
+
+    return { result: true, message: '캔버스 확장 높이가 성공적으로 변경되었습니다.' };
+  }
+
   /** 섹션 비율 변경
    * @param {string} type - 'column' | 'row'
    * @param {number} index - 변경할 비율의 인덱스

package/src/core/managers/EngineManager.js

@@ -374,6 +374,17 @@ class EngineManager {
       });
     });
 
+    // 캔버스 확장/축소 - 확장 높이와 섹션 gridRowExtra를 한 번에 기록
+    this._subscribe('layout:updateCanvasExtraHeight', ({ $layoutData, $record }) => {
+      this.state.layoutData = $layoutData;
+
+      if (!$record) return;
+      this.eventBus.emit('system:historyCheckpoint', {
+        domain: 'layout',
+        state: this.getEngine('layout')?.getState() || null,
+      });
+    });
+
     this._subscribe('layout:updateGapSize', () => {
       this.eventBus.emit('system:historyCheckpoint', {
         domain: 'layout',
@@ -481,6 +492,7 @@ class EngineManager {
       gridRows: this.activeData.config?.gridRows || 2,
       gridGap: this.activeData.config?.gridGap || 4,
       gridRowRatio: this.activeData.config?.gridRowRatio || [],
+      gridRowExtra: this.activeData.config?.gridRowExtra || [],
       gridColumnRatio: this.activeData.config?.gridColumnRatio || [],
       showGuideLine: this.activeData.config?.showGuideLine || false,
     };
@@ -579,13 +591,21 @@ class EngineManager {
     if (type === 'guideLine') {
       newConfig = { showGuideLine: value };
     } else if (type === 'gridRowRatio') {
+      // 배열(비율만) 또는 { ratio, extra } (비율 + 위 행으로 넘어간 캔버스 확장분 px - 편집 화면 전용) - 한 번에 히스토리 기록
+      const ratio = Array.isArray(value) ? value : value?.ratio;
+      const extra = Array.isArray(value) ? undefined : value?.extra;
+
       // gridRowRatio 배열은 gridRows 길이와 일치해야 함
       const gridRows = this.activeData.config?.gridRows || 1;
-      if (!Array.isArray(value) || value.length !== gridRows || value.some((v) => typeof v !== 'number' || !(v > 0))) {
+      if (!Array.isArray(ratio) || ratio.length !== gridRows || ratio.some((v) => typeof v !== 'number' || !(v > 0))) {
         return { result: false, message: '잘못된 행 비율 값입니다.' };
       }
+      // gridRowExtra 배열은 gridRows - 1 길이와 일치해야 함
+      if (extra !== undefined && (!Array.isArray(extra) || extra.length !== gridRows - 1 || extra.some((v) => typeof v !== 'number' || !(v >= 0)))) {
+        return { result: false, message: '잘못된 행 확장 높이 값입니다.' };
+      }
 
-      newConfig = { gridRowRatio: value };
+      newConfig = extra === undefined ? { gridRowRatio: ratio } : { gridRowRatio: ratio, gridRowExtra: extra };
     } else if (type === 'gridColumnRatio') {
       // gridColumnRatio 배열은 gridColumns 길이와 일치해야 함
       const gridColumns = this.activeData.config?.gridColumns || 1;
@@ -614,7 +634,8 @@ class EngineManager {
       } else if (type === 'row') {
         // gridRows 변경되면 gridRowRatio 초기화
         // newConfig = { gridRows: value, gridRowRatio: [] };
-        newConfig = { gridRows: value, gridRowRatio: this._calculateGridRatio(type, value) };
+        // 행 개수가 바뀌면 위 행으로 넘어간 확장분도 초기화 (확장분 전체가 다시 마지막 행으로)
+        newConfig = { gridRows: value, gridRowRatio: this._calculateGridRatio(type, value), gridRowExtra: [] };
       } else if (type === 'gap') {
         newConfig = { gridGap: value };
       }
@@ -1073,6 +1094,7 @@ class EngineManager {
         gapSize: layoutEngine.gapSize,
         gridNumber: cloneDeep(layoutEngine.gridNumber),
         gridRatio: cloneDeep(layoutEngine.gridRatio),
+        canvasExtraHeight: layoutEngine.canvasExtraHeight,
       }),
 
       getFreeDropState: () => ({
@@ -1110,6 +1132,7 @@ class EngineManager {
         setLayoutName: (name, userData = null, setting = false) => layoutEngine.setLayoutName(name, userData, setting),
         setGapSize: (size) => layoutEngine.setGapSize(size),
         setRatio: (type, index, ratio) => layoutEngine.setRatio(type, index, ratio),
+        setCanvasExtraHeight: (height, rowExtras, record) => layoutEngine.setCanvasExtraHeight(height, rowExtras, record),
         // setUserLayoutData: (userData) => layoutEngine.setUserLayoutData(userData),
         setActiveSection: (name) => this.setActiveSection(name),
         updateActiveElement: (id, changes, emitEvent) => this.updateActiveElement(id, changes, emitEvent),

package/src/library/LayoutLibrary.js

@@ -17,6 +17,7 @@ function useLayout(api) {
     gapSize: null,
     gridNumber: {},
     gridRatio: {},
+    canvasExtraHeight: 0,
   });
 
   const _subscriptions = [];
@@ -82,6 +83,15 @@ function useLayout(api) {
       state.gridRatio[$type] = [...$gridRatio[$type]];
     });
 
+    // 캔버스 확장 높이 변경 감지 (축소 시 섹션 gridRowExtra가 함께 바뀜)
+    _subscribe('layout:updateCanvasExtraHeight', ({ $canvasExtraHeight, $layoutData, $sections }) => {
+      state.canvasExtraHeight = $canvasExtraHeight;
+      $sections.forEach((key) => {
+        state.layoutData[key] = { ...$layoutData[key] };
+        if (state.activeSection === key) state.activeConfig = $layoutData[key]?.config || null;
+      });
+    });
+
     // activeSection 변경 감지 (activeData가 함께 초기화됨)
     _subscribe('system:updateActiveSection', ({ $section, $mode, $config }) => {
       state.activeSection = $section;
@@ -132,6 +142,7 @@ function useLayout(api) {
           row: [...snapShot.layout.gridRatio.row],
         };
         state.gapSize = snapShot.layout.gapSize;
+        if (typeof snapShot.layout.canvasExtraHeight === 'number') state.canvasExtraHeight = snapShot.layout.canvasExtraHeight;
       }
 
       if (domain === 'manager') {
@@ -148,6 +159,7 @@ function useLayout(api) {
           row: [...snapShot.gridRatio.row],
         };
         state.gapSize = snapShot.gapSize;
+        if (typeof snapShot.canvasExtraHeight === 'number') state.canvasExtraHeight = snapShot.canvasExtraHeight;
       }
     });
   };
@@ -213,6 +225,14 @@ function useLayout(api) {
     }
   };
 
+  const setCanvasExtraHeight = (height, rowExtras = {}, record = false) => {
+    try {
+      return api.layout.setCanvasExtraHeight(height, rowExtras, record);
+    } catch (error) {
+      console.error('[useLayout] setCanvasExtraHeight 실행 중 오류 발생:', error);
+    }
+  };
+
   const setActiveSection = (name) => {
     try {
       api.layout.setActiveSection(name);
@@ -261,6 +281,7 @@ function useLayout(api) {
     setLayoutName,
     setGapSize,
     setRatio,
+    setCanvasExtraHeight,
     setActiveSection,
     setElements,
     updateActiveElement,

package/src/utils/grid-track.js

@@ -0,0 +1,96 @@
+// 그리드 행/셀 최소 높이(px) - 빈 셀 minHeight(GridDropEngine.getElementStyle), 행 크기 조절, 캔버스 축소 제한 공통
+export const GRID_MIN_ROW_PX = 20;
+
+// 그리드 행 트랙별 최소 높이(px) - 기본 GRID_MIN_ROW_PX, 요소가 걸친 행들은 합계가 요소 높이(size.h) 이상이 되도록
+// 여러 행에 걸친 요소: 행별 확장 높이 몫(extraPx)을 먼저 채우고, 모자란 높이는 행 비율(ratio)대로 나눔
+// → 행 크기가 요소를 만족하는 동안에는 각 행 실제 크기보다 작아서 레이아웃에 영향이 없고, 섹션이 작아질 때만 요소 높이를 지킴
+// @param {Array} ratio - 행 비율 (생략 시 균등), extraPx - 행별 확장 높이 몫 (getRowExtraPx 결과, 생략 시 0)
+export function getGridRowMinPx(elements, gridRows, ratio = [], gap = 0, extraPx = []) {
+  const mins = Array(gridRows).fill(GRID_MIN_ROW_PX);
+  const weight = (i) => (ratio[i] > 0 ? ratio[i] : 1);
+  const extra = (i) => extraPx[i] ?? 0;
+
+  elements.forEach((el) => {
+    const start = el.position.row - 1;
+    const end = start + el.size.rowSpan - 1;
+    if (start < 0 || end >= gridRows) return;
+
+    const rows = Array.from({ length: end - start + 1 }, (_, k) => start + k);
+    const totalWeight = rows.reduce((sum, i) => sum + weight(i), 0);
+    const totalExtra = rows.reduce((sum, i) => sum + extra(i), 0);
+    const lackPx = Math.max(0, (el.size.h ?? 0) - gap * (rows.length - 1) - totalExtra);
+
+    rows.forEach((i) => {
+      mins[i] = Math.max(mins[i], extra(i) + (lackPx * weight(i)) / totalWeight);
+    });
+  });
+  return mins;
+}
+
+// fr 비율 → grid-template 값
+// min을 auto(콘텐츠 크기) 대신 명시값으로 고정 - 콘텐츠 크기가 트랙을 고정하면 남은 공간이 다른 트랙으로 재분배됨
+export function toGridTrackSizes(ratio, minPx = []) {
+  return ratio.map((r, i) => `minmax(${minPx[i] ?? 0}px, ${r}fr)`).join(' ');
+}
+
+// fr 비율 → grid-template-rows 값 (마지막 행만 추가 높이를 가져가도록)
+// 마지막 행을 제외한 행은 (컨테이너 높이 - 추가 높이 - gap 합) 기준 비율 + 위 행으로 넘어간 추가 높이(rowExtraPx)로 고정하고,
+// 남는 높이는 마지막 행(1fr)이 전부 가져감
+// → 캔버스 확장(CanvasContainer.additionalHeight) 시 전체 행에 나눠지지 않고 마지막 행만 늘어나며, 비율(ratio)에는 추가 높이가 섞이지 않음
+export function toGridRowSizes(ratio, minPx = [], gap = 0, extraPx = 0, rowExtraPx = []) {
+  const sum = ratio.reduce((acc, r) => acc + r, 0) || 1;
+  const fixedPx = extraPx + gap * (ratio.length - 1);
+  const toMin = (i) => (typeof minPx[i] === 'string' ? minPx[i] : `${minPx[i] ?? 0}px`);
+  const toSize = (r, i) => {
+    const base = `(100% - ${fixedPx}px) * ${r / sum}`;
+    return rowExtraPx[i] > 0 ? `calc(${base} + ${rowExtraPx[i]}px)` : `calc(${base})`;
+  };
+
+  return ratio.map((r, i) => (i === ratio.length - 1 ? `minmax(${toMin(i)}, 1fr)` : `minmax(${toMin(i)}, ${toSize(r, i)})`)).join(' ');
+}
+
+// 편집 화면 전용 - 행별 확장 높이 몫(px), 길이 = 행 개수
+// 위 행들은 마지막 행에서 넘어간 몫(gridRowExtra), 마지막 행은 나머지 전부
+// 확장 높이가 없으면(미리보기/마지막 행이 아닌 섹션) 전부 0, gridRowExtra 합계가 확장 높이를 넘으면 비례 축소
+export function getRowExtraPx(rowExtra, gridRows, extraPx) {
+  const shares = Array(gridRows).fill(0);
+  if (!(extraPx > 0)) return shares;
+
+  const moved = Array.isArray(rowExtra) && rowExtra.length === gridRows - 1 ? rowExtra.map((v) => (v > 0 ? v : 0)) : [];
+  const sum = moved.reduce((acc, v) => acc + v, 0);
+  const scale = sum > extraPx ? extraPx / sum : 1;
+  moved.forEach((v, i) => (shares[i] = v * scale));
+  shares[gridRows - 1] = extraPx - sum * scale;
+  return shares;
+}
+
+// 그리드 섹션 grid-template-rows 값 - BaseLayout/GridLayout 공용
+// 확장 높이를 받지 않는 섹션은 일반 fr 비율, 받는 섹션은 비율 + 확장 높이 몫
+export function toSectionRowSizes(ratio, minPx = [], gap = 0, extraPx = 0, rowExtra = []) {
+  if (!(extraPx > 0)) return toGridTrackSizes(ratio, minPx);
+  return toGridRowSizes(ratio, minPx, gap, extraPx, getRowExtraPx(rowExtra, ratio.length, extraPx));
+}
+
+// 행 px(trackPx)가 행 최소 높이와 요소 최소 높이(GridDropEngine.getElementStyle의 minHeight)를 모두 만족하는지
+// rows(0-based 행 인덱스 배열)를 넘기면 해당 행과 그 행에 걸친 요소만 검사 (바뀌지 않은 행의 기존 상태는 무시)
+export function satisfiesGridRowMin(elements, trackPx, gap, minRowPx, rows = null) {
+  const EPS = 0.5;
+  const checkRows = rows ?? trackPx.map((_, i) => i);
+  if (checkRows.some((i) => trackPx[i] < minRowPx - EPS)) return false;
+
+  return elements.every((el) => {
+    const start = el.position.row - 1;
+    const end = start + el.size.rowSpan - 1;
+    if (!checkRows.some((i) => start <= i && i <= end)) return true;
+
+    let px = gap * (end - start);
+    for (let t = start; t <= end; t++) px += trackPx[t] ?? 0;
+    return px >= (el.size.h ?? minRowPx) - EPS;
+  });
+}
+
+// 섹션이 BaseLayout의 마지막 행에 걸쳐 있는지 (layoutPosition.row는 0-based) - 캔버스 추가 높이를 받는 섹션
+export function isInLastLayoutRow(section, layoutRowCount) {
+  const { row = 0, rowSpan = 1 } = section?.layoutPosition ?? {};
+  return row + rowSpan >= (layoutRowCount || 1);
+}