text 일괄처리

src/hooks/useCanvasEvent.js

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { canvasSizeState, currentObjectState } from '@/store/canvasAtom'
+import { canvasSizeState, currentObjectState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
 import { QPolygon } from '@/components/fabric/QPolygon'
 
 // 캔버스에 필요한 이벤트
@@ -8,6 +8,8 @@ export function useCanvasEvent() {
   const [canvas, setCanvasForEvent] = useState(null)
   const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
   const canvasSize = useRecoilValue(canvasSizeState)
+  const fontSize = useRecoilValue(fontSizeState)
+  const fontFamily = useRecoilValue(fontFamilyState)
 
   // 기본적인 이벤트 필요시 추가
   const attachDefaultEventOnCanvas = () => {
@@ -74,6 +76,11 @@ export function useCanvasEvent() {
         })
       }
 
+      if (target.type.toLowerCase().includes('text')) {
+        target.set({ fontSize })
+        target.set({ fontFamily })
+      }
+
       if (target.name === 'lengthText') {
         const x = target.left
         const y = target.top

src/store/canvasAtom.js

@@ -35,7 +35,7 @@ export const fontFamilyState = atom({
 
 export const fontSizeState = atom({
   key: 'fontSizeState',
-  default: 16,
+  default: 20,
 })
 
 export const canvasSizeState = atom({

src/util/qpolygon-utils.js

@@ -3,6 +3,7 @@ import { QLine } from '@/components/fabric/QLine'
 import { calculateIntersection, distanceBetweenPoints, findClosestPoint, getDirectionByPoint } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import * as turf from '@turf/turf'
+import { POLYGON_TYPE } from '@/common/common'
 
 const TWO_PI = Math.PI * 2
 
@@ -1149,7 +1150,7 @@ export const splitPolygonWithLines = (polygon) => {
       stroke: 'black',
       fill: 'transparent',
       strokeWidth: 3,
-      name: 'roof',
+      name: POLYGON_TYPE.ROOF,
       selectable: true,
       defense: defense,
     })