모듈 탭 컨텐트 영역 작업중

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

@@ -40,12 +40,18 @@ export default function Module({ setTabNum }) {
   const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
   const [moduleSelectionDataPlanList, setModuleSelectionDataPlanList] = useRecoilState(moduleSelectionDataPlanListState)
 
-  const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
+  const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
 
   const [tempModuleSelectionData, setTempModuleSelectionData] = useReducer((prevState, nextState) => {
     return { ...prevState, ...nextState }
   }, moduleSelectionData)
 
+  useEffect(() => {
+    if (moduleSelectionDataPlanList) {
+      setModuleSelectionData(moduleSelectionDataPlanList[currentCanvasPlan.id])
+    }
+  }, [])
+
   useEffect(() => {
     handleChangeInstallHeight(debouncedInstallHeight)
   }, [debouncedInstallHeight])
@@ -72,16 +78,6 @@ export default function Module({ setTabNum }) {
     rows: [],
   }
 
-  useEffect(() => {
-    console.log('currentCanvasPlan', currentCanvasPlan)
-  }, [])
-
-  useEffect(() => {}, [roofTab])
-
-  useEffect(() => {
-    setModuleSelectionDataPlanList({ ...moduleSelectionDataPlanList, [currentCanvasPlan.id]: moduleSelectionData })
-  }, [moduleSelectionData])
-
   const handleRoofTab = (tab) => {
     setRoofTab(tab)
   }
@@ -242,11 +238,12 @@ export default function Module({ setTabNum }) {
                   index={index}
                   addRoof={roof}
                   roofTab={index}
-                  moduleConstructionSelectionData={moduleSelectionData.roofConstructions[index]}
+                  moduleConstructionSelectionData={moduleSelectionData?.roofConstructions[index]}
-                  setModuleSelectionData={setModuleSelectionData}
                   tempModuleSelectionData={tempModuleSelectionData}
                   setTempModuleSelectionData={setTempModuleSelectionData}
                   selectedModule={selectedModules}
+                  moduleSelectionDataPlanList={moduleSelectionDataPlanList}
+                  setModuleSelectionDataPlanList={setModuleSelectionDataPlanList}
                 />
               </div>
             ))}

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

@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from 'react'
 import { useRecoilValue } from 'recoil'
-import { pitchTextSelector } from '@/store/canvasAtom'
+import { currentCanvasPlanState, pitchTextSelector } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
@@ -12,14 +12,16 @@ export default function ModuleTabContents({
   addRoof,
   roofTab,
   moduleConstructionSelectionData,
-  setModuleSelectionData,
   tempModuleSelectionData,
   setTempModuleSelectionData,
   selectedModule,
+  moduleSelectionDataPlanList,
+  setModuleSelectionDataPlanList,
 }) {
   const { getMessage } = useMessage()
   const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재`
   const globalPitchText = useRecoilValue(pitchTextSelector) //피치 텍스트
+  const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
 
   const { findCommonCode } = useCommonCode()
   const [raftCodes, setRaftCodes] = useState([]) //가대 목록
@@ -162,6 +164,8 @@ export default function ModuleTabContents({
   }
 
   useEffect(() => {
+    console.log('tempModuleSelectionData', tempModuleSelectionData)
+
     if (isObjectNotEmpty(selectedRoofBase) && isObjectNotEmpty(selectedConstruction)) {
       const newRoofConstructions = {
         roofIndex: roofTab,
@@ -169,6 +173,7 @@ export default function ModuleTabContents({
         trestle: selectedRoofBase,
         construction: selectedConstruction,
       }
+
       const index = tempModuleSelectionData.roofConstructions.findIndex((obj) => obj.roofIndex === roofTab)
 
       if (index > -1) {
@@ -241,6 +246,7 @@ export default function ModuleTabContents({
       if (isModuleLoaded) {
         setTrestleParams({ moduleTpCd: moduleSelectionInitParams.moduleTpCd, roofMatlCd: addRoof.roofMatlCd, raftBaseCd: addRoof.raftBaseCd })
         setConstructionList([])
+        setTempModuleSelectionData({ common: moduleSelectionInitParams, module: selectedModule })
 
         if (isObjectNotEmpty(moduleConstructionSelectionData)) {
           //기존에 데이터가 있으면
@@ -249,11 +255,11 @@ export default function ModuleTabContents({
           setCvrChecked(moduleConstructionSelectionData.construction.setupCover)
           setSnowGdChecked(moduleConstructionSelectionData.construction.setupSnowCover)
           setIsExistData(true)
-        }
-      }
-    }
 
-    setTempModuleSelectionData({ common: moduleSelectionInitParams, module: selectedModule })
+          setTempModuleSelectionData({ roofConstructions: [{ ...moduleConstructionSelectionData }] })
+        }
+      }
+    }
   }, [moduleSelectionInitParams])
 
   useEffect(() => {
@@ -282,7 +288,8 @@ export default function ModuleTabContents({
 
   useEffect(() => {
     if (isObjectNotEmpty(tempModuleSelectionData)) {
-      setModuleSelectionData(tempModuleSelectionData)
+      setModuleSelectionDataPlanList({ ...moduleSelectionDataPlanList, [currentCanvasPlan.id]: tempModuleSelectionData })
+      // setModuleSelectionData(tempModuleSelectionData)
     }
   }, [tempModuleSelectionData])
 

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

@@ -1,15 +1,16 @@
 import { forwardRef, useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
-import { checkedModuleState } from '@/store/canvasAtom'
+import { checkedModuleState, currentCanvasPlanState } from '@/store/canvasAtom'
-import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
-import { selectedModuleState, moduleSelectionDataState } from '@/store/selectedModuleOptions'
+import { moduleSelectionDataPlanListState } from '@/store/selectedModuleOptions'
 import { useModulePlace } from '@/hooks/module/useModulePlace'
 
 const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
   const [isChidori, setIsChidori] = useState(false)
   const [isChidoriNotAble, setIsChidoriNotAble] = useState(false)
+  const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
 
   const [setupLocation, setSetupLocation] = useState('center')
   const [isMaxSetup, setIsMaxSetup] = useState('false')
@@ -19,17 +20,19 @@ const Placement = forwardRef((props, refs) => {
   const { selectedModules } = useModulePlace()
 
   const setCheckedModules = useSetRecoilState(checkedModuleState)
-  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
+  const moduleSelectionDataPlanList = useRecoilValue(moduleSelectionDataPlanListState)
 
   //모듈 배치면 생성
   useEffect(() => {
     makeModuleInstArea()
 
+    if (moduleSelectionDataPlanList) {
       //1개라도 치도리 불가가 있으면 치도리 불가
-    const isChidroriValue = moduleSelectionData.roofConstructions.some((item) => item.construction.plvrYn === 'N')
+      const isChidroriValue = moduleSelectionDataPlanList[currentCanvasPlan.id].roofConstructions.some((item) => item.construction.plvrYn === 'N')
       if (isChidroriValue) {
         setIsChidoriNotAble(true)
       }
+    }
   }, [])
 
   //체크된 모듈 데이터

src/hooks/common/useMasterController.js

@@ -54,9 +54,9 @@ export function useMasterController() {
    */
   const getTrestleList = async (params) => {
     const paramString = getQueryString(params)
-    console.log('🚀🚀 ~ getTrestleList ~ paramString:', paramString)
+    // console.log('🚀🚀 ~ getTrestleList ~ paramString:', paramString)
     return await get({ url: '/api/v1/master/getTrestleList' + paramString }).then((res) => {
-      console.log('🚀🚀 ~ getTrestleList ~ res:', res)
+      // console.log('🚀🚀 ~ getTrestleList ~ res:', res)
       return res
     })
   }
@@ -80,9 +80,9 @@ export function useMasterController() {
    */
   const getConstructionList = async (params) => {
     const paramString = getQueryString(params)
-    console.log('🚀🚀 ~ getConstructionList ~ paramString:', paramString)
+    // console.log('🚀🚀 ~ getConstructionList ~ paramString:', paramString)
     return await get({ url: '/api/v1/master/getConstructionList' + paramString }).then((res) => {
-      console.log('🚀🚀 ~ getConstructionList ~ res:', res)
+      // console.log('🚀🚀 ~ getConstructionList ~ res:', res)
       return res
     })
   }

src/hooks/module/useModule.js

@@ -389,6 +389,7 @@ export function useModule() {
       .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
     let isWarning = false
     canvas.discardActiveObject()
+    moduleSetupSurface.set({ modules: otherModules })
     canvas.remove(...columnModules)
     canvas.renderAll()
 
@@ -503,6 +504,7 @@ export function useModule() {
     let isWarning = false
 
     canvas.discardActiveObject()
+    moduleSetupSurface.set({ modules: otherModules })
     canvas.remove(...rowModules)
     canvas.renderAll()
 
@@ -852,8 +854,12 @@ export function useModule() {
 
   const modulesRemove = () => {
     const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
-    const modules = canvas.getObjects().filter((obj) => obj.surfaceId === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE)
+    const modules = canvas
-    canvas.remove(...modules)
+      .getObjects()
+      .filter((obj) => obj.surfaceId === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE && activeModule.id !== obj.id)
+    const surface = canvas.getObjects().filter((obj) => obj.id === activeModule.surfaceId && obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)[0]
+    surface.set({ modules: modules })
+    canvas.remove(activeModule)
     canvas.renderAll()
   }
 

src/hooks/module/useModuleBasicSetting.js

@@ -698,6 +698,7 @@ export function useModuleBasicSetting() {
 
       checkedModule.forEach((module, index) => {
         const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
+
         const flowLines = getFlowLines(moduleSetupSurface, module)
         //육지붕이 아닐때만 넣는다 육지붕일땐 클릭 이벤트에 별도로 넣어놓음
         let startPoint = flowLines.bottom

src/hooks/module/useModulePlace.js

@@ -1,20 +1,22 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { moduleSelectionDataPlanListState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { useMasterController } from '@/hooks/common/useMasterController'
-import { canvasState } from '@/store/canvasAtom'
+import { canvasState, currentCanvasPlanState } from '@/store/canvasAtom'
 
 export function useModulePlace() {
   const canvas = useRecoilValue(canvasState)
-  const moduleSelectionData = useRecoilValue(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
+  const moduleSelectionDataPlanList = useRecoilValue(moduleSelectionDataPlanListState) //다음으로 넘어가는 최종 데이터
+  const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
   const [trestleDetailParams, setTrestleDetailParams] = useState([])
   const [trestleDetailList, setTrestleDetailList] = useState([])
   const selectedModules = useRecoilValue(selectedModuleState)
   const { getTrestleDetailList } = useMasterController()
 
   useEffect(() => {
-    const common = moduleSelectionData.common
+    if (moduleSelectionDataPlanList) {
-    const roofConstructions = moduleSelectionData.roofConstructions
+      const common = moduleSelectionDataPlanList[currentCanvasPlan.id].common
+      const roofConstructions = moduleSelectionDataPlanList[currentCanvasPlan.id].roofConstructions
 
       const listParams = roofConstructions.map((item) => {
         return {
@@ -31,9 +33,9 @@ export function useModulePlace() {
           roofIndex: item.addRoof.index,
         }
       })
-
       setTrestleDetailParams(listParams)
-  }, [moduleSelectionData])
+    }
+  }, [moduleSelectionDataPlanList])
 
   const getTrestleDetailListData = async () => {
     const trestleDetailList = await getTrestleDetailList(trestleDetailParams)

src/hooks/useContextMenu.js

@@ -67,7 +67,7 @@ export function useContextMenu() {
   const commonTextFont = useRecoilValue(fontSelector('commonText'))
   const { settingsData, setSettingsDataSave } = useCanvasSetting()
   const { swalFire } = useSwal()
-  const { alignModule } = useModule()
+  const { alignModule, modulesRemove } = useModule()
   const { removeRoofMaterial, removeAllRoofMaterial } = useRoofFn()
 
   const currentMenuSetting = () => {
@@ -656,7 +656,7 @@ export function useContextMenu() {
               {
                 id: 'remove',
                 name: getMessage('contextmenu.remove'),
-                fn: () => deleteObject(),
+                fn: () => modulesRemove(),
               },
               {
                 id: 'move',