From afd59e580f56355797562ca22eabe078a4ce8966 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?=
 <43837214+Minsiki@users.noreply.github.com>
Date: Tue, 20 May 2025 15:36:20 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B7=B8=EB=A6=AC=EB=93=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99,=20=EB=B3=B5=EC=82=AC=20=EB=B2=84=EA=B7=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../floor-plan/modal/grid/GridCopy.jsx        | 38 +++++++++++++++++--
 .../floor-plan/modal/grid/GridMove.jsx        | 12 +++++-
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/components/floor-plan/modal/grid/GridCopy.jsx b/src/components/floor-plan/modal/grid/GridCopy.jsx
index e1a6f9f9..e83e5f18 100644
--- a/src/components/floor-plan/modal/grid/GridCopy.jsx
+++ b/src/components/floor-plan/modal/grid/GridCopy.jsx
@@ -4,9 +4,11 @@ import { usePopup } from '@/hooks/usePopup'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { useState } from 'react'
-import { currentObjectState } from '@/store/canvasAtom'
+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)
   const { id, pos = contextPopupPosition } = props
@@ -15,10 +17,40 @@ export default function GridCopy(props) {
   const [length, setLength] = useState('0')
   const [arrow, setArrow] = useState(null)
   const currentObject = useRecoilValue(currentObjectState)
-  const { copy } = useGrid()
+  const canvas = useRecoilValue(canvasState)
+  const gridColor = useRecoilValue(gridColorState)
+  const isGridDisplay = useRecoilValue(gridDisplaySelector)
   const handleApply = () => {
     copy(currentObject, ['↑', '←'].includes(arrow) ? +length * -1 : +length)
   }
+
+  const copy = (object, length) => {
+    const lineStartX = object.direction === 'vertical' ? object.x1 + length : 0
+    const lineEndX = object.direction === 'vertical' ? object.x2 + length : canvas.width
+    const lineStartY = object.direction === 'vertical' ? 0 : object.y1 + length
+    const lineEndY = object.direction === 'vertical' ? canvas.width : object.y1 + length
+
+    const line = new fabric.Line([lineStartX, lineStartY, lineEndX, lineEndY], {
+      stroke: gridColor,
+      strokeWidth: 1,
+      selectable: true,
+      lockMovementX: true,
+      lockMovementY: true,
+      lockRotation: true,
+      lockScalingX: true,
+      lockScalingY: true,
+      strokeDashArray: [5, 2],
+      opacity: 0.3,
+      padding: GRID_PADDING,
+      direction: object.direction,
+      visible: isGridDisplay,
+      name: object.name,
+    })
+
+    canvas.add(line)
+    canvas.setActiveObject(line)
+    canvas.renderAll()
+  }
   return (
     <WithDraggable isShow={true} pos={pos} className="xm">
       <WithDraggable.Header title={getMessage('modal.grid.copy')} onClose={() => closePopup(id)} />
diff --git a/src/components/floor-plan/modal/grid/GridMove.jsx b/src/components/floor-plan/modal/grid/GridMove.jsx
index 4aa27851..dadd7a6e 100644
--- a/src/components/floor-plan/modal/grid/GridMove.jsx
+++ b/src/components/floor-plan/modal/grid/GridMove.jsx
@@ -6,7 +6,6 @@ import { contextPopupPositionState } from '@/store/popupAtom'
 import { useCanvas } from '@/hooks/useCanvas'
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
-import { useGrid } from '@/hooks/common/useGrid'
 import { useSwal } from '@/hooks/useSwal'
 import { set } from 'react-hook-form'
 
@@ -17,7 +16,6 @@ export default function GridMove(props) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const { swalFire } = useSwal()
-  const { move } = useGrid()
   const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
   const [isAll, setIsAll] = useState(false)
   const [verticalSize, setVerticalSize] = useState('0')
@@ -69,6 +67,16 @@ export default function GridMove(props) {
     handleClose()
   }
 
+  const move = (object, x, y) => {
+    object.set({
+      ...object,
+      x1: object.direction === 'vertical' ? object.x1 + x : 0,
+      x2: object.direction === 'vertical' ? object.x1 + x : canvas.width,
+      y1: object.direction === 'vertical' ? 0 : object.y1 + y,
+      y2: object.direction === 'vertical' ? canvas.height : object.y1 + y,
+    })
+  }
+
   const handleClose = () => {
     closePopup(id)
   }