From 8c6aef853440630ae89300cdeedba009317b2247 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Tue, 5 Nov 2024 15:42:36 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8F=99=EC=84=A0=EC=9D=B4=EB=8F=99=20?=
 =?UTF-8?q?=ED=98=95=20=EC=98=AC=EB=A6=BC=EB=82=B4=EB=A6=BC=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=EB=90=9C=20object=EC=97=90=20=EB=94=B0=EB=9D=BC=20?=
 =?UTF-8?q?=EC=83=89=EA=B9=94=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/roofcover/useMovementSetting.js | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/hooks/roofcover/useMovementSetting.js b/src/hooks/roofcover/useMovementSetting.js
index f09aee6b..2141eb43 100644
--- a/src/hooks/roofcover/useMovementSetting.js
+++ b/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)