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

달력과 투두리스트 합침, 배경색변경가능, 위젯끼리 밀어내는 기능과 세밀한 그리드 추가, 범용위젯 복구

Browse Source
This commit is contained in:
leeheejin
2025-10-17 09:49:02 +09:00
parent 7097775343
commit fa08a26079
13 changed files with 992 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
frontend/components/admin/dashboard/CanvasElement.tsx
View File

@@ -208,7 +208,7 @@ export function CanvasElement({
const deltaX = e.clientX - dragStart.x;
const deltaY = e.clientY - dragStart.y;
// 임시 위치 계산 (스냅 안 됨)
// 임시 위치 계산
let rawX = Math.max(0, dragStart.elementX + deltaX);
const rawY = Math.max(0, dragStart.elementY + deltaY);
@@ -216,7 +216,26 @@ export function CanvasElement({
const maxX = canvasWidth - element.size.width;
rawX = Math.min(rawX, maxX);
setTempPosition({ x: rawX, y: rawY });
// 드래그 중 실시간 스냅 (마그네틱 스냅)
const subGridSize = Math.floor(cellSize / 3);
const gridSize = cellSize + 5; // GAP 포함한 실제 그리드 크기
const magneticThreshold = 15; // 큰 그리드에 끌리는 거리 (px)
// X 좌표 스냅 (큰 그리드 우선, 없으면 서브그리드)
const nearestGridX = Math.round(rawX / gridSize) * gridSize;
const distToGridX = Math.abs(rawX - nearestGridX);
const snappedX = distToGridX <= magneticThreshold
? nearestGridX
: Math.round(rawX / subGridSize) * subGridSize;
// Y 좌표 스냅 (큰 그리드 우선, 없으면 서브그리드)
const nearestGridY = Math.round(rawY / gridSize) * gridSize;
const distToGridY = Math.abs(rawY - nearestGridY);
const snappedY = distToGridY <= magneticThreshold
? nearestGridY
: Math.round(rawY / subGridSize) * subGridSize;
setTempPosition({ x: snappedX, y: snappedY });
} else if (isResizing) {
const deltaX = e.clientX - resizeStart.x;
const deltaY = e.clientY - resizeStart.y;
@@ -259,46 +278,85 @@ export function CanvasElement({
const maxWidth = canvasWidth - newX;
newWidth = Math.min(newWidth, maxWidth);
// 임시 크기/위치 저장 (스냅 안 됨)
setTempPosition({ x: Math.max(0, newX), y: Math.max(0, newY) });
setTempSize({ width: newWidth, height: newHeight });
// 리사이즈 중 실시간 스냅 (마그네틱 스냅)
const subGridSize = Math.floor(cellSize / 3);
const gridSize = cellSize + 5; // GAP 포함한 실제 그리드 크기
const magneticThreshold = 15;
// 위치 스냅
const nearestGridX = Math.round(newX / gridSize) * gridSize;
const distToGridX = Math.abs(newX - nearestGridX);
const snappedX = distToGridX <= magneticThreshold
? nearestGridX
: Math.round(newX / subGridSize) * subGridSize;
const nearestGridY = Math.round(newY / gridSize) * gridSize;
const distToGridY = Math.abs(newY - nearestGridY);
const snappedY = distToGridY <= magneticThreshold
? nearestGridY
: Math.round(newY / subGridSize) * subGridSize;
// 크기 스냅 (그리드 칸 단위로 스냅하되, 마지막 GAP은 제외)
// 예: 1칸 = cellSize, 2칸 = cellSize*2 + GAP, 3칸 = cellSize*3 + GAP*2
const calculateGridWidth = (cells: number) => cells * cellSize + Math.max(0, cells - 1) * 5;
// 가장 가까운 그리드 칸 수 계산
const nearestWidthCells = Math.round(newWidth / gridSize);
const nearestGridWidth = calculateGridWidth(nearestWidthCells);
const distToGridWidth = Math.abs(newWidth - nearestGridWidth);
const snappedWidth = distToGridWidth <= magneticThreshold
? nearestGridWidth
: Math.round(newWidth / subGridSize) * subGridSize;
const nearestHeightCells = Math.round(newHeight / gridSize);
const nearestGridHeight = calculateGridWidth(nearestHeightCells);
const distToGridHeight = Math.abs(newHeight - nearestGridHeight);
const snappedHeight = distToGridHeight <= magneticThreshold
? nearestGridHeight
: Math.round(newHeight / subGridSize) * subGridSize;
// 임시 크기/위치 저장 (스냅됨)
setTempPosition({ x: Math.max(0, snappedX), y: Math.max(0, snappedY) });
setTempSize({ width: snappedWidth, height: snappedHeight });
}
},
[isDragging, isResizing, dragStart, resizeStart, element.size.width, element.type, element.subtype, canvasWidth],
[isDragging, isResizing, dragStart, resizeStart, element.size.width, element.type, element.subtype, canvasWidth, cellSize],
);
// 마우스 업 처리 (그리드 스냅 적용)
// 마우스 업 처리 (이미 스냅된 위치 사용)
const handleMouseUp = useCallback(() => {
if (isDragging && tempPosition) {
// 드래그 종료 시 그리드에 스냅 (동적 셀 크기 사용)
let snappedX = snapToGrid(tempPosition.x, cellSize);
const snappedY = snapToGrid(tempPosition.y, cellSize);
// tempPosition은 이미 드래그 중에 마그네틱 스냅 적용됨
// 다시 스냅하지 않고 그대로 사용!
let finalX = tempPosition.x;
const finalY = tempPosition.y;
// X 좌표가 캔버스 너비를 벗어나지 않도록 최종 제한
const maxX = canvasWidth - element.size.width;
snappedX = Math.min(snappedX, maxX);
finalX = Math.min(finalX, maxX);
onUpdate(element.id, {
position: { x: snappedX, y: snappedY },
position: { x: finalX, y: finalY },
});
setTempPosition(null);
}
if (isResizing && tempPosition && tempSize) {
// 리사이즈 종료 시 그리드에 스냅 (동적 셀 크기 사용)
const snappedX = snapToGrid(tempPosition.x, cellSize);
const snappedY = snapToGrid(tempPosition.y, cellSize);
let snappedWidth = snapSizeToGrid(tempSize.width, 2, cellSize);
const snappedHeight = snapSizeToGrid(tempSize.height, 2, cellSize);
// tempPosition과 tempSize는 이미 리사이즈 중에 마그네틱 스냅 적용됨
// 다시 스냅하지 않고 그대로 사용!
let finalX = tempPosition.x;
const finalY = tempPosition.y;
let finalWidth = tempSize.width;
const finalHeight = tempSize.height;
// 가로 너비가 캔버스를 벗어나지 않도록 최종 제한
const maxWidth = canvasWidth - snappedX;
snappedWidth = Math.min(snappedWidth, maxWidth);
const maxWidth = canvasWidth - finalX;
finalWidth = Math.min(finalWidth, maxWidth);
onUpdate(element.id, {
position: { x: snappedX, y: snappedY },
size: { width: snappedWidth, height: snappedHeight },
position: { x: finalX, y: finalY },
size: { width: finalWidth, height: finalHeight },
});
setTempPosition(null);
@@ -652,7 +710,7 @@ export function CanvasElement({
) : element.type === "widget" && element.subtype === "todo" ? (
// To-Do 위젯 렌더링
<div className="widget-interactive-area h-full w-full">
<TodoWidget />
<TodoWidget element={element} />
</div>
) : element.type === "widget" && element.subtype === "booking-alert" ? (
// 예약 요청 알림 위젯 렌더링