[FE] whiteboard 부분 기능 추가를 위한 분리

[ChaJiTae]

🎯 이슈 번호

• relates to [FE] 화이트보드 캔버스 구현 #172

---

✅ 작업 내용

• type 부분 파일 분리 기존 whiteboard.ts -> base / items / index.ts
  • 분리 사유 : whiteboard에 앞으로 넣어질 요소가 많아짐에 따라 역할 분리가 필요하다고 판단
• canvas.tsx 부분 리팩토링
  • 분리 사유 : Canvas가 파일이 길어질 것을 우려함
  • Canvas는 화면을 그리는 코드 위주로 역할을 남기는 것이 맞다고 판단하였고 추후에 추가될 단축키 또한 많을 것으로 예상되는데 이와 관련하여 useCanvasShortcuts이라는 hook에서 단축키를 관리하면 좋다고 판단함
• 현재 canvas.tsx 상단에 zustand

  const stageScale = useCanvasStore((state) => state.stageScale);
  const stagePos = useCanvasStore((state) => state.stagePos);
  const canvasWidth = useCanvasStore((state) => state.canvasWidth);
  const canvasHeight = useCanvasStore((state) => state.canvasHeight);
  const items = useCanvasStore((state) => state.items);
  const selectedId = useCanvasStore((state) => state.selectedId);
  const editingTextId = useCanvasStore((state) => state.editingTextId);
  const selectItem = useCanvasStore((state) => state.selectItem);
  const updateItem = useCanvasStore((state) => state.updateItem);
  const setEditingTextId = useCanvasStore((state) => state.setEditingTextId);

이런식으로 useCanvasStore가 여러번 호출됨을 확인함
-> 커스텀 훅으로 묶어서 관리하면 더 편리할 것이라고 생각하여 분리 진행

[seorang42]

확인했습니다!

[chamny20]

고생하셨습니다 ~!

[tjsdn052]

고생하셨습니다. 아래 의견 하나만 참고해 주시면 좋을 거 같아요 👍