모듈 선택 저장 로직 관련 작업

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

@@ -13,6 +13,7 @@ export default function Module({ setTabNum }) {
   const { getMessage } = useMessage()
   const addedRoofs = useRecoilValue(addedRoofsState) //지붕재 선택
   const [roofTab, setRoofTab] = useState(0) //지붕재 탭
+  const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
 
   const {
     moduleSelectionInitParams,
@@ -40,18 +41,10 @@ export default function Module({ setTabNum }) {
   const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
   const [moduleSelectionDataPlanList, setModuleSelectionDataPlanList] = useRecoilState(moduleSelectionDataPlanListState)
 
-  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])
@@ -118,9 +111,9 @@ export default function Module({ setTabNum }) {
                   </thead>
                   <tbody>
                     {selectedModules.itemList &&
-                      selectedModules.itemList.map((row) => (
+                      selectedModules.itemList.map((row, index) => (
                         <>
-                          <tr>
+                          <tr key={index}>
                             <td>
                               <div className="color-wrap">
                                 <span className="color-box" style={{ backgroundColor: row.color }}></span>
@@ -242,8 +235,7 @@ export default function Module({ setTabNum }) {
                   tempModuleSelectionData={tempModuleSelectionData}
                   setTempModuleSelectionData={setTempModuleSelectionData}
                   selectedModule={selectedModules}
-                  moduleSelectionDataPlanList={moduleSelectionDataPlanList}
+                  setModuleSelectionData={setModuleSelectionData}
-                  setModuleSelectionDataPlanList={setModuleSelectionDataPlanList}
                 />
               </div>
             ))}

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

@@ -15,8 +15,7 @@ export default function ModuleTabContents({
   tempModuleSelectionData,
   setTempModuleSelectionData,
   selectedModule,
-  moduleSelectionDataPlanList,
+  setModuleSelectionData,
-  setModuleSelectionDataPlanList,
 }) {
   const { getMessage } = useMessage()
   const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재`
@@ -164,8 +163,6 @@ export default function ModuleTabContents({
   }
 
   useEffect(() => {
-    console.log('tempModuleSelectionData', tempModuleSelectionData)
-
     if (isObjectNotEmpty(selectedRoofBase) && isObjectNotEmpty(selectedConstruction)) {
       const newRoofConstructions = {
         roofIndex: roofTab,
@@ -246,7 +243,6 @@ 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)) {
           //기존에 데이터가 있으면
@@ -255,11 +251,11 @@ export default function ModuleTabContents({
           setCvrChecked(moduleConstructionSelectionData.construction.setupCover)
           setSnowGdChecked(moduleConstructionSelectionData.construction.setupSnowCover)
           setIsExistData(true)
-
-          setTempModuleSelectionData({ roofConstructions: [{ ...moduleConstructionSelectionData }] })
         }
       }
     }
+
+    setTempModuleSelectionData({ common: moduleSelectionInitParams, module: selectedModule })
   }, [moduleSelectionInitParams])
 
   useEffect(() => {
@@ -288,8 +284,8 @@ export default function ModuleTabContents({
 
   useEffect(() => {
     if (isObjectNotEmpty(tempModuleSelectionData)) {
-      setModuleSelectionDataPlanList({ ...moduleSelectionDataPlanList, [currentCanvasPlan.id]: tempModuleSelectionData })
+      // setModuleSelectionDataPlanList({ ...moduleSelectionDataPlanList, [currentCanvasPlan.id]: tempModuleSelectionData })
-      // setModuleSelectionData(tempModuleSelectionData)
+      setModuleSelectionData(tempModuleSelectionData)
     }
   }, [tempModuleSelectionData])
 

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

@@ -3,7 +3,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import { checkedModuleState, currentCanvasPlanState } from '@/store/canvasAtom'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
-import { moduleSelectionDataPlanListState } from '@/store/selectedModuleOptions'
+import { moduleSelectionDataPlanListState, moduleSelectionDataState } from '@/store/selectedModuleOptions'
 import { useModulePlace } from '@/hooks/module/useModulePlace'
 
 const Placement = forwardRef((props, refs) => {
@@ -21,6 +21,7 @@ const Placement = forwardRef((props, refs) => {
 
   const setCheckedModules = useSetRecoilState(checkedModuleState)
   const moduleSelectionDataPlanList = useRecoilValue(moduleSelectionDataPlanListState)
+  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
 
   //모듈 배치면 생성
   useEffect(() => {
@@ -28,7 +29,7 @@ const Placement = forwardRef((props, refs) => {
 
     if (moduleSelectionDataPlanList) {
       //1개라도 치도리 불가가 있으면 치도리 불가
-      const isChidroriValue = moduleSelectionDataPlanList[currentCanvasPlan.id].roofConstructions.some((item) => item.construction.plvrYn === 'N')
+      const isChidroriValue = moduleSelectionData.roofConstructions.some((item) => item.construction.plvrYn === 'N')
       if (isChidroriValue) {
         setIsChidoriNotAble(true)
       }

src/hooks/module/useModuleBasicSetting.js

@@ -850,7 +850,7 @@ export function useModuleBasicSetting() {
             leftMargin = j === 0 ? 0 : intvVer * j
             chidoriLength = 0
             if (isChidori) {
-              chidoriLength = i % 2 === 0 ? 0 : height / 2 - intvHor
+              chidoriLength = i % 2 === 0 ? 0 : height / 2
             }
 
             square = [

src/hooks/module/useModulePlace.js

@@ -1,12 +1,13 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { moduleSelectionDataPlanListState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { moduleSelectionDataPlanListState, moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { canvasState, currentCanvasPlanState } from '@/store/canvasAtom'
 
 export function useModulePlace() {
   const canvas = useRecoilValue(canvasState)
   const moduleSelectionDataPlanList = useRecoilValue(moduleSelectionDataPlanListState) //다음으로 넘어가는 최종 데이터
+  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
   const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
   const [trestleDetailParams, setTrestleDetailParams] = useState([])
   const [trestleDetailList, setTrestleDetailList] = useState([])
@@ -14,9 +15,9 @@ export function useModulePlace() {
   const { getTrestleDetailList } = useMasterController()
 
   useEffect(() => {
-    if (moduleSelectionDataPlanList) {
+    if (moduleSelectionData) {
-      const common = moduleSelectionDataPlanList[currentCanvasPlan.id].common
+      const common = moduleSelectionData.common
-      const roofConstructions = moduleSelectionDataPlanList[currentCanvasPlan.id].roofConstructions
+      const roofConstructions = moduleSelectionData.roofConstructions
 
       const listParams = roofConstructions.map((item) => {
         return {
@@ -35,7 +36,7 @@ export function useModulePlace() {
       })
       setTrestleDetailParams(listParams)
     }
-  }, [moduleSelectionDataPlanList])
+  }, [moduleSelectionData])
 
   const getTrestleDetailListData = async () => {
     const trestleDetailList = await getTrestleDetailList(trestleDetailParams)
@@ -49,8 +50,6 @@ export function useModulePlace() {
   }, [trestleDetailParams])
 
   useEffect(() => {
-    console.log('🚀 ~ useModulePlace ~ trestleDetailList:', trestleDetailList)
-
     //지붕을 가져옴
     canvas
       .getObjects()