이전 line의 direction이 같은 경우 merge, 선택한 도형 회전 추가

src/components/Roof2.jsx

@@ -28,6 +28,8 @@ export default function Roof2() {
   // 글자크기
   const [fontSize, setFontSize] = useRecoilState(fontSizeState)
 
+  const [angle, setAngle] = useState(0)
+
   const {
     mode,
     changeMode,
@@ -123,7 +125,7 @@ export default function Roof2() {
 
   const makeQPolygon = () => {
     if (canvas) {
-      const polygon2 = new QPolygon(
+      const polygon = new QPolygon(
         [
           { x: 100, y: 100 },
           { x: 800, y: 100 },
@@ -142,8 +144,18 @@ export default function Roof2() {
         canvas, // 필수로 넣어줘야 함
       )
 
-      canvas?.add(polygon2)
-      console.log(polygon2)
+      canvas?.add(polygon)
+    }
+  }
+
+  const rotateShape = () => {
+    if (canvas) {
+      const activeObject = canvas?.getActiveObject()
+
+      if (activeObject) {
+        activeObject.rotate(angle)
+        canvas?.renderAll()
+      }
     }
   }
 
@@ -279,8 +291,24 @@ export default function Roof2() {
             >
               QPolygon
             </button>
+            <button
+              className="w-30 mx-2 p-2 rounded bg-gray-500 text-white"
+              onClick={rotateShape}
+            >
+              회전
+            </button>
           </div>
           <div className="flex justify-center flex-col items-center">
+            <div className="m-2 p-2 w-80">
+              <RangeSlider
+                title={`각도${angle}`}
+                initValue={angle}
+                min="0"
+                step="1"
+                max="360"
+                onchange={setAngle}
+              />
+            </div>
             <div className="m-2 p-2 w-80">
               <RangeSlider
                 title={`canvas 가로 사이즈${horizontalSize}`}

src/hooks/useMode.js

@@ -160,7 +160,8 @@ export function useMode() {
             },
           )
 
-          historyLines.current.push(line)
+          pushHistoryLine(line)
+
           // 라인의 끝에 점을 추가합니다.
           const endPointCircle = new fabric.Circle({
             radius: 1,
@@ -173,7 +174,6 @@ export function useMode() {
             selectable: false,
           })
 
-          canvas?.add(line)
           canvas?.add(endPointCircle)
 
           historyPoints.current.push(endPointCircle)
@@ -189,6 +189,36 @@ export function useMode() {
     })
   }
 
+  const pushHistoryLine = (line) => {
+    if (
+      historyLines.current.length > 0 &&
+      historyLines.current[historyLines.current.length - 1].direction ===
+        line.direction
+    ) {
+      // 같은 방향의 선이 두 번 연속으로 그려지면 이전 선을 제거하고, 새로운 선과 merge한다.
+
+      const lastLine = historyLines.current.pop()
+      canvas?.remove(lastLine)
+
+      const mergedLine = new QLine(
+        [lastLine.x1, lastLine.y1, line.x2, line.y2],
+        {
+          stroke: 'black',
+          strokeWidth: 2,
+          selectable: false,
+          viewLengthText: true,
+          direction: lastLine.direction,
+          fontSize: fontSize,
+        },
+      )
+      historyLines.current.push(mergedLine)
+      canvas?.add(mergedLine)
+    } else {
+      historyLines.current.push(line)
+      canvas?.add(line)
+    }
+  }
+
   const templateMode = () => {
     changeMode(canvas, Mode.EDIT)
 
@@ -343,9 +373,8 @@ export function useMode() {
       direction: getDirection(a, b),
       fontSize: fontSize,
     })
-    historyLines.current.push(line)
+    pushHistoryLine(line)
 
-    canvas?.add(line)
     canvas?.renderAll()
   }
 

src/store/canvasAtom.js

@@ -7,7 +7,7 @@ export const textState = atom({
 
 export const fontSizeState = atom({
   key: 'fontSizeState',
-  default: 10,
+  default: 16,
 })
 
 export const canvasSizeState = atom({