[ZIMZIM] 공통 SelectBox 컴포넌트 만들기

폼에 셀렉트박스를 여러번 사용하게 되어 재사용할 수 있는 공통 셀렉트박스를 만들고자 했다.

처음에는 html tag인 select로 구성해보았다.

 

이렇게 구현했지만 option에 css 요소들을 직접 넣는것이 어려워 다른 방법을 선택해야 했다. 그래서 ul과 li로 리스트를 만드는 것으로 바꿔 구현해보았다.

 

아이콘을 넣고 css를 정리했다.

 

마지막으로 react-hook-form과의 연결이 필요했다.

사용자가 select box를 제외한 다른 영역을 클릭했을 때 select box가 사라지도록 만들어야 했다. 그래서 useCallback과 addEventlistener로 훅을 useSelectbox 커스텀 훅을 만들었다.

 

최종적으로 SelectBox 컴포넌트는 이렇게 만들어졌다.

 

 

최종적으로 form에 사용했을때는 이렇게 보여졌다. 사용측면이나 코드의 가독성을 위해 계속해서 리팩토링 해 나아갈 예정이다.