캔버스 사이즈 변경시 이벤트 재등록, 기존 CANVAS 객체 참조하는 값 수정

src/hooks/useCanvas.js

@@ -9,7 +9,6 @@ import {
 import { useRecoilState } from 'recoil'
 import { canvasSizeState } from '@/store/canvasAtom'
 
-
 export function useCanvas(id) {
   const [canvas, setCanvas] = useState()
   const [isLocked, setIsLocked] = useState(false)
@@ -41,6 +40,12 @@ export function useCanvas(id) {
     }
   }, [])
 
+  useEffect(() => {
+    // canvas 사이즈가 변경되면 다시
+    removeEventOnCanvas()
+    addEventOnCanvas()
+  }, [canvasSize])
+
   /**
    * 캔버스 초기화
    */
@@ -137,7 +142,7 @@ export function useCanvas(id) {
 
     // 가로선을 그립니다.
     const horizontalLine = new fabric.Line(
-      [0, pointer.y, CANVAS.WIDTH, pointer.y],
+      [0, pointer.y, canvasSize.horizontal, pointer.y],
       {
         stroke: 'black',
         strokeWidth: 1,
@@ -149,7 +154,7 @@ export function useCanvas(id) {
 
     // 세로선을 그립니다.
     const verticalLine = new fabric.Line(
-      [pointer.x, 0, pointer.x, CANVAS.HEIGHT],
+      [pointer.x, 0, pointer.x, canvasSize.vertical],
       {
         stroke: 'black',
         strokeWidth: 1,