리코일 적용 및 캔버스 사이즈 기본 값 변경

src/components/Roof2.jsx

@@ -6,16 +6,19 @@ 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'
+import { fontSizeState, canvasSizeState } from '@/store/canvasAtom'
 
 export default function Roof2() {
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots } =
     useCanvas('canvas')
 
+  //canvas 기본 사이즈
+  const [canvasSize, setCanvasSize] = useRecoilState(canvasSizeState)
+
   //canvas 가로 사이즈
-  const [verticalSize, setVerticalSize] = useState(1000)
+  const [verticalSize, setVerticalSize] = useState(canvasSize.vertical)
   //canvas 세로 사이즈
-  const [horizontalSize, setHorizontalSize] = useState(1000)
+  const [horizontalSize, setHorizontalSize] = useState(canvasSize.horizontal)
   // 글자크기
   const [fontSize, setFontSize] = useRecoilState(fontSizeState)
 
@@ -83,14 +86,25 @@ export default function Roof2() {
     }
   }
 
+  /**
+   * canvas 사이즈 변경 함수
+   */
   const canvasSizeMode = () => {
     if (canvas) {
-      canvas.setWidth(parseInt(verticalSize))
+      canvas.setWidth(horizontalSize)
-      canvas.setHeight(parseInt(horizontalSize))
+      canvas.setHeight(verticalSize)
       canvas.renderAll()
+
+      setCanvasSize(() => ({
+        vertical: verticalSize,
+        horizontal: horizontalSize
+      }))
     }
   }
-
+  
+  /**
+   * 값 변경시
+   */
   useEffect(() => {
     canvasSizeMode()
   }, [verticalSize, horizontalSize])
@@ -222,19 +236,21 @@ export default function Roof2() {
             <div className="m-2 p-2 w-80">
               <RangeSlider
                 title="canvas 가로 사이즈"
-                initValue={verticalSize}
+                initValue={horizontalSize}
+                min="500"
                 step="100"
                 max="2000"
-                onchange={setVerticalSize}
+                onchange={setHorizontalSize}
               />
             </div>
             <div className="m-2 p-2 w-80">
               <RangeSlider
                 title="canvas 세로 사이즈"
-                initValue={horizontalSize}
+                initValue={verticalSize}
+                min="500"
                 step="100"
                 max="2000"
-                onchange={setHorizontalSize}
+                onchange={setVerticalSize}
               />
             </div>
             <div className="m-2 p-2 w-80">

src/hooks/useCanvas.js

@@ -6,16 +6,15 @@ import {
   polygonPositionHandler,
 } from '@/app/util/canvas-util'
 
-const CANVAS = {
+import { useRecoilState } from 'recoil'
-  WIDTH: 1000,
+import { canvasSizeState } from '@/store/canvasAtom'
-  HEIGHT: 1000,
+
-}
 
 export function useCanvas(id) {
   const [canvas, setCanvas] = useState()
   const [isLocked, setIsLocked] = useState(false)
   const [history, setHistory] = useState([])
-
+  const [canvasSize] = useRecoilState(canvasSizeState)
   const points = useRef([])
 
   /**
@@ -23,8 +22,8 @@ export function useCanvas(id) {
    */
   useEffect(() => {
     const c = new fabric.Canvas(id, {
-      height: CANVAS.HEIGHT,
+      height: canvasSize.vertical,
-      width: CANVAS.WIDTH,
+      width: canvasSize.horizontal,
       backgroundColor: 'white',
       selection: false,
     })

src/store/canvasAtom.js

@@ -9,3 +9,11 @@ export const fontSizeState = atom({
   key: 'fontSizeState',
   default: 10,
 })
+
+export const canvasSizeState = atom({
+  key: 'canvasSize',
+  default: {
+    vertical: 500,
+    horizontal : 500
+  }
+})