줌 상태에 따라 그리드 복사, 이동 시 잘리는 현상 수정

src/components/floor-plan/modal/grid/GridCopy.jsx

@@ -5,9 +5,9 @@ import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { useState } from 'react'
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
-import { useGrid } from '@/hooks/common/useGrid'
 import { gridColorState } from '@/store/gridAtom'
 import { gridDisplaySelector } from '@/store/settingAtom'
+
 const GRID_PADDING = 5
 export default function GridCopy(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -25,10 +25,10 @@ export default function GridCopy(props) {
   }
 
   const copy = (object, length) => {
-    const lineStartX = object.direction === 'vertical' ? object.x1 + length : 0
+    const lineStartX = object.direction === 'vertical' ? object.x1 + length : object.x1
-    const lineEndX = object.direction === 'vertical' ? object.x2 + length : canvas.width
+    const lineEndX = object.direction === 'vertical' ? object.x2 + length : object.x2
-    const lineStartY = object.direction === 'vertical' ? 0 : object.y1 + length
+    const lineStartY = object.direction === 'vertical' ? object.y1 : object.y1 + length
-    const lineEndY = object.direction === 'vertical' ? canvas.width : object.y1 + length
+    const lineEndY = object.direction === 'vertical' ? object.y2 : object.y1 + length
 
     const line = new fabric.Line([lineStartX, lineStartY, lineEndX, lineEndY], {
       stroke: gridColor,

src/components/floor-plan/modal/grid/GridMove.jsx

@@ -3,11 +3,9 @@ import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
-import { useCanvas } from '@/hooks/useCanvas'
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
 import { useSwal } from '@/hooks/useSwal'
-import { set } from 'react-hook-form'
 
 export default function GridMove(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -70,10 +68,10 @@ export default function GridMove(props) {
   const move = (object, x, y) => {
     object.set({
       ...object,
-      x1: object.direction === 'vertical' ? object.x1 + x : 0,
+      x1: object.direction === 'vertical' ? object.x1 + x : object.x1,
-      x2: object.direction === 'vertical' ? object.x1 + x : canvas.width,
+      x2: object.direction === 'vertical' ? object.x1 + x : object.x2,
-      y1: object.direction === 'vertical' ? 0 : object.y1 + y,
+      y1: object.direction === 'vertical' ? object.y1 : object.y1 + y,
-      y2: object.direction === 'vertical' ? canvas.height : object.y1 + y,
+      y2: object.direction === 'vertical' ? object.y2 : object.y1 + y,
     })
   }
 

src/hooks/useCanvas.js

@@ -72,7 +72,7 @@ export function useCanvas(id) {
     const visibleBottom = visibleTop + canvasHeight / currentZoom
 
     // tempGrid 라인들을 찾아서 크기 조정
-    const tempGridLines = canvas.getObjects().filter((obj) => ['tempGrid', 'lineGrid'].includes(obj.name))
+    const tempGridLines = canvas.getObjects().filter((obj) => ['tempGrid', 'lineGrid', 'mouseLine'].includes(obj.name))
 
     tempGridLines.forEach((line) => {
       if (line.direction === 'vertical') {