src/components/common/select/QSelectBox.jsx

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

src/hooks/common/useFont.js

@@ -12,6 +12,7 @@ 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) => {
@@ -24,10 +25,11 @@ export function useFont() {
         })
       })
       canvas.renderAll()
-    }
+    }}, 200)
   }, [commonText])
 
   useEffect(() => {
+    setTimeout(() => {
       if (canvas && dimensionLineText.fontWeight.value) {
         const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText')
         textObjs.forEach((obj) => {
@@ -41,9 +43,12 @@ export function useFont() {
         })
         canvas.renderAll()
       }
+    }, 200)
+
   }, [dimensionLineText])
 
   useEffect(() => {
+    setTimeout(() => {
       if (canvas && flowText.fontWeight.value) {
         const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText')
         textObjs.forEach((obj) => {
@@ -57,9 +62,12 @@ export function useFont() {
         })
         canvas.renderAll()
       }
+    }, 200)
+
   }, [flowText])
 
   useEffect(() => {
+    setTimeout(() => {
       if (canvas && lengthText.fontWeight.value) {
         const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText')
         textObjs.forEach((obj) => {
@@ -73,9 +81,11 @@ export function useFont() {
         })
         canvas.renderAll()
       }
+    }, 200)
   }, [lengthText])
 
   useEffect(() => {
+    setTimeout(() => {
       if (canvas && circuitNumberText.fontWeight.value) {
         const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'circuitNumber')
         textObjs.forEach((obj) => {
@@ -89,6 +99,7 @@ export function useFont() {
         })
         canvas.renderAll()
       }
+    }, 200)
   }, [circuitNumberText])
 
   return {}

src/hooks/useLine.js

@@ -13,6 +13,7 @@ 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)
@@ -23,14 +24,15 @@ 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: fontSize,
+      fontSize: lengthText.fontSize.value,
-      fontFamily: fontFamily,
+      fontFamily: lengthText.fontFamily.value,
     })
 
     if (line.length < 1) {