src/hooks/module/useModuleBasicSetting.js

@@ -81,6 +81,14 @@ export function useModuleBasicSetting(tabNum) {
       removeMouseEvent('mouse:up')
       removeMouseEvent('mouse:move')
       canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) //움직일때 일단 지워가면서 움직임
+      canvas.getObjects().forEach((obj) => {
+        if (obj.name === POLYGON_TYPE.ROOF) {
+          obj.set({
+            stroke: 'black',
+            strokeWidth: 3,
+          })
+        }
+      })
     }
   }, [])
 
@@ -147,11 +155,10 @@ export function useModuleBasicSetting(tabNum) {
   //가대 상세 데이터 들어오면 실행
   useEffect(() => {
     if (trestleDetailList.length > 0) {
-      console.log('trestleDetailList', trestleDetailList)
       //지붕을 가져옴
       canvas
         .getObjects()
-        .filter((roof) => roof.name === 'roof')
+        .filter((roof) => roof.name === POLYGON_TYPE.ROOF)
         .forEach((roof) => {
           if (!roof.roofMaterial) return
           const roofIndex = roof.roofMaterial.index //지붕의 지붕재의 순번
@@ -159,7 +166,12 @@ export function useModuleBasicSetting(tabNum) {
             if (detail.data !== null) {
               if (Number(detail.data.roofIndex) === roofIndex) {
                 //roof에 상세 데이터 추가
-                roof.set({ trestleDetail: detail.data })
+
+                roof.set({
+                  trestleDetail: detail.data,
+                  stroke: roofOutlineColor(roofIndex),
+                  strokeWidth: 7,
+                })
                 roof.lines.forEach((line) => {
                   line.attributes = {
                     ...line.attributes,
@@ -176,6 +188,18 @@ export function useModuleBasicSetting(tabNum) {
     }
   }, [trestleDetailList])
 
+  const roofOutlineColor = (roofIndex) => {
+    if (roofIndex === 1) {
+      return 'rgb(86,170,255)'
+    } else if (roofIndex === 2) {
+      return 'rgb(125, 252, 173)'
+    } else if (roofIndex === 3) {
+      return 'rgb(238, 109, 255)'
+    } else {
+      return 'rgb(252, 148, 106)'
+    }
+  }
+
   const getOffset = (data, type) => {
     switch (type) {
       case LINE_TYPE.WALLLINE.EAVES: