모듈 선택 db 연동

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

@@ -42,17 +42,6 @@ export default function Module({ setTabNum }) {
 
   const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
 
-  const dataRef = useRef({
-    selectedSurfaceType,
-    installHeight,
-    standardWindSpeed,
-    verticalSnowCover,
-  })
-
-  useEffect(() => {
-    console.log('dataRef', dataRef)
-  }, [])
-
   const [tempModuleSelectionData, setTempModuleSelectionData] = useReducer((prevState, nextState) => {
     return { ...prevState, ...nextState }
   }, moduleSelectionData)

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

@@ -5,19 +5,11 @@ import { useMessage } from '@/hooks/useMessage'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import { moduleSelectionDataState, moduleSelectionInitParamsState, selectedModuleState } from '@/store/selectedModuleOptions'
-import { isObjectNotEmpty } from '@/util/common-utils'
+import { isObjectNotEmpty, isEqualObjects } from '@/util/common-utils'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { addedRoofsState } from '@/store/settingAtom'
 
-export default function ModuleTabContents({
+export default function ModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab, tempModuleSelectionData, setTempModuleSelectionData }) {
-  tabIndex,
-  addRoof,
-  setAddedRoofs,
-  roofTab,
-  tempModuleSelectionData,
-  setTempModuleSelectionData,
-  moduleSelectionInitParams,
-}) {
   const { getMessage } = useMessage()
   const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재`
 
@@ -45,7 +37,8 @@ export default function ModuleTabContents({
   const [constructionParams, setConstructionParams] = useState({}) //공법 관련  api호출 파라메터
   const [roofBaseParams, setRoofBaseParams] = useState({}) //지붕밑바탕 관련  api호출 파라메터
 
-  // const moduleSelectionInitParams = useRecoilValue(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
+  const moduleSelectionInitParams = useRecoilValue(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
+  const moduleSelectionInitOriginData = useRef(moduleSelectionInitParams)
 
   const { getTrestleList, getConstructionList } = useMasterController()
 
@@ -69,8 +62,6 @@ export default function ModuleTabContents({
   const hajebichiRef = useRef()
   const lengthRef = useRef()
 
-  const originalModuleSelectionData = useRef(moduleSelectionData)
-
   //서까래간격 변경
   const handleChangeRaftBase = (option) => {
     setSelectedRaftBase(option)
@@ -118,7 +109,7 @@ export default function ModuleTabContents({
   //리코일에 데이터가 담기는 시점에 시작
   useEffect(() => {
     if (
-      moduleSelectionData.roofConstructions.length > 0 &&
+      isObjectNotEmpty(moduleSelectionData.roofConstructions[tabIndex]) &&
       isObjectNotEmpty(moduleSelectionData.roofConstructions[tabIndex].trestle) &&
       isObjectNotEmpty(moduleSelectionData.roofConstructions[tabIndex].construction)
     ) {
@@ -311,9 +302,6 @@ export default function ModuleTabContents({
           construction: selectedConstruction,
         }
 
-        console.log('newRoofConstructions', newRoofConstructions)
-        console.log('roofTab', roofTab)
-
         const index = tempModuleSelectionData.roofConstructions.findIndex((obj) => obj.roofIndex === tabIndex)
 
         if (index > -1) {
@@ -341,7 +329,6 @@ export default function ModuleTabContents({
       if (type === 'trestle') {
         setTrestleList(optionsList.data)
         if (isExistData) {
-          // setSelectedTrestle({ ...moduleConstructionSelectionData?.trestle })
           handleChangeTrestle(moduleConstructionSelectionData?.trestle)
         } else {
           setConstMthdList([])
@@ -364,17 +351,43 @@ export default function ModuleTabContents({
   }
 
   useEffect(() => {
-    console.log('originalModuleSelectionData', originalModuleSelectionData)
+    //모듈이 선택되어있을때
-    console.log('moduleSelectionInitParams', moduleSelectionInitParams)
+    if (moduleSelectionInitOriginData.current.moduleItemId && moduleSelectionInitOriginData.current.moduleTpCd) {
+      //초기에 들어온 데이터가 수정된 데이터가 값이 다르다면`
+      if (!isEqualObjects(moduleSelectionInitOriginData.current, moduleSelectionInitParams)) {
+        // console.log('moduleSelectionInitParams', moduleSelectionInitParams)
+        //가대 선택 초기화
+        setSelectedTrestle({})
+        //공법 선택 초기화
+        setSelectedConstMthd({})
+        //지붕밑바탕 선택 초기화
+        setSelectedRoofBase({})
+        //공법 리스트 초기화
+        setConstructionList([])
+        // 기본 정보 초기화
+        setModuleSelectionData({
+          ...moduleSelectionData,
+          roofConstructions: [],
+        })
+        // 선택 데이터 초 기화
+        setModuleConstructionSelectionData({
+          addRoof: addRoof,
+          trestle: {},
+          construction: {},
+        })
 
-    // console.log('moduleSelectionInitParams', moduleSelectionInitParams)
+        setTempModuleSelectionData({
-    // setSelectedTrestle({})
+          ...moduleSelectionData,
-    // setSelectedConstMthd({})
+          roofConstructions: [],
-    // setSelectedRoofBase({})
+        })
-    // setModuleSelectionData({
+
-    //   ...moduleSelectionData,
+        // 데이터 없음으로 변경
-    //   roofConstructions: [],
+        setIsExistData(false)
-    // })
+
+        //변경된 데이터를 ref에 저장
+        moduleSelectionInitOriginData.current = moduleSelectionInitParams
+      }
+    }
   }, [moduleSelectionInitParams])
 
   // useEffect(() => {
@@ -596,22 +609,22 @@ export default function ModuleTabContents({
               <div className="d-check-box pop">
                 <input
                   type="checkbox"
-                  id={`ch01_${roofTab}`}
+                  id={`ch01_${tabIndex}`}
                   disabled={cvrYn === 'N' ? true : false}
                   checked={cvrChecked}
                   onChange={handleCvrChecked}
                 />
-                <label htmlFor={`ch01_${roofTab}`}>{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
+                <label htmlFor={`ch01_${tabIndex}`}>{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
               </div>
               <div className="d-check-box pop">
                 <input
                   type="checkbox"
-                  id={`ch02_${roofTab}`}
+                  id={`ch02_${tabIndex}`}
                   disabled={snowGdPossYn === 'N' ? true : false}
                   checked={snowGdChecked}
                   onChange={handleSnowGdChecked}
                 />
-                <label htmlFor={`ch02_${roofTab}`}>{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
+                <label htmlFor={`ch02_${tabIndex}`}>{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
               </div>
             </div>
           </div>

src/util/common-utils.js

@@ -153,3 +153,25 @@ export const unescapeString = (str) => {
 export const isNullOrUndefined = (value) => {
   return value === null || value === undefined
 }
+
+export const isEqualObjects = (obj1, obj2) => {
+  const keys1 = Object.keys(obj1)
+  const keys2 = Object.keys(obj2)
+
+  if (keys1.length !== keys2.length) return false
+
+  for (let key of keys1) {
+    const val1 = obj1[key]
+    const val2 = obj2[key]
+    const areObjects = isObject(val1) && isObject(val2)
+
+    if (areObjects && !deepEqual(val1, val2)) return false
+    if (!areObjects && val1 !== val2) return false
+  }
+
+  return true
+}
+
+function isObject(value) {
+  return value !== null && typeof value === 'object'
+}