Merge branch 'feature/test' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into feature/hj

# Conflicts:
#	src/components/Roof2.jsx
#	src/hooks/useMode.js
#	src/store/canvasAtom.js
#	src/util/canvas-util.js

src/components/Roof2.jsx

@@ -31,11 +31,19 @@ export default function Roof2() {
 
   const [showControl, setShowControl] = useState(false)
 
-  const [canvasIdx, setCanvasIdx] = useState(0)
+  const {
-  const canvasList = useRecoilValue(canvasListState)
+    mode,
-
+    changeMode,
-  const { mode, changeMode, handleClear, fillCellInPolygon, zoomIn, zoomOut, zoom, togglePolygonLine, handleOuterlinesTest2, applyTemplateB } =
+    handleClear,
-    useMode()
+    fillCellInPolygon,
+    zoomIn,
+    zoomOut,
+    zoom,
+    togglePolygonLine,
+    handleOuterlinesTest2,
+    applyTemplateB,
+    makeRoofPatternPolygon,
+  } = useMode()
 
   // const [canvasState, setCanvasState] = useRecoilState(canvasAtom)
 
@@ -330,10 +338,8 @@ export default function Roof2() {
     setShowControl(!showControl)
   }
 
-  const nextCanvas = () => {
+  const drawRoofPatterns = (roofStyle) => {
-    const nextCanvasNumber = canvasIdx < canvasList.length - 1 ? canvasIdx + 1 : 0
+    makeRoofPatternPolygon(roofStyle)
-    setCanvasIdx(nextCanvasNumber)
-    changeCanvas(nextCanvasNumber)
   }
 
   return (
@@ -363,6 +369,12 @@ export default function Roof2() {
             <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.PATTERNB)}>
               템플릿(B 패턴)
             </Button>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(1)}>
+              지붕패턴1
+            </Button>
+            <Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(2)}>
+              지붕패턴2
+            </Button>
             <Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEXTBOX)}>
               텍스트박스 모드
             </Button>

src/hooks/useCanvas.js

@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from 'react'
 import { fabric } from 'fabric'
-import { actionHandler, anchorWrapper, getDirectionByPoint, polygonPositionHandler, sortedPoints } from '@/util/canvas-util'
+import { actionHandler, anchorWrapper, polygonPositionHandler } from '@/util/canvas-util'
 
 import { useRecoilState } from 'recoil'
-import { canvasListState, canvasSizeState, fontSizeState } from '@/store/canvasAtom'
+import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
 import QPolygon from '@/components/fabric/QPolygon'
 import { QLine } from '@/components/fabric/QLine'
 import QRect from '@/components/fabric/QRect'
@@ -16,8 +16,6 @@ export function useCanvas(id) {
   const [fontSize] = useRecoilState(fontSizeState)
   const points = useRef([])
 
-  const [canvasList, setCanvasList] = useRecoilState(canvasListState)
-
   /**
    * 처음 셋팅
    */

src/hooks/useMode.js

@@ -3,7 +3,8 @@ import QRect from '@/components/fabric/QRect'
 import QPolygon from '@/components/fabric/QPolygon'
 import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util'
 import { useRecoilState } from 'recoil'
-import { fontSizeState, roofState, sortedPolygonArray, wallState } from '@/store/canvasAtom'
+
+import { fontSizeState, roofState, sortedPolygonArray, roofPolygonPatternArrayState, wallState } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 
 export const Mode = {
@@ -14,6 +15,7 @@ export const Mode = {
   PATTERNB: 'patternb',
   TEXTBOX: 'textbox',
   DRAW_RECT: 'drawRect',
+  ROOF_PATTERN: 'roofPattern',
   DEFAULT: 'default',
 }
 
@@ -30,6 +32,8 @@ export function useMode() {
   const [roof, setRoof] = useRecoilState(roofState)
   const [wall, setWall] = useRecoilState(wallState)
 
+  const [roofPolygonPattern, setRoofPolygonPattern] = useRecoilState(roofPolygonPatternArrayState)
+
   const addEvent = (mode) => {
     switch (mode) {
       case 'default':
@@ -56,6 +60,9 @@ export function useMode() {
       case 'drawRect':
         drawRectMode()
         break
+      case 'roofPattern':
+        makeRoofPatternPolygon()
+        break
     }
   }
 
@@ -1242,37 +1249,33 @@ export function useMode() {
           centerLineOpt,
         )
         canvas.add(drawLastInLine1)
-        outLines.push(drawLastInLine1)
 
         let drawLastInLine2 = new QLine([secondVertCenterLine.x1, vertCenterLine.y2, vertCenterLine.x2, vertCenterLine.y2], centerLineOpt)
         canvas.add(drawLastInLine2)
-        outLines.push(drawLastInLine2)
 
-        console.log('outLines', outLines)
+        const bigRoofPolygon = [
-
-        const bigPolygonArray = [
           { x: outLines[2].x1, y: outLines[2].y1 },
-          { x: outLines[5].x1, y: outLines[5].y1 },
+          { x: outLines[2].x2, y: outLines[2].y2 },
           { x: outLines[0].x1, y: outLines[0].y1 },
           { x: outLines[0].x2, y: outLines[0].y2 },
-          { x: outLines[11].x1, y: outLines[11].y1 },
+          { x: outLines[1].x2, y: outLines[0].y2 },
           { x: outLines[1].x2, y: outLines[1].y2 },
         ]
 
-        // 점 배열을 사용하여 새로운 다각형 객체를 생성합니다.
+        const middleRoofPolygon = [
-        const bigPolygon = new QPolygon(
+          { x: outLines[0].x2, y: outLines[0].y2 },
-          bigPolygonArray,
+          { x: outLines[0].x1, y: outLines[0].y1 },
-          {
+          { x: outLines[3].x2, y: outLines[3].y2 },
-            stroke: 'black',
+          { x: outLines[3].x1, y: outLines[3].y1 },
-            fill: 'red',
+        ]
-            viewLengthText: true,
-            selectable: true,
-            fontSize: fontSize,
-          },
-          canvas,
-        )
 
-        canvas.add(bigPolygon)
+        const smallRoofPolygon = [
+          { x: outLines[1].x2, y: outLines[1].y2 },
+          { x: outLines[1].x1, y: outLines[1].y1 },
+          { x: outLines[4].x2, y: outLines[4].y2 },
+          { x: outLines[4].x1, y: outLines[4].y1 },
+        ]
+        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       } else {
         //아래쪽 길게 오른쪽 방향
         //배열 순서대로 뒤에꺼를 찾아서 계산한다
@@ -1297,6 +1300,7 @@ export function useMode() {
           centerLineOpt,
         )
         canvas.add(vertCenterLine)
+        outLines.push(vertCenterLine)
 
         //긴면 가로선 그리기
         let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2
@@ -1320,8 +1324,8 @@ export function useMode() {
         //작은 지붕쪽 높이 길이를 구하는 로직
         let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2
         secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1 - edge, secondVertCenterPoint, middleSubLine.y2], centerLineOpt)
-
         canvas.add(secondVertCenterLine)
+        outLines.push(secondVertCenterLine)
 
         //작은 지붕쪽 너비 길이를 구한는 로직
         let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2
@@ -1345,6 +1349,7 @@ export function useMode() {
           }
           let drawline = new QLine(points, centerLineOpt)
           canvas.add(drawline)
+          outLines.push(drawline)
         })
 
         //케라바 라인 외각선 그리기
@@ -1359,6 +1364,7 @@ export function useMode() {
           centerLineOpt,
         )
         canvas.add(drawFirstLine1)
+        outLines.push(drawFirstLine1)
 
         //첫번째 외곽선 2번
         let drawFirstLine2 = new QLine(
@@ -1366,16 +1372,16 @@ export function useMode() {
           centerLineOpt,
         )
         canvas.add(drawFirstLine2)
+        outLines.push(drawFirstLine2)
 
         //중간라인 외각선
         let drawMiddleLine = new QLine([drawFirstLine1.x1, middleOuterLine.y1 - edge, drawFirstLine1.x2, middleOuterLine.y2 - edge], centerLineOpt)
         canvas.add(drawMiddleLine)
+        outLines.push(drawMiddleLine)
 
         //마지막 외각선
         halfLength = lastLine.length / 2
 
-        console.log(lastOuterLine)
-
         let drawLastLine1 = new QLine(
           [lastOuterLine.x2 - eaves, lastOuterLine.y1 - edge, lastOuterLine.x1 - halfLength, lastOuterLine.y2 - edge],
           centerLineOpt,
@@ -1396,6 +1402,30 @@ export function useMode() {
 
         let drawLastInLine2 = new QLine([secondVertCenterLine.x2, vertCenterLine.y1, vertCenterLine.x1, vertCenterLine.y1], centerLineOpt)
         canvas.add(drawLastInLine2)
+
+        const bigRoofPolygon = [
+          { x: outLines[0].x1, y: outLines[0].y1 },
+          { x: outLines[0].x2, y: outLines[0].y2 },
+          { x: outLines[3].x1, y: outLines[3].y1 },
+          { x: outLines[3].x2, y: outLines[3].y2 },
+          { x: outLines[1].x1, y: outLines[1].y1 },
+          { x: outLines[1].x2, y: outLines[0].y1 },
+        ]
+
+        const middleRoofPolygon = [
+          { x: outLines[2].x1, y: outLines[2].y1 },
+          { x: outLines[2].x2, y: outLines[2].y2 },
+          { x: outLines[0].x2, y: outLines[0].y2 },
+          { x: outLines[0].x1, y: outLines[0].y1 },
+        ]
+
+        const smallRoofPolygon = [
+          { x: outLines[4].x1, y: outLines[4].y1 },
+          { x: outLines[4].x2, y: outLines[4].y2 },
+          { x: outLines[1].x2, y: outLines[1].y2 },
+          { x: outLines[1].x1, y: outLines[1].y1 },
+        ]
+        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       }
     } else {
       if (horizontalDirection === 'left') {
@@ -1421,6 +1451,7 @@ export function useMode() {
           centerLineOpt,
         )
         canvas.add(vertCenterLine)
+        outLines.push(vertCenterLine)
 
         //긴면 가로선 그리기
         let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2
@@ -1445,6 +1476,7 @@ export function useMode() {
         let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2
         secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1 + edge, secondVertCenterPoint, middleSubLine.y2], centerLineOpt)
         canvas.add(secondVertCenterLine)
+        outLines.push(secondVertCenterLine)
 
         //작은 지붕쪽 너비 길이를 구한는 로직
         let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2
@@ -1468,6 +1500,7 @@ export function useMode() {
 
           let drawline = new QLine(points, centerLineOpt)
           canvas.add(drawline)
+          outLines.push(drawline)
         })
 
         //케라바 라인 외각선 그리기
@@ -1496,9 +1529,6 @@ export function useMode() {
 
         //마지막 외각선
         halfLength = lastLine.length / 2
-
-        console.log(lastOuterLine)
-
         let drawLastLine1 = new QLine(
           [lastOuterLine.x1 - eaves, lastOuterLine.y1 + edge, lastOuterLine.x1 + halfLength, lastOuterLine.y2 + edge],
           centerLineOpt,
@@ -1516,6 +1546,31 @@ export function useMode() {
 
         let drawLastInLine2 = new QLine([vertCenterLine.x1, vertCenterLine.y2, secondVertCenterLine.x2, vertCenterLine.y2], centerLineOpt)
         canvas.add(drawLastInLine2)
+
+        const bigRoofPolygon = [
+          { x: outLines[2].x1, y: outLines[2].y1 },
+          { x: outLines[2].x2, y: outLines[2].y2 },
+          { x: outLines[1].x1, y: outLines[1].y1 },
+          { x: outLines[1].x2, y: outLines[0].y2 },
+          { x: outLines[0].x1, y: outLines[0].y2 },
+          { x: outLines[0].x1, y: outLines[0].y1 },
+        ]
+
+        const middleRoofPolygon = [
+          { x: outLines[0].x1, y: outLines[0].y1 },
+          { x: outLines[0].x2, y: outLines[0].y2 },
+          { x: outLines[4].x2, y: outLines[4].y2 },
+          { x: outLines[4].x1, y: outLines[4].y1 },
+        ]
+
+        const smallRoofPolygon = [
+          { x: outLines[1].x2, y: outLines[1].y2 },
+          { x: outLines[1].x1, y: outLines[1].y1 },
+          { x: outLines[3].x2, y: outLines[3].y2 },
+          { x: outLines[3].x1, y: outLines[3].y1 },
+        ]
+
+        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       } else {
         //윗쪽 길게 오른쪽 방향
         //배열 순서대로 뒤에꺼를 찾아서 계산한다
@@ -1539,6 +1594,7 @@ export function useMode() {
           centerLineOpt,
         )
         canvas.add(vertCenterLine)
+        outLines.push(vertCenterLine)
 
         //긴면 가로선 그리기
         let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2
@@ -1569,7 +1625,7 @@ export function useMode() {
         })
 
         canvas.add(secondVertCenterLine)
-
+        outLines.push(secondVertCenterLine)
         //작은 지붕쪽 너비 길이를 구한는 로직
         let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2
         let secondHoriCenterPoint = (secondVertCenterLine.y1 + secondVertCenterLine.y2) / 2
@@ -1583,14 +1639,16 @@ export function useMode() {
         //일반라인 외각선 그리기
         normalIndexArray.forEach((index) => {
           const line = lines[index]
+          let drawline
           if (index === 0 || index === 2) {
             let tmpEdge = index === 2 ? 0 : edge
-            let drawline = new QLine([line.x1 - eaves, line.y1 - tmpEdge, line.x2 - eaves, line.y2 + edge], centerLineOpt)
+            drawline = new QLine([line.x1 - eaves, line.y1 - tmpEdge, line.x2 - eaves, line.y2 + edge], centerLineOpt)
             canvas.add(drawline)
           } else {
-            let drawline = new QLine([line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - edge], centerLineOpt)
+            drawline = new QLine([line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - edge], centerLineOpt)
             canvas.add(drawline)
           }
+          outLines.push(drawline)
         })
 
         //케라바 라인 외각선 그리기
@@ -1633,6 +1691,31 @@ export function useMode() {
 
         let drawLastInLine2 = new QLine([secondLine.x2 - eaves, secondLine.y1, drawLastLine1.x2, secondLine.y1], centerLineOpt)
         canvas.add(drawLastInLine2)
+
+        const bigRoofPolygon = [
+          { x: outLines[0].x1, y: outLines[0].y1 },
+          { x: outLines[0].x2, y: outLines[0].y2 },
+          { x: outLines[1].x1, y: outLines[0].y2 },
+          { x: outLines[1].x2, y: outLines[1].y2 },
+          { x: outLines[4].x1, y: outLines[4].y1 },
+          { x: outLines[4].x2, y: outLines[4].y2 },
+        ]
+
+        const middleRoofPolygon = [
+          { x: outLines[2].x1, y: outLines[2].y1 },
+          { x: outLines[2].x2, y: outLines[2].y2 },
+          { x: outLines[0].x2, y: outLines[0].y2 },
+          { x: outLines[0].x1, y: outLines[0].y1 },
+        ]
+
+        const smallRoofPolygon = [
+          { x: outLines[3].x1, y: outLines[3].y1 },
+          { x: outLines[3].x2, y: outLines[3].y2 },
+          { x: outLines[1].x2, y: outLines[1].y2 },
+          { x: outLines[1].x1, y: outLines[1].y1 },
+        ]
+
+        setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
       }
     }
 
@@ -2058,6 +2141,74 @@ export function useMode() {
     canvas.renderAll()
   }
 
+  const makeRoofPatternPolygon = (roofStyle) => {
+    if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) {
+      alert('객체가 비어있습니다.')
+      return
+    }
+
+    //내부 선 점선으로 변경
+    roofPolygonPattern.lines.forEach((line, index) => {
+      line.line.set('strokeDashArray', [10, 5, 2, 5])
+      line.line.set('stroke', 'blue')
+      line.line.set('strokeWidth', 1)
+    })
+
+    var ratio = window.devicePixelRatio || 1
+
+    // 패턴 소스를 위한 임시 캔버스 생성
+    const patternSourceCanvas = document.createElement('canvas')
+    patternSourceCanvas.width = 30 * ratio
+    patternSourceCanvas.height = 30 * ratio
+    const ctx = patternSourceCanvas.getContext('2d')
+
+    // 벽돌 패턴 그리기
+    ctx.scale(ratio, ratio)
+    ctx.strokeStyle = 'green'
+    ctx.lineWidth = 0.2
+
+    // 첫 번째 행 벽돌
+    if (roofStyle === 2) {
+      //지그재그
+      // // 두 번째 행 벽돌
+      ctx.strokeRect(0, 0, 30, 15)
+      ctx.strokeRect(30, 15, 30, 15)
+      ctx.strokeRect(-15, 15, 30, 15)
+      ctx.strokeRect(0, 30, 30, 15)
+    } else {
+      ctx.strokeRect(0, 0, 30, 30) // 원패턴일때랑 지그재그일때랑은 다르게 들어가야함
+    }
+
+    // 패턴 생성
+    const pattern = new fabric.Pattern({
+      source: patternSourceCanvas,
+      repeat: 'repeat',
+    })
+
+    const commonOption = {
+      fill: pattern,
+      selectable: false,
+      fontSize: 15, // fontSize는 필요에 따라 조정
+    }
+
+    const bigRoof = new QPolygon(roofPolygonPattern.bigRoofPolygon, commonOption)
+    const middleRoof = new QPolygon(roofPolygonPattern.middleRoofPolygon, commonOption)
+    const smallRoof = new QPolygon(roofPolygonPattern.smallRoofPolygon, commonOption)
+
+    bigRoof.setViewLengthText(false) //치수 필요없음
+    middleRoof.setViewLengthText(false)
+    smallRoof.setViewLengthText(false)
+
+    bigRoof.sendToBack() //객체를 가장 뒤로
+    middleRoof.sendToBack()
+    smallRoof.sendToBack()
+
+    canvas.add(bigRoof) //캔버스 객체 추가
+    canvas.add(middleRoof)
+    canvas.add(smallRoof)
+    canvas.renderAll()
+  }
+
   return {
     mode,
     changeMode,
@@ -2068,5 +2219,6 @@ export function useMode() {
     zoom,
     togglePolygonLine,
     handleOuterlinesTest2,
+    makeRoofPatternPolygon,
   }
 }

src/store/canvasAtom.js

@@ -36,7 +36,8 @@ export const wallState = atom({
   dangerouslyAllowMutability: true,
 })
 
-export const canvasListState = atom({
+export const roofPolygonPatternArrayState = atom({
-  key: 'canvas',
+  key: 'roofPolygonPattern',
-  default: [], //object ex) big, mid, sht = {point : [{x1, y1}, {x2, y1}], direction : left or right or top or bottom}
+  default: {}, //object ex) big, mid, sht = {point : [{x1, y1}, {x2, y1}], direction : left or right or top or bottom}
+  dangerouslyAllowMutability: true,
 })

src/util/canvas-util.js

@@ -427,58 +427,8 @@ export const sortedPoints = (points) => {
   const copyPoints = [...points]
   //points를 x,y좌표를 기준으로 정렬합니다.
 
-  copyPoints.sort((a, b) => {
+  const idx = getStartIndexPoint(copyPoints)
-    if (a.x === b.x) {
+  return rearrangeArray(copyPoints, idx)
-      return a.y - b.y
-    }
-    return a.x - b.x
-  })
-
-  // 이때 copyPoints를 순회하며 최초엔 x값을 비교하여 같은 점을 찾는다. 이때 이 점이 2번째 점이 된다.
-  // 그 다음점은 2번째 점과 y값이 같은 점이 된다.
-  // 또 그다음 점은 3번째 점과 x값이 같은 점이 된다.
-  // 이를 반복하여 copyPoints를 재배열한다.
-  const resultPoints = [copyPoints[0]]
-  let index = 1
-  let currentPoint = { ...copyPoints[0] }
-  copyPoints.splice(0, 1)
-
-  while (index < points.length) {
-    if (index === points.length - 1) {
-      resultPoints.push(copyPoints[0])
-      index++
-      break
-    } else if (index % 2 === 0) {
-      // 짝수번째는 y값이 같은 점을 찾는다.
-      for (let i = 0; i < copyPoints.length; i++) {
-        // y값이 같은 point가 많은 경우 그 중 x값이 가장 큰걸 찾는다.
-        const temp = copyPoints.filter((point) => point.y === currentPoint.y)
-        // temp중 x값이 가장 큰 값
-        const min = temp.reduce((prev, current) => (prev.x <= current.x ? prev : current))
-        resultPoints.push(min)
-        currentPoint = min
-        copyPoints.splice(copyPoints.indexOf(min), 1)
-        index++
-        break
-      }
-    } else {
-      // 홀수번째는 x값이 같은 점을 찾는다.
-      for (let i = 0; i < copyPoints.length; i++) {
-        // x값이 같은 point가 많은 경우 그 중 y값이 가장 큰걸 찾는다.
-        const temp = copyPoints.filter((point) => point.x === currentPoint.x)
-        // temp중 y값이 가장 큰 값
-        const min = temp.reduce((prev, current) => (prev.y >= current.y ? prev : current))
-
-        resultPoints.push(min)
-        currentPoint = min
-        copyPoints.splice(copyPoints.indexOf(min), 1)
-        index++
-        break
-      }
-    }
-  }
-
-  return resultPoints
 }
 
 /**