[Tondo] (React) SearchPage - react beautiful dnd 사용

체크 포인트 02 - SearchPage.js react-beautiful-dnd 사용

우선 antd와 react-beautiful-dnd에게 감사의 말씀을 전한다.. 디자인 라이브러리를 사용하니깐, 엄청 깔끔해보인다. 

왼쪽에 antd chart liquid로 악성댓글/전체댓글의 값을 퍼센트로 나타내고, 오른쪽에는 간단한 정보들을 보여준다.

바로 아래는 탭 창이 있는데, 댓글의 목록을 가져와서 채널명으로 변환시켜준다. 복사하기 버튼을 누르면 클립보드에 복사가 된다. 

react-beautiful-dnd에서 제공하는 템플릿이다. 리스트의 엘리먼트를 드래그앤 드롭으로 옮길 수 있고 이를 state에 저장하여 값을 사용할 수 있다.

다음에는 결과값을 리스트 해서 보여주는 페이지를 만들예정인데, 몽고DB에서 가져와서 리스트를 만들어야하지만, 우선적으로 React만 사용해서 틀을 만들고, 몽고DB는 나중에 연결하겠다..