diff --git a/src/components/floor-plan/modal/basic/step/Orientation.jsx b/src/components/floor-plan/modal/basic/step/Orientation.jsx
index 17cd2e88..d815bd2c 100644
--- a/src/components/floor-plan/modal/basic/step/Orientation.jsx
+++ b/src/components/floor-plan/modal/basic/step/Orientation.jsx
@@ -275,31 +275,31 @@ export const Orientation = forwardRef((props, ref) => {
                     {Array.from({ length: 180 / 15 }).map((dot, index) => (
                       <div
                         key={index}
-                        className={`circle ${getDegreeInOrientation(inputCompasDeg) === -1 * (-15 * index + 180) || (index === 0 && inputCompasDeg >= 172 && index === 0 && inputCompasDeg <= 180) || (inputCompasDeg === -180 && index === 0) ? 'act' : ''}`}
+                        className={`circle ${getDegreeInOrientation(inputCompasDeg) === -15 * index + 180 || (index === 0 && inputCompasDeg >= 172 && index === 0 && inputCompasDeg <= 180) || (inputCompasDeg === -180 && index === 0) ? 'act' : ''}`}
                         onClick={() => {
                           if (index === 0) {
                             setInputCompasDeg(180)
                             return
                           }
-                          setInputCompasDeg(-1 * (-15 * index + 180))
+                          setInputCompasDeg(-15 * index + 180)
                         }}
                       >
                         {index === 0 && <i>180°</i>}
-                        {index === 6 && <i>-90°</i>}
+                        {index === 6 && <i>90°</i>}
                       </div>
                     ))}
                     {Array.from({ length: 180 / 15 }).map((dot, index) => (
                       <div
                         key={index}
-                        className={`circle ${inputCompasDeg !== 180 && getDegreeInOrientation(inputCompasDeg) === 15 * index ? 'act' : ''}`}
-                        onClick={() => setInputCompasDeg(15 * index)}
+                        className={`circle ${inputCompasDeg !== 180 && getDegreeInOrientation(inputCompasDeg) === -1 * 15 * index ? 'act' : ''}`}
+                        onClick={() => setInputCompasDeg(15 * index * -1)}
                       >
                         {index === 0 && <i>0°</i>}
-                        {index === 6 && <i>90°</i>}
+                        {index === 6 && <i>-90°</i>}
                       </div>
                     ))}
                     <div className="compas">
-                      <div className="compas-arr" style={{ transform: `rotate(${getDegreeInOrientation(inputCompasDeg)}deg)` }}></div>
+                      <div className="compas-arr" style={{ transform: `rotate(${-1 * getDegreeInOrientation(inputCompasDeg)}deg)` }}></div>
                     </div>
                   </div>
                 </div>
diff --git a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
index 673e4bd9..a84efccf 100644
--- a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
+++ b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
@@ -32,15 +32,40 @@ export default function FlowDirectionSetting(props) {
   const [flowDirection, setFlowDirection] = useState(target.direction)
   const { closePopup } = usePopup()
 
+  useEffect(() => {
+    let newCompassDeg = 0
+    if ([-15, 0, 15].includes(compasDeg)) {
+      newCompassDeg = 0
+    } else if ([30, 45, 60].includes(compasDeg)) {
+      newCompassDeg = 45
+    } else if ([75, 90, 105].includes(compasDeg)) {
+      newCompassDeg = 90
+    } else if ([120, 135, 150].includes(compasDeg)) {
+      newCompassDeg = 135
+    } else if ([165, 180, -165].includes(compasDeg)) {
+      newCompassDeg = 180
+    } else if ([-120, -135, -150].includes(compasDeg)) {
+      newCompassDeg = -135
+    } else if ([-105, -90, -75].includes(compasDeg)) {
+      newCompassDeg = -90
+    } else if ([-60, -45, -30].includes(compasDeg)) {
+      newCompassDeg = -45
+    } else {
+      newCompassDeg = ''
+    }
+    const newOrientation = orientations.find((item) => item.value === newCompassDeg)
+    setSelectedOrientation(newOrientation)
+  }, [compasDeg])
+
   const orientations = [
-    { name: `${getMessage('commons.none')}`, value: 0 },
-    { name: `${getMessage('commons.south')}`, value: 360 },
-    { name: `${getMessage('commons.south')}${getMessage('commons.east')}`, value: 315 },
-    { name: `${getMessage('commons.south')}${getMessage('commons.west')}`, value: 45 },
-    { name: `${getMessage('commons.east')}`, value: 270 },
-    { name: `${getMessage('commons.west')}`, value: 90 },
-    { name: `${getMessage('commons.north')}${getMessage('commons.east')}`, value: 225 },
-    { name: `${getMessage('commons.north')}${getMessage('commons.west')}`, value: 135 },
+    { name: `${getMessage('commons.none')}`, value: '' },
+    { name: `${getMessage('commons.south')}`, value: 0 },
+    { name: `${getMessage('commons.south')}${getMessage('commons.east')}`, value: 45 },
+    { name: `${getMessage('commons.south')}${getMessage('commons.west')}`, value: -45 },
+    { name: `${getMessage('commons.east')}`, value: 90 },
+    { name: `${getMessage('commons.west')}`, value: -90 },
+    { name: `${getMessage('commons.north')}${getMessage('commons.east')}`, value: 135 },
+    { name: `${getMessage('commons.north')}${getMessage('commons.west')}`, value: -135 },
     { name: `${getMessage('commons.north')}`, value: 180 },
   ]
 
@@ -109,6 +134,11 @@ export default function FlowDirectionSetting(props) {
                   value={selectedOrientation}
                   options={orientations}
                   onChange={(e) => {
+                    if (e.value === '') {
+                      setCompasDeg(null)
+                      setSelectedOrientation(e)
+                      return
+                    }
                     setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
                     setSelectedOrientation(e)
                     setCompasDeg(e.value)
@@ -137,31 +167,32 @@ export default function FlowDirectionSetting(props) {
             <div className="draw-flow-wrap">
               <div className="compas-box">
                 <div className="compas-box-inner">
-                  {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
+                  {Array.from({ length: 180 / 15 }).map((dot, index) => (
                     <div
                       key={index}
-                      className={`circle ${compasDeg === 15 * (12 + index) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
+                      className={`circle ${compasDeg === -15 * index + 180 ? 'act' : ''}`}
                       onClick={() => {
+                        if (index === 0) {
+                          setCompasDeg(180)
+                          return
+                        }
                         setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
-                        setCompasDeg(15 * (12 + index))
+                        setCompasDeg(-15 * index + 180)
                       }}
                     ></div>
                   ))}
-                  {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
+                  {Array.from({ length: 180 / 15 }).map((dot, index) => (
                     <div
                       key={index}
-                      className={`circle ${compasDeg === 15 * (index + 1) && type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH ? 'act' : ''}`}
+                      className={`circle ${compasDeg === -1 * 15 * index ? 'act' : ''}`}
                       onClick={() => {
                         setType(FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH)
-                        setCompasDeg(15 * (index + 1))
+                        setCompasDeg(15 * index * -1)
                       }}
                     ></div>
                   ))}
                   <div className="compas">
-                    <div
-                      className="compas-arr"
-                      style={{ transform: `${type === FLOW_DIRECTION_TYPE.TWENTY_FOUR_AZIMUTH && `rotate(${compasDeg}deg)`}` }}
-                    ></div>
+                    <div className="compas-arr" style={{ transform: `${`rotate(${-1 * compasDeg}deg)`}` }}></div>
                   </div>
                 </div>
               </div>
diff --git a/src/hooks/usePolygon.js b/src/hooks/usePolygon.js
index 9f0e390e..84f8e9bf 100644
--- a/src/hooks/usePolygon.js
+++ b/src/hooks/usePolygon.js
@@ -345,7 +345,7 @@ export const usePolygon = () => {
 
   //arrow의 compass 값으로 방향 글자 설정 필요
   const drawDirectionStringToArrow2 = (polygon, showDirectionText) => {
-    const { direction, surfaceCompass, moduleCompass, arrow } = polygon
+    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}`, {
         fontFamily: flowFontOptions.fontFamily.value,
@@ -371,7 +371,9 @@ export const usePolygon = () => {
 
     let text = ''
 
-    let compassType = (375 - getDegreeInOrientation(moduleCompass)) / 15
+    let compassType = (375 + getDegreeInOrientation(moduleCompass)) / 15
+
+    moduleCompass = -1 * moduleCompass
 
     if (moduleCompass === 0 || (moduleCompass < 0 && moduleCompass >= -6)) {
       compassType = 1
@@ -397,7 +399,7 @@ export const usePolygon = () => {
       compassType = 11
     } else if (moduleCompass < 0 && moduleCompass >= -171) {
       compassType = 12
-    } else if (moduleCompass === 180) {
+    } else if (Math.abs(moduleCompass) === 180) {
       compassType = 13
     }
 
@@ -432,7 +434,7 @@ export const usePolygon = () => {
             ? (text = '北北東')
             : (text = '南南西')
     } else if ([10].includes(compassType)) {
-      direction === 'north' ? (text = '南東') : direction === 'south' ? (text = '北西') : direction === 'west' ? (text = '南西') : (text = '北東')
+      direction === 'north' ? (text = '南東') : direction === 'south' ? (text = '北西') : direction === 'west' ? (text = '北東') : (text = '南西')
     } else if ([11, 12].includes(compassType)) {
       direction === 'north'
         ? (text = '南南東')
@@ -484,37 +486,37 @@ export const usePolygon = () => {
     }
 
     // 東,西,南,北
-    if ([360].includes(surfaceCompass)) {
+    if ([0].includes(surfaceCompass)) {
       text = '南'
-    } else if ([345, 330].includes(surfaceCompass)) {
+    } else if ([15, 30].includes(surfaceCompass)) {
       text = '南南東'
-    } else if ([315].includes(surfaceCompass)) {
+    } else if ([45].includes(surfaceCompass)) {
       text = '南東'
-    } else if ([300, 285].includes(surfaceCompass)) {
+    } else if ([60, 75].includes(surfaceCompass)) {
       text = '東南東'
-    } else if ([270].includes(surfaceCompass)) {
+    } else if ([90].includes(surfaceCompass)) {
       text = '東'
-    } else if ([255, 240].includes(surfaceCompass)) {
+    } else if ([105, 120].includes(surfaceCompass)) {
       text = '東北東'
-    } else if ([225].includes(surfaceCompass)) {
+    } else if ([135].includes(surfaceCompass)) {
       text = '北東'
-    } else if ([210, 195].includes(surfaceCompass)) {
+    } else if ([150, 165].includes(surfaceCompass)) {
       text = '北北東'
     } else if ([180].includes(surfaceCompass)) {
       text = '北'
-    } else if ([165, 150].includes(surfaceCompass)) {
+    } else if ([-165, -150].includes(surfaceCompass)) {
       text = '北北西'
-    } else if ([135].includes(surfaceCompass)) {
+    } else if ([-135].includes(surfaceCompass)) {
       text = '北西'
-    } else if ([120, 105].includes(surfaceCompass)) {
+    } else if ([-120, -105].includes(surfaceCompass)) {
       text = '西北西'
-    } else if ([90].includes(surfaceCompass)) {
+    } else if ([-90].includes(surfaceCompass)) {
       text = '西'
-    } else if ([75, 60].includes(surfaceCompass)) {
+    } else if ([-75, -60].includes(surfaceCompass)) {
       text = '西南西'
-    } else if ([45].includes(surfaceCompass)) {
+    } else if ([-45].includes(surfaceCompass)) {
       text = '西南'
-    } else if ([30, 15].includes(surfaceCompass)) {
+    } else if ([-30, -15].includes(surfaceCompass)) {
       text = '西西南'
     }