방위 범위입력 추가

This commit is contained in:
minsik 2024-10-24 17:58:36 +09:00
parent a250507ab9
commit a41fe47387

View File

@ -6,6 +6,19 @@ export default function Orientation({ setTabNum }) {
const [compasDeg, setCompasDeg] = useState(0) const [compasDeg, setCompasDeg] = useState(0)
const [hasAnglePassivity, setHasAnglePassivity] = useState(false) 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 ( return (
<> <>
<div className="properties-setting-wrap"> <div className="properties-setting-wrap">
@ -18,7 +31,7 @@ export default function Orientation({ setTabNum }) {
{Array.from({ length: 180 / 15 }).map((dot, index) => ( {Array.from({ length: 180 / 15 }).map((dot, index) => (
<div <div
key={index} key={index}
className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`} className={`circle ${getDegree(compasDeg) === 15 * (12 + index) ? 'act' : ''}`}
onClick={() => setCompasDeg(15 * (12 + index))} onClick={() => setCompasDeg(15 * (12 + index))}
> >
{index === 0 && <i>180°</i>} {index === 0 && <i>180°</i>}
@ -26,13 +39,13 @@ export default function Orientation({ setTabNum }) {
</div> </div>
))} ))}
{Array.from({ length: 180 / 15 }).map((dot, index) => ( {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 === 0 && <i>0°</i>}
{index === 6 && <i>90°</i>} {index === 6 && <i>90°</i>}
</div> </div>
))} ))}
<div className="compas"> <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> </div>
</div> </div>