동선이동 형 올림내림 선택된 object에 따라 색깔 변경

src/hooks/roofcover/useMovementSetting.js

@@ -1,10 +1,11 @@
 import { useRecoilValue } from 'recoil'
-import { canvasState } from '@/store/canvasAtom'
+import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useRef, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
 import { POLYGON_TYPE } from '@/common/common'
+import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 
 //동선이동 형 올림 내림
 export function useMovementSetting(id) {
@@ -16,6 +17,7 @@ export function useMovementSetting(id) {
   const { initEvent, addCanvasMouseEventListener } = useEvent()
   const { closePopup } = usePopup()
   const { getMessage } = useMessage()
+  const currentObject = useRecoilValue(currentObjectState)
   const buttonType = [
     { id: 1, name: getMessage('modal.movement.flow.line.move'), type: TYPE.FLOW_LINE },
     { id: 2, name: getMessage('modal.movement.flow.line.updown'), type: TYPE.UP_DOWN },
@@ -46,8 +48,11 @@ export function useMovementSetting(id) {
     wallLines.forEach((line) => {
       line.set({ visible: false })
     })
+
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
     outerLines.forEach((line) => {
+      line.set({ stroke: 'black' })
+      line.set({ visible: true })
       line.bringToFront()
       line.set({ selectable: true })
     })
@@ -64,6 +69,22 @@ export function useMovementSetting(id) {
     }
   }, [])
 
+  useEffect(() => {
+    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
+    outerLines.forEach((line) => {
+      line.set({ stroke: 'black' })
+    })
+    if (!currentObject) {
+      return
+    }
+
+    if (currentObject.name === OUTER_LINE_TYPE.OUTER_LINE) {
+      currentObject.set({ stroke: 'red' })
+      currentObject.bringToFront()
+    }
+    canvas.renderAll()
+  }, [currentObject])
+
   const mouseMoveEvent = (e) => {
     if (typeRef.current === TYPE.FLOW_LINE) {
       flowLineEvent(e)