Canvas 설정 글꼴 null 처리 수정

src/components/common/font/FontSetting.jsx

@@ -54,23 +54,6 @@ export default function FontSetting(props) {
     { id: 'gold', name: getMessage('color.gold'), value: 'gold' },
     { id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' },
   ]
-  useEffect(() => {
-    if (font.fontFamily) {
-      setSelectedFont(fonts.filter((data) => data.value === font.fontFamily)[0])
-    }
-
-    if (font.fontWeight) {
-      setSelectedFontWeight(fontOptions.filter((data) => data.value === font.fontWeight)[0])
-    }
-
-    if (font.fontSize) {
-      setSelectedFontSize(fontSizes.filter((data) => data.value === font.fontSize)[0])
-    }
-
-    if (font.fontColor) {
-      setSelectedFontColor(fontColors.filter((data) => data.value === font.fontColor)[0])
-    }
-  }, [])
 
   const handleSaveBtn = () => {
     onSave({
@@ -131,10 +114,10 @@ export default function FontSetting(props) {
               <div className="font-ex-box">
                 <span
                   style={{
-                    fontFamily: selectedFont?.value ?? '',
+                    fontFamily: selectedFont?.value ?? 'MS PGothic',
                     fontWeight: selectedFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
                     fontStyle: selectedFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
-                    fontSize: selectedFontSize?.value ?? '12px',
+                    fontSize: selectedFontSize?.value ?? 16,
                     color: selectedFontColor?.value ?? 'black',
                   }}
                 >

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

@@ -25,11 +25,7 @@ export default function SecondOption() {
   const [planSizeId, setPlanSizeId] = useState(uuidv4())
 
   const {
-    //horizon, setHorizon, vertical, setVertical,
+    fetchSettings,
-    // originHorizon,
-    // setOriginHorizon,
-    // originVertical,
-    // setOriginVertical,
     planSizeSettingMode,
     setPlanSizeSettingMode,
     settingModalSecondOptions,
@@ -40,12 +36,9 @@ export default function SecondOption() {
   } = useCanvasSetting()
   const { option3, option4 } = settingModalSecondOptions
 
-  // const [horizon, setHorizon] = useState(originHorizon)
-  // const [vertical, setVertical] = useState(originVertical)
-
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
-    console.log('SecondOption useEffect 실행', planSizeSettingMode)
+    console.log('SecondOption useEffect 실행')
   }, [])
 
   const handlePopup = (type) => {
@@ -119,6 +112,7 @@ export default function SecondOption() {
       case 'planSize': {
         //도면크기 설정
         if (!showPlanSizeSettingModal) {
+          fetchSettings() //화면 오픈 시 데이터 조회
           setShowPlanSizeSettingModal(true)
           addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />, true)
         } else {
@@ -135,10 +129,14 @@ export default function SecondOption() {
       return {
         ...prev,
         [fontProps.type]: {
-          fontFamily: font.fontFamily.value,
+          // fontFamily: font.fontFamily.value,
-          fontWeight: font.fontWeight.value,
+          // fontWeight: font.fontWeight.value,
-          fontSize: font.fontSize.value,
+          // fontSize: font.fontSize.value,
-          fontColor: font.fontColor.value,
+          // fontColor: font.fontColor.value,
+          fontFamily: font.fontFamily,
+          fontWeight: font.fontWeight,
+          fontSize: font.fontSize,
+          fontColor: font.fontColor,
         },
         fontFlag: true,
       }
@@ -161,10 +159,6 @@ export default function SecondOption() {
 
   const planSizeProps = {
     id: planSizeId,
-    // horizon,
-    // setHorizon,
-    // vertical,
-    // setVertical,
     horizon: planSizeSettingMode.originHorizon,
     vertical: planSizeSettingMode.originVertical,
     isShow: showPlanSizeSettingModal,

src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx

@@ -77,28 +77,9 @@ export default function DimensionLineSetting(props) {
     { id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' },
   ]
 
-  let originPixelView
-
   useEffect(() => {
     if (originPixel) {
       setOriginPixel(pixels?.filter((data) => data.value === originPixel)[0])
-      originPixelView = originPixel
-    }
-
-    if (globalFont.dimensionLineText.fontFamily) {
-      setOriginFont(fonts.filter((data) => data.value === globalFont.dimensionLineText.fontFamily)[0])
-    }
-
-    if (globalFont.dimensionLineText.fontWeight) {
-      setOriginFontWeight(fontOptions.filter((data) => data.value === globalFont.dimensionLineText.fontWeight)[0])
-    }
-
-    if (globalFont.dimensionLineText.fontSize) {
-      setOriginFontSize(fontSizes.filter((data) => data.value === globalFont.dimensionLineText.fontSize)[0])
-    }
-
-    if (globalFont.dimensionLineText.fontColor) {
-      setOriginFontColor(fontColors.filter((data) => data.value === globalFont.dimensionLineText.fontColor)[0])
     }
 
     setIsShow(true)
@@ -106,7 +87,6 @@ export default function DimensionLineSetting(props) {
 
   useEffect(() => {
     if (originPixel.name) {
-      originPixelView = originPixel.name
       setOriginPixel(originPixel)
     }
   }, [originPixel])
@@ -142,10 +122,10 @@ export default function DimensionLineSetting(props) {
     isShow: showFontModal,
     setIsShow: setShowFontModal,
     font: {
-      fontFamily: originFont?.value,
+      fontFamily: originFont,
-      fontWeight: originFontWeight?.value,
+      fontWeight: originFontWeight,
-      fontSize: originFontSize?.value,
+      fontSize: originFontSize,
-      fontColor: originFontColor?.value,
+      fontColor: originFontColor,
     },
     onSave: handleFontSave,
     isConfig: true,
@@ -172,10 +152,10 @@ export default function DimensionLineSetting(props) {
       return {
         ...prev,
         dimensionLineText: {
-          fontFamily: originFont.value,
+          fontFamily: originFont,
-          fontWeight: originFontWeight.value,
+          fontWeight: originFontWeight,
-          fontSize: originFontSize.value,
+          fontSize: originFontSize,
-          fontColor: originFontColor.value,
+          fontColor: originFontColor,
         },
         fontFlag: true,
       }

src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx

@@ -13,28 +13,19 @@ export default function PlanSizeSetting(props) {
   const { getMessage } = useMessage()
 
   const canvas = useRecoilValue(canvasState)
-
-  // const [originHorizon, setOriginHorizon] = useCanvasSetting(horizon)
-  // const [originVertical, setOriginVertical] = useCanvasSetting(vertical)
-  // const { originHorizon, setOriginHorizon, originVertical, setOriginVertical } = useCanvasSetting()
   const { planSizeSettingMode, setPlanSizeSettingMode } = useCanvasSetting()
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('PlanSizeSetting useEffect 실행')
-    console.log('11111', planSizeSettingMode)
-    //setOriginHorizon({ originHorizon: horizon, flag: false })
-    //setOriginVertical({ originVertical: vertical, flag: false })
   }, [])
 
   const onSave = () => {
-    console.log('22222', planSizeSettingMode)
     setPlanSizeSettingMode((prev) => {
-      console.log('4', prev)
       return {
         ...prev,
-        originHorizon: planSizeSettingMode.originHorizon,
+        originHorizon: Number(planSizeSettingMode.originHorizon),
-        originVertical: planSizeSettingMode.originVertical,
+        originVertical: Number(planSizeSettingMode.originVertical),
         flag: true,
       }
     })
@@ -53,7 +44,7 @@ export default function PlanSizeSetting(props) {
     setPlanSizeSettingMode((prev) => {
       return {
         ...prev,
-        [name]: value,
+        [name]: Number(value),
         flag: false,
       }
     })

src/hooks/common/useFont.js

@@ -12,7 +12,7 @@ export function useFont() {
   const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
 
   useEffect(() => {
-    if (canvas && commonText.fontWeight?.value) {
+    if (canvas && commonText.fontWeight.value) {
       const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'commonText')
       textObjs.forEach((obj) => {
         obj.set({
@@ -28,7 +28,7 @@ export function useFont() {
   }, [commonText])
 
   useEffect(() => {
-    if (canvas && dimensionLineText.fontWeight?.value) {
+    if (canvas && dimensionLineText.fontWeight.value) {
       const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'dimensionLineText')
       textObjs.forEach((obj) => {
         obj.set({
@@ -44,7 +44,7 @@ export function useFont() {
   }, [dimensionLineText])
 
   useEffect(() => {
-    if (canvas && flowText.fontWeight?.value) {
+    if (canvas && flowText.fontWeight.value) {
       const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'flowText')
       textObjs.forEach((obj) => {
         obj.set({
@@ -60,7 +60,7 @@ export function useFont() {
   }, [flowText])
 
   useEffect(() => {
-    if (canvas && lengthText.fontWeight?.value) {
+    if (canvas && lengthText.fontWeight.value) {
       const textObjs = canvas?.getObjects().filter((obj) => obj.name === 'lengthText')
       textObjs.forEach((obj) => {
         obj.set({

src/hooks/option/useCanvasSetting.js

@@ -32,7 +32,7 @@ export function useCanvasSetting() {
 
   const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
   const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState)
-  const [planSizeSettingMode, setPlanSizeSettingMode] = useRecoilState(adsorptionRangeState)
+  const [planSizeSettingMode, setPlanSizeSettingMode] = useRecoilState(planSizeSettingState)
   //const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
 
   const [selectedFont, setSelectedFont] = useState()
@@ -40,13 +40,8 @@ export function useCanvasSetting() {
   const [selectedFontSize, setSelectedFontSize] = useState()
   const [selectedFontColor, setSelectedFontColor] = useState()
   const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
-  //const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
-
   const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
 
-  //const [originHorizon, setOriginHorizon] = useState({ originHorizon: 1600, flag: false })
-  //const [originVertical, setOriginVertical] = useState({ originVertical: 1600, flag: false })
-
   useEffect(() => {
     if (!canvas) {
       return
@@ -97,9 +92,9 @@ export function useCanvasSetting() {
     console.log('useCanvasSetting useEffect 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
     if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) {
       onClickOption2()
+      frontSettings()
       fetchSettings()
     }
-    frontSettings()
   }, [settingModalFirstOptions, settingModalSecondOptions])
 
   // 글꼴 변경 시
@@ -114,20 +109,81 @@ export function useCanvasSetting() {
 
   // 도명크기 변경 시
   useEffect(() => {
-    console.log(
+    console.log('useCanvasSetting useEffect 실행5', planSizeSettingMode.flag, correntObjectNo)
-      'useCanvasSetting useEffect 실행5',
-      correntObjectNo,
-      planSizeSettingMode.flag,
-      planSizeSettingMode.originHorizon,
-      planSizeSettingMode.originVertical,
-    )
 
     if (planSizeSettingMode.flag) {
       onClickOption2()
       frontSettings()
       fetchSettings()
     }
-  }, [planSizeSettingMode.flag])
+  }, [planSizeSettingMode])
+
+  const getFonts = (itemValue) => {
+    const data = [
+      { id: 1, name: 'MS PGothic', value: 'MS PGothic' },
+      { id: 2, name: '@Yu Gothic', value: '@Yu Gothic' },
+      { id: 3, name: 'Yu Gothic', value: 'Yu Gothic' },
+      { id: 4, name: '@Yu Gothic UI', value: '@Yu Gothic UI' },
+      { id: 5, name: 'Yu Gothic UI', value: 'Yu Gothic UI' },
+    ].filter((font) => font.value === itemValue)[0]
+    if (data.length !== 0) {
+      return data
+    } else {
+      return { id: 1, name: 'MS PGothic', value: 'MS PGothic' }
+    }
+  }
+
+  const getFontSizes = (itemValue) => {
+    const data = [
+      ...Array.from({ length: 4 }).map((_, index) => {
+        return { id: index + 8, name: index + 8, value: index + 8 }
+      }),
+      ...Array.from({ length: 9 }).map((_, index) => {
+        return { id: (index + 6) * 2, name: (index + 6) * 2, value: (index + 6) * 2 }
+      }),
+      { id: 36, name: 36, value: 36 },
+      { id: 48, name: 48, value: 48 },
+      { id: 72, name: 72, value: 72 },
+    ].filter((fontSize) => fontSize.value === itemValue)[0]
+    if (data.length !== 0) {
+      return data
+    } else {
+      return { id: 16, name: 16, value: 16 }
+    }
+  }
+
+  const getFontStyles = (itemValue) => {
+    const data = [
+      { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' },
+      { id: 'italic', name: getMessage('font.style.italic'), value: 'italic' },
+      { id: 'bold', name: getMessage('font.style.bold'), value: 'bold' },
+      { id: 'boldAndItalic', name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' },
+    ].filter((fontStyle) => fontStyle.value === itemValue)[0]
+    if (data.length !== 0) {
+      return data
+    } else {
+      return { id: 'normal', name: getMessage('font.style.normal'), value: 'normal' }
+    }
+  }
+
+  const getFontColors = (itemValue) => {
+    const data = [
+      { id: 'black', name: getMessage('color.black'), value: 'black' },
+      { id: 'red', name: getMessage('color.red'), value: 'red' },
+      { id: 'blue', name: getMessage('color.blue'), value: 'blue' },
+      { id: 'gray', name: getMessage('color.gray'), value: 'gray' },
+      { id: 'yellow', name: getMessage('color.yellow'), value: 'yellow' },
+      { id: 'green', name: getMessage('color.green'), value: 'green' },
+      { id: 'pink', name: getMessage('color.pink'), value: 'pink' },
+      { id: 'gold', name: getMessage('color.gold'), value: 'gold' },
+      { id: 'darkblue', name: getMessage('color.darkblue'), value: 'darkblue' },
+    ].filter((fontColor) => fontColor.value === itemValue)[0]
+    if (data.length !== 0) {
+      return data
+    } else {
+      return { id: 'black', name: getMessage('color.black'), value: 'black' }
+    }
+  }
 
   const fetchSettings = async () => {
     try {
@@ -141,8 +197,6 @@ export function useCanvasSetting() {
         const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
         const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item }))
 
-        //setObjectNo(floorPlanState.objectNo)
-
         //흡착점 ON/OFF
         setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: res.adsorpPoint, fontFlag: false })
 
@@ -156,16 +210,6 @@ export function useCanvasSetting() {
           originVertical: res.originVertical,
           flag: false,
         })
-        // setOriginHorizon({
-        //   ...originHorizon,
-        //   originHorizon: res.originHorizon,
-        //   flag: false,
-        // })
-        // setOriginVertical({
-        //   ...originVertical,
-        //   originVertical: res.originVertical,
-        //   flag: false,
-        // })
 
         // 데이터 설정
         setSettingModalFirstOptions({
@@ -185,43 +229,43 @@ export function useCanvasSetting() {
         const fontPatternData = {
           commonText: {
             //문자 글꼴 조회 데이터
-            fontFamily: res.wordFont,
+            fontFamily: getFonts(res.wordFont),
-            fontWeight: res.wordFontStyle,
+            fontWeight: getFontStyles(res.wordFontStyle),
-            fontSize: res.wordFontSize,
+            fontSize: getFontSizes(res.wordFontSize),
-            fontColor: res.wordFontColor,
+            fontColor: getFontColors(res.wordFontColor),
           },
           flowText: {
             //흐름방향 글꼴 조회 데이터
-            fontFamily: res.flowFont,
+            fontFamily: getFonts(res.flowFont),
-            fontWeight: res.flowFontStyle,
+            fontWeight: getFontStyles(res.flowFontStyle),
-            fontSize: res.flowFontSize,
+            fontSize: getFontSizes(res.flowFontSize),
-            fontColor: res.flowFontColor,
+            fontColor: getFontColors(res.flowFontColor),
           },
           dimensionLineText: {
             //치수 글꼴 조회 데이터
-            fontFamily: res.dimensioFont,
+            fontFamily: getFonts(res.dimensioFont),
-            fontWeight: res.dimensioFontStyle,
+            fontWeight: getFontStyles(res.dimensioFontStyle),
-            fontSize: res.dimensioFontSize,
+            fontSize: getFontSizes(res.dimensioFontSize),
-            fontColor: res.dimensioFontColor,
+            fontColor: getFontColors(res.dimensioFontColor),
           },
           circuitNumberText: {
             //회로번호 글꼴 조회 데이터
-            fontFamily: res.circuitNumFont,
+            fontFamily: getFonts(res.circuitNumFont),
-            fontWeight: res.circuitNumFontStyle,
+            fontWeight: getFontStyles(res.circuitNumFontStyle),
-            fontSize: res.circuitNumFontSize,
+            fontSize: getFontSizes(res.circuitNumFontSize),
-            fontColor: res.circuitNumFontColor,
+            fontColor: getFontColors(res.circuitNumFontColor),
           },
           lengthText: {
             //치수선 글꼴 조회 데이터
-            fontFamily: res.lengthFont,
+            fontFamily: getFonts(res.lengthFont),
-            fontWeight: res.lengthFontStyle,
+            fontWeight: getFontStyles(res.lengthFontStyle),
-            fontSize: res.lengthFontSize,
+            fontSize: getFontSizes(res.lengthFontSize),
-            fontColor: res.lengthFontColor,
+            fontColor: getFontColors(res.lengthFontColor),
           },
           //글꼴 설정 Flag
           fontFlag: false,
         }
-        //console.log('fontPatternData', fontPatternData)
+        console.log('fontPatternData', fontPatternData)
 
         //조회된 글꼴 데이터 set
         setGlobalFont(fontPatternData)
@@ -239,14 +283,6 @@ export function useCanvasSetting() {
           ...planSizeSettingMode,
           flag: false,
         })
-        // setOriginHorizon({
-        //   ...originHorizon,
-        //   flag: false,
-        // })
-        // setOriginVertical({
-        //   ...originVertical,
-        //   flag: false,
-        // })
 
         // 데이터 설정
         setSettingModalFirstOptions({
@@ -258,52 +294,7 @@ export function useCanvasSetting() {
           fontFlag: false,
         })
 
-        //console.log('globalFont2', globalFont)
+        setGlobalFont({ ...globalFont, fontFlag: false })
-        const fontPatternData = {
-          commonText: {
-            //문자 글꼴
-            fontFamily: globalFont.commonText.fontFamily.value,
-            fontWeight: globalFont.commonText.fontWeight.value,
-            fontSize: globalFont.commonText.fontSize.value,
-            fontColor: globalFont.commonText.fontColor.value,
-          },
-          flowText: {
-            //흐름방향 글꼴
-            fontFamily: globalFont.flowText.fontFamily.value,
-            fontWeight: globalFont.flowText.fontWeight.value,
-            fontSize: globalFont.flowText.fontSize.value,
-            fontColor: globalFont.flowText.fontColor.value,
-          },
-          dimensionLineText: {
-            //치수 글꼴
-            fontFamily: globalFont.dimensionLineText.fontFamily.value,
-            fontWeight: globalFont.dimensionLineText.fontWeight.value,
-            fontSize: globalFont.dimensionLineText.fontSize.value,
-            fontColor: globalFont.dimensionLineText.fontColor.value,
-          },
-          circuitNumberText: {
-            //회로번호 글꼴
-            fontFamily: globalFont.circuitNumberText.fontFamily.value,
-            fontWeight: globalFont.circuitNumberText.fontWeight.value,
-            fontSize: globalFont.circuitNumberText.fontSize.value,
-            fontColor: globalFont.circuitNumberText.fontColor.value,
-          },
-          lengthText: {
-            //치수선 글꼴
-            fontFamily: globalFont.lengthText.fontFamily.value,
-            fontWeight: globalFont.lengthText.fontWeight.value,
-            fontSize: globalFont.lengthText.fontSize.value,
-            fontColor: globalFont.lengthText.fontColor.value,
-          },
-          //글꼴 설정 Flag
-          fontFlag: false,
-        }
-
-        //console.log('fontPatternData', fontPatternData)
-
-        setGlobalFont(fontPatternData)
-
-        //setGlobalFont({ ...globalFont, fontFlag: false })
       }
       frontSettings()
     } catch (error) {
@@ -332,7 +323,7 @@ export function useCanvasSetting() {
         selected: item.selected,
       })),
     }
-
+    // console.log('globalFont', globalFont)
     const patternData = {
       //견적서 번호
       objectNo: correntObjectNo,
@@ -366,34 +357,34 @@ export function useCanvasSetting() {
 
       //글꼴 설정
       //문자 글꼴
-      wordFont: globalFont.commonText.fontFamily,
+      wordFont: globalFont.commonText.fontFamily?.value ?? 'MS PGothic',
-      wordFontStyle: globalFont.commonText.fontWeight,
+      wordFontStyle: globalFont.commonText.fontWeight?.value ?? 'normal',
-      wordFontSize: globalFont.commonText.fontSize,
+      wordFontSize: globalFont.commonText.fontSize?.value ?? 16,
-      wordFontColor: globalFont.commonText.fontColor,
+      wordFontColor: globalFont.commonText.fontColor?.value ?? 'black',
 
       //흐름방향 글꼴
-      flowFont: globalFont.flowText.fontFamily,
+      flowFont: globalFont.flowText.fontFamily?.value ?? 'MS PGothic',
-      flowFontStyle: globalFont.flowText.fontWeight,
+      flowFontStyle: globalFont.flowText.fontWeight?.value ?? 'normal',
-      flowFontSize: globalFont.flowText.fontSize,
+      flowFontSize: globalFont.flowText.fontSize?.value ?? 16,
-      flowFontColor: globalFont.flowText.fontColor,
+      flowFontColor: globalFont.flowText.fontColor?.value ?? 'black',
 
       //치수 글꼴
-      dimensioFont: globalFont.dimensionLineText.fontFamily,
+      dimensioFont: globalFont.dimensionLineText.fontFamily?.value ?? 'MS PGothic',
-      dimensioFontStyle: globalFont.dimensionLineText.fontWeight,
+      dimensioFontStyle: globalFont.dimensionLineText.fontWeight?.value ?? 'normal',
-      dimensioFontSize: globalFont.dimensionLineText.fontSize,
+      dimensioFontSize: globalFont.dimensionLineText.fontSize?.value ?? 16,
-      dimensioFontColor: globalFont.dimensionLineText.fontColor,
+      dimensioFontColor: globalFont.dimensionLineText.fontColor?.value ?? 'black',
 
       //회로번호 글꼴
-      circuitNumFont: globalFont.circuitNumberText.fontFamily,
+      circuitNumFont: globalFont.circuitNumberText.fontFamily?.value ?? 'MS PGothic',
-      circuitNumFontStyle: globalFont.circuitNumberText.fontWeight,
+      circuitNumFontStyle: globalFont.circuitNumberText.fontWeight?.value ?? 'normal',
-      circuitNumFontSize: globalFont.circuitNumberText.fontSize,
+      circuitNumFontSize: globalFont.circuitNumberText.fontSize?.value ?? 16,
-      circuitNumFontColor: globalFont.circuitNumberText.fontColor,
+      circuitNumFontColor: globalFont.circuitNumberText.fontColor?.value ?? 'black',
 
       //치수선 글꼴
-      lengthFont: globalFont.lengthText.fontFamily,
+      lengthFont: globalFont.lengthText.fontFamily?.value ?? 'MS PGothic',
-      lengthFontStyle: globalFont.lengthText.fontWeight,
+      lengthFontStyle: globalFont.lengthText.fontWeight?.value ?? 'normal',
-      lengthFontSize: globalFont.lengthText.fontSize,
+      lengthFontSize: globalFont.lengthText.fontSize?.value ?? 16,
-      lengthFontColor: globalFont.lengthText.fontColor,
+      lengthFontColor: globalFont.lengthText.fontColor?.value ?? 'black',
 
       //치수선 설정
       originPixel: dimensionLineSettings.pixel,
@@ -402,8 +393,6 @@ export function useCanvasSetting() {
       //치수선 설정
       originHorizon: planSizeSettingMode.originHorizon,
       originVertical: planSizeSettingMode.originVertical,
-      // originHorizon: originHorizon.originHorizon,
-      // originVertical: originVertical.originVertical,
     }
 
     console.log('patternData ', patternData)