[DEV LOG] 2021.09.13 이세경

### COMMIT -m
- add: draganddrop, sidebar

### ISSUE
- drop할때 생기는 약간의 삐긋덕거림..
- 지금은 drag하는 item의 target이 div이 하나뿐이지만, , 태그를 포함한 div를 target으로 하면 target이 자꾸 바뀌게 된다.
```js
onDragStart(), onDragEnd(), onDragEnter(), onDragOver() 이라는 이벤트를 새롭게 배워서 프로젝트에 적용하였다.
beautiful dnd react 라이브러리를 쓰면 더욱 잘 구현할수 있는 방법이 있었지만 한번 스스로 구현해보고 싶어 도전 했고 100%로 성공은 아니지만 99%정도는 성공한거 같다. ㅎㅎ

drag and drop 구현시 핵심임 "useRef()와 배열의 스와핑(정렬)" 하는 것이다.
useRef()를 사용하여 지금 드래그를 하는 중인 타겟을 할당해주면서 전역으로 모든 함수에서 사용하는 것,
현재 drop area에 있는 정렬된 아이템들을 깊게 복사하여 아이템들의 자리를 바뀌어 새로운 배열로 리턴하는 것이였다.
이때 splice(1, 0, 2)을 이용하여 1의 자리에는 지금 splice(dragEnter의 target이 되는 item의 index, 0, 2의 자리에는 현재 드래깅하고 있는 item의 index값)을 넣어서 서로 자리를 바꿔준다.
```
### TODO NEXT
1. [x] 좀 더 부드럽게 구현하기
2. [x] target의 정확하게 잡을 수 있도록 좀 더 공부가 필요하다.