Polygon 선택 시 stroke red

src/hooks/useCanvasEvent.js

@@ -209,13 +209,52 @@ export function useCanvasEvent() {
     created: (e) => {
       const target = e.selected[0]
       setCurrentObject(target)
+      const { selected } = e
+
+      if (selected.length > 0) {
+        selected.forEach((obj) => {
+          if (obj.type === 'QPolygon') {
+            obj.set({ stroke: 'red' })
+          }
+        })
+        canvas.renderAll()
+      }
     },
     cleared: (e) => {
       setCurrentObject(null)
+      const { deselected } = e
+
+      if (deselected.length > 0) {
+        deselected.forEach((obj) => {
+          if (obj.type === 'QPolygon') {
+            obj.set({ stroke: 'black' })
+          }
+        })
+      }
+      canvas.renderAll()
     },
     updated: (e) => {
       const target = e.selected[0]
       setCurrentObject(target)
+      const { selected, deselected } = e
+
+      if (deselected.length > 0) {
+        deselected.forEach((obj) => {
+          if (obj.type === 'QPolygon') {
+            obj.set({ stroke: 'black' })
+          }
+        })
+      }
+
+      if (selected.length > 0) {
+        selected.forEach((obj) => {
+          if (obj.type === 'QPolygon') {
+            obj.set({ stroke: 'red' })
+          }
+        })
+      }
+
+      canvas.renderAll()
     },
   }