[SCRUM-148]:useCanvasInteradction.ts로 이밴트 핸들러 분리

[Anas-wg]

• 관심사 분리 (Separation of Concerns)

  • PixelCanvas.tsx: 이제 캔버스 상태 관리와 렌더링에만 집중합니다.
  • useCanvasInteraction.ts: 모든 사용자 상호작용 관련 로직을 캡슐화하여 처리합니다.

• 분리된 로직:

  • 캔버스 이동 (Panning): 마우스/터치 드래그를 통한 캔버스 이동
  • 확대/축소 (Zooming): 마우스 휠, 핀치 줌(Pinch-to-Zoom)
  • 픽셀 선택 및 이미지 조작: 클릭을 통한 픽셀 선택, 첨부된 이미지의 이동 및
    리사이징
  • 터치 이벤트: 모바일 환경을 위한 터치 상호작용(touchstart, touchmove,
    touchend)

1. PixelCanvas.tsx가 캔버스 관련 상태(state)와 콜백 함수(callback)를
   useCanvasInteraction 훅에 전달합니다.
2. useCanvasInteraction 훅은 이들을 이용해 모든 입력 이벤트를 처리하고,
   onMouseDown, onMouseMove 등에 연결할 이벤트 핸들러 함수들을 반환합니다.
3. PixelCanvas.tsx는 반환받은 핸들러를 엘리먼트에 연결합니다.

[yoominlee00]

고생하셨습니다!