chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

캔버스 크기 조절

Browse Source
This commit is contained in:
dohyeons
2025-10-13 18:09:20 +09:00
parent 39e3aa14cb
commit 3672bbd997
4 changed files with 37 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/components/admin/dashboard/DashboardCanvas.tsx
View File

@@ -36,30 +36,6 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
ref,
) => {
const [isDragOver, setIsDragOver] = useState(false);
const [cellSize, setCellSize] = useState(60);
// 화면 크기에 따라 셀 크기 동적 계산
useEffect(() => {
const updateCellSize = () => {
if (!ref || typeof ref === "function" || !ref.current) return;
const container = ref.current.parentElement;
if (!container) return;
// 컨테이너 너비에서 여백 제외
const availableWidth = container.clientWidth - 32; // 좌우 패딩
// 12 컬럼 + 11개 gap을 고려한 셀 크기 계산
const calculatedCellSize = Math.floor((availableWidth - 11 * GRID_CONFIG.GAP) / GRID_CONFIG.COLUMNS);
setCellSize(calculatedCellSize);
};
updateCellSize();
window.addEventListener("resize", updateCellSize);
return () => window.removeEventListener("resize", updateCellSize);
}, [ref]);
// 드래그 오버 처리
const handleDragOver = useCallback((e: React.DragEvent) => {
@@ -93,16 +69,16 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
const rawX = e.clientX - rect.left + (ref.current?.scrollLeft || 0);
const rawY = e.clientY - rect.top + (ref.current?.scrollTop || 0);
// 그리드에 스냅 (동적 셀 크기 사용)
const snappedX = snapToGrid(rawX, cellSize);
const snappedY = snapToGrid(rawY, cellSize);
// 그리드에 스냅 (고정 셀 크기 사용)
const snappedX = snapToGrid(rawX, GRID_CONFIG.CELL_SIZE);
const snappedY = snapToGrid(rawY, GRID_CONFIG.CELL_SIZE);
onCreateElement(dragData.type, dragData.subtype, snappedX, snappedY);
} catch (error) {
// console.error('드롭 데이터 파싱 오류:', error);
}
},
[ref, onCreateElement, cellSize],
[ref, onCreateElement],
);
// 캔버스 클릭 시 선택 해제
@@ -115,19 +91,20 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
[onSelectElement],
);
// 그리드 크기 계산 (동적)
const cellWithGap = cellSize + GRID_CONFIG.GAP;
// 고정 그리드 크기
const cellWithGap = GRID_CONFIG.CELL_SIZE + GRID_CONFIG.GAP;
const gridSize = `${cellWithGap}px ${cellWithGap}px`;
return (
<div
ref={ref}
className={`relative min-h-full w-full bg-gray-50 ${isDragOver ? "bg-blue-50/50" : ""} `}
className={`relative min-h-screen rounded-lg bg-gray-50 shadow-inner ${isDragOver ? "bg-blue-50/50" : ""} `}
style={{
// 12 컬럼 그리드 배경 (동적 크기)
width: `${GRID_CONFIG.CANVAS_WIDTH}px`,
// 12 컬럼 그리드 배경
backgroundImage: `
linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px)
linear-gradient(rgba(59, 130, 246, 0.15) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.15) 1px, transparent 1px)
`,
backgroundSize: gridSize,
backgroundPosition: "0 0",
@@ -144,7 +121,7 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
key={element.id}
element={element}
isSelected={selectedElement === element.id}
cellSize={cellSize}
cellSize={GRID_CONFIG.CELL_SIZE}
onUpdate={onUpdateElement}
onRemove={onRemoveElement}
onSelect={onSelectElement}