src/components/floor-plan/CanvasFrame.jsx

@@ -2,7 +2,7 @@
 
 import { useContext, useEffect, useRef } from 'react'
 
-import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
+import { useRecoilValue, useResetRecoilState } from 'recoil'
 
 import QContextMenu from '@/components/common/context-menu/QContextMenu'
 import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics'
@@ -12,8 +12,8 @@ import { usePlan } from '@/hooks/usePlan'
 import { useContextMenu } from '@/hooks/useContextMenu'
 import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
 import { currentMenuState } from '@/store/canvasAtom'
-import { roofMaterialsAtom, totalDisplaySelector } from '@/store/settingAtom'
+import { totalDisplaySelector } from '@/store/settingAtom'
-import { MENU, POLYGON_TYPE } from '@/common/common'
+import { POLYGON_TYPE } from '@/common/common'
 import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
 import { QcastContext } from '@/app/QcastProvider'
 import {
@@ -30,8 +30,6 @@ import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import { useEvent } from '@/hooks/useEvent'
 import { compasDegAtom } from '@/store/orientationAtom'
-import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
-import { useMasterController } from '@/hooks/common/useMasterController'
 import { hotkeyStore } from '@/store/hotkeyAtom'
 import { usePopup } from '@/hooks/usePopup'
 
@@ -75,6 +73,19 @@ export default function CanvasFrame() {
           } else {
             setSelectedMenu('surface')
           }
+
+          const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+
+          roofs.forEach((roof) => {
+            const auxiliaryLines = canvas
+              .getObjects()
+              .filter((obj) => obj.name === 'auxiliaryLine' && roof.inPolygonImproved(obj.startPoint) && roof.inPolygonImproved(obj.endPoint))
+
+            auxiliaryLines.forEach((auxiliaryLine) => {
+              roof.innerLines.push(auxiliaryLine)
+            })
+          })
+
           initEvent()
         })
       } else {
@@ -125,12 +136,12 @@ export default function CanvasFrame() {
   /**
    * 캔버스가 있을 경우 핫키 이벤트 처리
    * hotkeyStore에 핫키 이벤트 리스너 추가
-   * 
+   *
    * const hotkeys = [
-      { key: 'c', fn: () => asdf() },
+   { key: 'c', fn: () => asdf() },
-      { key: 'v', fn: () => qwer() },
+   { key: 'v', fn: () => qwer() },
-    ]
+   ]
-    setHotkeyStore(hotkeys)
+   setHotkeyStore(hotkeys)
    */
   const hotkeyState = useRecoilValue(hotkeyStore)
   const hotkeyHandlerRef = useRef(null)

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -129,18 +129,37 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
 
   const move = (object, x, y) => {
     const line = copy(object, x, y)
+
+    // roofs의 innerLines에서 object와 같은 것을 찾아서 제거
+    const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+    roofs.forEach((roof) => {
+      roof.innerLines = roof.innerLines.filter(inner => inner !== object)
+    })
+
     canvas.remove(object)
     canvas.setActiveObject(line)
   }
 
   const copy = (object, x, y) => {
-    return addLine([object.x1 + x, object.y1 + y, object.x2 + x, object.y2 + y], {
+    const newLine = addLine([object.x1 + x, object.y1 + y, object.x2 + x, object.y2 + y], {
       attributes: object.attributes,
       stroke: 'red',
       strokeWidth: 1,
       selectable: true,
       name: 'auxiliaryLine',
     })
+
+    // roofs의 innerLines에서 object와 같은 것을 찾아서 newLine으로 변경
+    const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+    roofs.forEach((roof) => {
+      roof.innerLines.forEach((inner, index) => {
+        if (inner === object) {
+          roof.innerLines.push(newLine)
+        }
+      })
+    })
+
+    return newLine
   }
 
   const keydown = {

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -364,14 +364,6 @@ export function useRoofAllocationSetting(id) {
     let result = false
 
     roofBases.forEach((roof) => {
-      const auxiliaryLines = canvas
-        .getObjects()
-        .filter((obj) => obj.name === 'auxiliaryLine' && roof.inPolygonImproved(obj.startPoint) && roof.inPolygonImproved(obj.endPoint))
-
-      auxiliaryLines.forEach((auxiliaryLine) => {
-        roof.innerLines.push(auxiliaryLine)
-      })
-
       if (roof.separatePolygon.length === 0) {
         roof.innerLines.forEach((line) => {
           if ((!line.attributes.actualSize || line.attributes?.actualSize === 0) && line.length > 1) {