모듈 설치 간격 적용

src/common/common.js

@@ -169,6 +169,7 @@ export const SAVE_KEY = [
   'supFitQty',
   'supFitIntvlPct',
   'rackLen',
+  'trestleDetail',
 ]
 
 export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]

src/components/floor-plan/CanvasMenu.jsx

@@ -78,7 +78,6 @@ export default function CanvasMenu(props) {
   const { commonFunctions } = useCommonUtils()
 
   const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
-  const { restoreModuleInstArea } = useModuleBasicSetting()
 
   const [addedRoofs, setAddedRoofsState] = useRecoilState(addedRoofsState)
   const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState)
@@ -162,10 +161,6 @@ export default function CanvasMenu(props) {
         setType('outline')
         break
       case 3:
-        if (type === 'module') {
-          restoreModuleInstArea()
-        }
-
         setType('surface')
         break
       case 4:

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

@@ -5,8 +5,8 @@ import Module from '@/components/floor-plan/modal/basic/step/Module'
 import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchModule'
 import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
 import Placement from '@/components/floor-plan/modal/basic/step/Placement'
-import { useRecoilValue } from 'recoil'
+import { useRecoilValue, useRecoilState } from 'recoil'
-import { canvasSettingState } from '@/store/canvasAtom'
+import { canvasSettingState, isManualModuleSetupState } from '@/store/canvasAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
@@ -19,6 +19,8 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
   const canvasSetting = useRecoilValue(canvasSettingState)
   const orientationRef = useRef(null)
   const { initEvent } = useEvent()
+  const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
+
   // const { initEvent } = useContext(EventContext)
   const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup } = useModuleBasicSetting()
   const handleBtnNextStep = () => {
@@ -38,6 +40,14 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
     setupLocation: useRef('south'),
   }
 
+  const handleManualModuleSetup = () => {
+    setIsManualModuleSetup(!isManualModuleSetup)
+  }
+
+  useEffect(() => {
+    manualModuleSetup()
+  }, [isManualModuleSetup])
+
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lx-2`}>
@@ -83,7 +93,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
               <>
                 {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && (
                   <>
-                    <button className="btn-frame modal mr5" onClick={manualModuleSetup}>
+                    <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={() => autoModuleSetup(placementRef)}>

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

@@ -235,7 +235,6 @@ export default function Module({ setTabNum }) {
                   index={index}
                   addRoof={roof}
                   roofTab={index}
-                  moduleCommonSelectionData={moduleSelectionData.common}
                   moduleConstructionSelectionData={moduleSelectionData.roofConstructions[index]}
                   setModuleSelectionData={setModuleSelectionData}
                   tempModuleSelectionData={tempModuleSelectionData}

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

@@ -1,24 +1,22 @@
 import { useEffect, useState, useRef } from 'react'
 import { useRecoilValue } from 'recoil'
-import { canvasSettingState, pitchSelector, pitchTextSelector } from '@/store/canvasAtom'
+import { pitchTextSelector } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
-import { moduleSelectionInitParamsState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { moduleSelectionInitParamsState } from '@/store/selectedModuleOptions'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import QSelectBox from '@/components/common/select/QSelectBox'
 
 export default function ModuleTabContents({
   addRoof,
   roofTab,
-  moduleCommonSelectionData,
   moduleConstructionSelectionData,
   setModuleSelectionData,
   tempModuleSelectionData,
   setTempModuleSelectionData,
 }) {
   const { getMessage } = useMessage()
-  const canvasSetting = useRecoilValue(canvasSettingState) //캔버스 기본 셋팅
   const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재`
   const globalPitchText = useRecoilValue(pitchTextSelector) //피치 텍스트
 
@@ -61,18 +59,23 @@ export default function ModuleTabContents({
     setTrestleList([]) //가대메이커
     setConstMthdList([]) //공법 초기화
     setRoofBaseList([]) //지붕밑바탕 초기화
+    setConstructionList([]) //공법 초기화
   }
 
   //가대메이커 변경
   const handleChangeTrestle = (option) => {
     setSelectedTrestle(option) //선택값  저장
     setConstructionParams({ ...trestleParams, trestleMkrCd: option.trestleMkrCd, constMthdCd: '', roofBaseCd: '' })
+    setConstMthdList([]) //공법 초기화
+    setRoofBaseList([]) //지붕밑바탕 초기화
+    setConstructionList([]) //공법 초기화
   }
 
   //공법 변경
   const handleChangeConstMthd = (option) => {
     setSelectedConstMthd(option) //선택된값 저장
     setRoofBaseParams({ ...trestleParams, trestleMkrCd: selectedTrestle.trestleMkrCd, constMthdCd: option.constMthdCd, roofBaseCd: '' })
+    setConstructionList([]) //공법 초기화
   }
 
   //지붕밑바탕변경
@@ -127,6 +130,7 @@ export default function ModuleTabContents({
   }
 
   const handleConstruction = (index) => {
+    if (index > -1) {
       const isPossibleIndex = constructionRef.current
         .map((el, i) => (el.classList.contains('white') || el.classList.contains('blue') ? i : -1))
         .filter((index) => index !== -1)
@@ -149,6 +153,11 @@ export default function ModuleTabContents({
       setCvrYn(selectedConstruction.cvrYn)
       setSnowGdPossYn(selectedConstruction.snowGdPossYn)
       setSelectedConstruction(selectedConstruction)
+    } else {
+      constructionRef.current.forEach((ref) => {
+        ref.classList.remove('blue')
+      })
+    }
   }
 
   useEffect(() => {

src/hooks/module/useModuleBasicSetting.js

@@ -1,6 +1,6 @@
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { canvasState, checkedModuleState, selectedModuleState } from '@/store/canvasAtom'
+import { canvasState, checkedModuleState, isManualModuleSetupState, selectedModuleState } from '@/store/canvasAtom'
-import { rectToPolygon, setSurfaceShapePattern, polygonToTurfPolygon } from '@/util/canvas-util'
+import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon } from '@/util/canvas-util'
 import { basicSettingState, roofDisplaySelector } from '@/store/settingAtom'
 import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils'
 import { QPolygon } from '@/components/fabric/QPolygon'
@@ -23,13 +23,14 @@ export function useModuleBasicSetting() {
   const roofDisplay = useRecoilValue(roofDisplaySelector)
   const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState)
   const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState)
-  const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent()
+  const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent, removeMouseEvent } = useEvent()
   const { swalFire } = useSwal()
   const canvasSetting = useRecoilValue(canvasSettingState)
   const compasDeg = useRecoilValue(compasDegAtom)
   const { setSurfaceShapePattern } = useRoofFn()
   const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
   const checkedModule = useRecoilValue(checkedModuleState)
+  const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
 
   useEffect(() => {
     // console.log('basicSetting', basicSetting)
@@ -67,6 +68,7 @@ export function useModuleBasicSetting() {
       setSurfaceShapePattern(roof, roofDisplay.column, false) //패턴 변경
     })
   }
+
   const makeModuleInstArea = () => {
     //지붕 객체 반환
     const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')
@@ -109,6 +111,7 @@ export function useModuleBasicSetting() {
         originX: 'center',
         originY: 'center',
         modules: [],
+        roofMaterial: roof.roofMaterial,
         // angle: -compasDeg,
       })
 
@@ -129,8 +132,6 @@ export function useModuleBasicSetting() {
 
   //설치 범위 지정 클릭 이벤트
   const toggleSelection = (setupSurface) => {
-    console.log('setupSurface', setupSurface)
-
     const isExist = selectedModuleInstSurfaceArray.some((obj) => obj.parentId === setupSurface.parentId)
     //최초 선택일때
     if (!isExist) {
@@ -171,13 +172,18 @@ export function useModuleBasicSetting() {
    * 확인 후 셀을 이동시킴
    */
   const manualModuleSetup = () => {
+    // console.log('isManualModuleSetup', isManualModuleSetup)
+
+    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
       }
 
@@ -222,10 +228,17 @@ export function useModuleBasicSetting() {
             trestlePolygon = moduleSetupSurfaces[i]
             manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨
             flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향
+
             const moduleWidth = Number(checkedModule[0].longAxis) / 10
             const moduleHeight = Number(checkedModule[0].shortAxis) / 10
-          let width = flowDirection === 'south' || flowDirection === 'north' ? moduleWidth : moduleHeight
+            let tmpWidth = flowDirection === 'south' || flowDirection === 'north' ? moduleWidth : moduleHeight
-          let height = flowDirection === 'south' || flowDirection === 'north' ? moduleHeight : moduleWidth
+            let tmpHeight = flowDirection === 'south' || flowDirection === 'north' ? moduleHeight : moduleWidth
+            let { width, height } = calculateVisibleModuleHeight(
+              tmpWidth,
+              tmpHeight,
+              getDegreeByChon(moduleSetupSurfaces[i].roofMaterial.pitch),
+              flowDirection,
+            ) //각도 적용
 
             const points = [
               { x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
@@ -268,6 +281,15 @@ export function useModuleBasicSetting() {
               let snapDistance = 10
               let cellSnapDistance = 20
 
+              let intvHor =
+                flowDirection === 'south' || flowDirection === 'north'
+                  ? moduleSetupSurfaces[i].trestleDetail.moduleIntvlHor
+                  : moduleSetupSurfaces[i].trestleDetail.moduleIntvlVer
+              let intvVer =
+                flowDirection === 'south' || flowDirection === 'north'
+                  ? moduleSetupSurfaces[i].trestleDetail.moduleIntvlVer
+                  : moduleSetupSurfaces[i].trestleDetail.moduleIntvlHor
+
               const trestleLeft = moduleSetupSurfaces[i].left
               const trestleTop = moduleSetupSurfaces[i].top
               const trestleRight = trestleLeft + moduleSetupSurfaces[i].width * moduleSetupSurfaces[i].scaleX
@@ -296,22 +318,22 @@ export function useModuleBasicSetting() {
 
                   //설치된 셀에 좌측에 스냅
                   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) {
@@ -469,6 +491,11 @@ export function useModuleBasicSetting() {
           }
         })
       }
+    } else {
+      removeMouseEvent('mouse:up')
+      removeMouseEvent('mouse:move')
+      canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) //움직일때 일단 지워가면서 움직임
+    }
   }
 
   //자동 모듈 설치(그리드 방식)
@@ -511,8 +538,6 @@ export function useModuleBasicSetting() {
       }
     })
 
-    // console.log('moduleIsSetup', moduleIsSetup)
-
     // if (moduleIsSetup.length > 0) {
     //   swalFire({ text: 'alert 아이콘 테스트입니다.', icon: 'error' })
     // }
@@ -620,23 +645,29 @@ export function useModuleBasicSetting() {
      * @returns {object} 모듈의 너비와 높이
      */
     const getModuleWidthHeight = (maxLengthLine, moduleSetupSurface, module) => {
-      let width =
+      let tmpWidth =
         (maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? Number(module.longAxis) : Number(module.shortAxis)) / 10
-      let height =
+      let tmpHeight =
         (maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? Number(module.shortAxis) : Number(module.longAxis)) / 10
 
       //배치면때는 방향쪽으로 패널이 넓게 누워져야함
       if (moduleSetupSurface.flowDirection !== undefined) {
-        width =
+        tmpWidth =
           (moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north'
             ? Number(module.longAxis)
             : Number(module.shortAxis)) / 10
-        height =
+        tmpHeight =
           (moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north'
             ? Number(module.shortAxis)
             : Number(module.longAxis)) / 10
       }
-      return { width, height }
+
+      return calculateVisibleModuleHeight(
+        tmpWidth,
+        tmpHeight,
+        getDegreeByChon(moduleSetupSurface.roofMaterial.pitch),
+        moduleSetupSurface.flowDirection,
+      ) //각도 적
     }
 
     const getFlowLines = (moduleSetupSurface, module) => {
@@ -649,13 +680,19 @@ export function useModuleBasicSetting() {
           right: leftRightFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'right'),
         }
       }
-
-      console.log('flowLines', flowLines)
-
       return flowLines
     }
 
-    const downFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, isCenter = false) => {
+    const downFlowSetupModule = (
+      surfaceMaxLines,
+      maxLengthLine,
+      moduleSetupArray,
+      moduleSetupSurface,
+      containsBatchObjects,
+      isCenter = false,
+      intvHor,
+      intvVer,
+    ) => {
       let setupModule = []
 
       checkedModule.forEach((module, index) => {
@@ -705,9 +742,9 @@ export function useModuleBasicSetting() {
         if (isMaxSetup) totalWidth = totalWidth * 2 //최대배치시 2배로 늘려서 반씩 검사하기위함
 
         for (let j = 0; j < diffTopEndPoint; j++) {
-          bottomMargin = 0
+          bottomMargin = j === 0 ? 0 : intvVer * j
           for (let i = 0; i <= totalWidth; i++) {
-            leftMargin = 0
+            leftMargin = i === 0 ? 0 : intvHor * i
             chidoriLength = 0
             if (isChidori) {
               chidoriLength = j % 2 === 0 ? 0 : width / 2
@@ -757,7 +794,16 @@ export function useModuleBasicSetting() {
       })
     }
 
-    const leftFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, isCenter = false) => {
+    const leftFlowSetupModule = (
+      surfaceMaxLines,
+      maxLengthLine,
+      moduleSetupArray,
+      moduleSetupSurface,
+      containsBatchObjects,
+      isCenter = false,
+      intvHor,
+      intvVer,
+    ) => {
       let setupModule = []
 
       checkedModule.forEach((module, index) => {
@@ -794,23 +840,23 @@ export function useModuleBasicSetting() {
         let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint)
 
         let tempMaxHeight = isMaxSetup ? height / 2 : height //최대배치인지 확인하려고 넣음
-        if (isMaxSetup) totalHeight = totalHeight * 2 //최대배치시 2배로 늘려서 반씩 검사
+        if (isMaxSetup) totalHeight = totalHeight * 2 //최대배치시 2배로 늘려 서 반씩 검사
 
         for (let i = 0; i <= totalWidth; i++) {
-          bottomMargin = 0
+          bottomMargin = i === 0 ? 0 : intvHor * i
           for (let j = 0; j < totalHeight; j++) {
-            leftMargin = 0
+            leftMargin = j === 0 ? 0 : intvVer * j
             chidoriLength = 0
             if (isChidori) {
               chidoriLength = i % 2 === 0 ? 0 : height / 2
             }
 
             square = [
-              [startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin - chidoriLength],
+              [startPoint.x1 + width * i + bottomMargin, startRowPoint + tempMaxHeight * j + leftMargin - chidoriLength],
-              [startPoint.x1 + width * i + width + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin - chidoriLength],
+              [startPoint.x1 + width * i + width + bottomMargin, startRowPoint + tempMaxHeight * j + leftMargin - chidoriLength],
-              [startPoint.x1 + width * i + width + leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin - chidoriLength],
+              [startPoint.x1 + width * i + width + bottomMargin, startRowPoint + tempMaxHeight * j + height + leftMargin - chidoriLength],
-              [startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin - chidoriLength],
+              [startPoint.x1 + width * i + bottomMargin, startRowPoint + tempMaxHeight * j + height + leftMargin - chidoriLength],
-              [startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin - chidoriLength],
+              [startPoint.x1 + width * i + bottomMargin, startRowPoint + tempMaxHeight * j + leftMargin - chidoriLength],
             ]
 
             let squarePolygon = turf.polygon([square])
@@ -847,7 +893,16 @@ export function useModuleBasicSetting() {
       })
     }
 
-    const topFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, isCenter = false) => {
+    const topFlowSetupModule = (
+      surfaceMaxLines,
+      maxLengthLine,
+      moduleSetupArray,
+      moduleSetupSurface,
+      containsBatchObjects,
+      isCenter = false,
+      intvHor,
+      intvVer,
+    ) => {
       let setupModule = []
 
       checkedModule.forEach((module, index) => {
@@ -896,14 +951,17 @@ export function useModuleBasicSetting() {
         let tempMaxWidth = isMaxSetup ? width / 2 : width //최대배치인지 확인하려고 넣음
         if (isMaxSetup) diffRightEndPoint = diffRightEndPoint * 2 //최대배치시 2배로 늘려서 반씩 검사하기위함
 
+        startColPoint = Math.round(startColPoint - intvHor * diffRightEndPoint)
+
         for (let j = 0; j < diffBottomEndPoint; j++) {
-          bottomMargin = 0
+          bottomMargin = j === 0 ? 0 : intvVer * j
           for (let i = 0; i < diffRightEndPoint; i++) {
-            leftMargin = 0
+            leftMargin = i === 0 ? 0 : intvHor * i
             chidoriLength = 0
             if (isChidori) {
               chidoriLength = j % 2 === 0 ? 0 : width / 2
             }
+
             square = [
               [startColPoint + tempMaxWidth * i + chidoriLength + leftMargin, startPoint.y1 + height * j + bottomMargin],
               [startColPoint + tempMaxWidth * i + chidoriLength + leftMargin, startPoint.y1 + height * j + height + bottomMargin],
@@ -947,7 +1005,16 @@ export function useModuleBasicSetting() {
       })
     }
 
-    const rightFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, isCenter = false) => {
+    const rightFlowSetupModule = (
+      surfaceMaxLines,
+      maxLengthLine,
+      moduleSetupArray,
+      moduleSetupSurface,
+      containsBatchObjects,
+      isCenter = false,
+      intvHor,
+      intvVer,
+    ) => {
       let setupModule = []
 
       checkedModule.forEach((module, index) => {
@@ -986,20 +1053,21 @@ export function useModuleBasicSetting() {
         if (isMaxSetup) totalHeight = totalHeight * 2 //최대배치시 2배로 늘려서 반씩 검사
 
         for (let i = 0; i <= totalWidth; i++) {
-          bottomMargin = 0
+          bottomMargin = i === 0 ? 0 : -(intvHor * i)
           for (let j = 0; j < totalHeight; j++) {
-            leftMargin = 0
+            leftMargin = j === 0 ? 0 : intvVer * j
+
             chidoriLength = 0
             if (isChidori) {
               chidoriLength = i % 2 === 0 ? 0 : height / 2
             }
 
             square = [
-              [startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin + chidoriLength],
+              [startPoint.x1 - width * i + bottomMargin, startRowPoint - intvHor + tempMaxHeight * j + leftMargin + chidoriLength],
-              [startPoint.x1 - width * i - width - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin + chidoriLength],
+              [startPoint.x1 - width * i - width + bottomMargin, startRowPoint - intvHor + tempMaxHeight * j + leftMargin + chidoriLength],
-              [startPoint.x1 - width * i - width - leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin + chidoriLength],
+              [startPoint.x1 - width * i - width + bottomMargin, startRowPoint - intvHor + tempMaxHeight * j + height + leftMargin + chidoriLength],
-              [startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin + chidoriLength],
+              [startPoint.x1 - width * i + bottomMargin, startRowPoint - intvHor + tempMaxHeight * j + height + leftMargin + chidoriLength],
-              [startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin + chidoriLength],
+              [startPoint.x1 - width * i + bottomMargin, startRowPoint - intvHor + tempMaxHeight * j + leftMargin + chidoriLength],
             ]
 
             let squarePolygon = turf.polygon([square])
@@ -1048,48 +1116,59 @@ export function useModuleBasicSetting() {
         return acc.length > cur.length ? acc : cur
       })
 
+      const flowDirection = moduleSetupSurface.flowDirection
+
+      let intvHor =
+        flowDirection === 'south' || flowDirection === 'north'
+          ? moduleSetupSurface.trestleDetail.moduleIntvlHor
+          : moduleSetupSurface.trestleDetail.moduleIntvlVer
+      let intvVer =
+        flowDirection === 'south' || flowDirection === 'north'
+          ? moduleSetupSurface.trestleDetail.moduleIntvlVer
+          : moduleSetupSurface.trestleDetail.moduleIntvlHor
+
       //처마면 배치
       if (setupLocation === 'eaves') {
         // 흐름방향이 남쪽일때
         if (moduleSetupSurface.flowDirection === 'south') {
-          downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
+          downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
         }
         if (moduleSetupSurface.flowDirection === 'west') {
-          leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
+          leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
         }
         if (moduleSetupSurface.flowDirection === 'east') {
-          rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
+          rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
         }
         if (moduleSetupSurface.flowDirection === 'north') {
-          topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
+          topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
         }
       } else if (setupLocation === 'ridge') {
         //용마루
         if (moduleSetupSurface.flowDirection === 'south') {
-          topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
+          topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
         }
         if (moduleSetupSurface.flowDirection === 'west') {
-          rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
+          rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
         }
         if (moduleSetupSurface.flowDirection === 'east') {
-          leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
+          leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
         }
         if (moduleSetupSurface.flowDirection === 'north') {
-          downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
+          downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
         }
       } else if (setupLocation === 'center') {
         //중가면
         if (moduleSetupSurface.flowDirection === 'south') {
-          downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true)
+          downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true, intvHor, intvVer)
         }
         if (moduleSetupSurface.flowDirection === 'west') {
-          leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true)
+          leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true, intvHor, intvVer)
         }
         if (moduleSetupSurface.flowDirection === 'east') {
-          rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true)
+          rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true, intvHor, intvVer)
         }
         if (moduleSetupSurface.flowDirection === 'north') {
-          topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true)
+          topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true, intvHor, intvVer)
         }
       }
 

src/hooks/module/useModulePlace.js

@@ -69,7 +69,7 @@ export function useModulePlace() {
               .getObjects()
               .filter((surface) => surface.name === 'moduleSetupSurface' && surface.parentId === roof.id)
               .forEach((surface) => {
-                surface.set({ trestleDetail: detail.data })
+                surface.set({ trestleDetail: detail.data, roofMaterial: roof.roofMaterial })
               })
           }
         })

src/store/canvasAtom.js

@@ -379,3 +379,8 @@ export const checkedModuleState = atom({
   default: [],
   dangerouslyAllowMutability: true,
 })
+
+export const isManualModuleSetupState = atom({
+  key: 'isManualModuleSetupState',
+  default: false,
+})

src/util/canvas-util.js

@@ -1009,3 +1009,25 @@ export function polygonToTurfPolygon(object, current = false) {
     },
   )
 }
+
+export function calculateVisibleModuleHeight(sourceWidth, sourceHeight, angle, direction) {
+  // 각도를 라디안으로 변환
+  const radians = (angle * Math.PI) / 180
+
+  let visibleWidth = sourceWidth // 가로는 기울어도 변하지 않음
+  let visibleHeight = sourceHeight * Math.cos(radians) // 세로는 각도에 따라 줄어듦
+
+  // 가로와 세로의 보이는 크기 계산
+  if (direction === 'south' || direction === 'north') {
+    visibleWidth = sourceWidth // 가로는 기울어도 변하지 않음
+    visibleHeight = sourceHeight * Math.cos(radians) // 세로는 각도에 따라 줄어듦
+  } else {
+    visibleWidth = sourceWidth * Math.cos(radians) // 가로는 기울어도 변하지 않음
+    visibleHeight = sourceHeight // 세로는 각도에 따라 줄어듦
+  }
+
+  return {
+    width: Number(visibleWidth.toFixed(1)),
+    height: Number(visibleHeight.toFixed(1)), // 소수점 두 자리로 고정
+  }
+}