diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx
index ff56d212..e2a38de8 100644
--- a/src/components/floor-plan/modal/basic/BasicSetting.jsx
+++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx
@@ -25,9 +25,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const [tabNum, setTabNum] = useState(1)
-  const canvasSetting = useRecoilValue(canvasSettingState)
   const orientationRef = useRef(null)
-  const { initEvent } = useEvent()
   const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
   const [isManualModuleLayoutSetup, setIsManualModuleLayoutSetup] = useRecoilState(isManualModuleLayoutSetupState)
 
@@ -40,12 +38,9 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const [isClosePopup, setIsClosePopup] = useState({ close: false, id: 0 })
   const [checkedModules, setCheckedModules] = useRecoilState(checkedModuleState)
 
-  const [manualSetupMode, setManualSetupMode] = useState('manualSetup')
+  const [manualSetupMode, setManualSetupMode] = useState('')
 
-  const [layoutSetup, setLayoutSetup] = useState({
-    col: 1,
-    row: 1,
-  })
+  const [layoutSetup, setLayoutSetup] = useState([{}])
 
   // const { initEvent } = useContext(EventContext)
   const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup, manualModuleLayoutSetup } =
@@ -98,12 +93,10 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const placementRef = {
     isChidori: useRef('false'),
     setupLocation: useRef('eaves'),
-    layoutSetup: useRef({
-      col: 1,
-      row: 1,
-    }),
   }
 
+  const layoutSetupRef = useRef([])
+
   const placementFlatRef = {
     setupLocation: useRef('south'),
   }
@@ -114,6 +107,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   }
 
   const handleManualModuleLayoutSetup = () => {
+    console.log('asdfasdkljfhaskjdhfakjsdhkfjh')
     setManualSetupMode(`manualLayoutSetup_${!isManualModuleLayoutSetup}`)
     setIsManualModuleLayoutSetup(!isManualModuleLayoutSetup)
   }
@@ -140,16 +134,21 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
       if (isManualModuleSetup) {
         setIsManualModuleSetup(false)
       }
+      if (isManualModuleLayoutSetup) {
+        setIsManualModuleLayoutSetup(false)
+      }
     }
     setIsClosePopup({ close: true, id: id })
   }
 
   useEffect(() => {
+    console.log('asdfasdf', manualSetupMode)
+
     if (basicSetting.roofSizeSet !== '3') {
       if (manualSetupMode.indexOf('manualSetup') > -1) {
         manualModuleSetup(placementRef)
       } else if (manualSetupMode.indexOf('manualLayoutSetup') > -1) {
-        manualModuleLayoutSetup(placementRef)
+        manualModuleLayoutSetup(layoutSetupRef)
       }
     } else {
       manualFlatroofModuleSetup(placementFlatRef)
@@ -161,7 +160,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
 
   useEffect(() => {
     if (isManualModuleLayoutSetup) {
-      manualModuleLayoutSetup(placementRef)
+      manualModuleLayoutSetup(layoutSetupRef)
     }
   }, [layoutSetup])
 
@@ -183,7 +182,15 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
         {tabNum === 1 && <Orientation ref={orientationRef} tabNum={tabNum} setTabNum={setTabNum} />}
         {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
         {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Module setTabNum={setTabNum} />}
-        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
+        {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && (
+          <Placement
+            setTabNum={setTabNum}
+            ref={placementRef}
+            layoutSetupRef={layoutSetupRef}
+            layoutSetup={layoutSetup}
+            setLayoutSetup={setLayoutSetup}
+          />
+        )}
 
         {/*배치면 초기설정 - 입력방법: 육지붕*/}
         {basicSetting.roofSizeSet && basicSetting.roofSizeSet == '3' && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
diff --git a/src/components/floor-plan/modal/basic/step/Placement.jsx b/src/components/floor-plan/modal/basic/step/Placement.jsx
index d2fca8b2..f2c3c83f 100644
--- a/src/components/floor-plan/modal/basic/step/Placement.jsx
+++ b/src/components/floor-plan/modal/basic/step/Placement.jsx
@@ -1,7 +1,7 @@
 import { forwardRef, useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
-import { checkedModuleState, currentCanvasPlanState, isManualModuleSetupState } from '@/store/canvasAtom'
+import { checkedModuleState, currentCanvasPlanState, isManualModuleLayoutSetupState, isManualModuleSetupState } from '@/store/canvasAtom'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { isObjectNotEmpty } from '@/util/common-utils'
@@ -23,7 +23,9 @@ const Placement = forwardRef((props, refs) => {
 
   const [isMultiModule, setIsMultiModule] = useState(false)
 
-  const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
+  //언마운트시 버튼 초기화
+  const setIsManualModuleSetup = useSetRecoilState(isManualModuleSetupState)
+  const setIsManualModuleLayoutSetup = useSetRecoilState(isManualModuleLayoutSetupState)
 
   //모듈 배치면 생성
   useEffect(() => {
@@ -38,6 +40,7 @@ const Placement = forwardRef((props, refs) => {
 
     return () => {
       setIsManualModuleSetup(false)
+      setIsManualModuleLayoutSetup(false)
     }
   }, [])
 
@@ -56,6 +59,8 @@ const Placement = forwardRef((props, refs) => {
         })
         setSelectedItems(initCheckedModule)
         setSelectedModules(moduleSelectionData.module)
+        props.setLayoutSetup(moduleSelectionData.module.itemList.map((item) => ({ moduleId: item.itemId, col: 0, row: 0 })))
+        props.layoutSetupRef.current = moduleSelectionData.module.itemList.map((item) => ({ moduleId: item.itemId, col: 0, row: 0 }))
       }
 
       //모듈 배치면 생성
@@ -111,9 +116,11 @@ const Placement = forwardRef((props, refs) => {
     setSelectedItems({ ...selectedItems, [e.target.name]: e.target.checked })
   }
 
-  const handleLayoutSetup = (e) => {
-    props.setLayoutSetup({ ...props.layoutSetup, [e.target.name]: Number(e.target.value) })
-    refs.layoutSetup.current = { ...props.layoutSetup, [e.target.name]: Number(e.target.value) }
+  const handleLayoutSetup = (e, itemId, index) => {
+    const newLayoutSetup = [...props.layoutSetup]
+    newLayoutSetup[index] = { ...newLayoutSetup[index], moduleId: itemId, [e.target.name]: Number(e.target.value) }
+    props.setLayoutSetup(newLayoutSetup)
+    props.layoutSetupRef.current[index] = { ...props.layoutSetupRef.current[index], moduleId: itemId, [e.target.name]: Number(e.target.value) }
   }
 
   return (
@@ -162,6 +169,24 @@ const Placement = forwardRef((props, refs) => {
                           </div>
                         </td>
                         <td className="al-r">{item.wpOut}</td>
+                        <label htmlFor="ra06">행</label>
+                        <input
+                          type="text"
+                          className="input-origin block mr10"
+                          name="col"
+                          value={props.layoutSetup[index]?.col ?? 1}
+                          defaultValue={1}
+                          onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
+                        />{' '}
+                        ×<label htmlFor="ra07">열</label>
+                        <input
+                          type="text"
+                          className="input-origin block"
+                          name="row"
+                          value={props.layoutSetup[index]?.row ?? 1}
+                          defaultValue={1}
+                          onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
+                        />
                       </tr>
                     ))}
                 </tbody>
@@ -238,33 +263,6 @@ const Placement = forwardRef((props, refs) => {
                   </div>
                 </div>
               </div>
-              <div className="self-table-item">
-                <div className="self-item-th">레이아웃 입력</div>
-                <div className="self-item-td">
-                  <div className="pop-form-radio">
-                    <div className="d-check-radio pop">
-                      <label htmlFor="ra06">열</label>
-                      <input
-                        type="text"
-                        className="input-origin block mr10"
-                        name="col"
-                        value={props.layoutSetup.col}
-                        defaultValue={1}
-                        onChange={handleLayoutSetup}
-                      />{' '}
-                      ×<label htmlFor="ra07">행</label>
-                      <input
-                        type="text"
-                        className="input-origin block"
-                        name="row"
-                        value={props.layoutSetup.row}
-                        defaultValue={1}
-                        onChange={handleLayoutSetup}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
             </div>
             <div className="self-table-flx">
               {/* <div className="d-check-box pop">
diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js
index 27dee861..44f7d21e 100644
--- a/src/hooks/module/useModuleBasicSetting.js
+++ b/src/hooks/module/useModuleBasicSetting.js
@@ -560,7 +560,7 @@ export function useModuleBasicSetting(tabNum) {
               /**
                * 스냅기능
                */
-              let snapDistance = flowDirection === 'south' || flowDirection === 'north' ? 70 : 40
+              let snapDistance = flowDirection === 'south' || flowDirection === 'north' ? 10 : 10
               let trestleSnapDistance = 15
 
               let intvHor =
@@ -817,7 +817,7 @@ export function useModuleBasicSetting(tabNum) {
     }
   }
 
-  const manualModuleLayoutSetup = (placementRef) => {
+  const manualModuleLayoutSetup = (layoutSetupRef) => {
     if (isManualModuleSetup) {
       setIsManualModuleSetup(false)
     }
@@ -831,8 +831,12 @@ export function useModuleBasicSetting(tabNum) {
         return
       }
 
-      if (checkedModule.length > 1) {
-        swalFire({ text: getMessage('module.place.select.one.module') })
+      const hasZeroLength = checkedModule.some((item) =>
+        layoutSetupRef.current.some((layoutItem) => item.itemId === layoutItem.moduleId && (layoutItem.row === 0 || layoutItem.col === 0)),
+      )
+
+      if (hasZeroLength) {
+        swalFire({ text: getMessage('모듈의 열, 행을 입력해 주세요.') })
         setIsManualModuleLayoutSetup(!isManualModuleLayoutSetup)
         return
       }
@@ -876,8 +880,8 @@ export function useModuleBasicSetting(tabNum) {
       }
 
       if (moduleSetupSurfaces.length !== 0) {
-        const col = placementRef.layoutSetup.current.col
-        const row = placementRef.layoutSetup.current.row
+        // const col = layoutSetupRef.current[0].col
+        // const row = layoutSetupRef.current[0].row
 
         let tempModule
         let manualDrawModules = []
@@ -924,48 +928,48 @@ export function useModuleBasicSetting(tabNum) {
                 ? moduleSetupSurfaces[i].trestleDetail.moduleIntvlVer / 10
                 : moduleSetupSurfaces[i].trestleDetail.moduleIntvlHor / 10
 
-            let calcHalfWidth = (Number((width * col).toFixed(1)) + Number((intvHor * (col - 1)).toFixed(1))) / 2
-            let calcHalfHeight = (Number((height * row).toFixed(1)) + Number((intvVer * (row - 1)).toFixed(1))) / 2
+            // let calcHalfWidth = (Number((width * col).toFixed(1)) + Number((intvHor * (col - 1)).toFixed(1))) / 2
+            // let calcHalfHeight = (Number((height * row).toFixed(1)) + Number((intvVer * (row - 1)).toFixed(1))) / 2
 
             //아래래
-            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 points = [
+            // let points = [
             //   {
-            //     x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)),
-            //     y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)),
+            //     x: Number(mousePoint.x.toFixed(1)) - calcHalfWidth,
+            //     y: Number(mousePoint.y.toFixed(1)) - calcHalfHeight,
             //   },
             //   {
-            //     x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)),
-            //     y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)),
+            //     x: Number(mousePoint.x.toFixed(1)) - calcHalfWidth,
+            //     y: Number(mousePoint.y.toFixed(1)) + calcHalfHeight,
             //   },
             //   {
-            //     x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)),
-            //     y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)),
+            //     x: Number(mousePoint.x.toFixed(1)) + calcHalfWidth,
+            //     y: Number(mousePoint.y.toFixed(1)) + calcHalfHeight,
             //   },
             //   {
-            //     x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)),
-            //     y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)),
+            //     x: Number(mousePoint.x.toFixed(1)) + calcHalfWidth,
+            //     y: Number(mousePoint.y.toFixed(1)) - calcHalfHeight,
             //   },
             // ]
 
+            const points = [
+              {
+                x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)),
+                y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)),
+              },
+              {
+                x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)),
+                y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)),
+              },
+              {
+                x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)),
+                y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)),
+              },
+              {
+                x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)),
+                y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)),
+              },
+            ]
+
             const turfPoints = coordToTurfPolygon(points)
 
             if (turf.booleanWithin(turfPoints, turfPolygon)) {
@@ -979,14 +983,14 @@ export function useModuleBasicSetting(tabNum) {
                 stroke: 'black',
                 strokeWidth: 1,
                 strokeDashArray: [10, 5],
-                // width: Number(width.toFixed(1)), //작은버전
-                // height: Number(height.toFixed(1)), //작은버전
-                // left: Number(mousePoint.x.toFixed(1) - Number((width / 2).toFixed(1))), //작은버전
-                // top: Number(mousePoint.y.toFixed(1) - Number((height / 2).toFixed(1))), //작은버전
-                width: Number((width * col).toFixed(1)) + Number((intvHor * (col - 1)).toFixed(1)), //큰버전
-                height: Number((height * row).toFixed(1)) + Number((intvVer * (row - 1)).toFixed(1)), //큰버전
-                left: Number(mousePoint.x.toFixed(1)) - calcHalfWidth.toFixed(1), //큰버전
-                top: Number(mousePoint.y.toFixed(1)) - calcHalfHeight.toFixed(1), //큰버전
+                width: Number(width.toFixed(1)), //작은버전
+                height: Number(height.toFixed(1)), //작은버전
+                left: Number(mousePoint.x.toFixed(1) - Number((width / 2).toFixed(1))), //작은버전
+                top: Number(mousePoint.y.toFixed(1) - Number((height / 2).toFixed(1))), //작은버전
+                // width: Number((width * col).toFixed(1)) + Number((intvHor * (col - 1)).toFixed(1)), //큰버전
+                // height: Number((height * row).toFixed(1)) + Number((intvVer * (row - 1)).toFixed(1)), //큰버전
+                // left: Number(mousePoint.x.toFixed(1)) - calcHalfWidth.toFixed(1), //큰버전
+                // top: Number(mousePoint.y.toFixed(1)) - calcHalfHeight.toFixed(1), //큰버전
                 selectable: false,
                 lockMovementX: true,
                 lockMovementY: true,
@@ -1027,60 +1031,60 @@ export function useModuleBasicSetting(tabNum) {
               /**
                * 미리 깔아놓은 셀이 있을때 셀에 흡착됨
                */
-              // if (manualDrawModules) {
-              //   manualDrawModules.forEach((cell) => {
-              //     const holdCellLeft = cell.left
-              //     const holdCellTop = cell.top
-              //     const holdCellRight = holdCellLeft + Number(cell.width.toFixed(1))
-              //     const holdCellBottom = holdCellTop + Number(cell.height.toFixed(1))
-              //     const holdCellCenterX = holdCellLeft + Number((cell.width / 2).toFixed(1))
-              //     const holdCellCenterY = holdCellTop + Number((cell.height / 2).toFixed(1))
+              if (manualDrawModules) {
+                manualDrawModules.forEach((cell) => {
+                  const holdCellLeft = cell.left
+                  const holdCellTop = cell.top
+                  const holdCellRight = holdCellLeft + Number(cell.width.toFixed(1))
+                  const holdCellBottom = holdCellTop + Number(cell.height.toFixed(1))
+                  const holdCellCenterX = holdCellLeft + Number((cell.width / 2).toFixed(1))
+                  const holdCellCenterY = holdCellTop + Number((cell.height / 2).toFixed(1))
 
-              //     //설치된 셀에 좌측에 스냅
-              //     if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
-              //       tempModule.left = holdCellLeft - width - intvHor
-              //     }
+                  //설치된 셀에 좌측에 스냅
+                  if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
+                    tempModule.left = holdCellLeft - width - intvHor
+                  }
 
-              //     //설치된 셀에 우측에 스냅
-              //     if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
-              //       tempModule.left = holdCellRight + intvHor
-              //     }
+                  //설치된 셀에 우측에 스냅
+                  if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
+                    tempModule.left = holdCellRight + intvHor
+                  }
 
-              //     //설치된 셀에 위쪽에 스냅
-              //     if (Math.abs(smallBottom - holdCellTop) < snapDistance) {
-              //       tempModule.top = holdCellTop - height - intvVer
-              //     }
+                  //설치된 셀에 위쪽에 스냅
+                  if (Math.abs(smallBottom - holdCellTop) < snapDistance) {
+                    tempModule.top = holdCellTop - height - intvVer
+                  }
 
-              //     //설치된 셀에 밑쪽에 스냅
-              //     if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
-              //       tempModule.top = holdCellBottom + intvVer
-              //     }
-              //     //가운데 -> 가운데
-              //     if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) {
-              //       tempModule.left = holdCellCenterX - Number((width / 2).toFixed(1))
-              //     }
-              //     //왼쪽 -> 가운데
-              //     if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) {
-              //       tempModule.left = holdCellCenterX
-              //     }
-              //     // 오른쪽 -> 가운데
-              //     if (Math.abs(smallRight - holdCellCenterX) < snapDistance) {
-              //       tempModule.left = holdCellCenterX - width
-              //     }
-              //     //세로 가운데 -> 가운데
-              //     if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) {
-              //       tempModule.top = holdCellCenterY - Number((height / 2).toFixed(1))
-              //     }
-              //     // //위쪽 -> 가운데
-              //     // if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) {
-              //     //   tempModule.top = holdCellCenterY
-              //     // }
-              //     // //아랫쪽 -> 가운데
-              //     // if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) {
-              //     //   tempModule.top = holdCellCenterY - height
-              //     // }
-              //   })
-              // }
+                  //설치된 셀에 밑쪽에 스냅
+                  if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
+                    tempModule.top = holdCellBottom + intvVer
+                  }
+                  //가운데 -> 가운데
+                  if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) {
+                    tempModule.left = holdCellCenterX - Number((width / 2).toFixed(1))
+                  }
+                  //왼쪽 -> 가운데
+                  if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) {
+                    tempModule.left = holdCellCenterX
+                  }
+                  // 오른쪽 -> 가운데
+                  if (Math.abs(smallRight - holdCellCenterX) < snapDistance) {
+                    tempModule.left = holdCellCenterX - width
+                  }
+                  //세로 가운데 -> 가운데
+                  if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) {
+                    tempModule.top = holdCellCenterY - Number((height / 2).toFixed(1))
+                  }
+                  // //위쪽 -> 가운데
+                  // if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) {
+                  //   tempModule.top = holdCellCenterY
+                  // }
+                  // //아랫쪽 -> 가운데
+                  // if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) {
+                  //   tempModule.top = holdCellCenterY - height
+                  // }
+                })
+              }
 
               // 위쪽 변에 스냅
               if (Math.abs(smallTop - trestleTop) < trestleSnapDistance) {
@@ -1152,37 +1156,66 @@ export function useModuleBasicSetting(tabNum) {
           if (!inside) return
           if (tempModule) {
             let startX, startY
-
-            console.log(tempModule)
+            let installedLastHeightCoord = 0 //마지막으로 설치된 모듈의 좌표
 
             //그려진 가이드 라인의 포인트를 기준으로 시작점을 만든다
             if (flowDirection === 'south') {
               startX = toFixedWithoutRounding(tempModule.left, 1)
               startY = toFixedWithoutRounding(tempModule.top + tempModule.height, 1)
 
-              for (let i = 0; i < placementRef.layoutSetup.current.row; i++) {
-                let tempY = startY - i * height
-                let tempHeightMargin = i === 0 ? 0 : i * intvVer
-                for (let j = 0; j < placementRef.layoutSetup.current.col; j++) {
-                  let tempX = startX + j * width
-                  let tempWidthMargin = j === 0 ? 0 : j * intvHor
+              console.log('checkedModule', checkedModule)
 
-                  let rectPoints = [
-                    { x: tempX + tempWidthMargin, y: tempY - height - tempHeightMargin },
-                    { x: tempX + tempWidthMargin, y: tempY - tempHeightMargin },
-                    { x: tempX + width + tempWidthMargin, y: tempY - tempHeightMargin },
-                    { x: tempX + width + tempWidthMargin, y: tempY - height - tempHeightMargin },
-                  ]
-                  // console.log('🚀 ~ addCanvasMouseEventListener ~ rectPoints:', rectPoints)
+              checkedModule.forEach((module, index) => {
+                moduleOptions.fill = module.color
+                const moduleWidth = Number(module.longAxis) / 10
+                const moduleHeight = Number(module.shortAxis) / 10
 
-                  tempModule.set({ points: rectPoints })
-                  const tempTurfModule = polygonToTurfPolygon(tempModule)
-                  tempModule.setCoords() //좌표 재정렬
+                let tmpWidth = flowDirection === 'south' || flowDirection === 'north' ? moduleWidth : moduleHeight
+                let tmpHeight = flowDirection === 'south' || flowDirection === 'north' ? moduleHeight : moduleWidth
 
-                  if (turf.booleanContains(turfPolygon, tempTurfModule) || turf.booleanWithin(tempTurfModule, turfPolygon)) {
-                    //마우스 클릭시 set으로 해당 위치에 셀을 넣음
-                    const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인
-                    if (!isOverlap) {
+                width =
+                  canvasSetting.roofSizeSet == '1'
+                    ? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(moduleSetupSurfaces[i].roofMaterial.pitch), flowDirection)
+                        .width
+                    : tmpWidth
+                height =
+                  canvasSetting.roofSizeSet == '1'
+                    ? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(moduleSetupSurfaces[i].roofMaterial.pitch), flowDirection)
+                        .height
+                    : tmpHeight
+
+                const col = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].col
+                const row = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].row
+                for (let i = 0; i < row; i++) {
+                  let tempY = startY - i * height
+
+                  if (index > 0) {
+                    //두번째 모듈일때 마지막 설치 지점
+                    tempY = index > 0 && i === 0 ? installedLastHeightCoord - intvVer : installedLastHeightCoord
+                  }
+
+                  let tempHeightMargin = i === 0 ? 0 : i * intvVer
+
+                  for (let j = 0; j < col; j++) {
+                    let tempX = startX + j * width
+                    let tempWidthMargin = j === 0 ? 0 : j * intvHor
+
+                    let rectPoints = [
+                      { x: tempX + tempWidthMargin, y: tempY - height - tempHeightMargin },
+                      { x: tempX + tempWidthMargin, y: tempY - tempHeightMargin },
+                      { x: tempX + width + tempWidthMargin, y: tempY - tempHeightMargin },
+                      { x: tempX + width + tempWidthMargin, y: tempY - height - tempHeightMargin },
+                    ]
+                    // console.log('🚀 ~ addCanvasMouseEventListener ~ rectPoints:', rectPoints)
+
+                    tempModule.set({ points: rectPoints })
+                    const tempTurfModule = polygonToTurfPolygon(tempModule)
+                    tempModule.setCoords() //좌표 재정렬
+
+                    if (turf.booleanContains(turfPolygon, tempTurfModule) || turf.booleanWithin(tempTurfModule, turfPolygon)) {
+                      //마우스 클릭시 set으로 해당 위치에 셀을 넣음
+                      const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인
+                      // if (!isOverlap) {
                       canvas?.remove(tempModule)
 
                       //안겹치면 넣는다
@@ -1191,7 +1224,7 @@ export function useModuleBasicSetting(tabNum) {
 
                       let manualModule = new QPolygon(tempModule.points, {
                         ...moduleOptions,
-                        moduleInfo: checkedModule[0],
+                        moduleInfo: module,
                         // left: toFixedWithoutRounding(tempX + tempWidthMargin, 1),
                         // top: toFixedWithoutRounding(tempY - height - tempHeightMargin, 1),
                         width: toFixedWithoutRounding(width, 1),
@@ -1205,15 +1238,24 @@ export function useModuleBasicSetting(tabNum) {
                         canvas?.add(manualModule)
                         manualDrawModules.push(manualModule)
                         setModuleStatisticsData()
+                        installedLastHeightCoord = tempY - height - tempHeightMargin
+                      } else {
+                        manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
+                        canvas?.add(manualModule)
+                        canvas.renderAll()
                       }
                       // getModuleStatistics()
-                    } else {
-                      swalFire({ text: getMessage('module.place.overlab') })
-                      return
+                      // } else {
+                      // swalFire({ text: getMessage('module.place.overlab') })
+                      // return
+                      // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
+                      // canvas?.add(tempModule)
+                      // canvas.renderAll()
+                      // }
                     }
                   }
                 }
-              }
+              })
             } else if (flowDirection === 'north') {
               startX = tempModule.points[3].x
               startY = tempModule.points[3].y