contextMenu 지붕재 삭제, 지붕재 전체 삭제 추가

src/hooks/common/useRoofFn.js

@@ -1,11 +1,13 @@
 import { useRecoilValue } from 'recoil'
-import { canvasState } from '@/store/canvasAtom'
+import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { selectedRoofMaterialSelector } from '@/store/settingAtom'
 import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
+import { POLYGON_TYPE } from '@/common/common'
 
 export function useRoofFn() {
   const canvas = useRecoilValue(canvasState)
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
+  const currentObject = useRecoilValue(currentObjectState)
 
   //면형상 선택 클릭시 지붕 패턴 입히기
   function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false, roofMaterial = selectedRoofMaterial) {
@@ -141,5 +143,22 @@ export function useRoofFn() {
     polygon.roofMaterial = roofMaterial
     polygon.canvas?.renderAll()
   }
-  return { setSurfaceShapePattern }
+
+  function removeRoofMaterial(roof = currentObject) {
+    if (roof === null || roof.name !== POLYGON_TYPE.ROOF) {
+      return
+    }
+    roof.set('fill', null)
+    roof.roofMaterial = null
+    canvas?.renderAll()
+  }
+
+  function removeAllRoofMaterial() {
+    const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+    roofBases.forEach((roofBase) => {
+      removeRoofMaterial(roofBase)
+    })
+  }
+
+  return { setSurfaceShapePattern, removeRoofMaterial, removeAllRoofMaterial }
 }

src/hooks/useContextMenu.js

@@ -36,6 +36,7 @@ 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 { useRoofFn } from '@/hooks/common/useRoofFn'
 
 export function useContextMenu() {
   const canvas = useRecoilValue(canvasState)
@@ -59,6 +60,7 @@ export function useContextMenu() {
   const { addLine, removeLine } = useLine()
   const commonTextFont = useRecoilValue(fontSelector('commonText'))
   const { swalFire } = useSwal()
+  const { removeRoofMaterial, removeAllRoofMaterial } = useRoofFn()
 
   const currentMenuSetting = () => {
     switch (currentMenu) {
@@ -110,10 +112,12 @@ export function useContextMenu() {
             {
               id: 'roofMaterialRemove',
               name: getMessage('contextmenu.roof.material.remove'),
+              fn: () => removeRoofMaterial(),
             },
             {
               id: 'roofMaterialRemoveAll',
               name: getMessage('contextmenu.roof.material.remove.all'),
+              fn: () => removeAllRoofMaterial(),
             },
             {
               id: 'selectMove',

src/store/settingAtom.js

@@ -239,16 +239,6 @@ export const roofMaterialsSelector = selector({
   },
 })
 
-// 지붕면 할당에서 추가된 지붕재 목록
-export const addedRoofsSelector = selector({
-  key: 'addedRoofsSelector',
-  get: ({ get }) => {
-    const basicSetting = get(basicSettingState)
-    return basicSetting.roofs
-  },
-  dangerouslyAllowMutability: true,
-})
-
 /**
  * 현재 선택된 물건 번호
  */