# [1014] : 819の追加 レイアウト指定配置の自動配置

# [작업내용] : http://1.248.227.176:43333/issues/1014

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

@@ -331,15 +331,15 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
                   <button className={`btn-frame modal mr5 ${isManualModuleLayoutSetup ? 'act' : ''}`} onClick={handleManualModuleLayoutSetup}>
                     {getMessage('modal.module.basic.setting.row.batch')}
                   </button>
+                  <button className="btn-frame modal mr5" onClick={() => autoModuleSetup(MODULE_SETUP_TYPE.LAYOUT, layoutSetup)}>
+                    {getMessage('modal.module.basic.setting.auto.row.batch')}
+                  </button>
                   <button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
                     {getMessage('modal.module.basic.setting.passivity.placement')}
                   </button>
                   <button className="btn-frame modal act mr5" onClick={() => autoModuleSetup(MODULE_SETUP_TYPE.AUTO)}>
                     {getMessage('modal.module.basic.setting.auto.placement')}
                   </button>
-                  <button className="btn-frame modal act" onClick={() => autoModuleSetup(MODULE_SETUP_TYPE.LAYOUT, layoutSetup)}>
-                    {getMessage('modal.module.basic.setting.auto.row.batch')}
-                  </button>
                 </>
               )}
             </>

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

@@ -37,7 +37,7 @@ const Placement = forwardRef((props, refs) => {
   const resetModuleSetupOption = useResetRecoilState(moduleSetupOptionState)
 
   const [colspan, setColspan] = useState(1)
-  const [moduleRowColArray, setModuleRowColArray] = useRecoilState(moduleRowColArrayState)
+  const moduleRowColArray = useRecoilValue(moduleRowColArrayState)
 
   //모듈 배치면 생성
   useEffect(() => {
@@ -337,6 +337,7 @@ const Placement = forwardRef((props, refs) => {
                         </div>
                       </th>
                     ))}
+                  {colspan > 1 && <th rowSpan={2}>{getMessage('total')}</th>}
                 </tr>
                 <tr>
                   {selectedModules.itemList.map((item) => (
@@ -356,10 +357,11 @@ const Placement = forwardRef((props, refs) => {
                         <span className="name">{item.addRoof?.roofMatlNmJp}</span>
                       </div>
                     </td>
-                    {moduleRowColArray[index]?.map((item) => (
+                    {moduleRowColArray[index]?.map((item, index2) => (
                       <>
                         <td className="al-c">{item.moduleMaxRows}</td>
                         {colspan > 1 && <td className="al-c">{item.mixModuleMaxRows}</td>}
+                        {colspan > 1 && index2 === moduleRowColArray[index].length - 1 && <td className="al-c">{item.maxRow}</td>}
                       </>
                     ))}
                   </tr>

src/hooks/module/useModuleBasicSetting.js

@@ -49,20 +49,17 @@ export function useModuleBasicSetting(tabNum) {
   const [isManualModuleLayoutSetup, setIsManualModuleLayoutSetup] = useRecoilState(isManualModuleLayoutSetupState)
   const canvasSetting = useRecoilValue(canvasSettingState)
   const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
-  const [trestleDetailParams, setTrestleDetailParams] = useState([])
   const [trestleDetailList, setTrestleDetailList] = useState([])
   const selectedModules = useRecoilValue(selectedModuleState)
-  const { getTrestleDetailList } = useMasterController()
   const [saleStoreNorthFlg, setSaleStoreNorthFlg] = useState(false)
 
   const setCurrentObject = useSetRecoilState(currentObjectState)
   const { setModuleStatisticsData } = useCircuitTrestle()
   const { createRoofPolygon, createMarginPolygon, createPaddingPolygon } = useMode()
 
-  const { drawDirectionArrow } = usePolygon()
   const moduleSetupOption = useRecoilValue(moduleSetupOptionState)
   const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState)
-  const [moduleRowColArray, setModuleRowColArray] = useRecoilState(moduleRowColArrayState)
+  const setModuleRowColArray = useSetRecoilState(moduleRowColArrayState)
 
   useEffect(() => {
     return () => {
@@ -111,10 +108,6 @@ export function useModuleBasicSetting(tabNum) {
     }
   }
 
-  useEffect(() => {
-    console.log('saleStoreNorthFlg', saleStoreNorthFlg)
-  }, [saleStoreNorthFlg])
-
   //가대 상세 데이터 들어오면 실행
   useEffect(() => {
     if (trestleDetailList.length > 0) {
@@ -153,7 +146,7 @@ export function useModuleBasicSetting(tabNum) {
         const moduleRowArray = []
         if (isObjectNotEmpty(detail) && detail.module.length > 0) {
           detail.module.forEach((module) => {
-            moduleRowArray.push({ moduleMaxRows: module.moduleMaxRows, mixModuleMaxRows: module.mixModuleMaxRows })
+            moduleRowArray.push({ moduleMaxRows: module.moduleMaxRows, mixModuleMaxRows: module.mixModuleMaxRows, maxRow: detail.moduleMaxRows })
           })
         }
         rowColArray.push(moduleRowArray)
@@ -456,14 +449,14 @@ export function useModuleBasicSetting(tabNum) {
       }
 
       if (checkedModule.length === 0) {
-        swalFire({ text: getMessage('module.place.select.module') })
+        swalFire({ text: getMessage('module.place.select.module'), icon: 'warning' })
         setIsManualModuleSetup(false)
         setManualSetupMode(`manualSetup_false`)
         return
       }
 
       if (checkedModule.length > 1) {
-        swalFire({ text: getMessage('module.place.select.one.module') })
+        swalFire({ text: getMessage('module.place.select.one.module'), icon: 'warning' })
         setIsManualModuleSetup(false)
         setManualSetupMode(`manualSetup_false`)
         return
@@ -1048,26 +1041,6 @@ export function useModuleBasicSetting(tabNum) {
               },
             ]
 
-            //아래래
-            // let points = [
-            //   {
-            //     x: Number(mousePoint.x.toFixed(1)) - calcHalfWidth,
-            //     y: Number(mousePoint.y.toFixed(1)) - calcHalfHeight,
-            //   },
-            //   {
-            //     x: Number(mousePoint.x.toFixed(1)) - calcHalfWidth,
-            //     y: Number(mousePoint.y.toFixed(1)) + calcHalfHeight,
-            //   },
-            //   {
-            //     x: Number(mousePoint.x.toFixed(1)) + calcHalfWidth,
-            //     y: Number(mousePoint.y.toFixed(1)) + calcHalfHeight,
-            //   },
-            //   {
-            //     x: Number(mousePoint.x.toFixed(1)) + calcHalfWidth,
-            //     y: Number(mousePoint.y.toFixed(1)) - calcHalfHeight,
-            //   },
-            // ]
-
             const turfPoints = coordToTurfPolygon(points)
 
             if (turf.booleanWithin(turfPoints, turfPolygon)) {
@@ -1829,6 +1802,16 @@ export function useModuleBasicSetting(tabNum) {
     // })
 
     //자동일때만 선택 안된 모듈 삭제
+    moduleSetupSurfaces.forEach((obj) => {
+      if (obj.modules) {
+        obj.modules.forEach((module) => {
+          canvas?.remove(module)
+          canvas?.renderAll()
+        })
+        obj.modules = []
+      }
+    })
+
     if (type === MODULE_SETUP_TYPE.AUTO) {
       notSelectedTrestlePolygons.forEach((obj) => {
         if (obj.modules) {
@@ -1839,17 +1822,6 @@ export function useModuleBasicSetting(tabNum) {
           obj.modules = []
         }
       })
-    } else {
-      //레이아웃일때는 기존에 깔린 모듈은 삭제 하지 않음 선택된 영역만 모듈 삭제
-      moduleSetupSurfaces.forEach((obj) => {
-        if (obj.modules) {
-          obj.modules.forEach((module) => {
-            canvas?.remove(module)
-            canvas?.renderAll()
-          })
-          obj.modules = []
-        }
-      })
     }
 
     let moduleOptions = {
@@ -1864,9 +1836,6 @@ export function useModuleBasicSetting(tabNum) {
       name: POLYGON_TYPE.MODULE,
     }
 
-    //체크된 모듈 중에 북면 모듈이 있는지 확인하는 로직
-    const isIncludeNorthModule = checkedModule.some((module) => module.northModuleYn === 'Y')
-
     //선택된 지붕안에 오브젝트(도머, 개구등)이 있는지 확인하는 로직 포함되면 배열 반환
     const objectsIncludeSurface = (turfModuleSetupSurface) => {
       let containsBatchObjects = []
@@ -1895,49 +1864,46 @@ export function useModuleBasicSetting(tabNum) {
 
     /**
      * 자동 레이아웃 설치 일시 row col 초과 여부 확인
+     * 체크된 모듈중에 북면 모듈이 있으면 북면 모듈만 따로 계산하고 아니면 전체 모듈을 계산
+     * 북면 모듈이 있고 북면이 들어오면 북면의 row를 계산한다
+     *
      * @param {*} trestleDetailData
      * @returns
      */
     const checkAutoLayoutModuleSetup = (moduleSetupSurface, trestleDetailData) => {
-      /**
-       * 체크된 모듈중에 북면 모듈이 있으면 북면 모듈만 따로 계산하고 아니면 전체 모듈을 계산
-       * 북면 모듈이 있고 북면이 들어오면 북면의 row를 계산한다
-       *
-       */
-
       //북면 모듈이 없을때
+      //체크된 모듈 중에 북면 모듈이 있는지 확인하는 로직
+      const isIncludeNorthModule = checkedModule.some((module) => module.northModuleYn === 'Y')
+      const maxCol = trestleDetailData.moduleMaxCols //최대 열수 -> 얘는 멀티랑 관계없음
+
+      //북면 모듈이 없으면
       if (!isIncludeNorthModule) {
-        const isMultipleModules = checkedModule.length > 1 //모듈이 여러개면
+        const isMultipleModules = checkedModule.length > 1 //모듈이 여러개인지 체크하고
-        const maxCol = trestleDetailData.moduleMaxCols //최대 열수 -> 얘는 멀티랑 관계없음
+
+        //멀티 모듈이면 모듈밖에 내려온 정보의 maxRow 단일 모듈이면 모듈에 maxRow
         const maxRow = isMultipleModules
           ? trestleDetailData.moduleMaxRows
           : trestleDetailData.module.find((item) => item.moduleTpCd === checkedModule[0].moduleTpCd).moduleMaxRows //멀티모듈이면 밖에 maxRows로 판단 아니면 module->itemmList를 가지고 판단
 
-        //단수 합단수
+        //멀티 모듈이면 모듈밖에 내려온 정보의 row 합, 단일 모듈이면 모듈에 row
         const sumRowCount = isMultipleModules
           ? layoutSetupRef.filter((item) => item.checked).reduce((acc, cur) => acc + cur.row, 0)
           : layoutSetupRef.find((item) => item.moduleId === checkedModule[0].itemId).row //멀티모듈이면 전체 합, 체크된 한개의 열
 
-        //
+        //col는 moduleItems 배열 밖에 내려옴
         const sumColCount = layoutSetupRef.filter((item) => item.col).some((item) => item.col > maxCol)
 
-        if (sumRowCount > maxRow || sumColCount) {
+        // 혼합일때 모듈 개별의 maxRow를 체크해서 가능여부 확인
-          failAutoSetupRoof.push(moduleSetupSurface)
-          return false
-        }
-
-        // 혼합일때 모듈 개별의 row를 체크함
         const isPassedObject =
-          isMultipleModules && layoutSetupRef.find((item, index) => item.checked && item.row > trestleDetailData.module[index].mixModuleMaxRows)
+          isMultipleModules && layoutSetupRef.find((item, index) => item.checked && item.row > trestleDetailData.module[index].mixModuleMaxRows) //체크된 배열은 checked여부로 체크해서 index와 동일함
-
+        //전체 카은트된 열수가 크거나 혼합카운트가 존재 하면 실패
-        if (isPassedObject) {
+        if (sumRowCount > maxRow || sumColCount || isPassedObject) {
           failAutoSetupRoof.push(moduleSetupSurface)
           return false
         }
       } else {
         //북면 모듈만 선택했을때
         if (checkedModule.length === 1) {
-          const maxCol = trestleDetailData.moduleMaxCols //최대 열수 -> 얘는 멀티랑 관계없음
           const maxRow = trestleDetailData.module.find((item) => item.moduleTpCd === checkedModule[0].moduleTpCd).moduleMaxRows //멀티모듈이면 밖에 maxRows로 판단 아니면 module->itemmList를 가지고 판단
 
           //단수 합단수
@@ -1958,7 +1924,6 @@ export function useModuleBasicSetting(tabNum) {
           if (normalModule.length > 0 && !moduleSetupSurface.isNorth) {
             //C1C2 모듈일 경우ㅁㅁ
             const isMultipleModules = normalModule.length > 1 //모듈이 여러개면
-            const maxCol = trestleDetailData.moduleMaxCols //최대 열수 -> 얘는 멀티랑 관계없음
             const maxRow = isMultipleModules
               ? trestleDetailData.moduleMaxRows
               : trestleDetailData.module.find((item) => item.moduleTpCd === normalModule[0].moduleTpCd).moduleMaxRows //멀티모듈이면 밖에 maxRows로 판단 아니면 module->itemmList를 가지고 판단
@@ -1971,11 +1936,6 @@ export function useModuleBasicSetting(tabNum) {
             //북면 모듈 id를 제외한 모듈의 열 체크
             const sumColCount = layoutSetupRef.filter((item) => item.col && !northModuleIds.includes(item.moduleId)).some((item) => item.col > maxCol)
 
-            if (sumRowCount > maxRow || sumColCount) {
-              failAutoSetupRoof.push(moduleSetupSurface)
-              return false
-            }
-
             // 혼합일때 모듈 개별의 row를 체크함
             const isPassedObject =
               isMultipleModules &&
@@ -1984,16 +1944,15 @@ export function useModuleBasicSetting(tabNum) {
                   item.checked && !item.moduleId.includes(northModuleIds) && item.row > trestleDetailData.module[index].mixModuleMaxRows,
               )
 
-            if (isPassedObject) {
+            // 합산 단수가 맥스단수보다 크거나 열이 맥스열수보다 크거나 혼합일때 모듈 개별의 row가 맥스단수보다 크면 실패
+            if (sumRowCount > maxRow || sumColCount || isPassedObject) {
               failAutoSetupRoof.push(moduleSetupSurface)
               return false
             }
           }
 
-          if (northModule.length > 0 && moduleSetupSurface.isNorth) {
+          if (northModule.length > 0) {
             const isMultipleModules = northModule.length > 1 //모듈이 여러개면
-            const maxCol = trestleDetailData.moduleMaxCols //최대 열수 -> 얘는 멀티랑 관계없음
-
             const maxRow = isMultipleModules
               ? trestleDetailData.moduleMaxRows
               : trestleDetailData.module.find((item) => item.moduleTpCd === northModule[0].moduleTpCd).moduleMaxRows //멀티모듈이면 밖에 maxRows로 판단 아니면 module->itemmList를 가지고 판단
@@ -2004,11 +1963,6 @@ export function useModuleBasicSetting(tabNum) {
 
             const sumColCount = layoutSetupRef.filter((item) => item.col && northModuleIds.includes(item.moduleId)).some((item) => item.col > maxCol)
 
-            if (sumRowCount > maxRow || sumColCount) {
-              failAutoSetupRoof.push(moduleSetupSurface)
-              return false
-            }
-
             // 혼합일때 모듈 개별의 row를 체크함
             const isPassedObject =
               isMultipleModules &&
@@ -2017,7 +1971,8 @@ export function useModuleBasicSetting(tabNum) {
                   item.checked && northModuleIds.includes(item.moduleId) && item.row > trestleDetailData.module[index].mixModuleMaxRows,
               )
 
-            if (isPassedObject) {
+            // 합산 단수가 맥스단수보다 크거나 열이 맥스열수보다 크거나 혼합일때 모듈 개별의 row가 맥스단수보다 크면 실패
+            if (sumRowCount > maxRow || sumColCount || isPassedObject) {
               failAutoSetupRoof.push(moduleSetupSurface)
               return false
             }
@@ -2028,16 +1983,7 @@ export function useModuleBasicSetting(tabNum) {
     }
 
     //흐름 방향이 남쪽(아래)
-    const downFlowSetupModule = (
+    const downFlowSetupModule = (maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, intvHor, intvVer) => {
-      surfaceMaxLines, //deprecated
-      maxLengthLine,
-      moduleSetupArray,
-      moduleSetupSurface,
-      containsBatchObjects,
-      isCenter = false, //deprecated
-      intvHor,
-      intvVer,
-    ) => {
       let setupModule = []
 
       const trestleDetailData = moduleSetupSurface.trestleDetail
@@ -2215,16 +2161,7 @@ export function useModuleBasicSetting(tabNum) {
       }
     }
 
-    const topFlowSetupModule = (
+    const topFlowSetupModule = (maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, intvHor, intvVer) => {
-      surfaceMaxLines,
-      maxLengthLine,
-      moduleSetupArray,
-      moduleSetupSurface,
-      containsBatchObjects,
-      isCenter = false,
-      intvHor,
-      intvVer,
-    ) => {
       let setupModule = []
 
       const trestleDetailData = moduleSetupSurface.trestleDetail
@@ -2405,12 +2342,11 @@ export function useModuleBasicSetting(tabNum) {
     //남, 북과 같은 로직으로 적용하려면 좌우는 열 -> 행 으로 그려야함
     //변수명은 bottom 기준으로 작성하여 동일한 방향으로 진행한다
     const leftFlowSetupModule = (
-      surfaceMaxLines,
       maxLengthLine,
       moduleSetupArray,
       moduleSetupSurface,
       containsBatchObjects,
-      isCenter = false,
+
       intvHor,
       intvVer,
     ) => {
@@ -2597,16 +2533,7 @@ export function useModuleBasicSetting(tabNum) {
       }
     }
 
-    const rightFlowSetupModule = (
+    const rightFlowSetupModule = (maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, intvHor, intvVer) => {
-      surfaceMaxLines,
-      maxLengthLine,
-      moduleSetupArray,
-      moduleSetupSurface,
-      containsBatchObjects,
-      isCenter = false,
-      intvHor,
-      intvVer,
-    ) => {
       let setupModule = []
 
       const trestleDetailData = moduleSetupSurface.trestleDetail //가대 상세 데이터
@@ -2798,7 +2725,6 @@ export function useModuleBasicSetting(tabNum) {
 
       const turfModuleSetupSurface = polygonToTurfPolygon(moduleSetupSurface) //폴리곤을 turf 객체로 변환
       const containsBatchObjects = objectsIncludeSurface(turfModuleSetupSurface) //배치면에 오브젝트(도머, 개구등)이 있는지 확인하는 로직
-      const surfaceMaxLines = findSetupSurfaceMaxLines(moduleSetupSurface)
 
       let maxLengthLine = moduleSetupSurface.lines.reduce((acc, cur) => {
         return acc.length > cur.length ? acc : cur
@@ -2819,30 +2745,30 @@ export function useModuleBasicSetting(tabNum) {
       if (setupLocation === 'eaves') {
         // 흐름방향이 남쪽일때
         if (moduleSetupSurface.direction === 'south') {
-          downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
+          downFlowSetupModule(maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, intvHor, intvVer)
         }
         if (moduleSetupSurface.direction === 'west') {
-          leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
+          leftFlowSetupModule(maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, intvHor, intvVer)
         }
         if (moduleSetupSurface.direction === 'east') {
-          rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
+          rightFlowSetupModule(maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, intvHor, intvVer)
         }
         if (moduleSetupSurface.direction === 'north') {
-          topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
+          topFlowSetupModule(maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, intvHor, intvVer)
         }
       } else if (setupLocation === 'ridge') {
         //용마루
         if (moduleSetupSurface.direction === 'south') {
-          topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
+          topFlowSetupModule(maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, intvHor, intvVer)
         }
         if (moduleSetupSurface.direction === 'west') {
-          rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
+          rightFlowSetupModule(maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, intvHor, intvVer)
         }
         if (moduleSetupSurface.direction === 'east') {
-          leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
+          leftFlowSetupModule(maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, intvHor, intvVer)
         }
         if (moduleSetupSurface.direction === 'north') {
-          downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
+          downFlowSetupModule(maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, intvHor, intvVer)
         }
       }
 

src/locales/ja.json

@@ -1071,8 +1071,8 @@
   "module.layout.setup.max.count.multiple": "モジュール{0}の単体での最大段数は{1}、最大列数は{2}です。 (JA)",
   "roofAllocation.not.found": "割り当てる屋根がありません。 (JA)",
   "modal.module.basic.setting.module.placement.max.size.check": "屋根材別モジュールの単体の単体での最大段数、2種混合の段数を確認して下さい",
-  "modal.module.basic.setting.module.placement.max.row": "単体での最大段数",
+  "modal.module.basic.setting.module.placement.max.row": "単体で\rの最大段数",
-  "modal.module.basic.setting.module.placement.max.rows.multiple": "2種混合時の最大段数",
+  "modal.module.basic.setting.module.placement.max.rows.multiple": "2種混合時\rの最大段数",
   "modal.module.basic.setting.module.placement.mix.asg.yn.error": "混合インストール不可能なモジュールです。 (JA)",
   "modal.module.basic.setting.module.placement.mix.asg.yn": "混合",
   "modal.module.basic.setting.layoutpassivity.placement": "layout配置 (JA)"