diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index ef7c7cd0..a540773e 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -2226,8 +2226,10 @@ export function useMode() {
     // handleOuterLineTemplateB(params)
     console.log(polygon.lines.length)
     if (polygon.lines.length === 4) {
+      console.log('4각형')
       handleTemplateBRect(params)
-    } else if (polygon.length === 6) {
+    } else if (polygon.lines.length === 6) {
+      console.log('6각형')
       handleTemplateB(params)
     }
   }
@@ -2259,6 +2261,9 @@ export function useMode() {
       isActiveLengthText: false,
     }
 
+    const bigRoofPolygon = []
+    const middleRoofPolygon = []
+
     polygon.lines.forEach((line, index) => {
       let outline
       if (index === 0) {
@@ -2269,6 +2274,9 @@ export function useMode() {
         centerLinePoint.y2 = centeredPoint
         centerDashLinePoint.y1 = line.y1 - eaves
         centerDashLinePoint.y2 = line.y2 + eaves
+        bigRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves }
+        middleRoofPolygon[0] = { x: line.x1 - edge, y: centeredPoint }
+        middleRoofPolygon[1] = { x: line.x2 - edge, y: line.y2 + eaves }
       } else if (index === 1) {
         outline = new QLine([line.x1 - edge, line.y1 + eaves, line.x2 + edge, line.y2 + eaves], qlineOpt)
         const centeredPoint = getCenterPoint(line.x1, line.x2)
@@ -2277,6 +2285,8 @@ export function useMode() {
         centerDashLinePoint.x2 = centeredPoint
       } else if (index === 2) {
         outline = new QLine([line.x1 + edge, line.y1 + eaves, line.x2 + edge, line.y2 - eaves], qlineOpt)
+        bigRoofPolygon[3] = { x: line.x2 + edge, y: line.y2 - eaves }
+        middleRoofPolygon[2] = { x: line.x1 + edge, y: line.y1 + eaves }
       } else if (index === 3) {
         outline = new QLine([line.x1 + edge, line.y1 - eaves, line.x2 - edge, line.y2 - eaves], qlineOpt)
       }
@@ -2295,6 +2305,18 @@ export function useMode() {
     )
     canvas.add(centerDashLine2)
 
+    bigRoofPolygon[1] = { x: centerLine.x1, y: centerLine.y1 }
+    bigRoofPolygon[2] = { x: centerLine.x2, y: centerLine.y2 }
+
+    middleRoofPolygon[3] = { x: centerLinePoint.x2, y: centerLinePoint.y2 }
+
+    const roofPatternPolygonArray = []
+    roofPatternPolygonArray.push(bigRoofPolygon)
+    roofPatternPolygonArray.push(middleRoofPolygon)
+    if (roofPatternPolygonArray.length > 0) {
+      setRoofPolygonPattern({ roofPatternPolygonArray, lines: polygon.lines })
+    }
+
     canvas.renderAll()
   }
 
@@ -2354,6 +2376,13 @@ export function useMode() {
       fontSize: fontSize,
     }
 
+    /**
+     * 지붕 패턴을 위한 폴리곤 좌표 생성
+     */
+    const bigRoofPolygon = []
+    const middleRoofPolygon = []
+    const smallRoofPolygon = []
+
     rerangeOdd.forEach((line, index) => {
       const centeredPoint = getCenterPoint(line.y1, line.y2)
       let points1 = []
@@ -2367,26 +2396,50 @@ export function useMode() {
           centralLinePoint.y2 = centeredPoint
           centralDashLinePoint.y1 = line.y1 - eaves
           centralDashLinePoint.y2 = line.y2 + eaves
+          if (polygon.shape === 2) {
+            middleRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves }
+            middleRoofPolygon[1] = { x: line.x1 - edge, y: centeredPoint }
+          } else {
+            bigRoofPolygon[1] = { x: line.x1 - edge, y: centeredPoint }
+            bigRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves }
+            middleRoofPolygon[1] = { x: line.x2 - edge, y: line.y2 + eaves }
+          }
         } else if (index === 1) {
           if (polygon.shape === 2) {
             points1 = [line.x1 + edge, line.y1 - eaves, line.x1 + edge, centeredPoint]
             points2 = [line.x1 + edge, centeredPoint, line.x2 + edge, line.y2 + eaves]
             centralSubLinePoint.x2 = line.x1 + edge
             centralSubLinePoint.y2 = centeredPoint
+            bigRoofPolygon[2] = { x: line.x2 + edge, y: line.y2 + eaves }
+            bigRoofPolygon[3] = { x: line.x2 + edge, y: centeredPoint }
+            smallRoofPolygon[0] = { x: line.x1 + edge, y: centeredPoint }
+            smallRoofPolygon[1] = { x: line.x1 + edge, y: line.y1 - eaves }
           } else {
             points1 = [line.x1 + edge, getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2), line.x2 + edge, line.y2 + eaves]
             points2 = [line.x1, getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2), line.x1, line.y1 + eaves]
             centralLinePoint.x2 = line.x1 + edge
             centralSubLinePoint.y1 = getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2)
             centralSubLinePoint.y2 = getCenterPoint(rerangeOdd[2].y1, rerangeOdd[2].y2)
+            bigRoofPolygon[3] = { x: line.x1 + edge, y: centralSubLinePoint.y1 }
+            middleRoofPolygon[2] = { x: line.x2 + edge, y: line.y2 + eaves }
+            smallRoofPolygon[0] = { x: line.x1, y: centralSubLinePoint.y1 }
+            smallRoofPolygon[1] = { x: line.x1, y: line.y1 + eaves }
           }
         } else if (index === 2) {
           if (polygon.shape === 2) {
             points1 = [line.x1 + edge, line.y1 - eaves, line.x2 + edge, centralSubLinePoint.y2]
             points2 = [line.x2, line.y2 - eaves, line.x2, centralSubLinePoint.y2]
+            bigRoofPolygon[4] = { x: line.x2 + edge, y: centralSubLinePoint.y2 }
+            middleRoofPolygon[3] = { x: line.x1 + edge, y: line.y1 - eaves }
+            smallRoofPolygon[2] = { x: line.x2, y: line.y2 - eaves }
+            smallRoofPolygon[3] = { x: line.x2, y: centralSubLinePoint.y2 }
           } else {
             points1 = [line.x1 + edge, line.y1 - eaves, line.x2 + edge, centeredPoint]
             points2 = [line.x2 + edge, centeredPoint, line.x2 + edge, line.y2 + eaves]
+            bigRoofPolygon[4] = { x: line.x1 + edge, y: centralSubLinePoint.y2 }
+            bigRoofPolygon[5] = { x: line.x1 + edge, y: line.y1 - eaves }
+            smallRoofPolygon[2] = { x: line.x2 + edge, y: line.y2 + eaves }
+            smallRoofPolygon[3] = { x: line.x2 + edge, y: centeredPoint }
           }
         }
       } else {
@@ -2395,12 +2448,26 @@ export function useMode() {
           centralSubLinePoint.x1 = line.x1 - edge
           centralSubLinePoint.y1 = getCenterPoint(line.y1, line.y2)
           centralSubLinePoint.y2 = getCenterPoint(line.y1, line.y2)
+          if (polygon.shape === 1) {
+            bigRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves }
+            bigRoofPolygon[1] = { x: line.x1 - edge, y: getCenterPoint(line.y1, line.y2) }
+            smallRoofPolygon[0] = { x: line.x1 - edge, y: getCenterPoint(line.y1, line.y2) }
+            smallRoofPolygon[1] = { x: line.x2 - edge, y: line.y2 + eaves }
+          } else {
+            bigRoofPolygon[0] = { x: line.x1 - edge, y: centeredPoint }
+            bigRoofPolygon[1] = { x: line.x1 - edge, y: line.y2 + eaves }
+            smallRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves }
+            smallRoofPolygon[1] = { x: centralSubLinePoint.x1, y: centralSubLinePoint.y1 }
+          }
         } else if (index === 1) {
           if (polygon.shape === 1) {
             points1 = [line.x1 - edge, centralSubLinePoint.y1, line.x2 - edge, line.y2 + eaves]
             points2 = [line.x1, centralSubLinePoint.y1, line.x1, line.y1 + eaves]
             centralLinePoint.x1 = line.x1 - edge
             centralSubLinePoint.x2 = line.x2
+            bigRoofPolygon[2] = { x: line.x1 - edge, y: centralSubLinePoint.y2 }
+            middleRoofPolygon[1] = { x: line.x2 - edge, y: line.y2 + eaves }
+            smallRoofPolygon[2] = { x: line.x1, y: line.y1 + eaves }
           } else {
             points1 = [line.x1 + edge, line.y1 - eaves, line.x2 + edge, centeredPoint]
             points2 = [line.x2 + edge, centeredPoint, line.x2 + edge, line.y2 + eaves]
@@ -2409,6 +2476,9 @@ export function useMode() {
             centralLinePoint.y2 = centeredPoint
             centralDashLinePoint.y1 = line.y1 - eaves
             centralDashLinePoint.y2 = line.y2 + eaves
+            bigRoofPolygon[2] = { x: line.x2 + edge, y: line.y2 + eaves }
+            bigRoofPolygon[3] = { x: line.x2 + edge, y: centralLinePoint.y2 }
+            middleRoofPolygon[3] = { x: line.x1 + edge, y: line.y1 - eaves }
           }
         } else {
           if (polygon.shape === 1) {
@@ -2419,11 +2489,18 @@ export function useMode() {
             centralLinePoint.y2 = centeredPoint
             centralDashLinePoint.y1 = line.y1 - eaves
             centralDashLinePoint.y2 = line.y2 + eaves
+            bigRoofPolygon[5] = { x: line.x1 + edge, y: line.y1 - eaves }
+            middleRoofPolygon[2] = { x: line.x2 + edge, y: line.y2 + eaves }
           } else {
             points1 = [line.x1 - edge, line.y1 - eaves, line.x2 - edge, centralSubLinePoint.y1]
             points2 = [line.x2, line.y2 - eaves, line.x2, centralSubLinePoint.y2]
             centralLinePoint.x1 = line.x1 - edge
             centralSubLinePoint.x2 = line.x2
+            bigRoofPolygon[4] = { x: line.x2 - edge, y: centralLinePoint.y1 }
+            bigRoofPolygon[5] = { x: line.x2 - edge, y: centralSubLinePoint.y2 }
+            middleRoofPolygon[0] = { x: line.x1 - edge, y: line.y1 - eaves }
+            smallRoofPolygon[2] = { x: line.x2, y: centralSubLinePoint.y2 }
+            smallRoofPolygon[3] = { x: line.x2, y: line.y2 - eaves }
           }
         }
       }
@@ -2549,6 +2626,34 @@ export function useMode() {
     )
     canvas.add(centralSubDashLine)
 
+    if (polygon.shape === 1) {
+      bigRoofPolygon[3] = { x: centralLine.x1, y: centralLine.y1 }
+      bigRoofPolygon[4] = { x: centralLine.x2, y: centralLine.y2 }
+      middleRoofPolygon[0] = { x: centralLine.x1, y: centralLine.y1 }
+      middleRoofPolygon[3] = { x: centralLine.x2, y: centralLine.y2 }
+      smallRoofPolygon[3] = { x: centralSubLinePoint.x2, y: centralSubLinePoint.y2 }
+    } else if (polygon.shape === 2) {
+      bigRoofPolygon[0] = { x: centralLinePoint.x1, y: centralLinePoint.y1 }
+      bigRoofPolygon[1] = { x: centralLinePoint.x1, y: centralDashLinePoint.y2 }
+      bigRoofPolygon[5] = { x: centralLinePoint.x2, y: centralLinePoint.y2 }
+      middleRoofPolygon[2] = { x: centralLine.x2, y: centralLine.y2 }
+    } else if (polygon.shape === 3) {
+      bigRoofPolygon[2] = { x: centralLine.x2, y: centralLine.y2 }
+      middleRoofPolygon[0] = { x: centralLine.x1, y: centralLine.y1 }
+      middleRoofPolygon[3] = { x: centralLine.x2, y: centralLine.y2 }
+    } else if (polygon.shape === 4) {
+      middleRoofPolygon[1] = { x: centralLine.x1, y: centralLine.y1 }
+      middleRoofPolygon[2] = { x: centralLine.x2, y: centralLine.y2 }
+    }
+
+    const roofPatternPolygonArray = []
+    // if (bigRoofPolygon.length > 0 && middleRoofPolygon.length > 0 && smallRoofPolygon.length > 0) {
+    roofPatternPolygonArray.push(bigRoofPolygon)
+    roofPatternPolygonArray.push(middleRoofPolygon)
+    roofPatternPolygonArray.push(smallRoofPolygon)
+    setRoofPolygonPattern({ roofPatternPolygonArray, lines: polygon.lines })
+    // }
+
     canvas.renderAll()
   }