diff --git a/src/components/fabric/QLine.js b/src/components/fabric/QLine.js
index 7b4e2196..a1d56b08 100644
--- a/src/components/fabric/QLine.js
+++ b/src/components/fabric/QLine.js
@@ -148,7 +148,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
 
   getLength() {
     //10배 곱해진 값 return
-    return Number(this.length.toFixed(0) * 10)
+    return Number(this.length.toFixed(2) * 10)
   },
 
   setViewLengthText(bool) {
diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js
index 76c8dd6c..b28a3b47 100644
--- a/src/components/fabric/QPolygon.js
+++ b/src/components/fabric/QPolygon.js
@@ -183,7 +183,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       const end = points[(i + 1) % points.length]
       const dx = end.x - start.x
       const dy = end.y - start.y
-      const length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(0)) * 10
+      const length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(2)) * 10
 
       let midPoint
 
diff --git a/src/hooks/common/useCanvasConfigInitialize.js b/src/hooks/common/useCanvasConfigInitialize.js
index 2e91fad1..c2775376 100644
--- a/src/hooks/common/useCanvasConfigInitialize.js
+++ b/src/hooks/common/useCanvasConfigInitialize.js
@@ -6,6 +6,7 @@ import { setSurfaceShapePattern } from '@/util/canvas-util'
 import { useFont } from '@/hooks/common/useFont'
 import { useGrid } from '@/hooks/common/useGrid'
 import { globalFontAtom } from '@/store/fontAtom'
+import { useRoof } from '@/hooks/common/useRoof'
 
 export function useCanvasConfigInitialize() {
   const canvas = useRecoilValue(canvasState)
@@ -15,6 +16,7 @@ export function useCanvasConfigInitialize() {
   const setDotLineGridSetting = useSetRecoilState(dotLineGridSettingState)
   const {} = useFont()
   const {} = useGrid()
+  const {} = useRoof()
 
   useEffect(() => {
     if (!canvas) return
diff --git a/src/hooks/common/useRoof.js b/src/hooks/common/useRoof.js
new file mode 100644
index 00000000..8aee0344
--- /dev/null
+++ b/src/hooks/common/useRoof.js
@@ -0,0 +1,151 @@
+import { canvasState } from '@/store/canvasAtom'
+import { allocDisplaySelector, roofDisplaySelector } from '@/store/settingAtom'
+import { useRecoilValue } from 'recoil'
+import { useEffect } from 'react'
+
+export function useRoof() {
+  const canvas = useRecoilValue(canvasState)
+  const allocDisplay = useRecoilValue(allocDisplaySelector)
+  const roofDisplay = useRecoilValue(roofDisplaySelector)
+
+  useEffect(() => {
+    if (!canvas) return
+    canvas
+      .getObjects()
+      .filter((polygon) => polygon.name === 'roof')
+      .forEach((polygon) => {
+        if (allocDisplay) {
+          setSurfaceShapePattern(polygon, roofDisplay.column)
+        } else {
+          polygon.set('fill', null)
+        }
+      })
+    canvas.renderAll()
+  }, [allocDisplay])
+
+  const setSurfaceShapePattern = (polygon, mode = 'onlyBorder') => {
+    const ratio = window.devicePixelRatio || 1
+
+    let width = 265 / 10
+    let height = 150 / 10
+    let roofStyle = 2
+    const inputPatternSize = { width: width, height: height } //임시 사이즈
+    const patternSize = { ...inputPatternSize } // 입력된 값을 뒤집기 위해
+
+    if (polygon.direction === 'east' || polygon.direction === 'west') {
+      //세로형이면 width height를 바꿈
+      ;[patternSize.width, patternSize.height] = [inputPatternSize.height, patternSize.width]
+    }
+
+    // 패턴 소스를 위한 임시 캔버스 생성
+    const patternSourceCanvas = document.createElement('canvas')
+    patternSourceCanvas.width = polygon.width * ratio
+    patternSourceCanvas.height = polygon.height * ratio
+    const ctx = patternSourceCanvas.getContext('2d')
+    let offset = roofStyle === 1 ? 0 : patternSize.width / 2
+
+    const rows = Math.floor(patternSourceCanvas.height / patternSize.height)
+    const cols = Math.floor(patternSourceCanvas.width / patternSize.width)
+
+    ctx.strokeStyle = mode === 'allPainted' ? 'black' : 'green'
+    ctx.lineWidth = mode === 'allPainted' ? 1 : 0.4
+    ctx.fillStyle = mode === 'allPainted' ? 'rgba(0, 159, 64, 0.7)' : 'white'
+
+    if (polygon.direction === 'east' || polygon.direction === 'west') {
+      offset = roofStyle === 1 ? 0 : patternSize.height / 2
+      for (let col = 0; col <= cols; col++) {
+        const x = col * patternSize.width
+        const yStart = 0
+        const yEnd = patternSourceCanvas.height
+        ctx.beginPath()
+        ctx.moveTo(x, yStart) // 선 시작점
+        ctx.lineTo(x, yEnd) // 선 끝점
+        ctx.stroke()
+        if (mode === 'allPainted') {
+          ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart)
+        }
+
+        for (let row = 0; row <= rows; row++) {
+          const y = row * patternSize.height + (col % 2 === 0 ? 0 : offset)
+          const xStart = col * patternSize.width
+          const xEnd = xStart + patternSize.width
+          ctx.beginPath()
+          ctx.moveTo(xStart, y) // 선 시작점
+          ctx.lineTo(xEnd, y) // 선 끝점
+          ctx.stroke()
+          if (mode === 'allPainted') {
+            ctx.fillRect(xStart, y, xEnd - xStart, patternSize.height)
+          }
+        }
+      }
+    } else {
+      for (let row = 0; row <= rows; row++) {
+        const y = row * patternSize.height
+
+        ctx.beginPath()
+        ctx.moveTo(0, y) // 선 시작점
+        ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점
+        ctx.stroke()
+        if (mode === 'allPainted') {
+          ctx.fillRect(0, y, patternSourceCanvas.width, patternSize.height)
+        }
+
+        for (let col = 0; col <= cols; col++) {
+          const x = col * patternSize.width + (row % 2 === 0 ? 0 : offset)
+          const yStart = row * patternSize.height
+          const yEnd = yStart + patternSize.height
+
+          ctx.beginPath()
+          ctx.moveTo(x, yStart) // 선 시작점
+          ctx.lineTo(x, yEnd) // 선 끝점
+          ctx.stroke()
+          if (mode === 'allPainted') {
+            ctx.fillRect(x, yStart, patternSize.width, yEnd - yStart)
+          }
+        }
+      }
+    }
+
+    const hachingPatternSourceCanvas = document.createElement('canvas')
+
+    if (mode === 'lineHatch') {
+      hachingPatternSourceCanvas.width = polygon.width * ratio
+      hachingPatternSourceCanvas.height = polygon.height * ratio
+
+      const ctx1 = hachingPatternSourceCanvas.getContext('2d')
+
+      const gap = 10
+
+      ctx1.strokeStyle = 'green' // 선 색상
+      ctx1.lineWidth = 0.3 // 선 두께
+
+      for (let x = 0; x < hachingPatternSourceCanvas.width + hachingPatternSourceCanvas.height; x += gap) {
+        ctx1.beginPath()
+        ctx1.moveTo(x, 0) // 선 시작점
+        ctx1.lineTo(0, x) // 선 끝점
+        ctx1.stroke()
+      }
+    }
+
+    const combinedPatternCanvas = document.createElement('canvas')
+    combinedPatternCanvas.width = polygon.width * ratio
+    combinedPatternCanvas.height = polygon.height * ratio
+    const combinedCtx = combinedPatternCanvas.getContext('2d')
+
+    // 첫 번째 패턴을 그린 후 두 번째 패턴을 덧입힘
+    combinedCtx.drawImage(patternSourceCanvas, 0, 0)
+    combinedCtx.drawImage(hachingPatternSourceCanvas, 0, 0)
+
+    // 패턴 생성
+    const pattern = new fabric.Pattern({
+      source: combinedPatternCanvas,
+      repeat: 'repeat',
+    })
+
+    polygon.set('fill', null)
+    polygon.set('fill', pattern)
+    polygon.canvas?.renderAll()
+  }
+
+  return {}
+}
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index 19b9a879..e00c78e8 100644
--- a/src/hooks/usePlan.js
+++ b/src/hooks/usePlan.js
@@ -39,6 +39,7 @@ export function usePlan() {
       'length',
       'idx',
       'direction',
+      'parentDirection',
       'lines',
       'points',
       'lockMovementX',