육지붕 구현

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,6 +40,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     if (tabNum === 1) {
       orientationRef.current.handleNextStep()
     } else if (tabNum === 2) {
+      if (canvasSetting.roofSizeSet !== '3') {
         if (!isObjectNotEmpty(moduleSelectionData.module)) {
           Swal.fire({
             title: getMessage('module.not.found'),
@@ -55,7 +56,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
           })
           return
         }
-
         //물건정보 갱신일 수정
         updateObjectDataApi({
           objectNo: currentCanvasPlan.objectNo, //오브젝트_no
@@ -65,6 +65,15 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
           installHeight: moduleSelectionData.common.instHt, //설치높이
           userId: loginUserState.userId, //작성자아아디
         })
+      } else {
+        if (!isObjectNotEmpty(moduleSelectionData.flatModule)) {
+          Swal.fire({
+            title: getMessage('module.not.found'),
+            icon: 'warning',
+          })
+          return
+        }
+      }
     }
 
     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 === 2 && <Module setTabNum={setTabNum} />}
-          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && tabNum === 3 && <Placement setTabNum={setTabNum} ref={placementRef} />}
+          {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 === 2 && <PitchModule setTabNum={setTabNum} />}
-          {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet == 3 && tabNum === 3 && (
+          {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)}>

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,7 +115,6 @@ 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">
@@ -136,7 +136,6 @@ const Placement = forwardRef((props, refs) => {
                         </td>
                         <td className="al-r">{item.wpOut}</td>
                       </tr>
-                      </>
                     ))}
                 </tbody>
               </table>

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,31 +95,19 @@ export default function PitchModule({}) {
                 </tr>
               </thead>
               <tbody>
-                {moduleData.rows.map((row) => (
+                {selectedModules &&
-                  <>
+                  selectedModules.itemList &&
-                    <tr>
+                  selectedModules.itemList.map((row, index) => (
-                      {moduleData.header.map((header) => (
+                    <tr key={index}>
-                        <>
-                          {header.type === 'color-box' && (
                       <td>
                         <div className="color-wrap">
-                                <span className="color-box" style={{ backgroundColor: row[header.prop].color }}></span>
+                          <span className="color-box" style={{ backgroundColor: row.color }}></span>
-                                <span className="name">{row[header.prop].name}</span>
+                          <span className="name">{row.itemNm}</span>
                         </div>
                       </td>
-                          )}
+                      <td>{Number(row.shortAxis).toFixed(0)}</td>
-                          {!header.type && header.type !== 'color-box' && <td className="al-r">{row[header.prop].name}</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>

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 { canvasState, checkedModuleState } from '@/store/canvasAtom'
-import { useRecoilValue } from 'recoil'
+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(() => {
+  const { selectedModules } = useModuleBasicSetting(3)
-    makeModuleInstArea()
+  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,32 +117,29 @@ const PitchPlacement = forwardRef((props, refs) => {
                 </tr>
               </thead>
               <tbody>
-                {moduleData.rows.map((row) => (
+                {selectedModules.itemList &&
-                  <>
+                  selectedModules.itemList.map((item, index) => (
-                    <tr>
+                    <tr key={index}>
-                      {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" />
+                          <input
-                                <label htmlFor="ch02"></label>
+                            type="checkbox"
+                            id={item.itemId}
+                            name={item.itemId}
+                            checked={selectedItems[item.itemId]}
+                            onChange={handleSelectedItem}
+                          />
+                          <label htmlFor={item.itemId}></label>
                         </div>
                       </td>
-                          )}
+                      <td>
-                          {header.type && header.type !== 'color-box' && header.type !== 'check' && <td className="al-r">{row[header.prop].name}</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>
@@ -150,8 +160,7 @@ const PitchPlacement = forwardRef((props, refs) => {
                     name="radio01"
                     id="ra01"
                     value={'south'}
-                    checked={setupLocation === 'south'}
+                    defaultChecked={setupLocation === 'south'}
-                    defaultChecked
                     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>

src/hooks/module/useModuleBasicSetting.js

@@ -61,6 +61,7 @@ export function useModuleBasicSetting(tabNum) {
   //모듈 선택에서 선택된 값들 넘어옴
   useEffect(() => {
     if (moduleSelectionData && tabNum === 3) {
+      if (canvasSetting.roofSizeSet !== '3') {
         const common = moduleSelectionData.common
 
         const roofConstructions = moduleSelectionData.roofConstructions
@@ -87,6 +88,16 @@ export function useModuleBasicSetting(tabNum) {
         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,15 +200,15 @@ 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 (canvasSetting.roofSizeSet !== '3') {
       //북면이 있지만
       if (roof.directionText && roof.directionText.indexOf('北') > -1) {
         //북쪽일때 해당 서북서, 동북동은 제외한다고 한다
@@ -207,7 +216,7 @@ export function useModuleBasicSetting(tabNum) {
           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], {
+      const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
-      //   stroke: 'red',
+        stroke: 'red',
-      //   strokeWidth: 1,
+        strokeWidth: 1,
-      //   selectable: true,
+        selectable: true,
-      // })
+      })
-      // canvas?.add(finalLine)
+      canvas?.add(finalLine)
-      // canvas?.renderAll()
+      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], {
+      const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], {
-      //   stroke: 'red',
+        stroke: 'red',
-      //   strokeWidth: 1,
+        strokeWidth: 1,
-      //   selectable: true,
+        selectable: true,
-      // })
+      })
-      // canvas?.add(finalLine)
+      canvas?.add(finalLine)
-      // canvas?.renderAll()
+      canvas?.renderAll()
 
       let rtnObj
       //평평하면
@@ -1685,6 +1640,19 @@ export function useModuleBasicSetting(tabNum) {
 
   const manualFlatroofModuleSetup = (placementFlatRef) => {
     let moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
+    if (isManualModuleSetup) {
+      if (checkedModule.length === 0) {
+        swalFire({ text: getMessage('module.place.select.module') })
+        setIsManualModuleSetup(!isManualModuleSetup)
+        return
+      }
+
+      if (checkedModule.length > 1) {
+        swalFire({ text: getMessage('module.place.select.one.module') })
+        setIsManualModuleSetup(!isManualModuleSetup)
+        return
+      }
+
       let flatBatchType = placementFlatRef.setupLocation.current.value
 
       const batchObjects = canvas
@@ -1697,7 +1665,7 @@ export function useModuleBasicSetting(tabNum) {
             obj.name === BATCH_TYPE.SHADOW,
         ) //도머s 객체
 
-    const moduleOptions = {
+      let moduleOptions = {
         fill: '#BFFD9F',
         stroke: 'black',
         strokeWidth: 0.1,
@@ -1760,8 +1728,17 @@ export function useModuleBasicSetting(tabNum) {
             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
+            const moduleWidth = Number(checkedModule[0].longAxis) / 10
+            const moduleHeight = Number(checkedModule[0].shortAxis) / 10
+
+            let tmpWidth = flowDirection === 'south' || flowDirection === 'north' ? moduleWidth : moduleHeight
+            let tmpHeight = flowDirection === 'south' || flowDirection === 'north' ? moduleHeight : moduleWidth
+
+            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 },
@@ -1804,6 +1781,9 @@ export function useModuleBasicSetting(tabNum) {
               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
@@ -1832,22 +1812,22 @@ export function useModuleBasicSetting(tabNum) {
 
                   //설치된 셀에 좌측에 스냅
                   if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
-                  tempModule.left = holdCellLeft - width - 1
+                    tempModule.left = holdCellLeft - width - intvHor
                   }
 
                   //설치된 셀에 우측에 스냅
                   if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
-                  tempModule.left = holdCellRight + 1
+                    tempModule.left = holdCellRight + intvHor
                   }
 
                   //설치된 셀에 위쪽에 스냅
                   if (Math.abs(smallBottom - holdCellTop) < snapDistance) {
-                  tempModule.top = holdCellTop - height - 1
+                    tempModule.top = holdCellTop - height - intvVer
                   }
 
                   //설치된 셀에 밑쪽에 스냅
                   if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
-                  tempModule.top = holdCellBottom + 1
+                    tempModule.top = holdCellBottom + intvVer
                   }
                   //가운데 -> 가운데
                   if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) {
@@ -1987,7 +1967,7 @@ export function useModuleBasicSetting(tabNum) {
               const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인
               if (!isOverlap) {
                 moduleOptions.surfaceId = trestlePolygon.id
-              let manualModule = new QPolygon(tempModule.points, { ...moduleOptions })
+                let manualModule = new QPolygon(tempModule.points, { ...moduleOptions, moduleInfo: checkedModule[0] })
                 canvas?.add(manualModule)
                 manualDrawModules.push(tempModule)
               } else {
@@ -1999,8 +1979,22 @@ export function useModuleBasicSetting(tabNum) {
           }
         })
       }
-
       getModuleStatistics()
+    } else {
+      if (moduleSetupSurfaces) {
+        //수동모드 해제시 모듈 설치면 선택 잠금
+        moduleSetupSurfaces.forEach((obj) => {
+          obj.set({
+            selectable: true,
+            evented: true,
+          })
+        })
+      }
+
+      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 = {
+      // const flowLines = {
-        bottom: bottomTopFlowLine(surface).find((obj) => obj.target === 'bottom'),
+      //   bottom: bottomTopFlowLine(surface).find((obj) => obj.target === 'bottom'),
-        top: bottomTopFlowLine(surface).find((obj) => obj.target === 'top'),
+      //   top: bottomTopFlowLine(surface).find((obj) => obj.target === 'top'),
-        left: leftRightFlowLine(surface).find((obj) => obj.target === 'left'),
+      //   left: leftRightFlowLine(surface).find((obj) => obj.target === 'left'),
-        right: leftRightFlowLine(surface).find((obj) => obj.target === 'right'),
+      //   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,8 +2152,13 @@ export function useModuleBasicSetting(tabNum) {
 
     let moduleGroup = []
 
-    const flatRoofDownFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight) => {
+    const flatRoofDownFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight) => {
-      let startPoint = moduleSetupSurface.flowLines.bottom
+      checkedModule.forEach((module, index) => {
+        const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
+
+        const flowLines = getFlowLines(moduleSetupSurface, module)
+
+        let startPoint = flowLines.bottom
 
         const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측
         const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측
@@ -2190,17 +2189,22 @@ export function useModuleBasicSetting(tabNum) {
             let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
             let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
-          moduleOptions.surfaceId = moduleSetupSurface.id
+            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) => {
+    const flatRoofLeftFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight) => {
-      let startPoint = moduleSetupSurface.flowLines.left
+      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 //최하단
@@ -2230,17 +2234,21 @@ export function useModuleBasicSetting(tabNum) {
             let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
             // if (disjointFromTrestle && isDisjoint) {
-          moduleOptions.surfaceId = moduleSetupSurface.id
+            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) => {
+    const flatRoofTopFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight) => {
-      let startPoint = moduleSetupSurface.flowLines.top
+      checkedModule.forEach((module, index) => {
+        const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
+        const flowLines = getFlowLines(moduleSetupSurface, module)
+        let startPoint = flowLines.top
 
         const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측
         const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측
@@ -2273,17 +2281,21 @@ export function useModuleBasicSetting(tabNum) {
             let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
             // if (disjointFromTrestle && isDisjoint) {
-          moduleOptions.surfaceId = moduleSetupSurface.id
+            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) => {
+    const flatRoofRightFlowSetupModule = (surfaceMaxLines, moduleSetupArray, moduleSetupSurface, marginWidth, marginHeight) => {
-      let startPoint = moduleSetupSurface.flowLines.right
+      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 maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단
@@ -2314,13 +2326,14 @@ export function useModuleBasicSetting(tabNum) {
             let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
             // if (disjointFromTrestle && isDisjoint) {
-          moduleOptions.surfaceId = moduleSetupSurface.id
+            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)
           }
         }
+      })
     }
 
     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,