[개발 일지] 셀렉트 박스 커스텀 하기 (feat. react-select)

• UI/UX 디자이너와의 회의를 통해 일부 페이지 시안이 수정되어 셀렉트 박스를 커스텀하게 디자인하기로 결정하였다. 이를 위해 react-select 라이브러리를 사용하였다.

• 시간을 설정하는 셀렉트 박스를 만들기 위해 24시간제를 12시간제로 변환하는 유틸 함수를 만들었고, 이를 통해 시간을 오전 00:00 형태로 변환하여 사용자에게 친화적으로 다가가도록 하였다.

• React Select 라이브러리를 사용하여 오픈 시간과 마감 시간을 선택할 수 있는 셀렉트 박스를 구현하였다. 이때, 각 셀렉트 박스는 props로 받아온 item 객체를 기준으로 필터링되며, onChange 옵션을 통해 상태 변경이 가능하다.

• 커스텀 스타일을 적용할 수 있으며, control은 선택된 아이템을 보여주는 영역, menu는 옵션들이 보여지는 드롭다운 메뉴를 나타낸다. 이후에는 컴포넌트 코딩보다는 다른 영역으로 분리하는 방법을 고려해볼 예정이다.