src/components/common/select/QSelectBox.jsx

@@ -96,7 +96,7 @@ export default function QSelectBox({
       title={tagTitle}
     >
       <p>{selected}</p>
-      <ul className="select-item-wrap" style={{ maxHeight: '200px' }}>
+      <ul className="select-item-wrap">
         {options?.length > 0 &&
           options?.map((option, index) => (
             <li key={option.id + '_' + index} className="select-item" onClick={() => handleClickSelectOption(option)}>

src/hooks/common/useFont.js

@@ -12,7 +12,6 @@ export function useFont() {
   const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
 
   useEffect(() => {
-    setTimeout(() => {
     if (canvas && commonText.fontWeight.value) {
       const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'commonText')
       textObjs.forEach((obj) => {
@@ -25,81 +24,71 @@ export function useFont() {
         })
       })
       canvas.renderAll()
-    }}, 200)
+    }
   }, [commonText])
 
   useEffect(() => {
-    setTimeout(() => {
+    if (canvas && dimensionLineText.fontWeight.value) {
-      if (canvas && dimensionLineText.fontWeight.value) {
+      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText')
-        const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText')
+      textObjs.forEach((obj) => {
-        textObjs.forEach((obj) => {
+        obj.set({
-          obj.set({
+          fontFamily: dimensionLineText.fontFamily.value,
-            fontFamily: dimensionLineText.fontFamily.value,
+          fontWeight: dimensionLineText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-            fontWeight: dimensionLineText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+          fontStyle: dimensionLineText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-            fontStyle: dimensionLineText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+          fontSize: dimensionLineText.fontSize.value,
-            fontSize: dimensionLineText.fontSize.value,
+          fill: dimensionLineText.fontColor.value,
-            fill: dimensionLineText.fontColor.value,
-          })
         })
-        canvas.renderAll()
+      })
-      }
+      canvas.renderAll()
-    }, 200)
+    }
-
   }, [dimensionLineText])
 
   useEffect(() => {
-    setTimeout(() => {
+    if (canvas && flowText.fontWeight.value) {
-      if (canvas && flowText.fontWeight.value) {
+      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText')
-        const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText')
+      textObjs.forEach((obj) => {
-        textObjs.forEach((obj) => {
+        obj.set({
-          obj.set({
+          fontFamily: flowText.fontFamily.value,
-            fontFamily: flowText.fontFamily.value,
+          fontWeight: flowText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-            fontWeight: flowText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+          fontStyle: flowText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-            fontStyle: flowText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+          fontSize: flowText.fontSize.value,
-            fontSize: flowText.fontSize.value,
+          fill: flowText.fontColor.value,
-            fill: flowText.fontColor.value,
-          })
         })
-        canvas.renderAll()
+      })
-      }
+      canvas.renderAll()
-    }, 200)
+    }
-
   }, [flowText])
 
   useEffect(() => {
-    setTimeout(() => {
+    if (canvas && lengthText.fontWeight.value) {
-      if (canvas && lengthText.fontWeight.value) {
+      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText')
-        const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText')
+      textObjs.forEach((obj) => {
-        textObjs.forEach((obj) => {
+        obj.set({
-          obj.set({
+          fontFamily: lengthText.fontFamily.value,
-            fontFamily: lengthText.fontFamily.value,
+          fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-            fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+          fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-            fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+          fontSize: lengthText.fontSize.value,
-            fontSize: lengthText.fontSize.value,
+          fill: lengthText.fontColor.value,
-            fill: lengthText.fontColor.value,
-          })
         })
-        canvas.renderAll()
+      })
-      }
+      canvas.renderAll()
-    }, 200)
+    }
   }, [lengthText])
 
   useEffect(() => {
-    setTimeout(() => {
+    if (canvas && circuitNumberText.fontWeight.value) {
-      if (canvas && circuitNumberText.fontWeight.value) {
+      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'circuitNumber')
-        const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'circuitNumber')
+      textObjs.forEach((obj) => {
-        textObjs.forEach((obj) => {
+        obj.set({
-          obj.set({
+          fontFamily: circuitNumberText.fontFamily.value,
-            fontFamily: circuitNumberText.fontFamily.value,
+          fontWeight: circuitNumberText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-            fontWeight: circuitNumberText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+          fontStyle: circuitNumberText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-            fontStyle: circuitNumberText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+          fontSize: circuitNumberText.fontSize.value,
-            fontSize: circuitNumberText.fontSize.value,
+          fill: circuitNumberText.fontColor.value,
-            fill: circuitNumberText.fontColor.value,
-          })
         })
-        canvas.renderAll()
+      })
-      }
+      canvas.renderAll()
-    }, 200)
+    }
   }, [circuitNumberText])
 
   return {}

src/hooks/useLine.js

@@ -13,7 +13,6 @@ import { basicSettingState } from '@/store/settingAtom'
 import { calcLineActualSize } from '@/util/qpolygon-utils'
 import { getDegreeByChon } from '@/util/canvas-util'
 import { useText } from '@/hooks/useText'
-import { fontSelector } from '@/store/fontAtom'
 
 export const useLine = () => {
   const canvas = useRecoilValue(canvasState)
@@ -24,15 +23,14 @@ export const useLine = () => {
   const angleUnit = useRecoilValue(showAngleUnitSelector)
   const roofSizeSet = useRecoilValue(basicSettingState).roofSizeSet
   const globalPitch = useRecoilValue(globalPitchState)
-  const lengthText = useRecoilValue(fontSelector('lengthText'))
 
   const { changeCorridorDimensionText } = useText()
 
   const addLine = (points = [], options) => {
     const line = new QLine(points, {
       ...options,
-      fontSize: lengthText.fontSize.value,
+      fontSize: fontSize,
-      fontFamily: lengthText.fontFamily.value,
+      fontFamily: fontFamily,
     })
 
     if (line.length < 1) {