방향 변수명 수정

src/components/fabric/QPolygon.js

@@ -19,7 +19,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   innerLines: [],
   children: [],
   initOptions: null,
-  defense: null,
+  direction: null,
   initialize: function (points, options, canvas) {
     // 소수점 전부 제거
     points.forEach((point) => {

src/components/ui/SurfaceShape.jsx

@@ -28,7 +28,8 @@ export const SurfaceShapeModal = ({ canvas }) => {
   const [length4, setLength4] = useState(0)
   const [length5, setLength5] = useState(0)
 
-  const [defense, setDefense] = useState('south')
+  // 방향
+  const [direction, setDirection] = useState('south')
 
   /**
    * 최대 5개의 length
@@ -630,7 +631,7 @@ export const SurfaceShapeModal = ({ canvas }) => {
       }
 
       canvas?.add(obj)
-      obj.set({ defense: defense })
+      obj.set({ direction: direction })
       setCurrentPattern(obj)
       canvas?.renderAll()
     })
@@ -848,30 +849,30 @@ export const SurfaceShapeModal = ({ canvas }) => {
       <div className="flex flex-col items-center">
         <div className="flex">
           <Button
-            className={`p-4 border rounded-lg ${defense === 'north' ? 'bg-blue-200' : ''} flex items-center justify-center`}
-            onClick={() => setDefense('north')}
+            className={`p-4 border rounded-lg ${direction === 'north' ? 'bg-blue-200' : ''} flex items-center justify-center`}
+            onClick={() => setDirection('north')}
           >
             북
           </Button>
         </div>
         <div className="flex space-x-4">
           <Button
-            className={`p-4 border rounded-lg ${defense === 'west' ? 'bg-blue-200' : ''} flex items-center justify-center`}
-            onClick={() => setDefense('west')}
+            className={`p-4 border rounded-lg ${direction === 'west' ? 'bg-blue-200' : ''} flex items-center justify-center`}
+            onClick={() => setDirection('west')}
           >
             서
           </Button>
           <Button
-            className={`p-4 border rounded-lg ${defense === 'east' ? 'bg-blue-200' : ''} flex items-center justify-center`}
-            onClick={() => setDefense('east')}
+            className={`p-4 border rounded-lg ${direction === 'east' ? 'bg-blue-200' : ''} flex items-center justify-center`}
+            onClick={() => setDirection('east')}
           >
             동
           </Button>
         </div>
         <div className="mt-4">
           <Button
-            className={`p-4 border rounded-lg ${defense === 'south' ? 'bg-blue-200' : ''} flex items-center justify-center`}
-            onClick={() => setDefense('south')}
+            className={`p-4 border rounded-lg ${direction === 'south' ? 'bg-blue-200' : ''} flex items-center justify-center`}
+            onClick={() => setDirection('south')}
           >
             남
           </Button>

src/hooks/useCanvas.js

@@ -428,7 +428,6 @@ export function useCanvas(id) {
       'minY',
       'x',
       'y',
-      'defense',
     ])
 
     const str = JSON.stringify(objs)