모듈 관련 데이터 수정시 roofs 데이터 초기화 버그 수정

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

@@ -91,14 +91,14 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   useEffect(() => {
     if (roofsStore && addedRoofs) {
       console.log('🚀 ~ useEffect ~ roofsStore, addedRoofs:', roofsStore, addedRoofs)
-      setRoofs(
+      // setRoofs(
-        addedRoofs.map((roof, index) => {
+      //   addedRoofs.map((roof, index) => {
-          return {
+      //     return {
-            ...roof,
+      //       ...roof,
-            ...roofsStore[index].addRoof,
+      //       ...roofsStore[index]?.addRoof,
-          }
+      //     }
-        }),
+      //   }),
-      )
+      // )
 
       setModuleSelectionData({
         ...moduleSelectionData,

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

@@ -321,7 +321,7 @@ export const Orientation = forwardRef((props, ref) => {
                       </tr>
                     </thead>
                     <tbody>
-                      {Array.from({ length: 2 }).map((_, index) => {
+                      {Array.from({ length: 3 }).map((_, index) => {
                         return selectedModules && selectedModules?.itemList && selectedModules?.itemList?.length >= index + 1 ? (
                           <tr key={index}>
                             <td>

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

@@ -5,6 +5,7 @@ import {
   checkedModuleState,
   isManualModuleLayoutSetupState,
   isManualModuleSetupState,
+  moduleRowColArrayState,
   moduleSetupOptionState,
   toggleManualSetupModeState,
 } from '@/store/canvasAtom'
@@ -36,6 +37,7 @@ const Placement = forwardRef((props, refs) => {
   const resetModuleSetupOption = useResetRecoilState(moduleSetupOptionState)
 
   const [colspan, setColspan] = useState(1)
+  const [moduleRowColArray, setModuleRowColArray] = useRecoilState(moduleRowColArrayState)
 
   //모듈 배치면 생성
   useEffect(() => {
@@ -62,6 +64,10 @@ const Placement = forwardRef((props, refs) => {
     }
   }, [])
 
+  useEffect(() => {
+    console.log('moduleRowColArray', moduleRowColArray)
+  }, [moduleRowColArray])
+
   //최초 지입시 체크
   useEffect(() => {
     if (isObjectNotEmpty(moduleSelectionData)) {
@@ -342,18 +348,18 @@ const Placement = forwardRef((props, refs) => {
                 </tr>
               </thead>
               <tbody>
-                {moduleSelectionData.roofConstructions.map((item) => (
+                {moduleSelectionData.roofConstructions.map((item, index) => (
                   <tr>
                     <td>
                       <div className="color-wrap">
-                        <span className="color-box" style={{ backgroundColor: roofOutlineColor(item.roofIndex) }}></span>
+                        <span className="color-box" style={{ backgroundColor: roofOutlineColor(item.addRoof.index) }}></span>
                         <span className="name">{item.addRoof.roofMatlNmJp}</span>
                       </div>
                     </td>
-                    {selectedModules.itemList.map((item) => (
+                    {moduleRowColArray[index]?.map((item) => (
                       <>
-                        <td className="al-c">7</td>
+                        <td className="al-c">{item.moduleMaxRows}</td>
-                        {colspan > 1 && <td className="al-c">5</td>}
+                        {colspan > 1 && <td className="al-c">{item.mixModuleMaxRows}</td>}
                       </>
                     ))}
                   </tr>

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

@@ -45,7 +45,7 @@ const Trestle = forwardRef((props, ref) => {
   const selectedModules = useRecoilValue(selectedModuleState) //선택된 모듈
   // const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState)
   const [lengthBase, setLengthBase] = useState(0)
-  const [hajebichi, setHajebichi] = useState(0)
+  const [hajebichi, setHajebichi] = useState(trestleState?.roofPitch ?? 0)
   const [selectedRaftBase, setSelectedRaftBase] = useState(null)
   const [selectedTrestle, setSelectedTrestle] = useState(null)
   const [selectedConstMthd, setSelectedConstMthd] = useState(null)
@@ -196,10 +196,12 @@ const Trestle = forwardRef((props, ref) => {
           stdWindSpeed: managementState?.standardWindSpeedId ?? '',
           stdSnowLd: +managementState?.verticalSnowCover ?? '',
           inclCd: selectedRoof?.pitch.toString() ?? 0,
-          roofPitch: Math.round(selectedRoof?.roofPchBase ?? 0),
+          // roofPitch: Math.round(selectedRoof?.roofPchBase ?? 0),
+          roofPitch: hajebichi ?? 0,
           constTp: constructionList[index].constTp,
           mixMatlNo: selectedModules.mixMatlNo,
-          workingWidth: selectedRoof?.length.toString() ?? '',
+          // workingWidth: selectedRoof?.length.toString() ?? '',
+          workingWidth: lengthBase ?? '',
           // snowGdPossYn: constructionList[index].snowGdPossYn,
           // cvrYn: constructionList[index].cvrYn,
         },
@@ -254,25 +256,24 @@ const Trestle = forwardRef((props, ref) => {
       }
     })
 
-    console.log('newAddedRoofs', newAddedRoofs)
-
     if (result) {
       setRoofs(newAddedRoofs)
       setModuleSelectionData({
         ...moduleSelectionData,
         roofConstructions: newAddedRoofs.map((roof, index) => {
           return {
+            roofIndex: index,
             addRoof: {
+              ...moduleSelectionData.roofConstructions[index]?.addRoof,
               ...roof.addRoof,
-              ...moduleSelectionData.roofConstructions[index].addRoof,
             },
             trestle: {
               ...roof.trestle,
-              ...moduleSelectionData.roofConstructions[index].trestle,
+              ...moduleSelectionData.roofConstructions[index]?.trestle,
             },
             construction: {
+              ...moduleSelectionData.roofConstructions[index]?.construction,
               ...roof.construction,
-              ...moduleSelectionData.roofConstructions[index].construction,
             },
             trestleDetail: {
               ...roof.trestleDetail,
@@ -338,7 +339,7 @@ const Trestle = forwardRef((props, ref) => {
                           <input
                             type="text"
                             className="input-origin block"
-                            value={trestleState?.lengthBase}
+                            value={lengthBase}
                             onChange={(e) => setLengthBase(e.target.value)}
                             disabled={selectedRoof.lenAuth === 'R'}
                           />
@@ -379,7 +380,7 @@ const Trestle = forwardRef((props, ref) => {
                             type="text"
                             className="input-origin block"
                             disabled={selectedRoof.roofPchAuth === 'R'}
-                            onChange={(e) => handleHajebichiAndLength(e, 'hajebichi')}
+                            onChange={(e) => setHajebichi(e.target.value)}
                             value={hajebichi}
                           />
                         </div>

src/hooks/module/useModuleBasicSetting.js

@@ -10,6 +10,7 @@ import {
   isManualModuleSetupState,
   moduleSetupOptionState,
   toggleManualSetupModeState,
+  moduleRowColArrayState,
 } from '@/store/canvasAtom'
 
 import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon, toFixedWithoutRounding } from '@/util/canvas-util'
@@ -61,6 +62,7 @@ export function useModuleBasicSetting(tabNum) {
   const { drawDirectionArrow } = usePolygon()
   const moduleSetupOption = useRecoilValue(moduleSetupOptionState)
   const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState)
+  const [moduleRowColArray, setModuleRowColArray] = useRecoilState(moduleRowColArrayState)
 
   useEffect(() => {
     return () => {
@@ -81,6 +83,8 @@ export function useModuleBasicSetting(tabNum) {
 
   //모듈 선택에서 선택된 값들 넘어옴
   const makeModuleInitArea = () => {
+    console.log('moduleSelectionData', moduleSelectionData)
+
     if (isObjectNotEmpty(moduleSelectionData) && tabNum === 3) {
       if (canvasSetting.roofSizeSet !== '3') {
         const common = moduleSelectionData.common
@@ -90,11 +94,11 @@ export function useModuleBasicSetting(tabNum) {
           const listParams = roofConstructions.map((item) => {
             return {
               ...common,
-              roofMatlCd: item.trestle.roofMatlCd,
+              roofMatlCd: item.addRoof.roofMatlCd,
-              trestleMkrCd: item.trestle.trestleMkrCd,
+              trestleMkrCd: item.addRoof.trestleMkrCd,
-              constMthdCd: item.trestle.constMthdCd,
+              constMthdCd: item.addRoof.constMthdCd,
-              roofBaseCd: item.trestle.roofBaseCd,
+              roofBaseCd: item.addRoof.roofBaseCd,
-              constTp: item.construction.constTp,
+              constTp: item.addRoof.constTp,
               mixMatlNo: selectedModules.mixMatlNo,
               roofPitch: item.addRoof.hajebichi ? item.addRoof.hajebichi : 0,
               inclCd: String(item.addRoof.pitch),
@@ -140,6 +144,7 @@ export function useModuleBasicSetting(tabNum) {
   //가대 상세 데이터 들어오면 실행
   useEffect(() => {
     if (trestleDetailList.length > 0) {
+      let rowColArray = []
       //지붕을 가져옴
       canvas
         .getObjects()
@@ -147,26 +152,37 @@ export function useModuleBasicSetting(tabNum) {
         .forEach((roof) => {
           if (!roof.roofMaterial) return
           const roofIndex = roof.roofMaterial.index //지붕의 지붕재의 순번
+
           trestleDetailList.forEach((detail) => {
             if (detail.data !== null) {
               if (Number(detail.data.roofIndex) === roofIndex) {
                 //roof에 상세 데이터 추가
-
                 roof.set({
                   trestleDetail: detail.data,
                   stroke: roofOutlineColor(roofIndex),
                   strokeWidth: 7,
                 })
+
+                const offsetObjects = moduleSelectionData.roofConstructions.find((item) => item.addRoof.index === roofIndex)
+
                 roof.lines.forEach((line) => {
-                  line.attributes = { ...line.attributes, offset: getOffset(detail.data, line.attributes.type) }
+                  line.attributes = { ...line.attributes, offset: getOffset(offsetObjects.addRoof, line.attributes.type) }
                 })
                 //배치면 설치 영역
                 makeModuleInstArea(roof, detail.data)
-                //surface에 상세 데이터 추가
               }
             }
           })
         })
+
+      trestleDetailList.forEach((detail) => {
+        const moduleRowArray = []
+        detail.data.module.forEach((module) => {
+          moduleRowArray.push({ moduleMaxRows: module.moduleMaxRows, mixModuleMaxRows: module.mixModuleMaxRows })
+        })
+        rowColArray.push(moduleRowArray)
+      })
+      setModuleRowColArray(rowColArray)
     }
   }, [trestleDetailList])
 
@@ -185,12 +201,12 @@ export function useModuleBasicSetting(tabNum) {
   const getOffset = (data, type) => {
     switch (type) {
       case LINE_TYPE.WALLLINE.EAVES:
-        return data.eaveIntvl / 10
+        return data.eavesMargin / 10
       case LINE_TYPE.WALLLINE.GABLE:
-        return data.kerabaIntvl / 10
+        return data.kerabaMargin / 10
       case LINE_TYPE.SUBLINE.RIDGE:
       case LINE_TYPE.WALLLINE.SHED:
-        return data.ridgeIntvl / 10
+        return data.ridgeMargin / 10
       default:
         return 200 / 10
     }

src/hooks/module/useModuleTrestle.js

@@ -8,8 +8,6 @@ import { GlobalDataContext } from '@/app/GlobalDataProvider'
 const RAFT_BASE_CODE = '203800'
 
 const trestleReducer = (state, action) => {
-  console.log('🚀 ~ trestleReducer ~ state:', state)
-  console.log('🚀 ~ trestleReducer ~ action:', action)
   switch (action.type) {
     case 'SET_RAFT_BASE':
     case 'SET_TRESTLE_MAKER':
@@ -21,7 +19,6 @@ const trestleReducer = (state, action) => {
         ...action.roof,
       }
     case 'SET_INITIALIZE':
-      console.log('SET_INITIALIZE')
       return {
         moduleTpCd: action.roof.moduleTpCd ?? '',
         roofMatlCd: action.roof.roofMatlCd ?? '',
@@ -85,7 +82,6 @@ export function useModuleTrestle(props) {
 
   useEffect(() => {
     if (trestleState) {
-      console.log('🚀 ~ useEffect ~ trestleState:', trestleState)
       handleSetTrestleList()
       if (!trestleState.trestleMkrCd) {
         setConstMthdList([])
@@ -168,7 +164,7 @@ export function useModuleTrestle(props) {
       stdSnowLd: trestleState.stdSnowLd ?? '',
       inclCd: trestleState.inclCd ?? '',
       raftBaseCd: trestleState.raftBaseCd ?? '',
-      roofPitch: trestleState.roofPitch ?? '',
+      roofPitch: Math.round(trestleState.roofPitch) ?? '',
     }).then((res) => {
       if (res?.data) setConstructionList(res.data)
     })

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -296,7 +296,7 @@ export function useRoofAllocationSetting(id) {
         })
       }
 
-      return { ...roof, index: idx, raft: roof.raft ? roof.raft : roof.raftBaseCd }
+      return { ...roof, index: idx, raft: roof.raft ? roof.raft : roof.raftBaseCd, raftBaseCd: roof.raft ? roof.raft : roof.raftBaseCd }
     })
 
     setBasicSetting((prev) => {
@@ -308,7 +308,8 @@ export function useRoofAllocationSetting(id) {
     const selectedRoofMaterial = newRoofList.find((roof) => roof.selected)
     setSurfaceShapePattern(currentObject, roofDisplay.column, false, selectedRoofMaterial, true)
     drawDirectionArrow(currentObject)
-    modifyModuleSelectionData()
+    setModuleSelectionData({ ...moduleSelectionData, roofConstructions: newRoofList })
+    // modifyModuleSelectionData()
     closeAll()
     basicSettingSave()
   }
@@ -430,7 +431,8 @@ export function useRoofAllocationSetting(id) {
     setSelectedMenu('surface')
 
     /** 모듈 선택 데이터 초기화 */
-    modifyModuleSelectionData()
+    // modifyModuleSelectionData()
+    setModuleSelectionData({ ...moduleSelectionData, roofConstructions: newRoofList })
   }
 
   /**

src/store/canvasAtom.js

@@ -402,3 +402,9 @@ export const toggleManualSetupModeState = atom({
   key: 'toggleManualSetupModeState',
   default: '',
 })
+
+export const moduleRowColArrayState = atom({
+  key: 'moduleRowColArrayState',
+  default: [],
+  dangerouslyAllowMutability: true,
+})