diff --git a/src/components/floor-plan/modal/basic/step/Orientation.jsx b/src/components/floor-plan/modal/basic/step/Orientation.jsx
index d06b6b39..dc08f9f4 100644
--- a/src/components/floor-plan/modal/basic/step/Orientation.jsx
+++ b/src/components/floor-plan/modal/basic/step/Orientation.jsx
@@ -48,8 +48,14 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
                 {Array.from({ length: 180 / 15 }).map((dot, index) => (
                   <div
                     key={index}
-                    className={`circle ${getDegreeInOrientation(compasDeg) === -1 * (-15 * index + 180) ? 'act' : ''}`}
-                    onClick={() => setCompasDeg(-1 * (-15 * index + 180))}
+                    className={`circle ${getDegreeInOrientation(compasDeg) === -1 * (-15 * index + 180) || (index === 0 && compasDeg >= 172 && index === 0 && compasDeg <= 180) || (compasDeg === -180 && index === 0) ? 'act' : ''}`}
+                    onClick={() => {
+                      if (index === 0) {
+                        setCompasDeg(180)
+                        return
+                      }
+                      setCompasDeg(-1 * (-15 * index + 180))
+                    }}
                   >
                     {index === 0 && <i>180°</i>}
                     {index === 6 && <i>-90°</i>}
@@ -58,7 +64,7 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
                 {Array.from({ length: 180 / 15 }).map((dot, index) => (
                   <div
                     key={index}
-                    className={`circle ${getDegreeInOrientation(compasDeg) === 15 * index ? 'act' : ''}`}
+                    className={`circle ${compasDeg !== 180 && getDegreeInOrientation(compasDeg) === 15 * index ? 'act' : ''}`}
                     onClick={() => setCompasDeg(15 * index)}
                   >
                     {index === 0 && <i>0°</i>}
diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx
index cfd9eea4..fb383392 100644
--- a/src/components/floor-plan/modal/setting01/FirstOption.jsx
+++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx
@@ -44,7 +44,7 @@ export default function FirstOption(props) {
       const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
 
       polygons.forEach((polygon) => {
-        setSurfaceShapePattern(polygon, item.column)
+        setSurfaceShapePattern(polygon, item.column, false, polygon.roofMaterial, true)
       })
       //디스플레이 설정 표시(단 건 선택)
     } else {
diff --git a/src/hooks/common/useCanvasConfigInitialize.js b/src/hooks/common/useCanvasConfigInitialize.js
index c178bf75..5ffcd4c5 100644
--- a/src/hooks/common/useCanvasConfigInitialize.js
+++ b/src/hooks/common/useCanvasConfigInitialize.js
@@ -31,7 +31,7 @@ export function useCanvasConfigInitialize() {
       .getObjects()
       .filter((polygon) => polygon.name === 'roof')
       .forEach((polygon) => {
-        setSurfaceShapePattern(polygon, roofDisplay.column)
+        setSurfaceShapePattern(polygon, roofDisplay.column, false, polygon.roofMaterial)
       })
     canvas.renderAll()
   }, [roofDisplay])
diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js
index 4807ec9b..5ce62cac 100644
--- a/src/hooks/usePolygon.js
+++ b/src/hooks/usePolygon.js
@@ -315,7 +315,35 @@ export const usePolygon = () => {
 
     let text = ''
 
-    const compassType = (375 - getDegreeInOrientation(moduleCompass)) / 15
+    let compassType = (375 - getDegreeInOrientation(moduleCompass)) / 15
+
+    if (moduleCompass === 0 || (moduleCompass < 0 && moduleCompass >= -6)) {
+      compassType = 1
+    } else if (moduleCompass < 0 && moduleCompass >= -21) {
+      compassType = 2
+    } else if (moduleCompass < 0 && moduleCompass >= -36) {
+      compassType = 3
+    } else if (moduleCompass < 0 && moduleCompass >= -51) {
+      compassType = 4
+    } else if (moduleCompass < 0 && moduleCompass >= -66) {
+      compassType = 5
+    } else if (moduleCompass < 0 && moduleCompass >= -81) {
+      compassType = 6
+    } else if (moduleCompass < 0 && moduleCompass >= -96) {
+      compassType = 7
+    } else if (moduleCompass < 0 && moduleCompass >= -111) {
+      compassType = 8
+    } else if (moduleCompass < 0 && moduleCompass >= -126) {
+      compassType = 9
+    } else if (moduleCompass < 0 && moduleCompass >= -141) {
+      compassType = 10
+    } else if (moduleCompass < 0 && moduleCompass >= -156) {
+      compassType = 11
+    } else if (moduleCompass < 0 && moduleCompass >= -171) {
+      compassType = 12
+    } else if (moduleCompass === 180) {
+      compassType = 13
+    }
 
     if ([1, 25].includes(compassType)) {
       direction === 'north' ? (text = '北') : direction === 'south' ? (text = '南') : direction === 'west' ? (text = '西') : (text = '東')
diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js
index a0442d9f..fdc4de86 100644
--- a/src/util/canvas-util.js
+++ b/src/util/canvas-util.js
@@ -957,6 +957,9 @@ export const getAllRelatedObjects = (id, canvas) => {
 
 // 모듈,회로 구성에서 사용하는 degree 범위 별 값
 export const getDegreeInOrientation = (degree) => {
+  if (degree === 180 || degree === -180) {
+    return 180
+  }
   if (degree >= 180 || degree < -180) {
     return 0
   }