새 플랜 데이터 초기화

src/components/floor-plan/modal/basic/BasicSetting.jsx

@@ -35,6 +35,8 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
   const canvas = useRecoilValue(canvasState)
 
+  const [isClosePopup, setIsClosePopup] = useState({ close: false, id: 0 })
+
   // const { initEvent } = useContext(EventContext)
   const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup } = useModuleBasicSetting(1)
   const { updateObjectDate } = useMasterController()
@@ -110,20 +112,33 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     }
   }, [])
 
+  //팝업 닫기 버튼 이벤트
+  const handleClosePopup = (id) => {
+    if (tabNum == 3) {
+      if (isManualModuleSetup) {
+        setIsManualModuleSetup(false)
+      }
+    }
+    setIsClosePopup({ close: true, id: id })
+  }
+
   useEffect(() => {
     if (canvasSetting.roofSizeSet !== '3') {
       manualModuleSetup(placementRef)
     } else {
       manualFlatroofModuleSetup(placementFlatRef)
     }
-  }, [isManualModuleSetup])
+    if (isClosePopup.close) {
+      closePopup(isClosePopup.id)
+    }
+  }, [isManualModuleSetup, isClosePopup])
 
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lx-2`}>
         <div className="modal-head modal-handle">
           <h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
+          <button className="modal-close" onClick={() => handleClosePopup(id)}>
             닫기
           </button>
         </div>

src/components/floor-plan/modal/basic/step/Module.jsx

@@ -58,9 +58,9 @@ export default function Module({ setTabNum }) {
   useEffect(() => {
     if (tempModuleSelectionData.roofConstructions.length > 0) {
       if (tempModuleSelectionData.common.moduleItemId && isObjectNotEmpty(tempModuleSelectionData.module)) {
+        setModuleSelectionData(tempModuleSelectionData)
         //저장된 temp데이터가 지붕재(addedRoofs) 개수와 같으면 모듈 선택 저장
         if (tempModuleSelectionData.roofConstructions.length === addedRoofs.length) {
-          setModuleSelectionData(tempModuleSelectionData)
           moduleSelectedDataTrigger(tempModuleSelectionData)
         }
       }

src/components/floor-plan/modal/basic/step/Placement.jsx

@@ -2,8 +2,10 @@ import { forwardRef, useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import { checkedModuleState, currentCanvasPlanState } from '@/store/canvasAtom'
-import { useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
+import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { isObjectNotEmpty } from '@/util/common-utils'
+import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
 
 const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
@@ -14,11 +16,13 @@ const Placement = forwardRef((props, refs) => {
   const [isMaxSetup, setIsMaxSetup] = useState('false')
   const [selectedItems, setSelectedItems] = useState({})
 
-  const { selectedModules } = useModuleBasicSetting(3)
+  const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState)
 
   const setCheckedModules = useSetRecoilState(checkedModuleState)
   const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
 
+  const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
+
   //모듈 배치면 생성
   useEffect(() => {
     if (moduleSelectionData) {
@@ -30,14 +34,32 @@ const Placement = forwardRef((props, refs) => {
     }
   }, [])
 
+  //최초 지입시 체크
+  useEffect(() => {
+    if (moduleSelectionData.roofConstructions.length > 0 && moduleSelectionData.module.itemList.length > 0) {
+      let initCheckedModule = {}
+      moduleSelectionData.module.itemList.forEach((obj, index) => {
+        if (index === 0) {
+          initCheckedModule = { [obj.itemId]: true }
+        } else {
+          initCheckedModule = { ...initCheckedModule, [obj.itemId]: true }
+        }
+      })
+      setSelectedItems(initCheckedModule)
+      setSelectedModules(moduleSelectionData.module)
+    }
+  }, [moduleSelectionData])
+
   //체크된 모듈 데이터
   useEffect(() => {
-    const checkedModuleIds = Object.keys(selectedItems).filter((key) => selectedItems[key])
+    if (isObjectNotEmpty(selectedItems) && isObjectNotEmpty(selectedModules)) {
-    const moduleArray = selectedModules.itemList.filter((item) => {
+      const checkedModuleIds = Object.keys(selectedItems).filter((key) => selectedItems[key])
-      return checkedModuleIds.includes(item.itemId)
+      const moduleArray = selectedModules.itemList.filter((item) => {
-    })
+        return checkedModuleIds.includes(item.itemId)
-    setCheckedModules(moduleArray)
+      })
-  }, [selectedItems])
+      setCheckedModules(moduleArray)
+    }
+  }, [selectedItems, selectedModules])
 
   const moduleData = {
     header: [
@@ -74,21 +96,6 @@ const Placement = forwardRef((props, refs) => {
     setSelectedItems({ ...selectedItems, [e.target.name]: e.target.checked })
   }
 
-  //최초 지입시 체크
-  useEffect(() => {
-    if (moduleSelectionData && moduleSelectionData.module.itemList.length > 0) {
-      let initCheckedModule = {}
-      moduleSelectionData.module.itemList.forEach((obj, index) => {
-        if (index === 0) {
-          initCheckedModule = { [obj.itemId]: true }
-        } else {
-          initCheckedModule = { ...initCheckedModule, [obj.itemId]: true }
-        }
-      })
-      setSelectedItems(initCheckedModule)
-    }
-  }, [])
-
   return (
     <>
       <div className="module-table-flex-wrap mb10">

src/hooks/common/useCanvasConfigInitialize.js

@@ -204,8 +204,8 @@ export function useCanvasConfigInitialize() {
       .forEach((obj) => {
         obj.set({
           selectable: true,
-          lockMovementX: false,
+          lockMovementX: true,
-          lockMovementY: false,
+          lockMovementY: true,
         })
         obj.setViewLengthText(false)
       })

src/hooks/module/useModuleBasicSetting.js

@@ -60,16 +60,14 @@ export function useModuleBasicSetting(tabNum) {
 
   //모듈 선택에서 선택된 값들 넘어옴
   useEffect(() => {
-    if (moduleSelectionData && tabNum === 3) {
+    if (moduleSelectionData) {
       if (canvasSetting.roofSizeSet !== '3') {
         const common = moduleSelectionData.common
-
         const roofConstructions = moduleSelectionData.roofConstructions
-
         const listParams = roofConstructions.map((item) => {
           return {
             ...common,
-            moduleTpCd: selectedModules.itemTp,
+            // moduleTpCd: selectedModules.itemTp,
             roofMatlCd: item.trestle.roofMatlCd,
             trestleMkrCd: item.trestle.trestleMkrCd,
             constMthdCd: item.trestle.constMthdCd,
@@ -90,7 +88,6 @@ export function useModuleBasicSetting(tabNum) {
         }
       } else {
         //육지붕 일경우에는 바로 배치면 설치LL
-        const roofs = canvas.getObjects().filter((roof) => roof.name === 'roof')
         canvas
           .getObjects()
           .filter((roof) => roof.name === 'roof')
@@ -196,9 +193,7 @@ export function useModuleBasicSetting(tabNum) {
     })
 
     const isExistSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.parentId === roof.id)
-    if (isExistSurface) {
+    canvas.remove(isExistSurface)
-      return
-    }
 
     let offsetLength = canvasSetting.roofSizeSet === '3' ? -30 : (trestleDetail.eaveIntvl / 10) * -1
     setSurfaceShapePattern(roof, roofDisplay.column, true) //패턴 변경
@@ -257,6 +252,12 @@ export function useModuleBasicSetting(tabNum) {
 
     canvas.renderAll()
 
+    //바로 들어올때
+    const setupModules = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE)
+    setupModules.forEach((obj) => {
+      canvas.bringToFront(obj)
+    })
+
     //모듈설치면 클릭이벤트
     addTargetMouseEventListener('mousedown', setupSurface, function () {
       toggleSelection(setupSurface)

src/hooks/module/useModuleTabContents.js

@@ -95,6 +95,8 @@ export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab
     })
     setRaftCodes(raftCodeList)
 
+    console.log('addRoof', addRoof)
+
     if (addRoof.raft) {
       setSelectedRaftBase({
         ...selectedRaftBase,

src/hooks/option/useCanvasSetting.js

@@ -36,6 +36,7 @@ import { useCanvasMenu } from '../common/useCanvasMenu'
 import { menuTypeState } from '@/store/menuAtom'
 import { usePopup } from '../usePopup'
 import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
+import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 
 const defaultDotLineGridSetting = {
   INTERVAL: {
@@ -114,6 +115,10 @@ export function useCanvasSetting() {
   const [fetchRoofMaterials, setFetchRoofMaterials] = useRecoilState(fetchRoofMaterialsState)
   const [type, setType] = useRecoilState(menuTypeState)
   const setCurrentMenu = useSetRecoilState(currentMenuState)
+
+  const resetModuleSelectionData = useResetRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
+  const resetSelectedModules = useResetRecoilState(selectedModuleState) //선택된 모듈
+
   const SelectOptions = [
     { id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 },
     { id: 2, name: '1/2', value: 1 / 2 },
@@ -446,6 +451,14 @@ export function useCanvasSetting() {
         setType('outline')
         setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
       }
+
+      //모듈 선택 데이터 초기화
+      resetModuleSelectionData()
+
+      const isModuleExist = canvas.getObjects().some((obj) => obj.name === POLYGON_TYPE.MODULE)
+      if (!isModuleExist) {
+        resetSelectedModules()
+      }
     } catch (error) {
       swalFire({ text: error.message, icon: 'error' })
     }