diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js
index 9a299ca3..6533fe79 100644
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/src/hooks/roofcover/useRoofAllocationSetting.js
@@ -2,7 +2,7 @@ import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
 import { setSurfaceShapePattern } from '@/util/canvas-util'
-import { splitPolygonWithLines } from '@/util/qpolygon-utils'
+import { drawDirectionArrow, splitPolygonWithLines } from '@/util/qpolygon-utils'
 import { useSwal } from '@/hooks/useSwal'
 
 // 지붕면 할당
@@ -112,6 +112,7 @@ export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
 
     roofs.forEach((roof) => {
       setSurfaceShapePattern(roof)
+      drawDirectionArrow(roof)
     })
     setShowRoofAllocationSettingModal(false)
   }
diff --git a/src/hooks/surface/usePlacementShapeDrawing.js b/src/hooks/surface/usePlacementShapeDrawing.js
index b07a8031..4df37618 100644
--- a/src/hooks/surface/usePlacementShapeDrawing.js
+++ b/src/hooks/surface/usePlacementShapeDrawing.js
@@ -14,7 +14,7 @@ import { useTempGrid } from '@/hooks/useTempGrid'
 import { useEffect, useRef } from 'react'
 import { distanceBetweenPoints, setSurfaceShapePattern } from '@/util/canvas-util'
 import { fabric } from 'fabric'
-import { calculateAngle } from '@/util/qpolygon-utils'
+import { calculateAngle, drawDirectionArrow } from '@/util/qpolygon-utils'
 import {
   placementShapeDrawingAngle1State,
   placementShapeDrawingAngle2State,
@@ -212,9 +212,13 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
           strokeWidth: 3,
           selectable: true,
           name: POLYGON_TYPE.ROOF,
+          originX: 'center',
+          originY: 'center',
+          direction: 'south',
         })
 
         setSurfaceShapePattern(roof)
+        drawDirectionArrow(roof)
 
         lines.forEach((line) => {
           removeLine(line)
diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js
index 063d9d4d..83b6693f 100644
--- a/src/util/qpolygon-utils.js
+++ b/src/util/qpolygon-utils.js
@@ -1151,8 +1151,11 @@ export const splitPolygonWithLines = (polygon) => {
       fill: 'transparent',
       strokeWidth: 3,
       name: POLYGON_TYPE.ROOF,
+      originX: 'center',
+      originY: 'center',
       selectable: true,
       defense: defense,
+      direction: defense,
     })
 
     polygon.canvas.add(roof)
@@ -3058,7 +3061,7 @@ export const drawDirectionArrow = (polygon) => {
     polygon.canvas.remove(polygon.arrow)
   }
 
-  let centerPoint = { x: polygon.width / 2 + polygon.left, y: polygon.height / 2 + polygon.top }
+  let centerPoint = { x: polygon.left, y: polygon.top }
   let stickeyPoint
 
   const polygonMaxX = Math.max(...polygon.getCurrentPoints().map((point) => point.x))