src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx

@@ -8,8 +8,12 @@ import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
 import { useAuxiliaryDrawing } from '@/hooks/roofcover/useAuxiliaryDrawing'
 import { usePopup } from '@/hooks/usePopup'
+import { useEffect } from 'react'
+import { useRecoilValue } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
 
 export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
+  const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
 
@@ -52,6 +56,15 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
     cutAuxiliary,
   } = useAuxiliaryDrawing(id)
 
+  useEffect(() => {
+    return () => {
+      const auxiliaryLines = canvas.getObjects().filter((line) => line.name === 'auxiliaryLine' && !line.isAuxiliaryFixed) // 보조선이 그려져 있는 경우 물어본다.
+      if (auxiliaryLines.length > 0) {
+        handleFix()
+      }
+    }
+  }, [])
+
   const outerLineProps = {
     length1,
     setLength1,

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -680,7 +680,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
             const newLine = addLine([line1.x1, line1.y1, interSectionPointsWithRoofLines[0].x, interSectionPointsWithRoofLines[0].y], {
               stroke: 'black',
               strokeWidth: 1,
-              selectable: false,
+              selectable: true,
               name: 'auxiliaryLine',
               isFixed: true,
               attributes: { ...line1.attributes },
@@ -693,7 +693,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
             const newLine = addLine([line1.x2, line1.y2, interSectionPointsWithRoofLines[0].x, interSectionPointsWithRoofLines[0].y], {
               stroke: 'black',
               strokeWidth: 1,
-              selectable: false,
+              selectable: true,
               name: 'auxiliaryLine',
               isFixed: true,
               attributes: { ...line1.attributes },
@@ -737,7 +737,6 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
         // line2.set(originLine2)
         // canvas.renderAll()
 
-
         const intersectionPoint = calculateIntersection(line1, line2)
         if (!intersectionPoint) {
           return
@@ -865,6 +864,8 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
       return
     }
 
+    cutAuxiliary()
+
     const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
 
     //lineHistory.current에 있는 선들 중 startPoint와 endPoint가 겹치는 line은 제거