useFont 추가

src/components/common/font/FontSetting.jsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { fontSelector, globalFontAtom } from '@/store/fontAtom'
+import { useFont } from '@/hooks/common/useFont'
 
 const fonts = [
   { name: 'MS PGothic', value: 'MS PGothic' },

src/components/floor-plan/modal/setting01/SecondOption.jsx

@@ -1,4 +1,4 @@
-import { useRecoilState, useSetRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import { useMessage } from '@/hooks/useMessage'
 import React, { useEffect, useState } from 'react'
@@ -28,7 +28,6 @@ export default function SecondOption() {
   const [showFontSettingModal, setShowFontSettingModal] = useState(false)
   const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
   const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false)
-
   const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
 
   // 데이터를 최초 한 번만 조회

src/hooks/common/useFont.js

@@ -0,0 +1,51 @@
+import { useRecoilValue } from 'recoil'
+import { canvasState } from '@/store/canvasAtom'
+import { fontSelector, globalFontAtom } from '@/store/fontAtom'
+import { useEffect } from 'react'
+
+export function useFont() {
+  const canvas = useRecoilValue(canvasState)
+  const commonText = useRecoilValue(fontSelector('commonText'))
+  const dimensionLineText = useRecoilValue(fontSelector('dimensionLineText'))
+  const flowText = useRecoilValue(fontSelector('flowText'))
+  const lengthText = useRecoilValue(fontSelector('lengthText'))
+  const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
+
+  useEffect(() => {}, [commonText])
+
+  useEffect(() => {}, [dimensionLineText])
+
+  useEffect(() => {
+    if (canvas) {
+      const textObjs = canvas.getObjects().filter((obj) => obj.name === 'flowText')
+      textObjs.forEach((obj) => {
+        obj.set({
+          fontFamily: flowText.fontFamily.value,
+          fontWeight: flowText.fontWeight.value,
+          fontSize: flowText.fontSize.value,
+          fill: flowText.fontColor.value,
+        })
+      })
+      canvas.renderAll()
+    }
+  }, [flowText])
+
+  useEffect(() => {
+    if (canvas) {
+      const textObjs = canvas.getObjects().filter((obj) => obj.name === 'lengthText')
+      textObjs.forEach((obj) => {
+        obj.set({
+          fontFamily: lengthText.fontFamily.value,
+          fontWeight: lengthText.fontWeight.value,
+          fontSize: lengthText.fontSize.value,
+          fill: lengthText.fontColor.value,
+        })
+      })
+      canvas.renderAll()
+    }
+  }, [lengthText])
+
+  useEffect(() => {}, [circuitNumberText])
+
+  return {}
+}

src/hooks/useCanvas.js

@@ -13,6 +13,7 @@ import { writeImage } from '@/lib/canvas'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { useAxios } from '@/hooks/useAxios'
 import { v4 as uuidv4 } from 'uuid'
+import { useFont } from '@/hooks/common/useFont'
 
 export function useCanvas(id) {
   const [canvas, setCanvas] = useRecoilState(canvasState)
@@ -23,6 +24,7 @@ export function useCanvas(id) {
   const [fontSize] = useRecoilState(fontSizeState)
   const { setCanvasForEvent, attachDefaultEventOnCanvas } = useCanvasEvent()
   const { post } = useAxios()
+  const {} = useFont()
 
   /**
    * 처음 셋팅

src/hooks/usePolygon.js

@@ -114,7 +114,7 @@ export const usePolygon = () => {
 
     polygon.canvas
       .getObjects()
-      .filter((obj) => obj.name === 'directionText' && obj.parent === polygon.arrow)
+      .filter((obj) => obj.name === 'flowText' && obj.parent === polygon.arrow)
       .forEach((obj) => polygon.canvas.remove(obj))
 
     let arrow = null
@@ -385,7 +385,7 @@ export const usePolygon = () => {
       westText = '西北西'
     }
 
-    clearDirectionText(canvas)
+    clearFlowText(canvas)
 
     addTextByArrows(eastArrows, eastText, canvas)
     addTextByArrows(westArrows, westText, canvas)
@@ -393,8 +393,8 @@ export const usePolygon = () => {
     addTextByArrows(southArrows, southText, canvas)
   }
 
-  const clearDirectionText = (canvas) => {
-    const texts = canvas.getObjects().filter((obj) => obj.name === 'directionText')
+  const clearFlowText = (canvas) => {
+    const texts = canvas.getObjects().filter((obj) => obj.name === 'flowText')
     texts.forEach((text) => {
       canvas.remove(text)
     })
@@ -407,7 +407,7 @@ export const usePolygon = () => {
         fill: 'black',
         originX: 'center',
         originY: 'center',
-        name: 'directionText',
+        name: 'flowText',
         selectable: false,
         left: arrow.stickeyPoint.x,
         top: arrow.stickeyPoint.y,