From 4e7fe0fb0a91214137168c12f8175c763cad8aeb Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 15:58:18 +0900
Subject: [PATCH 01/17] =?UTF-8?q?=F0=9F=A4=96=20Refactor:=20backgroundLaye?=
 =?UTF-8?q?r=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?=
 =?UTF-8?q?=20=EB=B0=8F=20=EA=B8=B0=EC=A1=B4=20Canvas=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-Canvas.tsx 파일 분리
-배경 분리
---
 frontend/src/components/whiteboard/Canvas.tsx | 15 +++--------
 .../whiteboard/layers/BackgroundLayer.tsx     | 25 +++++++++++++++++++
 2 files changed, 29 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/whiteboard/layers/BackgroundLayer.tsx

diff --git a/frontend/src/components/whiteboard/Canvas.tsx b/frontend/src/components/whiteboard/Canvas.tsx
index ef989dc2..b6c4047f 100644
--- a/frontend/src/components/whiteboard/Canvas.tsx
+++ b/frontend/src/components/whiteboard/Canvas.tsx
@@ -43,6 +43,7 @@ import RemoteSelectionIndicator from '@/components/whiteboard/remote/RemoteSelec
 import ArrowHandles from '@/components/whiteboard/items/arrow/ArrowHandles';
 import SelectionBox from '@/components/whiteboard/SelectionBox';
 import Portal from '@/components/common/Portal';
+import BackgroundLayer from '@/components/whiteboard/layers/BackgroundLayer';
 
 const GEOMETRY_KEYS = ['x', 'y', 'width', 'height', 'rotation'] as const;
 
@@ -600,17 +601,9 @@ export default function Canvas() {
           clipWidth={canvasWidth}
           clipHeight={canvasHeight}
         >
-          {/* Canvas 경계 */}
-          <Rect
-            name="bg-rect"
-            x={0}
-            y={0}
-            width={canvasWidth}
-            height={canvasHeight}
-            fill="white"
-            stroke="gray"
-            strokeWidth={2}
-            listening={true}
+          <BackgroundLayer
+            canvasWidth={canvasWidth}
+            canvasHeight={canvasHeight}
           />
 
           {/* 아이템 렌더링 */}
diff --git a/frontend/src/components/whiteboard/layers/BackgroundLayer.tsx b/frontend/src/components/whiteboard/layers/BackgroundLayer.tsx
new file mode 100644
index 00000000..3575f7e3
--- /dev/null
+++ b/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}
+    />
+  );
+}

From c2e1210c5d6e12cccda8324d83837f1dac6f38b4 Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 16:10:26 +0900
Subject: [PATCH 02/17] =?UTF-8?q?=F0=9F=A4=96=20Refactor:=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=ED=85=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=EC=9D=84=20ItemRenderingLayer=EB=A1=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Canvas.tsx에서 렌더링 로직 분리
- visibleItems.map 기반 RenderItem 호출 로직을 ItemRenderingLayer로 이동함
---
 frontend/src/components/whiteboard/Canvas.tsx | 106 +++----------
 .../whiteboard/layers/ItemRenderingLayer.tsx  | 149 ++++++++++++++++++
 2 files changed, 172 insertions(+), 83 deletions(-)
 create mode 100644 frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx

diff --git a/frontend/src/components/whiteboard/Canvas.tsx b/frontend/src/components/whiteboard/Canvas.tsx
index b6c4047f..74bc1d69 100644
--- a/frontend/src/components/whiteboard/Canvas.tsx
+++ b/frontend/src/components/whiteboard/Canvas.tsx
@@ -3,7 +3,7 @@
 import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 
 import Konva from 'konva';
-import { Stage, Layer, Rect, Line } from 'react-konva';
+import { Stage, Layer, Rect } from 'react-konva';
 
 import type {
   WhiteboardItem,
@@ -16,10 +16,7 @@ import { useWhiteboardSharedStore } from '@/store/useWhiteboardSharedStore';
 import { useWhiteboardLocalStore } from '@/store/useWhiteboardLocalStore';
 import { useWhiteboardAwarenessStore } from '@/store/useWhiteboardAwarenessStore';
 import { cn } from '@/utils/cn';
-import {
-  updateBoundArrows,
-  getDraggingArrowPoints,
-} from '@/utils/arrowBinding';
+import { updateBoundArrows } from '@/utils/arrowBinding';
 import { getViewportRect, filterVisibleItems } from '@/utils/viewport';
 
 import { useItemActions } from '@/hooks/useItemActions';
@@ -34,7 +31,6 @@ import { useSelectionBox } from '@/hooks/useSelectionBox';
 import { useMultiDrag } from '@/hooks/useMultiDrag';
 import { usePinchZoom } from '@/hooks/usePinchZoom';
 
-import RenderItem from '@/components/whiteboard/items/RenderItem';
 import TextArea from '@/components/whiteboard/items/text/TextArea';
 import ShapeTextArea from '@/components/whiteboard/items/shape/ShapeTextArea';
 import ItemTransformer from '@/components/whiteboard/controls/ItemTransformer';
@@ -44,6 +40,7 @@ import ArrowHandles from '@/components/whiteboard/items/arrow/ArrowHandles';
 import SelectionBox from '@/components/whiteboard/SelectionBox';
 import Portal from '@/components/common/Portal';
 import BackgroundLayer from '@/components/whiteboard/layers/BackgroundLayer';
+import ItemRenderingLayer from '@/components/whiteboard/layers/ItemRenderingLayer';
 
 const GEOMETRY_KEYS = ['x', 'y', 'width', 'height', 'rotation'] as const;
 
@@ -607,83 +604,26 @@ export default function Canvas() {
           />
 
           {/* 아이템 렌더링 */}
-          {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 (
-              displayItem.id === singleSelectedId &&
-              (displayItem.type === 'arrow' || displayItem.type === 'line') &&
-              draggingPoints
-            ) {
-              displayItem = {
-                ...displayItem,
-                points: draggingPoints,
-              } as WhiteboardItem;
-            }
-
-            return (
-              <RenderItem
-                key={item.id}
-                item={displayItem}
-                isSelected={selectedIds.includes(item.id)}
-                onSelect={handleSelectItem}
-                onChange={(newAttributes) =>
-                  handleItemChange(item.id, newAttributes)
-                }
-                onArrowDblClick={handleArrowDblClick}
-                onShapeDblClick={handleShapeDblClick}
-                onDragStart={() => {
-                  if (item.type === 'arrow' || item.type === 'line') {
-                    setIsDraggingArrow(true);
-                  }
-                  startMultiDrag(item.id);
-                }}
-                onDragMove={handleDragMoveItem}
-                onTransformMove={handleTransformMoveItem}
-                onDragEnd={handleDragEndItem}
-              />
-            );
-          })}
+          <ItemRenderingLayer
+            items={items}
+            visibleItems={visibleItems}
+            selectedIds={selectedIds}
+            singleSelectedId={singleSelectedId}
+            draggingPoints={draggingPoints}
+            isDraggingArrow={isDraggingArrow}
+            localDraggingId={localDraggingId}
+            localDraggingPos={localDraggingPos}
+            getMultiDragPosition={getMultiDragPosition}
+            handleSelectItem={handleSelectItem}
+            handleItemChange={handleItemChange}
+            handleArrowDblClick={handleArrowDblClick}
+            handleShapeDblClick={handleShapeDblClick}
+            setIsDraggingArrow={setIsDraggingArrow}
+            startMultiDrag={startMultiDrag}
+            handleDragMoveItem={handleDragMoveItem}
+            handleTransformMoveItem={handleTransformMoveItem}
+            handleDragEndItem={handleDragEndItem}
+          />
           {isArrowOrLineSelected && selectedItem && !isDraggingArrow && (
             <ArrowHandles
               arrow={selectedItem as ArrowItem}
diff --git a/frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx b/frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx
new file mode 100644
index 00000000..281e7726
--- /dev/null
+++ b/frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import Konva from 'konva';
+
+import type { WhiteboardItem, ShapeItem, ArrowItem } from '@/types/whiteboard';
+import { getDraggingArrowPoints } from '@/utils/arrowBinding';
+
+import RenderItem from '@/components/whiteboard/items/RenderItem';
+
+interface ItemRenderingLayerProps {
+  items: WhiteboardItem[];
+  visibleItems: WhiteboardItem[];
+  selectedIds: string[];
+  singleSelectedId: string | null;
+  draggingPoints: number[] | null;
+  isDraggingArrow: 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;
+  handleArrowDblClick: (id: string) => void;
+  handleShapeDblClick: (id: string) => void;
+  setIsDraggingArrow: (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,
+  draggingPoints,
+  localDraggingId,
+  localDraggingPos,
+  getMultiDragPosition,
+  selectedIds,
+  handleSelectItem,
+  handleItemChange,
+  handleArrowDblClick,
+  handleShapeDblClick,
+  setIsDraggingArrow,
+  startMultiDrag,
+  handleDragMoveItem,
+  handleTransformMoveItem,
+  handleDragEndItem,
+}: ItemRenderingLayerProps) {
+  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 (
+          displayItem.id === singleSelectedId &&
+          (displayItem.type === 'arrow' || displayItem.type === 'line') &&
+          draggingPoints
+        ) {
+          displayItem = {
+            ...displayItem,
+            points: draggingPoints,
+          } as WhiteboardItem;
+        }
+
+        return (
+          <RenderItem
+            key={item.id}
+            item={displayItem}
+            isSelected={selectedIds.includes(item.id)}
+            onSelect={handleSelectItem}
+            onChange={(newAttributes) =>
+              handleItemChange(item.id, newAttributes)
+            }
+            onArrowDblClick={handleArrowDblClick}
+            onShapeDblClick={handleShapeDblClick}
+            onDragStart={() => {
+              if (item.type === 'arrow' || item.type === 'line') {
+                setIsDraggingArrow(true);
+              }
+              startMultiDrag(item.id);
+            }}
+            onDragMove={handleDragMoveItem}
+            onTransformMove={handleTransformMoveItem}
+            onDragEnd={handleDragEndItem}
+          />
+        );
+      })}
+    </>
+  );
+}

From e7e912277623a67bd8706528869381171d16f161 Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 16:40:36 +0900
Subject: [PATCH 03/17] =?UTF-8?q?=F0=9F=A4=96=20Refactor:=20collaborationL?=
 =?UTF-8?q?ayer=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=EB=B0=8F=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Canvas.tsx 분리
- RemoteSelectionLayer 로직 분리
- RemoteSelectionIndicator를 CollaborationLayer로 통합
---
 frontend/src/components/whiteboard/Canvas.tsx | 21 ++-------
 .../whiteboard/layers/CollaborationLayer.tsx  | 47 +++++++++++++++++++
 2 files changed, 51 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/whiteboard/layers/CollaborationLayer.tsx

diff --git a/frontend/src/components/whiteboard/Canvas.tsx b/frontend/src/components/whiteboard/Canvas.tsx
index 74bc1d69..cfac6494 100644
--- a/frontend/src/components/whiteboard/Canvas.tsx
+++ b/frontend/src/components/whiteboard/Canvas.tsx
@@ -34,13 +34,12 @@ import { usePinchZoom } from '@/hooks/usePinchZoom';
 import TextArea from '@/components/whiteboard/items/text/TextArea';
 import ShapeTextArea from '@/components/whiteboard/items/shape/ShapeTextArea';
 import ItemTransformer from '@/components/whiteboard/controls/ItemTransformer';
-import RemoteSelectionLayer from '@/components/whiteboard/remote/RemoteSelectionLayer';
-import RemoteSelectionIndicator from '@/components/whiteboard/remote/RemoteSelectionIndicator';
 import ArrowHandles from '@/components/whiteboard/items/arrow/ArrowHandles';
 import SelectionBox from '@/components/whiteboard/SelectionBox';
 import Portal from '@/components/common/Portal';
 import BackgroundLayer from '@/components/whiteboard/layers/BackgroundLayer';
 import ItemRenderingLayer from '@/components/whiteboard/layers/ItemRenderingLayer';
+import CollaborationLayer from '@/components/whiteboard/layers/CollaborationLayer';
 
 const GEOMETRY_KEYS = ['x', 'y', 'width', 'height', 'rotation'] as const;
 
@@ -654,22 +653,10 @@ export default function Canvas() {
           {/* 선택 박스 */}
           <SelectionBox />
 
-          {/* 내 멀티 선택 개별 박스 */}
-          {selectedIds.length > 1 &&
-            selectedIds.map((itemId) => (
-              <RemoteSelectionIndicator
-                key={`my-selection-${itemId}`}
-                selectedId={itemId}
-                userColor="#0369A1"
-                items={items}
-                stageRef={stageRef}
-              />
-            ))}
-
-          {/* 다른 사용자의 선택 표시 */}
-          <RemoteSelectionLayer
+          <CollaborationLayer
             myUserId={myUserId}
-            selectedId={singleSelectedId}
+            selectedIds={selectedIds}
+            singleSelectedId={singleSelectedId}
             items={items}
             stageRef={stageRef}
           />
diff --git a/frontend/src/components/whiteboard/layers/CollaborationLayer.tsx b/frontend/src/components/whiteboard/layers/CollaborationLayer.tsx
new file mode 100644
index 00000000..28edf379
--- /dev/null
+++ b/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}
+      />
+    </>
+  );
+}

From 0f11f76643a8578fbddb7ee27d242e580328203f Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 17:07:15 +0900
Subject: [PATCH 04/17] =?UTF-8?q?=F0=9F=A4=96=20Refactor:=20textEditorLaye?=
 =?UTF-8?q?r=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Canvas.tsx에서 분리
- 텍스트 편집 로직 분리
---
 frontend/src/components/whiteboard/Canvas.tsx | 71 +++--------------
 .../whiteboard/layers/TextEditorLayer.tsx     | 78 +++++++++++++++++++
 2 files changed, 88 insertions(+), 61 deletions(-)
 create mode 100644 frontend/src/components/whiteboard/layers/TextEditorLayer.tsx

diff --git a/frontend/src/components/whiteboard/Canvas.tsx b/frontend/src/components/whiteboard/Canvas.tsx
index cfac6494..7c64c59c 100644
--- a/frontend/src/components/whiteboard/Canvas.tsx
+++ b/frontend/src/components/whiteboard/Canvas.tsx
@@ -5,12 +5,7 @@ import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import Konva from 'konva';
 import { Stage, Layer, Rect } from 'react-konva';
 
-import type {
-  WhiteboardItem,
-  TextItem,
-  ArrowItem,
-  ShapeItem,
-} from '@/types/whiteboard';
+import type { WhiteboardItem, ArrowItem, ShapeItem } from '@/types/whiteboard';
 
 import { useWhiteboardSharedStore } from '@/store/useWhiteboardSharedStore';
 import { useWhiteboardLocalStore } from '@/store/useWhiteboardLocalStore';
@@ -31,15 +26,13 @@ import { useSelectionBox } from '@/hooks/useSelectionBox';
 import { useMultiDrag } from '@/hooks/useMultiDrag';
 import { usePinchZoom } from '@/hooks/usePinchZoom';
 
-import TextArea from '@/components/whiteboard/items/text/TextArea';
-import ShapeTextArea from '@/components/whiteboard/items/shape/ShapeTextArea';
 import ItemTransformer from '@/components/whiteboard/controls/ItemTransformer';
 import ArrowHandles from '@/components/whiteboard/items/arrow/ArrowHandles';
 import SelectionBox from '@/components/whiteboard/SelectionBox';
-import Portal from '@/components/common/Portal';
 import BackgroundLayer from '@/components/whiteboard/layers/BackgroundLayer';
 import ItemRenderingLayer from '@/components/whiteboard/layers/ItemRenderingLayer';
 import CollaborationLayer from '@/components/whiteboard/layers/CollaborationLayer';
+import TextEditorLayer from '@/components/whiteboard/layers/TextEditorLayer';
 
 const GEOMETRY_KEYS = ['x', 'y', 'width', 'height', 'rotation'] as const;
 
@@ -253,15 +246,6 @@ export default function Canvas() {
     [handleWheel],
   );
 
-  const editingItem = useMemo(
-    () =>
-      items.find((item) => item.id === editingTextId) as
-        | TextItem
-        | ShapeItem
-        | undefined,
-    [items, editingTextId],
-  );
-
   const singleSelectedId = selectedIds.length === 1 ? selectedIds[0] : null;
   const selectedItem = useMemo(
     () =>
@@ -670,49 +654,14 @@ export default function Canvas() {
         </Layer>
       </Stage>
 
-      {/* 텍스트 편집 모드 */}
-      {editingTextId && editingItem && editingItem.type === 'text' && (
-        <Portal>
-          <TextArea
-            textId={editingTextId}
-            textItem={editingItem as TextItem}
-            stageRef={stageRef}
-            onChange={(newText) => {
-              updateItem(editingTextId, { text: newText });
-            }}
-            onClose={() => {
-              setEditingTextId(null);
-              clearSelection();
-            }}
-          />
-        </Portal>
-      )}
-
-      {/* 도형 텍스트 편집 모드 */}
-      {editingTextId && editingItem && editingItem.type === 'shape' && (
-        <Portal>
-          <ShapeTextArea
-            shapeId={editingTextId}
-            shapeItem={editingItem as ShapeItem}
-            stageRef={stageRef}
-            onChange={(newText) => {
-              updateItem(editingTextId, { text: newText });
-            }}
-            onClose={() => {
-              setEditingTextId(null);
-              clearSelection();
-            }}
-            onSizeChange={(width, height, newY, newX, newText) => {
-              const updates: Partial<ShapeItem> = { width, height };
-              if (newY !== undefined) updates.y = newY;
-              if (newX !== undefined) updates.x = newX;
-              if (newText !== undefined) updates.text = newText;
-
-              updateItem(editingTextId, updates);
-            }}
-          />
-        </Portal>
-      )}
+      <TextEditorLayer
+        editingTextId={editingTextId}
+        items={items}
+        stageRef={stageRef}
+        updateItem={updateItem}
+        setEditingTextId={setEditingTextId}
+        clearSelection={clearSelection}
+      />
     </div>
   );
 }
diff --git a/frontend/src/components/whiteboard/layers/TextEditorLayer.tsx b/frontend/src/components/whiteboard/layers/TextEditorLayer.tsx
new file mode 100644
index 00000000..5785b47a
--- /dev/null
+++ b/frontend/src/components/whiteboard/layers/TextEditorLayer.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import Konva from 'konva';
+
+import type { WhiteboardItem, ShapeItem, TextItem } from '@/types/whiteboard';
+
+import Portal from '@/components/common/Portal';
+import TextArea from '@/components/whiteboard/items/text/TextArea';
+import ShapeTextArea from '@/components/whiteboard/items/shape/ShapeTextArea';
+
+interface TextEditorLayerProps {
+  editingTextId: string | null;
+  items: WhiteboardItem[];
+  stageRef: React.RefObject<Konva.Stage | null>;
+  updateItem: (id: string, newAttributes: Partial<WhiteboardItem>) => void;
+  setEditingTextId: (id: string | null) => void;
+  clearSelection: () => void;
+}
+
+export default function TextEditorLayer({
+  editingTextId,
+  items,
+  stageRef,
+  updateItem,
+  setEditingTextId,
+  clearSelection,
+}: TextEditorLayerProps) {
+  // 현재 타이핑 중인 아이템 객체 가져오기
+  const editingItem = editingTextId
+    ? items.find((item) => item.id === editingTextId)
+    : null;
+
+  return (
+    <>
+      {editingItem && editingItem.type === 'text' && (
+        <Portal>
+          <TextArea
+            textId={editingTextId!}
+            textItem={editingItem as TextItem}
+            stageRef={stageRef}
+            onChange={(newText) =>
+              updateItem(editingItem.id, { text: newText })
+            }
+            onClose={() => {
+              setEditingTextId(null);
+              clearSelection();
+            }}
+          />
+        </Portal>
+      )}
+
+      {editingItem && editingItem.type === 'shape' && (
+        <Portal>
+          <ShapeTextArea
+            shapeId={editingTextId!}
+            shapeItem={editingItem as ShapeItem}
+            stageRef={stageRef}
+            onChange={(newText) =>
+              updateItem(editingItem.id, { text: newText })
+            }
+            onSizeChange={(width, height, newY, newX, newText) => {
+              updateItem(editingItem.id, {
+                width,
+                height,
+                ...(newY !== undefined && { y: newY }),
+                ...(newX !== undefined && { x: newX }),
+                ...(newText !== undefined && { text: newText }),
+              });
+            }}
+            onClose={() => {
+              setEditingTextId(null);
+              clearSelection();
+            }}
+          />
+        </Portal>
+      )}
+    </>
+  );
+}

From 9b6d418a8fde9b6799ec63950f476c0bb02dbc25 Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 17:49:31 +0900
Subject: [PATCH 05/17] =?UTF-8?q?=F0=9F=A4=96=20Refactor:=20=EC=83=81?=
 =?UTF-8?q?=ED=98=B8=EC=9E=91=EC=9A=A9=20=EB=A0=8C=EB=8D=94=EB=A7=81=20Int?=
 =?UTF-8?q?eractionLayer=EB=A1=9C=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Canvas.tsx 에서 분리
- ArrowHandles, SnapIndicator, SelectionBox, ItemTransformer 렌더링을  InteractionLayer로 이동
---
 frontend/src/components/whiteboard/Canvas.tsx | 63 +++---------
 .../whiteboard/layers/InteractionLayer.tsx    | 97 +++++++++++++++++++
 2 files changed, 112 insertions(+), 48 deletions(-)
 create mode 100644 frontend/src/components/whiteboard/layers/InteractionLayer.tsx

diff --git a/frontend/src/components/whiteboard/Canvas.tsx b/frontend/src/components/whiteboard/Canvas.tsx
index 7c64c59c..3800a7ba 100644
--- a/frontend/src/components/whiteboard/Canvas.tsx
+++ b/frontend/src/components/whiteboard/Canvas.tsx
@@ -3,13 +3,12 @@
 import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 
 import Konva from 'konva';
-import { Stage, Layer, Rect } from 'react-konva';
+import { Stage, Layer } from 'react-konva';
 
 import type { WhiteboardItem, ArrowItem, ShapeItem } from '@/types/whiteboard';
 
 import { useWhiteboardSharedStore } from '@/store/useWhiteboardSharedStore';
 import { useWhiteboardLocalStore } from '@/store/useWhiteboardLocalStore';
-import { useWhiteboardAwarenessStore } from '@/store/useWhiteboardAwarenessStore';
 import { cn } from '@/utils/cn';
 import { updateBoundArrows } from '@/utils/arrowBinding';
 import { getViewportRect, filterVisibleItems } from '@/utils/viewport';
@@ -26,13 +25,10 @@ import { useSelectionBox } from '@/hooks/useSelectionBox';
 import { useMultiDrag } from '@/hooks/useMultiDrag';
 import { usePinchZoom } from '@/hooks/usePinchZoom';
 
-import ItemTransformer from '@/components/whiteboard/controls/ItemTransformer';
-import ArrowHandles from '@/components/whiteboard/items/arrow/ArrowHandles';
-import SelectionBox from '@/components/whiteboard/SelectionBox';
 import BackgroundLayer from '@/components/whiteboard/layers/BackgroundLayer';
 import ItemRenderingLayer from '@/components/whiteboard/layers/ItemRenderingLayer';
-import CollaborationLayer from '@/components/whiteboard/layers/CollaborationLayer';
 import TextEditorLayer from '@/components/whiteboard/layers/TextEditorLayer';
+import InteractionLayer from '@/components/whiteboard/layers/InteractionLayer';
 
 const GEOMETRY_KEYS = ['x', 'y', 'width', 'height', 'rotation'] as const;
 
@@ -62,7 +58,6 @@ export default function Canvas() {
   const setStageScale = useWhiteboardLocalStore((state) => state.setStageScale);
   const setStagePos = useWhiteboardLocalStore((state) => state.setStagePos);
   const cursorMode = useWhiteboardLocalStore((state) => state.cursorMode);
-  const myUserId = useWhiteboardAwarenessStore((state) => state.myUserId);
 
   const { processImageFile, getCanvasPointFromEvent } = useAddWhiteboardItem();
 
@@ -250,7 +245,7 @@ export default function Canvas() {
   const selectedItem = useMemo(
     () =>
       singleSelectedId
-        ? items.find((item) => item.id === singleSelectedId)
+        ? items.find((item) => item.id === singleSelectedId) || null
         : null,
     [items, singleSelectedId],
   );
@@ -607,49 +602,21 @@ export default function Canvas() {
             handleTransformMoveItem={handleTransformMoveItem}
             handleDragEndItem={handleDragEndItem}
           />
-          {isArrowOrLineSelected && selectedItem && !isDraggingArrow && (
-            <ArrowHandles
-              arrow={selectedItem as ArrowItem}
-              selectedHandleIndex={selectedHandleIndex}
-              onHandleClick={handleHandleClick}
-              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 />
-
-          <CollaborationLayer
-            myUserId={myUserId}
-            selectedIds={selectedIds}
-            singleSelectedId={singleSelectedId}
-            items={items}
-            stageRef={stageRef}
-          />
-
-          {/* 내 Transformer */}
-          <ItemTransformer
+          <InteractionLayer
+            isArrowOrLineSelected={isArrowOrLineSelected}
+            selectedItem={selectedItem}
             selectedIds={selectedIds}
             items={items}
             stageRef={stageRef}
+            isDraggingArrow={isDraggingArrow}
+            selectedHandleIndex={selectedHandleIndex}
+            draggingPoints={draggingPoints}
+            snapIndicator={snapIndicator}
+            handleHandleClick={handleHandleClick}
+            handleArrowStartDrag={handleArrowStartDrag}
+            handleArrowControlPointDrag={handleArrowControlPointDrag}
+            handleArrowEndDrag={handleArrowEndDrag}
+            handleHandleDragEnd={handleHandleDragEnd}
           />
         </Layer>
       </Stage>
diff --git a/frontend/src/components/whiteboard/layers/InteractionLayer.tsx b/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
new file mode 100644
index 00000000..bca950cb
--- /dev/null
+++ b/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import Konva from 'konva';
+import { Rect } from 'react-konva';
+
+import type { WhiteboardItem, ArrowItem } from '@/types/whiteboard';
+
+import ItemTransformer from '@/components/whiteboard/controls/ItemTransformer';
+import ArrowHandles from '@/components/whiteboard/items/arrow/ArrowHandles';
+import SelectionBox from '@/components/whiteboard/SelectionBox';
+
+interface InteractionLayerProps {
+  isArrowOrLineSelected: boolean;
+  selectedItem: WhiteboardItem | null;
+  selectedIds: string[];
+  items: WhiteboardItem[];
+  stageRef: React.RefObject<Konva.Stage | null>;
+  isDraggingArrow: boolean;
+  selectedHandleIndex: number | null;
+  draggingPoints: number[] | null;
+  snapIndicator: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation?: number;
+  } | null;
+  handleHandleClick: (
+    e: Konva.KonvaEventObject<MouseEvent>,
+    index: number,
+  ) => void;
+  handleArrowStartDrag: (e: Konva.KonvaEventObject<DragEvent>) => void;
+  handleArrowControlPointDrag: (
+    pointIndex: number,
+    e: Konva.KonvaEventObject<DragEvent>,
+  ) => void;
+  handleArrowEndDrag: (e: Konva.KonvaEventObject<DragEvent>) => void;
+  handleHandleDragEnd: (handleType: 'start' | 'end' | 'mid') => void;
+}
+
+export default function InteractionLayer({
+  isArrowOrLineSelected,
+  selectedItem,
+  selectedIds,
+  items,
+  stageRef,
+  isDraggingArrow,
+  selectedHandleIndex,
+  draggingPoints,
+  snapIndicator,
+  handleHandleClick,
+  handleArrowStartDrag,
+  handleArrowControlPointDrag,
+  handleArrowEndDrag,
+  handleHandleDragEnd,
+}: InteractionLayerProps) {
+  return (
+    <>
+      {/* 화살표 핸들 */}
+      {isArrowOrLineSelected && selectedItem && !isDraggingArrow && (
+        <ArrowHandles
+          arrow={selectedItem as ArrowItem}
+          selectedHandleIndex={selectedHandleIndex}
+          onHandleClick={handleHandleClick}
+          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}
+      />
+    </>
+  );
+}

From b262207bf975fd48aaa83174da6db10cb82f5f44 Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 19:10:11 +0900
Subject: [PATCH 06/17] =?UTF-8?q?=F0=9F=93=8D=20Feat:=20=ED=99=94=EC=82=B4?=
 =?UTF-8?q?=ED=91=9C=20=ED=95=B8=EB=93=A4=20=EC=84=A0=ED=83=9D=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=20=EA=B4=80=EB=A6=AC=EC=9C=84=ED=95=B4=20=ED=99=94?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8=EB=B3=B4=EB=93=9C=20local=20=EC=8A=A4?=
 =?UTF-8?q?=ED=86=A0=EC=96=B4=20=EC=83=81=ED=83=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- selectedHandleIndex 추가
---
 frontend/src/store/useWhiteboardLocalStore.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/store/useWhiteboardLocalStore.ts b/frontend/src/store/useWhiteboardLocalStore.ts
index ca0c7286..b8af8eaf 100644
--- a/frontend/src/store/useWhiteboardLocalStore.ts
+++ b/frontend/src/store/useWhiteboardLocalStore.ts
@@ -34,6 +34,7 @@ interface LocalState {
     x2: number;
     y2: number;
   } | null;
+  selectedHandleIndex: number | null;
 }
 
 interface LocalActions {
@@ -60,6 +61,7 @@ interface LocalActions {
     callback: ((cursor: { x: number; y: number } | null) => void) | null,
   ) => void;
   setStageRef: (ref: React.RefObject<Konva.Stage | null>) => void;
+  setSelectedHandleIndex: (index: number | null) => void;
 }
 
 type LocalStore = LocalState & LocalActions;
@@ -140,6 +142,10 @@ export const useWhiteboardLocalStore = create<LocalStore>((set, get) => ({
   setAwarenessCallback: (callback) => set({ awarenessCallback: callback }),
   setCursorCallback: (callback) => set({ cursorCallback: callback }),
 
+  // 화살표 핸들 선택
+  selectedHandleIndex: null,
+  setSelectedHandleIndex: (index) => set({ selectedHandleIndex: index }),
+
   // Text Editing 초기값
   editingTextId: null,
   setEditingTextId: (id) => set({ editingTextId: id }),

From 7e2fb47e728bd621584b8e28ae85346c83a85912 Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 19:11:09 +0900
Subject: [PATCH 07/17] =?UTF-8?q?=F0=9F=93=8D=20Feat:=20=ED=99=94=EC=82=B4?=
 =?UTF-8?q?=ED=91=9C=20=ED=95=B8=EB=93=A4=20=EC=82=BD=EC=9E=85,=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EC=95=A1=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/useItemActions.ts | 70 ++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)

diff --git a/frontend/src/hooks/useItemActions.ts b/frontend/src/hooks/useItemActions.ts
index fb64f57c..93e2fcff 100644
--- a/frontend/src/hooks/useItemActions.ts
+++ b/frontend/src/hooks/useItemActions.ts
@@ -2,11 +2,14 @@ import { v4 as uuidv4 } from 'uuid';
 import * as Y from 'yjs';
 
 import { useWhiteboardSharedStore } from '@/store/useWhiteboardSharedStore';
+import { useWhiteboardLocalStore } from '@/store/useWhiteboardLocalStore';
 import {
   CANVAS_WIDTH,
   CANVAS_HEIGHT,
 } from '@/components/whiteboard/constants/canvas';
 import { TEXT_SIZE_PRESETS } from '@/constants/textPresets';
+import { pointToSegmentDistance } from '@/utils/arrow';
+import { getWorldPointerPosition } from '@/utils/coordinate';
 
 import type {
   WhiteboardItem,
@@ -342,6 +345,71 @@ export function useItemActions() {
     yItems.doc.transact(fn, yjsOrigin);
   };
 
+  const deleteArrowControlPoint = (arrowId: string, handleIndex: number) => {
+    if (!yItems || !yItems.doc) return false;
+
+    const yMaps = yItems.toArray();
+    const index = yMaps.findIndex((yMap) => yMap.get('id') === arrowId);
+    if (index === -1) return false;
+
+    const store = useWhiteboardSharedStore.getState();
+    const targetItem = store.items.find((item) => item.id === arrowId);
+    if (!targetItem || targetItem.type !== 'arrow') return false;
+
+    if (handleIndex >= 2 && handleIndex < targetItem.points.length - 2) {
+      const newPoints = [...targetItem.points];
+      newPoints.splice(handleIndex, 2);
+
+      if (newPoints.length >= 4) {
+        updateItem(arrowId, { points: newPoints });
+        useWhiteboardLocalStore.getState().setSelectedHandleIndex(null);
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const insertArrowControlPoint = (arrowId: string) => {
+    const store = useWhiteboardSharedStore.getState();
+    const localStore = useWhiteboardLocalStore.getState();
+    const targetItem = store.items.find((item) => item.id === arrowId);
+
+    if (!targetItem || targetItem.type !== 'arrow') return;
+
+    const stage = localStore.stageRef?.current;
+    if (!stage) return;
+
+    const worldPos = getWorldPointerPosition(stage);
+    const worldX = worldPos.x;
+    const worldY = worldPos.y;
+
+    let minDistance = Infinity;
+    let insertIndex = 2;
+
+    for (let i = 0; i < targetItem.points.length - 2; i += 2) {
+      const x1 = targetItem.points[i];
+      const y1 = targetItem.points[i + 1];
+      const x2 = targetItem.points[i + 2];
+      const y2 = targetItem.points[i + 3];
+
+      const distance = pointToSegmentDistance(worldX, worldY, x1, y1, x2, y2);
+
+      if (distance < minDistance) {
+        minDistance = distance;
+        insertIndex = i + 2;
+      }
+    }
+
+    const newPoints = [
+      ...targetItem.points.slice(0, insertIndex),
+      worldX,
+      worldY,
+      ...targetItem.points.slice(insertIndex),
+    ];
+
+    updateItem(arrowId, { points: newPoints });
+  };
+
   return {
     addText,
     addArrow,
@@ -358,5 +426,7 @@ export function useItemActions() {
     bringForward,
     sendBackward,
     performTransaction,
+    deleteArrowControlPoint,
+    insertArrowControlPoint,
   };
 }

From 3c03e1df5a22ad215f6e86263c125b16c17f977c Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 19:12:04 +0900
Subject: [PATCH 08/17] =?UTF-8?q?=F0=9F=A4=96=20Refactor:=20useArrowHandle?=
 =?UTF-8?q?s=EC=97=90=EC=84=9C=20=EB=82=B4=EB=B6=80=20=EC=83=81=ED=83=9C?=
 =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0=20=ED=9B=84=20Store=20=ED=99=9C=EC=9A=A9?=
 =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/useArrowHandles.ts | 59 ++++++---------------------
 1 file changed, 12 insertions(+), 47 deletions(-)

diff --git a/frontend/src/hooks/useArrowHandles.ts b/frontend/src/hooks/useArrowHandles.ts
index a52d3933..3753680f 100644
--- a/frontend/src/hooks/useArrowHandles.ts
+++ b/frontend/src/hooks/useArrowHandles.ts
@@ -1,5 +1,4 @@
 import { useState, useRef } from 'react';
-import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';
 import type {
   ArrowItem,
@@ -7,25 +6,27 @@ import type {
   WhiteboardItem,
   ShapeItem,
 } from '@/types/whiteboard';
-import { pointToSegmentDistance } from '@/utils/arrow';
-import { getWorldPointerPosition } from '@/utils/coordinate';
 import { getNearestSnapPoint } from '@/utils/geom';
+import { useWhiteboardLocalStore } from '@/store/useWhiteboardLocalStore';
 
 interface UseArrowHandlesProps {
   arrow: ArrowItem | LineItem | null;
   items: WhiteboardItem[];
-  stageRef: React.RefObject<Konva.Stage | null>;
   updateItem: (id: string, payload: Partial<WhiteboardItem>) => void;
+  setIsDraggingArrow: (isDragging: boolean) => void;
 }
 
 export function useArrowHandles({
   arrow,
   items,
-  stageRef,
   updateItem,
+  setIsDraggingArrow,
 }: UseArrowHandlesProps) {
-  const [selectedHandleIndex, setSelectedHandleIndex] = useState<number | null>(
-    null,
+  const selectedHandleIndex = useWhiteboardLocalStore(
+    (state) => state.selectedHandleIndex,
+  );
+  const setSelectedHandleIndex = useWhiteboardLocalStore(
+    (state) => state.setSelectedHandleIndex,
   );
 
   // 드래그 중인 points를 로컬 상태로 관리
@@ -46,45 +47,6 @@ export function useArrowHandles({
     position: { x: number; y: number };
   } | null>(null);
 
-  // 화살표 더블클릭 - 중간점 추가
-  const handleArrowDblClick = (arrowId: string) => {
-    if (!arrow || !stageRef.current) return;
-
-    const stage = stageRef.current;
-    const worldPos = getWorldPointerPosition(stage);
-
-    const worldX = worldPos.x;
-    const worldY = worldPos.y;
-
-    // 가장 가까운 선분 찾기
-    let minDistance = Infinity;
-    let insertIndex = 2;
-
-    for (let i = 0; i < arrow.points.length - 2; i += 2) {
-      const x1 = arrow.points[i];
-      const y1 = arrow.points[i + 1];
-      const x2 = arrow.points[i + 2];
-      const y2 = arrow.points[i + 3];
-
-      const distance = pointToSegmentDistance(worldX, worldY, x1, y1, x2, y2);
-
-      if (distance < minDistance) {
-        minDistance = distance;
-        insertIndex = i + 2;
-      }
-    }
-
-    // 중간 point 삽입
-    const newPoints = [
-      ...arrow.points.slice(0, insertIndex),
-      worldX,
-      worldY,
-      ...arrow.points.slice(insertIndex),
-    ];
-
-    updateItem(arrowId, { points: newPoints });
-  };
-
   // 화살표 핸들 클릭
   const handleHandleClick = (
     e: KonvaEventObject<MouseEvent>,
@@ -165,7 +127,10 @@ export function useArrowHandles({
 
   // 화살표 시작점 드래그
   const handleArrowStartDrag = (e: KonvaEventObject<DragEvent>) => {
+    e.cancelBubble = true;
     if (!arrow) return;
+    setIsDraggingArrow(true);
+    setDraggingPoints([...arrow.points]);
 
     const { x, y } = e.target.position();
     // 부착 체크
@@ -235,6 +200,7 @@ export function useArrowHandles({
     setDraggingPoints(null);
     setSnapIndicator(null);
     currentSnapTarget.current = null;
+    setIsDraggingArrow(false);
   };
 
   // 화살표 중간점 삭제
@@ -268,7 +234,6 @@ export function useArrowHandles({
     handleArrowControlPointDrag,
     handleArrowEndDrag,
     handleHandleDragEnd,
-    handleArrowDblClick,
     deleteControlPoint,
     draggingPoints,
     snapIndicator,

From 2407bd757435c3567fa7f9622b0da314e0264be5 Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 19:28:55 +0900
Subject: [PATCH 09/17] =?UTF-8?q?=F0=9F=A4=96=20Refactor:=20useCanvasShort?=
 =?UTF-8?q?cuts=EC=97=90=EC=84=9C=20=EC=A7=81=EC=A0=91=20=EC=A0=84?=
 =?UTF-8?q?=EB=8B=AC=EB=B0=9B=EB=8D=98=20props=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/useCanvasShortcuts.ts | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/hooks/useCanvasShortcuts.ts b/frontend/src/hooks/useCanvasShortcuts.ts
index f1bb2b0d..f1ee2146 100644
--- a/frontend/src/hooks/useCanvasShortcuts.ts
+++ b/frontend/src/hooks/useCanvasShortcuts.ts
@@ -7,14 +7,10 @@ import { CursorMode } from '@/types/whiteboard/base';
 
 interface UseCanvasShortcutsProps {
   isArrowOrLineSelected: boolean;
-  selectedHandleIndex: number | null;
-  deleteControlPoint: () => boolean;
 }
 
 export const useCanvasShortcuts = ({
   isArrowOrLineSelected,
-  selectedHandleIndex,
-  deleteControlPoint,
 }: UseCanvasShortcutsProps) => {
   const selectedIds = useWhiteboardLocalStore((state) => state.selectedIds);
   const selectedId = selectedIds[0] ?? null;
@@ -24,7 +20,10 @@ export const useCanvasShortcuts = ({
   const clearSelection = useWhiteboardLocalStore(
     (state) => state.clearSelection,
   );
-  const { deleteItem, deleteItems } = useItemActions();
+  const selectedHandleIndex = useWhiteboardLocalStore(
+    (state) => state.selectedHandleIndex,
+  );
+  const { deleteItem, deleteItems, deleteArrowControlPoint } = useItemActions();
   const { undo, redo } = useWhiteboardHistory();
   const { copy, paste } = useWhiteboardClipboard();
 
@@ -112,7 +111,10 @@ export const useCanvasShortcuts = ({
           isArrowOrLineSelected &&
           selectedHandleIndex !== null
         ) {
-          const deleted = deleteControlPoint();
+          const deleted = deleteArrowControlPoint(
+            selectedId,
+            selectedHandleIndex,
+          );
           if (deleted) return;
         }
 
@@ -150,7 +152,7 @@ export const useCanvasShortcuts = ({
     deleteItems,
     isArrowOrLineSelected,
     selectedHandleIndex,
-    deleteControlPoint,
+    deleteArrowControlPoint,
     clearSelection,
     undo,
     redo,

From d7522017be58d779766860b209194aad9614eb10 Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 19:29:54 +0900
Subject: [PATCH 10/17] =?UTF-8?q?=F0=9F=93=8D=20Feat:=20canvas=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EB=B7=B0=ED=8F=AC=ED=8A=B8=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8=20=EB=B0=8F=20=ED=95=84=ED=84=B0=EB=A7=81=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=ED=9B=85=EC=9C=BC=EB=A1=9C=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/useViewportController.ts | 148 ++++++++++++++++++++
 1 file changed, 148 insertions(+)
 create mode 100644 frontend/src/hooks/useViewportController.ts

diff --git a/frontend/src/hooks/useViewportController.ts b/frontend/src/hooks/useViewportController.ts
new file mode 100644
index 00000000..1bd72dc3
--- /dev/null
+++ b/frontend/src/hooks/useViewportController.ts
@@ -0,0 +1,148 @@
+import { useState, useEffect, useMemo, useRef } from 'react';
+import Konva from 'konva';
+import { useWhiteboardSharedStore } from '@/store/useWhiteboardSharedStore';
+import { useWhiteboardLocalStore } from '@/store/useWhiteboardLocalStore';
+import { getViewportRect, filterVisibleItems } from '@/utils/viewport';
+import type { WhiteboardItem } from '@/types/whiteboard';
+
+interface UseViewportControllerProps {
+  stageRef: React.RefObject<Konva.Stage | null>;
+  size: { width: number; height: number };
+  items: WhiteboardItem[];
+}
+
+export function useViewportController({
+  stageRef,
+  size,
+  items,
+}: UseViewportControllerProps) {
+  const canvasWidth = useWhiteboardSharedStore((state) => state.canvasWidth);
+  const canvasHeight = useWhiteboardSharedStore((state) => state.canvasHeight);
+  const setViewportSize = useWhiteboardLocalStore(
+    (state) => state.setViewportSize,
+  );
+  const setStageScale = useWhiteboardLocalStore((state) => state.setStageScale);
+  const setStagePos = useWhiteboardLocalStore((state) => state.setStagePos);
+
+  const isInitialMount = useRef(true);
+  const [pixelRatio, setPixelRatio] = useState(
+    typeof window !== 'undefined' ? window.devicePixelRatio : 1,
+  );
+  const [viewportRect, setViewportRect] = useState<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null>(null);
+
+  // 초기 Stage 위치 설정
+  useEffect(() => {
+    const stage = stageRef.current;
+    if (
+      !stage ||
+      !isInitialMount.current ||
+      size.width === 0 ||
+      size.height === 0
+    )
+      return;
+
+    // 캔버스를 화면 정가운데 배치
+    const centerPos = {
+      x: (size.width - canvasWidth) / 2,
+      y: (size.height - canvasHeight) / 2,
+    };
+
+    stage.scale({ x: 1, y: 1 });
+    stage.position(centerPos);
+    stage.batchDraw();
+    setViewportSize(size.width, size.height);
+    setStagePos(centerPos);
+    setStageScale(1);
+
+    useWhiteboardLocalStore.getState().setStageRef(stageRef);
+
+    isInitialMount.current = false;
+  }, [
+    size.width,
+    size.height,
+    canvasWidth,
+    canvasHeight,
+    setViewportSize,
+    setStagePos,
+    setStageScale,
+    stageRef,
+  ]);
+
+  // viewport 업데이트
+  useEffect(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+
+    const updateViewport = () => {
+      setViewportRect(getViewportRect(stage));
+    };
+
+    // 초기 viewport 설정
+    updateViewport();
+
+    // Stage 이동/줌 시 viewport 업데이트
+    let rafId: number;
+    const throttledUpdate = () => {
+      if (rafId) return;
+      rafId = requestAnimationFrame(() => {
+        updateViewport();
+        rafId = 0;
+      });
+    };
+
+    stage.on('dragmove', throttledUpdate);
+    stage.on('wheel', throttledUpdate);
+
+    return () => {
+      stage.off('dragmove', throttledUpdate);
+      stage.off('wheel', throttledUpdate);
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [stageRef]);
+
+  // 화면에 보이는 아이템만 필터링
+  const visibleItems = useMemo(() => {
+    if (!viewportRect) return items;
+    return filterVisibleItems(items, viewportRect);
+  }, [items, viewportRect]);
+
+  // 줌 레벨에 따른 pixelRatio 조절
+  useEffect(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+
+    const updatePixelRatio = () => {
+      const scale = stage.scaleX();
+      let ratio: number;
+      if (scale >= 1.5) ratio = window.devicePixelRatio;
+      else if (scale >= 1) ratio = 1.5;
+      else if (scale >= 0.5) ratio = 1;
+      else if (scale >= 0.3) ratio = 0.5;
+      else ratio = 0.25;
+
+      setPixelRatio(ratio);
+    };
+
+    updatePixelRatio();
+
+    stage.on('wheel', updatePixelRatio);
+
+    return () => {
+      stage.off('wheel', updatePixelRatio);
+    };
+  }, [stageRef]);
+
+  // viewport 크기를 store에 업데이트
+  useEffect(() => {
+    if (size.width > 0 && size.height > 0) {
+      setViewportSize(size.width, size.height);
+    }
+  }, [size.width, size.height, setViewportSize]);
+
+  return { visibleItems, pixelRatio };
+}

From dd047376642fe62bb6bbc94d3a4b6a59ef830584 Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 19:30:41 +0900
Subject: [PATCH 11/17] =?UTF-8?q?=F0=9F=A4=96=20Refactor:=20=EC=A4=91?=
 =?UTF-8?q?=EA=B0=84=20=EC=83=81=ED=83=9C=20props=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../whiteboard/layers/ItemRenderingLayer.tsx  | 22 +++----------------
 1 file changed, 3 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx b/frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx
index 281e7726..f1509865 100644
--- a/frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx
+++ b/frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx
@@ -3,15 +3,13 @@ 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;
-  draggingPoints: number[] | null;
   isDraggingArrow: boolean;
   localDraggingId: string | null;
   localDraggingPos: {
@@ -30,7 +28,6 @@ interface ItemRenderingLayerProps {
     id: string,
     newAttributes: Partial<WhiteboardItem>,
   ) => void;
-  handleArrowDblClick: (id: string) => void;
   handleShapeDblClick: (id: string) => void;
   setIsDraggingArrow: (isDragging: boolean) => void;
   startMultiDrag: (id: string) => void;
@@ -49,15 +46,12 @@ interface ItemRenderingLayerProps {
 export default function ItemRenderingLayer({
   items,
   visibleItems,
-  singleSelectedId,
-  draggingPoints,
   localDraggingId,
   localDraggingPos,
   getMultiDragPosition,
   selectedIds,
   handleSelectItem,
   handleItemChange,
-  handleArrowDblClick,
   handleShapeDblClick,
   setIsDraggingArrow,
   startMultiDrag,
@@ -65,6 +59,7 @@ export default function ItemRenderingLayer({
   handleTransformMoveItem,
   handleDragEndItem,
 }: ItemRenderingLayerProps) {
+  const { insertArrowControlPoint } = useItemActions();
   return (
     <>
       {visibleItems.map((item) => {
@@ -110,17 +105,6 @@ export default function ItemRenderingLayer({
           }
         }
 
-        if (
-          displayItem.id === singleSelectedId &&
-          (displayItem.type === 'arrow' || displayItem.type === 'line') &&
-          draggingPoints
-        ) {
-          displayItem = {
-            ...displayItem,
-            points: draggingPoints,
-          } as WhiteboardItem;
-        }
-
         return (
           <RenderItem
             key={item.id}
@@ -130,7 +114,7 @@ export default function ItemRenderingLayer({
             onChange={(newAttributes) =>
               handleItemChange(item.id, newAttributes)
             }
-            onArrowDblClick={handleArrowDblClick}
+            onArrowDblClick={insertArrowControlPoint}
             onShapeDblClick={handleShapeDblClick}
             onDragStart={() => {
               if (item.type === 'arrow' || item.type === 'line') {

From f20e6fdc4ab633af5d151433f0bef812f430b191 Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 19:32:26 +0900
Subject: [PATCH 12/17] =?UTF-8?q?=F0=9F=A4=96=20Refactor:=20=ED=99=94?=
 =?UTF-8?q?=EC=82=B4=ED=91=9C=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=EB=B6=80?=
 =?UTF-8?q?=EB=B6=84=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=B5=9C=EC=A0=81?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../whiteboard/layers/InteractionLayer.tsx    | 74 +++++++++++--------
 1 file changed, 45 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/whiteboard/layers/InteractionLayer.tsx b/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
index bca950cb..a4836e56 100644
--- a/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
+++ b/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
@@ -2,11 +2,15 @@ import React from 'react';
 import Konva from 'konva';
 import { Rect } from 'react-konva';
 
-import type { WhiteboardItem, ArrowItem } from '@/types/whiteboard';
+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;
@@ -15,26 +19,7 @@ interface InteractionLayerProps {
   items: WhiteboardItem[];
   stageRef: React.RefObject<Konva.Stage | null>;
   isDraggingArrow: boolean;
-  selectedHandleIndex: number | null;
-  draggingPoints: number[] | null;
-  snapIndicator: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    rotation?: number;
-  } | null;
-  handleHandleClick: (
-    e: Konva.KonvaEventObject<MouseEvent>,
-    index: number,
-  ) => void;
-  handleArrowStartDrag: (e: Konva.KonvaEventObject<DragEvent>) => void;
-  handleArrowControlPointDrag: (
-    pointIndex: number,
-    e: Konva.KonvaEventObject<DragEvent>,
-  ) => void;
-  handleArrowEndDrag: (e: Konva.KonvaEventObject<DragEvent>) => void;
-  handleHandleDragEnd: (handleType: 'start' | 'end' | 'mid') => void;
+  setIsDraggingArrow: (isDragging: boolean) => void;
 }
 
 export default function InteractionLayer({
@@ -44,17 +29,48 @@ export default function InteractionLayer({
   items,
   stageRef,
   isDraggingArrow,
-  selectedHandleIndex,
-  draggingPoints,
-  snapIndicator,
-  handleHandleClick,
-  handleArrowStartDrag,
-  handleArrowControlPointDrag,
-  handleArrowEndDrag,
-  handleHandleDragEnd,
+  setIsDraggingArrow,
 }: InteractionLayerProps) {
+  const { updateItem } = useItemActions();
+  const {
+    selectedHandleIndex,
+    handleHandleClick,
+    handleArrowStartDrag,
+    handleArrowControlPointDrag,
+    handleArrowEndDrag,
+    handleHandleDragEnd,
+    draggingPoints,
+    snapIndicator,
+  } = useArrowHandles({
+    arrow: isArrowOrLineSelected ? (selectedItem as ArrowItem) : null,
+    items,
+    updateItem,
+    setIsDraggingArrow,
+  });
+
   return (
     <>
+      {/* 화살표 드래그 중 실시간 임시 렌더링 (60fps 최적화) */}
+      {draggingPoints && selectedItem && (
+        <RenderItem
+          item={
+            {
+              ...selectedItem,
+              points: draggingPoints,
+            } as ArrowItem | LineItem
+          }
+          isSelected={true}
+          onSelect={() => {}}
+          onChange={() => {}}
+          onArrowDblClick={() => {}}
+          onShapeDblClick={() => {}}
+          onDragStart={() => {}}
+          onDragMove={() => {}}
+          onTransformMove={() => {}}
+          onDragEnd={() => {}}
+        />
+      )}
+
       {/* 화살표 핸들 */}
       {isArrowOrLineSelected && selectedItem && !isDraggingArrow && (
         <ArrowHandles

From 718e22d2265a6a84eabc31ac345f964667d76a99 Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 19:33:12 +0900
Subject: [PATCH 13/17] =?UTF-8?q?=F0=9F=93=8D=20Feat:=20=EB=A7=88=EC=9A=B0?=
 =?UTF-8?q?=EC=8A=A4/=ED=84=B0=EC=B9=98/=ED=9C=A0=20=EB=93=B1=20=EC=BA=94?=
 =?UTF-8?q?=EB=B2=84=EC=8A=A4=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=20=EB=A1=9C=EC=A7=81=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/hooks/useCanvasGlobalEvents.ts | 146 ++++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 frontend/src/hooks/useCanvasGlobalEvents.ts

diff --git a/frontend/src/hooks/useCanvasGlobalEvents.ts b/frontend/src/hooks/useCanvasGlobalEvents.ts
new file mode 100644
index 00000000..ef0b600d
--- /dev/null
+++ b/frontend/src/hooks/useCanvasGlobalEvents.ts
@@ -0,0 +1,146 @@
+import { useCallback } from 'react';
+import Konva from 'konva';
+
+import { useWhiteboardLocalStore } from '@/store/useWhiteboardLocalStore';
+import { useWhiteboardSharedStore } from '@/store/useWhiteboardSharedStore';
+import { useSelectionBox } from '@/hooks/useSelectionBox';
+import { useCanvasMouseEvents } from '@/hooks/useCanvasMouseEvents';
+import { usePinchZoom } from '@/hooks/usePinchZoom';
+
+interface UseCanvasGlobalEventsProps {
+  stageRef: React.RefObject<Konva.Stage | null>;
+  handleWheel: (e: Konva.KonvaEventObject<WheelEvent>) => void;
+}
+
+export function useCanvasGlobalEvents({
+  stageRef,
+  handleWheel,
+}: UseCanvasGlobalEventsProps) {
+  const editingTextId = useWhiteboardLocalStore((state) => state.editingTextId);
+  const cursorMode = useWhiteboardLocalStore((state) => state.cursorMode);
+  const setStageScale = useWhiteboardLocalStore((state) => state.setStageScale);
+  const setStagePos = useWhiteboardLocalStore((state) => state.setStagePos);
+  const clearSelection = useWhiteboardLocalStore(
+    (state) => state.clearSelection,
+  );
+
+  // 선택 해제 핸들러
+  const handleCheckDeselect = useCallback(
+    (e: Konva.KonvaEventObject<MouseEvent | TouchEvent>) => {
+      if (editingTextId) return;
+
+      const clickedOnEmpty =
+        e.target === e.target.getStage() || e.target.hasName('bg-rect');
+
+      if (clickedOnEmpty) {
+        clearSelection();
+        useWhiteboardLocalStore.getState().setSelectedHandleIndex(null);
+      }
+    },
+    [editingTextId, clearSelection],
+  );
+
+  const { startSelection, cancelSelection } = useSelectionBox({
+    stageRef,
+    enabled: cursorMode === 'select',
+  });
+
+  // 마우스 이벤트 통합 훅
+  const { handlePointerDown, handlePointerMove, cancelDrawing, cancelErasing } =
+    useCanvasMouseEvents({
+      onDeselect: handleCheckDeselect,
+      onSelectionBoxStart: startSelection,
+    });
+
+  // 핀치 줌 훅
+  const {
+    isActive: isPinching,
+    handleTouchStart: handlePinchStart,
+    handleTouchMove: handlePinchMove,
+    handleTouchEnd: handlePinchEnd,
+  } = usePinchZoom({
+    stageRef,
+    onScaleChange: setStageScale,
+    onPositionChange: setStagePos,
+    onPinchStart: () => {
+      // 핀치 시작 시 그리기/지우개/선택박스 취소
+      cancelDrawing();
+      cancelErasing();
+      cancelSelection();
+      // 아이템 선택 해제
+      clearSelection();
+    },
+  });
+
+  // 캔버스 드래그 가능 여부 (핀치 줌 중에는 비활성화함)
+  const isDraggable = cursorMode === 'move' && !isPinching;
+
+  const handleTouchStart = useCallback(
+    (e: Konva.KonvaEventObject<TouchEvent>) => {
+      if (e.evt.touches.length === 2) {
+        handlePinchStart(e.evt);
+      } else {
+        handlePointerDown(e);
+      }
+    },
+    [handlePinchStart, handlePointerDown],
+  );
+
+  const handleTouchMove = useCallback(
+    (e: Konva.KonvaEventObject<TouchEvent>) => {
+      if (e.evt.touches.length === 2) {
+        handlePinchMove(e.evt);
+      } else {
+        handlePointerMove(e);
+      }
+    },
+    [handlePinchMove, handlePointerMove],
+  );
+
+  const handleTouchEnd = useCallback(
+    (e: Konva.KonvaEventObject<TouchEvent>) => {
+      handlePinchEnd(e.evt);
+    },
+    [handlePinchEnd],
+  );
+
+  const handleWheelWithEvent = useCallback(
+    (e: Konva.KonvaEventObject<WheelEvent>) => {
+      handleWheel(e);
+
+      const stage = stageRef.current;
+      if (!stage) return;
+
+      // wheel 후 커서 위치 업데이트
+      const pointerPos = stage.getPointerPosition();
+      if (pointerPos) {
+        const transform = stage.getAbsoluteTransform().copy().invert();
+        const canvasPos = transform.point(pointerPos);
+
+        const awareness = useWhiteboardSharedStore.getState().awareness;
+        if (awareness) {
+          const currentState = awareness.getLocalState();
+          if (currentState) {
+            awareness.setLocalState({
+              ...currentState,
+              cursor: { x: canvasPos.x, y: canvasPos.y },
+            });
+          }
+        }
+      }
+
+      stage.fire('stageTransformChange');
+    },
+    [handleWheel, stageRef],
+  );
+
+  return {
+    isDraggable,
+    handlePointerDown,
+    handlePointerMove,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    handleWheelWithEvent,
+  };
+}

From 114e86bf5a5db0989315edced76e876dbb30488b Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 19:34:17 +0900
Subject: [PATCH 14/17] =?UTF-8?q?=F0=9F=A4=96=20Refactor:=20canvas=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/whiteboard/Canvas.tsx | 310 ++----------------
 1 file changed, 34 insertions(+), 276 deletions(-)

diff --git a/frontend/src/components/whiteboard/Canvas.tsx b/frontend/src/components/whiteboard/Canvas.tsx
index 3800a7ba..dc59fae4 100644
--- a/frontend/src/components/whiteboard/Canvas.tsx
+++ b/frontend/src/components/whiteboard/Canvas.tsx
@@ -1,38 +1,38 @@
 'use client';
 
-import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { useRef, useState, useMemo, useCallback } from 'react';
 
 import Konva from 'konva';
 import { Stage, Layer } from 'react-konva';
 
-import type { WhiteboardItem, ArrowItem, ShapeItem } from '@/types/whiteboard';
+import type { WhiteboardItem, ShapeItem } from '@/types/whiteboard';
 
 import { useWhiteboardSharedStore } from '@/store/useWhiteboardSharedStore';
 import { useWhiteboardLocalStore } from '@/store/useWhiteboardLocalStore';
+import { useWhiteboardAwarenessStore } from '@/store/useWhiteboardAwarenessStore';
 import { cn } from '@/utils/cn';
 import { updateBoundArrows } from '@/utils/arrowBinding';
-import { getViewportRect, filterVisibleItems } from '@/utils/viewport';
 
 import { useItemActions } from '@/hooks/useItemActions';
 import { useElementSize } from '@/hooks/useElementSize';
 import { useClickOutside } from '@/hooks/useClickOutside';
 import { useCanvasInteraction } from '@/hooks/useCanvasInteraction';
-import { useArrowHandles } from '@/hooks/useArrowHandles';
-import { useCanvasMouseEvents } from '@/hooks/useCanvasMouseEvents';
 import { useCanvasShortcuts } from '@/hooks/useCanvasShortcuts';
 import { useAddWhiteboardItem } from '@/hooks/useAddWhiteboardItem';
-import { useSelectionBox } from '@/hooks/useSelectionBox';
 import { useMultiDrag } from '@/hooks/useMultiDrag';
-import { usePinchZoom } from '@/hooks/usePinchZoom';
+import { useViewportController } from '@/hooks/useViewportController';
+import { useCanvasGlobalEvents } from '@/hooks/useCanvasGlobalEvents';
 
 import BackgroundLayer from '@/components/whiteboard/layers/BackgroundLayer';
 import ItemRenderingLayer from '@/components/whiteboard/layers/ItemRenderingLayer';
+import CollaborationLayer from '@/components/whiteboard/layers/CollaborationLayer';
 import TextEditorLayer from '@/components/whiteboard/layers/TextEditorLayer';
 import InteractionLayer from '@/components/whiteboard/layers/InteractionLayer';
 
 const GEOMETRY_KEYS = ['x', 'y', 'width', 'height', 'rotation'] as const;
 
 export default function Canvas() {
+  const myUserId = useWhiteboardAwarenessStore((state) => state.myUserId);
   const canvasWidth = useWhiteboardSharedStore((state) => state.canvasWidth);
   const canvasHeight = useWhiteboardSharedStore((state) => state.canvasHeight);
   const items = useWhiteboardSharedStore((state) => state.items);
@@ -52,18 +52,12 @@ export default function Canvas() {
   const setEditingTextId = useWhiteboardLocalStore(
     (state) => state.setEditingTextId,
   );
-  const setViewportSize = useWhiteboardLocalStore(
-    (state) => state.setViewportSize,
-  );
-  const setStageScale = useWhiteboardLocalStore((state) => state.setStageScale);
-  const setStagePos = useWhiteboardLocalStore((state) => state.setStagePos);
   const cursorMode = useWhiteboardLocalStore((state) => state.cursorMode);
 
   const { processImageFile, getCanvasPointFromEvent } = useAddWhiteboardItem();
 
   const stageRef = useRef<Konva.Stage | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-  const isInitialMount = useRef(true);
   const [isDraggingArrow, setIsDraggingArrow] = useState(false);
   const [isDraggingCanvas, setIsDraggingCanvas] = useState(false);
   const [localDraggingId, setLocalDraggingId] = useState<string | null>(null);
@@ -84,162 +78,32 @@ export default function Canvas() {
     getMultiDragPosition,
   } = useMultiDrag({ selectedIds, items });
 
-  // Viewport culling을 위한 상태
-  const [viewportRect, setViewportRect] = useState<{
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-  } | null>(null);
-
   const size = useElementSize(containerRef);
 
-  // 초기 Stage 위치 설정
-  useEffect(() => {
-    const stage = stageRef.current;
-    if (
-      !stage ||
-      !isInitialMount.current ||
-      size.width === 0 ||
-      size.height === 0
-    )
-      return;
-
-    // 캔버스를 화면 정가운데 배치
-    const centerPos = {
-      x: (size.width - canvasWidth) / 2,
-      y: (size.height - canvasHeight) / 2,
-    };
-
-    stage.scale({ x: 1, y: 1 });
-    stage.position(centerPos);
-    stage.batchDraw();
-    setViewportSize(size.width, size.height);
-    setStagePos(centerPos);
-    setStageScale(1);
-
-    useWhiteboardLocalStore.getState().setStageRef(stageRef);
-
-    isInitialMount.current = false;
-  }, [
-    size.width,
-    size.height,
-    canvasWidth,
-    canvasHeight,
-    setViewportSize,
-    setStagePos,
-    setStageScale,
-  ]);
-
-  // viewport 업데이트
-  useEffect(() => {
-    const stage = stageRef.current;
-    if (!stage) return;
-
-    const updateViewport = () => {
-      setViewportRect(getViewportRect(stage));
-    };
-
-    // 초기 viewport 설정
-    updateViewport();
-
-    // Stage 이동/줌 시 viewport 업데이트
-    let rafId: number;
-    const throttledUpdate = () => {
-      if (rafId) return;
-      rafId = requestAnimationFrame(() => {
-        updateViewport();
-        rafId = 0;
-      });
-    };
-
-    stage.on('dragmove', throttledUpdate);
-    stage.on('wheel', throttledUpdate);
-
-    return () => {
-      stage.off('dragmove', throttledUpdate);
-      stage.off('wheel', throttledUpdate);
-      if (rafId) cancelAnimationFrame(rafId);
-    };
-  }, []);
-
-  // 화면에 보이는 아이템만 필터링
-  const visibleItems = useMemo(() => {
-    if (!viewportRect) return items;
-    const filtered = filterVisibleItems(items, viewportRect);
-
-    return filtered;
-  }, [items, viewportRect]);
-
-  // 줌 레벨에 따른 pixelRatio 조절
-  const [pixelRatio, setPixelRatio] = useState(window.devicePixelRatio);
-
-  useEffect(() => {
-    const stage = stageRef.current;
-    if (!stage) return;
-
-    const updatePixelRatio = () => {
-      const scale = stage.scaleX();
-      let ratio: number;
-      if (scale >= 1.5) ratio = window.devicePixelRatio;
-      else if (scale >= 1) ratio = 1.5;
-      else if (scale >= 0.5) ratio = 1;
-      else if (scale >= 0.3) ratio = 0.5;
-      else ratio = 0.25;
-
-      setPixelRatio(ratio);
-    };
-
-    updatePixelRatio();
-
-    stage.on('wheel', updatePixelRatio);
-
-    return () => {
-      stage.off('wheel', updatePixelRatio);
-    };
-  }, []);
-
-  // viewport 크기를 store에 업데이트
-  useEffect(() => {
-    if (size.width > 0 && size.height > 0) {
-      setViewportSize(size.width, size.height);
-    }
-  }, [size.width, size.height, setViewportSize]);
+  // Viewport 관련 로직 (스케일, 줌, 패닝 뷰포트 컬링)
+  const { visibleItems, pixelRatio } = useViewportController({
+    stageRef,
+    size,
+    items,
+  });
 
   const { handleWheel, handleDragMove, handleDragEnd } = useCanvasInteraction(
     size.width,
     size.height,
   );
 
-  const handleWheelWithEvent = useCallback(
-    (e: Konva.KonvaEventObject<WheelEvent>) => {
-      handleWheel(e);
-
-      const stage = stageRef.current;
-      if (!stage) return;
-
-      // wheel 후 커서 위치 업데이트
-      const pointerPos = stage.getPointerPosition();
-      if (pointerPos) {
-        const transform = stage.getAbsoluteTransform().copy().invert();
-        const canvasPos = transform.point(pointerPos);
-
-        const awareness = useWhiteboardSharedStore.getState().awareness;
-        if (awareness) {
-          const currentState = awareness.getLocalState();
-          if (currentState) {
-            awareness.setLocalState({
-              ...currentState,
-              cursor: { x: canvasPos.x, y: canvasPos.y },
-            });
-          }
-        }
-      }
-
-      stage.fire('stageTransformChange');
-    },
-    [handleWheel],
-  );
+  const {
+    isDraggable,
+    handlePointerDown,
+    handlePointerMove,
+    handleTouchStart,
+    handleTouchMove,
+    handleTouchEnd,
+    handleWheelWithEvent,
+  } = useCanvasGlobalEvents({
+    stageRef,
+    handleWheel,
+  });
 
   const singleSelectedId = selectedIds.length === 1 ? selectedIds[0] : null;
   const selectedItem = useMemo(
@@ -254,31 +118,9 @@ export default function Canvas() {
     !!singleSelectedId &&
     (selectedItem?.type === 'arrow' || selectedItem?.type === 'line');
 
-  // 화살표/선 훅
-  const {
-    selectedHandleIndex,
-    setSelectedHandleIndex,
-    handleHandleClick,
-    handleArrowStartDrag,
-    handleArrowControlPointDrag,
-    handleArrowEndDrag,
-    handleHandleDragEnd,
-    handleArrowDblClick,
-    draggingPoints,
-    snapIndicator,
-    deleteControlPoint,
-  } = useArrowHandles({
-    arrow: isArrowOrLineSelected ? (selectedItem as ArrowItem) : null,
-    items,
-    stageRef,
-    updateItem,
-  });
-
   // 키보드 단축키 훅
   useCanvasShortcuts({
     isArrowOrLineSelected,
-    selectedHandleIndex,
-    deleteControlPoint,
   });
 
   // 도형 더블클릭 핸들러 (텍스트 편집 모드)
@@ -286,21 +128,6 @@ export default function Canvas() {
     setEditingTextId(id);
   };
 
-  // 선택 해제 핸들러
-  const handleCheckDeselect = (
-    e: Konva.KonvaEventObject<MouseEvent | TouchEvent>,
-  ) => {
-    if (editingTextId) return;
-
-    const clickedOnEmpty =
-      e.target === e.target.getStage() || e.target.hasName('bg-rect');
-
-    if (clickedOnEmpty) {
-      clearSelection();
-      setSelectedHandleIndex(null);
-    }
-  };
-
   // 드래그 앤 드롭
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
@@ -338,17 +165,12 @@ export default function Canvas() {
 
       if (selectedIds.length > 0) {
         clearSelection();
-        setSelectedHandleIndex(null);
+        useWhiteboardLocalStore.getState().setSelectedHandleIndex(null);
       }
     },
     !editingTextId && selectedIds.length > 0,
   );
 
-  const { startSelection, cancelSelection } = useSelectionBox({
-    stageRef,
-    enabled: cursorMode === 'select',
-  });
-
   const handleSelectItem = useCallback(
     (id: string, e: Konva.KonvaEventObject<MouseEvent | TouchEvent>) => {
       const nativeEvent = e?.evt as MouseEvent | TouchEvent | undefined;
@@ -378,67 +200,6 @@ export default function Canvas() {
     [addToSelection, selectOnly, toggleSelection, selectedIds],
   );
 
-  // 마우스 이벤트 통합 훅
-  const { handlePointerDown, handlePointerMove, cancelDrawing, cancelErasing } =
-    useCanvasMouseEvents({
-      onDeselect: handleCheckDeselect,
-      onSelectionBoxStart: startSelection,
-    });
-
-  // 핀치 줌 훅
-  const {
-    isActive: isPinching,
-    handleTouchStart: handlePinchStart,
-    handleTouchMove: handlePinchMove,
-    handleTouchEnd: handlePinchEnd,
-  } = usePinchZoom({
-    stageRef,
-    onScaleChange: setStageScale,
-    onPositionChange: setStagePos,
-    onPinchStart: () => {
-      // 핀치 시작 시 그리기/지우개/선택박스 취소
-      cancelDrawing();
-      cancelErasing();
-      cancelSelection();
-      // 아이템 선택 해제
-      clearSelection();
-    },
-  });
-
-  // 캔버스 드래그 가능 여부 (핀치 줌 중에는 비활성화함)
-  const isDraggable =
-    useWhiteboardLocalStore((state) => state.cursorMode === 'move') &&
-    !isPinching;
-
-  const handleTouchStart = useCallback(
-    (e: Konva.KonvaEventObject<TouchEvent>) => {
-      if (e.evt.touches.length === 2) {
-        handlePinchStart(e.evt);
-      } else {
-        handlePointerDown(e);
-      }
-    },
-    [handlePinchStart, handlePointerDown],
-  );
-
-  const handleTouchMove = useCallback(
-    (e: Konva.KonvaEventObject<TouchEvent>) => {
-      if (e.evt.touches.length === 2) {
-        handlePinchMove(e.evt);
-      } else {
-        handlePointerMove(e);
-      }
-    },
-    [handlePinchMove, handlePointerMove],
-  );
-
-  const handleTouchEnd = useCallback(
-    (e: Konva.KonvaEventObject<TouchEvent>) => {
-      handlePinchEnd(e.evt);
-    },
-    [handlePinchEnd],
-  );
-
   const handleItemChange = useCallback(
     (id: string, newAttributes: Partial<WhiteboardItem>) => {
       if (isMultiDragging(id)) {
@@ -586,15 +347,12 @@ export default function Canvas() {
             items={items}
             visibleItems={visibleItems}
             selectedIds={selectedIds}
-            singleSelectedId={singleSelectedId}
-            draggingPoints={draggingPoints}
             isDraggingArrow={isDraggingArrow}
             localDraggingId={localDraggingId}
             localDraggingPos={localDraggingPos}
             getMultiDragPosition={getMultiDragPosition}
             handleSelectItem={handleSelectItem}
             handleItemChange={handleItemChange}
-            handleArrowDblClick={handleArrowDblClick}
             handleShapeDblClick={handleShapeDblClick}
             setIsDraggingArrow={setIsDraggingArrow}
             startMultiDrag={startMultiDrag}
@@ -602,6 +360,13 @@ export default function Canvas() {
             handleTransformMoveItem={handleTransformMoveItem}
             handleDragEndItem={handleDragEndItem}
           />
+          <CollaborationLayer
+            myUserId={myUserId}
+            items={items}
+            selectedIds={selectedIds}
+            singleSelectedId={singleSelectedId}
+            stageRef={stageRef}
+          />
           <InteractionLayer
             isArrowOrLineSelected={isArrowOrLineSelected}
             selectedItem={selectedItem}
@@ -609,14 +374,7 @@ export default function Canvas() {
             items={items}
             stageRef={stageRef}
             isDraggingArrow={isDraggingArrow}
-            selectedHandleIndex={selectedHandleIndex}
-            draggingPoints={draggingPoints}
-            snapIndicator={snapIndicator}
-            handleHandleClick={handleHandleClick}
-            handleArrowStartDrag={handleArrowStartDrag}
-            handleArrowControlPointDrag={handleArrowControlPointDrag}
-            handleArrowEndDrag={handleArrowEndDrag}
-            handleHandleDragEnd={handleHandleDragEnd}
+            setIsDraggingArrow={setIsDraggingArrow}
           />
         </Layer>
       </Stage>

From f65867bfd7028e0b596a0a0c794f5bf6082c2405 Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 19:50:43 +0900
Subject: [PATCH 15/17] =?UTF-8?q?=F0=9F=94=A8=20Fix:=20=ED=99=94=EC=82=B4?=
 =?UTF-8?q?=ED=91=9C=20=ED=95=B8=EB=93=A4=20=EB=93=9C=EB=9E=98=EA=B7=B8=20?=
 =?UTF-8?q?=EC=8B=9C=20=EC=9E=84=EC=8B=9C=20=ED=99=94=EC=82=B4=ED=91=9C,?=
 =?UTF-8?q?=20=EC=9B=90=EB=B3=B8=20=ED=99=94=EC=82=B4=ED=91=9C=20=EB=91=90?=
 =?UTF-8?q?=20=EA=B0=80=EC=A7=80=20=ED=99=94=EC=82=B4=ED=91=9C=EA=B0=80=20?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=EB=90=98=EB=8A=94=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- isDraggingHandle 상태 도입
- 드래그 중 원본 화살표 렌더릴 x
---
 frontend/src/components/whiteboard/Canvas.tsx |  7 ++++++-
 .../whiteboard/items/arrow/ArrowHandles.tsx   |  5 +++++
 .../whiteboard/layers/InteractionLayer.tsx    |  9 +++++---
 .../whiteboard/layers/ItemRenderingLayer.tsx  | 21 +++++++++++++++++--
 frontend/src/hooks/useArrowHandles.ts         | 10 +++++++--
 5 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/whiteboard/Canvas.tsx b/frontend/src/components/whiteboard/Canvas.tsx
index dc59fae4..ca0d00d7 100644
--- a/frontend/src/components/whiteboard/Canvas.tsx
+++ b/frontend/src/components/whiteboard/Canvas.tsx
@@ -59,6 +59,7 @@ export default function Canvas() {
   const stageRef = useRef<Konva.Stage | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [isDraggingArrow, setIsDraggingArrow] = useState(false);
+  const [isDraggingHandle, setIsDraggingHandle] = useState(false);
   const [isDraggingCanvas, setIsDraggingCanvas] = useState(false);
   const [localDraggingId, setLocalDraggingId] = useState<string | null>(null);
   const [localDraggingPos, setLocalDraggingPos] = useState<{
@@ -347,7 +348,9 @@ export default function Canvas() {
             items={items}
             visibleItems={visibleItems}
             selectedIds={selectedIds}
+            singleSelectedId={singleSelectedId}
             isDraggingArrow={isDraggingArrow}
+            isDraggingHandle={isDraggingHandle}
             localDraggingId={localDraggingId}
             localDraggingPos={localDraggingPos}
             getMultiDragPosition={getMultiDragPosition}
@@ -355,6 +358,7 @@ export default function Canvas() {
             handleItemChange={handleItemChange}
             handleShapeDblClick={handleShapeDblClick}
             setIsDraggingArrow={setIsDraggingArrow}
+            setIsDraggingHandle={setIsDraggingHandle}
             startMultiDrag={startMultiDrag}
             handleDragMoveItem={handleDragMoveItem}
             handleTransformMoveItem={handleTransformMoveItem}
@@ -374,7 +378,8 @@ export default function Canvas() {
             items={items}
             stageRef={stageRef}
             isDraggingArrow={isDraggingArrow}
-            setIsDraggingArrow={setIsDraggingArrow}
+            isDraggingHandle={isDraggingHandle}
+            setIsDraggingHandle={setIsDraggingHandle}
           />
         </Layer>
       </Stage>
diff --git a/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx b/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx
index 02429148..93313222 100644
--- a/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx
+++ b/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx
@@ -10,6 +10,7 @@ interface ArrowHandlesProps {
   arrow: ArrowItem;
   selectedHandleIndex: number | null;
   onHandleClick: (e: KonvaEventObject<MouseEvent>, index: number) => void;
+  onDragStart: (e: KonvaEventObject<DragEvent>) => 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}
         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}
             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}
         onDragMove={onEndDrag}
         onDragEnd={() => onDragEnd('end')}
         onClick={(e) => onHandleClick(e, points.length - 2)}
diff --git a/frontend/src/components/whiteboard/layers/InteractionLayer.tsx b/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
index a4836e56..7cadf06a 100644
--- a/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
+++ b/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
@@ -19,7 +19,8 @@ interface InteractionLayerProps {
   items: WhiteboardItem[];
   stageRef: React.RefObject<Konva.Stage | null>;
   isDraggingArrow: boolean;
-  setIsDraggingArrow: (isDragging: boolean) => void;
+  isDraggingHandle: boolean;
+  setIsDraggingHandle: (isDragging: boolean) => void;
 }
 
 export default function InteractionLayer({
@@ -29,12 +30,13 @@ export default function InteractionLayer({
   items,
   stageRef,
   isDraggingArrow,
-  setIsDraggingArrow,
+  setIsDraggingHandle,
 }: InteractionLayerProps) {
   const { updateItem } = useItemActions();
   const {
     selectedHandleIndex,
     handleHandleClick,
+    handleHandleDragStart,
     handleArrowStartDrag,
     handleArrowControlPointDrag,
     handleArrowEndDrag,
@@ -45,7 +47,7 @@ export default function InteractionLayer({
     arrow: isArrowOrLineSelected ? (selectedItem as ArrowItem) : null,
     items,
     updateItem,
-    setIsDraggingArrow,
+    setIsDraggingArrow: setIsDraggingHandle,
   });
 
   return (
@@ -77,6 +79,7 @@ export default function InteractionLayer({
           arrow={selectedItem as ArrowItem}
           selectedHandleIndex={selectedHandleIndex}
           onHandleClick={handleHandleClick}
+          onDragStart={handleHandleDragStart}
           onStartDrag={handleArrowStartDrag}
           onControlPointDrag={handleArrowControlPointDrag}
           onEndDrag={handleArrowEndDrag}
diff --git a/frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx b/frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx
index f1509865..6dfdd6ae 100644
--- a/frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx
+++ b/frontend/src/components/whiteboard/layers/ItemRenderingLayer.tsx
@@ -10,7 +10,9 @@ interface ItemRenderingLayerProps {
   items: WhiteboardItem[];
   visibleItems: WhiteboardItem[];
   selectedIds: string[];
+  singleSelectedId: string | null;
   isDraggingArrow: boolean;
+  isDraggingHandle: boolean;
   localDraggingId: string | null;
   localDraggingPos: {
     x: number;
@@ -30,6 +32,7 @@ interface ItemRenderingLayerProps {
   ) => 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: (
@@ -46,6 +49,8 @@ interface ItemRenderingLayerProps {
 export default function ItemRenderingLayer({
   items,
   visibleItems,
+  singleSelectedId,
+  isDraggingHandle,
   localDraggingId,
   localDraggingPos,
   getMultiDragPosition,
@@ -105,6 +110,14 @@ export default function ItemRenderingLayer({
           }
         }
 
+        if (
+          isDraggingHandle &&
+          item.id === singleSelectedId &&
+          (item.type === 'arrow' || item.type === 'line')
+        ) {
+          return null;
+        }
+
         return (
           <RenderItem
             key={item.id}
@@ -117,9 +130,13 @@ export default function ItemRenderingLayer({
             onArrowDblClick={insertArrowControlPoint}
             onShapeDblClick={handleShapeDblClick}
             onDragStart={() => {
-              if (item.type === 'arrow' || item.type === 'line') {
-                setIsDraggingArrow(true);
+              if (
+                item.id === singleSelectedId &&
+                (item.type === 'arrow' || item.type === 'line')
+              ) {
+                // 핸들 드래그와 구분하기 위한 상태는 InteractionLayer에서 관리
               }
+              setIsDraggingArrow(true);
               startMultiDrag(item.id);
             }}
             onDragMove={handleDragMoveItem}
diff --git a/frontend/src/hooks/useArrowHandles.ts b/frontend/src/hooks/useArrowHandles.ts
index 3753680f..0266c691 100644
--- a/frontend/src/hooks/useArrowHandles.ts
+++ b/frontend/src/hooks/useArrowHandles.ts
@@ -125,12 +125,17 @@ export function useArrowHandles({
     }
   };
 
+  // 핸들 드래그 시작
+  const handleHandleDragStart = () => {
+    if (!arrow) return;
+    setIsDraggingArrow(true);
+    setDraggingPoints([...arrow.points]);
+  };
+
   // 화살표 시작점 드래그
   const handleArrowStartDrag = (e: KonvaEventObject<DragEvent>) => {
     e.cancelBubble = true;
     if (!arrow) return;
-    setIsDraggingArrow(true);
-    setDraggingPoints([...arrow.points]);
 
     const { x, y } = e.target.position();
     // 부착 체크
@@ -230,6 +235,7 @@ export function useArrowHandles({
     selectedHandleIndex,
     setSelectedHandleIndex,
     handleHandleClick,
+    handleHandleDragStart,
     handleArrowStartDrag,
     handleArrowControlPointDrag,
     handleArrowEndDrag,

From 644fe35bccdc86ae00997c9692009882ebff89a0 Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 20:20:37 +0900
Subject: [PATCH 16/17] =?UTF-8?q?=F0=9F=94=A8=20Fix:=20=EB=9D=BC=EC=9D=B8?=
 =?UTF-8?q?=20=EB=8D=94=EB=B8=94=ED=81=B4=EB=A6=AD=EC=8B=9C=20=ED=95=B8?=
 =?UTF-8?q?=EB=93=A4=EC=9D=B4=20=EC=B6=94=EA=B0=80=EB=90=98=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EB=8D=98=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 라인 더블클릭시 핸들 정상적으로 추가되도록 수정
- 화살표 부착 및 해제 로직 개선(핸들 기존 부착 정보 currentSnapTarget에 채워지도록)
---
 .../whiteboard/items/arrow/ArrowHandles.tsx   | 12 ++++-----
 .../whiteboard/layers/InteractionLayer.tsx    |  6 +++--
 frontend/src/hooks/useArrowHandles.ts         | 25 ++++++++++---------
 frontend/src/hooks/useItemActions.ts          | 12 +++++++--
 4 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx b/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx
index 93313222..6ce65e48 100644
--- a/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx
+++ b/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx
@@ -4,13 +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: (e: KonvaEventObject<DragEvent>) => void;
+  onDragStart: (handleType: 'start' | 'end' | 'mid') => void;
   onStartDrag: (e: KonvaEventObject<DragEvent>) => void;
   onControlPointDrag: (
     pointIndex: number,
@@ -54,7 +54,7 @@ export default function ArrowHandles({
         stroke="#0369A1"
         strokeWidth={2}
         draggable
-        onDragStart={onDragStart}
+        onDragStart={() => onDragStart('start')}
         onDragMove={onStartDrag}
         onDragEnd={() => onDragEnd('start')}
         onClick={(e) => onHandleClick(e, 0)}
@@ -75,7 +75,7 @@ export default function ArrowHandles({
             stroke="#B8E6FE"
             strokeWidth={isHandleSelected ? 3 : 2}
             draggable
-            onDragStart={onDragStart}
+            onDragStart={() => onDragStart('mid')}
             onDragMove={(e) => onControlPointDrag(point.index, e)}
             onDragEnd={() => onDragEnd('mid')}
             onClick={(e) => onHandleClick(e, point.index)}
@@ -94,7 +94,7 @@ export default function ArrowHandles({
         stroke="#0369A1"
         strokeWidth={2}
         draggable
-        onDragStart={onDragStart}
+        onDragStart={() => onDragStart('end')}
         onDragMove={onEndDrag}
         onDragEnd={() => onDragEnd('end')}
         onClick={(e) => onHandleClick(e, points.length - 2)}
diff --git a/frontend/src/components/whiteboard/layers/InteractionLayer.tsx b/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
index 7cadf06a..97e6b770 100644
--- a/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
+++ b/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
@@ -44,7 +44,9 @@ export default function InteractionLayer({
     draggingPoints,
     snapIndicator,
   } = useArrowHandles({
-    arrow: isArrowOrLineSelected ? (selectedItem as ArrowItem) : null,
+    arrow: isArrowOrLineSelected
+      ? (selectedItem as ArrowItem | LineItem)
+      : null,
     items,
     updateItem,
     setIsDraggingArrow: setIsDraggingHandle,
@@ -76,7 +78,7 @@ export default function InteractionLayer({
       {/* 화살표 핸들 */}
       {isArrowOrLineSelected && selectedItem && !isDraggingArrow && (
         <ArrowHandles
-          arrow={selectedItem as ArrowItem}
+          arrow={selectedItem as ArrowItem | LineItem}
           selectedHandleIndex={selectedHandleIndex}
           onHandleClick={handleHandleClick}
           onDragStart={handleHandleDragStart}
diff --git a/frontend/src/hooks/useArrowHandles.ts b/frontend/src/hooks/useArrowHandles.ts
index 0266c691..f420c563 100644
--- a/frontend/src/hooks/useArrowHandles.ts
+++ b/frontend/src/hooks/useArrowHandles.ts
@@ -126,10 +126,18 @@ export function useArrowHandles({
   };
 
   // 핸들 드래그 시작
-  const handleHandleDragStart = () => {
+  const handleHandleDragStart = (handleType: 'start' | 'end' | 'mid') => {
     if (!arrow) return;
     setIsDraggingArrow(true);
     setDraggingPoints([...arrow.points]);
+
+    if (arrow.type === 'arrow') {
+      if (handleType === 'start') {
+        currentSnapTarget.current = arrow.startBinding || null;
+      } else if (handleType === 'end') {
+        currentSnapTarget.current = arrow.endBinding || null;
+      }
+    }
   };
 
   // 화살표 시작점 드래그
@@ -184,19 +192,12 @@ export function useArrowHandles({
 
     const updates: Partial<ArrowItem> = { points: draggingPoints };
 
-    // 바인딩 정보 업데이트
-    if (handleType === 'start') {
-      if (currentSnapTarget.current) {
+    // 바인딩 정보 업데이트 (Arrow 타입일 경우에만)
+    if (arrow.type === 'arrow') {
+      if (handleType === 'start') {
         updates.startBinding = currentSnapTarget.current;
-      } else {
-        // 빈 공간에 놓으면 바인딩 해제
-        updates.startBinding = null;
-      }
-    } else if (handleType === 'end') {
-      if (currentSnapTarget.current) {
+      } else if (handleType === 'end') {
         updates.endBinding = currentSnapTarget.current;
-      } else {
-        updates.endBinding = null;
       }
     }
 
diff --git a/frontend/src/hooks/useItemActions.ts b/frontend/src/hooks/useItemActions.ts
index 93e2fcff..5315fa67 100644
--- a/frontend/src/hooks/useItemActions.ts
+++ b/frontend/src/hooks/useItemActions.ts
@@ -354,7 +354,11 @@ export function useItemActions() {
 
     const store = useWhiteboardSharedStore.getState();
     const targetItem = store.items.find((item) => item.id === arrowId);
-    if (!targetItem || targetItem.type !== 'arrow') return false;
+    if (
+      !targetItem ||
+      (targetItem.type !== 'arrow' && targetItem.type !== 'line')
+    )
+      return false;
 
     if (handleIndex >= 2 && handleIndex < targetItem.points.length - 2) {
       const newPoints = [...targetItem.points];
@@ -374,7 +378,11 @@ export function useItemActions() {
     const localStore = useWhiteboardLocalStore.getState();
     const targetItem = store.items.find((item) => item.id === arrowId);
 
-    if (!targetItem || targetItem.type !== 'arrow') return;
+    if (
+      !targetItem ||
+      (targetItem.type !== 'arrow' && targetItem.type !== 'line')
+    )
+      return;
 
     const stage = localStore.stageRef?.current;
     if (!stage) return;

From f93082ff6e25d72540daa34d51e287644c213f8f Mon Sep 17 00:00:00 2001
From: tjsdn052 <tjsdn052@naver.com>
Date: Tue, 3 Mar 2026 20:46:47 +0900
Subject: [PATCH 17/17] =?UTF-8?q?=F0=9F=8C=88=20Update:=20=EC=A3=BC?=
 =?UTF-8?q?=EC=84=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/whiteboard/layers/InteractionLayer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/whiteboard/layers/InteractionLayer.tsx b/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
index 97e6b770..1e69c970 100644
--- a/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
+++ b/frontend/src/components/whiteboard/layers/InteractionLayer.tsx
@@ -54,7 +54,7 @@ export default function InteractionLayer({
 
   return (
     <>
-      {/* 화살표 드래그 중 실시간 임시 렌더링 (60fps 최적화) */}
+      {/* 화살표 드래그 중 임시 렌더링 */}
       {draggingPoints && selectedItem && (
         <RenderItem
           item={