자동 수직 정렬 기능 추가: ScreenViewPage에서 같은 X 영역 내 컴포넌트들이 겹치지 않도록 자동으로 Y 위치를 조정하는 로직을 구현하였습니다. 또한, RepeatContainerComponent에서 고정 높이 대신 자동 높이를 사용하도록 변경하여 내부 콘텐츠가 커질 때 유연하게 대응할 수 있도록 개선하였습니다.
This commit is contained in:
parent
9d74baf60a
commit
b4bfb9964f
|
|
@ -489,8 +489,73 @@ function ScreenViewPage() {
|
|||
(c as any).componentType === "conditional-container",
|
||||
);
|
||||
|
||||
// TableSearchWidget 및 조건부 컨테이너 높이 차이를 계산하여 Y 위치 조정
|
||||
const adjustedComponents = regularComponents.map((component) => {
|
||||
// 🆕 같은 X 영역(섹션)에서 컴포넌트들이 겹치지 않도록 자동 수직 정렬
|
||||
const autoLayoutComponents = (() => {
|
||||
// X 위치 기준으로 섹션 그룹화 (50px 오차 범위)
|
||||
const X_THRESHOLD = 50;
|
||||
const GAP = 16; // 컴포넌트 간 간격
|
||||
|
||||
// 컴포넌트를 X 섹션별로 그룹화
|
||||
const sections: Map<number, typeof regularComponents> = new Map();
|
||||
|
||||
regularComponents.forEach((comp) => {
|
||||
const x = comp.position.x;
|
||||
let foundSection = false;
|
||||
|
||||
for (const [sectionX, components] of sections.entries()) {
|
||||
if (Math.abs(x - sectionX) < X_THRESHOLD) {
|
||||
components.push(comp);
|
||||
foundSection = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!foundSection) {
|
||||
sections.set(x, [comp]);
|
||||
}
|
||||
});
|
||||
|
||||
// 각 섹션 내에서 Y 위치 순으로 정렬 후 자동 배치
|
||||
const adjustedMap = new Map<string, typeof regularComponents[0]>();
|
||||
|
||||
for (const [sectionX, components] of sections.entries()) {
|
||||
// 섹션 내 2개 이상 컴포넌트가 있을 때만 자동 배치
|
||||
if (components.length >= 2) {
|
||||
// Y 위치 순으로 정렬
|
||||
const sorted = [...components].sort((a, b) => a.position.y - b.position.y);
|
||||
|
||||
let currentY = sorted[0].position.y;
|
||||
|
||||
sorted.forEach((comp, index) => {
|
||||
if (index === 0) {
|
||||
adjustedMap.set(comp.id, comp);
|
||||
} else {
|
||||
// 이전 컴포넌트 아래로 배치
|
||||
const prevComp = sorted[index - 1];
|
||||
const prevAdjusted = adjustedMap.get(prevComp.id) || prevComp;
|
||||
const prevBottom = prevAdjusted.position.y + (prevAdjusted.size?.height || 100);
|
||||
const newY = prevBottom + GAP;
|
||||
|
||||
adjustedMap.set(comp.id, {
|
||||
...comp,
|
||||
position: {
|
||||
...comp.position,
|
||||
y: newY,
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 단일 컴포넌트는 그대로
|
||||
components.forEach((comp) => adjustedMap.set(comp.id, comp));
|
||||
}
|
||||
}
|
||||
|
||||
return regularComponents.map((comp) => adjustedMap.get(comp.id) || comp);
|
||||
})();
|
||||
|
||||
// TableSearchWidget 및 조건부 컨테이너 높이 차이를 계산하여 Y 위치 추가 조정
|
||||
const adjustedComponents = autoLayoutComponents.map((component) => {
|
||||
const isTableSearchWidget = (component as any).componentId === "table-search-widget";
|
||||
const isConditionalContainer = (component as any).componentId === "conditional-container";
|
||||
|
||||
|
|
@ -511,30 +576,15 @@ function ScreenViewPage() {
|
|||
}
|
||||
}
|
||||
|
||||
// 🆕 조건부 컨테이너 높이 조정
|
||||
// 조건부 컨테이너 높이 조정
|
||||
for (const container of conditionalContainers) {
|
||||
const isBelow = component.position.y > container.position.y;
|
||||
const actualHeight = conditionalContainerHeights[container.id];
|
||||
const originalHeight = container.size?.height || 200;
|
||||
const heightDiff = actualHeight ? actualHeight - originalHeight : 0;
|
||||
|
||||
console.log(`🔍 높이 조정 체크:`, {
|
||||
componentId: component.id,
|
||||
componentY: component.position.y,
|
||||
containerY: container.position.y,
|
||||
isBelow,
|
||||
actualHeight,
|
||||
originalHeight,
|
||||
heightDiff,
|
||||
containerId: container.id,
|
||||
containerSize: container.size,
|
||||
});
|
||||
|
||||
if (isBelow && heightDiff > 0) {
|
||||
totalHeightAdjustment += heightDiff;
|
||||
console.log(
|
||||
`📐 컴포넌트 ${component.id} 위치 조정: ${heightDiff}px (조건부 컨테이너 ${container.id})`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -307,12 +307,15 @@ export function RepeatContainerComponent({
|
|||
return {
|
||||
minWidth: itemMinWidth,
|
||||
maxWidth: itemMaxWidth,
|
||||
height: itemHeight,
|
||||
// height 대신 minHeight 사용 - 내부 컨텐츠가 커지면 자동으로 높이 확장
|
||||
minHeight: itemHeight || "auto",
|
||||
height: "auto", // 고정 높이 대신 auto로 변경
|
||||
backgroundColor: backgroundColor || "#ffffff",
|
||||
borderRadius: borderRadius || "8px",
|
||||
padding: padding || "16px",
|
||||
border: showBorder ? "1px solid #e5e7eb" : "none",
|
||||
boxShadow: showShadow ? "0 1px 3px rgba(0,0,0,0.1)" : "none",
|
||||
overflow: "visible", // 내부 컨텐츠가 튀어나가지 않도록
|
||||
};
|
||||
}, [itemMinWidth, itemMaxWidth, itemHeight, backgroundColor, borderRadius, padding, showBorder, showShadow]);
|
||||
|
||||
|
|
@ -343,11 +346,11 @@ export function RepeatContainerComponent({
|
|||
_isLast: context.isLast,
|
||||
};
|
||||
|
||||
// 슬롯에 배치된 컴포넌트들을 렌더링
|
||||
// 슬롯에 배치된 컴포넌트들을 렌더링 (Flow 레이아웃으로 변경)
|
||||
return (
|
||||
<div className="relative" style={{ minHeight: "50px" }}>
|
||||
<div className="flex flex-col gap-3">
|
||||
{slotChildren.map((childComp: SlotComponentConfig) => {
|
||||
const { position = { x: 0, y: 0 }, size = { width: 200, height: 40 } } = childComp;
|
||||
const { size = { width: "100%", height: "auto" } } = childComp;
|
||||
|
||||
// DynamicComponentRenderer가 기대하는 형식으로 변환
|
||||
const componentData = {
|
||||
|
|
@ -355,8 +358,11 @@ export function RepeatContainerComponent({
|
|||
componentType: childComp.componentType,
|
||||
label: childComp.label,
|
||||
columnName: childComp.fieldName,
|
||||
position: { ...position, z: 1 },
|
||||
size,
|
||||
position: { x: 0, y: 0, z: 1 },
|
||||
size: {
|
||||
width: typeof size.width === "number" ? size.width : undefined,
|
||||
height: typeof size.height === "number" ? size.height : undefined,
|
||||
},
|
||||
componentConfig: childComp.componentConfig,
|
||||
style: childComp.style,
|
||||
};
|
||||
|
|
@ -364,12 +370,10 @@ export function RepeatContainerComponent({
|
|||
return (
|
||||
<div
|
||||
key={componentData.id}
|
||||
className="absolute"
|
||||
className="w-full"
|
||||
style={{
|
||||
left: position.x || 0,
|
||||
top: position.y || 0,
|
||||
width: size.width || 200,
|
||||
height: size.height || 40,
|
||||
// 너비는 100%로, 높이는 자동으로
|
||||
minHeight: typeof size.height === "number" ? size.height : "auto",
|
||||
}}
|
||||
>
|
||||
<DynamicComponentRenderer
|
||||
|
|
|
|||
Loading…
Reference in New Issue