diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js
index 6cde3635..ebb0184a 100644
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/src/hooks/roofcover/useRoofAllocationSetting.js
@@ -18,7 +18,7 @@ import { menuTypeState } from '@/store/menuAtom'
 export function useRoofAllocationSetting(id) {
   const canvas = useRecoilValue(canvasState)
   const roofDisplay = useRecoilValue(roofDisplaySelector)
-  const { drawDirectionArrow, addLengthText, splitPolygonWithLines } = usePolygon()
+  const { drawDirectionArrow, addLengthText, splitPolygonWithLines, splitPolygonWithSeparate } = usePolygon()
   const [popupId, setPopupId] = useState(uuidv4())
   const { addPopup, closePopup, closeAll } = usePopup()
   const { getMessage } = useMessage()
@@ -188,16 +188,19 @@ export function useRoofAllocationSetting(id) {
     const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
     roofBases.forEach((roofBase) => {
       try {
-        splitPolygonWithLines(roofBase)
+        if (roofBase.separatePolygon.length > 0) {
+          splitPolygonWithSeparate(roofBase.separatePolygon)
+        } else {
+          splitPolygonWithLines(roofBase)
+        }
       } catch (e) {
         return
       }
-
       roofBase.innerLines.forEach((line) => {
         canvas.remove(line)
       })
 
-      // canvas.remove(roofBase)
+      canvas.remove(roofBase)
     })
 
     wallLines.forEach((wallLine) => {
diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js
index 56052379..a844dd6b 100644
--- a/src/hooks/usePolygon.js
+++ b/src/hooks/usePolygon.js
@@ -1026,6 +1026,47 @@ export const usePolygon = () => {
     })
   }
 
+  const splitPolygonWithSeparate = (separates) => {
+    separates.forEach((separate) => {
+      const points = separate.lines.map((line) => {
+        return { x: line.x1, y: line.y1 }
+      })
+      let defense = ''
+      switch (separate.attributes.direction) {
+        case 'top':
+          defense = 'east'
+          break
+        case 'right':
+          defense = 'south'
+          break
+        case 'bottom':
+          defense = 'west'
+          break
+        case 'left':
+          defense = 'north'
+          break
+      }
+
+      const roof = new QPolygon(points, {
+        fontSize: separate.fontSize,
+        stroke: 'black',
+        fill: 'transparent',
+        strokeWidth: 3,
+        name: POLYGON_TYPE.ROOF,
+        originX: 'center',
+        originY: 'center',
+        selectable: true,
+        defense: defense,
+        pitch: separate.attributes.pitch,
+        direction: defense,
+      })
+
+      canvas.add(roof)
+    })
+
+    canvas.renderAll()
+  }
+
   return {
     addPolygon,
     addPolygonByLines,
@@ -1033,5 +1074,6 @@ export const usePolygon = () => {
     drawDirectionArrow,
     addLengthText,
     splitPolygonWithLines,
+    splitPolygonWithSeparate,
   }
 }