변별로 작업 수정

src/hooks/common/useRoofFn.js

@@ -1,10 +1,11 @@
-import { useRecoilValue } from 'recoil'
+import { useRecoilValue, useResetRecoilState } from 'recoil'
 import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { selectedRoofMaterialSelector } from '@/store/settingAtom'
 import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 import { POLYGON_TYPE } from '@/common/common'
 import { useEvent } from '@/hooks/useEvent'
 import { useLine } from '@/hooks/useLine'
+import { outerLinePointsState } from '@/store/outerLineAtom'
 
 const ROOF_COLOR = {
   0: 'rgb(199,240,213)',
@@ -17,6 +18,7 @@ export function useRoofFn() {
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
   const currentObject = useRecoilValue(currentObjectState)
   const { addCanvasMouseEventListener, initEvent } = useEvent()
+  const resetPoints = useResetRecoilState(outerLinePointsState)
   const { addPitchText } = useLine()
 
   //면형상 선택 클릭시 지붕 패턴 입히기
@@ -332,6 +334,7 @@ export function useRoofFn() {
     })
 
     canvas.renderAll()
+    resetPoints()
   }
 
   return { setSurfaceShapePattern, removeRoofMaterial, removeAllRoofMaterial, moveRoofMaterial, removeOuterLines }

src/hooks/roofcover/usePropertiesSetting.js

@@ -7,6 +7,9 @@ import { usePolygon } from '@/hooks/usePolygon'
 import { useLine } from '@/hooks/useLine'
 import { outerLinePointsState } from '@/store/outerLineAtom'
 import { usePopup } from '@/hooks/usePopup'
+import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
+import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
+import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
 
 // 외벽선 속성 설정
 export function usePropertiesSetting(id) {
@@ -19,7 +22,7 @@ export function usePropertiesSetting(id) {
 
   const { addPolygonByLines } = usePolygon()
   const { removeLine, hideLine } = useLine()
-  const { closePopup } = usePopup()
+  const { addPopup, closePopup } = usePopup()
 
   useEffect(() => {
     const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
@@ -134,7 +137,8 @@ export function usePropertiesSetting(id) {
           })
         })
         canvas.discardActiveObject()
-        closePopup(id)
+        // closePopup(id)
+        addPopup(id, 1, <RoofShapeSetting id={id} pos={{ x: 50, y: 230 }} />)
         return
       }
 
@@ -157,10 +161,7 @@ export function usePropertiesSetting(id) {
       setPoints([])
       canvas.renderAll()
       roof.drawHelpLine()
-
-      closePopup(id)
-      return
-    } else {
+      addPopup(id, 1, <RoofAllocationSetting id={id} pos={{ x: 50, y: 230 }} />)
       return
     }
   }

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -1,4 +1,4 @@
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 import { canvasState, currentAngleTypeSelector, currentMenuState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useRef, useState } from 'react'
 import { useAxios } from '@/hooks/useAxios'
@@ -26,6 +26,7 @@ import { globalLocaleStore } from '@/store/localeAtom'
 import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
 import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
+import { outerLinePointsState } from '@/store/outerLineAtom'
 
 // 지붕면 할당
 export function useRoofAllocationSetting(id) {
@@ -55,6 +56,7 @@ export function useRoofAllocationSetting(id) {
   const { setSurfaceShapePattern } = useRoofFn()
 
   const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
+  const resetPoints = useResetRecoilState(outerLinePointsState)
 
   useEffect(() => {
     setCurrentRoofList(roofList)
@@ -256,6 +258,7 @@ export function useRoofAllocationSetting(id) {
       addPopup(popupId, 1, <ActualSizeSetting id={popupId} />)
     } else {
       apply()
+      resetPoints()
     }
   }
 

src/hooks/roofcover/useRoofShapeSetting.js

@@ -10,6 +10,7 @@ import { outerLineFixState } from '@/store/outerLineAtom'
 import { useSwal } from '@/hooks/useSwal'
 import { usePopup } from '@/hooks/usePopup'
 import { getChonByDegree } from '@/util/canvas-util'
+import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
 
 // 지붕형상 설정
 export function useRoofShapeSetting(id) {
@@ -46,7 +47,7 @@ export function useRoofShapeSetting(id) {
   const jerkinHeadPitchRef = useRef(null)
 
   const history = useRef([])
-  const { closePopup } = usePopup()
+  const { closePopup, addPopup } = usePopup()
 
   useEffect(() => {
     pitchRef.current = currentAngleType === ANGLE_TYPE.SLOPE ? pitch : getChonByDegree(pitch)
@@ -436,7 +437,7 @@ export function useRoofShapeSetting(id) {
     canvas?.renderAll()
     roof.drawHelpLine()
     isFixRef.current = true
-    closePopup(id)
+    addPopup(id, 1, <RoofAllocationSetting id={id} pos={{ x: 50, y: 230 }} />)
   }
 
   const initLineSetting = () => {
@@ -568,6 +569,7 @@ export function useRoofShapeSetting(id) {
           pitch: pitchRef.current,
           offset: eavesOffset / 10,
         }
+        selectedLine.attributes = { ...attributes, isFixed: true }
         addPitchText(currentObject)
         selectedLine.set({ strokeWidth: 4 })
         selectedLine.set({ stroke: '#45CD7D' })
@@ -579,6 +581,7 @@ export function useRoofShapeSetting(id) {
           type: LINE_TYPE.WALLLINE.GABLE,
           offset: gableOffset / 10,
         }
+        selectedLine.attributes = { ...attributes, isFixed: true }
         selectedLine.set({ strokeWidth: 4 })
         selectedLine.set({ stroke: '#3FBAE6' })
         break
@@ -590,6 +593,7 @@ export function useRoofShapeSetting(id) {
           width: hasSleeve === '0' ? 0 : sleeveOffset / 10,
           sleeve: hasSleeve === '1',
         }
+        selectedLine.attributes = { ...attributes, isFixed: true }
         break
       }
       case 4: {
@@ -600,6 +604,7 @@ export function useRoofShapeSetting(id) {
           offset: eavesOffset / 10,
           width: hipAndGableWidth / 10,
         }
+        selectedLine.attributes = { ...attributes, isFixed: true }
         addPitchText(currentObject)
         selectedLine.set({ strokeWidth: 4 })
         selectedLine.set({ stroke: '#45CD7D' })
@@ -613,6 +618,7 @@ export function useRoofShapeSetting(id) {
           width: jerkinHeadWidth / 10,
           pitch: jerkinHeadPitchRef.current,
         }
+        selectedLine.attributes = { ...attributes, isFixed: true }
         addPitchText(currentObject)
         selectedLine.set({ strokeWidth: 4 })
         selectedLine.set({ stroke: '#3FBAE6' })
@@ -625,13 +631,13 @@ export function useRoofShapeSetting(id) {
           pitch: shedPitchRef.current,
           width: shedWidth / 10,
         }
+        selectedLine.attributes = { ...attributes, isFixed: true }
         addPitchText(currentObject)
         selectedLine.set({ strokeWidth: 4 })
         selectedLine.set({ stroke: '#000000' })
         break
       }
     }
-    selectedLine.attributes = { ...attributes, isFixed: true }
 
     canvas.renderAll()
     nextLineFocus(selectedLine)
@@ -643,7 +649,7 @@ export function useRoofShapeSetting(id) {
     const index = lines.findIndex((line) => line.idx === selectedLine.idx)
 
     const nextLine = lines[index + 1] || lines[0]
-    if (nextLine.attributes.isFixed) {
+    if (nextLine.attributes?.isFixed) {
       canvas.discardActiveObject()
       return
     }