인플루언서와 클라이언트를 매칭하는 광고 플랫폼 회사에서 인턴으로 근무할 당시 사내의 TF팀에서 진행하는 admin system 개발 프로젝트에 참여하게 되었습니다. 해당 프로젝트는 인플루언서 데이터를 효율적으로 관리하기 위한 내부용 admin page 개발이 목표였습니다.
기능을 개발하는 중간에 기획이 변경되어 동료가 맡았던 인플루언서 태그 기능의 볼륨이 초반 계획보다 커지게 되었습니다. 그러한 이유로 태그 생성하는 select box와 관련된 기능들을 구현해서 동료에게 전달하는 방식으로 업무가 수정되었습니다. 따라서 태그 생성과 관련된 코드들이 기존에 동료가 작성했던 코드를 수정하거나, 추가적으로 동료가 다시 이어서 개발을 진행해야 하는 상황이라 미완성의 상태로 남겨둔 부분들 또한 있습니다. 이러한 상황을 고려하여 읽어주시기 바랍니다.
기존의 방식
기존에 동료가 기획한 방식은 태그 목록을 불러와서 검색하고 태그를 해당 인플루언서에게 추가하는 select box 와 새로운 태그를 생성하는 input창을 분리해서 진행하는 방식이었습니다.
새로운 방식
React Select 라이브러리를 사용했습니다.
React Select 에서 제공하는 기능 중 creatable 기능 사용해서 목록에 없는 태그를 사용자가 검색할 경우 태그 생성하기 버튼이 select box 하단에 나타나도록 구현했습니다.
그렇게 한 이유
불필요한 input 창을 없애 간결한 UI 구성이 가능합니다.
사용자가 태그를 검색하기 위해 한번, 새로 생성하기 위해 또 한번 텍스트를 입력해야 하는 번거로움을 없앴습니다.
1. 이미 프로젝트 내에서 사용중이다.
새로운 라이브러리를 사용할 때 고려해야 할 사항 중 하나가 버전 충돌인데 그런 문제로부터 자유로웠습니다.