src/hooks/common/useFont.js

@@ -1,7 +1,19 @@
 import { useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { fontSelector } from '@/store/fontAtom'
-import { useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
+
+/** 폰트 타입별 캔버스 오브젝트 이름 매핑 */
+const FONT_TYPE_TO_OBJ_NAME = {
+  commonText: 'commonText',
+  dimensionLineText: 'dimensionLineText',
+  flowText: 'flowText',
+  lengthText: 'lengthText',
+  circuitNumberText: 'circuitNumber',
+}
+
+/** 캔버스 오브젝트 이름 → 폰트 타입 역매핑 */
+const OBJ_NAME_TO_FONT_TYPE = Object.fromEntries(Object.entries(FONT_TYPE_TO_OBJ_NAME).map(([k, v]) => [v, k]))
 
 export function useFont() {
   const canvas = useRecoilValue(canvasState)
@@ -11,96 +23,98 @@ export function useFont() {
   const lengthText = useRecoilValue(fontSelector('lengthText'))
   const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
 
+  /** 폰트 타입별 설정 매핑 */
+  const fontSettings = {
+    commonText,
+    dimensionLineText,
+    flowText,
+    lengthText,
+    circuitNumberText,
+  }
+
+  /**
+   * 타입별 폰트 설정을 캔버스 오브젝트에 적용하는 공통 함수
+   * @param {string} type - 폰트 타입 (commonText, dimensionLineText, flowText, lengthText, circuitNumberText)
+   * @param {number} delay - 적용 지연 시간 (ms), 기본값 200
+   */
+  const changeFontByType = useCallback(
+    (type, delay = 200) => {
+      const fontSetting = fontSettings[type]
+      const objName = FONT_TYPE_TO_OBJ_NAME[type]
+
+      if (!fontSetting || !objName) {
+        console.warn(`Invalid font type: ${type}`)
+        return
+      }
+
+      setTimeout(() => {
+        if (canvas && fontSetting.fontWeight?.value) {
+          const textObjs = canvas.getObjects().filter((obj) => obj.name === objName)
+          textObjs.forEach((obj) => {
+            obj.set({
+              fontFamily: fontSetting.fontFamily.value,
+              fontWeight: fontSetting.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
+              fontStyle: fontSetting.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+              fontSize: fontSetting.fontSize.value,
+              fill: fontSetting.fontColor.value,
+            })
+          })
+          canvas.renderAll()
+        }
+      }, delay)
+    },
+    [canvas, fontSettings],
+  )
+
+  const changeAllFonts = () => {
+    changeFontByType('commonText')
+    changeFontByType('dimensionLineText')
+    changeFontByType('flowText')
+    changeFontByType('lengthText')
+    changeFontByType('circuitNumberText')
+  }
+
+  /** 각 폰트 타입별 useEffect */
   useEffect(() => {
-    setTimeout(() => {
-    if (canvas && commonText.fontWeight.value) {
-      const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'commonText')
-      textObjs.forEach((obj) => {
-        obj.set({
-          fontFamily: commonText.fontFamily.value,
-          fontWeight: commonText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-          fontStyle: commonText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-          fontSize: commonText.fontSize.value,
-          fill: commonText.fontColor.value,
-        })
-      })
-      canvas.renderAll()
-    }}, 200)
+    changeFontByType('commonText')
   }, [commonText])
 
   useEffect(() => {
-    setTimeout(() => {
-      if (canvas && dimensionLineText.fontWeight.value) {
-        const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText')
-        textObjs.forEach((obj) => {
-          obj.set({
-            fontFamily: dimensionLineText.fontFamily.value,
-            fontWeight: dimensionLineText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-            fontStyle: dimensionLineText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-            fontSize: dimensionLineText.fontSize.value,
-            fill: dimensionLineText.fontColor.value,
-          })
-        })
-        canvas.renderAll()
-      }
-    }, 200)
-
+    changeFontByType('dimensionLineText')
   }, [dimensionLineText])
 
   useEffect(() => {
-    setTimeout(() => {
-      if (canvas && flowText.fontWeight.value) {
-        const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText')
-        textObjs.forEach((obj) => {
-          obj.set({
-            fontFamily: flowText.fontFamily.value,
-            fontWeight: flowText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-            fontStyle: flowText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-            fontSize: flowText.fontSize.value,
-            fill: flowText.fontColor.value,
-          })
-        })
-        canvas.renderAll()
-      }
-    }, 200)
-
+    changeFontByType('flowText')
   }, [flowText])
 
   useEffect(() => {
-    setTimeout(() => {
-      if (canvas && lengthText.fontWeight.value) {
-        const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText')
-        textObjs.forEach((obj) => {
-          obj.set({
-            fontFamily: lengthText.fontFamily.value,
-            fontWeight: lengthText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-            fontStyle: lengthText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-            fontSize: lengthText.fontSize.value,
-            fill: lengthText.fontColor.value,
-          })
-        })
-        canvas.renderAll()
-      }
-    }, 200)
+    changeFontByType('lengthText')
   }, [lengthText])
 
   useEffect(() => {
-    setTimeout(() => {
-      if (canvas && circuitNumberText.fontWeight.value) {
-        const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'circuitNumber')
-        textObjs.forEach((obj) => {
-          obj.set({
-            fontFamily: circuitNumberText.fontFamily.value,
-            fontWeight: circuitNumberText.fontWeight.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
-            fontStyle: circuitNumberText.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-            fontSize: circuitNumberText.fontSize.value,
-            fill: circuitNumberText.fontColor.value,
-          })
-        })
-        canvas.renderAll()
-      }
-    }, 200)
+    changeFontByType('circuitNumberText')
   }, [circuitNumberText])
 
-  return {}
+  /** 캔버스에 텍스트 오브젝트 추가 시 자동으로 폰트 적용 */
+  useEffect(() => {
+    if (!canvas) return
+
+    const handleObjectAdded = (e) => {
+      const obj = e.target
+      if (!obj?.name) return
+
+      const fontType = OBJ_NAME_TO_FONT_TYPE[obj.name]
+      if (fontType) {
+        changeFontByType(fontType, 0)
+      }
+    }
+
+    canvas.on('object:added', handleObjectAdded)
+
+    return () => {
+      canvas.off('object:added', handleObjectAdded)
+    }
+  }, [canvas, changeFontByType])
+
+  return { changeFontByType, changeAllFonts }
 }