diff --git a/frontend/src/components/whiteboard/Canvas.tsx b/frontend/src/components/whiteboard/Canvas.tsx
index d7ae8a233..df014adf6 100644
--- a/frontend/src/components/whiteboard/Canvas.tsx
+++ b/frontend/src/components/whiteboard/Canvas.tsx
@@ -1,13 +1,19 @@
 'use client';
 
-import { useRef, useEffect, useState, useMemo } from 'react';
+import { useRef, useState, useMemo } from 'react';
+
 import Konva from 'konva';
 import { Stage, Layer, Rect } from 'react-konva';
-import { useCanvasStore } from '@/store/useCanvasStore';
+
 import type { WhiteboardItem, TextItem, ArrowItem } from '@/types/whiteboard';
+
+import { useCanvasStore } from '@/store/useCanvasStore';
+
 import { useWindowSize } from '@/hooks/useWindowSize';
 import { useCanvasInteraction } from '@/hooks/useCanvasInteraction';
+import { useCanvasShortcuts } from '@/hooks/useCanvasShortcuts';
 import { useArrowHandles } from '@/hooks/useArrowHandles';
+
 import RenderItem from '@/components/whiteboard/items/RenderItem';
 import TextArea from '@/components/whiteboard/items/text/TextArea';
 import ItemTransformer from '@/components/whiteboard/controls/ItemTransformer';
@@ -23,7 +29,6 @@ export default function Canvas() {
   const editingTextId = useCanvasStore((state) => state.editingTextId);
   const selectItem = useCanvasStore((state) => state.selectItem);
   const updateItem = useCanvasStore((state) => state.updateItem);
-  const deleteItem = useCanvasStore((state) => state.deleteItem);
   const setEditingTextId = useCanvasStore((state) => state.setEditingTextId);
 
   const stageRef = useRef<Konva.Stage | null>(null);
@@ -63,37 +68,12 @@ export default function Canvas() {
     updateItem,
   });
 
-  // 키보드 삭제
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (!selectedId || editingTextId) return;
-
-      if (e.key === 'Delete' || e.key === 'Backspace') {
-        e.preventDefault();
-
-        // 화살표 중간점 삭제 시도
-        if (isArrowSelected && selectedHandleIndex !== null) {
-          const deleted = deleteControlPoint();
-          if (deleted) return;
-        }
-
-        // 아이템 삭제
-        deleteItem(selectedId);
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [
-    selectedId,
-    editingTextId,
-    deleteItem,
+  useCanvasShortcuts({
     isArrowSelected,
     selectedHandleIndex,
     deleteControlPoint,
-  ]);
+  });
 
-  // 선택 해제
   const handleCheckDeselect = (
     e: Konva.KonvaEventObject<MouseEvent | TouchEvent>,
   ) => {
@@ -108,7 +88,6 @@ export default function Canvas() {
     }
   };
 
-  // 아이템 업데이트
   const handleItemChange = (
     id: string,
     newAttributes: Partial<WhiteboardItem>,
@@ -141,7 +120,6 @@ export default function Canvas() {
           clipWidth={canvasWidth}
           clipHeight={canvasHeight}
         >
-          {/* Canvas 경계 */}
           <Rect
             name="bg-rect"
             x={0}
@@ -154,7 +132,6 @@ export default function Canvas() {
             listening={true}
           />
 
-          {/* 아이템 렌더링 */}
           {items.map((item) => (
             <RenderItem
               key={item.id}
@@ -178,7 +155,6 @@ export default function Canvas() {
             />
           ))}
 
-          {/* 화살표 핸들 (드래그 중이 아닐 때만) */}
           {isArrowSelected && selectedItem && !isDraggingArrow && (
             <ArrowHandles
               arrow={selectedItem as ArrowItem}
@@ -190,7 +166,6 @@ export default function Canvas() {
             />
           )}
 
-          {/* Transformer */}
           <ItemTransformer
             selectedId={selectedId}
             items={items}
@@ -199,7 +174,6 @@ export default function Canvas() {
         </Layer>
       </Stage>
 
-      {/* 텍스트 편집 모드 */}
       {editingTextId && editingItem && (
         <TextArea
           textId={editingTextId}
diff --git a/frontend/src/components/whiteboard/items/RenderItem.tsx b/frontend/src/components/whiteboard/items/RenderItem.tsx
index d6fe483ed..3194fa439 100644
--- a/frontend/src/components/whiteboard/items/RenderItem.tsx
+++ b/frontend/src/components/whiteboard/items/RenderItem.tsx
@@ -2,11 +2,7 @@
 
 import { Text, Arrow } from 'react-konva';
 import { useCanvasStore } from '@/store/useCanvasStore';
-import type {
-  TextItem,
-  ArrowItem,
-  WhiteboardItem,
-} from '@/types/whiteboard';
+import type { TextItem, ArrowItem, WhiteboardItem } from '@/types/whiteboard';
 
 interface RenderItemProps {
   item: WhiteboardItem;
@@ -86,7 +82,7 @@ export default function RenderItem({
         {...arrowItem}
         id={item.id}
         draggable
-        hitStrokeWidth={30}  
+        hitStrokeWidth={30}
         onMouseDown={() => onSelect(item.id)}
         onMouseEnter={(e) => {
           const container = e.target.getStage()?.container();
@@ -109,15 +105,15 @@ export default function RenderItem({
         onDragEnd={(e) => {
           const pos = e.target.position();
           const newPoints = arrowItem.points.map((p, i) =>
-            i % 2 === 0 ? p + pos.x : p + pos.y
+            i % 2 === 0 ? p + pos.x : p + pos.y,
           );
-          
+
           e.target.position({ x: 0, y: 0 });
-          
+
           onChange({
             points: newPoints,
           });
-          
+
           onDragEnd?.();
         }}
       />
diff --git a/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx b/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx
index 44b4985f5..e79139871 100644
--- a/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx
+++ b/frontend/src/components/whiteboard/items/arrow/ArrowHandles.tsx
@@ -10,7 +10,10 @@ interface ArrowHandlesProps {
   selectedHandleIndex: number | null;
   onHandleClick: (e: KonvaEventObject<MouseEvent>, index: number) => void;
   onStartDrag: (e: KonvaEventObject<DragEvent>) => void;
-  onControlPointDrag: (pointIndex: number, e: KonvaEventObject<DragEvent>) => void;
+  onControlPointDrag: (
+    pointIndex: number,
+    e: KonvaEventObject<DragEvent>,
+  ) => void;
   onEndDrag: (e: KonvaEventObject<DragEvent>) => void;
 }
 
diff --git a/frontend/src/components/whiteboard/items/text/TextArea.tsx b/frontend/src/components/whiteboard/items/text/TextArea.tsx
index 56889e008..58659a24f 100644
--- a/frontend/src/components/whiteboard/items/text/TextArea.tsx
+++ b/frontend/src/components/whiteboard/items/text/TextArea.tsx
@@ -30,7 +30,7 @@ export default function TextArea({
 
   useEffect(() => {
     if (!stageRef.current) return;
-    
+
     const textNode = stageRef.current.findOne('#' + textId) as Konva.Text;
     if (!textNode) return;
 
@@ -43,10 +43,10 @@ export default function TextArea({
 
   useEffect(() => {
     if (!ref.current || !stageRef.current) return;
-    
+
     const textNode = stageRef.current.findOne('#' + textId) as Konva.Text;
     if (!textNode) return;
-    
+
     const textarea = ref.current;
 
     //textNode와 스타일 동기화
@@ -122,12 +122,10 @@ export default function TextArea({
       const canvasWidth = nodeWidth / stageScale;
       const canvasHeight = textarea.offsetHeight / stageScale;
 
-      const hasWidthChanged = Math.abs(
-        canvasWidth - lastBoundsRef.current.width,
-      ) > 0.5;
-      const hasHeightChanged = Math.abs(
-        canvasHeight - lastBoundsRef.current.height,
-      ) > 0.5;
+      const hasWidthChanged =
+        Math.abs(canvasWidth - lastBoundsRef.current.width) > 0.5;
+      const hasHeightChanged =
+        Math.abs(canvasHeight - lastBoundsRef.current.height) > 0.5;
 
       if (!hasWidthChanged && !hasHeightChanged) return;
 
diff --git a/frontend/src/components/whiteboard/toolbar/ToolbarContainer.tsx b/frontend/src/components/whiteboard/toolbar/ToolbarContainer.tsx
index 1f072e7ba..fec406fcf 100644
--- a/frontend/src/components/whiteboard/toolbar/ToolbarContainer.tsx
+++ b/frontend/src/components/whiteboard/toolbar/ToolbarContainer.tsx
@@ -27,7 +27,7 @@ import {
 } from '@/assets/icons/whiteboard';
 
 // Type import
-import { ToolType, PanelType } from '@/types/whiteboardUI';
+import { ToolType, PanelType } from '@/types/whiteboard/whiteboardUI';
 
 // Constants import
 import {
diff --git a/frontend/src/components/whiteboard/toolbar/panels/ArrowPanel.tsx b/frontend/src/components/whiteboard/toolbar/panels/ArrowPanel.tsx
index d8f033df8..d136bc366 100644
--- a/frontend/src/components/whiteboard/toolbar/panels/ArrowPanel.tsx
+++ b/frontend/src/components/whiteboard/toolbar/panels/ArrowPanel.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import NavButton from '@/components/whiteboard/common/NavButton';
-import { PanelProps } from '@/types/whiteboardUI';
+import { PanelProps } from '@/types/whiteboard/whiteboardUI';
 import { useAddWhiteboardItem } from '@/hooks/useAddWhiteboardItem';
 
 // ArrowRight -> / doubleArrow <-> / ChevronArrow >>
diff --git a/frontend/src/components/whiteboard/toolbar/panels/CursorPanel.tsx b/frontend/src/components/whiteboard/toolbar/panels/CursorPanel.tsx
index 63002f14e..bd88e274b 100644
--- a/frontend/src/components/whiteboard/toolbar/panels/CursorPanel.tsx
+++ b/frontend/src/components/whiteboard/toolbar/panels/CursorPanel.tsx
@@ -2,7 +2,7 @@
 
 import NavButton from '@/components/whiteboard/common/NavButton';
 
-import { PanelProps } from '@/types/whiteboardUI';
+import { PanelProps } from '@/types/whiteboard/whiteboardUI';
 
 import { CursorIcon, HandIcon } from '@/assets/icons/whiteboard';
 
diff --git a/frontend/src/components/whiteboard/toolbar/panels/LinePanel.tsx b/frontend/src/components/whiteboard/toolbar/panels/LinePanel.tsx
index 57a6cc144..c7bc33edf 100644
--- a/frontend/src/components/whiteboard/toolbar/panels/LinePanel.tsx
+++ b/frontend/src/components/whiteboard/toolbar/panels/LinePanel.tsx
@@ -2,7 +2,7 @@
 
 import NavButton from '@/components/whiteboard/common/NavButton';
 
-import { PanelProps } from '@/types/whiteboardUI';
+import { PanelProps } from '@/types/whiteboard/whiteboardUI';
 
 import { LineIcon } from '@/assets/icons/whiteboard';
 
diff --git a/frontend/src/components/whiteboard/toolbar/panels/MediaPanel.tsx b/frontend/src/components/whiteboard/toolbar/panels/MediaPanel.tsx
index 3e66295fc..55d07287f 100644
--- a/frontend/src/components/whiteboard/toolbar/panels/MediaPanel.tsx
+++ b/frontend/src/components/whiteboard/toolbar/panels/MediaPanel.tsx
@@ -2,7 +2,7 @@
 
 import NavButton from '@/components/whiteboard/common/NavButton';
 
-import { PanelProps } from '@/types/whiteboardUI';
+import { PanelProps } from '@/types/whiteboard/whiteboardUI';
 
 import { ImageIcon } from '@/assets/icons/common';
 import { VideoIcon, YoutubeIcon } from '@/assets/icons/whiteboard';
diff --git a/frontend/src/components/whiteboard/toolbar/panels/ShapePanel.tsx b/frontend/src/components/whiteboard/toolbar/panels/ShapePanel.tsx
index 3edb1c336..ed74a1cc5 100644
--- a/frontend/src/components/whiteboard/toolbar/panels/ShapePanel.tsx
+++ b/frontend/src/components/whiteboard/toolbar/panels/ShapePanel.tsx
@@ -2,7 +2,7 @@
 
 import NavButton from '@/components/whiteboard/common/NavButton';
 
-import { PanelProps } from '@/types/whiteboardUI';
+import { PanelProps } from '@/types/whiteboard/whiteboardUI';
 
 import {
   CircleIcon,
diff --git a/frontend/src/components/whiteboard/toolbar/panels/StackPanel.tsx b/frontend/src/components/whiteboard/toolbar/panels/StackPanel.tsx
index 1ebe0b917..f91f714b5 100644
--- a/frontend/src/components/whiteboard/toolbar/panels/StackPanel.tsx
+++ b/frontend/src/components/whiteboard/toolbar/panels/StackPanel.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { PanelProps } from '@/types/whiteboardUI';
+import { PanelProps } from '@/types/whiteboard/whiteboardUI';
 
 // Stack 아이콘 관련
 // import { STACK_LIST } from '@/constants/stackList';
diff --git a/frontend/src/components/whiteboard/toolbar/panels/TextPanel.tsx b/frontend/src/components/whiteboard/toolbar/panels/TextPanel.tsx
index 6e782bc79..1e883fab5 100644
--- a/frontend/src/components/whiteboard/toolbar/panels/TextPanel.tsx
+++ b/frontend/src/components/whiteboard/toolbar/panels/TextPanel.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import NavButton from '@/components/whiteboard/common/NavButton';
-import { PanelProps } from '@/types/whiteboardUI';
+import { PanelProps } from '@/types/whiteboard/whiteboardUI';
 import { TextBoxIcon } from '@/assets/icons/whiteboard';
 import { useAddWhiteboardItem } from '@/hooks/useAddWhiteboardItem';
 
diff --git a/frontend/src/constants/whiteboard.ts b/frontend/src/constants/whiteboard.ts
index 46a1757e6..e8b771784 100644
--- a/frontend/src/constants/whiteboard.ts
+++ b/frontend/src/constants/whiteboard.ts
@@ -1,4 +1,4 @@
-import { ToolType } from '@/types/whiteboardUI';
+import { ToolType } from '@/types/whiteboard/whiteboardUI';
 
 export const CURSOR_TOOLS: ToolType[] = ['move', 'select'];
 export const SHAPE_TOOLS: ToolType[] = [
diff --git a/frontend/src/hooks/useArrowHandles.ts b/frontend/src/hooks/useArrowHandles.ts
index 76111f735..2f3c2440b 100644
--- a/frontend/src/hooks/useArrowHandles.ts
+++ b/frontend/src/hooks/useArrowHandles.ts
@@ -16,7 +16,9 @@ export function useArrowHandles({
   stageRef,
   updateItem,
 }: UseArrowHandlesProps) {
-  const [selectedHandleIndex, setSelectedHandleIndex] = useState<number | null>(null);
+  const [selectedHandleIndex, setSelectedHandleIndex] = useState<number | null>(
+    null,
+  );
 
   // 화살표 더블클릭 - 중간점 추가
   const handleArrowDblClick = (arrowId: string) => {
@@ -58,7 +60,10 @@ export function useArrowHandles({
   };
 
   // 화살표 핸들 클릭
-  const handleHandleClick = (e: KonvaEventObject<MouseEvent>, index: number) => {
+  const handleHandleClick = (
+    e: KonvaEventObject<MouseEvent>,
+    index: number,
+  ) => {
     e.cancelBubble = true;
     setSelectedHandleIndex(index);
   };
diff --git a/frontend/src/hooks/useCanvasShortcuts.ts b/frontend/src/hooks/useCanvasShortcuts.ts
new file mode 100644
index 000000000..493293c77
--- /dev/null
+++ b/frontend/src/hooks/useCanvasShortcuts.ts
@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { useCanvasStore } from '@/store/useCanvasStore';
+
+interface UseCanvasShortcutsProps {
+  isArrowSelected: boolean;
+  selectedHandleIndex: number | null;
+  deleteControlPoint: () => boolean;
+}
+
+export const useCanvasShortcuts = ({
+  isArrowSelected,
+  selectedHandleIndex,
+  deleteControlPoint,
+}: UseCanvasShortcutsProps) => {
+  const selectedId = useCanvasStore((state) => state.selectedId);
+  const editingTextId = useCanvasStore((state) => state.editingTextId);
+  const deleteItem = useCanvasStore((state) => state.deleteItem);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!selectedId || editingTextId) return;
+
+      if (e.key === 'Delete' || e.key === 'Backspace') {
+        e.preventDefault();
+
+        if (isArrowSelected && selectedHandleIndex !== null) {
+          const deleted = deleteControlPoint();
+          if (deleted) return;
+        }
+
+        deleteItem(selectedId);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [
+    selectedId,
+    editingTextId,
+    deleteItem,
+    isArrowSelected,
+    selectedHandleIndex,
+    deleteControlPoint,
+  ]);
+};
diff --git a/frontend/src/types/whiteboard/base.ts b/frontend/src/types/whiteboard/base.ts
new file mode 100644
index 000000000..173ba4a58
--- /dev/null
+++ b/frontend/src/types/whiteboard/base.ts
@@ -0,0 +1,9 @@
+// text type
+export type TextAlignment = 'left' | 'center' | 'right';
+export type TextWrap = 'word' | 'char' | 'none';
+
+// base item interface
+export interface BaseItem {
+  id: string;
+  type: string;
+}
diff --git a/frontend/src/types/whiteboard/index.ts b/frontend/src/types/whiteboard/index.ts
new file mode 100644
index 000000000..a36a3e453
--- /dev/null
+++ b/frontend/src/types/whiteboard/index.ts
@@ -0,0 +1,6 @@
+export * from '@/types/whiteboard/base';
+export * from '@/types/whiteboard/items';
+
+import { TextItem, ArrowItem } from '@/types/whiteboard/items';
+
+export type WhiteboardItem = TextItem | ArrowItem;
diff --git a/frontend/src/types/whiteboard.ts b/frontend/src/types/whiteboard/items.ts
similarity index 62%
rename from frontend/src/types/whiteboard.ts
rename to frontend/src/types/whiteboard/items.ts
index d54a82468..ed6ceadb3 100644
--- a/frontend/src/types/whiteboard.ts
+++ b/frontend/src/types/whiteboard/items.ts
@@ -1,12 +1,5 @@
-export type TextAlignment = 'left' | 'center' | 'right';
-export type TextWrap = 'word' | 'char' | 'none';
+import { BaseItem, TextAlignment, TextWrap } from '@/types/whiteboard/base';
 
-interface BaseItem {
-  id: string;
-  type: 'text' | 'arrow';
-}
-
-// 텍스트 아이템
 export interface TextItem extends BaseItem {
   type: 'text';
   x: number;
@@ -22,7 +15,6 @@ export interface TextItem extends BaseItem {
   parentPolygonId?: string;
 }
 
-// 화살표 아이템
 export interface ArrowItem extends BaseItem {
   type: 'arrow';
   points: number[];
@@ -32,6 +24,3 @@ export interface ArrowItem extends BaseItem {
   pointerWidth: number;
   tension: number;
 }
-
-// 통합 타입
-export type WhiteboardItem = TextItem | ArrowItem;
diff --git a/frontend/src/types/whiteboardUI.ts b/frontend/src/types/whiteboard/whiteboardUI.ts
similarity index 100%
rename from frontend/src/types/whiteboardUI.ts
rename to frontend/src/types/whiteboard/whiteboardUI.ts