Canvas 설정 수정

src/components/common/font/FontSetting.jsx

@@ -1,10 +1,11 @@
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { usePopup } from '@/hooks/usePopup'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 
 const fonts = [
   { id: 1, name: 'MS PGothic', value: 'MS PGothic' },
@@ -12,7 +13,6 @@ const fonts = [
   { 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' },
-  3,
 ]
 
 const fontSizes = [
@@ -36,14 +36,11 @@ export default function FontSetting(props) {
   const [selectedFontWeight, setSelectedFontWeight] = useState(font.fontWeight)
   const [selectedFontSize, setSelectedFontSize] = useState(font.fontSize)
   const [selectedFontColor, setSelectedFontColor] = useState(font.fontColor)
+
   const fontOptions = [
     { 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: 'bold',
-      name: getMessage('font.style.bold'),
-      value: 'bold',
-    },
     { id: 'boldAndItalic', name: getMessage('font.style.bold.italic'), value: 'boldAndItalic' },
   ]
   const fontColors = [
@@ -57,12 +54,30 @@ 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({
       fontFamily: selectedFont,
+      fontWeight: selectedFontWeight,
       fontSize: selectedFontSize,
       fontColor: selectedFontColor,
-      fontWeight: selectedFontWeight,
     })
     if (setIsShow) setIsShow(false)
     closePopup(id, isConfig)
@@ -117,9 +132,9 @@ export default function FontSetting(props) {
                 <span
                   style={{
                     fontFamily: selectedFont?.value ?? '',
+                    fontWeight: selectedFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
+                    fontStyle: selectedFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
                     fontSize: selectedFontSize?.value ?? '12px',
-                    fontStyle: selectedFontWeight?.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
-                    fontWeight: selectedFontWeight?.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
                     color: selectedFontColor?.value ?? 'black',
                   }}
                 >

src/components/floor-plan/FloorPlan.jsx

@@ -1,22 +1,20 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useContext, useEffect } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+//import { useRecoilState } from 'recoil'
-import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { usePopup } from '@/hooks/usePopup'
+//import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
+//import { correntObjectNoState } from '@/store/settingAtom'
 import '@/styles/contents.scss'
 
 export default function FloorPlan({ children }) {
-  const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
+  //const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
-  const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
+  //const [correntObjectNo, setCorrentObjectNo] = useRecoilState(correntObjectNoState)
-  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
   const { closeAll } = usePopup()
-
   const { menuNumber, setMenuNumber } = useCanvasMenu()
-
   const { fetchSettings } = useCanvasSetting()
 
   const modalProps = {
@@ -25,11 +23,13 @@ export default function FloorPlan({ children }) {
   }
 
   useEffect(() => {
+    ///setCorrentObjectNo(floorPlanState.objectNo)
+    //console.log('FloorPlan objectNo ', floorPlanState.objectNo, correntObjectNo)
     fetchSettings()
     return () => {
       closeAll()
     }
-  }, [objectNo])
+  }, [])
 
   return (
     <>

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

@@ -1,19 +1,46 @@
 import React, { useEffect, useState } from 'react'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useMessage } from '@/hooks/useMessage'
+import { POLYGON_TYPE } from '@/common/common'
+import { setSurfaceShapePattern } from '@/util/canvas-util'
 
 export default function FirstOption() {
-  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
-  const { settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
-  const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
   const { getMessage } = useMessage()
-
+  const { canvas, settingModalFirstOptions, setSettingModalFirstOptions } = useCanvasSetting()
-  const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
+  const { option1, option2, dimensionDisplay } = settingModalFirstOptions
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('FirstOption useEffect 실행')
-  }, [objectNo])
+  }, [])
+
+  const onClickOption = async (item) => {
+    //치수 표시(단 건 선택)
+    if (item.column === 'corridorDimension' || item.column === 'realDimension' || item.column === 'noneDimension') {
+      const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
+        option.selected = option.id === item.id
+        return option
+      })
+
+      //화면 표시(단 건 선택)
+    } else if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
+      const options2 = settingModalFirstOptions?.option2.map((option2) => {
+        option2.selected = option2.id === item.id
+        return option2
+      })
+
+      const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+
+      polygons.forEach((polygon) => {
+        setSurfaceShapePattern(polygon, item.column)
+      })
+      //디스플레이 설정 표시(단 건 선택)
+    } else {
+      item.selected = !item.selected
+    }
+
+    setSettingModalFirstOptions({ ...settingModalFirstOptions, option1, option2, dimensionDisplay, fontFlag: true })
+  }
 
   return (
     <>

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

@@ -16,32 +16,40 @@ export default function SecondOption() {
   const [showDimensionLineSettingModal, setShowDimensionLineSettingModal] = useState(false)
   const [showPlanSizeSettingModal, setShowPlanSizeSettingModal] = useState(false)
   const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
-  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
-  const { settingModalSecondOptions, setSettingModalSecondOptions } = useCanvasSetting()
-  const { adsorptionPointMode, setAdsorptionPointMode } = useCanvasSetting()
-  const { fetchSettings, frontSettings, onClickOption } = useCanvasSetting()
   const commonFont = useRecoilValue(fontSelector('commonText'))
   const flowFont = useRecoilValue(fontSelector('flowText'))
   const lengthFont = useRecoilValue(fontSelector('lengthText'))
   const circuitNumberTextFont = useRecoilValue(fontSelector('circuitNumberText'))
-
   const [dimensionId, setDimensionId] = useState(uuidv4())
   const [fontId, setFontId] = useState(uuidv4())
   const [planSizeId, setPlanSizeId] = useState(uuidv4())
+
+  const {
+    //horizon, setHorizon, vertical, setVertical,
+    // originHorizon,
+    // setOriginHorizon,
+    // originVertical,
+    // setOriginVertical,
+    planSizeSettingMode,
+    setPlanSizeSettingMode,
+    settingModalSecondOptions,
+    setSettingModalSecondOptions,
+    adsorptionPointMode,
+    setAdsorptionPointMode,
+    setAdsorptionRange,
+  } = useCanvasSetting()
+  const { option3, option4 } = settingModalSecondOptions
+
+  // const [horizon, setHorizon] = useState(originHorizon)
+  // const [vertical, setVertical] = useState(originVertical)
+
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
-    //fetchSettings()
+    console.log('SecondOption useEffect 실행', planSizeSettingMode)
-  }, [objectNo])
+  }, [])
 
-  const dimensionProps = {
-    id: dimensionId,
-    isShow: showDimensionLineSettingModal,
-    setIsShow: setShowDimensionLineSettingModal,
-  }
-
-  const [horizon, setHorizon] = useState(1600)
-  const [vertical, setVertical] = useState(1600)
   const handlePopup = (type) => {
+    setShowDimensionLineSettingModal(false)
     setShowPlanSizeSettingModal(false)
     setShowFontSettingModal(false)
 
@@ -51,8 +59,8 @@ export default function SecondOption() {
         setShowFontSettingModal(true)
         setShowDimensionLineSettingModal(false)
         fontProps.type = 'commonText'
-        fontProps.id = fontId + 1
         fontProps.font = commonFont
+        fontProps.id = fontId + 1
         addPopup(fontId + 1, 2, <FontSetting {...fontProps} />, true)
         break
       }
@@ -96,9 +104,9 @@ export default function SecondOption() {
           setShowDimensionLineSettingModal(true)
           fontProps.font = {
             fontFamily: '',
-            fontColor: '',
-            fontSize: '',
             fontWeight: '',
+            fontSize: '',
+            fontColor: '',
           }
           addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />, true)
         } else {
@@ -110,9 +118,13 @@ export default function SecondOption() {
 
       case 'planSize': {
         //도면크기 설정
-        setShowPlanSizeSettingModal(true)
+        if (!showPlanSizeSettingModal) {
-        setShowDimensionLineSettingModal(false)
+          setShowPlanSizeSettingModal(true)
-        addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />, true)
+          addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />, true)
+        } else {
+          setShowPlanSizeSettingModal(false)
+          closePopup(planSizeId, true)
+        }
         break
       }
     }
@@ -123,11 +135,12 @@ export default function SecondOption() {
       return {
         ...prev,
         [fontProps.type]: {
-          fontFamily: font.fontFamily,
+          fontFamily: font.fontFamily.value,
-          fontWeight: font.fontWeight,
+          fontWeight: font.fontWeight.value,
-          fontSize: font.fontSize,
+          fontSize: font.fontSize.value,
-          fontColor: font.fontColor,
+          fontColor: font.fontColor.value,
         },
+        fontFlag: true,
       }
     })
   }
@@ -140,16 +153,48 @@ export default function SecondOption() {
     isConfig: true,
   }
 
+  const dimensionProps = {
+    id: dimensionId,
+    isShow: showDimensionLineSettingModal,
+    setIsShow: setShowDimensionLineSettingModal,
+  }
+
   const planSizeProps = {
     id: planSizeId,
-    horizon,
+    // horizon,
-    setHorizon,
+    // setHorizon,
-    vertical,
+    // vertical,
-    setVertical,
+    // setVertical,
+    horizon: planSizeSettingMode.originHorizon,
+    vertical: planSizeSettingMode.originVertical,
+    isShow: showPlanSizeSettingModal,
     setIsShow: setShowPlanSizeSettingModal,
     pos: { x: 1025, y: 180 },
   }
 
+  const onClickOption = async (item) => {
+    //흡착범위 설정(단 건 선택)
+    if (
+      item.column === 'adsorpRangeSmall' ||
+      item.column === 'adsorpRangeSmallSemi' ||
+      item.column === 'adsorpRangeMedium' ||
+      item.column === 'adsorpRangeLarge'
+    ) {
+      // option4에서 한 개만 선택 가능하도록 처리
+      //const updatedOption4 = option4.map((option) => (option.id === item.id ? { ...option, selected: true } : { ...option, selected: false }))
+      const options = settingModalSecondOptions?.option4.map((option4) => {
+        option4.selected = option4.id === item.id
+        return option4
+      })
+
+      setSettingModalSecondOptions({ ...settingModalSecondOptions, option3, option4, fontFlag: true })
+    } else if (item === 'adsorpPoint') {
+      setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: !adsorptionPointMode.adsorptionPoint, fontFlag: true })
+    }
+    //setAdsorptionRange(item.range) //사용여부 확인 필요
+    setAdsorptionRange(50)
+  }
+
   return (
     <>
       <div className="modal-check-btn-wrap">
@@ -184,12 +229,12 @@ export default function SecondOption() {
           </button>
           <button
             className="adsorption-point act"
-            onClick={(e) => {
+            onClick={() => {
-              setAdsorptionPointMode(!adsorptionPointMode)
+              onClickOption('adsorpPoint')
             }}
           >
             <span>{getMessage('modal.canvas.setting.font.plan.absorption.point')}</span>
-            <i>{adsorptionPointMode ? 'ON' : 'OFF'}</i>
+            <i>{adsorptionPointMode.adsorptionPoint ? 'ON' : 'OFF'}</i>
           </button>
         </div>
       </div>

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

@@ -9,6 +9,28 @@ import { useMessage } from '@/hooks/useMessage'
 import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 import { useRecoilState } from 'recoil'
 import { globalFontAtom } from '@/store/fontAtom'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
+
+const fonts = [
+  { 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' },
+  //3,
+]
+
+const fontSizes = [
+  ...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 },
+]
 
 export default function DimensionLineSetting(props) {
   const { isShow, setIsShow, id, pos = { x: 985, y: 180 } } = props
@@ -16,28 +38,79 @@ export default function DimensionLineSetting(props) {
   const pixels = Array.from({ length: 5 }).map((_, index) => {
     return { id: index, name: index + 1, value: index + 1 }
   })
-  const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
+  //const [dimensionLineSettings, setDimensionLineSettings] = useRecoilState(dimensionLineSettingsState)
-  const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
+  //const [originPixel, setOriginPixel] = useState(dimensionLineSettings.pixel)
-  const [originPixel, setOriginPixel] = useState(dimensionLineSettings.pixel)
+  //const [originColor, setOriginColor] = useState(dimensionLineSettings.color)
-  const [originColor, setOriginColor] = useState(dimensionLineSettings.color)
+  //const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
-  const [originFont, setOriginFont] = useState(globalFont.dimensionLineText.fontFamily)
-  const [originFontColor, setOriginFontColor] = useState(globalFont.dimensionLineText.fontColor)
-  const [originFontSize, setOriginFontSize] = useState(globalFont.dimensionLineText.fontSize)
-  const [originFontWeight, setOriginFontWeight] = useState(globalFont.dimensionLineText.fontWeight)
-  const [fontModalId, setFontModalId] = useState(uuidv4())
 
+  const [fontModalId, setFontModalId] = useState(uuidv4())
   const [colorModalId, setColorModalId] = useState(uuidv4())
   const [showColorPickerModal, setShowColorPickerModal] = useState(false)
   const [showFontModal, setShowFontModal] = useState(false)
   const { getMessage } = useMessage()
 
+  const { globalFont, setGlobalFont, dimensionLineSettings, setDimensionLineSettings } = useCanvasSetting()
+
+  const [originFont, setOriginFont] = useState(globalFont.dimensionLineText.fontFamily)
+  const [originFontWeight, setOriginFontWeight] = useState(globalFont.dimensionLineText.fontWeight)
+  const [originFontSize, setOriginFontSize] = useState(globalFont.dimensionLineText.fontSize)
+  const [originFontColor, setOriginFontColor] = useState(globalFont.dimensionLineText.fontColor)
+
+  const [originPixel, setOriginPixel] = useState(dimensionLineSettings.pixel)
+  const [originColor, setOriginColor] = useState(dimensionLineSettings.color)
+
+  const fontOptions = [
+    { 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' },
+  ]
+  const fontColors = [
+    { 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' },
+  ]
+
+  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)
   }, [])
 
+  useEffect(() => {
+    if (originPixel.name) {
+      originPixelView = originPixel.name
+      setOriginPixel(originPixel)
+    }
+  }, [originPixel])
+
   useEffect(() => {
     if (!isShow) {
       closePopups([fontModalId, colorModalId])
@@ -46,9 +119,9 @@ export default function DimensionLineSetting(props) {
 
   const handleFontSave = (font) => {
     setOriginFont(font.fontFamily)
+    setOriginFontWeight(font.fontWeight)
     setOriginFontSize(font.fontSize)
     setOriginFontColor(font.fontColor)
-    setOriginFontWeight(font.fontWeight)
   }
   const handleColorSave = () => {}
 
@@ -69,10 +142,10 @@ export default function DimensionLineSetting(props) {
     isShow: showFontModal,
     setIsShow: setShowFontModal,
     font: {
-      fontFamily: originFont,
+      fontFamily: originFont?.value,
-      fontSize: originFontSize,
+      fontWeight: originFontWeight?.value,
-      fontColor: originFontColor,
+      fontSize: originFontSize?.value,
-      fontWeight: originFontWeight,
+      fontColor: originFontColor?.value,
     },
     onSave: handleFontSave,
     isConfig: true,
@@ -99,17 +172,18 @@ export default function DimensionLineSetting(props) {
       return {
         ...prev,
         dimensionLineText: {
-          fontFamily: originFont,
+          fontFamily: originFont.value,
-          fontWeight: originFontWeight,
+          fontWeight: originFontWeight.value,
-          fontSize: originFontSize,
+          fontSize: originFontSize.value,
-          fontColor: originFontColor,
+          fontColor: originFontColor.value,
         },
+        fontFlag: true,
       }
     })
     setDimensionLineSettings((prev) => {
       return {
         ...prev,
-        pixel: originPixel?.value,
+        pixel: originPixel.name,
         color: originColor,
       }
     })
@@ -125,8 +199,8 @@ export default function DimensionLineSetting(props) {
           <button
             className="modal-close"
             onClick={() => {
-              closePopups([fontModalId, colorModalId, id])
               setIsShow(false)
+              closePopups([fontModalId, colorModalId, id])
             }}
           >
             닫기
@@ -160,10 +234,10 @@ export default function DimensionLineSetting(props) {
                     className="font"
                     style={{
                       fontFamily: originFont?.value ?? '',
-                      color: originFontColor.value ?? 'black',
+                      fontWeight: originFontWeight?.value?.toLowerCase().includes('bold') ? 'bold' : 'normal',
+                      fontStyle: originFontWeight?.value?.toLowerCase().includes('italic') ? 'italic' : 'normal',
                       fontSize: originFontSize?.value ?? '12px',
-                      fontStyle: originFontWeight?.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
+                      color: originFontColor?.value ?? 'black',
-                      fontWeight: originFontWeight?.value.toLowerCase().includes('bold') ? 'bold' : 'normal',
                     }}
                   >
                     9,999
@@ -173,7 +247,7 @@ export default function DimensionLineSetting(props) {
                     style={{
                       backgroundColor: originColor,
                       borderColor: originColor,
-                      height: originPixel?.value,
+                      height: originPixel.name,
                     }}
                   ></span>
                 </div>

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

@@ -1,18 +1,64 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { canvasState } from '@/store/canvasAtom'
+import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
+import { onlyNumberInputChange } from '@/util/input-utils'
 
 export default function PlanSizeSetting(props) {
-  const { horizon, setHorizon, vertical, setVertical, id, pos = { x: 985, y: 180 }, setIsShow } = props
+  const { setIsShow, horizon, vertical, id, pos = { x: 985, y: 180 } } = props
   const { closePopup } = usePopup()
   const { getMessage } = useMessage()
-  const [originHorizon, setOriginHorizon] = useState(horizon)
+
-  const [originVertical, setOriginVertical] = useState(vertical)
   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,
+        originVertical: planSizeSettingMode.originVertical,
+        flag: true,
+      }
+    })
+
+    canvas.setWidth(planSizeSettingMode.originHorizon)
+    canvas.setHeight(planSizeSettingMode.originVertical)
+    canvas.renderAll()
+
+    setIsShow(false)
+    closePopup(id, true)
+  }
+
+  const changeInput = (value, e) => {
+    const { name } = e.target
+    console.log('name', name, value)
+    setPlanSizeSettingMode((prev) => {
+      return {
+        ...prev,
+        [name]: value,
+        flag: false,
+      }
+    })
+  }
+
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xsm mount`}>
@@ -33,7 +79,15 @@ export default function PlanSizeSetting(props) {
             <div className="outline-form mb10">
               <span style={{ width: 'auto' }}>{getMessage('common.horizon')}</span>
               <div className="input-grid mr5" style={{ width: '90px' }}>
-                <input type="text" className="input-origin block" value={originHorizon} onChange={(e) => setOriginHorizon(Number(e.target.value))} />
+                <input
+                  type="text"
+                  className="input-origin block"
+                  name={`originHorizon`}
+                  value={planSizeSettingMode.originHorizon}
+                  //onChange={(e) => setPlanSizeSettingMode({ ...planSizeSettingMode, originHorizon: Number(e.target.value), flag: false })}
+                  //onFocus={(e) => (originHorizon.current.value = '')}
+                  onChange={(e) => onlyNumberInputChange(e, changeInput)}
+                />
               </div>
               <span className="thin">mm</span>
             </div>
@@ -43,26 +97,18 @@ export default function PlanSizeSetting(props) {
                 <input
                   type="text"
                   className="input-origin block"
-                  value={originVertical}
+                  name={`originVertical`}
-                  onChange={(e) => setOriginVertical(Number(e.target.value))}
+                  value={planSizeSettingMode.originVertical}
+                  //onChange={(e) => setPlanSizeSettingMode({ ...planSizeSettingMode, originVertical: Number(e.target.value), flag: false })}
+                  //onFocus={(e) => (originVertical.current.value = '')}
+                  onChange={(e) => onlyNumberInputChange(e, changeInput)}
                 />
               </div>
               <span className="thin">mm</span>
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button
+            <button className="btn-frame modal act" onClick={onSave}>
-              className="btn-frame modal act"
-              onClick={() => {
-                setHorizon(originHorizon)
-                setVertical(originVertical)
-                setIsShow(false)
-                closePopup(id)
-                canvas.setWidth(originHorizon)
-                canvas.setHeight(originVertical)
-                canvas.renderAll()
-              }}
-            >
               {getMessage('modal.common.save')}
             </button>
           </div>

src/hooks/common/useFont.js

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

src/hooks/option/useCanvasSetting.js

@@ -1,16 +1,22 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
-import { adsorptionPointModeState, adsorptionRangeState, canvasState } from '@/store/canvasAtom'
+import { adsorptionPointModeState, adsorptionRangeState, canvasState, planSizeSettingState } from '@/store/canvasAtom'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
-import { corridorDimensionSelector, settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
+import { correntObjectNoState, corridorDimensionSelector, settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
-import { setSurfaceShapePattern } from '@/util/canvas-util'
 import { POLYGON_TYPE } from '@/common/common'
+import { fontSelector, globalFontAtom } from '@/store/fontAtom'
+import { dimensionLineSettingsState } from '@/store/commonUtilsAtom'
+
+let objectNo
 
 export function useCanvasSetting() {
   const canvas = useRecoilValue(canvasState)
+  // canvas가 null이 아닐 때에만 getObjects 호출
+  const canvasObjects = canvas ? canvas.getObjects() : []
+  const [correntObjectNo, setCorrentObjectNo] = useRecoilState(correntObjectNoState)
 
   const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
@@ -25,9 +31,21 @@ export function useCanvasSetting() {
   const { swalFire } = useSwal()
 
   const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
-  const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
+  const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState)
+  const [planSizeSettingMode, setPlanSizeSettingMode] = useRecoilState(adsorptionRangeState)
+  //const setAdsorptionRange = useSetRecoilState(adsorptionRangeState)
 
-  const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
+  const [selectedFont, setSelectedFont] = useState()
+  const [selectedFontWeight, setSelectedFontWeight] = useState()
+  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) {
@@ -56,199 +74,354 @@ export function useCanvasSetting() {
         })
         break
     }
-    canvas.renderAll()
+    canvas?.renderAll()
   }, [corridorDimension])
 
   useEffect(() => {
-    console.log('useCanvasSetting useEffect 실행1')
+    console.log('useCanvasSetting useEffect 실행1', correntObjectNo)
-    fetchSettings()
+  }, [])
-  }, [objectNo])
 
+  //흡착점 ON/OFF 변경 시
   useEffect(() => {
-    console.log('useCanvasSetting useEffect 실행2')
+    console.log('useCanvasSetting useEffect 실행2', adsorptionPointMode.fontFlag, correntObjectNo)
-    //fetchSettings()
+
-    //onClickOption()
+    if (adsorptionPointMode.fontFlag) {
-    //fetchSettings()
+      onClickOption2()
+      frontSettings()
+      fetchSettings()
+    }
   }, [adsorptionPointMode])
 
+  // 1 과 2 변경 시
   useEffect(() => {
-    console.log('useCanvasSetting useEffect 실행3')
+    console.log('useCanvasSetting useEffect 실행3', settingModalFirstOptions.fontFlag, settingModalSecondOptions.fontFlag, correntObjectNo)
-    //fetchSettings()
+    if (settingModalFirstOptions.fontFlag || settingModalSecondOptions.fontFlag) {
-    //onClickOption()
+      onClickOption2()
-    //fetchSettings()
+      fetchSettings()
+    }
+    frontSettings()
   }, [settingModalFirstOptions, settingModalSecondOptions])
 
+  // 글꼴 변경 시
+  useEffect(() => {
+    console.log('useCanvasSetting useEffect 실행4', globalFont.fontFlag, correntObjectNo)
+    if (globalFont.fontFlag) {
+      onClickOption2()
+      frontSettings()
+      fetchSettings()
+    }
+  }, [globalFont])
+
+  // 도명크기 변경 시
+  useEffect(() => {
+    console.log(
+      'useCanvasSetting useEffect 실행5',
+      correntObjectNo,
+      planSizeSettingMode.flag,
+      planSizeSettingMode.originHorizon,
+      planSizeSettingMode.originVertical,
+    )
+
+    if (planSizeSettingMode.flag) {
+      onClickOption2()
+      frontSettings()
+      fetchSettings()
+    }
+  }, [planSizeSettingMode.flag])
+
   const fetchSettings = async () => {
     try {
-      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` })
+      const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${correntObjectNo}` })
       console.log('res', res)
-      const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
-      const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
-      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item }))
 
-      const patternData = {
+      if (res) {
-        adsorpPoint: res.adsorpPoint,
+        const optionData1 = settingModalFirstOptions.option1.map((item) => ({ ...item, selected: res[item.column] }))
+        const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
+        const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
+        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 })
+
+        //치수선 설정
+        setDimensionLineSettings({ ...dimensionLineSettings, pixel: res.originPixel, color: res.originColor })
+
+        //도면크기 설정
+        setPlanSizeSettingMode({
+          ...planSizeSettingMode,
+          originHorizon: res.originHorizon,
+          originVertical: res.originVertical,
+          flag: false,
+        })
+        // setOriginHorizon({
+        //   ...originHorizon,
+        //   originHorizon: res.originHorizon,
+        //   flag: false,
+        // })
+        // setOriginVertical({
+        //   ...originVertical,
+        //   originVertical: res.originVertical,
+        //   flag: false,
+        // })
+
+        // 데이터 설정
+        setSettingModalFirstOptions({
+          ...settingModalFirstOptions,
+          option1: optionData1,
+          option2: optionData2,
+          dimensionDisplay: optionData5,
+          fontFlag: false,
+        })
+        setSettingModalSecondOptions({
+          ...settingModalSecondOptions,
+          option3: optionData3,
+          option4: optionData4,
+          fontFlag: false,
+        })
+
+        const fontPatternData = {
+          commonText: {
+            //문자 글꼴 조회 데이터
+            fontFamily: res.wordFont,
+            fontWeight: res.wordFontStyle,
+            fontSize: res.wordFontSize,
+            fontColor: res.wordFontColor,
+          },
+          flowText: {
+            //흐름방향 글꼴 조회 데이터
+            fontFamily: res.flowFont,
+            fontWeight: res.flowFontStyle,
+            fontSize: res.flowFontSize,
+            fontColor: res.flowFontColor,
+          },
+          dimensionLineText: {
+            //치수 글꼴 조회 데이터
+            fontFamily: res.dimensioFont,
+            fontWeight: res.dimensioFontStyle,
+            fontSize: res.dimensioFontSize,
+            fontColor: res.dimensioFontColor,
+          },
+          circuitNumberText: {
+            //회로번호 글꼴 조회 데이터
+            fontFamily: res.circuitNumFont,
+            fontWeight: res.circuitNumFontStyle,
+            fontSize: res.circuitNumFontSize,
+            fontColor: res.circuitNumFontColor,
+          },
+          lengthText: {
+            //치수선 글꼴 조회 데이터
+            fontFamily: res.lengthFont,
+            fontWeight: res.lengthFontStyle,
+            fontSize: res.lengthFontSize,
+            fontColor: res.lengthFontColor,
+          },
+          //글꼴 설정 Flag
+          fontFlag: false,
+        }
+        //console.log('fontPatternData', fontPatternData)
+
+        //조회된 글꼴 데이터 set
+        setGlobalFont(fontPatternData)
+      } else {
+        //조회된 글꼴 데이터가 없는 경우
+
+        //흡착점 ON/OFF
+        setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: false, fontFlag: false })
+
+        //치수선 설정
+        setDimensionLineSettings({ ...dimensionLineSettings })
+
+        //도면크기 설정
+        setPlanSizeSettingMode({
+          ...planSizeSettingMode,
+          flag: false,
+        })
+        // setOriginHorizon({
+        //   ...originHorizon,
+        //   flag: false,
+        // })
+        // setOriginVertical({
+        //   ...originVertical,
+        //   flag: false,
+        // })
+
+        // 데이터 설정
+        setSettingModalFirstOptions({
+          ...settingModalFirstOptions,
+          fontFlag: false,
+        })
+        setSettingModalSecondOptions({
+          ...settingModalSecondOptions,
+          fontFlag: false,
+        })
+
+        //console.log('globalFont2', globalFont)
+        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()
-      // 데이터 설정
-      setSettingModalFirstOptions({
-        option1: optionData1,
-        option2: optionData2,
-        dimensionDisplay: optionData5,
-      })
-      setSettingModalSecondOptions({
-        option3: optionData3,
-        option4: optionData4,
-      })
-
-      setAdsorptionPointMode(patternData.adsorpPoint)
-
-      console.log('adsorptionPointMode', adsorptionPointMode)
     } catch (error) {
       console.error('Data fetching error:', error)
     }
   }
 
   // 옵션 클릭 후 저장
-  const onClickOption = async (item) => {
+  const onClickOption2 = useCallback(async () => {
-    //치수 표시(단 건 선택)
+    // 서버에 전송할 데이터
-    if (item.column === 'corridorDimension' || item.column === 'realDimension' || item.column === 'noneDimension') {
+    const dataToSend = {
-      console.log('치수 표시 ', item)
+      firstOption1: option1.map((item) => ({
-      const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
+        column: item.column,
-        option.selected = option.id === item.id
+        selected: item.selected,
-        return option
+      })),
-      })
+      firstOption2: option2.map((item) => ({
-
+        column: item.column,
-      //화면 표시(단 건 선택)
+        selected: item.selected,
-    } else if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') {
+      })),
-      console.log('화면 표시 ', item)
+      firstOption3: dimensionDisplay.map((item) => ({
-      const options2 = settingModalFirstOptions?.option2.map((option2) => {
+        column: item.column,
-        option2.selected = option2.id === item.id
+        selected: item.selected,
-        return option2
+      })),
-      })
+      secondOption2: option4.map((item) => ({
-
+        column: item.column,
-      const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+        selected: item.selected,
-
+      })),
-      polygons.forEach((polygon) => {
-        setSurfaceShapePattern(polygon, item.column)
-      })
-
-      //흡착범위 설정(단 건 선택)
-    } else if (
-      item.column === 'adsorpRangeSmall' ||
-      item.column === 'adsorpRangeSmallSemi' ||
-      item.column === 'adsorpRangeMedium' ||
-      item.column === 'adsorpRangeLarge'
-    ) {
-      console.log('화면 표시2 ', item, option4)
-      // option4에서 한 개만 선택 가능하도록 처리
-      const updatedOption4 = option4.map((option) =>
-        option.id === item.id
-          ? { ...option, selected: true }
-          : {
-              ...option,
-              selected: false,
-            },
-      )
-
-      setSettingModalSecondOptions({ option3, option4: updatedOption4 })
-
-      //흡착점 ON / OFF
-    } else if (item === 'adsorpPoint') {
-      console.log('흡착점 ON / OFF ', item)
-      const options2 = settingModalFirstOptions?.option2.map((option2) => {
-        option2.selected = option2.id === item.id
-        return option2
-      })
-
-      const polygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
-
-      polygons.forEach((polygon) => {
-        setSurfaceShapePattern(polygon, item.column)
-      })
-
-      //디스플레이 설정(다 건 선택)
-    } else {
-      //console.log('디스플레이 설정1 ', item.column)
-      console.log('디스플레이 설정 ', item)
-      item.selected = !item.selected
     }
 
-    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
+    const patternData = {
+      //견적서 번호
+      objectNo: correntObjectNo,
+      //디스플레이 설정(다중)
+      allocDisplay: dataToSend.firstOption1[0].selected,
+      outlineDisplay: dataToSend.firstOption1[1].selected,
+      gridDisplay: dataToSend.firstOption1[2].selected,
+      lineDisplay: dataToSend.firstOption1[3].selected,
+      wordDisplay: dataToSend.firstOption1[4].selected,
+      circuitNumDisplay: dataToSend.firstOption1[5].selected,
+      flowDisplay: dataToSend.firstOption1[6].selected,
+      trestleDisplay: dataToSend.firstOption1[7].selected,
+      imageDisplay: dataToSend.firstOption1[8].selected,
+      totalDisplay: dataToSend.firstOption1[9].selected,
+      //차수 표시(단 건)
+      corridorDimension: dataToSend.firstOption3[0].selected,
+      realDimension: dataToSend.firstOption3[1].selected,
+      noneDimension: dataToSend.firstOption3[2].selected,
+      //화면 표시(단 건)
+      onlyBorder: dataToSend.firstOption2[0].selected,
+      lineHatch: dataToSend.firstOption2[1].selected,
+      allPainted: dataToSend.firstOption2[2].selected,
+      //흡착범위 설정(단 건)
+      adsorpRangeSmall: dataToSend.secondOption2[0].selected,
+      adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
+      adsorpRangeMedium: dataToSend.secondOption2[2].selected,
+      adsorpRangeLarge: dataToSend.secondOption2[3].selected,
+      //흡착점 ON/OFF
+      adsorpPoint: adsorptionPointMode.adsorptionPoint,
+      //??: adsorptionRange, 사용여부 확인 필요
 
-    try {
+      //글꼴 설정
-      // 서버에 전송할 데이터
+      //문자 글꼴
-      const dataToSend = {
+      wordFont: globalFont.commonText.fontFamily,
-        firstOption1: option1.map((item) => ({
+      wordFontStyle: globalFont.commonText.fontWeight,
-          column: item.column,
+      wordFontSize: globalFont.commonText.fontSize,
-          selected: item.selected,
+      wordFontColor: globalFont.commonText.fontColor,
-        })),
-        firstOption2: option2.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        firstOption3: dimensionDisplay.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-        // secondOption1: secondOptions[0].option1.map((item) => ({
-        //   name: item.id,
-        //   name: item.name,
-        //   // 필요한 경우 데이터 항목 추가
-        // })),
-        secondOption2: option4.map((item) => ({
-          column: item.column,
-          selected: item.selected,
-        })),
-      }
 
-      const patternData = {
+      //흐름방향 글꼴
-        objectNo,
+      flowFont: globalFont.flowText.fontFamily,
-        //디스플레이 설정(다중)
+      flowFontStyle: globalFont.flowText.fontWeight,
-        allocDisplay: dataToSend.firstOption1[0].selected,
+      flowFontSize: globalFont.flowText.fontSize,
-        outlineDisplay: dataToSend.firstOption1[1].selected,
+      flowFontColor: globalFont.flowText.fontColor,
-        gridDisplay: dataToSend.firstOption1[2].selected,
-        lineDisplay: dataToSend.firstOption1[3].selected,
-        wordDisplay: dataToSend.firstOption1[4].selected,
-        circuitNumDisplay: dataToSend.firstOption1[5].selected,
-        flowDisplay: dataToSend.firstOption1[6].selected,
-        trestleDisplay: dataToSend.firstOption1[7].selected,
-        imageDisplay: dataToSend.firstOption1[8].selected,
-        totalDisplay: dataToSend.firstOption1[9].selected,
-        //차수 표시(단 건)
-        corridorDimension: dataToSend.firstOption3[0].selected,
-        realDimension: dataToSend.firstOption3[1].selected,
-        noneDimension: dataToSend.firstOption3[2].selected,
-        //화면 표시(단 건)
-        onlyBorder: dataToSend.firstOption2[0].selected,
-        lineHatch: dataToSend.firstOption2[1].selected,
-        allPainted: dataToSend.firstOption2[2].selected,
-        //흡착범위 설정(단 건)
-        adsorpRangeSmall: dataToSend.secondOption2[0].selected,
-        adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
-        adsorpRangeMedium: dataToSend.secondOption2[2].selected,
-        adsorpRangeLarge: dataToSend.secondOption2[3].selected,
-        //흡착점 ON/OFF
-        adsorpPoint: adsorptionPointMode,
-      }
 
-      console.log('patternData ', patternData)
+      //치수 글꼴
+      dimensioFont: globalFont.dimensionLineText.fontFamily,
+      dimensioFontStyle: globalFont.dimensionLineText.fontWeight,
+      dimensioFontSize: globalFont.dimensionLineText.fontSize,
+      dimensioFontColor: globalFont.dimensionLineText.fontColor,
 
-      // HTTP POST 요청 보내기
+      //회로번호 글꼴
-      await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }).then((res) => {
+      circuitNumFont: globalFont.circuitNumberText.fontFamily,
+      circuitNumFontStyle: globalFont.circuitNumberText.fontWeight,
+      circuitNumFontSize: globalFont.circuitNumberText.fontSize,
+      circuitNumFontColor: globalFont.circuitNumberText.fontColor,
+
+      //치수선 글꼴
+      lengthFont: globalFont.lengthText.fontFamily,
+      lengthFontStyle: globalFont.lengthText.fontWeight,
+      lengthFontSize: globalFont.lengthText.fontSize,
+      lengthFontColor: globalFont.lengthText.fontColor,
+
+      //치수선 설정
+      originPixel: dimensionLineSettings.pixel,
+      originColor: dimensionLineSettings.color,
+
+      //치수선 설정
+      originHorizon: planSizeSettingMode.originHorizon,
+      originVertical: planSizeSettingMode.originVertical,
+      // originHorizon: originHorizon.originHorizon,
+      // originVertical: originVertical.originVertical,
+    }
+
+    console.log('patternData ', patternData)
+
+    // HTTP POST 요청 보내기
+    await post({ url: `/api/canvas-management/canvas-settings`, data: patternData })
+      .then((res) => {
         swalFire({ text: getMessage(res.returnMessage) })
 
         // Canvas 디스플레이 설정 시 해당 옵션 적용
         frontSettings()
       })
-    } catch (error) {
+      .catch((error) => {
-      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+        swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
-    }
+      })
 
-    setAdsorptionRange(item.range)
+    //setAdsorptionRange(item.range)
-  }
+  }, [settingModalFirstOptions, settingModalSecondOptions, adsorptionPointMode, globalFont, planSizeSettingMode])
 
   // Canvas 디스플레이 설정 시 해당 옵션 적용
   const frontSettings = async () => {
@@ -260,7 +433,7 @@ export function useCanvasSetting() {
     // 'lineDisplay' 지붕선 표시     'roof', POLYGON_TYPE.ROOF
     // 'wordDisplay' 문자 표시
     // 'circuitNumDisplay' 회로번호 표시
-    // 'flowDisplay' 흐름방향 표시   'arrow'
+    // 'flowDisplay' 흐름방향 표시   'arrow', 'flowText'
     // 'trestleDisplay' 가대 표시
     // 'imageDisplay' 이미지 표시
     // 'totalDisplay' 집계표 표시
@@ -304,8 +477,8 @@ export function useCanvasSetting() {
       // 표시 선택 상태(true/false)
       optionSelected = option1[i].selected
 
-      canvas
+      //canvas.getObjects() >> canvasObjects
-        .getObjects()
+      canvasObjects
         .filter((obj) => optionName.includes(obj.name))
         //.filter((obj) => obj.name === optionName)
         .forEach((obj) => {
@@ -313,7 +486,7 @@ export function useCanvasSetting() {
           //obj.set({ visible: !obj.visible })
         })
 
-      canvas.renderAll()
+      canvas?.renderAll()
 
       // console.log(
       //   'optionName',
@@ -324,14 +497,31 @@ export function useCanvasSetting() {
   }
 
   return {
+    canvas,
     settingModalFirstOptions,
     setSettingModalFirstOptions,
     settingModalSecondOptions,
     setSettingModalSecondOptions,
     adsorptionPointMode,
     setAdsorptionPointMode,
+    adsorptionRange,
+    setAdsorptionRange,
     fetchSettings,
-    onClickOption,
+    //onClickOption,
     frontSettings,
+    globalFont,
+    setGlobalFont,
+    selectedFont,
+    setSelectedFont,
+    selectedFontWeight,
+    setSelectedFontWeight,
+    selectedFontSize,
+    setSelectedFontSize,
+    selectedFontColor,
+    setSelectedFontColor,
+    dimensionLineSettings,
+    setDimensionLineSettings,
+    planSizeSettingMode,
+    setPlanSizeSettingMode,
   }
 }

src/store/canvasAtom.js

@@ -222,6 +222,12 @@ export const adsorptionRangeState = atom({
   default: 50,
 })
 
+// 도면크기 설정
+export const planSizeSettingState = atom({
+  key: 'planSizeSettingMode',
+  default: { originHorizon: 1600, originVertical: 1600 },
+})
+
 // 점,선 그리드 설정
 export const dotLineGridSettingState = atom({
   key: 'gridSettingState',

src/store/fontAtom.js

@@ -1,10 +1,10 @@
 import { atom, selectorFamily } from 'recoil'
 
 const defaultFont = {
-  fontFamily: { name: 'MS PGothic', value: 'MS PGothic' },
+  fontFamily: { id: 1, name: 'MS PGothic', value: 'MS PGothic' },
-  fontWeight: { name: '보통', value: 'normal' },
+  fontWeight: { id: 'normal', name: '보통', value: 'normal' },
-  fontSize: { name: '16', value: '16' },
+  fontSize: { id: 16, name: 16, value: 16 },
-  fontColor: { name: '검정색', value: 'black' },
+  fontColor: { id: 'black', name: '검정색', value: 'black' },
 }
 
 export const globalFontAtom = atom({