wip: 격자 함수 호출을 10px 스냅으로 일괄 교체
- snapToGrid -> snapPositionTo10px - snapSizeToGrid -> snapSizeTo10px - 격자 라인을 10px 단위로 변경 - gridInfo 의존성 제거 (진행중)
This commit is contained in:
parent
554cdbdea5
commit
d8bba7cfc1
|
|
@ -287,55 +287,24 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
|
||||
const canvasRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// 격자 정보 계산
|
||||
const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 });
|
||||
|
||||
const gridInfo = useMemo(() => {
|
||||
if (!layout.gridSettings) return null;
|
||||
|
||||
// 캔버스 크기 계산 (해상도 설정 우선)
|
||||
let width = screenResolution.width;
|
||||
let height = screenResolution.height;
|
||||
|
||||
// 해상도가 설정되지 않은 경우 기본값 사용
|
||||
if (!width || !height) {
|
||||
width = canvasSize.width || window.innerWidth - 100;
|
||||
height = canvasSize.height || window.innerHeight - 200;
|
||||
}
|
||||
|
||||
const newGridInfo = calculateGridInfo(width, height, {
|
||||
columns: layout.gridSettings.columns,
|
||||
gap: layout.gridSettings.gap,
|
||||
padding: layout.gridSettings.padding,
|
||||
snapToGrid: layout.gridSettings.snapToGrid || false,
|
||||
});
|
||||
|
||||
return newGridInfo;
|
||||
}, [layout.gridSettings, screenResolution]);
|
||||
|
||||
// 격자 라인 생성
|
||||
// 10px 격자 라인 생성 (시각적 가이드용)
|
||||
const gridLines = useMemo(() => {
|
||||
if (!gridInfo || !layout.gridSettings?.showGrid) return [];
|
||||
if (!layout.gridSettings?.showGrid) return [];
|
||||
|
||||
// 캔버스 크기는 해상도 크기 사용
|
||||
const width = screenResolution.width;
|
||||
const height = screenResolution.height;
|
||||
const lines: Array<{ type: "vertical" | "horizontal"; position: number }> = [];
|
||||
|
||||
const lines = generateGridLines(width, height, {
|
||||
columns: layout.gridSettings.columns,
|
||||
gap: layout.gridSettings.gap,
|
||||
padding: layout.gridSettings.padding,
|
||||
snapToGrid: layout.gridSettings.snapToGrid || false,
|
||||
});
|
||||
// 10px 단위로 격자 라인 생성
|
||||
for (let x = 0; x <= width; x += 10) {
|
||||
lines.push({ type: "vertical", position: x });
|
||||
}
|
||||
for (let y = 0; y <= height; y += 10) {
|
||||
lines.push({ type: "horizontal", position: y });
|
||||
}
|
||||
|
||||
// 수직선과 수평선을 하나의 배열로 합치기
|
||||
const allLines = [
|
||||
...lines.verticalLines.map((pos) => ({ type: "vertical" as const, position: pos })),
|
||||
...lines.horizontalLines.map((pos) => ({ type: "horizontal" as const, position: pos })),
|
||||
];
|
||||
|
||||
return allLines;
|
||||
}, [gridInfo, layout.gridSettings, screenResolution]);
|
||||
return lines;
|
||||
}, [layout.gridSettings?.showGrid, screenResolution.width, screenResolution.height]);
|
||||
|
||||
// 필터된 테이블 목록
|
||||
const filteredTables = useMemo(() => {
|
||||
|
|
@ -553,7 +522,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
padding: prevLayout.gridSettings.padding,
|
||||
snapToGrid: prevLayout.gridSettings.snapToGrid || false,
|
||||
});
|
||||
const snappedSize = snapSizeToGrid(
|
||||
const snappedSize = snapSizeTo10px(
|
||||
newComp.size,
|
||||
currentGridInfo,
|
||||
prevLayout.gridSettings as GridUtilSettings,
|
||||
|
|
@ -640,7 +609,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
};
|
||||
} else if (newComp.type !== "group") {
|
||||
// 그룹이 아닌 일반 컴포넌트만 격자 스냅 적용
|
||||
const snappedPosition = snapToGrid(
|
||||
const snappedPosition = snapPositionTo10px(
|
||||
newComp.position,
|
||||
currentGridInfo,
|
||||
layout.gridSettings as GridUtilSettings,
|
||||
|
|
@ -1103,8 +1072,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
};
|
||||
|
||||
const adjustedComponents = layout.components.map((comp) => {
|
||||
const snappedPosition = snapToGrid(comp.position, newGridInfo, gridUtilSettings);
|
||||
const snappedSize = snapSizeToGrid(comp.size, newGridInfo, gridUtilSettings);
|
||||
const snappedPosition = snapPositionTo10px(comp.position, newGridInfo, gridUtilSettings);
|
||||
const snappedSize = snapSizeTo10px(comp.size, newGridInfo, gridUtilSettings);
|
||||
|
||||
// gridColumns가 없거나 범위를 벗어나면 자동 조정
|
||||
let adjustedGridColumns = comp.gridColumns;
|
||||
|
|
@ -1218,8 +1187,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
};
|
||||
|
||||
finalComponents = scaledComponents.map((comp) => {
|
||||
const snappedPosition = snapToGrid(comp.position, newGridInfo, gridUtilSettings);
|
||||
const snappedSize = snapSizeToGrid(comp.size, newGridInfo, gridUtilSettings);
|
||||
const snappedPosition = snapPositionTo10px(comp.position, newGridInfo, gridUtilSettings);
|
||||
const snappedSize = snapSizeTo10px(comp.size, newGridInfo, gridUtilSettings);
|
||||
|
||||
// gridColumns 재계산
|
||||
const adjustedGridColumns = adjustGridColumnsFromSize({ size: snappedSize }, newGridInfo, gridUtilSettings);
|
||||
|
|
@ -1288,8 +1257,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
};
|
||||
|
||||
const adjustedComponents = layout.components.map((comp) => {
|
||||
const snappedPosition = snapToGrid(comp.position, currentGridInfo, gridUtilSettings);
|
||||
const snappedSize = snapSizeToGrid(comp.size, currentGridInfo, gridUtilSettings);
|
||||
const snappedPosition = snapPositionTo10px(comp.position, currentGridInfo, gridUtilSettings);
|
||||
const snappedSize = snapSizeTo10px(comp.size, currentGridInfo, gridUtilSettings);
|
||||
|
||||
// gridColumns가 없거나 범위를 벗어나면 자동 조정
|
||||
let adjustedGridColumns = comp.gridColumns;
|
||||
|
|
@ -1424,7 +1393,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
// 격자 스냅 적용
|
||||
const snappedPosition =
|
||||
layout.gridSettings?.snapToGrid && currentGridInfo
|
||||
? snapToGrid({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
|
||||
? snapPositionTo10px({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
|
||||
: { x: dropX, y: dropY, z: 1 };
|
||||
|
||||
console.log("🎨 템플릿 드롭:", {
|
||||
|
|
@ -1456,7 +1425,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
// 격자 스냅 적용
|
||||
const finalPosition =
|
||||
layout.gridSettings?.snapToGrid && currentGridInfo
|
||||
? snapToGrid({ x: absoluteX, y: absoluteY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
|
||||
? snapPositionTo10px({ x: absoluteX, y: absoluteY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
|
||||
: { x: absoluteX, y: absoluteY, z: 1 };
|
||||
|
||||
if (templateComp.type === "container") {
|
||||
|
|
@ -1839,7 +1808,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
// 격자 스냅 적용
|
||||
const snappedPosition =
|
||||
layout.gridSettings?.snapToGrid && currentGridInfo
|
||||
? snapToGrid({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
|
||||
? snapPositionTo10px({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
|
||||
: { x: dropX, y: dropY, z: 1 };
|
||||
|
||||
console.log("🏗️ 레이아웃 드롭 (줌 보정):", {
|
||||
|
|
@ -2028,7 +1997,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
// 격자 스냅 적용
|
||||
const snappedPosition =
|
||||
layout.gridSettings?.snapToGrid && currentGridInfo
|
||||
? snapToGrid({ x: boundedX, y: boundedY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
|
||||
? snapPositionTo10px({ x: boundedX, y: boundedY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
|
||||
: { x: boundedX, y: boundedY, z: 1 };
|
||||
|
||||
console.log("🧩 컴포넌트 드롭:", {
|
||||
|
|
@ -2666,8 +2635,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
padding: layout.gridSettings.padding,
|
||||
snapToGrid: layout.gridSettings.snapToGrid || false,
|
||||
};
|
||||
newComponent.position = snapToGrid(newComponent.position, currentGridInfo, gridUtilSettings);
|
||||
newComponent.size = snapSizeToGrid(newComponent.size, currentGridInfo, gridUtilSettings);
|
||||
newComponent.position = snapPositionTo10px(newComponent.position, currentGridInfo, gridUtilSettings);
|
||||
newComponent.size = snapSizeTo10px(newComponent.size, currentGridInfo, gridUtilSettings);
|
||||
|
||||
console.log("🧲 새 컴포넌트 격자 스냅 적용:", {
|
||||
type: newComponent.type,
|
||||
|
|
@ -2980,7 +2949,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
|||
|
||||
// 일반 컴포넌트 및 플로우 버튼 그룹에 격자 스냅 적용 (일반 그룹 제외)
|
||||
if (draggedComponent?.type !== "group" && layout.gridSettings?.snapToGrid && currentGridInfo) {
|
||||
finalPosition = snapToGrid(
|
||||
finalPosition = snapPositionTo10px(
|
||||
{
|
||||
x: dragState.currentPosition.x,
|
||||
y: dragState.currentPosition.y,
|
||||
|
|
|
|||
Loading…
Reference in New Issue