고도화 작업 레이아웃 모듈 설치 기능

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

@@ -95,7 +95,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
         addedRoofs.map((roof, index) => {
           return {
             ...roof,
-            ...roofsStore[index].addRoof,
+            ...roofsStore[index]?.addRoof,
           }
         }),
       )

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

@@ -1,5 +1,6 @@
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import QSelectBox from '@/components/common/select/QSelectBox'
+import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import { useModuleTrestle } from '@/hooks/module/useModuleTrestle'
 import { useMessage } from '@/hooks/useMessage'
 import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
@@ -52,11 +53,15 @@ const Trestle = forwardRef((props, ref) => {
   const [selectedConstruction, setSelectedConstruction] = useState(null)
   const [selectedRoofBase, setSelectedRoofBase] = useState(null)
   const { managementState } = useContext(GlobalDataContext)
+  const { restoreModuleInstArea } = useModuleBasicSetting()
 
   useEffect(() => {
     if (roofs && !selectedRoof) {
       setSelectedRoof(roofs[0])
     }
+
+    //모듈 설치 영역 복구
+    restoreModuleInstArea()
   }, [roofs])
 
   useEffect(() => {
@@ -263,16 +268,16 @@ const Trestle = forwardRef((props, ref) => {
         roofConstructions: newAddedRoofs.map((roof, index) => {
           return {
             addRoof: {
+              ...moduleSelectionData.roofConstructions[index]?.addRoof,
               ...roof.addRoof,
-              ...moduleSelectionData.roofConstructions[index].addRoof,
             },
             trestle: {
               ...roof.trestle,
-              ...moduleSelectionData.roofConstructions[index].trestle,
+              ...moduleSelectionData.roofConstructions[index]?.trestle,
             },
             construction: {
               ...roof.construction,
-              ...moduleSelectionData.roofConstructions[index].construction,
+              ...moduleSelectionData.roofConstructions[index]?.construction,
             },
             trestleDetail: {
               ...roof.trestleDetail,

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,38 @@ export function useModuleBasicSetting(tabNum) {
         .forEach((roof) => {
           if (!roof.roofMaterial) return
           const roofIndex = roof.roofMaterial.index //지붕의 지붕재의 순번
+
+          console.log('moduleSelectionData', moduleSelectionData)
+
           trestleDetailList.forEach((detail) => {
             if (detail.data !== null) {
+              const moduleRowArray = []
               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)
+
+                console.log('offsetObjects', offsetObjects)
+
                 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에 상세 데이터 추가
               }
+              detail.data.module.forEach((module) => {
+                moduleRowArray.push({ moduleMaxRows: module.moduleMaxRows, mixModuleMaxRows: module.mixModuleMaxRows })
+              })
+              rowColArray.push(moduleRowArray)
             }
           })
         })
+      setModuleRowColArray(rowColArray)
     }
   }, [trestleDetailList])
 
@@ -185,12 +202,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/store/canvasAtom.js

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