에디팅 모드 시 생성되는 line name 변경

src/hooks/useMode.js

@@ -68,6 +68,9 @@ export function useMode() {
 
   const guideLineInfo = useRecoilValue(guideLineState)
 
+  const [guideLineMode, setGuideLineMode] = useState(false)
+  const [guideDotMode, setGuideDotMode] = useState(false)
+
   useEffect(() => {
     // 이벤트 리스너 추가
     // if (!canvas) {
@@ -105,7 +108,19 @@ export function useMode() {
       canvas?.off('mouse:down')
       canvas?.on('mouse:down', mouseEvent.editMode)
     }
-  }, [mode, isGuidePointMode])
+  }, [mode])
+
+  useEffect(() => {
+    setGuideLineMode(false)
+    setGuideDotMode(false)
+    if (isObjectNotEmpty(guideLineInfo)) {
+      const guideLineState = guideLineInfo.filter((item) => item.guideMode === 'guideLine')
+      const guideDotState = guideLineInfo.filter((item) => item.guideMode === 'guideDot')
+
+      setGuideLineMode(guideLineState.length > 0)
+      setGuideDotMode(guideDotState.length > 0)
+    }
+  }, [guideLineInfo])
 
   const drawMouseLines = (e) => {
     let isGuideLineMode = false,
@@ -115,7 +130,8 @@ export function useMode() {
     if (isObjectNotEmpty(guideLineInfo)) {
       const guideLineState = guideLineInfo.filter((item) => item.guideMode === 'guideLine')
       const guideDotState = guideLineInfo.filter((item) => item.guideMode === 'guideDot')
-
+      setGuideLineMode(guideLineState.length > 0)
+      setGuideDotMode(guideDotState.length > 0)
       isGuideLineMode = guideLineState.length > 0
       isGuideDotMode = guideDotState.length > 0
 
@@ -242,7 +258,7 @@ export function useMode() {
   }, [pointCount.current])
 
   const removeGuideLines = () => {
-    const guideLines = canvas?._objects.filter((obj) => obj.name === 'guideLine')
+    const guideLines = canvas?._objects.filter((obj) => obj.name === 'helpGuideLine')
     guideLines?.forEach((item) => canvas?.remove(item))
   }
 
@@ -264,7 +280,7 @@ export function useMode() {
         strokeWidth: 1,
         strokeDashArray: [1, 1, 1],
       })
-      guideLine.name = 'guideLine'
+      guideLine.name = 'helpGuideLine'
       canvas?.add(guideLine)
     } else {
       const guideLine1 = new QLine([lastX, lastY, lastX, arrivalY], {
@@ -281,8 +297,8 @@ export function useMode() {
         strokeDashArray: [1, 1, 1],
       })
 
-      guideLine1.name = 'guideLine'
+      guideLine1.name = 'helpGuideLine'
-      guideLine2.name = 'guideLine'
+      guideLine2.name = 'helpGuideLine'
 
       canvas?.add(guideLine1)
       canvas?.add(guideLine2)
@@ -675,7 +691,7 @@ export function useMode() {
       canvas?.add(circle)
 
       if (points.current.length === 2) {
-        if (isGuidePointMode) {
+        if (guideLineMode || guideDotMode) {
           const vector = {
             x: points.current[1].left - points.current[0].left,
             y: points.current[1].top - points.current[0].top,