단수배치 작업

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

@@ -97,13 +97,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     setTabNum(tabNum + 1)
   }
 
-  const placementRef = {
-    isChidori: useRef('false'),
-    setupLocation: useRef('eaves'),
-  }
-
-  const layoutSetupRef = useRef([])
-
   const placementFlatRef = {
     setupLocation: useRef('south'),
   }
@@ -149,16 +142,18 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
 
   useEffect(() => {
     if (basicSetting.roofSizeSet !== '3') {
-      console.log('ManualSetupMode', manualSetupMode)
-
       if (manualSetupMode.indexOf('manualSetup') > -1) {
-        manualModuleSetup(placementRef)
+        manualModuleSetup()
       } else if (manualSetupMode.indexOf('manualLayoutSetup') > -1) {
-        manualModuleLayoutSetup(layoutSetupRef)
+        manualModuleLayoutSetup(layoutSetup)
+      } else if (manualSetupMode.indexOf('off') > -1) {
+        manualModuleSetup()
+        manualModuleLayoutSetup(layoutSetup)
       }
     } else {
       manualFlatroofModuleSetup(placementFlatRef)
     }
+
     if (isClosePopup.close) {
       closePopup(isClosePopup.id)
     }
@@ -166,12 +161,13 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
 
   useEffect(() => {
     if (isManualModuleLayoutSetup) {
-      manualModuleLayoutSetup(layoutSetupRef)
+      manualModuleLayoutSetup(layoutSetup)
     }
   }, [layoutSetup])
 
   useEffect(() => {
     setIsManualModuleSetup(false)
+    setIsManualModuleLayoutSetup(false)
   }, [checkedModules])
 
   return (
@@ -189,13 +185,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
         {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/}
         {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && <Module setTabNum={setTabNum} />}
         {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && (
-          <Placement
+          <Placement setTabNum={setTabNum} layoutSetup={layoutSetup} setLayoutSetup={setLayoutSetup} />
-            setTabNum={setTabNum}
-            ref={placementRef}
-            layoutSetupRef={layoutSetupRef}
-            layoutSetup={layoutSetup}
-            setLayoutSetup={setLayoutSetup}
-          />
         )}
 
         {/*배치면 초기설정 - 입력방법: 육지붕*/}
@@ -227,7 +217,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
                   <button className={`btn-frame modal mr5 ${isManualModuleLayoutSetup ? 'act' : ''}`} onClick={handleManualModuleLayoutSetup}>
                     레아이웃 수동설치
                   </button>
-                  <button className="btn-frame modal act" onClick={() => autoModuleSetup(placementRef)}>
+                  <button className="btn-frame modal act" onClick={() => autoModuleSetup()}>
                     {getMessage('modal.module.basic.setting.auto.placement')}
                   </button>
                 </>

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

@@ -3,10 +3,9 @@ import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import {
   checkedModuleState,
-  currentCanvasPlanState,
   isManualModuleLayoutSetupState,
   isManualModuleSetupState,
-  isModuleChidoriSetupState,
+  moduleSetupOptionState,
   toggleManualSetupModeState,
 } from '@/store/canvasAtom'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
@@ -15,13 +14,10 @@ import { isObjectNotEmpty } from '@/util/common-utils'
 
 const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
-  const [isChidori, setIsChidori] = useRecoilState(isModuleChidoriSetupState)
+
   const [isChidoriNotAble, setIsChidoriNotAble] = useState(false)
 
-  const [setupLocation, setSetupLocation] = useState('eaves')
-  const [isMaxSetup, setIsMaxSetup] = useState('false')
   const [selectedItems, setSelectedItems] = useState({})
-
   const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState)
 
   const setCheckedModules = useSetRecoilState(checkedModuleState)
@@ -35,6 +31,8 @@ const Placement = forwardRef((props, refs) => {
   const setIsManualModuleLayoutSetup = useSetRecoilState(isManualModuleLayoutSetupState)
   const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState)
 
+  const [moduleSetupOption, setModuleSetupOption] = useRecoilState(moduleSetupOptionState) //모듈 설치 옵션
+
   //모듈 배치면 생성
   useEffect(() => {
     if (moduleSelectionData) {
@@ -49,7 +47,7 @@ const Placement = forwardRef((props, refs) => {
     return () => {
       setIsManualModuleSetup(false)
       setIsManualModuleLayoutSetup(false)
-      setManualSetupMode('')
+      setManualSetupMode('off')
     }
   }, [])
 
@@ -69,11 +67,6 @@ const Placement = forwardRef((props, refs) => {
         setSelectedItems(initCheckedModule)
         setSelectedModules(moduleSelectionData.module)
         props.setLayoutSetup(moduleSelectionData.module.itemList.map((item) => ({ moduleId: item.itemId, col: 0, row: 0 })))
-        props.layoutSetupRef.current = moduleSelectionData.module.itemList.map((item) => ({
-          moduleId: item.itemId,
-          col: 0,
-          row: 0,
-        }))
       }
 
       //모듈 배치면 생성
@@ -105,13 +98,21 @@ const Placement = forwardRef((props, refs) => {
 
   const handleChangeChidori = (e) => {
     const bool = e.target.value === 'true' ? true : false
-    setIsChidori(bool)
+    setModuleSetupOption({ ...moduleSetupOption, isChidori: bool })
-    refs.isChidori.current = e.target.value
+
+    //변경하면 수동 다 꺼짐
+    setIsManualModuleSetup(false)
+    setIsManualModuleLayoutSetup(false)
+    setManualSetupMode('off')
   }
 
   const handleSetupLocation = (e) => {
-    setSetupLocation(e.target.value)
+    setModuleSetupOption({ ...moduleSetupOption, setupLocation: e.target.value })
-    refs.setupLocation.current = e.target.value
+
+    //변경하면 수동 다 꺼짐
+    setIsManualModuleSetup(false)
+    setIsManualModuleLayoutSetup(false)
+    setManualSetupMode('off')
   }
 
   //체크된 모듈 아이디 추출
@@ -123,11 +124,6 @@ const Placement = forwardRef((props, refs) => {
     const newLayoutSetup = [...props.layoutSetup]
     newLayoutSetup[index] = { ...newLayoutSetup[index], moduleId: itemId, [e.target.name]: Number(e.target.value) }
     props.setLayoutSetup(newLayoutSetup)
-    props.layoutSetupRef.current[index] = {
-      ...props.layoutSetupRef.current[index],
-      moduleId: itemId,
-      [e.target.name]: Number(e.target.value),
-    }
   }
 
   return (
@@ -214,7 +210,7 @@ const Placement = forwardRef((props, refs) => {
                         type="radio"
                         name="radio01"
                         id="ra01"
-                        checked={isChidori}
+                        checked={moduleSetupOption.isChidori}
                         disabled={isChidoriNotAble}
                         value={'true'}
                         onChange={(e) => handleChangeChidori(e)}
@@ -222,7 +218,14 @@ const Placement = forwardRef((props, refs) => {
                       <label htmlFor="ra01">{getMessage('modal.module.basic.setting.module.placement.do')}</label>
                     </div>
                     <div className="d-check-radio pop">
-                      <input type="radio" name="radio02" id="ra02" checked={!isChidori} value={'false'} onChange={(e) => handleChangeChidori(e)} />
+                      <input
+                        type="radio"
+                        name="radio02"
+                        id="ra02"
+                        checked={!moduleSetupOption.isChidori}
+                        value={'false'}
+                        onChange={(e) => handleChangeChidori(e)}
+                      />
                       <label htmlFor="ra02">{getMessage('modal.module.basic.setting.module.placement.do.not')}</label>
                     </div>
                   </div>
@@ -232,24 +235,12 @@ const Placement = forwardRef((props, refs) => {
                 <div className="self-item-th">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}</div>
                 <div className="self-item-td">
                   <div className="pop-form-radio">
-                    <div className="d-check-radio pop">
-                      <input
-                        type="radio"
-                        name="radio03"
-                        id="ra03"
-                        checked={setupLocation === 'center'}
-                        value={'center'}
-                        onChange={handleSetupLocation}
-                        disabled={isMultiModule}
-                      />
-                      <label htmlFor="ra03">{getMessage('modal.module.basic.setting.module.placement.arrangement.standard.center')}</label>
-                    </div>
                     <div className="d-check-radio pop">
                       <input
                         type="radio"
                         name="radio04"
                         id="ra04"
-                        checked={setupLocation === 'eaves'}
+                        checked={moduleSetupOption.setupLocation === 'eaves'}
                         value={'eaves'}
                         onChange={handleSetupLocation}
                       />
@@ -260,7 +251,7 @@ const Placement = forwardRef((props, refs) => {
                         type="radio"
                         name="radio05"
                         id="ra05"
-                        checked={setupLocation === 'ridge'}
+                        checked={moduleSetupOption.setupLocation === 'ridge'}
                         value={'ridge'}
                         onChange={handleSetupLocation}
                         disabled={isMultiModule}

src/hooks/module/useModuleBasicSetting.js

@@ -8,7 +8,7 @@ import {
   currentObjectState,
   isManualModuleLayoutSetupState,
   isManualModuleSetupState,
-  isModuleChidoriSetupState,
+  moduleSetupOptionState,
   toggleManualSetupModeState,
 } from '@/store/canvasAtom'
 
@@ -33,6 +33,7 @@ import { v4 as uuidv4 } from 'uuid'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
 import { useMode } from '@/hooks/useMode'
+import { usePolygon } from '@/hooks/usePolygon'
 
 export function useModuleBasicSetting(tabNum) {
   const canvas = useRecoilValue(canvasState)
@@ -61,7 +62,10 @@ export function useModuleBasicSetting(tabNum) {
   const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
   const { setModuleStatisticsData } = useCircuitTrestle()
   const { createRoofPolygon, createMarginPolygon, createPaddingPolygon } = useMode()
-  const isModuleChidoriSetup = useRecoilValue(isModuleChidoriSetupState)
+
+  const { drawDirectionArrow } = usePolygon()
+
+  const moduleSetupOption = useRecoilValue(moduleSetupOptionState)
 
   const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState)
 
@@ -440,13 +444,15 @@ export function useModuleBasicSetting(tabNum) {
    */
   const manualModuleSetup = (placementRef) => {
     //레이아웃 수동설치 토글
-    if (isManualModuleLayoutSetup) {
+
-      setIsManualModuleLayoutSetup(false)
-      setManualSetupMode(`manualLayoutSetup_false`)
-    }
     const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
 
     if (isManualModuleSetup) {
+      if (isManualModuleLayoutSetup) {
+        setIsManualModuleLayoutSetup(false)
+        // setManualSetupMode(`manualLayoutSetup_false`)
+      }
+
       if (checkedModule.length === 0) {
         swalFire({ text: getMessage('module.place.select.module') })
         setIsManualModuleSetup(false)
@@ -871,14 +877,17 @@ export function useModuleBasicSetting(tabNum) {
   }
 
   const manualModuleLayoutSetup = (layoutSetupRef) => {
-    if (isManualModuleSetup) {
-      setIsManualModuleSetup(false)
-      setManualSetupMode(`manualSetup_false`)
-    }
-
     const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
 
+    const isChidori = moduleSetupOption.isChidori
+    const setupLocation = moduleSetupOption.setupLocation
+
     if (isManualModuleLayoutSetup) {
+      if (isManualModuleSetup) {
+        setIsManualModuleSetup(false)
+        // setManualSetupMode(`manualSetup_false`)
+      }
+
       if (checkedModule.length === 0) {
         swalFire({ text: getMessage('module.place.select.module') })
         setIsManualModuleLayoutSetup(false)
@@ -887,7 +896,7 @@ export function useModuleBasicSetting(tabNum) {
       }
 
       const hasZeroLength = checkedModule.some((item) =>
-        layoutSetupRef.current.some((layoutItem) => item.itemId === layoutItem.moduleId && (layoutItem.row === 0 || layoutItem.col === 0)),
+        layoutSetupRef.some((layoutItem) => item.itemId === layoutItem.moduleId && (layoutItem.row === 0 || layoutItem.col === 0)),
       )
 
       if (hasZeroLength) {
@@ -1009,20 +1018,20 @@ export function useModuleBasicSetting(tabNum) {
 
             const points = [
               {
-                x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)),
+                x: toFixedWithoutRounding(mousePoint.x, 2) + toFixedWithoutRounding(width / 2, 2),
-                y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)),
+                y: toFixedWithoutRounding(mousePoint.y, 2) - toFixedWithoutRounding(height / 2, 2),
               },
               {
-                x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)),
+                x: toFixedWithoutRounding(mousePoint.x, 2) + toFixedWithoutRounding(width / 2, 2),
-                y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)),
+                y: toFixedWithoutRounding(mousePoint.y, 2) + toFixedWithoutRounding(height / 2, 2),
               },
               {
-                x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)),
+                x: toFixedWithoutRounding(mousePoint.x, 2) - toFixedWithoutRounding(width / 2, 2),
-                y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)),
+                y: toFixedWithoutRounding(mousePoint.y, 2) - toFixedWithoutRounding(height / 2, 2),
               },
               {
-                x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)),
+                x: toFixedWithoutRounding(mousePoint.x, 2) - toFixedWithoutRounding(width / 2, 2),
-                y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)),
+                y: toFixedWithoutRounding(mousePoint.y, 2) + toFixedWithoutRounding(height / 2, 2),
               },
             ]
 
@@ -1039,11 +1048,11 @@ export function useModuleBasicSetting(tabNum) {
                 stroke: 'black',
                 strokeWidth: 1,
                 strokeDashArray: [10, 5],
-                width: Number(width.toFixed(1)), //작은버전
+                width: toFixedWithoutRounding(width, 2), //작은버전
-                height: Number(height.toFixed(1)), //작은버전
+                height: toFixedWithoutRounding(height, 2), //작은버전
-                left: Number(mousePoint.x.toFixed(1) - Number((width / 2).toFixed(1))), //작은버전
+                left: toFixedWithoutRounding(mousePoint.x, 2) - toFixedWithoutRounding(width / 2, 2), //작은버전
-                top: Number(mousePoint.y.toFixed(1) - Number((height / 2).toFixed(1))), //작은버전
+                top: toFixedWithoutRounding(mousePoint.y, 2) - toFixedWithoutRounding(height / 2, 2), //작은버전
-                // width: Number((width * col).toFixed(1)) + Number((intvHor * (col - 1)).toFixed(1)), //큰버전
+                // // width: Number((width * col).toFixed(1)) + Number((intvHor * (col - 1)).toFixed(1)), //큰버전
                 // height: Number((height * row).toFixed(1)) + Number((intvVer * (row - 1)).toFixed(1)), //큰버전
                 // left: Number(mousePoint.x.toFixed(1)) - calcHalfWidth.toFixed(1), //큰버전
                 // top: Number(mousePoint.y.toFixed(1)) - calcHalfHeight.toFixed(1), //큰버전
@@ -1068,77 +1077,131 @@ export function useModuleBasicSetting(tabNum) {
                * 스냅기능
                */
               let snapDistance = flowDirection === 'south' || flowDirection === 'north' ? 70 : 40
+              let sideSnapDistance = 15
               let trestleSnapDistance = 15
 
-              const trestleLeft = Number(moduleSetupSurfaces[i].left.toFixed(1)) - Number((moduleSetupSurfaces[i].width / 2).toFixed(1))
+              const trestleLeft = toFixedWithoutRounding(moduleSetupSurfaces[i].left, 2) - toFixedWithoutRounding(moduleSetupSurfaces[i].width / 2, 2)
-              const trestleTop = Number(moduleSetupSurfaces[i].top.toFixed(1)) - Number((moduleSetupSurfaces[i].height / 2).toFixed(1))
+              const trestleTop = toFixedWithoutRounding(moduleSetupSurfaces[i].top, 2) - toFixedWithoutRounding(moduleSetupSurfaces[i].height / 2, 2)
-              const trestleRight = Number(moduleSetupSurfaces[i].left.toFixed(1)) + Number((moduleSetupSurfaces[i].width / 2).toFixed(1))
+              const trestleRight =
-              const trestleBottom = Number(moduleSetupSurfaces[i].top.toFixed(1)) + Number((moduleSetupSurfaces[i].height / 2).toFixed(1))
+                toFixedWithoutRounding(moduleSetupSurfaces[i].left, 2) + toFixedWithoutRounding(moduleSetupSurfaces[i].width / 2, 2)
+              const trestleBottom =
+                toFixedWithoutRounding(moduleSetupSurfaces[i].top, 2) + toFixedWithoutRounding(moduleSetupSurfaces[i].height / 2, 2)
               const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2
 
               // 이동하는 모듈의 경계 좌표
-              const smallLeft = Number(tempModule.left.toFixed(1))
+              const smallLeft = toFixedWithoutRounding(tempModule.left, 2)
-              const smallTop = Number(tempModule.top.toFixed(1))
+              const smallTop = toFixedWithoutRounding(tempModule.top, 2)
-              const smallRight = smallLeft + Number(tempModule.width.toFixed(1))
+              const smallRight = smallLeft + toFixedWithoutRounding(tempModule.width, 2)
-              const smallBottom = smallTop + Number(tempModule.height.toFixed(1))
+              const smallBottom = smallTop + toFixedWithoutRounding(tempModule.height, 2)
-              const smallCenterX = smallLeft + Number((tempModule.width / 2).toFixed(1))
+              const smallCenterX = smallLeft + toFixedWithoutRounding(tempModule.width / 2, 2)
-              const smallCenterY = smallTop + Number((tempModule.height / 2).toFixed(1))
+              const smallCenterY = smallTop + toFixedWithoutRounding(tempModule.height / 2, 2)
 
               /**
                * 미리 깔아놓은 셀이 있을때 셀에 흡착됨
                */
               if (manualDrawModules) {
                 manualDrawModules.forEach((cell) => {
-                  const holdCellLeft = cell.left
+                  const holdCellLeft = toFixedWithoutRounding(cell.left, 2)
-                  const holdCellTop = cell.top
+                  const holdCellTop = toFixedWithoutRounding(cell.top, 2)
-                  const holdCellRight = holdCellLeft + Number(cell.width.toFixed(1))
+                  const holdCellRight = holdCellLeft + toFixedWithoutRounding(cell.width, 2)
-                  const holdCellBottom = holdCellTop + Number(cell.height.toFixed(1))
+                  const holdCellBottom = holdCellTop + toFixedWithoutRounding(cell.height, 2)
-                  const holdCellCenterX = holdCellLeft + Number((cell.width / 2).toFixed(1))
+                  const holdCellCenterX = holdCellLeft + toFixedWithoutRounding(cell.width / 2, 2)
-                  const holdCellCenterY = holdCellTop + Number((cell.height / 2).toFixed(1))
+                  const holdCellCenterY = holdCellTop + toFixedWithoutRounding(cell.height / 2, 2)
+
+                  //흐름방향따라 달라야 한다.
+                  if (flowDirection === 'south' || flowDirection === 'north') {
+                    if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) {
+                      //움직이는 모듈 가운데 -> 설치 모듈 가운데
+                      tempModule.left = holdCellCenterX - toFixedWithoutRounding(width / 2, 2)
+                    }
+
+                    //움직이는 모듈왼쪽 -> 가운데
+                    if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) {
+                      tempModule.left = holdCellCenterX + intvHor / 2
+                    }
+                    // 오른쪽 -> 가운데
+                    if (Math.abs(smallRight - holdCellCenterX) < snapDistance) {
+                      tempModule.left = holdCellCenterX - width - intvHor / 2
+                    }
 
                     //설치된 셀에 좌측에 스냅
                     if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
+                      // console.log('모듈 좌측 스냅')
                       tempModule.left = holdCellLeft - width - intvHor
                     }
 
                     //설치된 셀에 우측에 스냅
                     if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
+                      // console.log('모듈 우측 스냅')
                       tempModule.left = holdCellRight + intvHor
                     }
-
                     //설치된 셀에 위쪽에 스냅
-                  if (Math.abs(smallBottom - holdCellTop) < snapDistance) {
+                    if (Math.abs(smallBottom - holdCellTop) < sideSnapDistance) {
                       tempModule.top = holdCellTop - height - intvVer
                     }
 
                     //설치된 셀에 밑쪽에 스냅
-                  if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
+                    if (Math.abs(smallTop - holdCellBottom) < sideSnapDistance) {
                       tempModule.top = holdCellBottom + intvVer
                     }
-                  //가운데 -> 가운데
+
-                  if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) {
+                    //설치된 셀에 윗쪽에 스냅
-                    tempModule.left = holdCellCenterX - Number((width / 2).toFixed(1))
+                    if (Math.abs(smallTop - holdCellTop) < sideSnapDistance) {
+                      tempModule.top = holdCellTop
                     }
-                  //왼쪽 -> 가운데
+                  } else {
-                  if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) {
+                    //흐름방향 west, east
-                    tempModule.left = holdCellCenterX
+
-                  }
+                    //가운데 가운데
-                  // 오른쪽 -> 가운데
-                  if (Math.abs(smallRight - holdCellCenterX) < snapDistance) {
-                    tempModule.left = holdCellCenterX - width
-                  }
-                  //세로 가운데 -> 가운데
                     if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) {
-                    tempModule.top = holdCellCenterY - Number((height / 2).toFixed(1))
+                      tempModule.top = holdCellCenterY - toFixedWithoutRounding(width / 2, 2)
+                    }
+
+                    //위쪽 -> 가운데
+                    if (Math.abs(smallTop - holdCellCenterY) < snapDistance) {
+                      // console.log('holdCellCenterX', holdCellCenterX)
+                      // console.log('smallLeft', smallLeft)
+
+                      // console.log('모듈 센터에 스냅')
+                      tempModule.top = holdCellCenterY + intvHor / 2
+
+                      // console.log('tempModule.left', tempModule.left)
+                    }
+                    // 밑 -> 가운데
+                    if (Math.abs(smallBottom - holdCellCenterY) < snapDistance) {
+                      tempModule.top = holdCellCenterY - height - intvHor / 2
+                    }
+
+                    //설치된 셀에 좌측에 스냅
+                    if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
+                      // console.log('모듈 좌측 스냅')
+                      tempModule.left = holdCellLeft - width - intvHor
+                    }
+
+                    //설치된 셀에 우측에 스냅
+                    if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
+                      // console.log('모듈 우측 스냅')
+                      tempModule.left = holdCellRight + intvHor
+                    }
+                    //설치된 셀에 위쪽에 스냅
+                    if (Math.abs(smallBottom - holdCellTop) < sideSnapDistance) {
+                      tempModule.top = holdCellTop - height - intvVer
+                    }
+
+                    //설치된 셀에 밑쪽에 스냅
+                    if (Math.abs(smallTop - holdCellBottom) < sideSnapDistance) {
+                      tempModule.top = holdCellBottom + intvVer
+                    }
+
+                    //설치된 셀에 윗쪽에 스냅
+                    if (Math.abs(smallTop - holdCellTop) < sideSnapDistance) {
+                      tempModule.top = holdCellTop
+                    }
+
+                    if (Math.abs(smallLeft - holdCellLeft) < snapDistance) {
+                      tempModule.left = holdCellLeft
+                    }
                   }
-                  // //위쪽 -> 가운데
-                  // if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) {
-                  //   tempModule.top = holdCellCenterY
-                  // }
-                  // //아랫쪽 -> 가운데
-                  // if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) {
-                  //   tempModule.top = holdCellCenterY - height
-                  // }
                 })
               }
 
@@ -1162,33 +1225,15 @@ export function useModuleBasicSetting(tabNum) {
               }
 
               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)) < trestleSnapDistance) {
                   tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width / 2
                 }
-
-                // 모듈오른쪽이 세로중앙선에 붙게 스냅
-                // if (Math.abs(smallRight - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < trestleSnapDistance) {
-                //   tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width * tempModule.scaleX
-                // }
               } else {
                 // 모듈이 가로중앙선에 스냅
                 if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < trestleSnapDistance) {
                   tempModule.top = bigCenterY - tempModule.height / 2
                 }
-
-                // if (Math.abs(smallTop - (trestleTop + moduleSetupSurfaces[i].height / 2)) < trestleSnapDistance) {
-                //   tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2
-                // }
-                // 모듈 밑면이 가로중앙선에 스냅
-                // if (Math.abs(smallBottom - (trestleTop + moduleSetupSurfaces[i].height / 2)) < trestleSnapDistance) {
-                //   tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - tempModule.height * tempModule.scaleY
-                // }
               }
 
               tempModule.setCoords()
@@ -1234,15 +1279,16 @@ export function useModuleBasicSetting(tabNum) {
                   : tmpHeight
 
               //그려진 가이드 라인의 포인트를 기준으로 시작점을 만든다
-              if (flowDirection === 'south') {
+              //남쪽에 처마방향이나 북쪽에 용마루면
+              if ((flowDirection === 'south' && setupLocation === 'eaves') || (flowDirection === 'north' && setupLocation === 'ridge')) {
                 //남
                 startX = toFixedWithoutRounding(tempModule.left, 1)
                 startY = toFixedWithoutRounding(tempModule.top + tempModule.height, 1)
 
                 moduleOptions.fill = module.color
 
-                let col = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].col
+                let col = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].col
-                let row = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].row
+                let row = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].row
                 let tempCol = col
 
                 for (let i = 0; i < row; i++) {
@@ -1257,7 +1303,7 @@ export function useModuleBasicSetting(tabNum) {
                   let tempHeightMargin = i === 0 ? 0 : i * intvVer
 
                   //치도리 설치시 컬럼 조정
-                  if (isModuleChidoriSetup) {
+                  if (isChidori) {
                     //치도리면 짝수열은 안으로 넣기
                     tempCol = installedHeightModuleCount % 2 === 0 ? col : col - 1
                   }
@@ -1267,7 +1313,7 @@ export function useModuleBasicSetting(tabNum) {
                     let tempX = startX + j * width
                     let tempWidthMargin = j === 0 ? 0 : j * intvHor
 
-                    if (isModuleChidoriSetup) {
+                    if (isChidori) {
                       chidoriMargin = installedHeightModuleCount % 2 === 0 ? 0 : width / 2 + intvHor
                     }
 
@@ -1324,14 +1370,6 @@ export function useModuleBasicSetting(tabNum) {
                         swalFire({ text: getMessage('module.place.overlab') })
                         return
                       }
-                      // getModuleStatistics()
-                      // } else {
-                      // swalFire({ text: getMessage('module.place.overlab') })
-                      // return
-                      // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
-                      // canvas?.add(tempModule)
-                      // canvas.renderAll()
-                      // }
                     }
                   }
 
@@ -1339,17 +1377,21 @@ export function useModuleBasicSetting(tabNum) {
                     ++installedHeightModuleCount
                   }
                 }
-              } else if (flowDirection === 'north') {
+                //북쪽에 처마거나 남쪽에 용마루일경우
+              } else if ((flowDirection === 'north' && setupLocation === 'eaves') || (flowDirection === 'south' && setupLocation === 'ridge')) {
                 //북북
                 startX = toFixedWithoutRounding(tempModule.left + tempModule.width, 1)
                 startY = toFixedWithoutRounding(tempModule.top, 1)
 
                 moduleOptions.fill = module.color
 
-                const col = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].col
+                const col = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].col
-                const row = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].row
+                const row = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].row
+                let tempCol = col //치도리시 하나 빼려고 임시로
+
                 for (let i = 0; i < row; i++) {
                   let tempY = startY + i * height
+                  let isInstalled = false
 
                   if (index > 0) {
                     //두번째 모듈일때 마지막 설치 지점
@@ -1358,15 +1400,24 @@ export function useModuleBasicSetting(tabNum) {
 
                   let tempHeightMargin = i === 0 ? 0 : i * intvVer
 
-                  for (let j = 0; j < col; j++) {
+                  if (isChidori) {
+                    tempCol = installedHeightModuleCount % 2 === 0 ? col : col - 1
+                  }
+
+                  for (let j = 0; j < tempCol; j++) {
+                    let chidoriMargin = 0
                     let tempX = startX - j * width
                     let tempWidthMargin = j === 0 ? 0 : j * intvHor
 
+                    if (isChidori) {
+                      chidoriMargin = installedHeightModuleCount % 2 === 0 ? 0 : width / 2 + intvHor
+                    }
+
                     let rectPoints = [
-                      { x: tempX - tempWidthMargin, y: tempY + height + tempHeightMargin },
+                      { x: tempX - tempWidthMargin - chidoriMargin, y: tempY + height + tempHeightMargin },
-                      { x: tempX - tempWidthMargin, y: tempY + tempHeightMargin },
+                      { x: tempX - tempWidthMargin - chidoriMargin, y: tempY + tempHeightMargin },
-                      { x: tempX - width - tempWidthMargin, y: tempY + tempHeightMargin },
+                      { x: tempX - width - tempWidthMargin - chidoriMargin, y: tempY + tempHeightMargin },
-                      { x: tempX - width - tempWidthMargin, y: tempY + height + tempHeightMargin },
+                      { x: tempX - width - tempWidthMargin - chidoriMargin, y: tempY + height + tempHeightMargin },
                     ]
 
                     tempModule.set({ points: rectPoints })
@@ -1386,8 +1437,6 @@ export function useModuleBasicSetting(tabNum) {
                         let manualModule = new QPolygon(tempModule.points, {
                           ...moduleOptions,
                           moduleInfo: module,
-                          // left: toFixedWithoutRounding(tempX + tempWidthMargin, 1),
-                          // top: toFixedWithoutRounding(tempY - height - tempHeightMargin, 1),
                           width: toFixedWithoutRounding(width, 1),
                           height: toFixedWithoutRounding(height, 1),
                         })
@@ -1401,6 +1450,10 @@ export function useModuleBasicSetting(tabNum) {
                           manualDrawModules.push(manualModule)
                           setModuleStatisticsData()
                           installedLastHeightCoord = tempY + height + tempHeightMargin
+
+                          if (j === 0) {
+                            isInstalled = true
+                          }
                         } else {
                           //디버깅용
                           // manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
@@ -1411,44 +1464,52 @@ export function useModuleBasicSetting(tabNum) {
                         swalFire({ text: getMessage('module.place.overlab') })
                         return
                       }
-                      // getModuleStatistics()
-                      // } else {
-                      // swalFire({ text: getMessage('module.place.overlab') })
-                      // return
-                      // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
-                      // canvas?.add(tempModule)
-                      // canvas.renderAll()
-                      // }
                     }
                   }
+                  if (isInstalled) {
+                    ++installedHeightModuleCount
                   }
-              } else if (flowDirection === 'west') {
+                }
+                //서쪽에 처마 또는 동쪽의 용마루일경우
+              } else if ((flowDirection === 'west' && setupLocation === 'eaves') || (flowDirection === 'east' && setupLocation === 'ridge')) {
                 startX = toFixedWithoutRounding(tempModule.left, 1)
                 startY = toFixedWithoutRounding(tempModule.top, 1)
                 moduleOptions.fill = module.color
 
-                const col = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].col
+                const col = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].col
-                const row = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].row
+                const row = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].row
+                let tempCol = col //치도리시 하나 빼려고 임시로
 
                 for (let i = 0; i < row; i++) {
                   //옆으로 올라가는거라 height가 아니고 width로 변경
                   let tempX = startX + i * width
                   let tempWidthMargin = i === 0 ? 0 : i * intvHor
+                  let isInstalled = false
 
                   if (index > 0) {
                     //두번째 모듈일때 마지막 설치 지점 //명칭은 그대로 쓴다
                     tempX = index > 0 && i === 0 ? installedLastHeightCoord + intvHor : installedLastHeightCoord
                   }
 
-                  for (let j = 0; j < col; j++) {
+                  if (isChidori) {
+                    tempCol = installedHeightModuleCount % 2 === 0 ? col : col - 1
+                  }
+
+                  for (let j = 0; j < tempCol; j++) {
                     let tempY = startY + j * height
                     let tempHeightMargin = j === 0 ? 0 : j * intvVer
 
+                    let chidoriMargin = 0
+
+                    if (isChidori) {
+                      chidoriMargin = installedHeightModuleCount % 2 === 0 ? 0 : height / 2 + intvVer
+                    }
+
                     let rectPoints = [
-                      { x: tempX + tempWidthMargin, y: tempY + tempHeightMargin },
+                      { x: tempX + tempWidthMargin, y: tempY + tempHeightMargin + chidoriMargin },
-                      { x: tempX + tempWidthMargin, y: tempY + height + tempHeightMargin },
+                      { x: tempX + tempWidthMargin, y: tempY + height + tempHeightMargin + chidoriMargin },
-                      { x: tempX + width + tempWidthMargin, y: tempY + height + tempHeightMargin },
+                      { x: tempX + width + tempWidthMargin, y: tempY + height + tempHeightMargin + chidoriMargin },
-                      { x: tempX + width + tempWidthMargin, y: tempY + tempHeightMargin },
+                      { x: tempX + width + tempWidthMargin, y: tempY + tempHeightMargin + chidoriMargin },
                     ]
 
                     tempModule.set({ points: rectPoints })
@@ -1468,8 +1529,6 @@ export function useModuleBasicSetting(tabNum) {
                         let manualModule = new QPolygon(tempModule.points, {
                           ...moduleOptions,
                           moduleInfo: module,
-                          // left: toFixedWithoutRounding(tempX + tempWidthMargin, 1),
-                          // top: toFixedWithoutRounding(tempY - height - tempHeightMargin, 1),
                           width: toFixedWithoutRounding(width, 1),
                           height: toFixedWithoutRounding(height, 1),
                         })
@@ -1483,6 +1542,10 @@ export function useModuleBasicSetting(tabNum) {
                           manualDrawModules.push(manualModule)
                           setModuleStatisticsData()
                           installedLastHeightCoord = tempX + width + tempWidthMargin
+
+                          if (j === 0) {
+                            isInstalled = true
+                          }
                         } else {
                           //디버깅용
                           // manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
@@ -1493,44 +1556,51 @@ export function useModuleBasicSetting(tabNum) {
                         swalFire({ text: getMessage('module.place.overlab') })
                         return
                       }
-                      // getModuleStatistics()
-                      // } else {
-                      // swalFire({ text: getMessage('module.place.overlab') })
-                      // return
-                      // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
-                      // canvas?.add(tempModule)
-                      // canvas.renderAll()
-                      // }
                     }
                   }
+                  if (isInstalled) {
+                    ++installedHeightModuleCount
                   }
-              } else {
+                }
+                //동쪽의 처마 또는 서쪽의 용마루일경우
+              } else if ((flowDirection === 'east' && setupLocation === 'eaves') || (flowDirection === 'west' && setupLocation === 'ridge')) {
                 startX = toFixedWithoutRounding(tempModule.left + width, 1)
                 startY = toFixedWithoutRounding(tempModule.top + height, 1)
                 moduleOptions.fill = module.color
 
-                const col = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].col
+                const col = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].col
-                const row = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].row
+                const row = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].row
+                let tempCol = col //치도리시 하나 빼려고 임시로
 
                 for (let i = 0; i < row; i++) {
                   //옆으로 올라가는거라 height가 아니고 width로 변경
                   let tempX = startX - i * width
                   let tempWidthMargin = i === 0 ? 0 : i * intvHor
+                  let isInstalled = false
 
                   if (index > 0) {
                     //두번째 모듈일때 마지막 설치 지점 //명칭은 그대로 쓴다
                     tempX = index > 0 && i === 0 ? installedLastHeightCoord - intvHor : installedLastHeightCoord
                   }
 
-                  for (let j = 0; j < col; j++) {
+                  if (isChidori) {
+                    tempCol = installedHeightModuleCount % 2 === 0 ? col : col - 1
+                  }
+
+                  for (let j = 0; j < tempCol; j++) {
+                    let chidoriMargin = 0
                     let tempY = startY - j * height
                     let tempHeightMargin = j === 0 ? 0 : j * intvVer
 
+                    if (isChidori) {
+                      chidoriMargin = installedHeightModuleCount % 2 === 0 ? 0 : height / 2 + intvVer
+                    }
+
                     let rectPoints = [
-                      { x: tempX - tempWidthMargin, y: tempY - tempHeightMargin },
+                      { x: tempX - tempWidthMargin, y: tempY - tempHeightMargin - chidoriMargin },
-                      { x: tempX - tempWidthMargin, y: tempY - height - tempHeightMargin },
+                      { x: tempX - tempWidthMargin, y: tempY - height - tempHeightMargin - chidoriMargin },
-                      { x: tempX - width - tempWidthMargin, y: tempY - height - tempHeightMargin },
+                      { x: tempX - width - tempWidthMargin, y: tempY - height - tempHeightMargin - chidoriMargin },
-                      { x: tempX - width - tempWidthMargin, y: tempY - tempHeightMargin },
+                      { x: tempX - width - tempWidthMargin, y: tempY - tempHeightMargin - chidoriMargin },
                     ]
 
                     tempModule.set({ points: rectPoints })
@@ -1550,8 +1620,6 @@ export function useModuleBasicSetting(tabNum) {
                         let manualModule = new QPolygon(tempModule.points, {
                           ...moduleOptions,
                           moduleInfo: module,
-                          // left: toFixedWithoutRounding(tempX + tempWidthMargin, 1),
-                          // top: toFixedWithoutRounding(tempY - height - tempHeightMargin, 1),
                           width: toFixedWithoutRounding(width, 1),
                           height: toFixedWithoutRounding(height, 1),
                         })
@@ -1565,6 +1633,10 @@ export function useModuleBasicSetting(tabNum) {
                           manualDrawModules.push(manualModule)
                           setModuleStatisticsData()
                           installedLastHeightCoord = tempX - width - tempWidthMargin
+
+                          if (j === 0) {
+                            isInstalled = true
+                          }
                         } else {
                           //디버깅용
                           // manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
@@ -1575,65 +1647,14 @@ export function useModuleBasicSetting(tabNum) {
                         swalFire({ text: getMessage('module.place.overlab') })
                         return
                       }
-                      // getModuleStatistics()
-                      // } else {
-                      // swalFire({ text: getMessage('module.place.overlab') })
-                      // return
-                      // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
-                      // canvas?.add(tempModule)
-                      // canvas.renderAll()
-                      // }
                     }
                   }
+                  if (isInstalled) {
+                    ++installedHeightModuleCount
+                  }
                 }
               }
             })
-            //도머 객체를 가져옴
-            // if (batchObjects) {
-            //   batchObjects.forEach((object) => {
-            //     let dormerTurfPolygon = polygonToTurfPolygon(object, true)
-            //     const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule])) //겹치는지 확인
-            //     //겹치면 안됨
-            //     if (intersection) {
-            //       swalFire({ text: getMessage('module.place.overobject') })
-            //       isIntersection = false
-            //     }
-            //   })
-            // }
-
-            // if (!isIntersection) return
-
-            //   tempModule.setCoords() //좌표 재정렬
-            //   if (turf.booleanContains(turfPolygon, tempTurfModule) || turf.booleanWithin(tempTurfModule, turfPolygon)) {
-            //     //마우스 클릭시 set으로 해당 위치에 셀을 넣음
-            //     const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인
-            //     if (!isOverlap) {
-            //       canvas?.remove(tempModule)
-
-            //       //안겹치면 넣는다
-            //       // tempModule.setCoords()
-            //       moduleOptions.surfaceId = trestlePolygon.id
-
-            //       // console.log('tempModule.points', tempModule.points)
-
-            //       let manualModule = new QPolygon(tempModule.points, {
-            //         ...moduleOptions,
-            //         moduleInfo: checkedModule[0],
-            //         left: Number(tempModule.left.toFixed(1)),
-            //         top: Number(tempModule.top.toFixed(1)),
-            //         width: Number(tempModule.width.toFixed(1)),
-            //         height: Number(tempModule.height.toFixed(1)),
-            //       })
-            //       canvas?.add(manualModule)
-            //       manualDrawModules.push(manualModule)
-            //       setModuleStatisticsData()
-            //       // getModuleStatistics()
-            //     } else {
-            //       swalFire({ text: getMessage('module.place.overlab') })
-            //     }
-            //   } else {
-            //     swalFire({ text: getMessage('module.place.out') })
-            //   }
           }
         })
       }
@@ -1663,8 +1684,8 @@ export function useModuleBasicSetting(tabNum) {
       return
     }
 
-    const isChidori = placementRef.isChidori.current === 'true' ? true : false
+    const isChidori = moduleSetupOption.isChidori
-    const setupLocation = placementRef.setupLocation.current
+    const setupLocation = moduleSetupOption.setupLocation
     const isMaxSetup = false
     // const isMaxSetup = placementRef.isMaxSetup.current === 'true' ? true : false
 
@@ -2784,7 +2805,7 @@ export function useModuleBasicSetting(tabNum) {
         ) //도머s 객체
 
       let moduleOptions = {
-        fill: '#BFFD9F',
+        fill: checkedModule[0].color,
         stroke: 'black',
         strokeWidth: 0.3,
         selectable: true, // 선택 가능하게 설정
@@ -2817,14 +2838,15 @@ export function useModuleBasicSetting(tabNum) {
               const angle = calculateAngle(points1, points2)
 
               //변별로 선택으로 되어있을때 모듈면을 회전시키기
-              const targetdSurface = moduleSetupSurfaces.filter((surface) => surface.surfaceId === obj.surfaceId)[0]
+              const targetSurface = moduleSetupSurfaces.filter((surface) => surface.surfaceId === obj.surfaceId)[0]
-              targetdSurface.angle = -angle
+              targetSurface.angle = -angle
               //변별로 선택되어있는 지붕도 회전시키기
-              const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === targetdSurface.parentId)[0]
+              const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === targetSurface.parentId)[0]
               targetRoof.angle = -angle
 
               targetRoof.fire('modified')
-              targetdSurface.fire('modified')
+              targetSurface.fire('modified')
+              drawDirectionArrow(targetRoof)
             }
             canvas.remove(obj)
           })
@@ -2833,6 +2855,10 @@ export function useModuleBasicSetting(tabNum) {
             const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === surface.parentId)[0]
             if (targetRoof) targetRoof.angle = -compasDeg
             surface.angle = -compasDeg
+
+            targetRoof.fire('modified')
+            surface.fire('modified')
+            drawDirectionArrow(targetRoof)
           })
         }
         canvas.renderAll()
@@ -2896,131 +2922,158 @@ export function useModuleBasicSetting(tabNum) {
               /**
                * 스냅기능
                */
-              let snapDistance = 10
+              let snapDistance = flowDirection === 'south' || flowDirection === 'north' ? 70 : 40
-              let cellSnapDistance = 50
+              let sideSnapDistance = 15
+              let trestleSnapDistance = 15
 
-              let intvHor = flowDirection === 'south' || flowDirection === 'north' ? 1 : 3
+              let intvVer = flowDirection === 'south' || flowDirection === 'north' ? 10 : 30
-              let intvVer = flowDirection === 'south' || flowDirection === 'north' ? 3 : 1
+              let intvHor = flowDirection === 'south' || flowDirection === 'north' ? 30 : 10
 
-              const trestleLeft = moduleSetupSurfaces[i].left
+              const trestleLeft = toFixedWithoutRounding(moduleSetupSurfaces[i].left, 2) - toFixedWithoutRounding(moduleSetupSurfaces[i].width / 2, 2)
-              const trestleTop = moduleSetupSurfaces[i].top
+              const trestleTop = toFixedWithoutRounding(moduleSetupSurfaces[i].top, 2) - toFixedWithoutRounding(moduleSetupSurfaces[i].height / 2, 2)
-              const trestleRight = trestleLeft + moduleSetupSurfaces[i].width * moduleSetupSurfaces[i].scaleX
+              const trestleRight =
-              const trestleBottom = trestleTop + moduleSetupSurfaces[i].height * moduleSetupSurfaces[i].scaleY
+                toFixedWithoutRounding(moduleSetupSurfaces[i].left, 2) + toFixedWithoutRounding(moduleSetupSurfaces[i].width / 2, 2)
+              const trestleBottom =
+                toFixedWithoutRounding(moduleSetupSurfaces[i].top, 2) + toFixedWithoutRounding(moduleSetupSurfaces[i].height / 2, 2)
               const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2
 
-              // 작은 폴리곤의 경계 좌표 계산
+              // 이동하는 모듈의 경계 좌표
-              const smallLeft = tempModule.left
+              const smallLeft = toFixedWithoutRounding(tempModule.left, 2)
-              const smallTop = tempModule.top
+              const smallTop = toFixedWithoutRounding(tempModule.top, 2)
-              const smallRight = smallLeft + tempModule.width * tempModule.scaleX
+              const smallRight = smallLeft + toFixedWithoutRounding(tempModule.width, 2)
-              const smallBottom = smallTop + tempModule.height * tempModule.scaleY
+              const smallBottom = smallTop + toFixedWithoutRounding(tempModule.height, 2)
-              const smallCenterX = smallLeft + (tempModule.width * tempModule.scaleX) / 2
+              const smallCenterX = smallLeft + toFixedWithoutRounding(tempModule.width / 2, 2)
-              const smallCenterY = smallTop + (tempModule.height * tempModule.scaleX) / 2
+              const smallCenterY = smallTop + toFixedWithoutRounding(tempModule.height / 2, 2)
 
               /**
                * 미리 깔아놓은 셀이 있을때 셀에 흡착됨
                */
               if (manualDrawModules) {
                 manualDrawModules.forEach((cell) => {
-                  const holdCellLeft = cell.left
+                  const holdCellLeft = toFixedWithoutRounding(cell.left, 2)
-                  const holdCellTop = cell.top
+                  const holdCellTop = toFixedWithoutRounding(cell.top, 2)
-                  const holdCellRight = holdCellLeft + cell.width * cell.scaleX
+                  const holdCellRight = holdCellLeft + toFixedWithoutRounding(cell.width, 2)
-                  const holdCellBottom = holdCellTop + cell.height * cell.scaleY
+                  const holdCellBottom = holdCellTop + toFixedWithoutRounding(cell.height, 2)
-                  const holdCellCenterX = holdCellLeft + (cell.width * cell.scaleX) / 2
+                  const holdCellCenterX = holdCellLeft + toFixedWithoutRounding(cell.width / 2, 2)
-                  const holdCellCenterY = holdCellTop + (cell.height * cell.scaleY) / 2
+                  const holdCellCenterY = holdCellTop + toFixedWithoutRounding(cell.height / 2, 2)
+
+                  //흐름방향따라 달라야 한다.
+                  if (flowDirection === 'south' || flowDirection === 'north') {
+                    if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) {
+                      //움직이는 모듈 가운데 -> 설치 모듈 가운데
+                      tempModule.left = holdCellCenterX - toFixedWithoutRounding(width / 2, 2)
+                    }
 
                     //설치된 셀에 좌측에 스냅
                     if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
+                      // console.log('모듈 좌측 스냅')
                       tempModule.left = holdCellLeft - width - intvHor
                     }
 
                     //설치된 셀에 우측에 스냅
                     if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
+                      // console.log('모듈 우측 스냅')
                       tempModule.left = holdCellRight + intvHor
                     }
-
                     //설치된 셀에 위쪽에 스냅
-                  if (Math.abs(smallBottom - holdCellTop) < snapDistance) {
+                    if (Math.abs(smallBottom - holdCellTop) < sideSnapDistance) {
                       tempModule.top = holdCellTop - height - intvVer
                     }
 
                     //설치된 셀에 밑쪽에 스냅
-                  if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
+                    if (Math.abs(smallTop - holdCellBottom) < sideSnapDistance) {
                       tempModule.top = holdCellBottom + intvVer
                     }
-                  //가운데 -> 가운데
+
-                  if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) {
+                    //설치된 셀에 윗쪽에 스냅
-                    tempModule.left = holdCellCenterX - width / 2
+                    if (Math.abs(smallTop - holdCellTop) < sideSnapDistance) {
+                      tempModule.top = holdCellTop
                     }
-                  //왼쪽 -> 가운데
+                  } else {
-                  if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) {
+                    //흐름방향 west, east
-                    tempModule.left = holdCellCenterX
+
+                    //가운데 가운데
+                    if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) {
+                      tempModule.top = holdCellCenterY - toFixedWithoutRounding(width / 2, 2)
                     }
-                  // 오른쪽 -> 가운데
+
-                  if (Math.abs(smallRight - holdCellCenterX) < cellSnapDistance) {
+                    //위쪽 -> 가운데
-                    tempModule.left = holdCellCenterX - width
+                    if (Math.abs(smallTop - holdCellCenterY) < snapDistance) {
+                      // console.log('holdCellCenterX', holdCellCenterX)
+                      // console.log('smallLeft', smallLeft)
+
+                      // console.log('모듈 센터에 스냅')
+                      tempModule.top = holdCellCenterY + intvHor / 2
+
+                      // console.log('tempModule.left', tempModule.left)
+                    }
+                    // 밑 -> 가운데
+                    if (Math.abs(smallBottom - holdCellCenterY) < snapDistance) {
+                      tempModule.top = holdCellCenterY - height - intvHor / 2
+                    }
+
+                    //설치된 셀에 좌측에 스냅
+                    if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
+                      // console.log('모듈 좌측 스냅')
+                      tempModule.left = holdCellLeft - width - intvHor
+                    }
+
+                    //설치된 셀에 우측에 스냅
+                    if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
+                      // console.log('모듈 우측 스냅')
+                      tempModule.left = holdCellRight + intvHor
+                    }
+                    //설치된 셀에 위쪽에 스냅
+                    if (Math.abs(smallBottom - holdCellTop) < sideSnapDistance) {
+                      tempModule.top = holdCellTop - height - intvVer
+                    }
+
+                    //설치된 셀에 밑쪽에 스냅
+                    if (Math.abs(smallTop - holdCellBottom) < sideSnapDistance) {
+                      tempModule.top = holdCellBottom + intvVer
+                    }
+
+                    //설치된 셀에 윗쪽에 스냅
+                    if (Math.abs(smallTop - holdCellTop) < sideSnapDistance) {
+                      tempModule.top = holdCellTop
+                    }
+
+                    if (Math.abs(smallLeft - holdCellLeft) < snapDistance) {
+                      tempModule.left = holdCellLeft
                     }
-                  //세로 가운데 -> 가운데
-                  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) {
+              if (Math.abs(smallTop - trestleTop) < trestleSnapDistance) {
-                tempModule.top = trestleTop
+                tempModule.top = trestleTop + 1
               }
 
               // 아래쪽 변에 스냅
-              if (Math.abs(smallTop + tempModule.height * tempModule.scaleY - (trestleTop + moduleSetupSurfaces[i].height)) < snapDistance) {
+              if (Math.abs(smallBottom - trestleBottom) < trestleSnapDistance) {
-                tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height * tempModule.scaleY
+                tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height - 1
               }
 
               // 왼쪽변에 스냅
-              if (Math.abs(smallLeft - trestleLeft) < snapDistance) {
+              if (Math.abs(smallLeft - trestleLeft) < trestleSnapDistance) {
-                tempModule.left = trestleLeft
+                tempModule.left = trestleLeft + 1
               }
               //오른쪽 변에 스냅
-              if (Math.abs(smallRight - trestleRight) < snapDistance) {
+              if (Math.abs(smallRight - trestleRight) < trestleSnapDistance) {
-                tempModule.left = trestleRight - tempModule.width * tempModule.scaleX
+                tempModule.left = trestleRight - tempModule.width - 1
               }
 
               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) {
+                if (Math.abs(smallCenterX - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < trestleSnapDistance) {
-                  tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - (tempModule.width * tempModule.scaleX) / 2
+                  tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width / 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) {
+                if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < trestleSnapDistance) {
                   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()
@@ -3185,6 +3238,7 @@ export function useModuleBasicSetting(tabNum) {
           targetRoof.setCoords()
           targetSurface.setCoords()
           moduleSetupSurfaces.push(targetSurface)
+          drawDirectionArrow(targetSurface)
         }
         canvas.remove(obj)
       })
@@ -3193,6 +3247,10 @@ export function useModuleBasicSetting(tabNum) {
         const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === surface.parentId)[0]
         if (targetRoof) targetRoof.angle = -compasDeg
         surface.angle = -compasDeg
+
+        targetRoof.fire('modified')
+        surface.fire('modified')
+        drawDirectionArrow(surface)
       })
     }
     canvas.renderAll()
@@ -3275,8 +3333,6 @@ export function useModuleBasicSetting(tabNum) {
       return turf.booleanContains(turfModuleSetupSurface, squarePolygon) || turf.booleanWithin(squarePolygon, turfModuleSetupSurface)
     }
 
-    let moduleGroup = []
-
     const flatRoofDownFlowSetupModule = (
       surfaceMaxLines,
       maxLengthLine,

src/store/canvasAtom.js

@@ -390,9 +390,12 @@ export const isManualModuleLayoutSetupState = atom({
   default: false,
 })
 
-export const isModuleChidoriSetupState = atom({
+export const moduleSetupOptionState = atom({
-  key: 'isModuleChidoriSetupState',
+  key: 'moduleSetupOptionState',
-  default: false,
+  default: {
+    isChidori: false, //치조 안함
+    setupLocation: 'eaves', //처마
+  },
 })
 
 export const toggleManualSetupModeState = atom({