블록 및 그룹의 추가 로직을 생성한다

[JengYoung]

💌 설명

참 고민이 많았는데, 잘 해결된 이슈이다! 다음을 모두 해결했다.

• [x] [블록]을 누르면 Main 안에서는 crosshair 모양의 커서가 되어야 한다.
• [x] crosshair 모양인 상태에서 Main 안에 컴포넌트를 그릴 수 있어야 한다.
• [x] 컴포넌트를 그릴 때에는 예상 가능한 크기가 사각형으로 나와야 한다.
• [x] 마우스를 떼면 커서 모양이 원래대로 돌아와야 한다.
• [x] 커서 모양이 돌아옴과 동시에 블록이 나와야 한다.

또한, 새로고침을 해도 이 생성 결과가 유지되도록 했다!

시연 영상

https://user-images.githubusercontent.com/78713176/217811235-c77c5fcb-8de0-471a-a12c-316263adcbdd.mov

추가 구현

TaskQueue

구현하는 과정에서 태스크 큐로 생성 작업을 미리 캐싱해두고, 추후 디바운싱에 따라 작업 내역을 백엔드 서버에 일괄적으로 넘겨주는 게 오버헤드를 최소화할 것이라 판단했다.

따라서 이를 백엔드와 협의 하에 반영하기로 하여, 태스크 큐 작업을 미리 구현해놨다!

IndexedDB 사용

이번에 idb를 사용한 IndexedDB 핸들링을 어느정도 익힐 수 있었다. 여기서 데이터베이스 역시 동시에 작업을 처리할 수 있도록 트랜잭션을 병렬적으로 구현하여, 더욱 안정성 있고 깔끔한 로직을 생성해냈다! 🥰

📎 관련 이슈

closes #68

💡 논의해볼 사항

📝 참고자료

⚠️ 잠깐! 한 번 체크해주세요.

• [x] 베이스가 제대로 적용되었나요?
• [x] 코드의 변경사항은 원하는 대로 잘 되었는지 다시 한 번 살펴봐요!

[JengYoung]

영상을 게재할 때 문제점을 발견했다. 생성하는 블록의 zIndex가 낮아서, 이미 생성된 블록을 가려버린다 -_- zIndex의 최댓값인 2147483647로 설정해주자.

[JengYoung]

https://user-images.githubusercontent.com/78713176/217812227-98bd840b-a6d8-48f3-a526-c644bb4dc0ea.mov

위의 댓글에 남긴 문제를 해결했다. (Commit Ref: 712d61d4650e4aa1c8d658ac8317775b977e76c0)