Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

# Conflicts: # src/components/common/select/QSelectBox.jsx # src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
2024-12-26 09:39:30 +09:00 · 2024-12-26 09:39:30 +09:00 · f5d374c443
commit f5d374c443
parent 4323ccc03f 23a023812b
24 changed files with 798 additions and 268 deletions
--- a/.gitignore
+++ b/.gitignore
@ -40,4 +40,5 @@ next-env.d.ts

 #lock files
 yarn.lock
-package-lock.json
+package-lock.json
+certificates
--- a/package.json
+++ b/package.json
@ -6,7 +6,8 @@
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "serve": "node server.js"
  },
  "dependencies": {
    "@nextui-org/react": "^2.4.2",
@ -21,7 +22,7 @@
    "js-cookie": "^3.0.5",
    "mathjs": "^13.0.2",
    "mssql": "^11.0.1",
-    "next": "14.2.14",
+    "next": "14.2.21",
    "next-international": "^1.2.4",
    "react": "^18",
    "react-chartjs-2": "^5.2.0",
--- a/server.js
+++ b/server.js
@ -0,0 +1,40 @@
+const http = require('http')
+const { parse } = require('url')
+const next = require('next')
+
+const https = require('https')
+const fs = require('fs')
+
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({ dev })
+const handle = app.getRequestHandler()
+
+const PORT = 3000
+
+const httpsOptions = {
+  key: fs.readFileSync('./certificates/key.pem'),
+  cert: fs.readFileSync('./certificates/cert.pem'),
+}
+
+app.prepare().then(() => {
+  http
+    .createServer((req, res) => {
+      const parsedUrl = parse(req.url, true)
+      handle(req, res, parsedUrl)
+    })
+    .listen(PORT, (err) => {
+      if (err) throw err
+      console.log(`> Ready on http://localhost:${PORT}`)
+    })
+
+  // https 서버 추가
+  https
+    .createServer(httpsOptions, (req, res) => {
+      const parsedUrl = parse(req.url, true)
+      handle(req, res, parsedUrl)
+    })
+    .listen(PORT + 1, (err) => {
+      if (err) throw err
+      console.log(`> HTTPS: Ready on https://localhost:${PORT + 1}`)
+    })
+})
--- a/src/app/layout.js
+++ b/src/app/layout.js
@ -50,7 +50,6 @@ export default async function RootLayout({ children }) {
      isLoggedIn: session.isLoggedIn,
    }
  }
-
  if (!headerPathname.includes('/login') && !session.isLoggedIn) {
    redirect('/login')
  }
--- a/src/components/Playground.jsx
+++ b/src/components/Playground.jsx
@ -24,6 +24,7 @@ import QSelect from './common/select/QSelect'
 import QPagination from './common/pagination/QPagination'

 import { trestleRequestModels, constructionRequestModels, trestleDetailRequestModels } from '@/models/apiModels'
+import QSelectBox from './common/select/QSelectBox'

 export default function Playground() {
  const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
@ -50,51 +51,8 @@ export default function Playground() {

  const [users, setUsers] = useState([])

-  const [trestleRequestData, setTrestleRequestData] = useState(trestleRequestModels)
-  const [constructionRequestData, setConstructionRequestData] = useState(constructionRequestModels)
-  const [trestleDetailRequestData, setTrestleDetailRequestData] = useState(trestleDetailRequestModels)
-
  useEffect(() => {
    console.log('textInput:', textInput)
-    setTrestleRequestData({
-      moduleTpCd: '',
-      roofMatlCd: '',
-      raftBaseCd: '',
-      trestleMkrCd: '',
-      constMthdCd: '',
-      roofBaseCd: '',
-    })
-
-    setConstructionRequestData({
-      moduleTpCd: 'testData_1',
-      roofMatlCd: 'testData_2',
-      trestleMkrCd: 'testData_3',
-      constMthdCd: 'testData_4',
-      roofBaseCd: 'testData_5',
-      illuminationTp: 'testData_6',
-      instHt: 'testData_7',
-      stdWindSpeed: 'testData_8',
-      stdSnowLd: 'testData_9',
-      inclCd: 'testData_10',
-      raftBaseCd: 'testData_11',
-      roofPitch: 30,
-    })
-
-    setTrestleDetailRequestData({
-      moduleTpCd: 'testData_1',
-      roofMatlCd: 'testData_2',
-      trestleMkrCd: 'testData_3',
-      constMthdCd: 'testData_4',
-      roofBaseCd: 'testData_5',
-      illuminationTp: 'testData_6',
-      instHt: 'testData_7',
-      stdWindSpeed: 'testData_8',
-      stdSnowLd: 'testData_9',
-      inclCd: 'testData_10',
-      constTp: 'testData_11',
-      mixMatlNo: 10,
-      roofPitch: 20,
-    })
  }, [textInput])
  useEffect(() => {
    console.log('numberInput:', numberInput)
@ -199,6 +157,71 @@ export default function Playground() {
    console.log('users:', users)
  }, [users])

+  const codes = [
+    {
+      clHeadCd: '203800',
+      clCode: 'HEI_455',
+      clCodeNm: '세로　455mm이하',
+      clPriority: 1,
+      name: '세로　455mm이하',
+      id: 'HEI_455',
+    },
+    {
+      clHeadCd: '203800',
+      clCode: 'HEI_500',
+      clCodeNm: '세로　500mm이하',
+      clPriority: 2,
+      name: '세로　500mm이하',
+      id: 'HEI_500',
+    },
+    {
+      clHeadCd: '203800',
+      clCode: 'HEI_606',
+      clCodeNm: '세로　606mm이하',
+      clPriority: 3,
+      name: '세로　606mm이하',
+      id: 'HEI_606',
+    },
+    {
+      clHeadCd: '203800',
+      clCode: 'WID_606',
+      clCodeNm: '가로　606mm이하',
+      clPriority: 4,
+      name: '가로　606mm이하',
+      id: 'WID_606',
+    },
+    {
+      clHeadCd: '203800',
+      clCode: 'ETC',
+      clCodeNm: '기타',
+      clPriority: 5,
+      name: '기타',
+      id: 'ETC',
+    },
+  ]
+
+  const myData = {
+    roofMatlCd: 'ROOF_ID_WA_53A',
+    roofMatlNm: '화와 A',
+    roofMatlNmJp: '和瓦A',
+    widAuth: 'R',
+    widBase: '265.000',
+    lenAuth: 'R',
+    lenBase: '235.000',
+    roofPchAuth: null,
+    roofPchBase: null,
+    raftAuth: 'C',
+    raftBaseCd: 'HEI_455',
+    id: 'ROOF_ID_WA_53A',
+    name: '화와 A',
+    selected: true,
+    nameJp: '和瓦A',
+    length: 235,
+    width: 265,
+    layout: 'P',
+    hajebichi: null,
+  }
+
  return (
    <>
      <div className="container mx-auto p-4 m-4 border">
@ -215,7 +238,7 @@ export default function Playground() {
          <button
            className="btn-frame deepgray"
            onClick={() => {
-              getModuleTypeItemList('ROOF_ID_HIRA_SEME')
+              getModuleTypeItemList(['ROOF_ID_HIRA_SEME', 'ROOF_ID_ROOGA'])
            }}
          >
            모듈 타입별 아이템 목록 조회 API 호출
@ -223,7 +246,7 @@ export default function Playground() {
          <button
            className="btn-frame deepgray"
            onClick={() => {
-              getTrestleList(trestleRequestData)
+              getTrestleList({ moduleTpCd: '', roofMatlCd: '', raftBaseCd: '', trestleMkrCd: '', constMthdCd: '', roofBaseCd: '' }) //임시 데이터
            }}
          >
            가대 목록 조회 API 호출
@ -231,7 +254,21 @@ export default function Playground() {
          <button
            className="btn-frame deepgray"
            onClick={() => {
-              getConstructionList(constructionRequestData)
+              getConstructionList({
+                //임시 데이터
+                moduleTpCd: 'testData_1',
+                roofMatlCd: 'testData_2',
+                trestleMkrCd: 'testData_3',
+                constMthdCd: 'testData_4',
+                roofBaseCd: 'testData_5',
+                illuminationTp: 'testData_6',
+                instHt: 'testData_7',
+                stdWindSpeed: 'testData_8',
+                stdSnowLd: 'testData_9',
+                inclCd: 'testData_10',
+                raftBaseCd: '',
+                roofPitch: 30,
+              })
            }}
          >
            시공법 목록 조회 API 호출
@ -239,7 +276,22 @@ export default function Playground() {
          <button
            className="btn-frame deepgray"
            onClick={() => {
-              getTrestleDetailList(trestleDetailRequestData)
+              getTrestleDetailList({
+                //임시 데이터
+                moduleTpCd: 'testData_1',
+                roofMatlCd: 'testData_2',
+                trestleMkrCd: 'testData_3',
+                constMthdCd: 'testData_4',
+                roofBaseCd: 'testData_5',
+                illuminationTp: 'testData_6',
+                instHt: 'testData_7',
+                stdWindSpeed: 'testData_8',
+                stdSnowLd: 'testData_9',
+                inclCd: 'testData_10',
+                constTp: 'testData_11',
+                mixMatlNo: 30,
+                roofPitch: 0,
+              })
            }}
          >
            가대 상세 조회 API 호출
@ -442,6 +494,9 @@ export default function Playground() {
            axios post test
          </Button>
        </div>
+        <div className="my-2">
+          <QSelectBox options={codes} value={myData} sourceKey="id" targetKey="raftBaseCd" showKey="clCodeNm" />
+        </div>
      </div>
    </>
  )
--- a/src/components/auth/Login.jsx
+++ b/src/components/auth/Login.jsx
@ -5,7 +5,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useRecoilState } from 'recoil'
 import { useAxios } from '@/hooks/useAxios'
-import { setSession } from '@/lib/authActions'
+import { setSession, login } from '@/lib/authActions'
 import { useMessage } from '@/hooks/useMessage'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { sessionStore } from '@/store/commonAtom'
@ -36,7 +36,7 @@ export default function Login() {
                const result = { ...response, storeLvl: response.groupId === '60000' ? '1' : '2', pwdInitYn: 'Y' }
                setSession(result)
                setSessionState(result)
-                router.push('/')
+                login()
              } else {
                router.push('/login')
              }
@ -87,7 +87,6 @@ export default function Login() {
    }
    await promisePost({ url: '/api/login/v1.0/login', data: param })
      .then((res) => {
-        console.log('🚀 ~ .then ~ res:', res)
        if (res) {
          if (res.data.result.resultCode === 'S') {
            setSession(res.data.data)
@ -98,7 +97,8 @@ export default function Login() {
            } else {
              Cookies.remove('chkLoginId')
            }
-            router.push('/')
+            // router.push('/')
+            login()
          } else {
            alert(res.data.result.resultMsg)
          }
--- a/src/components/common/select/QSelectBox.jsx
+++ b/src/components/common/select/QSelectBox.jsx
@ -1,10 +1,56 @@
 'use client'
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { useOnClickOutside } from 'usehooks-ts'

-export default function QSelectBox({ title = '', options, onChange, value, disabled = false, params = {} }) {
+/**
+ *
+ * @param {string} title - 선택 제목 (선택이 없을때 보여질 값)
+ * @param {array} options - 선택 옵션 객체 {}
+ * @param {function} onChange - 선택 변경 함수
+ * @param {object} value - 선택 값 객체 {}
+ * @param {boolean} disabled - 선택 비활성화 여부
+ * @param {string} sourceKey - options에 있는 키
+ * @param {string} targetKey - value에 있는 키
+ * @param {string} showKey - options 있는 키중 보여줄 키
+ * @param {object} params - 추가 파라미터
+ * @returns
+ */
+export default function QSelectBox({
+  title = '',
+  options,
+  onChange,
+  value,
+  disabled = false,
+  sourceKey = '',
+  targetKey = '',
+  showKey = '',
+  params = {},
+}) {
+  /**
+   * 초기 상태 처리
+   * useState 초기 값으로 사용해야 해서 useState 보다 위에 작성
+   * @returns {string} 초기 상태
+   */
+  const handleInitState = () => {
+    //title이 있으면 우선 보여준다(다른 키들 무시)
+    if (title !== '') {
+      return title
+    }
+
+    //value가 없으면 showKey가 있으면 우선 보여준다
+    if (showKey !== '' && !value) {
+      return options[0][showKey]
+    }
+
+    //value가 있으면 sourceKey와 targetKey를 비교하여 보여준다
+    if (showKey !== '' && value) {
+      const option = options.find((option) => option[sourceKey] === value[targetKey])
+      return option[showKey]
+    }
+  }
+
  const [openSelect, setOpenSelect] = useState(false)
-  const [selected, setSelected] = useState(title === '' && value ? value.name : title)
+  const [selected, setSelected] = useState(handleInitState())
  const ref = useRef(null)

  const handleClickSelectOption = (option) => {
@ -16,9 +62,9 @@ export default function QSelectBox({ title = '', options, onChange, value, disab
    setOpenSelect(false)
  }

-  useEffect(() => {
-    if (value) handleClickSelectOption(value)
-  }, [])
+  // useEffect(() => {
+  //   value && handleClickSelectOption(value)
+  // }, [value])

  useOnClickOutside(ref, handleClose)

@ -28,7 +74,7 @@ export default function QSelectBox({ title = '', options, onChange, value, disab
      <ul className="select-item-wrap">
        {options?.map((option, index) => (
          <li key={option.id || index} className="select-item" onClick={() => handleClickSelectOption(option)}>
-            <button key={option.id + 'btn'}>{option.name}</button>
+            <button key={option.id + 'btn'}>{showKey !== '' ? option[showKey] : option.name}</button>
          </li>
        ))}
      </ul>
--- a/src/components/floor-plan/modal/module/PanelEdit.jsx
+++ b/src/components/floor-plan/modal/module/PanelEdit.jsx
@ -3,21 +3,106 @@ import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { polygonToTurfPolygon } from '@/util/canvas-util'
+import { deepCopyArray } from '@/util/common-utils'
+import { canvasState } from '@/store/canvasAtom'
+import * as turf from '@turf/turf'
+import { POLYGON_TYPE } from '@/common/common'

 export default function PanelEdit(props) {
  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
  const { id, pos = contextPopupPosition, type = 'move', apply } = props
  const { closePopup } = usePopup()
  const [length, setLength] = useState(0)
-  const [direction, setDirection] = useState('')
+  const [direction, setDirection] = useState('up')
  const { getMessage } = useMessage()
+  const canvas = useRecoilValue(canvasState)

+  useEffect(() => {
+    if (canvas) {
+      const isSetupModules = canvas.getObjects().filter((obj) => obj.name === 'module') // selectedObj에 없는 객체만 필터링
+      isSetupModules.forEach((obj) => obj.set({ lockMovementX: false, lockMovementY: false }))
+    }
+  }, [])
+
+  //모듈 이동 적용
  const handleApply = () => {
-    apply()
+    contextModuleMove(length, direction)
    closePopup(id)
  }

+  const contextModuleMove = (length, direction) => {
+    const checkModuleDisjointSurface = (squarePolygon, turfModuleSetupSurface) => {
+      return turf.booleanContains(turfModuleSetupSurface, squarePolygon) || turf.booleanWithin(squarePolygon, turfModuleSetupSurface)
+    }
+
+    const selectedObj = canvas.getActiveObjects() //선택된 객체들을 가져옴
+    const selectedIds = selectedObj.map((obj) => obj.id) // selectedObj의 ID 추출
+
+    canvas.discardActiveObject() //선택해제
+
+    const isSetupModules = canvas.getObjects().filter((obj) => obj.name === 'module' && !selectedIds.includes(obj.id)) // selectedObj에 없는 객체만 필터링
+    const selectedModules = canvas.getObjects().filter((obj) => selectedIds.includes(obj.id) && obj.name === 'module') //선택했던 객체들만 가져옴
+    const setupSurface = canvas
+      .getObjects()
+      .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === selectedModules[0].surfaceId)[0]
+    const isOverlapArray = []
+    const isInSurfaceArray = []
+
+    if (selectedModules) {
+      canvas.remove(...selectedModules)
+
+      selectedModules.forEach((module) => {
+        module.set({
+          originCoords: {
+            left: module.left,
+            top: module.top,
+          },
+        })
+
+        if (direction === 'up') {
+          module.set({ ...module, top: module.top - Number(length) })
+        } else if (direction === 'down') {
+          module.set({ ...module, top: module.top + Number(length) })
+        } else if (direction === 'left') {
+          module.set({ ...module, left: module.left - Number(length) })
+        } else if (direction === 'right') {
+          module.set({ ...module, left: module.left + Number(length) })
+        }
+        module.setCoords()
+        canvas.renderAll()
+
+        //다른 모듈과 겹치는지 확인하는 로직
+        const isOverlap = isSetupModules.some((isSetupModule) =>
+          turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(isSetupModule, true)),
+        )
+        isOverlapArray.push(isOverlap)
+
+        const turfModuleSetupSurface = polygonToTurfPolygon(setupSurface, true)
+        const turfModule = polygonToTurfPolygon(module, true)
+
+        //나갔는지 확인하는 로직
+        const isInSurface = turf.booleanContains(turfModuleSetupSurface, turfModule) || turf.booleanWithin(turfModule, turfModuleSetupSurface)
+        isInSurfaceArray.push(isInSurface)
+      })
+
+      const isNotOverlap = isOverlapArray.some((isOverlap) => isOverlap) // true면 겹침
+      const isNotOutSurface = isInSurfaceArray.every((isOutSurface) => isOutSurface) //false면 밖으로 나감
+
+      //안겹치고 안나갔으면 이동시킨다 아니면 원래 위치로 돌려놓는다
+      if (isNotOverlap || !isNotOutSurface) {
+        selectedModules.forEach((module) => {
+          module.set({ ...module, left: module.originCoords.left, top: module.originCoords.top })
+          module.setCoords()
+        })
+      }
+
+      canvas.add(...selectedModules)
+      canvas.renderAll()
+    }
+  }
+
  return (
    <WithDraggable isShow={true} pos={pos}>
      <div className={`modal-pop-wrap xm mount`}>
@ -34,33 +119,33 @@ export default function PanelEdit(props) {
              <div className="grid-input-form">
                <span className="mr10">{getMessage('margin')}</span>
                <div className="input-grid mr5">
-                  <input type="text" className="input-origin" defaultValue={0} onClick={(e) => setLength(e.target.value)} />
+                  <input type="text" className="input-origin" defaultValue={0} onKeyUp={(e) => setLength(e.target.value)} />
                </div>
                <span>mm</span>
              </div>
              <div className="grid-direction">
                <button
-                  className={`direction up ${direction === '↑' ? 'act' : ''}`}
+                  className={`direction up ${direction === 'up' ? 'act' : ''}`}
                  onClick={() => {
-                    setDirection('↑')
+                    setDirection('up')
                  }}
                ></button>
                <button
-                  className={`direction down ${direction === '↓' ? 'act' : ''}`}
+                  className={`direction down ${direction === 'down' ? 'act' : ''}`}
                  onClick={() => {
-                    setDirection('↓')
+                    setDirection('down')
                  }}
                ></button>
                <button
-                  className={`direction left ${direction === '←' ? 'act' : ''}`}
+                  className={`direction left ${direction === 'left' ? 'act' : ''}`}
                  onClick={() => {
-                    setDirection('←')
+                    setDirection('left')
                  }}
                ></button>
                <button
-                  className={`direction right ${direction === '→' ? 'act' : ''}`}
+                  className={`direction right ${direction === 'right' ? 'act' : ''}`}
                  onClick={() => {
-                    setDirection('→')
+                    setDirection('right')
                  }}
                ></button>
              </div>
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@ -40,10 +40,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
    hajebichi: useRef(null),
  }

-  useEffect(() => {
-    console.log('🚀 ~ useEffect ~ currentRoofMaterial:', currentRoofMaterial)
-  }, [currentRoofMaterial])
-
  // 데이터를 최초 한 번만 조회
  useEffect(() => {
    fetchBasicSettings()
@ -53,8 +49,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set

  // Function to update the roofType and corresponding values
  const handleRoofTypeChange = (value) => {
-    console.log('🚀 ~ handleRoofTypeChange ~ value:', value)
-    console.log('🚀 ~ handleRoofTypeChange ~ roofMaterials:', roofMaterials)
    const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
    setCurrentRoofMaterial(selectedRoofMaterial)
  }
@ -87,6 +81,16 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
        roofInfo,
      },
      roofs: addedRoofs,
+      roofsData: {
+        roofApply: true,
+        roofSeq: 1,
+        roofMatlCd: currentRoofMaterial.roofMatlCd === null ? 'ROOF_ID_WA_53A' : currentRoofMaterial.roofMatlCd,
+        roofWidth: currentRoofMaterial.width === null ? 0 : currentRoofMaterial.width,
+        roofHeight: currentRoofMaterial.length === null ? 0 : currentRoofMaterial.length,
+        roofHajebichi: currentRoofMaterial.hajebichi === null ? 0 : currentRoofMaterial.hajebichi,
+        roofGap: currentRoofMaterial.raftBaseCd === null ? 'HEI_455' : currentRoofMaterial.raftBaseCd,
+        roofLayout: roofLayout,
+      },
    })
    basicSettingSave()
  }
@ -206,7 +210,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                        />
                        {/* <select
                          className="select-light dark"
-                          name="roofType"
+                          name="roofMatlCd"
                          ref={roofRef.roofCd}
                          value={currentRoofMaterial.roofMatlCd}
                          onChange={(e) => {
--- a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
@ -0,0 +1,198 @@
+import { useMessage } from '@/hooks/useMessage'
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'
+import { usePopup } from '@/hooks/usePopup'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { contextPopupPositionState } from '@/store/popupAtom'
+import { useEffect, useState } from 'react'
+import { basicSettingState } from '@/store/settingAtom'
+import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
+
+export default function ContextRoofAllocationSetting(props) {
+  const contextPopupPosition = useRecoilValue(contextPopupPositionState)
+  const { id, pos = contextPopupPosition } = props
+  const { getMessage } = useMessage()
+  const { closePopup } = usePopup()
+  const {
+    handleSave,
+    onAddRoofMaterial,
+    onDeleteRoofMaterial,
+    roofMaterials,
+    setCurrentRoofMaterial,
+    roofList,
+    handleDefaultRoofMaterial,
+    handleChangeRoofMaterial,
+    handleChangeRaft,
+    handleChangeLayout,
+    handleSaveContext,
+  } = useRoofAllocationSetting(id)
+
+  const { findCommonCode } = useCommonCode()
+  const [raftCodes, setRaftCodes] = useState([])
+  useEffect(() => {
+    const raftCodeList = findCommonCode('203800')
+    setRaftCodes(raftCodeList.map((raft) => ({ ...raft, value: raft.clCode, name: raft.clCodeNm })))
+  }, [])
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap ml mount`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
+          <button className="modal-close" onClick={() => closePopup(id)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
+          <div className="allocation-select-wrap">
+            <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
+            <div className="grid-select">
+              <QSelectBox
+                options={roofMaterials}
+                onChange={(e) => {
+                  const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
+                  setCurrentRoofMaterial(selected)
+                }}
+              />
+            </div>
+            <button
+              className="allocation-edit"
+              onClick={() => {
+                onAddRoofMaterial()
+              }}
+            >
+              <i className="edit-ico"></i>
+              {getMessage('modal.common.add')}
+            </button>
+          </div>
+          <div className="grid-option-wrap">
+            {roofList.map((roof, index) => {
+              return (
+                <div className="grid-option-box" key={index}>
+                  <div className="d-check-radio pop no-text">
+                    <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
+                    <label
+                      htmlFor="ra01"
+                      onClick={(e) => {
+                        handleDefaultRoofMaterial(index)
+                      }}
+                    ></label>
+                  </div>
+                  <div className="grid-option-block-form">
+                    <div className="block-box">
+                      <div className="flex-ment">
+                        <div className="grid-select" style={{ width: '248px' }}>
+                          <QSelectBox
+                            options={roofMaterials}
+                            value={roofMaterials.find((r) => r.id === roof.id)}
+                            onChange={(e) => handleChangeRoofMaterial(e, index)}
+                          />
+                        </div>
+                        {index === 0 && <span className="dec">基本屋根材</span>}
+                        {index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>}
+                      </div>
+                    </div>
+                    <div className="block-box">
+                      {roof.widAuth && (
+                        <div className="flex-ment">
+                          <span>W</span>
+                          <div className="input-grid" style={{ width: '100px' }}>
+                            <input type="text" className="input-origin block" defaultValue={roof.width} readOnly />
+                          </div>
+                          {/* <div className="select-wrap" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div> */}
+                        </div>
+                      )}
+                      {roof.lenAuth && (
+                        <div className="flex-ment">
+                          <span>L</span>
+                          <div className="input-grid" style={{ width: '100px' }}>
+                            <input type="text" className="input-origin block" defaultValue={roof.length} readOnly />
+                          </div>
+                          {/* <div className="select-wrap" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>235</option>
+                            </select>
+                          </div> */}
+                        </div>
+                      )}
+                      {roof.raftAuth && (
+                        <div className="flex-ment">
+                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                          <div className="grid-select" style={{ width: '84px' }}>
+                            {raftCodes.length > 0 && (
+                              <QSelectBox
+                                options={raftCodes.map((raft) => ({ name: raft.clCodeNm, value: raft.clCode }))}
+                                onChange={(e) => handleChangeRaft(e, index)}
+                                value={raftCodes.find((r) => r.value === roof.raft)}
+                              />
+                            )}
+                            {/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
+                              {raftCodes.map((raft, index) => {
+                                return (
+                                  <option key={index} value={raft.clCode}>
+                                    {raft.clCodeNm}
+                                  </option>
+                                )
+                              })}
+                            </select> */}
+                          </div>
+                        </div>
+                      )}
+                      {roof.roofPchAuth && (
+                        <div className="flex-ment">
+                          <span>{getMessage('hajebichi')}</span>
+                          <div className="input-grid" style={{ width: '84px' }}>
+                            <input type="text" className="input-origin block" value={parseInt(roof.hajebichi)} readOnly={roof.roofPchAuth === 'R'} />
+                          </div>
+                          {/* <div className="grid-select no-flx" style={{ width: '84px' }}>
+                            <select className="select-light dark" name="" id="">
+                              <option>265</option>
+                            </select>
+                          </div> */}
+                        </div>
+                      )}
+                    </div>
+                    <div className="block-box">
+                      <div className="icon-btn-wrap">
+                        <button
+                          className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
+                          onClick={() => {
+                            handleChangeLayout(ROOF_MATERIAL_LAYOUT.PARALLEL, index)
+                          }}
+                        >
+                          {getMessage('modal.roof.alloc.select.parallel')}
+                          <i className="allocation01"></i>
+                        </button>
+                        <button
+                          className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}
+                          onClick={() => {
+                            handleChangeLayout(ROOF_MATERIAL_LAYOUT.STAIRS, index)
+                          }}
+                        >
+                          {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal act" onClick={handleSaveContext}>
+              {getMessage('modal.roof.alloc.apply')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}
--- a/src/hooks/common/useCanvasConfigInitialize.js
+++ b/src/hooks/common/useCanvasConfigInitialize.js
@ -65,6 +65,7 @@ export function useCanvasConfigInitialize() {
    roofInit() //화면표시 초기화
    groupDimensionInit()
    reGroupInit() //그룹 객체 재그룹
+    moduleInit()
  }

  const gridInit = () => {
@ -196,5 +197,19 @@ export function useCanvasConfigInitialize() {
    })
  }

+  const moduleInit = () => {
+    canvas
+      .getObjects()
+      .filter((obj) => obj.name === 'module')
+      .forEach((obj) => {
+        obj.set({
+          selectable: true,
+          lockMovementX: false,
+          lockMovementY: false,
+        })
+        obj.setViewLengthText(false)
+      })
+  }
+
  return { canvasLoadInit, gridInit }
 }
--- a/src/hooks/common/useCommonUtils.js
+++ b/src/hooks/common/useCommonUtils.js
@ -603,8 +603,12 @@ export function useCommonUtils() {
  }

  const deleteObject = () => {
-    const obj = canvas?.getActiveObject()
-    commonDeleteText(obj)
+    const selectedObj = canvas?.getActiveObjects()
+    if (selectedObj) {
+      selectedObj.forEach((obj) => {
+        commonDeleteText(obj)
+      })
+    }
  }

  const moveObject = () => {
--- a/src/hooks/common/useMasterController.js
+++ b/src/hooks/common/useMasterController.js
@ -26,16 +26,15 @@ export function useMasterController() {

  /**
   * 모듈 타입별 아이템 목록 조회
-   * @param {지붕재 코드} roofMatlCd
+   * @param {지붕재 코드 목록} arrRoofMatlCd
   * @returns
   */
-  const getModuleTypeItemList = async (roofMatlCd) => {
-    if (!roofMatlCd || roofMatlCd.trim() === '') {
+  const getModuleTypeItemList = async (paramArr) => {
+    if (!Array.isArray(paramArr) || paramArr.length === 0 || paramArr.length > 4 || paramArr.some((item) => !item || item.trim() === '')) {
      swalFire({ text: getMessage('master.moduletypeitem.message.error'), type: 'alert', icon: 'error' })
      return null
    }
-    const param = { roofMatlCd: roofMatlCd }
-    const paramString = getQueryString(param)
+    const paramString = `?${paramArr.map((item) => `arrRoofMatlCd=${item}`).join('&')}`
    return await get({ url: `/api/v1/master/getModuleTypeItemList${paramString}` }).then((res) => {
      console.log('🚀🚀 ~ getModuleTypeItemList ~ res:', res)
      return res
--- a/src/hooks/common/useRoofFn.js
+++ b/src/hooks/common/useRoofFn.js
@ -1,17 +1,19 @@
 import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { selectedRoofMaterialSelector } from '@/store/settingAtom'
+import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'

 export function useRoofFn() {
  const canvas = useRecoilValue(canvasState)
  const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)

  //면형상 선택 클릭시 지붕 패턴 입히기
-  function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false) {
+  function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false, roofMaterial = selectedRoofMaterial) {
    const ratio = window.devicePixelRatio || 1
+    const layout = roofMaterial.layout

-    let width = selectedRoofMaterial.width / 10
-    let height = selectedRoofMaterial.length / 10
+    let width = (roofMaterial.width ?? 226) / 10
+    let height = (roofMaterial.length ?? 158) / 10
    let roofStyle = 2
    const inputPatternSize = { width: width, height: height } //임시 사이즈
    const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해
@ -31,7 +33,7 @@ export function useRoofFn() {
    const rows = Math.floor(patternSourceCanvas.height / patternSize.height)
    const cols = Math.floor(patternSourceCanvas.width / patternSize.width)

-    ctx.strokeStyle = mode === 'allPainted' ? 'black' : 'green'
+    ctx.strokeStyle = mode === 'allPainted' ? 'black' : 'blue'
    ctx.lineWidth = mode === 'allPainted' ? 1 : 0.4
    ctx.fillStyle = mode === 'allPainted' ? 'rgba(0, 159, 64, 0.7)' : 'white'

@ -58,7 +60,7 @@ export function useRoofFn() {
        }

        for (let row = 0; row <= rows; row++) {
-          const y = row * patternSize.height + (col % 2 === 0 ? 0 : offset)
+          const y = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? row * patternSize.height + (col % 2 === 0 ? 0 : offset) : row * patternSize.height
          const xStart = col * patternSize.width
          const xEnd = xStart + patternSize.width
          ctx.beginPath()
@ -83,7 +85,7 @@ export function useRoofFn() {
        }

        for (let col = 0; col <= cols; col++) {
-          const x = col * patternSize.width + (row % 2 === 0 ? 0 : offset)
+          const x = layout === ROOF_MATERIAL_LAYOUT.STAIRS ? col * patternSize.width + (row % 2 === 0 ? 0 : offset) : col * patternSize.width
          const yStart = row * patternSize.height
          const yEnd = yStart + patternSize.height

@ -136,6 +138,7 @@ export function useRoofFn() {

    polygon.set('fill', null)
    polygon.set('fill', pattern)
+    polygon.roofMaterial = roofMaterial
    polygon.canvas?.renderAll()
  }
  return { setSurfaceShapePattern }
--- a/src/hooks/module/useModuleBasicSetting.js
+++ b/src/hooks/module/useModuleBasicSetting.js
@ -1,7 +1,7 @@
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
-import { rectToPolygon } from '@/util/canvas-util'
-import { roofDisplaySelector } from '@/store/settingAtom'
+import { rectToPolygon, setSurfaceShapePattern, polygonToTurfPolygon } from '@/util/canvas-util'
+import { basicSettingState, roofDisplaySelector } from '@/store/settingAtom'
 import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { moduleSetupSurfaceState, moduleIsSetupState } from '@/store/canvasAtom'
@ -14,6 +14,7 @@ import { canvasSettingState } from '@/store/canvasAtom'
 import { compasDegAtom } from '@/store/orientationAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
+import { useEffect } from 'react'

 export function useModuleBasicSetting() {
  const canvas = useRecoilValue(canvasState)
@ -25,10 +26,37 @@ export function useModuleBasicSetting() {
  const canvasSetting = useRecoilValue(canvasSettingState)
  const compasDeg = useRecoilValue(compasDegAtom)
  const { setSurfaceShapePattern } = useRoofFn()
+  const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
+
+  useEffect(() => {
+    // console.log('basicSetting', basicSetting)
+    if (canvas) {
+      canvas.selection = true
+      canvas.selectionFullyContained = true
+      // canvas.on('selection:created', (e) => {
+      //   console.log('selection:created', e.selected)
+      // })
+    }
+  }, [])

  // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
  let selectedModuleInstSurfaceArray = []

+  const moduleOptions = {
+    fill: '#BFFD9F',
+    stroke: 'black',
+    strokeWidth: 0.1,
+    selectable: true, // 선택 가능하게 설정
+    lockMovementX: true, // X 축 이동 잠금
+    lockMovementY: true, // Y 축 이동 잠금
+    lockRotation: true, // 회전 잠금
+    lockScalingX: true, // X 축 크기 조정 잠금
+    lockScalingY: true, // Y 축 크기 조정 잠금
+    parentId: moduleSetupSurface.parentId,
+    surfaceId: moduleSetupSurface.id,
+    name: 'module',
+  }
+
  //모듈,회로에서 다른메뉴 -> 배치면으로 갈 경수 초기화
  const restoreModuleInstArea = () => {
    //설치면 삭제
@ -176,21 +204,6 @@ export function useModuleBasicSetting() {
          obj.name === BATCH_TYPE.SHADOW,
      ) //도머s 객체

-    const moduleOptions = {
-      fill: '#BFFD9F',
-      stroke: 'black',
-      strokeWidth: 0.1,
-      selectable: false, // 선택 가능하게 설정
-      lockMovementX: true, // X 축 이동 잠금
-      lockMovementY: true, // Y 축 이동 잠금
-      lockRotation: true, // 회전 잠금
-      lockScalingX: true, // X 축 크기 조정 잠금
-      lockScalingY: true, // Y 축 크기 조정 잠금
-      opacity: 0.8,
-      parentId: moduleSetupSurface.parentId,
-      name: 'module',
-    }
-
    if (moduleSetupSurfaces.length !== 0) {
      let tempModule
      let manualDrawModules = []
@ -229,7 +242,7 @@ export function useModuleBasicSetting() {
            tempModule = new fabric.Rect({
              fill: 'white',
              stroke: 'black',
-              strokeWidth: 1,
+              strokeWidth: 0.3,
              width: width,
              height: height,
              left: mousePoint.x - width / 2,
@ -240,7 +253,6 @@ export function useModuleBasicSetting() {
              lockRotation: true,
              lockScalingX: true,
              lockScalingY: true,
-              opacity: 0.8,
              name: 'tempModule',
              parentId: moduleSetupSurfaces[i].parentId,
            })
@ -440,6 +452,7 @@ export function useModuleBasicSetting() {
              canvas?.remove(tempModule)
              //안겹치면 넣는다
              // tempModule.setCoords()
+              moduleOptions.surfaceId = trestlePolygon.id
              let manualModule = new QPolygon(tempModule.points, { ...moduleOptions })
              canvas?.add(manualModule)
              manualDrawModules.push(manualModule)
@ -516,15 +529,15 @@ export function useModuleBasicSetting() {
    const moduleOptions = {
      fill: '#BFFD9F',
      stroke: 'black',
-      strokeWidth: 0.1,
-      selectable: false, // 선택 가능하게 설정
+      strokeWidth: 0.3,
+      selectable: true, // 선택 가능하게 설정
      lockMovementX: true, // X 축 이동 잠금
      lockMovementY: true, // Y 축 이동 잠금
      lockRotation: true, // 회전 잠금
      lockScalingX: true, // X 축 크기 조정 잠금
      lockScalingY: true, // Y 축 크기 조정 잠금
-      opacity: 0.8,
      parentId: moduleSetupSurface.parentId,
+      surfaceId: moduleSetupSurface.id,
      name: 'module',
    }

@ -593,7 +606,8 @@ export function useModuleBasicSetting() {
      return turf.booleanContains(turfModuleSetupSurface, squarePolygon) || turf.booleanWithin(squarePolygon, turfModuleSetupSurface)
    }

-    const downFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine, isCenter = false) => {
+    const downFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, isCenter = false) => {
+      const flowModuleLine = moduleSetupSurface.flowLines
      let startPoint = flowModuleLine.bottom

      if (isCenter) {
@ -637,9 +651,9 @@ export function useModuleBasicSetting() {
      if (isMaxSetup) totalWidth = totalWidth * 2 //최대배치시 2배로 늘려서 반씩 검사하기위함

      for (let j = 0; j < diffTopEndPoint; j++) {
-        bottomMargin = j === 0 ? 1 : 2
+        bottomMargin = 1 * j
        for (let i = 0; i <= totalWidth; i++) {
-          leftMargin = i === 0 ? 1 : 2
+          leftMargin = 1 * i
          chidoriLength = 0
          if (isChidori) {
            chidoriLength = j % 2 === 0 ? 0 : width / 2
@ -657,6 +671,7 @@ export function useModuleBasicSetting() {
          let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))

+          moduleOptions.surfaceId = moduleSetupSurface.id
          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
          canvas?.add(tempModule)
          moduleSetupArray.push(tempModule)
@ -664,7 +679,8 @@ export function useModuleBasicSetting() {
      }
    }

-    const leftFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, aaa, isCenter = false) => {
+    const leftFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, isCenter = false) => {
+      const flowModuleLine = moduleSetupSurface.flowLines
      let startPoint = flowModuleLine.left

      //중앙배치일 경우에는 계산한다
@ -718,6 +734,7 @@ export function useModuleBasicSetting() {
          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))

          // if (disjointFromTrestle && isDisjoint) {
+          moduleOptions.surfaceId = moduleSetupSurface.id
          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
          canvas?.add(tempModule)
          moduleSetupArray.push(tempModule)
@ -725,7 +742,8 @@ export function useModuleBasicSetting() {
      }
    }

-    const topFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine, isCenter = false) => {
+    const topFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, isCenter = false) => {
+      const flowModuleLine = moduleSetupSurface.flowLines
      let startPoint = flowModuleLine.top

      if (isCenter) {
@ -789,6 +807,7 @@ export function useModuleBasicSetting() {
          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))

          // if (disjointFromTrestle && isDisjoint) {
+          moduleOptions.surfaceId = moduleSetupSurface.id
          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
          canvas?.add(tempModule)
          moduleSetupArray.push(tempModule)
@ -796,7 +815,8 @@ export function useModuleBasicSetting() {
      }
    }

-    const rightFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine, isCenter = false) => {
+    const rightFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, isCenter = false) => {
+      const flowModuleLine = moduleSetupSurface.flowLines
      let startPoint = flowModuleLine.right

      if (isCenter) {
@ -850,6 +870,7 @@ export function useModuleBasicSetting() {
          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))

          // if (disjointFromTrestle && isDisjoint) {
+          moduleOptions.surfaceId = moduleSetupSurface.id
          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
          canvas?.add(tempModule)
          moduleSetupArray.push(tempModule)
@ -883,44 +904,44 @@ export function useModuleBasicSetting() {
      if (setupLocation === 'eaves') {
        // 흐름방향이 남쪽일때
        if (moduleSetupSurface.flowDirection === 'south') {
-          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
        }
        if (moduleSetupSurface.flowDirection === 'west') {
-          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
        }
        if (moduleSetupSurface.flowDirection === 'east') {
-          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
        }
        if (moduleSetupSurface.flowDirection === 'north') {
-          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
        }
      } else if (setupLocation === 'ridge') {
        //용마루
        if (moduleSetupSurface.flowDirection === 'south') {
-          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
        }
        if (moduleSetupSurface.flowDirection === 'west') {
-          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
        }
        if (moduleSetupSurface.flowDirection === 'east') {
-          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
        }
        if (moduleSetupSurface.flowDirection === 'north') {
-          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines)
+          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
        }
      } else if (setupLocation === 'center') {
        //중가면
        if (moduleSetupSurface.flowDirection === 'south') {
-          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true)
+          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, true)
        }
        if (moduleSetupSurface.flowDirection === 'west') {
-          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true)
+          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, true)
        }
        if (moduleSetupSurface.flowDirection === 'east') {
-          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true)
+          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, true)
        }
        if (moduleSetupSurface.flowDirection === 'north') {
-          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true)
+          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, true)
        }
      }

@ -1214,20 +1235,6 @@ export function useModuleBasicSetting() {
    return turf.polygon([coordinates])
  }

-  const polygonToTurfPolygon = (object, current = false) => {
-    let coordinates
-    coordinates = object.points.map((point) => [point.x, point.y])
-    if (current) coordinates = object.getCurrentPoints().map((point) => [point.x, point.y])
-    coordinates.push(coordinates[0])
-    return turf.polygon(
-      [coordinates],
-      {},
-      {
-        parentId: object.parentId,
-      },
-    )
-  }
-
  const batchObjectGroupToTurfPolygon = (group) => {
    const polygons = group.getObjects().filter((obj) => obj.type === 'QPolygon')
    let allPoints = []
@ -1547,14 +1554,14 @@ export function useModuleBasicSetting() {
      fill: '#BFFD9F',
      stroke: 'black',
      strokeWidth: 0.1,
-      selectable: false, // 선택 가능하게 설정
+      selectable: true, // 선택 가능하게 설정
      lockMovementX: true, // X 축 이동 잠금
      lockMovementY: true, // Y 축 이동 잠금
      lockRotation: true, // 회전 잠금
      lockScalingX: true, // X 축 크기 조정 잠금
      lockScalingY: true, // Y 축 크기 조정 잠금
-      opacity: 0.8,
      parentId: moduleSetupSurface.parentId,
+      surfaceId: moduleSetupSurface.id,
      name: 'module',
    }

@ -1602,7 +1609,7 @@ export function useModuleBasicSetting() {
        const mousePoint = canvas.getPointer(e.e)

        for (let i = 0; i < moduleSetupSurfaces.length; i++) {
-          turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i])
+          turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i], true)
          trestlePolygon = moduleSetupSurfaces[i]
          manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨
          flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향
@ -1627,7 +1634,7 @@ export function useModuleBasicSetting() {
            tempModule = new fabric.Rect({
              fill: 'white',
              stroke: 'black',
-              strokeWidth: 1,
+              strokeWidth: 0.3,
              width: width,
              height: height,
              left: mousePoint.x - width / 2,
@ -1638,7 +1645,6 @@ export function useModuleBasicSetting() {
              lockRotation: true,
              lockScalingX: true,
              lockScalingY: true,
-              opacity: 0.8,
              name: 'tempModule',
              parentId: moduleSetupSurfaces[i].parentId,
            })
@ -1833,8 +1839,7 @@ export function useModuleBasicSetting() {
            //마우스 클릭시 set으로 해당 위치에 셀을 넣음
            const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인
            if (!isOverlap) {
-              console.log('tempModule.points', tempModule.points)
-
+              moduleOptions.surfaceId = trestlePolygon.id
              let manualModule = new QPolygon(tempModule.points, { ...moduleOptions })
              canvas?.add(manualModule)
              manualDrawModules.push(tempModule)
@ -1956,14 +1961,14 @@ export function useModuleBasicSetting() {
      fill: '#BFFD9F',
      stroke: 'black',
      strokeWidth: 0.1,
-      selectable: false, // 선택 가능하게 설정
+      selectable: true, // 선택 가능하게 설정
      lockMovementX: true, // X 축 이동 잠금
      lockMovementY: true, // Y 축 이동 잠금
      lockRotation: true, // 회전 잠금
      lockScalingX: true, // X 축 크기 조정 잠금
      lockScalingY: true, // Y 축 크기 조정 잠금
-      opacity: 0.8,
      parentId: moduleSetupSurface.parentId,
+      surfaceId: moduleSetupSurface.id,
      name: 'module',
    }

@ -2066,6 +2071,7 @@ export function useModuleBasicSetting() {
          let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))

+          moduleOptions.surfaceId = moduleSetupSurface.id
          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
          canvas?.add(tempModule)
          moduleSetupArray.push(tempModule)
@ -2105,6 +2111,7 @@ export function useModuleBasicSetting() {
          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))

          // if (disjointFromTrestle && isDisjoint) {
+          moduleOptions.surfaceId = moduleSetupSurface.id
          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
          canvas?.add(tempModule)
          moduleSetupArray.push(tempModule)
@ -2147,6 +2154,7 @@ export function useModuleBasicSetting() {
          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))

          // if (disjointFromTrestle && isDisjoint) {
+          moduleOptions.surfaceId = moduleSetupSurface.id
          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
          canvas?.add(tempModule)
          moduleSetupArray.push(tempModule)
@ -2187,6 +2195,7 @@ export function useModuleBasicSetting() {
          let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))

          // if (disjointFromTrestle && isDisjoint) {
+          moduleOptions.surfaceId = moduleSetupSurface.id
          let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
          canvas?.add(tempModule)
          moduleSetupArray.push(tempModule)
@ -2274,6 +2283,8 @@ export function useModuleBasicSetting() {
      // canvas.add(groupTest)
    })
    // console.log(calculateForApi())
+
+    //드래그 하기위해 기능 활성화
  }

  return {
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@ -120,7 +120,7 @@ export function useCanvasSetting() {
    }

    const { id } = selectedRoofMaterial
-    console.log(getModuleTypeItemList(id))
+    if (id !== undefined) console.log(getModuleTypeItemList(id))
  }, [selectedRoofMaterial])

  //지붕재 초기세팅
@ -129,6 +129,7 @@ export function useCanvasSetting() {
      return
    }
    const { data } = await getRoofMaterialList()
+    
    const roofLists = data.map((item, idx) => ({
      ...item,
      id: item.roofMatlCd,
@ -138,7 +139,7 @@ export function useCanvasSetting() {
      length: item.lenBase && parseInt(item.lenBase),
      width: item.widBase && parseInt(item.widBase),
      raft: item.raftBase && parseInt(item.raftBase),
-      layout: ROOF_MATERIAL_LAYOUT.PARALLEL,
+      layout: ['ROOF_ID_SLATE', 'ROOF_ID_SINGLE'].includes(item.roofMatlCd) ? ROOF_MATERIAL_LAYOUT.STAIRS : ROOF_MATERIAL_LAYOUT.PARALLEL,
      hajebichi: item.roofPchBase && parseInt(item.roofPchBase),
    }))
    setRoofMaterials(roofLists)
@ -178,15 +179,6 @@ export function useCanvasSetting() {
    canvas?.renderAll()
  }, [corridorDimension])

-  // 배치면 초기설정 변경 시
-  useEffect(() => {
-    //console.log('useCanvasSetting canvasSetting 실행', canvasSetting)
-
-    if (canvasSetting.flag) {
-      basicSettingSave()
-    }
-  }, [canvasSetting])
-
  useEffect(() => {
    console.log('🚀 ~ useEffect ~ settingsDataSave:', settingsDataSave)
    if (settingsDataSave !== undefined) onClickOption2()
@ -268,57 +260,75 @@ export function useCanvasSetting() {
    try {
      await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}` }).then((res) => {
        console.log('fetchBasicSettings res ', res)
-        if (res.length == 0) return
+        //if (res.length == 0) return

-        // 'roofs' 배열을 생성하여 각 항목을 추가
-        const roofsRow = res.map((item) => {
+      let roofsRow = {}
+      let roofsArray = {}
+
+      if (res.length > 0) {
+        roofsRow = res.map((item) => {
          return {
            roofSizeSet: item.roofSizeSet,
            roofAngleSet: item.roofAngleSet,
          }
        })

-        const roofsArray = res.some((item) => !item.roofSeq)
-          ? //최초 지붕재 추가 정보의 경우 roofsArray를 초기화 설정
-            res.map(() => ({
-              flag: false,
-              roofApply: true,
-              roofSeq: 1,
-              roofType: 1,
-              roofWidth: 265,
-              roofHeight: 235,
-              roofHajebichi: 0,
-              roofGap: 455,
-              // roofType: 1,
-              // roofWidth: 200,
-              // roofHeight: 200,
-              // roofHajebichi: 200,
-              // roofGap: 0,
-              roofLayout: 'parallel',
-            }))
-          : res.map((item) => ({
-              flag: false,
-              roofApply: item.roofApply === '' || item.roofApply === false ? false : true,
-              roofSeq: item.roofSeq,
-              roofType: item.roofType,
-              roofWidth: item.roofWidth,
-              roofHeight: item.roofHeight,
-              roofHajebichi: item.roofHajebichi,
-              roofGap: item.roofGap,
-              roofLayout: item.roofLayout,
-            }))
-        console.log('roofsArray ', roofsArray)
-        // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
-        const patternData = {
-          roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용
-          roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용
-          roofs: roofsArray, // 만들어진 roofs 배열
-        }
+        roofsArray = res.map((item) => {
+          return {
+            roofApply: item.roofApply === '' || item.roofApply === false ? false : true,
+            roofSeq: item.roofSeq,
+            roofMatlCd: item.roofMatlCd,
+            roofWidth: item.roofWidth,
+            roofHeight: item.roofHeight,
+            roofHajebichi: item.roofHajebichi,
+            roofGap: item.roofGap,
+            roofLayout: item.roofLayout,
+          }
+        })

-        //console.error('patternData', patternData)
+      } else {
+
+        roofsRow = [{
+          roofSizeSet: 1,
+          roofAngleSet: 'slope',
+        }]
+
+        roofsArray = [{
+          roofApply: true,
+          roofSeq: 1,
+          roofMatlCd: 'ROOF_ID_WA_53A',
+          roofWidth: 265,
+          roofHeight: 235,
+          roofHajebichi: 0,
+          roofGap: 'HEI_455',
+          roofLayout: 'P',
+        }]
+      }
+      
+      // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
+      const patternData = {
+        roofSizeSet: roofsRow[0].roofSizeSet,
+        roofAngleSet: roofsRow[0].roofAngleSet,
+        roofs: roofsArray, // 만들어진 roofs 배열
+      }
+
+      console.log('patternData', patternData)
+      
+      // 데이터 설정
+      //setBasicSettings({ ...basicSetting, roofSizeSet: roofsRow[0].roofSizeSet, roofAngleSet: roofsRow[0].roofAngleSet, roofsData: roofsArray})
+    const addRoofs = []
+    roofMaterials.map((material) => {
+      if (material.id === roofsArray[0].roofMatlCd) {
+        //setRoofMaterials({ ...roofMaterials, layout: roofsArray[0].roofLayout })
+        addRoofs.push({ ...material, selected: true, layout: roofsArray[0].roofLayout })
+        setBasicSettings({ ...basicSetting, roofMaterials: material
+                                          , roofs: addRoofs
+                                          , roofSizeSet: roofsRow[0].roofSizeSet
+                                          , roofAngleSet: roofsRow[0].roofAngleSet
+                                          , roofsData: roofsArray })
+      }
+    })

-        // 데이터 설정
-        setBasicSettings({ ...patternData })
      })
    } catch (error) {
      console.error('Data fetching error:', error)
@ -337,15 +347,26 @@ export function useCanvasSetting() {
        objectNo: correntObjectNo,
        roofSizeSet: basicSetting.roofSizeSet,
        roofAngleSet: basicSetting.roofAngleSet,
-        roofMaterialsAddList: basicSetting.roofs, // TODO : 선택된 roof로 변경해야함
+        roofMaterialsAddList: [{
+          roofApply: true,
+          roofSeq: 1,
+          roofMatlCd: basicSetting.roofsData.roofMatlCd === null ? 'ROOF_ID_WA_53A' : basicSetting.roofsData.roofMatlCd,
+          roofWidth: basicSetting.roofsData.roofWidth === null ? 0 : basicSetting.roofsData.roofWidth,
+          roofHeight: basicSetting.roofsData.roofHeight === null ? 0 : basicSetting.roofsData.roofHeight,
+          roofHajebichi: basicSetting.roofsData.roofHajebichi === null ? 0 : basicSetting.roofsData.roofHajebichi,
+          roofGap: basicSetting.roofsData.roofGap === null ? 'HEI_455' : basicSetting.roofsData.roofGap,
+          roofLayout: basicSetting.roofsData.roofLayout,
+          }],
      }

+      console.log('patternData 55', patternData)
+
      await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
-        swalFire({ text: getMessage(res.returnMessage) })
+       swalFire({ text: getMessage(res.returnMessage) })
      })

      //Recoil 설정
-      setCanvasSetting({ ...basicSetting, flag: false })
+      setCanvasSetting({ ...basicSetting })
    } catch (error) {
      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
    }
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/src/hooks/roofcover/useRoofAllocationSetting.js
@ -100,6 +100,13 @@ export function useRoofAllocationSetting(id) {
    }
  }

+  // 지붕재 오른쪽 마우스 클릭 후 단일로 지붕재 변경 필요한 경우
+  const handleSaveContext = () => {
+    const selectedRoofMaterial = roofList.find((roof) => roof.selected)
+    setSurfaceShapePattern(currentObject, roofDisplay.column, false, selectedRoofMaterial)
+    closeAll()
+  }
+
  const handleAlloc = () => {
    if (!checkInnerLines()) {
      apply()
@ -161,6 +168,7 @@ export function useRoofAllocationSetting(id) {
      return {
        ...prev,
        roofs: roofList,
+        selectedRoofMaterial: roofList.find((roof) => roof.selected),
      }
    })

@ -203,9 +211,6 @@ export function useRoofAllocationSetting(id) {
    canvas?.renderAll()
  }

-  //roof input값 변경
-  const handleChangeInput = (type, value, index) => {}
-
  // 지붕재 변경
  const handleChangeRoofMaterial = (value, index) => {
    if (isFirstRef.current === 0) {
@ -275,5 +280,6 @@ export function useRoofAllocationSetting(id) {
    handleChangeRoofMaterial,
    handleChangeRaft,
    handleChangeLayout,
+    handleSaveContext,
  }
 }
--- a/src/hooks/roofcover/useRoofShapePassivitySetting.js
+++ b/src/hooks/roofcover/useRoofShapePassivitySetting.js
@ -86,10 +86,21 @@ export function useRoofShapePassivitySetting(id) {

  useEffect(() => {
    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+    let stroke, strokeWidth
    lines.forEach((line) => {
+      if (line.attributes.type === LINE_TYPE.WALLLINE.EAVES || line.attributes.type === LINE_TYPE.WALLLINE.HIPANDGABLE) {
+        stroke = '#45CD7D'
+        strokeWidth = 4
+      } else if (line.attributes.type === LINE_TYPE.WALLLINE.GABLE || line.attributes.type === LINE_TYPE.WALLLINE.JERKINHEAD) {
+        stroke = '#3FBAE6'
+        strokeWidth = 4
+      } else {
+        stroke = '#000000'
+        strokeWidth = 4
+      }
      line.set({
-        stroke: '#000000',
-        strokeWidth: 4,
+        stroke,
+        strokeWidth,
      })
    })
    if (!currentObject) {
@ -125,6 +136,10 @@ export function useRoofShapePassivitySetting(id) {
    const index = lines.findIndex((line) => line === selectedLine)

    const nextLine = lines[index + 1] || lines[0]
+    if (nextLine.attributes.isFixed) {
+      canvas.discardActiveObject()
+      return
+    }
    canvas.setActiveObject(nextLine)
  }

@ -155,7 +170,7 @@ export function useRoofShapePassivitySetting(id) {
    }

    currentLineRef.current.set({
-      attributes,
+      attributes: { ...attributes, isFixed: true },
    })

    history.current.push(currentLineRef.current)
--- a/src/hooks/roofcover/useRoofShapeSetting.js
+++ b/src/hooks/roofcover/useRoofShapeSetting.js
@ -185,9 +185,19 @@ export function useRoofShapeSetting(id) {
      }
      case 4: {
        outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
-        outerLines.forEach((line) => {
-          // hideLine(line)
-        })
+        const pitch = outerLines.find((line) => line.attributes.type === LINE_TYPE.WALLLINE.SHED)?.attributes.pitch
+        // 변별로 설정중 한쪽흐름일 경우 한쪽흐름의 pitch로 설정
+        if (pitch) {
+          outerLines.forEach((line) => {
+            if (line.attributes.type === LINE_TYPE.WALLLINE.EAVES) {
+              line.attributes = {
+                ...line.attributes,
+                pitch: pitch,
+              }
+            }
+          })
+        }
+
        break
      }

@ -595,17 +605,23 @@ export function useRoofShapeSetting(id) {
        break
      }
    }
-    selectedLine.attributes = attributes
-    history.current.push(selectedLine)
+    selectedLine.attributes = { ...attributes, isFixed: true }
+
    canvas.renderAll()
    nextLineFocus(selectedLine)
  }

  const nextLineFocus = (selectedLine) => {
    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+
    const index = lines.findIndex((line) => line.idx === selectedLine.idx)

    const nextLine = lines[index + 1] || lines[0]
+    if (nextLine.attributes.isFixed) {
+      canvas.discardActiveObject()
+      return
+    }
+    history.current.push(selectedLine)
    canvas.setActiveObject(nextLine)
  }

--- a/src/hooks/useContextMenu.js
+++ b/src/hooks/useContextMenu.js
@ -35,6 +35,7 @@ import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
 import { fontSelector, globalFontAtom } from '@/store/fontAtom'
 import { useLine } from '@/hooks/useLine'
 import { useSwal } from '@/hooks/useSwal'
+import ContextRoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting'

 export function useContextMenu() {
  const canvas = useRecoilValue(canvasState)
@ -377,7 +378,7 @@ export function useContextMenu() {
              {
                id: 'roofMaterialEdit',
                name: getMessage('contextmenu.roof.material.edit'),
-                component: <RoofAllocationSetting id={popupId} />,
+                component: <ContextRoofAllocationSetting id={popupId} />,
              },
              {
                id: 'linePropertyEdit',
@ -597,12 +598,13 @@ export function useContextMenu() {
            ],
          ])
          break
-        case 'panel':
+        case 'module':
          setContextMenu([
            [
              {
                id: 'remove',
                name: getMessage('contextmenu.remove'),
+                fn: () => deleteObject(),
              },
              {
                id: 'move',
@ -661,7 +663,7 @@ export function useContextMenu() {
            ],
          ])
          break
-        case 'module':
+        case 'moduleSetupSurface':
        case 'dimensionLineText':
          setContextMenu([
            [
--- a/src/lib/authActions.js
+++ b/src/lib/authActions.js
@ -59,33 +59,36 @@ export async function setSession(data) {
  await session.save()
 }

-export async function login(formData) {
+export async function login() {
  const session = await getSession()
-
-  const userId = formData.get('id')
-  const password = formData.get('password')
-
-  console.log('id:', userId)
-  console.log('password:', password)
-
-  // const loginUser = await getUserByIdAndPassword({ userId, password })
-  const loginUser = {
-    id: 1,
-    userId: 'test123',
-    name: 'jinsoo Kim',
-    email: 'jinsoo.kim@example.com',
+  if (session) {
+    redirect('/')
  }

-  if (!loginUser) {
-    throw Error('Wrong Credentials!')
-  }
+  // const userId = formData.get('id')
+  // const password = formData.get('password')

-  session.name = loginUser.name
-  session.userId = loginUser.userId
-  session.email = loginUser.email
-  session.isLoggedIn = true
-  console.log('session:', session)
+  // console.log('id:', userId)
+  // console.log('password:', password)

-  await session.save()
-  redirect('/')
+  // // const loginUser = await getUserByIdAndPassword({ userId, password })
+  // const loginUser = {
+  //   id: 1,
+  //   userId: 'test123',
+  //   name: 'jinsoo Kim',
+  //   email: 'jinsoo.kim@example.com',
+  // }
+
+  // if (!loginUser) {
+  //   throw Error('Wrong Credentials!')
+  // }
+
+  // session.name = loginUser.name
+  // session.userId = loginUser.userId
+  // session.email = loginUser.email
+  // session.isLoggedIn = true
+  // console.log('session:', session)
+
+  // await session.save()
+  // redirect('/')
 }
--- a/src/lib/session.js
+++ b/src/lib/session.js
@ -3,8 +3,8 @@ export const defaultSession = {}
 export const sessionOptions = {
  password: process.env.SESSION_SECRET,
  cookieName: 'lama-session',
-  // cookieOptions: {
-  //   httpOnly: true,
-  //   secure: process.env.NODE_ENV === 'production',
-  // },
+  cookieOptions: {
+    httpOnly: true,
+    secure: process.env.NODE_ENV === 'production',
+  },
 }
--- a/src/store/settingAtom.js
+++ b/src/store/settingAtom.js
@ -220,7 +220,11 @@ export const selectedRoofMaterialSelector = selector({
  key: 'selectedRoofMaterialSelector',
  get: ({ get }) => {
    const basicSetting = get(basicSettingState)
-    return basicSetting.selectedRoofMaterial
+    const addedRoofs = get(addedRoofsSelector)
+    // addedRoofs에서 selectedRoofMaterial을 찾아 index를 반환
+    const index = addedRoofs.findIndex((roof) => roof === basicSetting.selectedRoofMaterial)
+
+    return { ...basicSetting.selectedRoofMaterial, index }
  },
 })

--- a/src/util/canvas-util.js
+++ b/src/util/canvas-util.js
@ -751,18 +751,6 @@ export const pointsToTurfPolygon = (points) => {
  return turf.polygon([coordinates])
 }

-export const polygonToTurfPolygon = (polygon) => {
-  const coordinates = polygon.points.map((point) => [point.x, point.y])
-  coordinates.push(coordinates[0])
-  return turf.polygon(
-    [coordinates],
-    {},
-    {
-      parentId: polygon.parentId,
-    },
-  )
-}
-
 export const triangleToPolygon = (triangle) => {
  const points = []
  const halfWidth = triangle.width / 2
@ -1003,3 +991,17 @@ export function findAndRemoveClosestPoint(targetPoint, points) {

  return closestPoint
 }
+
+export function polygonToTurfPolygon(object, current = false) {
+  let coordinates
+  coordinates = object.points.map((point) => [point.x, point.y])
+  if (current) coordinates = object.getCurrentPoints().map((point) => [point.x, point.y])
+  coordinates.push(coordinates[0])
+  return turf.polygon(
+    [coordinates],
+    {},
+    {
+      parentId: object.parentId,
+    },
+  )
+}