다각형 수정 , font global

src/components/Roof2.jsx

@@ -5,6 +5,8 @@ import QRect from '@/components/fabric/QRect'
 import QLine from '@/components/fabric/QLine'
 import QPolygon from '@/components/fabric/QPolygon'
 import RangeSlider from './ui/RangeSlider'
+import { useRecoilState } from 'recoil'
+import { fontSizeState } from '@/store/canvasAtom'
 
 export default function Roof2() {
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots } =
@@ -15,7 +17,7 @@ export default function Roof2() {
   //canvas 세로 사이즈
   const [horizontalSize, setHorizontalSize] = useState(1000)
   // 글자크기
-  const [fontSize, setFontSize] = useState(0)
+  const [fontSize, setFontSize] = useRecoilState(fontSizeState)
 
   const {
     mode,
@@ -83,9 +85,9 @@ export default function Roof2() {
 
   const canvasSizeMode = () => {
     if (canvas) {
-      canvas.setWidth(parseInt(verticalSize));
+      canvas.setWidth(parseInt(verticalSize))
-      canvas.setHeight(parseInt(horizontalSize));
+      canvas.setHeight(parseInt(horizontalSize))
-      canvas.renderAll();
+      canvas.renderAll()
     }
   }
 
@@ -93,6 +95,10 @@ export default function Roof2() {
     canvasSizeMode()
   }, [verticalSize, horizontalSize])
 
+  useEffect(() => {
+    console.log(`fontSize 바꼈다 ${fontSize}`)
+  }, [fontSize])
+
   return (
     <>
       {canvas && (
@@ -233,7 +239,7 @@ export default function Roof2() {
             </div>
             <div className="m-2 p-2 w-80">
               <RangeSlider
-                title="글자 크기"
+                title={`글자 크기${fontSize}`}
                 initValue={fontSize}
                 onchange={setFontSize}
               />

src/components/fabric/QPolygon.js

@@ -60,22 +60,18 @@ export default class QPolygon extends fabric.Polygon {
     const scaleX = this.scaleX
     const scaleY = this.scaleY
 
-    const points = this.getCurrentPoints()
+    const points = this.points
 
     for (let i = 0; i < points.length; i++) {
-      const start = this.getCurrentPoints()[i]
+      const start = points[i]
-      const currentStart = this.getCurrentPoints()[i]
+      const end = points[(i + 1) % points.length]
-      const end =
-        this.getCurrentPoints()[(i + 1) % this.getCurrentPoints().length]
-      const currentEnd =
-        this.getCurrentPoints()[(i + 1) % this.getCurrentPoints().length]
       const dx = end.x - start.x
       const dy = end.y - start.y
       const length = Math.sqrt(dx * dx + dy * dy)
 
       const midPoint = new fabric.Point(
-        (currentStart.x + currentEnd.x) / 2,
+        (start.x + end.x) / 2,
-        (currentStart.y + currentEnd.y) / 2,
+        (start.y + end.y) / 2,
       )
 
       const text = new fabric.Text(length.toFixed(0), {

src/store/canvasAtom.js

@@ -4,3 +4,8 @@ export const textState = atom({
   key: 'textState',
   default: 'test text',
 })
+
+export const fontSizeState = atom({
+  key: 'fontSizeState',
+  default: 10,
+})