모듈 contextmenu 기능 리펙터링

src/components/common/color-picker/ColorPickerModal.jsx

@@ -66,7 +66,7 @@ export default function ColorPickerModal(props) {
 
                 //치수선색설정 아닐 때만 바로 저장 실행
                 if (name !== 'DimensionLineColor')
-                  setSettingsData({
+                  setSettingsDataSave({
                     ...settingsData,
                     color: originColor,
                   })

src/components/floor-plan/modal/module/PanelEdit.jsx

@@ -40,105 +40,44 @@ export default function PanelEdit(props) {
 
   //모듈 이동 적용
   const handleApply = () => {
-    // const activeModuleIds = canvas.getActiveObjects().map((obj) => obj.id)
+    switch (type) {
-    if (type === PANEL_EDIT_TYPE.MOVE) {
+      case PANEL_EDIT_TYPE.MOVE:
-      moduleMove(length, direction)
+        moduleMove(length, direction)
-    } else if (type === PANEL_EDIT_TYPE.COPY) {
+        break
-      moduleCopy(length, direction)
+      case PANEL_EDIT_TYPE.COPY:
-    } else if (type === PANEL_EDIT_TYPE.COLUMN_MOVE) {
+        moduleCopy(length, direction)
-      moduleMultiMove('column', length, direction)
+        break
-    } else if (type === PANEL_EDIT_TYPE.COLUMN_COPY) {
+      case PANEL_EDIT_TYPE.COLUMN_MOVE:
-      moduleMultiCopy('column', length, direction)
+        moduleMultiMove('column', length, direction)
-    } else if (type === PANEL_EDIT_TYPE.ROW_MOVE) {
+        break
-      moduleMultiMove('row', length, direction)
+      case PANEL_EDIT_TYPE.COLUMN_COPY:
-    } else if (type === PANEL_EDIT_TYPE.ROW_COPY) {
+        moduleMultiCopy('column', length, direction)
-      moduleMultiCopy('row', length, direction)
+        break
+      case PANEL_EDIT_TYPE.ROW_MOVE:
+        moduleMultiMove('row', length, direction)
+        break
+      case PANEL_EDIT_TYPE.ROW_COPY:
+        moduleMultiCopy('row', length, direction)
+        break
     }
     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`}>
         <div className="modal-head">
-          <h1 className="title">{getMessage(type === 'move' ? 'modal.move.setting' : 'modal.copy.setting')} </h1>
+          <h1 className="title">
+            {getMessage([PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) ? 'modal.move.setting' : 'modal.copy.setting')}{' '}
+          </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
             닫기
           </button>
         </div>
         <div className="modal-body">
-          <div className="grid-option-tit">{getMessage(type === 'move' ? 'modal.move.setting.info' : 'modal.copy.setting.info')}</div>
+          <div className="grid-option-tit">
+            {getMessage([PANEL_EDIT_TYPE.MOVE, PANEL_EDIT_TYPE.COLUMN_MOVE].includes(type) ? 'modal.move.setting.info' : 'modal.copy.setting.info')}
+          </div>
           <div className="grid-option-wrap">
             <div className="grid-option-box">
               <div className="grid-input-form">

src/hooks/common/useGrid.js

@@ -28,11 +28,7 @@ export function useGrid() {
     // 1. 점.선 그리드 설정으로 만들어진 기존 오브젝트 제거
     canvas
       ?.getObjects()
-      .filter((obj) => obj.name === 'lineGrid')
+      .filter((obj) => ['lineGrid', 'dotGrid'].includes(obj.name))
-      .forEach((obj) => canvas?.remove(obj))
-    canvas
-      ?.getObjects()
-      .filter((obj) => obj.name === 'dotGrid')
       .forEach((obj) => canvas?.remove(obj))
 
     //const horizontalInterval = interval.horizontalInterval
@@ -181,8 +177,17 @@ export function useGrid() {
     canvas.renderAll()
   }
 
+  const removeGrid = () => {
+    canvas
+      .getObjects()
+      .filter((obj) => ['lineGrid', 'dotGrid', 'tempGrid'].includes(obj.name))
+      .forEach((obj) => canvas.remove(obj))
+    canvas.renderAll()
+  }
+
   return {
     move,
     copy,
+    removeGrid,
   }
 }

src/hooks/module/useModule.js

@@ -25,6 +25,10 @@ export const MODULE_INSERT_TYPE = {
   BOTTOM: 'down',
 }
 
+export const MODULE_ALIGN_TYPE = {
+  TOP: 'top',
+}
+
 export function useModule() {
   const canvas = useRecoilValue(canvasState)
   const { swalFire } = useSwal()
@@ -181,18 +185,17 @@ export function useModule() {
     const modules = type === 'row' ? getRowModules(activeModule) : getColumnModules(activeModule)
     const otherModules = getOtherModules(modules)
     const objects = getObjects()
-    console.log('🚀 ~ moduleMultiMove ~ objects:', objects)
-
     const moduleSetupSurface = canvas
       .getObjects()
       .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
-    let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
+    let isWarning = false
 
     modules.forEach((module) => {
       const { top, left } = getPosotion(module, direction, length, false)
       module.originPos = {
         top: module.top,
         left: module.left,
+        fill: module.fill,
       }
 
       module.set({ top, left })
@@ -200,41 +203,22 @@ export function useModule() {
       canvas.renderAll()
 
       if (otherModules.length > 0) {
-        isOverlapOtherModules.push(
+        if (isOverlapOtherModules(module, otherModules) || isOverlapObjects(module, objects) || isOutsideSurface(module, moduleSetupSurface)) {
-          otherModules.some(
+          isWarning = true
-            (otherModule) =>
+          module.set({ fill: 'red' })
-              turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)) ||
+        }
-              turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)),
-          ),
-        )
       }
-
-      if (objects.length > 0) {
-        isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
-      }
-
-      isOutsideSurface.push(
-        !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(module, true)) ||
-          !turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true)),
-      )
     })
 
-    if (
+    canvas.renderAll()
-      isOverlapOtherModules.some((isOverlap) => isOverlap) ||
+    if (isWarning) {
-      isOverlapObjects.some((isOverlap) => isOverlap) ||
-      isOutsideSurface.some((isOutside) => isOutside)
-    ) {
       swalFire({
-        title: isOverlapOtherModules.some((isOverlap) => isOverlap)
+        title: '삭제할 수 없습니다.',
-          ? '겹치는 모듈이 있습니다.'
-          : isOverlapObjects.some((isOverlap) => isOverlap)
-            ? '모듈이 오브젝트와 겹칩니다.'
-            : '영역 밖',
         icon: 'error',
         type: 'confirm',
         confirmFn: () => {
           modules.forEach((module) => {
-            module.set({ top: module.originPos.top, left: module.originPos.left })
+            module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
             module.setCoords()
           })
           canvas.renderAll()
@@ -262,7 +246,7 @@ export function useModule() {
     const moduleSetupSurface = canvas
       .getObjects()
       .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === modules[0].surfaceId)[0]
-    let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
+    let isWarning = false
     let moduleLength = 0
     if (['up', 'down'].includes(direction)) {
       moduleLength = Number(modules[modules.length - 1].top) + Number(modules[modules.length - 1].height) - Number(modules[0].top)
@@ -273,42 +257,22 @@ export function useModule() {
     modules.forEach((module) => {
       const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength), false)
       const moduleOptions = { ...module, left, top, id: uuidv4() }
-      const rect = new QPolygon(module.getCurrentPoints(), moduleOptions)
+      const rect = new QPolygon(module.points, moduleOptions)
       canvas.add(rect)
       copyRects.push(rect)
       module.setCoords()
 
       if (otherModules.length > 0) {
-        isOverlapOtherModules.push(
+        if (isOverlapOtherModules(rect, otherModules) || isOverlapObjects(rect, objects) || isOutsideSurface(rect, moduleSetupSurface)) {
-          otherModules.some(
+          isWarning = true
-            (otherModule) =>
+          rect.set({ fill: 'red' })
-              turf.booleanOverlap(polygonToTurfPolygon(rect, true), polygonToTurfPolygon(otherModule, true)) ||
+        }
-              turf.booleanWithin(polygonToTurfPolygon(rect, true), polygonToTurfPolygon(otherModule, true)),
-          ),
-        )
       }
-
-      if (objects.length > 0) {
-        isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
-      }
-
-      isOutsideSurface.push(
-        !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(rect, true)) ||
-          !turf.booleanWithin(polygonToTurfPolygon(rect, true), polygonToTurfPolygon(moduleSetupSurface, true)),
-      )
     })
-
+    canvas.renderAll()
-    if (
+    if (isWarning) {
-      isOverlapOtherModules.some((isOverlap) => isOverlap) ||
-      isOverlapObjects.some((isOverlap) => isOverlap) ||
-      isOutsideSurface.some((isOutside) => isOutside)
-    ) {
       swalFire({
-        title: isOverlapOtherModules.some((isOverlap) => isOverlap)
+        title: '복사할 수 없습니다.',
-          ? '겹치는 모듈이 있습니다.'
-          : isOverlapObjects.some((isOverlap) => isOverlap)
-            ? '모듈이 오브젝트와 겹칩니다.'
-            : '영역 밖',
         icon: 'error',
         type: 'confirm',
         confirmFn: () => {
@@ -333,7 +297,7 @@ export function useModule() {
     const moduleSetupSurface = canvas
       .getObjects()
       .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
-    let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
+    let isWarning = false
     canvas.discardActiveObject()
     canvas.remove(...columnModules)
     canvas.renderAll()
@@ -343,30 +307,44 @@ export function useModule() {
         module.originPos = {
           left: module.left,
           top: module.top,
+          fill: module.fill,
         }
         if (width === -1) width = module.left - activeModule.left
         module.set({ left: module.left - width })
         module.setCoords()
         canvas.renderAll()
-        isOverlapOtherModules.push(getIsOverlapOtherModules(module, leftModules))
+        if (
-        isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
+          isOverlapOtherModules(module, leftModules) ||
-        isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
+          !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) ||
+          isOutsideSurface(module, moduleSetupSurface)
+        ) {
+          module.set({ fill: 'red' })
+          isWarning = true
+        }
       })
+      canvas.renderAll()
       targetModules = rightModules
     } else if (type === MODULE_REMOVE_TYPE.RIGHT) {
       leftModules.forEach((module) => {
         module.originPos = {
           left: module.left,
           top: module.top,
+          fill: module.fill,
         }
         if (width === -1) width = activeModule.left - module.left
         module.set({ left: module.left + width })
         module.setCoords()
         canvas.renderAll()
-        isOverlapOtherModules.push(getIsOverlapOtherModules(module, rightModules))
+        if (
-        isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
+          isOverlapOtherModules(module, rightModules) ||
-        isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
+          !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) ||
+          isOutsideSurface(module, moduleSetupSurface)
+        ) {
+          module.set({ fill: 'red' })
+          isWarning = true
+        }
       })
+      canvas.renderAll()
       targetModules = leftModules
     } else if (type === MODULE_REMOVE_TYPE.HORIZONTAL_SIDE) {
       const sideModules = [...leftModules, ...rightModules]
@@ -374,6 +352,7 @@ export function useModule() {
         module.originPos = {
           left: module.left,
           top: module.top,
+          fill: module.fill,
         }
         if (width === -1) width = activeModule.left - module.left
         module.set({ left: module.left + width / 2 })
@@ -385,50 +364,45 @@ export function useModule() {
         module.originPos = {
           left: module.left,
           top: module.top,
+          fill: module.fill,
         }
         if (width === -1) width = module.left - activeModule.left
         module.set({ left: module.left - width / 2 })
         module.setCoords()
         canvas.renderAll()
       })
-      canvas.renderAll()
+
       sideModules.forEach((module) => {
-        isOverlapOtherModules.push(
+        if (
-          getIsOverlapOtherModules(
+          isOverlapOtherModules(
             module,
             sideModules.filter((m) => m.id !== module.id),
-          ),
+          ) ||
-        )
+          !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) ||
-        isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
+          isOutsideSurface(module, moduleSetupSurface)
-        isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
+        ) {
+          isWarning = true
+          module.set({ fill: 'red' })
+        }
       })
 
       targetModules = sideModules
     }
-    if (
-      (isOverlapOtherModules.some((isOverlap) => isOverlap) ||
-        isOverlapObjects.some((isOverlap) => isOverlap) ||
-        isOutsideSurface.some((isOutside) => isOutside)) &&
-      type !== MODULE_REMOVE_TYPE.NONE
-    ) {
-      swalFire({
-        title: isOverlapOtherModules.some((isOverlap) => isOverlap)
-          ? '겹치는 모듈이 있습니다.'
-          : isOverlapObjects.some((isOverlap) => isOverlap)
-            ? '모듈이 오브젝트와 겹칩니다.'
-            : '영역 밖',
-        icon: 'error',
-        type: 'confirm',
-        confirmFn: () => {
-          canvas.add(...columnModules)
-          targetModules.forEach((module) => {
-            module.set({ top: module.originPos.top, left: module.originPos.left })
-            module.setCoords()
-          })
-        },
-      })
-    }
     canvas.renderAll()
+    if (isWarning) {
+      swalFire({
+        title: '삭제할 수 없습니다.',
+        icon: 'error',
+        type: 'alert',
+        confirmFn: () => {},
+      })
+      canvas.add(...columnModules)
+      targetModules.forEach((module) => {
+        module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
+        module.setCoords()
+      })
+      canvas.renderAll()
+    }
   }
 
   const moduleRowRemove = (type) => {
@@ -443,7 +417,7 @@ export function useModule() {
     const moduleSetupSurface = canvas
       .getObjects()
       .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
-    let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
+    let isWarning = false
 
     canvas.discardActiveObject()
     canvas.remove(...rowModules)
@@ -454,29 +428,42 @@ export function useModule() {
         module.originPos = {
           left: module.left,
           top: module.top,
+          fill: module.fill,
         }
         if (height === -1) height = module.top - activeModule.top
         module.set({ top: module.top - height })
         module.setCoords()
         canvas.renderAll()
-        isOverlapOtherModules.push(getIsOverlapOtherModules(module, topModules))
+        if (
-        isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
+          getIsOverlapOtherModules(module, topModules) ||
-        isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
+          !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) ||
+          getIsOutsideSurface(module, moduleSetupSurface)
+        ) {
+          isWarning = true
+          module.set({ fill: 'red' })
+        }
       })
+      canvas.renderAll()
       targetModules = bottomModules
     } else if (type === MODULE_REMOVE_TYPE.BOTTOM) {
       topModules.forEach((module) => {
         module.originPos = {
           left: module.left,
           top: module.top,
+          fill: module.fill,
         }
         if (height === -1) height = activeModule.top - module.top
         module.set({ top: module.top + height })
         module.setCoords()
         canvas.renderAll()
-        isOverlapOtherModules.push(getIsOverlapOtherModules(module, bottomModules))
+        if (
-        isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
+          getIsOverlapOtherModules(module, bottomModules) ||
-        isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
+          !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) ||
+          getIsOutsideSurface(module, moduleSetupSurface)
+        ) {
+          isWarning = true
+          module.set({ fill: 'red' })
+        }
       })
       targetModules = topModules
     } else if (type === MODULE_REMOVE_TYPE.VERTICAL_SIDE) {
@@ -484,6 +471,7 @@ export function useModule() {
         module.originPos = {
           left: module.left,
           top: module.top,
+          fill: module.fill,
         }
         if (height === -1) height = activeModule.top - module.top
         module.set({ top: module.top + height / 2 })
@@ -495,6 +483,7 @@ export function useModule() {
         module.originPos = {
           left: module.left,
           top: module.top,
+          fill: module.fill,
         }
         if (height === -1) height = module.top - activeModule.top
         module.set({ top: module.top - height / 2 })
@@ -505,42 +494,37 @@ export function useModule() {
       const sideModules = [...topModules, ...bottomModules]
       canvas.renderAll()
       sideModules.forEach((module) => {
-        isOverlapOtherModules.push(
+        if (
           getIsOverlapOtherModules(
             module,
             sideModules.filter((m) => m.id !== module.id),
-          ),
+          ) ||
-        )
+          !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) ||
-        isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
+          getIsOutsideSurface(module, moduleSetupSurface)
-        isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
+        ) {
+          isWarning = true
+          module.set({ fill: 'red' })
+        }
       })
       targetModules = sideModules
     }
-
+    canvas.renderAll()
-    if (
+    if (isWarning && type !== MODULE_REMOVE_TYPE.NONE) {
-      (isOverlapOtherModules.some((isOverlap) => isOverlap) ||
+      targetModules.forEach((rect) => rect.set({ fill: 'red' }))
-        isOverlapObjects.some((isOverlap) => isOverlap) ||
-        isOutsideSurface.some((isOutside) => isOutside)) &&
-      type !== MODULE_REMOVE_TYPE.NONE
-    ) {
       swalFire({
-        title: isOverlapOtherModules.some((isOverlap) => isOverlap)
+        title: '삭제할 수 없습니다.',
-          ? '겹치는 모듈이 있습니다.'
-          : isOverlapObjects.some((isOverlap) => isOverlap)
-            ? '모듈이 오브젝트와 겹칩니다.'
-            : '영역 밖',
         icon: 'error',
         type: 'confirm',
         confirmFn: () => {
           canvas.add(...rowModules)
           targetModules.forEach((module) => {
-            module.set({ top: module.originPos.top, left: module.originPos.left })
+            module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
             module.setCoords()
           })
+          canvas.renderAll()
         },
       })
     }
-    canvas.renderAll()
   }
 
   const moduleColumnInsert = (type) => {
@@ -557,7 +541,7 @@ export function useModule() {
       .getObjects()
       .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
     let width = -1
-    let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
+    let isWarning = false
     if (targetModules.length === 0) {
       swalFire({
         title: '마지막 모듈입니다.',
@@ -574,17 +558,14 @@ export function useModule() {
       module.originPos = {
         left: module.left,
         top: module.top,
+        fill: module.fill,
       }
       module.set({ left, top })
       canvas.renderAll()
-      if (objects.length > 0) {
+      if (!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) || isOutsideSurface(module, moduleSetupSurface)) {
-        isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
+        isWarning = true
+        module.set({ fill: 'red' })
       }
-
-      isOutsideSurface.push(
-        !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(module, true)) ||
-          !turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true)),
-      )
       module.setCoords()
     })
     otherModules = getOtherModules(columnModules)
@@ -596,43 +577,44 @@ export function useModule() {
       copyModules.push(copyModule)
       canvas.renderAll()
 
-      if (otherModules.length > 0) {
+      if (
-        isOverlapOtherModules.push(
+        isOverlapOtherModules(copyModule, otherModules) ||
-          otherModules.some(
+        isOverlapObjects(copyModule, objects) ||
-            (otherModule) =>
+        isOutsideSurface(copyModule, moduleSetupSurface)
-              turf.booleanOverlap(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)) ||
+      ) {
-              turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)),
+        isWarning = true
-          ),
+        copyModule.set({ fill: 'red' })
-        )
       }
+      // if (otherModules.length > 0) {
+      //   isOverlapOtherModules.push(
+      //     otherModules.some(
+      //       (otherModule) =>
+      //         turf.booleanOverlap(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)) ||
+      //         turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)),
+      //     ),
+      //   )
+      // }
 
-      if (objects.length > 0) {
+      // if (objects.length > 0) {
-        isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
+      //   isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
-      }
+      // }
 
-      isOutsideSurface.push(
+      // isOutsideSurface.push(
-        !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(copyModule, true)) ||
+      //   !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(copyModule, true)) ||
-          !turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(moduleSetupSurface, true)),
+      //     !turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(moduleSetupSurface, true)),
-      )
+      // )
       module.setCoords()
     })
-
+    canvas.renderAll()
-    if (
+    if (isWarning) {
-      isOverlapOtherModules.some((isOverlap) => isOverlap) ||
+      targetModules.forEach((rect) => rect.set({ fill: 'red' }))
-      isOverlapObjects.some((isOverlap) => isOverlap) ||
-      isOutsideSurface.some((isOutside) => isOutside)
-    ) {
       swalFire({
-        title: isOverlapOtherModules.some((isOverlap) => isOverlap)
+        title: '삽입할 수 없습니다.',
-          ? '겹치는 모듈이 있습니다.'
-          : isOverlapObjects.some((isOverlap) => isOverlap)
-            ? '모듈이 오브젝트와 겹칩니다.'
-            : '영역 밖',
         icon: 'error',
         type: 'confirm',
         confirmFn: () => {
           targetModules.forEach((module) => {
-            module.set({ top: module.originPos.top, left: module.originPos.left })
+            module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
             module.setCoords()
           })
           canvas.renderAll()
@@ -646,16 +628,13 @@ export function useModule() {
   }
 
   const muduleRowInsert = (type) => {
-    console.log('🚀 ~ muduleRowInsert ~ type:', type)
     const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
     const rowModules = getRowModules(activeModule)
-    console.log('🚀 ~ muduleRowInsert ~ rowModules:', rowModules)
     let otherModules = getOtherModules(rowModules)
     const targetModules =
       type === MODULE_INSERT_TYPE.TOP
         ? otherModules.filter((module) => module.top < activeModule.top).sort((a, b) => b.top - a.top)
         : otherModules.filter((module) => module.top > activeModule.top).sort((a, b) => a.top - b.top)
-    console.log('🚀 ~ muduleRowInsert ~ targetModules:', targetModules)
     if (targetModules.length === 0) {
       swalFire({
         title: '마지막 모듈입니다.',
@@ -670,7 +649,7 @@ export function useModule() {
       .getObjects()
       .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
     let height = -1
-    let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
+    let isWarning = false
     canvas.discardActiveObject()
     targetModules.forEach((module) => {
       if (height === -1)
@@ -679,67 +658,57 @@ export function useModule() {
       module.originPos = {
         left: module.left,
         top: module.top,
+        fill: module.fill,
       }
       module.set({ left, top })
       canvas.renderAll()
       if (objects.length > 0) {
-        isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
+        if (!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) || isOutsideSurface(module, moduleSetupSurface)) {
+          isWarning = true
+          module.set({ fill: red })
+        }
+        // isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
       }
-
-      isOutsideSurface.push(
-        !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(module, true)) ||
-          !turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true)),
-      )
       module.setCoords()
     })
+    canvas.renderAll()
     otherModules = getOtherModules(rowModules)
     rowModules.forEach((module) => {
       const { top, left } = getPosotion(module, type, height, false)
-      const moduleOptions = { ...module, left, top, id: uuidv4() }
+      const moduleOptions = { ...module, left, top, id: uuidv4(), fill: module.fill }
       const copyModule = new QPolygon(module.points, moduleOptions)
+      copyModule.originPos = {
+        fill: copyModule.fill,
+      }
       canvas.add(copyModule)
       copyModules.push(copyModule)
       canvas.renderAll()
 
-      if (otherModules.length > 0) {
+      if (
-        isOverlapOtherModules.push(
+        isOverlapOtherModules(copyModule, otherModules) ||
-          otherModules.some(
+        !checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects) ||
-            (otherModule) =>
+        isOutsideSurface(copyModule, moduleSetupSurface)
-              turf.booleanOverlap(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)) ||
+      ) {
-              turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)),
+        isWarning = true
-          ),
+        copyModule.set({ fill: 'red' })
-        )
       }
-
-      if (objects.length > 0) {
-        isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
-      }
-
-      isOutsideSurface.push(
-        !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(copyModule, true)) ||
-          !turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(moduleSetupSurface, true)),
-      )
       module.setCoords()
     })
+    canvas.renderAll()
 
-    if (
+    if (isWarning) {
-      isOverlapOtherModules.some((isOverlap) => isOverlap) ||
-      isOverlapObjects.some((isOverlap) => isOverlap) ||
-      isOutsideSurface.some((isOutside) => isOutside)
-    ) {
       swalFire({
-        title: isOverlapOtherModules.some((isOverlap) => isOverlap)
+        title: '삽입할 수 없습니다.',
-          ? '겹치는 모듈이 있습니다.'
-          : isOverlapObjects.some((isOverlap) => isOverlap)
-            ? '모듈이 오브젝트와 겹칩니다.'
-            : '영역 밖',
         icon: 'error',
         type: 'confirm',
         confirmFn: () => {
           targetModules.forEach((module) => {
-            module.set({ top: module.originPos.top, left: module.originPos.left })
+            module.set({ top: module.originPos.top, left: module.originPos.left, fill: module.originPos.fill })
             module.setCoords()
           })
+          copyModules.forEach((module) => {
+            module.set({ fill: module.originPos.fill })
+          })
           canvas.renderAll()
           copyModules.forEach((module) => {
             canvas.remove(module)
@@ -750,6 +719,31 @@ export function useModule() {
     }
   }
 
+  const alignModule = (type) => {}
+
+  const isOverlapOtherModules = (module, otherModules) => {
+    return otherModules.some(
+      (otherModule) =>
+        turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)) ||
+        turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)),
+    )
+  }
+
+  const isOverlapObjects = (module, objects) => {
+    return !objects.some(
+      (object) =>
+        turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(object, true)) ||
+        turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(object, true)),
+    )
+  }
+
+  const isOutsideSurface = (module, moduleSetupSurface) => {
+    return (
+      !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(module, true)) ||
+      !turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true))
+    )
+  }
+
   const getRowModules = (target) => {
     return canvas
       .getObjects()
@@ -797,29 +791,6 @@ export function useModule() {
       .filter((obj) => [BATCH_TYPE.OPENING, BATCH_TYPE.TRIANGLE_DORMER, BATCH_TYPE.PENTAGON_DORMER, BATCH_TYPE.SHADOW].includes(obj.name))
   }
 
-  const getIsOverlapOtherModules = (module, otherModules) => {
-    return otherModules.some(
-      (otherModule) =>
-        turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)) ||
-        turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)),
-    )
-  }
-
-  const getIsOverlapObjects = (module, objects) => {
-    return !objects.some(
-      (object) =>
-        turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(object, true)) ||
-        turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(object, true)),
-    )
-  }
-
-  const getIsOutsideSurface = (module, moduleSetupSurface) => {
-    return (
-      !turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(module, true)) ||
-      !turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true))
-    )
-  }
-
   return {
     moduleMove,
     moduleMultiMove,

src/hooks/useAdsorptionPoint.js

@@ -36,11 +36,20 @@ export function useAdsorptionPoint() {
     canvas.renderAll()
   }
 
+  const removeAdsorptionPoint = () => {
+    const adsorptionPoints = getAdsorptionPoints()
+    adsorptionPoints.forEach((adsorptionPoint) => {
+      canvas.remove(adsorptionPoint)
+    })
+    canvas.renderAll()
+  }
+
   return {
     adsorptionPointAddMode,
     adsorptionPointMode,
     adsorptionRange,
     getAdsorptionPoints,
     adsorptionPointAddModeStateEvent,
+    removeAdsorptionPoint,
   }
 }

src/hooks/useContextMenu.js

@@ -36,6 +36,9 @@ 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'
+import { useCanvasSetting } from './option/useCanvasSetting'
+import { useGrid } from './common/useGrid'
+import { useAdsorptionPoint } from './useAdsorptionPoint'
 
 export function useContextMenu() {
   const canvas = useRecoilValue(canvasState)
@@ -57,7 +60,10 @@ export function useContextMenu() {
   const { moveSurfaceShapeBatch } = useSurfaceShapeBatch()
   const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
   const { addLine, removeLine } = useLine()
+  const { removeGrid } = useGrid()
+  const { removeAdsorptionPoint } = useAdsorptionPoint()
   const commonTextFont = useRecoilValue(fontSelector('commonText'))
+  const { settingsData, setSettingsDataSave } = useCanvasSetting()
   const { swalFire } = useSwal()
 
   const currentMenuSetting = () => {
@@ -78,7 +84,15 @@ export function useContextMenu() {
             {
               id: 'gridColorEdit',
               name: getMessage('modal.grid.color.edit'),
-              component: <ColorPickerModal id={popupId} color={gridColor} setColor={setGridColor} />,
+              component: (
+                <ColorPickerModal
+                  id={popupId}
+                  color={gridColor}
+                  setColor={setGridColor}
+                  settingsData={settingsData}
+                  setSettingsDataSave={setSettingsDataSave}
+                />
+              ),
             },
             {
               id: 'remove',
@@ -87,6 +101,10 @@ export function useContextMenu() {
             {
               id: 'removeAll',
               name: getMessage('delete.all'),
+              fn: () => {
+                removeGrid()
+                removeAdsorptionPoint()
+              },
             },
           ],
         ])
@@ -517,7 +535,15 @@ export function useContextMenu() {
               {
                 id: 'gridColorEdit',
                 name: getMessage('contextmenu.grid.color.edit'),
-                component: <ColorPickerModal id={popupId} color={gridColor} setColor={setGridColor} />,
+                component: (
+                  <ColorPickerModal
+                    id={popupId}
+                    color={gridColor}
+                    setColor={setGridColor}
+                    settingsData={settingsData}
+                    setSettingsDataSave={setSettingsDataSave}
+                  />
+                ),
               },
               {
                 id: 'remove',
@@ -531,12 +557,8 @@ export function useContextMenu() {
                 id: 'removeAll',
                 name: getMessage('contextmenu.remove.all'),
                 fn: () => {
-                  canvas
+                  removeGrid()
-                    .getObjects()
+                  removeAdsorptionPoint()
-                    .filter((obj) => ['tempGrid', 'lineGrid', 'dotGrid'].includes(obj.name))
-                    .forEach((grid) => {
-                      canvas.remove(grid)
-                    })
                   canvas.discardActiveObject()
                 },
               },