kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

wip: 격자 함수 호출을 10px 스냅으로 일괄 교체 

- snapToGrid -> snapPositionTo10px
- snapSizeToGrid -> snapSizeTo10px
- 격자 라인을 10px 단위로 변경
- gridInfo 의존성 제거 (진행중)
This commit is contained in:
kjs 2025-11-10 14:45:19 +09:00
parent 554cdbdea5
commit d8bba7cfc1
1 changed files with 27 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
frontend/components/screen/ScreenDesigner.tsx
View File

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