프로젝트를 하던 중 시간을 지정하는 기능을 구현해야 했습니다.
디자이너분께서 전달해준 디자인은 IOS 기기에서 사용하는 시간 선택기 느낌이었습니다.
처음엔 비슷한 디자인의 라이브러리를 찾아 구현하려고 했지만, 맞는 라이브러리가 없어서 직접 구현하기로 하였습니다. 🔥
우선 구현된 결과부터 보여드리겠습니다.
time-picker
이제 코드를 살펴봅시다.
우선 오전/오후, 시간, 분의 배열을 생성합니다.
그리고 스크롤에 맞출 높이값을 계산합니다.
저의 경우에는 최대 가로 너비가 520px인 rem
을 사용한 반응형 웹을 제작했기 때문에 위와 같이 세로 너비를 계산했습니다.
다음은 스크롤 이벤트 함수입니다.
period, hour, minute 세 스크롤 타입에 모두 적용할 수 있도록 작성했습니다.
마지막으로 UI를 구성하는 jsx코드입니다.
hour의 예시입니다. period와 minute도 비슷한 방식으로 할 수 있습니다.