From a41fe47387cdc476faeaa70666d29939eb1cd54c Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Thu, 24 Oct 2024 17:58:36 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B0=A9=EC=9C=84=20=EB=B2=94=EC=9C=84?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modal/basic/step/Orientation.jsx          | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/floor-plan/modal/basic/step/Orientation.jsx b/src/components/floor-plan/modal/basic/step/Orientation.jsx
index 3ef15a21..98e10c0c 100644
--- a/src/components/floor-plan/modal/basic/step/Orientation.jsx
+++ b/src/components/floor-plan/modal/basic/step/Orientation.jsx
@@ -6,6 +6,19 @@ export default function Orientation({ setTabNum }) {
   const [compasDeg, setCompasDeg] = useState(0)
   const [hasAnglePassivity, setHasAnglePassivity] = useState(false)
 
+  const getDegree = (degree) => {
+    if (degree % 15 === 0) return degree
+
+    let value = Math.floor(degree / 15)
+    const remain = ((degree / 15) % 1).toFixed(5)
+
+    if (remain > 0.4) {
+      value++
+    }
+
+    return value * 15
+  }
+
   return (
     <>
       <div className="properties-setting-wrap">
@@ -18,7 +31,7 @@ export default function Orientation({ setTabNum }) {
                 {Array.from({ length: 180 / 15 }).map((dot, index) => (
                   <div
                     key={index}
-                    className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`}
+                    className={`circle ${getDegree(compasDeg) === 15 * (12 + index) ? 'act' : ''}`}
                     onClick={() => setCompasDeg(15 * (12 + index))}
                   >
                     {index === 0 && <i>180°</i>}
@@ -26,13 +39,13 @@ export default function Orientation({ setTabNum }) {
                   </div>
                 ))}
                 {Array.from({ length: 180 / 15 }).map((dot, index) => (
-                  <div key={index} className={`circle ${compasDeg === 15 * index ? 'act' : ''}`} onClick={() => setCompasDeg(15 * index)}>
+                  <div key={index} className={`circle ${getDegree(compasDeg) === 15 * index ? 'act' : ''}`} onClick={() => setCompasDeg(15 * index)}>
                     {index === 0 && <i>0°</i>}
                     {index === 6 && <i>90°</i>}
                   </div>
                 ))}
                 <div className="compas">
-                  <div className="compas-arr" style={{ transform: `rotate(${compasDeg}deg)` }}></div>
+                  <div className="compas-arr" style={{ transform: `rotate(${getDegree(compasDeg)}deg)` }}></div>
                 </div>
               </div>
             </div>