diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx
index 51620935..0d1c36a8 100644
--- a/src/components/floor-plan/modal/basic/BasicSetting.jsx
+++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx
@@ -12,7 +12,7 @@ import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientatio
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import { useEvent } from '@/hooks/useEvent'
 import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
-import { addedRoofsState } from '@/store/settingAtom'
+import { addedRoofsState, corridorDimensionSelector } from '@/store/settingAtom'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import Swal from 'sweetalert2'
 import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
@@ -40,31 +40,40 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     if (tabNum === 1) {
       orientationRef.current.handleNextStep()
     } else if (tabNum === 2) {
-      if (!isObjectNotEmpty(moduleSelectionData.module)) {
-        Swal.fire({
-          title: getMessage('module.not.found'),
-          icon: 'warning',
-        })
-        return
-      }
+      if (canvasSetting.roofSizeSet !== '3') {
+        if (!isObjectNotEmpty(moduleSelectionData.module)) {
+          Swal.fire({
+            title: getMessage('module.not.found'),
+            icon: 'warning',
+          })
+          return
+        }
 
-      if (addedRoofs.length !== moduleSelectionData.roofConstructions.length) {
-        Swal.fire({
-          title: getMessage('construction.length.difference'),
-          icon: 'warning',
+        if (addedRoofs.length !== moduleSelectionData.roofConstructions.length) {
+          Swal.fire({
+            title: getMessage('construction.length.difference'),
+            icon: 'warning',
+          })
+          return
+        }
+        //물건정보 갱신일 수정
+        updateObjectDataApi({
+          objectNo: currentCanvasPlan.objectNo, //오브젝트_no
+          standardWindSpeedId: moduleSelectionData.common.stdWindSpeed, //기준풍속코드
+          verticalSnowCover: moduleSelectionData.common.stdSnowLd, //적설량
+          surfaceType: moduleSelectionData.common.illuminationTpNm, //면조도구분
+          installHeight: moduleSelectionData.common.instHt, //설치높이
+          userId: loginUserState.userId, //작성자아아디
         })
-        return
+      } else {
+        if (!isObjectNotEmpty(moduleSelectionData.flatModule)) {
+          Swal.fire({
+            title: getMessage('module.not.found'),
+            icon: 'warning',
+          })
+          return
+        }
       }
-
-      //물건정보 갱신일 수정
-      updateObjectDataApi({
-        objectNo: currentCanvasPlan.objectNo, //오브젝트_no
-        standardWindSpeedId: moduleSelectionData.common.stdWindSpeed, //기준풍속코드
-        verticalSnowCover: moduleSelectionData.common.stdSnowLd, //적설량
-        surfaceType: moduleSelectionData.common.illuminationTpNm, //면조도구분
-        installHeight: moduleSelectionData.common.instHt, //설치높이
-        userId: loginUserState.userId, //작성자아아디
-      })
     }
 
     setTabNum(tabNum + 1)
@@ -88,6 +97,14 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     const res = await updateObjectDate(params)
   }
 
+  useEffect(() => {
+    if (canvasSetting.roofSizeSet !== '3') {
+      manualModuleSetup(placementRef)
+    } else {
+      manualFlatroofModuleSetup(placementFlatRef)
+    }
+  }, [isManualModuleSetup])
+
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lx-2`}>
@@ -107,12 +124,12 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
           </div>
           {tabNum === 1 && <Orientation ref={orientationRef} tabNum={tabNum} setTabNum={setTabNum} />}
           {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
-          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 2 && <Module setTabNum={setTabNum} />}
-          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
+          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != '3' && tabNum === 2 && <Module setTabNum={setTabNum} />}
+          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != '3' && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
 
           {/*배치면 초기설정 - 입력방법: 육지붕*/}
-          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
-          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 3 && (
+          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == '3' && tabNum === 2 && <PitchModule setTabNum={setTabNum} />}
+          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == '3' && tabNum === 3 && (
             <PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
           )}
 
@@ -141,9 +158,10 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
                     </button>
                   </>
                 )}
-                {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet === 3 && (
+                {console.log('canvasSetting.roofSizeSet', canvasSetting.roofSizeSet)}
+                {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && (
                   <>
-                    <button className="btn-frame modal mr5" onClick={() => manualFlatroofModuleSetup(placementFlatRef)}>
+                    <button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
                       {getMessage('modal.module.basic.setting.passivity.placement')}
                     </button>
                     <button className="btn-frame modal act" onClick={() => autoFlatroofModuleSetup(placementFlatRef)}>
diff --git a/src/components/floor-plan/modal/basic/step/Placement.jsx b/src/components/floor-plan/modal/basic/step/Placement.jsx
index a11ae0f8..852800d5 100644
--- a/src/components/floor-plan/modal/basic/step/Placement.jsx
+++ b/src/components/floor-plan/modal/basic/step/Placement.jsx
@@ -74,6 +74,7 @@ const Placement = forwardRef((props, refs) => {
     setSelectedItems({ ...selectedItems, [e.target.name]: e.target.checked })
   }
 
+  //최초 지입시 체크
   useEffect(() => {
     if (moduleSelectionData && moduleSelectionData.module.itemList.length > 0) {
       let initCheckedModule = {}
@@ -114,29 +115,27 @@ const Placement = forwardRef((props, refs) => {
                 <tbody>
                   {selectedModules.itemList &&
                     selectedModules.itemList.map((item, index) => (
-                      <>
-                        <tr key={index}>
-                          <td className="al-c">
-                            <div className="d-check-box no-text pop">
-                              <input
-                                type="checkbox"
-                                id={item.itemId}
-                                name={item.itemId}
-                                checked={selectedItems[item.itemId]}
-                                onChange={handleSelectedItem}
-                              />
-                              <label htmlFor={item.itemId}></label>
-                            </div>
-                          </td>
-                          <td>
-                            <div className="color-wrap">
-                              <span className="color-box" style={{ backgroundColor: item.color }}></span>
-                              <span className="name">{item.itemNm}</span>
-                            </div>
-                          </td>
-                          <td className="al-r">{item.wpOut}</td>
-                        </tr>
-                      </>
+                      <tr key={index}>
+                        <td className="al-c">
+                          <div className="d-check-box no-text pop">
+                            <input
+                              type="checkbox"
+                              id={item.itemId}
+                              name={item.itemId}
+                              checked={selectedItems[item.itemId]}
+                              onChange={handleSelectedItem}
+                            />
+                            <label htmlFor={item.itemId}></label>
+                          </div>
+                        </td>
+                        <td>
+                          <div className="color-wrap">
+                            <span className="color-box" style={{ backgroundColor: item.color }}></span>
+                            <span className="name">{item.itemNm}</span>
+                          </div>
+                        </td>
+                        <td className="al-r">{item.wpOut}</td>
+                      </tr>
                     ))}
                 </tbody>
               </table>
diff --git a/src/components/floor-plan/modal/basic/step/pitch/PitchModule.jsx b/src/components/floor-plan/modal/basic/step/pitch/PitchModule.jsx
index 255833a8..39d0ee19 100644
--- a/src/components/floor-plan/modal/basic/step/pitch/PitchModule.jsx
+++ b/src/components/floor-plan/modal/basic/step/pitch/PitchModule.jsx
@@ -1,12 +1,22 @@
+import { useState, useEffect } from 'react'
+import { useRecoilState } from 'recoil'
 import { useMessage } from '@/hooks/useMessage'
 import QSelectBox from '@/components/common/select/QSelectBox'
+import { useMasterController } from '@/hooks/common/useMasterController'
+import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController'
+import { isObjectNotEmpty } from '@/util/common-utils'
 
 export default function PitchModule({}) {
   const { getMessage } = useMessage()
-  const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
+  const { getModuleTypeItemList } = useMasterController()
+  const [moduleList, setModuleList] = useState([])
+  const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
+  const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
+
   const moduleData = {
     header: [
-      { name: getMessage('module'), width: 150, prop: 'module', type: 'color-box' },
+      { name: getMessage('module'), width: 250, prop: 'module', type: 'color-box' },
       {
         name: `${getMessage('높이')}  (mm)`,
         prop: 'height',
@@ -14,24 +24,45 @@ export default function PitchModule({}) {
       { name: `${getMessage('width')} (mm)`, prop: 'width' },
       { name: `${getMessage('output')} (W)`, prop: 'output' },
     ],
-    rows: [
-      {
-        module: { name: 'Re.RISE-G3 440', color: '#AA6768' },
-        height: { name: '1134' },
-        width: { name: '1722' },
-        output: { name: '440' },
-      },
-      {
-        module: {
-          name: 'Re.RISE MS-G3 290',
-          color: '#67A2AA',
-        },
-        height: { name: '1134' },
-        width: { name: '1722' },
-        output: { name: '240' },
-      },
-    ],
   }
+
+  const getModuleData = async (roofsIds) => {
+    const list = await getModuleTypeItemList(roofsIds)
+    if (list.data.length > 0) {
+      //selectbox에 이름을 넣는다
+      list.data.forEach((item) => {
+        item.name = item.itemNm
+      })
+      //셀렉트박스 데이터 초기화
+      setModuleList(list.data)
+    }
+  }
+
+  useEffect(() => {
+    getModuleData(['FLAT_ROOF'])
+  }, [])
+
+  const handleChangeModule = (option) => {
+    //선택된 모듈
+    setSelectedModules(option) //선택값 저장
+    setModuleSelectionData({
+      ...moduleSelectionData,
+      flatModule: option,
+    })
+    moduleSelectedDataTrigger({
+      ...moduleSelectionData,
+      flatModule: option,
+    })
+  }
+
+  useEffect(() => {
+    if (isObjectNotEmpty(moduleSelectionData.flatModule) && moduleList.length > 0) {
+      handleChangeModule(moduleSelectionData.flatModule)
+    }
+  }, [moduleList])
+
+  const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
+
   return (
     <>
       <div className="module-table-box">
@@ -39,7 +70,17 @@ export default function PitchModule({}) {
           <div className="outline-form mb10">
             <span className="mr10">{getMessage('modal.module.basic.setting.module.setting')}</span>
             <div className="grid-select">
-              <QSelectBox title={'Search'} option={SelectOption01} />
+              {moduleList && (
+                <QSelectBox
+                  title={getMessage('selectbox.title')}
+                  options={moduleList}
+                  value={selectedModules}
+                  targetKey={'itemId'}
+                  sourceKey={'itemId'}
+                  showKey={'itemNm'}
+                  onChange={handleChangeModule}
+                />
+              )}
             </div>
           </div>
           <div className="roof-module-table">
@@ -54,33 +95,21 @@ export default function PitchModule({}) {
                 </tr>
               </thead>
               <tbody>
-                {moduleData.rows.map((row) => (
-                  <>
-                    <tr>
-                      {moduleData.header.map((header) => (
-                        <>
-                          {header.type === 'color-box' && (
-                            <td>
-                              <div className="color-wrap">
-                                <span className="color-box" style={{ backgroundColor: row[header.prop].color }}></span>
-                                <span className="name">{row[header.prop].name}</span>
-                              </div>
-                            </td>
-                          )}
-                          {!header.type && header.type !== 'color-box' && <td className="al-r">{row[header.prop].name}</td>}
-                        </>
-                      ))}
+                {selectedModules &&
+                  selectedModules.itemList &&
+                  selectedModules.itemList.map((row, index) => (
+                    <tr key={index}>
+                      <td>
+                        <div className="color-wrap">
+                          <span className="color-box" style={{ backgroundColor: row.color }}></span>
+                          <span className="name">{row.itemNm}</span>
+                        </div>
+                      </td>
+                      <td>{Number(row.shortAxis).toFixed(0)}</td>
+                      <td>{Number(row.longAxis).toFixed(0)}</td>
+                      <td>{Number(row.wpOut).toFixed(0)}</td>
                     </tr>
-                  </>
-                ))}
-                {Array.from({ length: 3 - moduleData.rows.length }).map((_, i) => (
-                  <tr key={i}>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                  </tr>
-                ))}
+                  ))}
               </tbody>
             </table>
           </div>
diff --git a/src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx b/src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx
index a292ed2d..660d3717 100644
--- a/src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx
+++ b/src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx
@@ -1,49 +1,48 @@
 import { forwardRef, useState, useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
-import { canvasState } from '@/store/canvasAtom'
-import { useRecoilValue } from 'recoil'
+import { canvasState, checkedModuleState } from '@/store/canvasAtom'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { POLYGON_TYPE } from '@/common/common'
 import { useEvent } from '@/hooks/useEvent'
+import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 
 const PitchPlacement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
   const [setupLocation, setSetupLocation] = useState('south')
-  const { makeModuleInstArea } = useModuleBasicSetting()
   const canvas = useRecoilValue(canvasState)
   const { initEvent } = useEvent()
 
-  useEffect(() => {
-    makeModuleInstArea()
-  }, [])
+  const { selectedModules } = useModuleBasicSetting(3)
+  const setCheckedModules = useSetRecoilState(checkedModuleState)
+  const moduleSelectionData = useRecoilValue(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
+  const [selectedItems, setSelectedItems] = useState({})
 
   useEffect(() => {
     handleChangeSetupLocation()
   }, [setupLocation])
 
+  const handleSelectedItem = (e) => {
+    setSelectedItems({ ...selectedItems, [e.target.name]: e.target.checked })
+  }
+
   const moduleData = {
     header: [
       { type: 'check', name: '', prop: 'check', width: 70 },
       { type: 'color-box', name: getMessage('module'), prop: 'module' },
       { type: 'text', name: `${getMessage('output')} (W)`, prop: 'output', width: 70 },
     ],
-    rows: [
-      {
-        check: false,
-        module: { name: 'Re.RISE-G3 440', color: '#AA6768' },
-        output: { name: '440' },
-      },
-      {
-        check: false,
-        module: {
-          name: 'Re.RISE MS-G3 290',
-          color: '#67A2AA',
-        },
-        output: { name: '240' },
-      },
-    ],
   }
 
+  //체크된 모듈 데이터
+  useEffect(() => {
+    const checkedModuleIds = Object.keys(selectedItems).filter((key) => selectedItems[key])
+    const moduleArray = selectedModules.itemList.filter((item) => {
+      return checkedModuleIds.includes(item.itemId)
+    })
+    setCheckedModules(moduleArray)
+  }, [selectedItems])
+
   const handleSetupLocation = (e) => {
     initEvent()
     refs.setupLocation.current = e.target
@@ -81,6 +80,20 @@ const PitchPlacement = forwardRef((props, refs) => {
     }
   }
 
+  useEffect(() => {
+    if (moduleSelectionData && moduleSelectionData.flatModule.itemList.length > 0) {
+      let initCheckedModule = {}
+      moduleSelectionData.flatModule.itemList.forEach((obj, index) => {
+        if (index === 0) {
+          initCheckedModule = { [obj.itemId]: true }
+        } else {
+          initCheckedModule = { ...initCheckedModule, [obj.itemId]: true }
+        }
+      })
+      setSelectedItems(initCheckedModule)
+    }
+  }, [])
+
   return (
     <>
       <div className="module-table-box mb10">
@@ -104,33 +117,30 @@ const PitchPlacement = forwardRef((props, refs) => {
                 </tr>
               </thead>
               <tbody>
-                {moduleData.rows.map((row) => (
-                  <>
-                    <tr>
-                      {moduleData.header.map((header) => (
-                        <>
-                          {header.type === 'color-box' && (
-                            <td>
-                              <div className="color-wrap">
-                                <span className="color-box" style={{ backgroundColor: row[header.prop].color }}></span>
-                                <span className="name">{row[header.prop].name}</span>
-                              </div>
-                            </td>
-                          )}
-                          {header.type === 'check' && (
-                            <td className="al-c">
-                              <div className="d-check-box no-text pop">
-                                <input type="checkbox" id="ch02" />
-                                <label htmlFor="ch02"></label>
-                              </div>
-                            </td>
-                          )}
-                          {header.type && header.type !== 'color-box' && header.type !== 'check' && <td className="al-r">{row[header.prop].name}</td>}
-                        </>
-                      ))}
+                {selectedModules.itemList &&
+                  selectedModules.itemList.map((item, index) => (
+                    <tr key={index}>
+                      <td className="al-c">
+                        <div className="d-check-box no-text pop">
+                          <input
+                            type="checkbox"
+                            id={item.itemId}
+                            name={item.itemId}
+                            checked={selectedItems[item.itemId]}
+                            onChange={handleSelectedItem}
+                          />
+                          <label htmlFor={item.itemId}></label>
+                        </div>
+                      </td>
+                      <td>
+                        <div className="color-wrap">
+                          <span className="color-box" style={{ backgroundColor: item.color }}></span>
+                          <span className="name">{item.itemNm}</span>
+                        </div>
+                      </td>
+                      <td className="al-r">{item.wpOut}</td>
                     </tr>
-                  </>
-                ))}
+                  ))}
               </tbody>
             </table>
           </div>
@@ -150,8 +160,7 @@ const PitchPlacement = forwardRef((props, refs) => {
                     name="radio01"
                     id="ra01"
                     value={'south'}
-                    checked={setupLocation === 'south'}
-                    defaultChecked
+                    defaultChecked={setupLocation === 'south'}
                     onClick={handleSetupLocation}
                   />
                   <label htmlFor="ra01">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.south')}</label>
@@ -162,7 +171,7 @@ const PitchPlacement = forwardRef((props, refs) => {
                     name="radio01"
                     id="ra02"
                     value={'excreta'}
-                    checked={setupLocation === 'excreta'}
+                    defaultChecked={setupLocation === 'excreta'}
                     onClick={handleSetupLocation}
                   />
                   <label htmlFor="ra02">{getMessage('modal.module.basic.setting.pitch.module.placement.standard.setting.select')}</label>
diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js
index b6e0dad3..e8a07394 100644
--- a/src/hooks/module/useModuleBasicSetting.js
+++ b/src/hooks/module/useModuleBasicSetting.js
@@ -61,31 +61,42 @@ export function useModuleBasicSetting(tabNum) {
   //모듈 선택에서 선택된 값들 넘어옴
   useEffect(() => {
     if (moduleSelectionData && tabNum === 3) {
-      const common = moduleSelectionData.common
+      if (canvasSetting.roofSizeSet !== '3') {
+        const common = moduleSelectionData.common
 
-      const roofConstructions = moduleSelectionData.roofConstructions
+        const roofConstructions = moduleSelectionData.roofConstructions
 
-      const listParams = roofConstructions.map((item) => {
-        return {
-          ...common,
-          moduleTpCd: selectedModules.itemTp,
-          roofMatlCd: item.trestle.roofMatlCd,
-          trestleMkrCd: item.trestle.trestleMkrCd,
-          constMthdCd: item.trestle.constMthdCd,
-          roofBaseCd: item.trestle.roofBaseCd,
-          constTp: item.construction.constTp,
-          mixMatlNo: selectedModules.mixMatlNo,
-          roofPitch: item.addRoof.hajebichi ? item.addRoof.hajebichi : 0,
-          inclCd: String(item.addRoof.pitch),
-          roofIndex: item.addRoof.index,
-          workingWidth: item.addRoof.lenBase,
+        const listParams = roofConstructions.map((item) => {
+          return {
+            ...common,
+            moduleTpCd: selectedModules.itemTp,
+            roofMatlCd: item.trestle.roofMatlCd,
+            trestleMkrCd: item.trestle.trestleMkrCd,
+            constMthdCd: item.trestle.constMthdCd,
+            roofBaseCd: item.trestle.roofBaseCd,
+            constTp: item.construction.constTp,
+            mixMatlNo: selectedModules.mixMatlNo,
+            roofPitch: item.addRoof.hajebichi ? item.addRoof.hajebichi : 0,
+            inclCd: String(item.addRoof.pitch),
+            roofIndex: item.addRoof.index,
+            workingWidth: item.addRoof.lenBase,
+          }
+        })
+        setTrestleDetailParams(listParams)
+
+        //북면 설치 가능 판매점
+        if (moduleSelectionData.common.saleStoreNorthFlg === '1') {
+          setSaleStoreNorthFlg(true)
         }
-      })
-      setTrestleDetailParams(listParams)
-
-      //북면 설치 가능 판매점
-      if (moduleSelectionData.common.saleStoreNorthFlg === '1') {
-        setSaleStoreNorthFlg(true)
+      } else {
+        //육지붕 일경우에는 바로 배치면 설치LL
+        const roofs = canvas.getObjects().filter((roof) => roof.name === 'roof')
+        canvas
+          .getObjects()
+          .filter((roof) => roof.name === 'roof')
+          .forEach((roof) => {
+            makeModuleInstArea(roof, null)
+          })
       }
     }
   }, [moduleSelectionData])
@@ -122,8 +133,6 @@ export function useModuleBasicSetting(tabNum) {
                 //배치면 설치 영역
                 makeModuleInstArea(roof, detail.data)
                 //surface에 상세 데이터 추가
-              } else {
-                swalFire({ text: getMessage('module.roof.not.exist'), icon: 'warning' })
               }
             }
           })
@@ -191,23 +200,23 @@ export function useModuleBasicSetting(tabNum) {
       return
     }
 
-    let offsetLength = canvasSetting.roofSizeSet === '3' ? -90 : (trestleDetail.eaveIntvl / 10) * -1
+    let offsetLength = canvasSetting.roofSizeSet === '3' ? -30 : (trestleDetail.eaveIntvl / 10) * -1
     setSurfaceShapePattern(roof, roofDisplay.column, true) //패턴 변경
     const offsetPoints = offsetPolygon(roof.points, offsetLength) //안쪽 offset
     //모듈설치영역?? 생성
 
     const surfaceId = uuidv4()
-
     let isNorth = false
 
-    //북면이 있지만
-    if (roof.directionText && roof.directionText.indexOf('北') > -1) {
-      //북쪽일때 해당 서북서, 동북동은 제외한다고 한다
-      if (!(roof.directionText.indexOf('西北西') > -1 || roof.directionText.indexOf('東北東') > -1)) {
-        isNorth = true
+    if (canvasSetting.roofSizeSet !== '3') {
+      //북면이 있지만
+      if (roof.directionText && roof.directionText.indexOf('北') > -1) {
+        //북쪽일때 해당 서북서, 동북동은 제외한다고 한다
+        if (!(roof.directionText.indexOf('西北西') > -1 || roof.directionText.indexOf('東北東') > -1)) {
+          isNorth = true
+        }
       }
     }
-
     //모듈설치면 생성
     let setupSurface = new QPolygon(offsetPoints, {
       stroke: 'red',
@@ -243,7 +252,7 @@ export function useModuleBasicSetting(tabNum) {
     //지붕면 선택 금지
     roof.set({
       selectable: false, //선택 금지
-      evented: false, //클릭 이벤트도 금지
+      // evented: false, //클릭 이벤트도 금지
     })
 
     canvas.renderAll()
@@ -325,15 +334,9 @@ export function useModuleBasicSetting(tabNum) {
   }
 
   useEffect(() => {
-    console.log('리코일 바뀌냐??')
-    console.log('isManualModuleSetup', isManualModuleSetup)
-    console.log('saleStoreNorthFlg', saleStoreNorthFlg)
-
     if (moduleSelectionData.common.saleStoreNorthFlg === '1') {
       setSaleStoreNorthFlg(true)
     }
-
-    manualModuleSetup()
   }, [isManualModuleSetup])
 
   /**
@@ -440,10 +443,6 @@ export function useModuleBasicSetting(tabNum) {
                 parentId: moduleSetupSurfaces[i].parentId,
               })
 
-              console.log('trestlePolygon', trestlePolygon)
-              console.log('saleStoreNorthFlg', saleStoreNorthFlg)
-              console.log('trestlePolygon.isNorth', trestlePolygon.isNorth)
-
               //북면이고 북면설치상점이 아니면 그냥 return
               if (trestlePolygon.isNorth && !saleStoreNorthFlg) {
                 return
@@ -797,51 +796,6 @@ export function useModuleBasicSetting(tabNum) {
       return turf.booleanContains(turfModuleSetupSurface, squarePolygon) || turf.booleanWithin(squarePolygon, turfModuleSetupSurface)
     }
 
-    /**
-     * 모듈의 너비와 높이를 계산하는 함수
-     * @param {object} maxLengthLine 최대 길이 라인
-     * @param {object} moduleSetupSurface 모듈 설치면
-     * @param {object} module 모듈
-     * @returns {object} 모듈의 너비와 높이
-     */
-    const getModuleWidthHeight = (maxLengthLine, moduleSetupSurface, module) => {
-      let tmpWidth =
-        (maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? Number(module.longAxis) : Number(module.shortAxis)) / 10
-      let tmpHeight =
-        (maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? Number(module.shortAxis) : Number(module.longAxis)) / 10
-
-      //배치면때는 방향쪽으로 패널이 넓게 누워져야함
-      if (moduleSetupSurface.flowDirection !== undefined) {
-        tmpWidth =
-          (moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north'
-            ? Number(module.longAxis)
-            : Number(module.shortAxis)) / 10
-        tmpHeight =
-          (moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north'
-            ? Number(module.shortAxis)
-            : Number(module.longAxis)) / 10
-      }
-
-      console.log(canvasSetting)
-
-      return canvasSetting.roofSizeSet === '1'
-        ? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(moduleSetupSurface.roofMaterial.pitch), moduleSetupSurface.flowDirection)
-        : { width: tmpWidth, height: tmpHeight }
-    }
-
-    const getFlowLines = (moduleSetupSurface, module) => {
-      let flowLines = {}
-      if (canvasSetting.roofSizeSet !== '3') {
-        flowLines = {
-          bottom: bottomTopFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'bottom'),
-          top: bottomTopFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'top'),
-          left: leftRightFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'left'),
-          right: leftRightFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'right'),
-        }
-      }
-      return flowLines
-    }
-
     const downFlowSetupModule = (
       surfaceMaxLines,
       maxLengthLine,
@@ -859,7 +813,7 @@ export function useModuleBasicSetting(tabNum) {
 
         const flowLines = getFlowLines(moduleSetupSurface, module)
         //육지붕이 아닐때만 넣는다 육지붕일땐 클릭 이벤트에 별도로 넣어놓음
-        let startPoint = flowLines.bottom
+        let startPoint = flowLines.left
         const moduleArray = []
 
         if (isCenter) {
@@ -947,6 +901,7 @@ export function useModuleBasicSetting(tabNum) {
               }
             } else {
               tempModule.set({ fill: 'rgba(255,190,41, 0.4)', stroke: 'black', strokeWidth: 1 })
+              canvas?.add(tempModule)
             }
           }
         }
@@ -1464,13 +1419,13 @@ export function useModuleBasicSetting(tabNum) {
       const pointX2 = coords[2].x + ((coords[2].y - top) / (coords[2].y - coords[1].y)) * (coords[1].x - coords[2].x)
       const pointY2 = top
 
-      // const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
-      //   stroke: 'red',
-      //   strokeWidth: 1,
-      //   selectable: true,
-      // })
-      // canvas?.add(finalLine)
-      // canvas?.renderAll()
+      const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
+        stroke: 'red',
+        strokeWidth: 1,
+        selectable: true,
+      })
+      canvas?.add(finalLine)
+      canvas?.renderAll()
 
       let rtnObj
       //평평하면
@@ -1587,13 +1542,13 @@ export function useModuleBasicSetting(tabNum) {
       const pointX2 = top
       const pointY2 = coords[2].y + ((coords[2].x - top) / (coords[2].x - coords[1].x)) * (coords[1].y - coords[2].y)
 
-      // const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
-      //   stroke: 'red',
-      //   strokeWidth: 1,
-      //   selectable: true,
-      // })
-      // canvas?.add(finalLine)
-      // canvas?.renderAll()
+      const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
+        stroke: 'red',
+        strokeWidth: 1,
+        selectable: true,
+      })
+      canvas?.add(finalLine)
+      canvas?.renderAll()
 
       let rtnObj
       //평평하면
@@ -1685,322 +1640,361 @@ export function useModuleBasicSetting(tabNum) {
 
   const manualFlatroofModuleSetup = (placementFlatRef) => {
     let moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
-    let flatBatchType = placementFlatRef.setupLocation.current.value
-
-    const batchObjects = canvas
-      ?.getObjects()
-      .filter(
-        (obj) =>
-          obj.name === BATCH_TYPE.OPENING ||
-          obj.name === BATCH_TYPE.TRIANGLE_DORMER ||
-          obj.name === BATCH_TYPE.PENTAGON_DORMER ||
-          obj.name === BATCH_TYPE.SHADOW,
-      ) //도머s 객체
-
-    const moduleOptions = {
-      fill: '#BFFD9F',
-      stroke: 'black',
-      strokeWidth: 0.1,
-      selectable: true, // 선택 가능하게 설정
-      lockMovementX: true, // X 축 이동 잠금
-      lockMovementY: true, // Y 축 이동 잠금
-      lockRotation: true, // 회전 잠금
-      lockScalingX: true, // X 축 크기 조정 잠금
-      lockScalingY: true, // Y 축 크기 조정 잠금
-      parentId: moduleSetupSurface.parentId,
-      surfaceId: moduleSetupSurface.id,
-      name: POLYGON_TYPE.MODULE,
-    }
-
-    if (moduleSetupSurfaces.length !== 0) {
-      let tempModule
-      let manualDrawModules = []
-      let inside = false
-      let turfPolygon
-      let flowDirection
-      let trestlePolygon
-
-      //남쪽 선택
-      if (flatBatchType === 'excreta') {
-        //변별로 선택
-        const excretaLines = canvas.getObjects().filter((obj) => obj.name === 'flatExcretaLine')
-        excretaLines.forEach((obj) => {
-          if (obj.isSelected === true) {
-            const points1 = { x: obj.x1, y: obj.y1 }
-            const points2 = { x: obj.x2, y: obj.y2 }
-            const angle = calculateAngle(points1, points2)
-
-            //변별로 선택으로 되어있을때 모듈면을 회전시키기
-            const targetdSurface = moduleSetupSurfaces.filter((surface) => surface.surfaceId === obj.surfaceId)[0]
-            targetdSurface.angle = -angle
-            //변별로 선택되어있는 지붕도 회전시키기
-            const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === targetdSurface.parentId)[0]
-            targetRoof.angle = -angle
-
-            targetRoof.fire('modified')
-            targetdSurface.fire('modified')
-          }
-          canvas.remove(obj)
-        })
-      } else {
-        moduleSetupSurfaces.forEach((surface) => {
-          const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === surface.parentId)[0]
-          if (targetRoof) targetRoof.angle = -compasDeg
-          surface.angle = -compasDeg
-        })
+    if (isManualModuleSetup) {
+      if (checkedModule.length === 0) {
+        swalFire({ text: getMessage('module.place.select.module') })
+        setIsManualModuleSetup(!isManualModuleSetup)
+        return
       }
-      canvas.renderAll()
 
-      addCanvasMouseEventListener('mouse:move', (e) => {
-        //마우스 이벤트 삭제 후 재추가
-        const mousePoint = canvas.getPointer(e.e)
+      if (checkedModule.length > 1) {
+        swalFire({ text: getMessage('module.place.select.one.module') })
+        setIsManualModuleSetup(!isManualModuleSetup)
+        return
+      }
 
-        for (let i = 0; i < moduleSetupSurfaces.length; i++) {
-          turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i], true)
-          trestlePolygon = moduleSetupSurfaces[i]
-          manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨
-          flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향
-          let width = flowDirection === 'south' || flowDirection === 'north' ? 172 : 113
-          let height = flowDirection === 'south' || flowDirection === 'north' ? 113 : 172
+      let flatBatchType = placementFlatRef.setupLocation.current.value
 
-          const points = [
-            { x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
-            { x: mousePoint.x + width / 2, y: mousePoint.y - height / 2 },
-            { x: mousePoint.x + width / 2, y: mousePoint.y + height / 2 },
-            { x: mousePoint.x - width / 2, y: mousePoint.y + height / 2 },
-          ]
+      const batchObjects = canvas
+        ?.getObjects()
+        .filter(
+          (obj) =>
+            obj.name === BATCH_TYPE.OPENING ||
+            obj.name === BATCH_TYPE.TRIANGLE_DORMER ||
+            obj.name === BATCH_TYPE.PENTAGON_DORMER ||
+            obj.name === BATCH_TYPE.SHADOW,
+        ) //도머s 객체
 
-          const turfPoints = coordToTurfPolygon(points)
+      let moduleOptions = {
+        fill: '#BFFD9F',
+        stroke: 'black',
+        strokeWidth: 0.1,
+        selectable: true, // 선택 가능하게 설정
+        lockMovementX: true, // X 축 이동 잠금
+        lockMovementY: true, // Y 축 이동 잠금
+        lockRotation: true, // 회전 잠금
+        lockScalingX: true, // X 축 크기 조정 잠금
+        lockScalingY: true, // Y 축 크기 조정 잠금
+        parentId: moduleSetupSurface.parentId,
+        surfaceId: moduleSetupSurface.id,
+        name: POLYGON_TYPE.MODULE,
+      }
 
-          if (turf.booleanWithin(turfPoints, turfPolygon)) {
-            let isDrawing = false
+      if (moduleSetupSurfaces.length !== 0) {
+        let tempModule
+        let manualDrawModules = []
+        let inside = false
+        let turfPolygon
+        let flowDirection
+        let trestlePolygon
 
-            if (isDrawing) return
-            canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) //움직일때 일단 지워가면서 움직임
+        //남쪽 선택
+        if (flatBatchType === 'excreta') {
+          //변별로 선택
+          const excretaLines = canvas.getObjects().filter((obj) => obj.name === 'flatExcretaLine')
+          excretaLines.forEach((obj) => {
+            if (obj.isSelected === true) {
+              const points1 = { x: obj.x1, y: obj.y1 }
+              const points2 = { x: obj.x2, y: obj.y2 }
+              const angle = calculateAngle(points1, points2)
 
-            tempModule = new fabric.Rect({
-              fill: 'white',
-              stroke: 'black',
-              strokeWidth: 0.3,
-              width: width,
-              height: height,
-              left: mousePoint.x - width / 2,
-              top: mousePoint.y - height / 2,
-              selectable: false,
-              lockMovementX: true,
-              lockMovementY: true,
-              lockRotation: true,
-              lockScalingX: true,
-              lockScalingY: true,
-              name: 'tempModule',
-              parentId: moduleSetupSurfaces[i].parentId,
-            })
+              //변별로 선택으로 되어있을때 모듈면을 회전시키기
+              const targetdSurface = moduleSetupSurfaces.filter((surface) => surface.surfaceId === obj.surfaceId)[0]
+              targetdSurface.angle = -angle
+              //변별로 선택되어있는 지붕도 회전시키기
+              const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === targetdSurface.parentId)[0]
+              targetRoof.angle = -angle
 
-            canvas?.add(tempModule) //움직여가면서 추가됨
+              targetRoof.fire('modified')
+              targetdSurface.fire('modified')
+            }
+            canvas.remove(obj)
+          })
+        } else {
+          moduleSetupSurfaces.forEach((surface) => {
+            const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === surface.parentId)[0]
+            if (targetRoof) targetRoof.angle = -compasDeg
+            surface.angle = -compasDeg
+          })
+        }
+        canvas.renderAll()
 
-            /**
-             * 스냅기능
-             */
-            let snapDistance = 10
-            let cellSnapDistance = 20
+        addCanvasMouseEventListener('mouse:move', (e) => {
+          //마우스 이벤트 삭제 후 재추가
+          const mousePoint = canvas.getPointer(e.e)
 
-            const trestleLeft = moduleSetupSurfaces[i].left
-            const trestleTop = moduleSetupSurfaces[i].top
-            const trestleRight = trestleLeft + moduleSetupSurfaces[i].width * moduleSetupSurfaces[i].scaleX
-            const trestleBottom = trestleTop + moduleSetupSurfaces[i].height * moduleSetupSurfaces[i].scaleY
-            const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2
+          for (let i = 0; i < moduleSetupSurfaces.length; i++) {
+            turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i], true)
+            trestlePolygon = moduleSetupSurfaces[i]
+            manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨
+            flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향
 
-            // 작은 폴리곤의 경계 좌표 계산
-            const smallLeft = tempModule.left
-            const smallTop = tempModule.top
-            const smallRight = smallLeft + tempModule.width * tempModule.scaleX
-            const smallBottom = smallTop + tempModule.height * tempModule.scaleY
-            const smallCenterX = smallLeft + (tempModule.width * tempModule.scaleX) / 2
-            const smallCenterY = smallTop + (tempModule.height * tempModule.scaleX) / 2
+            const moduleWidth = Number(checkedModule[0].longAxis) / 10
+            const moduleHeight = Number(checkedModule[0].shortAxis) / 10
 
-            /**
-             * 미리 깔아놓은 셀이 있을때 셀에 흡착됨
-             */
-            if (manualDrawModules) {
-              manualDrawModules.forEach((cell) => {
-                const holdCellLeft = cell.left
-                const holdCellTop = cell.top
-                const holdCellRight = holdCellLeft + cell.width * cell.scaleX
-                const holdCellBottom = holdCellTop + cell.height * cell.scaleY
-                const holdCellCenterX = holdCellLeft + (cell.width * cell.scaleX) / 2
-                const holdCellCenterY = holdCellTop + (cell.height * cell.scaleY) / 2
+            let tmpWidth = flowDirection === 'south' || flowDirection === 'north' ? moduleWidth : moduleHeight
+            let tmpHeight = flowDirection === 'south' || flowDirection === 'north' ? moduleHeight : moduleWidth
 
-                //설치된 셀에 좌측에 스냅
-                if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
-                  tempModule.left = holdCellLeft - width - 1
+            let { width, height } =
+              canvasSetting.roofSizeSet === '1'
+                ? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(moduleSetupSurfaces[i].roofMaterial.pitch), flowDirection)
+                : { width: tmpWidth, height: tmpHeight }
+
+            const points = [
+              { x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
+              { x: mousePoint.x + width / 2, y: mousePoint.y - height / 2 },
+              { x: mousePoint.x + width / 2, y: mousePoint.y + height / 2 },
+              { x: mousePoint.x - width / 2, y: mousePoint.y + height / 2 },
+            ]
+
+            const turfPoints = coordToTurfPolygon(points)
+
+            if (turf.booleanWithin(turfPoints, turfPolygon)) {
+              let isDrawing = false
+
+              if (isDrawing) return
+              canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) //움직일때 일단 지워가면서 움직임
+
+              tempModule = new fabric.Rect({
+                fill: 'white',
+                stroke: 'black',
+                strokeWidth: 0.3,
+                width: width,
+                height: height,
+                left: mousePoint.x - width / 2,
+                top: mousePoint.y - height / 2,
+                selectable: false,
+                lockMovementX: true,
+                lockMovementY: true,
+                lockRotation: true,
+                lockScalingX: true,
+                lockScalingY: true,
+                name: 'tempModule',
+                parentId: moduleSetupSurfaces[i].parentId,
+              })
+
+              canvas?.add(tempModule) //움직여가면서 추가됨
+
+              /**
+               * 스냅기능
+               */
+              let snapDistance = 10
+              let cellSnapDistance = 20
+
+              let intvHor = flowDirection === 'south' || flowDirection === 'north' ? 1 : 3
+              let intvVer = flowDirection === 'south' || flowDirection === 'north' ? 3 : 1
+
+              const trestleLeft = moduleSetupSurfaces[i].left
+              const trestleTop = moduleSetupSurfaces[i].top
+              const trestleRight = trestleLeft + moduleSetupSurfaces[i].width * moduleSetupSurfaces[i].scaleX
+              const trestleBottom = trestleTop + moduleSetupSurfaces[i].height * moduleSetupSurfaces[i].scaleY
+              const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2
+
+              // 작은 폴리곤의 경계 좌표 계산
+              const smallLeft = tempModule.left
+              const smallTop = tempModule.top
+              const smallRight = smallLeft + tempModule.width * tempModule.scaleX
+              const smallBottom = smallTop + tempModule.height * tempModule.scaleY
+              const smallCenterX = smallLeft + (tempModule.width * tempModule.scaleX) / 2
+              const smallCenterY = smallTop + (tempModule.height * tempModule.scaleX) / 2
+
+              /**
+               * 미리 깔아놓은 셀이 있을때 셀에 흡착됨
+               */
+              if (manualDrawModules) {
+                manualDrawModules.forEach((cell) => {
+                  const holdCellLeft = cell.left
+                  const holdCellTop = cell.top
+                  const holdCellRight = holdCellLeft + cell.width * cell.scaleX
+                  const holdCellBottom = holdCellTop + cell.height * cell.scaleY
+                  const holdCellCenterX = holdCellLeft + (cell.width * cell.scaleX) / 2
+                  const holdCellCenterY = holdCellTop + (cell.height * cell.scaleY) / 2
+
+                  //설치된 셀에 좌측에 스냅
+                  if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
+                    tempModule.left = holdCellLeft - width - 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(smallTop - holdCellBottom) < snapDistance) {
+                    tempModule.top = holdCellBottom + intvVer
+                  }
+                  //가운데 -> 가운데
+                  if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) {
+                    tempModule.left = holdCellCenterX - width / 2
+                  }
+                  //왼쪽 -> 가운데
+                  if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) {
+                    tempModule.left = holdCellCenterX
+                  }
+                  // 오른쪽 -> 가운데
+                  if (Math.abs(smallRight - holdCellCenterX) < cellSnapDistance) {
+                    tempModule.left = holdCellCenterX - width
+                  }
+                  //세로 가운데 -> 가운데
+                  if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) {
+                    tempModule.top = holdCellCenterY - height / 2
+                  }
+                  // //위쪽 -> 가운데
+                  // if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) {
+                  //   tempModule.top = holdCellCenterY
+                  // }
+                  // //아랫쪽 -> 가운데
+                  // if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) {
+                  //   tempModule.top = holdCellCenterY - height
+                  // }
+                })
+              }
+
+              // 위쪽 변에 스냅
+              if (Math.abs(smallTop - trestleTop) < snapDistance) {
+                tempModule.top = trestleTop
+              }
+
+              // 아래쪽 변에 스냅
+              if (Math.abs(smallTop + tempModule.height * tempModule.scaleY - (trestleTop + moduleSetupSurfaces[i].height)) < snapDistance) {
+                tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height * tempModule.scaleY
+              }
+
+              // 왼쪽변에 스냅
+              if (Math.abs(smallLeft - trestleLeft) < snapDistance) {
+                tempModule.left = trestleLeft
+              }
+              //오른쪽 변에 스냅
+              if (Math.abs(smallRight - trestleRight) < snapDistance) {
+                tempModule.left = trestleRight - tempModule.width * tempModule.scaleX
+              }
+
+              if (flowDirection === 'south' || flowDirection === 'north') {
+                // 모듈왼쪽이 세로중앙선에 붙게 스냅
+                if (Math.abs(smallLeft - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
+                  tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2
                 }
 
-                //설치된 셀에 우측에 스냅
-                if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
-                  tempModule.left = holdCellRight + 1
+                // 모듈이 가운데가 세로중앙선에 붙게 스냅
+                if (Math.abs(smallCenterX - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
+                  tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - (tempModule.width * tempModule.scaleX) / 2
                 }
 
-                //설치된 셀에 위쪽에 스냅
-                if (Math.abs(smallBottom - holdCellTop) < snapDistance) {
-                  tempModule.top = holdCellTop - height - 1
+                // 모듈오른쪽이 세로중앙선에 붙게 스냅
+                if (Math.abs(smallRight - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
+                  tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width * tempModule.scaleX
+                }
+              } else {
+                // 모듈이 가로중앙선에 스냅
+                if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < snapDistance) {
+                  tempModule.top = bigCenterY - tempModule.height / 2
                 }
 
-                //설치된 셀에 밑쪽에 스냅
-                if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
-                  tempModule.top = holdCellBottom + 1
+                if (Math.abs(smallTop - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
+                  tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2
                 }
-                //가운데 -> 가운데
-                if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) {
-                  tempModule.left = holdCellCenterX - width / 2
+                // 모듈 밑면이 가로중앙선에 스냅
+                if (Math.abs(smallBottom - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
+                  tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - tempModule.height * tempModule.scaleY
                 }
-                //왼쪽 -> 가운데
-                if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) {
-                  tempModule.left = holdCellCenterX
+              }
+
+              tempModule.setCoords()
+              canvas?.renderAll()
+              inside = true
+              break
+            } else {
+              inside = false
+            }
+          }
+
+          if (!inside) {
+            // tempModule.set({ fill: 'red' })
+            canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule'))
+            canvas?.renderAll()
+          }
+        })
+
+        addCanvasMouseEventListener('mouse:up', (e) => {
+          let isIntersection = true
+          if (!inside) return
+          if (tempModule) {
+            const rectPoints = [
+              { x: tempModule.left, y: tempModule.top },
+              { x: tempModule.left + tempModule.width * tempModule.scaleX, y: tempModule.top },
+              {
+                x: tempModule.left + tempModule.width * tempModule.scaleX,
+                y: tempModule.top + tempModule.height * tempModule.scaleY,
+              },
+              { x: tempModule.left, y: tempModule.top + tempModule.height * tempModule.scaleY },
+            ]
+
+            tempModule.set({ points: rectPoints })
+            const tempTurfModule = polygonToTurfPolygon(tempModule)
+
+            //도머 객체를 가져옴
+            if (batchObjects) {
+              batchObjects.forEach((object) => {
+                let dormerTurfPolygon
+
+                if (object.type === 'group') {
+                  //도머는 그룹형태임
+                  dormerTurfPolygon = batchObjectGroupToTurfPolygon(object)
+                } else {
+                  //개구, 그림자
+                  dormerTurfPolygon = polygonToTurfPolygon(rectToPolygon(object))
                 }
-                // 오른쪽 -> 가운데
-                if (Math.abs(smallRight - holdCellCenterX) < cellSnapDistance) {
-                  tempModule.left = holdCellCenterX - width
+
+                const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule])) //겹치는지 확인
+                //겹치면 안됨
+                if (intersection) {
+                  swalFire({ text: getMessage('module.place.overobject') })
+                  isIntersection = false
                 }
-                //세로 가운데 -> 가운데
-                if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) {
-                  tempModule.top = holdCellCenterY - height / 2
-                }
-                // //위쪽 -> 가운데
-                // if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) {
-                //   tempModule.top = holdCellCenterY
-                // }
-                // //아랫쪽 -> 가운데
-                // if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) {
-                //   tempModule.top = holdCellCenterY - height
-                // }
               })
             }
 
-            // 위쪽 변에 스냅
-            if (Math.abs(smallTop - trestleTop) < snapDistance) {
-              tempModule.top = trestleTop
-            }
+            if (!isIntersection) return
 
-            // 아래쪽 변에 스냅
-            if (Math.abs(smallTop + tempModule.height * tempModule.scaleY - (trestleTop + moduleSetupSurfaces[i].height)) < snapDistance) {
-              tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height * tempModule.scaleY
-            }
-
-            // 왼쪽변에 스냅
-            if (Math.abs(smallLeft - trestleLeft) < snapDistance) {
-              tempModule.left = trestleLeft
-            }
-            //오른쪽 변에 스냅
-            if (Math.abs(smallRight - trestleRight) < snapDistance) {
-              tempModule.left = trestleRight - tempModule.width * tempModule.scaleX
-            }
-
-            if (flowDirection === 'south' || flowDirection === 'north') {
-              // 모듈왼쪽이 세로중앙선에 붙게 스냅
-              if (Math.abs(smallLeft - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
-                tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2
-              }
-
-              // 모듈이 가운데가 세로중앙선에 붙게 스냅
-              if (Math.abs(smallCenterX - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
-                tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - (tempModule.width * tempModule.scaleX) / 2
-              }
-
-              // 모듈오른쪽이 세로중앙선에 붙게 스냅
-              if (Math.abs(smallRight - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
-                tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width * tempModule.scaleX
-              }
-            } else {
-              // 모듈이 가로중앙선에 스냅
-              if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < snapDistance) {
-                tempModule.top = bigCenterY - tempModule.height / 2
-              }
-
-              if (Math.abs(smallTop - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
-                tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2
-              }
-              // 모듈 밑면이 가로중앙선에 스냅
-              if (Math.abs(smallBottom - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
-                tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - tempModule.height * tempModule.scaleY
-              }
-            }
-
-            tempModule.setCoords()
-            canvas?.renderAll()
-            inside = true
-            break
-          } else {
-            inside = false
-          }
-        }
-
-        if (!inside) {
-          // tempModule.set({ fill: 'red' })
-          canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule'))
-          canvas?.renderAll()
-        }
-      })
-
-      addCanvasMouseEventListener('mouse:up', (e) => {
-        let isIntersection = true
-        if (!inside) return
-        if (tempModule) {
-          const rectPoints = [
-            { x: tempModule.left, y: tempModule.top },
-            { x: tempModule.left + tempModule.width * tempModule.scaleX, y: tempModule.top },
-            {
-              x: tempModule.left + tempModule.width * tempModule.scaleX,
-              y: tempModule.top + tempModule.height * tempModule.scaleY,
-            },
-            { x: tempModule.left, y: tempModule.top + tempModule.height * tempModule.scaleY },
-          ]
-
-          tempModule.set({ points: rectPoints })
-          const tempTurfModule = polygonToTurfPolygon(tempModule)
-
-          //도머 객체를 가져옴
-          if (batchObjects) {
-            batchObjects.forEach((object) => {
-              let dormerTurfPolygon
-
-              if (object.type === 'group') {
-                //도머는 그룹형태임
-                dormerTurfPolygon = batchObjectGroupToTurfPolygon(object)
+            if (turf.booleanWithin(tempTurfModule, turfPolygon)) {
+              //마우스 클릭시 set으로 해당 위치에 셀을 넣음
+              const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인
+              if (!isOverlap) {
+                moduleOptions.surfaceId = trestlePolygon.id
+                let manualModule = new QPolygon(tempModule.points, { ...moduleOptions, moduleInfo: checkedModule[0] })
+                canvas?.add(manualModule)
+                manualDrawModules.push(tempModule)
               } else {
-                //개구, 그림자
-                dormerTurfPolygon = polygonToTurfPolygon(rectToPolygon(object))
+                swalFire({ text: getMessage('module.place.overlab') })
               }
-
-              const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule])) //겹치는지 확인
-              //겹치면 안됨
-              if (intersection) {
-                swalFire({ text: getMessage('module.place.overobject') })
-                isIntersection = false
-              }
-            })
-          }
-
-          if (!isIntersection) return
-
-          if (turf.booleanWithin(tempTurfModule, turfPolygon)) {
-            //마우스 클릭시 set으로 해당 위치에 셀을 넣음
-            const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인
-            if (!isOverlap) {
-              moduleOptions.surfaceId = trestlePolygon.id
-              let manualModule = new QPolygon(tempModule.points, { ...moduleOptions })
-              canvas?.add(manualModule)
-              manualDrawModules.push(tempModule)
             } else {
-              swalFire({ text: getMessage('module.place.overlab') })
+              swalFire({ text: getMessage('module.place.out') })
             }
-          } else {
-            swalFire({ text: getMessage('module.place.out') })
           }
-        }
-      })
-    }
+        })
+      }
+      getModuleStatistics()
+    } else {
+      if (moduleSetupSurfaces) {
+        //수동모드 해제시 모듈 설치면 선택 잠금
+        moduleSetupSurfaces.forEach((obj) => {
+          obj.set({
+            selectable: true,
+            evented: true,
+          })
+        })
+      }
 
-    getModuleStatistics()
+      removeMouseEvent('mouse:up')
+      removeMouseEvent('mouse:move')
+      canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) //움직일때 일단 지워가면서 움직임
+    }
   }
 
   const autoFlatroofModuleSetup = (placementFlatRef) => {
@@ -2096,17 +2090,17 @@ export function useModuleBasicSetting(tabNum) {
         targetLine.y2 = lines[index].y2
       })
 
-      const flowLines = {
-        bottom: bottomTopFlowLine(surface).find((obj) => obj.target === 'bottom'),
-        top: bottomTopFlowLine(surface).find((obj) => obj.target === 'top'),
-        left: leftRightFlowLine(surface).find((obj) => obj.target === 'left'),
-        right: leftRightFlowLine(surface).find((obj) => obj.target === 'right'),
-      }
+      // const flowLines = {
+      //   bottom: bottomTopFlowLine(surface).find((obj) => obj.target === 'bottom'),
+      //   top: bottomTopFlowLine(surface).find((obj) => obj.target === 'top'),
+      //   left: leftRightFlowLine(surface).find((obj) => obj.target === 'left'),
+      //   right: leftRightFlowLine(surface).find((obj) => obj.target === 'right'),
+      // }
 
-      surface.set({ flowLines: flowLines })
+      // surface.set({ flowLines: flowLines })
     })
 
-    const moduleOptions = {
+    let moduleOptions = {
       fill: '#BFFD9F',
       stroke: 'black',
       strokeWidth: 0.1,
@@ -2158,169 +2152,188 @@ export function useModuleBasicSetting(tabNum) {
 
     let moduleGroup = []
 
-    const flatRoofDownFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight) => {
-      let startPoint = moduleSetupSurface.flowLines.bottom
+    const flatRoofDownFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight) => {
+      checkedModule.forEach((module, index) => {
+        const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
 
-      const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측
-      const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측
-      const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단
+        const flowLines = getFlowLines(moduleSetupSurface, module)
 
-      let totalLeftEndPoint = maxLeftEndPoint - startPoint.x1
-      let totalTopEndPoint = maxTopEndPoint - startPoint.y1
-      let totalWidth = Math.ceil(Math.abs(maxRightEndPoint - maxLeftEndPoint) / width)
-      let diffLeftEndPoint = Math.abs(totalLeftEndPoint / width)
-      let diffTopEndPoint = Math.abs(totalTopEndPoint / height)
-      let startColPoint = Math.abs(width * Math.ceil(diffLeftEndPoint) - startPoint.x1)
-      let tempMaxWidth = width //최대배치인지 확인하려고 넣음
+        let startPoint = flowLines.bottom
+
+        const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측
+        const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측
+        const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단
+
+        let totalLeftEndPoint = maxLeftEndPoint - startPoint.x1
+        let totalTopEndPoint = maxTopEndPoint - startPoint.y1
+        let totalWidth = Math.ceil(Math.abs(maxRightEndPoint - maxLeftEndPoint) / width)
+        let diffLeftEndPoint = Math.abs(totalLeftEndPoint / width)
+        let diffTopEndPoint = Math.abs(totalTopEndPoint / height)
+        let startColPoint = Math.abs(width * Math.ceil(diffLeftEndPoint) - startPoint.x1)
+        let tempMaxWidth = width //최대배치인지 확인하려고 넣음
+
+        for (let j = 0; j < diffTopEndPoint; j++) {
+          bottomMargin = marginHeight * j
+          for (let i = 0; i <= totalWidth; i++) {
+            leftMargin = marginWidth * i
+
+            square = [
+              [startColPoint + tempMaxWidth * i + leftMargin, startPoint.y1 - height * j - bottomMargin],
+              [startColPoint + tempMaxWidth * i + width + leftMargin, startPoint.y1 - height * j - bottomMargin],
+              [startColPoint + tempMaxWidth * i + width + leftMargin, startPoint.y1 - height * j - height - bottomMargin],
+              [startColPoint + tempMaxWidth * i + leftMargin, startPoint.y1 - height * j - height - bottomMargin],
+              [startColPoint + tempMaxWidth * i + leftMargin, startPoint.y1 - height * j - bottomMargin],
+            ]
+
+            let squarePolygon = turf.polygon([square])
+            let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
+            let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
+
+            moduleOptions = { ...moduleOptions, fill: module.color, surfaceId: moduleSetupSurface.id, moduleInfo: module }
+            let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
+            canvas?.add(tempModule)
+            moduleSetupArray.push(tempModule)
+            moduleGroup.push(tempModule)
+          }
+        }
+      })
+    }
+
+    const flatRoofLeftFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight) => {
+      checkedModule.forEach((module, index) => {
+        const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
+        const flowLines = getFlowLines(moduleSetupSurface, module)
+        let startPoint = flowLines.left
+
+        const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측
+        const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단
+        const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단
+
+        let totalTopEndPoint = Math.abs(maxTopEndPoint - startPoint.y1) //전체 높이에서 현재 높이를 뺌
+        let diffTopEndPoint = Math.abs(totalTopEndPoint / height)
+        let totalHeight = Math.ceil(Math.abs(maxBottomEndPoint - maxTopEndPoint) / height)
+        let totalWidth = Math.abs(startPoint.x1 - maxRightEndPoint) / width
+        let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint)
+        let tempMaxHeight = height //최대배치인지 확인하려고 넣음
 
-      for (let j = 0; j < diffTopEndPoint; j++) {
-        bottomMargin = marginHeight * j
         for (let i = 0; i <= totalWidth; i++) {
-          leftMargin = marginWidth * i
+          bottomMargin = marginHeight * i
+          for (let j = 0; j < totalHeight; j++) {
+            leftMargin = marginWidth * j
 
-          square = [
-            [startColPoint + tempMaxWidth * i + leftMargin, startPoint.y1 - height * j - bottomMargin],
-            [startColPoint + tempMaxWidth * i + width + leftMargin, startPoint.y1 - height * j - bottomMargin],
-            [startColPoint + tempMaxWidth * i + width + leftMargin, startPoint.y1 - height * j - height - bottomMargin],
-            [startColPoint + tempMaxWidth * i + leftMargin, startPoint.y1 - height * j - height - bottomMargin],
-            [startColPoint + tempMaxWidth * i + leftMargin, startPoint.y1 - height * j - bottomMargin],
-          ]
+            square = [
+              [startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin],
+              [startPoint.x1 + width * i + width + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin],
+              [startPoint.x1 + width * i + width + leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin],
+              [startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin],
+              [startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin],
+            ]
 
-          let squarePolygon = turf.polygon([square])
-          let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
-          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
+            let squarePolygon = turf.polygon([square])
+            let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
+            let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
-          moduleOptions.surfaceId = moduleSetupSurface.id
-          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
-          canvas?.add(tempModule)
-          moduleSetupArray.push(tempModule)
-          moduleGroup.push(tempModule)
+            // if (disjointFromTrestle && isDisjoint) {
+            moduleOptions = { ...moduleOptions, fill: module.color, surfaceId: moduleSetupSurface.id, moduleInfo: module }
+            let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
+            canvas?.add(tempModule)
+            moduleSetupArray.push(tempModule)
+            moduleGroup.push(tempModule)
+          }
         }
-      }
+      })
     }
 
-    const flatRoofLeftFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight) => {
-      let startPoint = moduleSetupSurface.flowLines.left
-      const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측
-      const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단
-      const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단
+    const flatRoofTopFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight) => {
+      checkedModule.forEach((module, index) => {
+        const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
+        const flowLines = getFlowLines(moduleSetupSurface, module)
+        let startPoint = flowLines.top
 
-      let totalTopEndPoint = Math.abs(maxTopEndPoint - startPoint.y1) //전체 높이에서 현재 높이를 뺌
-      let diffTopEndPoint = Math.abs(totalTopEndPoint / height)
-      let totalHeight = Math.ceil(Math.abs(maxBottomEndPoint - maxTopEndPoint) / height)
-      let totalWidth = Math.abs(startPoint.x1 - maxRightEndPoint) / width
-      let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint)
-      let tempMaxHeight = height //최대배치인지 확인하려고 넣음
+        const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측
+        const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측
+        const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단
 
-      for (let i = 0; i <= totalWidth; i++) {
-        bottomMargin = marginHeight * i
-        for (let j = 0; j < totalHeight; j++) {
-          leftMargin = marginWidth * j
+        let totalLeftEndPoint = maxLeftEndPoint - startPoint.x1
+        let totalRightEndPoint = maxLeftEndPoint - maxRightEndPoint
+        let totalBottomEndPoint = maxBottomEndPoint - startPoint.y1
+        let diffLeftEndPoint = Math.abs(totalLeftEndPoint / width)
+        let diffRightEndPoint = Math.ceil(Math.abs(totalRightEndPoint / width))
+        let diffBottomEndPoint = Math.ceil(Math.abs(totalBottomEndPoint / height))
+        let startColPoint = Math.abs(width * Math.ceil(diffLeftEndPoint) - startPoint.x1)
+        let tempMaxWidth = width //최대배치인지 확인하려고 넣음
 
-          square = [
-            [startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin],
-            [startPoint.x1 + width * i + width + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin],
-            [startPoint.x1 + width * i + width + leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin],
-            [startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin],
-            [startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin],
-          ]
+        for (let j = 0; j < diffBottomEndPoint; j++) {
+          bottomMargin = marginHeight * j
+          for (let i = 0; i < diffRightEndPoint; i++) {
+            leftMargin = marginWidth * i
 
-          let squarePolygon = turf.polygon([square])
-          let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
-          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
+            square = [
+              [startColPoint + tempMaxWidth * i + leftMargin, startPoint.y1 + height * j + bottomMargin],
+              [startColPoint + tempMaxWidth * i + leftMargin, startPoint.y1 + height * j + height + bottomMargin],
+              [startColPoint + tempMaxWidth * i + width + leftMargin, startPoint.y1 + height * j + height + bottomMargin],
+              [startColPoint + tempMaxWidth * i + width + leftMargin, startPoint.y1 + height * j + bottomMargin],
+              [startColPoint + tempMaxWidth * i + leftMargin, startPoint.y1 + height * j + bottomMargin],
+            ]
 
-          // if (disjointFromTrestle && isDisjoint) {
-          moduleOptions.surfaceId = moduleSetupSurface.id
-          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
-          canvas?.add(tempModule)
-          moduleSetupArray.push(tempModule)
-          moduleGroup.push(tempModule)
+            let squarePolygon = turf.polygon([square])
+            let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
+            let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
+
+            // if (disjointFromTrestle && isDisjoint) {
+            moduleOptions = { ...moduleOptions, fill: module.color, surfaceId: moduleSetupSurface.id, moduleInfo: module }
+            let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
+            canvas?.add(tempModule)
+            moduleSetupArray.push(tempModule)
+            moduleGroup.push(tempModule)
+          }
         }
-      }
+      })
     }
 
-    const flatRoofTopFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight) => {
-      let startPoint = moduleSetupSurface.flowLines.top
+    const flatRoofRightFlowSetupModule = (surfaceMaxLines, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight) => {
+      checkedModule.forEach((module, index) => {
+        const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
+        const flowLines = getFlowLines(moduleSetupSurface, module)
+        let startPoint = flowLines.right
 
-      const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측
-      const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측
-      const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단
+        const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측
+        const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단
+        const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단
 
-      let totalLeftEndPoint = maxLeftEndPoint - startPoint.x1
-      let totalRightEndPoint = maxLeftEndPoint - maxRightEndPoint
-      let totalBottomEndPoint = maxBottomEndPoint - startPoint.y1
-      let diffLeftEndPoint = Math.abs(totalLeftEndPoint / width)
-      let diffRightEndPoint = Math.ceil(Math.abs(totalRightEndPoint / width))
-      let diffBottomEndPoint = Math.ceil(Math.abs(totalBottomEndPoint / height))
-      let startColPoint = Math.abs(width * Math.ceil(diffLeftEndPoint) - startPoint.x1)
-      let tempMaxWidth = width //최대배치인지 확인하려고 넣음
+        let totalTopEndPoint = Math.abs(maxTopEndPoint - startPoint.y1) //전체 높이에서 현재 높이를 뺌
+        let diffTopEndPoint = Math.abs(totalTopEndPoint / height)
+        let totalHeight = Math.ceil(Math.abs(maxBottomEndPoint - maxTopEndPoint) / height)
+        let totalWidth = Math.abs(startPoint.x1 - maxLeftEndPoint) / width
+        let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint) - 3 // -3으로 위치살짝 보정
+        let tempMaxHeight = height //최대배치인지 확인하려고 넣음
 
-      for (let j = 0; j < diffBottomEndPoint; j++) {
-        bottomMargin = marginHeight * j
-        for (let i = 0; i < diffRightEndPoint; i++) {
-          leftMargin = marginWidth * i
+        for (let i = 0; i <= totalWidth; i++) {
+          bottomMargin = marginHeight * i
+          for (let j = 0; j < totalHeight; j++) {
+            leftMargin = marginWidth * j
 
-          square = [
-            [startColPoint + tempMaxWidth * i + leftMargin, startPoint.y1 + height * j + bottomMargin],
-            [startColPoint + tempMaxWidth * i + leftMargin, startPoint.y1 + height * j + height + bottomMargin],
-            [startColPoint + tempMaxWidth * i + width + leftMargin, startPoint.y1 + height * j + height + bottomMargin],
-            [startColPoint + tempMaxWidth * i + width + leftMargin, startPoint.y1 + height * j + bottomMargin],
-            [startColPoint + tempMaxWidth * i + leftMargin, startPoint.y1 + height * j + bottomMargin],
-          ]
+            square = [
+              [startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin],
+              [startPoint.x1 - width * i - width - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin],
+              [startPoint.x1 - width * i - width - leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin],
+              [startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin],
+              [startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin],
+            ]
 
-          let squarePolygon = turf.polygon([square])
-          let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
-          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
+            let squarePolygon = turf.polygon([square])
+            let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
+            let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
-          // if (disjointFromTrestle && isDisjoint) {
-          moduleOptions.surfaceId = moduleSetupSurface.id
-          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
-          canvas?.add(tempModule)
-          moduleSetupArray.push(tempModule)
-          moduleGroup.push(tempModule)
+            // if (disjointFromTrestle && isDisjoint) {
+            moduleOptions = { ...moduleOptions, fill: module.color, surfaceId: moduleSetupSurface.id, moduleInfo: module }
+            let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
+            canvas?.add(tempModule)
+            moduleSetupArray.push(tempModule)
+            moduleGroup.push(tempModule)
+          }
         }
-      }
-    }
-
-    const flatRoofRightFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight) => {
-      let startPoint = moduleSetupSurface.flowLines.right
-
-      const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측
-      const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단
-      const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단
-
-      let totalTopEndPoint = Math.abs(maxTopEndPoint - startPoint.y1) //전체 높이에서 현재 높이를 뺌
-      let diffTopEndPoint = Math.abs(totalTopEndPoint / height)
-      let totalHeight = Math.ceil(Math.abs(maxBottomEndPoint - maxTopEndPoint) / height)
-      let totalWidth = Math.abs(startPoint.x1 - maxLeftEndPoint) / width
-      let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint) - 3 // -3으로 위치살짝 보정
-      let tempMaxHeight = height //최대배치인지 확인하려고 넣음
-
-      for (let i = 0; i <= totalWidth; i++) {
-        bottomMargin = marginHeight * i
-        for (let j = 0; j < totalHeight; j++) {
-          leftMargin = marginWidth * j
-
-          square = [
-            [startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin],
-            [startPoint.x1 - width * i - width - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin],
-            [startPoint.x1 - width * i - width - leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin],
-            [startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin],
-            [startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin],
-          ]
-
-          let squarePolygon = turf.polygon([square])
-          let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
-          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
-
-          // if (disjointFromTrestle && isDisjoint) {
-          moduleOptions.surfaceId = moduleSetupSurface.id
-          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
-          canvas?.add(tempModule)
-          moduleSetupArray.push(tempModule)
-          moduleGroup.push(tempModule)
-        }
-      }
+      })
     }
 
     moduleSetupSurfaces.forEach((moduleSetupSurface, index) => {
@@ -2334,29 +2347,20 @@ export function useModuleBasicSetting(tabNum) {
       const turfModuleSetupSurface = polygonToTurfPolygon(moduleSetupSurface, true) //폴리곤을 turf 객체로 변환
       const containsBatchObjects = objectsIncludeSurface(turfModuleSetupSurface) //배치면에 오브젝트(도머, 개구등)이 있는지 확인하는 로직
 
-      let width = maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? 172.2 : 113.4
-      let height = maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? 113.4 : 172.2
-
-      //배치면때는 방향쪽으로 패널이 넓게 누워져야함
-      if (moduleSetupSurface.flowDirection !== undefined) {
-        width = moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north' ? 172.2 : 113.4
-        height = moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north' ? 113.4 : 172.2
-      }
-
       const surfaceMaxLines = findSetupSurfaceMaxLines(moduleSetupSurface)
       const marginWidth = 1
-      const marginHeight = 1
+      const marginHeight = 3
 
       canvas.renderAll()
 
       if (compasDeg >= 0 && compasDeg < 90) {
-        flatRoofDownFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight)
+        flatRoofDownFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight)
       } else if (compasDeg >= 90 && compasDeg < 180) {
-        flatRoofLeftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight)
+        flatRoofLeftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight)
       } else if (compasDeg >= 180 && compasDeg < 270) {
-        flatRoofRightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight)
+        flatRoofRightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight)
       } else {
-        flatRoofTopFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight)
+        flatRoofTopFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight)
       }
 
       const setupedModules = moduleSetupArray.filter((module, index) => {
@@ -2495,8 +2499,51 @@ export function useModuleBasicSetting(tabNum) {
     setModuleStatistics({ header: header, rows, footer: footer })
   }
 
+  /**
+   * 모듈의 너비와 높이를 계산하는 함수
+   * @param {object} maxLengthLine 최대 길이 라인
+   * @param {object} moduleSetupSurface 모듈 설치면
+   * @param {object} module 모듈
+   * @returns {object} 모듈의 너비와 높이
+   */
+  const getModuleWidthHeight = (maxLengthLine, moduleSetupSurface, module) => {
+    let tmpWidth =
+      (maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? Number(module.longAxis) : Number(module.shortAxis)) / 10
+    let tmpHeight =
+      (maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? Number(module.shortAxis) : Number(module.longAxis)) / 10
+
+    //배치면때는 방향쪽으로 패널이 넓게 누워져야함
+    if (moduleSetupSurface.flowDirection !== undefined) {
+      tmpWidth =
+        (moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north'
+          ? Number(module.longAxis)
+          : Number(module.shortAxis)) / 10
+      tmpHeight =
+        (moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north'
+          ? Number(module.shortAxis)
+          : Number(module.longAxis)) / 10
+    }
+
+    return canvasSetting.roofSizeSet === '1'
+      ? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(moduleSetupSurface.roofMaterial.pitch), moduleSetupSurface.flowDirection)
+      : { width: tmpWidth, height: tmpHeight }
+  }
+
+  const getFlowLines = (moduleSetupSurface, module) => {
+    let flowLines = {}
+
+    flowLines = {
+      bottom: bottomTopFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'bottom'),
+      top: bottomTopFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'top'),
+      left: leftRightFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'left'),
+      right: leftRightFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'right'),
+    }
+    return flowLines
+  }
+
   return {
     selectedModules,
+    makeModuleInstArea,
     manualModuleSetup,
     autoModuleSetup,
     restoreModuleInstArea,