[FE] Canvas 리팩토링

frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx

@@ -4,12 +4,13 @@ import { Circle } from 'react-konva';
 import { KonvaEventObject } from 'konva/lib/Node';
 import { getControlPoints } from '@/utils/arrow';
 import { useCursorStyle } from '@/hooks/useCursorStyle';
-import type { ArrowItem } from '@/types/whiteboard';
+import type { ArrowItem, LineItem } from '@/types/whiteboard';
 
 interface ArrowHandlesProps {
-  arrow: ArrowItem;
+  arrow: ArrowItem | LineItem;
   selectedHandleIndex: number | null;
   onHandleClick: (e: KonvaEventObject<MouseEvent>, index: number) => void;
+  onDragStart: (handleType: 'start' | 'end' | 'mid') => void;
   onStartDrag: (e: KonvaEventObject<DragEvent>) => void;
   onControlPointDrag: (
     pointIndex: number,
@@ -24,6 +25,7 @@ export default function ArrowHandles({
   arrow,
   selectedHandleIndex,
   onHandleClick,
+  onDragStart,
   onStartDrag,
   onControlPointDrag,
   onEndDrag,
@@ -52,6 +54,7 @@ export default function ArrowHandles({
         stroke="#0369A1"
         strokeWidth={2}
         draggable
+        onDragStart={() => onDragStart('start')}
         onDragMove={onStartDrag}
         onDragEnd={() => onDragEnd('start')}
         onClick={(e) => onHandleClick(e, 0)}
@@ -72,6 +75,7 @@ export default function ArrowHandles({
             stroke="#B8E6FE"
             strokeWidth={isHandleSelected ? 3 : 2}
             draggable
+            onDragStart={() => onDragStart('mid')}
             onDragMove={(e) => onControlPointDrag(point.index, e)}
             onDragEnd={() => onDragEnd('mid')}
             onClick={(e) => onHandleClick(e, point.index)}
@@ -90,6 +94,7 @@ export default function ArrowHandles({
         stroke="#0369A1"
         strokeWidth={2}
         draggable
+        onDragStart={() => onDragStart('end')}
         onDragMove={onEndDrag}
         onDragEnd={() => onDragEnd('end')}
         onClick={(e) => onHandleClick(e, points.length - 2)}

frontend/src/components/whiteboard/layers/BackgroundLayer.tsx

@@ -0,0 +1,25 @@
+import { Rect } from 'react-konva';
+
+interface BackgroundLayerProps {
+  canvasWidth: number;
+  canvasHeight: number;
+}
+
+export default function BackgroundLayer({
+  canvasWidth,
+  canvasHeight,
+}: BackgroundLayerProps) {
+  return (
+    <Rect
+      name="bg-rect"
+      x={0}
+      y={0}
+      width={canvasWidth}
+      height={canvasHeight}
+      fill="white"
+      stroke="gray"
+      strokeWidth={2}
+      listening={true}
+    />
+  );
+}

frontend/src/components/whiteboard/layers/CollaborationLayer.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import Konva from 'konva';
+
+import type { WhiteboardItem } from '@/types/whiteboard';
+
+import RemoteSelectionLayer from '@/components/whiteboard/remote/RemoteSelectionLayer';
+import RemoteSelectionIndicator from '@/components/whiteboard/remote/RemoteSelectionIndicator';
+
+interface CollaborationLayerProps {
+  myUserId: string | null;
+  items: WhiteboardItem[];
+  selectedIds: string[];
+  singleSelectedId: string | null;
+  stageRef: React.RefObject<Konva.Stage | null>;
+}
+
+export default function CollaborationLayer({
+  myUserId,
+  items,
+  selectedIds,
+  singleSelectedId,
+  stageRef,
+}: CollaborationLayerProps) {
+  return (
+    <>
+      {/* 본인 선택 박스 */}
+      {selectedIds.length > 1 &&
+        selectedIds.map((itemId) => (
+          <RemoteSelectionIndicator
+            key={`my-selection-${itemId}`}
+            selectedId={itemId}
+            userColor="#0369A1"
+            items={items}
+            stageRef={stageRef}
+          />
+        ))}
+
+      {/* 다른 사용자의 선택 표시 */}
+      <RemoteSelectionLayer
+        myUserId={myUserId ?? ''}
+        selectedId={singleSelectedId}
+        items={items}
+        stageRef={stageRef}
+      />
+    </>
+  );
+}

frontend/src/components/whiteboard/layers/InteractionLayer.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import Konva from 'konva';
+import { Rect } from 'react-konva';
+
+import type { WhiteboardItem, ArrowItem, LineItem } from '@/types/whiteboard';
+
+import { useArrowHandles } from '@/hooks/useArrowHandles';
+import { useItemActions } from '@/hooks/useItemActions';
+
+import ItemTransformer from '@/components/whiteboard/controls/ItemTransformer';
+import ArrowHandles from '@/components/whiteboard/items/arrow/ArrowHandles';
+import SelectionBox from '@/components/whiteboard/SelectionBox';
+import RenderItem from '@/components/whiteboard/items/RenderItem';
+
+interface InteractionLayerProps {
+  isArrowOrLineSelected: boolean;
+  selectedItem: WhiteboardItem | null;
+  selectedIds: string[];
+  items: WhiteboardItem[];
+  stageRef: React.RefObject<Konva.Stage | null>;
+  isDraggingArrow: boolean;
+  isDraggingHandle: boolean;
+  setIsDraggingHandle: (isDragging: boolean) => void;
+}
+
+export default function InteractionLayer({
+  isArrowOrLineSelected,
+  selectedItem,
+  selectedIds,
+  items,
+  stageRef,
+  isDraggingArrow,
+  setIsDraggingHandle,
+}: InteractionLayerProps) {
+  const { updateItem } = useItemActions();
+  const {
+    selectedHandleIndex,
+    handleHandleClick,
+    handleHandleDragStart,
+    handleArrowStartDrag,
+    handleArrowControlPointDrag,
+    handleArrowEndDrag,
+    handleHandleDragEnd,
+    draggingPoints,
+    snapIndicator,
+  } = useArrowHandles({
+    arrow: isArrowOrLineSelected
+      ? (selectedItem as ArrowItem | LineItem)
+      : null,
+    items,
+    updateItem,
+    setIsDraggingArrow: setIsDraggingHandle,
+  });
+
+  return (
+    <>
+      {/* 화살표 드래그 중 임시 렌더링 */}
+      {draggingPoints && selectedItem && (
+        <RenderItem
+          item={
+            {
+              ...selectedItem,
+              points: draggingPoints,
+            } as ArrowItem | LineItem
+          }
+          isSelected={true}
+          onSelect={() => {}}
+          onChange={() => {}}
+          onArrowDblClick={() => {}}
+          onShapeDblClick={() => {}}
+          onDragStart={() => {}}
+          onDragMove={() => {}}
+          onTransformMove={() => {}}
+          onDragEnd={() => {}}
+        />
+      )}
+
+      {/* 화살표 핸들 */}
+      {isArrowOrLineSelected && selectedItem && !isDraggingArrow && (
+        <ArrowHandles
+          arrow={selectedItem as ArrowItem | LineItem}
+          selectedHandleIndex={selectedHandleIndex}
+          onHandleClick={handleHandleClick}
+          onDragStart={handleHandleDragStart}
+          onStartDrag={handleArrowStartDrag}
+          onControlPointDrag={handleArrowControlPointDrag}
+          onEndDrag={handleArrowEndDrag}
+          onDragEnd={handleHandleDragEnd}
+          draggingPoints={draggingPoints}
+        />
+      )}
+
+      {/* 부착 표시 */}
+      {snapIndicator && (
+        <Rect
+          x={snapIndicator.x}
+          y={snapIndicator.y}
+          width={snapIndicator.width}
+          height={snapIndicator.height}
+          rotation={snapIndicator.rotation}
+          stroke="#0096FF"
+          strokeWidth={3}
+          cornerRadius={3}
+        />
+      )}
+
+      {/* 선택 박스 */}
+      <SelectionBox />
+
+      {/* 내 Transformer */}
+      <ItemTransformer
+        selectedIds={selectedIds}
+        items={items}
+        stageRef={stageRef}
+      />
+    </>
+  );
+}

frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import Konva from 'konva';
+
+import type { WhiteboardItem, ShapeItem, ArrowItem } from '@/types/whiteboard';
+import { getDraggingArrowPoints } from '@/utils/arrowBinding';
+import { useItemActions } from '@/hooks/useItemActions';
+import RenderItem from '@/components/whiteboard/items/RenderItem';
+
+interface ItemRenderingLayerProps {
+  items: WhiteboardItem[];
+  visibleItems: WhiteboardItem[];
+  selectedIds: string[];
+  singleSelectedId: string | null;
+  isDraggingArrow: boolean;
+  isDraggingHandle: boolean;
+  localDraggingId: string | null;
+  localDraggingPos: {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    rotation?: number;
+  } | null;
+  getMultiDragPosition: (id: string) => { x: number; y: number } | null;
+  handleSelectItem: (
+    id: string,
+    e: Konva.KonvaEventObject<MouseEvent | TouchEvent>,
+  ) => void;
+  handleItemChange: (
+    id: string,
+    newAttributes: Partial<WhiteboardItem>,
+  ) => void;
+  handleShapeDblClick: (id: string) => void;
+  setIsDraggingArrow: (isDragging: boolean) => void;
+  setIsDraggingHandle: (isDragging: boolean) => void;
+  startMultiDrag: (id: string) => void;
+  handleDragMoveItem: (id: string, x: number, y: number) => void;
+  handleTransformMoveItem: (
+    id: string,
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    rotation: number,
+  ) => void;
+  handleDragEndItem: () => void;
+}
+
+export default function ItemRenderingLayer({
+  items,
+  visibleItems,
+  singleSelectedId,
+  isDraggingHandle,
+  localDraggingId,
+  localDraggingPos,
+  getMultiDragPosition,
+  selectedIds,
+  handleSelectItem,
+  handleItemChange,
+  handleShapeDblClick,
+  setIsDraggingArrow,
+  startMultiDrag,
+  handleDragMoveItem,
+  handleTransformMoveItem,
+  handleDragEndItem,
+}: ItemRenderingLayerProps) {
+  const { insertArrowControlPoint } = useItemActions();
+  return (
+    <>
+      {visibleItems.map((item) => {
+        let displayItem = item;
+
+        const multiDragPos = getMultiDragPosition(item.id);
+        if (multiDragPos && 'x' in item && 'y' in item) {
+          displayItem = {
+            ...item,
+            x: multiDragPos.x,
+            y: multiDragPos.y,
+          } as WhiteboardItem;
+        }
+
+        if (
+          !multiDragPos &&
+          item.type === 'arrow' &&
+          localDraggingId &&
+          localDraggingPos &&
+          (item.startBinding?.elementId === localDraggingId ||
+            item.endBinding?.elementId === localDraggingId)
+        ) {
+          const targetShape = items.find(
+            (it) => it.id === localDraggingId,
+          ) as ShapeItem;
+          if (targetShape) {
+            const tempPoints = getDraggingArrowPoints(
+              item as ArrowItem,
+              localDraggingId,
+              localDraggingPos.x,
+              localDraggingPos.y,
+              targetShape,
+              localDraggingPos.width,
+              localDraggingPos.height,
+              localDraggingPos.rotation,
+            );
+            if (tempPoints) {
+              displayItem = {
+                ...displayItem,
+                points: tempPoints,
+              } as WhiteboardItem;
+            }
+          }
+        }
+
+        if (
+          isDraggingHandle &&
+          item.id === singleSelectedId &&
+          (item.type === 'arrow' || item.type === 'line')
+        ) {
+          return null;
+        }
+
+        return (
+          <RenderItem
+            key={item.id}
+            item={displayItem}
+            isSelected={selectedIds.includes(item.id)}
+            onSelect={handleSelectItem}
+            onChange={(newAttributes) =>
+              handleItemChange(item.id, newAttributes)
+            }
+            onArrowDblClick={insertArrowControlPoint}
+            onShapeDblClick={handleShapeDblClick}
+            onDragStart={() => {
+              if (
+                item.id === singleSelectedId &&
+                (item.type === 'arrow' || item.type === 'line')
+              ) {
+                // 핸들 드래그와 구분하기 위한 상태는 InteractionLayer에서 관리
+              }
+              setIsDraggingArrow(true);
+              startMultiDrag(item.id);
+            }}
+            onDragMove={handleDragMoveItem}
+            onTransformMove={handleTransformMoveItem}
+            onDragEnd={handleDragEndItem}
+          />
+        );
+      })}
+    </>
+  );
+}