editMode 키보드 추가

src/hooks/useMode.js

@@ -1,9 +1,9 @@
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import QRect from '@/components/fabric/QRect'
 import QPolygon from '@/components/fabric/QPolygon'
 import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util'
 import { useRecoilState } from 'recoil'
-import { fontSizeState, roofState, sortedPolygonArray, roofPolygonPatternArrayState, wallState } from '@/store/canvasAtom'
+import { fontSizeState, roofPolygonPatternArrayState, roofState, sortedPolygonArray, wallState } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 
 export const Mode = {
@@ -32,6 +32,19 @@ export function useMode() {
   const [wall, setWall] = useRecoilState(wallState)
   const [roofPolygonPattern, setRoofPolygonPattern] = useRecoilState(roofPolygonPatternArrayState)
 
+  useEffect(() => {
+    // 이벤트 리스너 추가
+    if (!canvas) {
+      return
+    }
+    document.addEventListener('keydown', handleKeyDown)
+
+    // 컴포넌트가 언마운트될 때 이벤트 리스너 제거
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [canvas]) // 빈 배열을 전달하여 컴포넌트가 마운트될 때만 실행되도록 함
+
   const addEvent = (mode) => {
     switch (mode) {
       case 'default':
@@ -64,6 +77,131 @@ export function useMode() {
     }
   }
 
+  const keyValid = () => {
+    if (points.current.length === 0) {
+      alert('시작점을 선택해주세요')
+      return false
+    }
+    return true
+  }
+
+  const drawCircleAndLine = (verticalLength, horizontalLength) => {
+    const circle = new fabric.Circle({
+      radius: 5,
+      fill: 'transparent', // 원 안을 비웁니다.
+      stroke: 'black', // 원 테두리 색상을 검은색으로 설정합니다.
+      left: points.current[points.current.length - 1].left + horizontalLength - 5,
+      top: points.current[points.current.length - 1].top + verticalLength - 5,
+      originX: 'center',
+      originY: 'center',
+      selectable: false,
+    })
+    historyPoints.current.push(circle)
+    points.current.push(circle)
+    canvas?.add(circle)
+    canvas?.renderAll()
+
+    // length 값이 숫자가 아닌 경우
+    if (isNaN(length) || Math.max(Math.abs(verticalLength), Math.abs(horizontalLength)) === 0) {
+      //마지막 추가 된 points 제거합니다.
+
+      const lastPoint = historyPoints.current[historyPoints.current.length - 1]
+
+      canvas?.remove(lastPoint)
+
+      historyPoints.current.pop()
+      points.current.pop()
+      return
+    }
+
+    const line = new QLine(
+      [points.current[0].left, points.current[0].top, points.current[0].left + horizontalLength, points.current[0].top + verticalLength],
+      {
+        stroke: 'black',
+        strokeWidth: 2,
+        selectable: false,
+        viewLengthText: true,
+        direction: getDirection(points.current[0], points.current[1]),
+        fontSize: fontSize,
+      },
+    )
+
+    pushHistoryLine(line)
+
+    // 라인의 끝에 점을 추가합니다.
+    const endPointCircle = new fabric.Circle({
+      radius: 1,
+      fill: 'transparent', // 원 안을 비웁니다.
+      stroke: 'black', // 원 테두리 색상을 검은색으로 설정합니다.
+      left: points.current[0].left + horizontalLength,
+      top: points.current[0].top + verticalLength,
+      originX: 'center',
+      originY: 'center',
+      selectable: false,
+    })
+
+    canvas?.add(endPointCircle)
+
+    historyPoints.current.push(endPointCircle)
+
+    points.current.forEach((point) => {
+      canvas?.remove(point)
+    })
+    points.current = [endPointCircle]
+
+    canvas.renderAll()
+  }
+
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case 'ArrowDown': {
+        if (!keyValid()) {
+          return
+        }
+        const verticalLength = Number(prompt('길이를 입력하세요:'))
+        const horizontalLength = 0
+
+        drawCircleAndLine(verticalLength, horizontalLength)
+
+        break
+      }
+      case 'ArrowUp': {
+        if (!keyValid()) {
+          return
+        }
+        const verticalLength = -Number(prompt('길이를 입력하세요:'))
+        const horizontalLength = 0
+
+        drawCircleAndLine(verticalLength, horizontalLength)
+
+        break
+      }
+      case 'ArrowLeft': {
+        if (!keyValid()) {
+          return
+        }
+        const verticalLength = 0
+        const horizontalLength = -Number(prompt('길이를 입력하세요:'))
+
+        drawCircleAndLine(verticalLength, horizontalLength)
+
+        break
+      }
+      case 'ArrowRight': {
+        if (!keyValid()) {
+          return
+        }
+
+        const verticalLength = 0
+        const horizontalLength = Number(prompt('길이를 입력하세요:'))
+
+        drawCircleAndLine(verticalLength, horizontalLength)
+
+        break
+      }
+    }
+  }
+
   const changeMode = (canvas, mode) => {
     setMode(mode)
     // mode변경 시 이전 이벤트 제거