[react-circle-wheel-select-box] 리액트용 원형 휠 선택 박스

 

안녕하세요. 이번에는 원형으로 휠을 하며 항목을 선택할 수 있는 컴포넌트를 개발해 보았습니다.

 

패키지 설치 방법

npm i @wisdomstar94/react-circle-wheel-select-box

 

테스트 영상 및  사용 예제 확인

https://github.com/wisdomstar94/react-circle-wheel-select-box 의 README.md 파일을 참고해주세요.

 

개발 시 참고 UI

아래와 같이 네이버에서 사용중인 원형 UI 를 참고하여 비슷하게 직접 구현해보았습니다.

 

고려 사항

포인터가 시작된 지점과 휠 컨테이너 중앙 지점에 대한 좌표와 역탄젠트 함수를 이용하여 각도를 계산하고 그 각도만큼 항목들을 회전 시켜주어 휠을 구현하였습니다.