From 2514fc92148f6d8f1e6f63b3dfbc038c66f476e9 Mon Sep 17 00:00:00 2001
From: ysCha <yscha@interplug.co.kr>
Date: Mon, 30 Mar 2026 18:34:57 +0900
Subject: [PATCH] =?UTF-8?q?[1480]=EC=82=AC=EC=9D=98=20=EA=B0=81=EB=8F=84?=
 =?UTF-8?q?=20=EC=84=A4=EC=A0=95=EC=9D=84=20"=EA=B0=81=EB=8F=84"=EB=A1=9C?=
 =?UTF-8?q?=20=ED=96=88=EC=9D=84=20=EB=95=8C=20=EB=B0=9C=EC=83=9D=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=EB=AC=B8=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/common/useCanvasConfigInitialize.js |  4 ++--
 src/hooks/usePolygon.js                       | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/hooks/common/useCanvasConfigInitialize.js b/src/hooks/common/useCanvasConfigInitialize.js
index 46b71588..df4025d8 100644
--- a/src/hooks/common/useCanvasConfigInitialize.js
+++ b/src/hooks/common/useCanvasConfigInitialize.js
@@ -47,12 +47,12 @@ export function useCanvasConfigInitialize() {
       offsetTexts.forEach((obj) => {
         let text = `${!obj.originText ? '' : obj.originText}`
         if (!obj.onlyOffset) {
-          text = text + `-∠${getDegreeByChon(obj.pitch)}${angleUnit}`
+          text = text + `-∠${obj.roofAngle ?? getDegreeByChon(obj.pitch)}${angleUnit}`
         }
         obj.set({ text: text })
       })
       flowTexts.forEach((obj) => {
-        obj.set({ text: `${!obj.originText ? '' : obj.originText + '-'}∠${getDegreeByChon(obj.pitch)}${pitchText}` })
+        obj.set({ text: `${!obj.originText ? '' : obj.originText + '-'}∠${obj.roofAngle ?? getDegreeByChon(obj.pitch)}${pitchText}` })
       })
     }
 
diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js
index 2536b9f0..9b17419e 100644
--- a/src/hooks/usePolygon.js
+++ b/src/hooks/usePolygon.js
@@ -333,6 +333,7 @@ export const usePolygon = () => {
       moduleCompass: polygon.moduleCompass,
       visible: isFlowDisplay,
       pitch: polygon.roofMaterial?.pitch ?? 4,
+      roofAngle: polygon.roofMaterial?.angle,
       parentId: polygon.id,
     })
     arrow.setViewLengthText(false)
@@ -348,7 +349,7 @@ export const usePolygon = () => {
   const drawDirectionStringToArrow2 = (polygon, showDirectionText) => {
     let { direction, surfaceCompass, moduleCompass, arrow } = polygon
     if (moduleCompass === null || moduleCompass === undefined) {
-      const textObj = new fabric.Text(`${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText}`, {
+      const textObj = new fabric.Text(`${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : (arrow.roofAngle ?? getDegreeByChon(arrow.pitch))}${pitchText}`, {
         fontFamily: flowFontOptions.fontFamily.value,
         fontWeight: flowFontOptions.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
         fontStyle: flowFontOptions.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
@@ -357,6 +358,7 @@ export const usePolygon = () => {
         originX: 'center',
         originY: 'center',
         pitch: arrow.pitch,
+        roofAngle: arrow.roofAngle,
         name: 'flowText',
         selectable: false,
         left: arrow.stickeyPoint.x,
@@ -490,7 +492,7 @@ export const usePolygon = () => {
     text = text + (sameDirectionCnt.length + 1)
     polygon.set('directionText', text)
     const textObj = new fabric.Text(
-      `${showDirectionText && text} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`,
+      `${showDirectionText && text} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : (arrow.roofAngle ?? getDegreeByChon(arrow.pitch))}${pitchText})`,
       {
         fontFamily: flowFontOptions.fontFamily.value,
         fontWeight: flowFontOptions.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
@@ -498,6 +500,7 @@ export const usePolygon = () => {
         fontSize: flowFontOptions.fontSize.value,
         fill: flowFontOptions.fontColor.value,
         pitch: arrow.pitch,
+        roofAngle: arrow.roofAngle,
         originX: 'center',
         originY: 'center',
         name: 'flowText',
@@ -707,7 +710,7 @@ export const usePolygon = () => {
   const addTextByArrows = (arrows, txt, canvas) => {
     arrows.forEach((arrow, index) => {
       // const textStr = `${txt}${index + 1} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`
-      const textStr = `${txt} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : getDegreeByChon(arrow.pitch)}${pitchText})`
+      const textStr = `${txt} (${currentAngleType === ANGLE_TYPE.SLOPE ? arrow.pitch : (arrow.roofAngle ?? getDegreeByChon(arrow.pitch))}${pitchText})`
 
       const text = new fabric.Text(`${textStr}`, {
         fontFamily: flowFontOptions.fontFamily.value,
@@ -716,6 +719,7 @@ export const usePolygon = () => {
         fontSize: flowFontOptions.fontSize.value,
         fill: flowFontOptions.fontColor.value,
         pitch: arrow.pitch,
+        roofAngle: arrow.roofAngle,
         originX: 'center',
         originY: 'center',
         name: 'flowText',