diff --git a/frontend/components/admin/dashboard/CanvasElement.tsx b/frontend/components/admin/dashboard/CanvasElement.tsx index 2ecf8245..3db56497 100644 --- a/frontend/components/admin/dashboard/CanvasElement.tsx +++ b/frontend/components/admin/dashboard/CanvasElement.tsx @@ -311,7 +311,7 @@ export function CanvasElement({ const deltaX = e.clientX - dragStartRef.current.x; const deltaY = e.clientY - dragStartRef.current.y + scrollDelta; // ๐Ÿ”ฅ ์Šคํฌ๋กค ๋ณ€ํ™”๋Ÿ‰ ๋ฐ˜์˜ - // ์ž„์‹œ ์œ„์น˜ ๊ณ„์‚ฐ + // ์ž„์‹œ ์œ„์น˜ ๊ณ„์‚ฐ (๋“œ๋ž˜๊ทธ ์ค‘์—๋Š” ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์ด๋™) let rawX = Math.max(0, dragStart.elementX + deltaX); const rawY = Math.max(0, dragStart.elementY + deltaY); @@ -319,18 +319,12 @@ export function CanvasElement({ const maxX = canvasWidth - element.size.width; rawX = Math.min(rawX, maxX); - // ์ž์„ ์Šค๋ƒ…์œผ๋กœ ๋ณ€๊ฒฝ - const snappedX = magneticSnap(rawX, verticalGuidelines); - const snappedY = magneticSnap(rawY, horizontalGuidelines); - - // ์Šค๋ƒ… ํ›„ X ์ขŒํ‘œ ๋‹ค์‹œ ์ฒดํฌ - const finalSnappedX = Math.min(snappedX, maxX); - - setTempPosition({ x: finalSnappedX, y: snappedY }); + // ๋“œ๋ž˜๊ทธ ์ค‘์—๋Š” ์Šค๋ƒ… ์—†์ด ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์ด๋™ + setTempPosition({ x: rawX, y: rawY }); // ๐Ÿ”ฅ ๋‹ค์ค‘ ๋“œ๋ž˜๊ทธ ์ค‘ - ๋‹ค๋ฅธ ์œ„์ ฏ๋“ค์˜ ์œ„์น˜ ์—…๋ฐ์ดํŠธ if (selectedElements.length > 1 && selectedElements.includes(element.id) && onMultiDragMove) { - onMultiDragMove(element, { x: finalSnappedX, y: snappedY }); + onMultiDragMove(element, { x: rawX, y: rawY }); } } else if (isResizing) { const deltaX = e.clientX - resizeStart.x; @@ -374,21 +368,13 @@ export function CanvasElement({ const maxWidth = canvasWidth - newX; newWidth = Math.min(newWidth, maxWidth); - // ์ž์„ ์Šค๋ƒ…์œผ๋กœ ๋ณ€๊ฒฝ - const snappedX = magneticSnap(newX, verticalGuidelines); - const snappedY = magneticSnap(newY, horizontalGuidelines); + // ๋ฆฌ์‚ฌ์ด์ฆˆ ์ค‘์—๋Š” ์Šค๋ƒ… ์—†์ด ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ์กฐ์ ˆ + const boundedX = Math.max(0, Math.min(newX, canvasWidth - newWidth)); + const boundedY = Math.max(0, newY); - // ํฌ๊ธฐ๋Š” ๊ทธ๋ฆฌ๋“œ ๋ฐ•์Šค ๋‹จ์œ„๋กœ ์Šค๋ƒ… - const snappedWidth = snapSizeToGrid(newWidth, canvasWidth || 1560); - const snappedHeight = snapSizeToGrid(newHeight, canvasWidth || 1560); - - // ์Šค๋ƒ… ํ›„ ๊ฒฝ๊ณ„ ์ฒดํฌ - const finalSnappedX = Math.max(0, Math.min(snappedX, canvasWidth - snappedWidth)); - const finalSnappedY = Math.max(0, snappedY); - - // ์ž„์‹œ ํฌ๊ธฐ/์œ„์น˜ ์ €์žฅ (์Šค๋ƒ…๋จ) - setTempPosition({ x: finalSnappedX, y: finalSnappedY }); - setTempSize({ width: snappedWidth, height: snappedHeight }); + // ์ž„์‹œ ํฌ๊ธฐ/์œ„์น˜ ์ €์žฅ (๋ถ€๋“œ๋Ÿฌ์šด ์ด๋™) + setTempPosition({ x: boundedX, y: boundedY }); + setTempSize({ width: newWidth, height: newHeight }); } }, [ @@ -412,10 +398,9 @@ export function CanvasElement({ // ๋งˆ์šฐ์Šค ์—… ์ฒ˜๋ฆฌ (์ด๋ฏธ ์Šค๋ƒ…๋œ ์œ„์น˜ ์‚ฌ์šฉ) const handleMouseUp = useCallback(() => { if (isDragging && tempPosition) { - // tempPosition์€ ์ด๋ฏธ ๋“œ๋ž˜๊ทธ ์ค‘์— ๋งˆ๊ทธ๋„คํ‹ฑ ์Šค๋ƒ… ์ ์šฉ๋จ - // ๋‹ค์‹œ ์Šค๋ƒ…ํ•˜์ง€ ์•Š๊ณ  ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉ! - let finalX = tempPosition.x; - const finalY = tempPosition.y; + // ๋งˆ์šฐ์Šค๋ฅผ ๋†“์„ ๋•Œ ๊ทธ๋ฆฌ๋“œ์— ์Šค๋ƒ… + let finalX = magneticSnap(tempPosition.x, verticalGuidelines); + const finalY = magneticSnap(tempPosition.y, horizontalGuidelines); // X ์ขŒํ‘œ๊ฐ€ ์บ”๋ฒ„์Šค ๋„ˆ๋น„๋ฅผ ๋ฒ—์–ด๋‚˜์ง€ ์•Š๋„๋ก ์ตœ์ข… ์ œํ•œ const maxX = canvasWidth - element.size.width; @@ -473,20 +458,19 @@ export function CanvasElement({ } if (isResizing && tempPosition && tempSize) { - // tempPosition๊ณผ tempSize๋Š” ์ด๋ฏธ ๋ฆฌ์‚ฌ์ด์ฆˆ ์ค‘์— ๋งˆ๊ทธ๋„คํ‹ฑ ์Šค๋ƒ… ์ ์šฉ๋จ - // ๋‹ค์‹œ ์Šค๋ƒ…ํ•˜์ง€ ์•Š๊ณ  ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉ! - const finalX = tempPosition.x; - const finalY = tempPosition.y; - let finalWidth = tempSize.width; - const finalHeight = tempSize.height; + // ๋งˆ์šฐ์Šค๋ฅผ ๋†“์„ ๋•Œ ๊ทธ๋ฆฌ๋“œ์— ์Šค๋ƒ… + const finalX = magneticSnap(tempPosition.x, verticalGuidelines); + const finalY = magneticSnap(tempPosition.y, horizontalGuidelines); + const finalWidth = snapSizeToGrid(tempSize.width, canvasWidth || 1560); + const finalHeight = snapSizeToGrid(tempSize.height, canvasWidth || 1560); // ๊ฐ€๋กœ ๋„ˆ๋น„๊ฐ€ ์บ”๋ฒ„์Šค๋ฅผ ๋ฒ—์–ด๋‚˜์ง€ ์•Š๋„๋ก ์ตœ์ข… ์ œํ•œ const maxWidth = canvasWidth - finalX; - finalWidth = Math.min(finalWidth, maxWidth); + const boundedWidth = Math.min(finalWidth, maxWidth); onUpdate(element.id, { position: { x: finalX, y: finalY }, - size: { width: finalWidth, height: finalHeight }, + size: { width: boundedWidth, height: finalHeight }, }); setTempPosition(null); @@ -518,6 +502,8 @@ export function CanvasElement({ allElements, dragStart.elementX, dragStart.elementY, + verticalGuidelines, + horizontalGuidelines, ]); // ๐Ÿ”ฅ ์ž๋™ ์Šคํฌ๋กค ๋ฃจํ”„ (requestAnimationFrame ์‚ฌ์šฉ)