[FE] Canvas 리팩토링

[tjsdn052]

✅ 작업 내용

Canvas.tsx 리팩토링

• 렌더링 책임을 레이어 단위로 분리
  • BackgroundLayer – 화이트보드 배경
  • ItemRenderingLayer – 뷰포트에 포함된 아이템 렌더링
  • CollaborationLayer – 다른 사용자 커서 및 선택 표시
  • InteractionLayer – 내 선택 박스, Transformer, 화살표/라인 핸들
  • TextEditorLayer – 캔버스 상 텍스트 에디터 (Portal 기반)

      return (
        <div>
          <Stage {...stageProps}>
            <Layer>
              <BackgroundLayer canvasWidth={width} canvasHeight={height} />
              <ItemRenderingLayer items={visibleItems} isDraggingArrow={...} />
              <CollaborationLayer items={items} stageRef={stageRef} />
              <InteractionLayer selectedItem={selectedItem} isDraggingHandle={...} />
            </Layer>
          </Stage>
      
          <TextEditorLayer editingTextId={editingTextId} />
        </div>
      );

• 내부 로직 커스텀훅으로 분리

  • useViewportController.ts : 뷰포트 계산, 줌, 컬링, pixelRatio 관리 분리
  • useCanvasGlobalEvents.ts : 마우스/터치/휠/핀치 줌 등 캔버스 이벤트 통합
  • useCanvasShortcuts.ts : 화살표 핸들 상태를 local store로 이동 및 단축키 처리

• 화살표 / 라인 핸들 조작시 성능 개선

  • 핸들 드래그 시 원본 아이템을 숨김 처리
  • InteractionLayer에서 임시 객체만 렌더링하도록 변경

---

🤔 리뷰 요구사항

• Konva의 물리적 Layer 분리 대신, Canvas.tsx 컴포넌트의 복잡도 완화와 관심사 분리를 우선시하여 하나의 Layer 내부에서 논리적인 컴포넌트 단위로 분리했습니다.
• 기존과 동일하게 동작하는지 확인 부탁드립니다.