[wanted pre onboarding] 5번째 과제: 드래그로 영역 선택

배포: https://wanted-preonboarding-team3-oddconcepts.netlify.app/
과제 GitHub: https://github.com/NamgyungKim/wanted-codestates-project-3-5

과제: (2번과제)이미지의 특정 영역을 드래그해 선택 후 선택한 영역의 이름 붙이기

• 드래그로 영역 설정
• 영역을 추가하면 로컬 캐싱
• 영역명 수정,삭제 기능

✨ canvas를 이용한 드래그 기능

• onMouseDown(boxes에 배열 생성) => onMouseMove(box의 width값과 height값을 계속 변경시켜줌) => onMouseUp
• onMouseMove 중에 canvas 밖으로 나가면 영역설정 cancel 시켰다.

📚 배운점

• 오랜만에 캔버스를 오랜만에 사용했다. 드래그를 처음 어떻게 구현해야할지가 고민이였다. 하지만 클릭상태를 useState로 받아옴으로써 쉽게 해결되었다.