이미지 캡쳐 전처리 후처리 추가

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -26,6 +26,7 @@ import { useImgLoader } from '@/hooks/floorPlan/useImgLoader'
 import { usePlan } from '@/hooks/usePlan'
 import { QcastContext } from '@/app/QcastProvider'
 import { fabric } from 'fabric'
+import { fontSelector } from '@/store/fontAtom'
 
 const ALLOCATION_TYPE = {
   AUTO: 'auto',
@@ -45,6 +46,9 @@ export default function CircuitTrestleSetting({ id }) {
   const { managementState, setManagementState } = useContext(GlobalDataContext)
   const selectedModules = useRecoilValue(selectedModuleState)
   const { getPcsAutoRecommendList, getPcsVoltageChk, getPcsVoltageStepUpList, getPcsManualConfChk } = useMasterController()
+  const flowText = useRecoilValue(fontSelector('flowText'))
+  const lengthText = useRecoilValue(fontSelector('lengthText'))
+  const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
 
   // 회로할당(승합설정)에서 선택된 값들을 저장할 상태 추가
   const [selectedStepUpValues, setSelectedStepUpValues] = useState({})
@@ -103,19 +107,26 @@ export default function CircuitTrestleSetting({ id }) {
     }
   }, [])
 
-  // 50%로 압축
+  // 캡쳐 전 처리
-  const handleZoomCompression = () => {
+  const beforeCapture = () => {
     // setCanvasZoom(100)
     const x = canvas.width / 2
     const y = canvas.height / 2
     canvas.zoomToPoint(new fabric.Point(x, y), 0.5)
+    changeFontSize('lengthText', '28')
+    changeFontSize('circuitNumber', '28')
+    changeFontSize('flowText', '28')
     canvas.renderAll()
   }
 
-  const handleZoomClear = () => {
+  // 캡쳐 후 처리
+  const afterCapture = () => {
     setCanvasZoom(100)
     canvas.set({ zoom: 1 })
     canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
+    changeFontSize('lengthText', lengthText.fontSize.value)
+    changeFontSize('circuitNumber', circuitNumberText.fontSize.value)
+    changeFontSize('flowText', flowText.fontSize.value)
     canvas.renderAll()
   }
 
@@ -360,7 +371,7 @@ export default function CircuitTrestleSetting({ id }) {
 
   // 회로할당(승압설정) 저장 버튼 클릭 시
   const onApply = async () => {
-    handleZoomCompression()
+    beforeCapture()
     setAllModuleSurfaceIsComplete(false)
 
     setIsGlobalLoading(true)
@@ -392,7 +403,7 @@ export default function CircuitTrestleSetting({ id }) {
 
     if (result) {
       handleCanvasToPng(2)
-      handleZoomClear()
+      afterCapture()
       // 견적서 저장
       await saveEstimate(result)
     } else {
@@ -402,6 +413,16 @@ export default function CircuitTrestleSetting({ id }) {
     // removeNotAllocationModules()
   }
 
+  const changeFontSize = (name, size) => {
+    const textObjs = canvas?.getObjects().filter((obj) => obj.name === name)
+    textObjs.forEach((obj) => {
+      obj.set({
+        fontSize: size,
+      })
+    })
+    canvas.renderAll()
+  }
+
   // 이전 버튼 클릭 시
   const onClickPrev = () => {
     // setAllocationType(ALLOCATION_TYPE.AUTO)