font 변경시 이벤트 수정

src/components/Roof2.jsx

@@ -112,21 +112,6 @@ export default function Roof2() {
     canvasSizeMode()
   }, [verticalSize, horizontalSize])
 
-  useEffect(() => {
-    canvas
-      ?.getObjects()
-      .filter(
-        (obj) =>
-          obj.type === 'textbox' ||
-          obj.type === 'text' ||
-          obj.type === 'i-text',
-      )
-      .forEach((obj) => {
-        obj.set({ fontSize: fontSize })
-      })
-    canvas?.renderAll()
-  }, [fontSize])
-
   return (
     <>
       {canvas && (

src/components/fabric/QLine.js

@@ -61,6 +61,11 @@ export default class QLine extends fabric.Line {
     this.#addLengthText()
   }
 
+  setFontSize(fontSize) {
+    this.#fontSize = fontSize
+    this.#addLengthText()
+  }
+
   #addLengthText() {
     if (this.#text) {
       this.canvas.remove(this.#text)

src/components/fabric/QPolygon.js

@@ -99,6 +99,11 @@ export default class QPolygon extends fabric.Polygon {
     }
   }
 
+  setFontSize(fontSize) {
+    this.#fontSize = fontSize
+    this.#addLengthText()
+  }
+
   getCurrentPoints() {
     const scaleX = this.scaleX
     const scaleY = this.scaleY

src/components/fabric/QRect.js

@@ -23,6 +23,11 @@ export default class QRect extends fabric.Rect {
     this.#addLengthText()
   }
 
+  setFontSize(fontSize) {
+    this.#fontSize = fontSize
+    this.#addLengthText()
+  }
+
   #addControl() {
     this.on('removed', () => {
       if (this.#text.length > 0) {
@@ -83,7 +88,7 @@ export default class QRect extends fabric.Rect {
       const text = new fabric.Text(length.toFixed(0), {
         left: (line.start.x + line.end.x) / 2,
         top: (line.start.y + line.end.y) / 2,
-        fontSize: this.fontSize,
+        fontSize: this.#fontSize,
         selectable: false,
       })
       this.#text.push(text)

src/hooks/useCanvas.js

@@ -7,13 +7,14 @@ import {
 } from '@/util/canvas-util'
 
 import { useRecoilState } from 'recoil'
-import { canvasSizeState } from '@/store/canvasAtom'
+import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
 
 export function useCanvas(id) {
   const [canvas, setCanvas] = useState()
   const [isLocked, setIsLocked] = useState(false)
   const [history, setHistory] = useState([])
   const [canvasSize] = useRecoilState(canvasSizeState)
+  const [fontSize] = useRecoilState(fontSizeState)
   const points = useRef([])
 
   /**
@@ -46,6 +47,33 @@ export function useCanvas(id) {
     addEventOnCanvas()
   }, [canvasSize])
 
+  useEffect(() => {
+    canvas
+      ?.getObjects()
+      .filter(
+        (obj) =>
+          obj.type === 'textbox' ||
+          obj.type === 'text' ||
+          obj.type === 'i-text',
+      )
+      .forEach((obj) => {
+        obj.set({ fontSize: fontSize })
+      })
+
+    canvas
+      ?.getObjects()
+      .filter(
+        (obj) =>
+          obj.type === 'Qline' ||
+          obj.type === 'QPolygon' ||
+          obj.type === 'QRect',
+      )
+      .forEach((obj) => {
+        obj.setFontSize(fontSize)
+      })
+    canvas?.renderAll()
+  }, [fontSize])
+
   /**
    * 캔버스 초기화
    */

src/hooks/useMode.js

@@ -3,6 +3,8 @@ import QLine from '@/components/fabric/QLine'
 import QRect from '@/components/fabric/QRect'
 import QPolygon from '@/components/fabric/QPolygon'
 import { getStartIndex, rearrangeArray } from '@/util/canvas-util'
+import { useRecoilState } from 'recoil'
+import { fontSizeState } from '@/store/canvasAtom'
 
 export const Mode = {
   DRAW_LINE: 'drawLine', // 기준선 긋기모드
@@ -20,6 +22,7 @@ export function useMode() {
   const historyLines = useRef([])
   const [canvas, setCanvas] = useState(null)
   const [zoom, setZoom] = useState(100)
+  const [fontSize] = useRecoilState(fontSizeState)
 
   const addEvent = (mode) => {
     switch (mode) {
@@ -153,6 +156,7 @@ export function useMode() {
               selectable: false,
               viewLengthText: true,
               direction: getDirection(points.current[0], points.current[1]),
+              fontSize: fontSize,
             },
           )
 
@@ -237,6 +241,7 @@ export function useMode() {
           strokeWidth: 2,
           viewLengthText: true,
           selectable: false,
+          fontSize: fontSize,
         },
       )
 
@@ -295,6 +300,7 @@ export function useMode() {
         fill: 'transparent',
         stroke: 'black',
         transparentCorners: false,
+        fontSize: fontSize,
       })
       canvas.remove(rect)
       canvas.add(qRect)
@@ -335,6 +341,7 @@ export function useMode() {
       selectable: false,
       viewLengthText: true,
       direction: getDirection(a, b),
+      fontSize: fontSize,
     })
     historyLines.current.push(line)
 
@@ -365,6 +372,7 @@ export function useMode() {
       fill: 'transparent',
       viewLengthText: true,
       selectable: true,
+      fontSize: fontSize,
     })
 
     // 새로운 다각형 객체를 캔버스에 추가합니다.