From d8bba7cfc1474b0713bdf78d31ac579ac67e62c1 Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 10 Nov 2025 14:45:19 +0900 Subject: [PATCH] =?UTF-8?q?wip:=20=EA=B2=A9=EC=9E=90=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=20=ED=98=B8=EC=B6=9C=EC=9D=84=2010px=20=EC=8A=A4=EB=83=85?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=9D=BC=EA=B4=84=20=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - snapToGrid -> snapPositionTo10px - snapSizeToGrid -> snapSizeTo10px - 격자 라인을 10px 단위로 변경 - gridInfo 의존성 제거 (진행중) --- frontend/components/screen/ScreenDesigner.tsx | 85 ++++++------------- 1 file changed, 27 insertions(+), 58 deletions(-) diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index bb62f17e..981cb66d 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -287,55 +287,24 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD const canvasRef = useRef(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,