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

src/hooks/useMode.js

@@ -58,6 +58,7 @@ export function useMode() {
 
   const [selectedCellRoofArray, setSelectedCellRoofArray] = useState([])
   const [drewRoofCells, setDrewRoofCells] = useRecoilState(drewRoofCellsState)
+  const [roofStyle, setRoofStyle] = useState(1) //기본 지붕 패턴
 
   useEffect(() => {
     // 이벤트 리스너 추가
@@ -2331,8 +2332,6 @@ export function useMode() {
       let tmpArray = []
       let tmpBigArray = []
 
-      console.log('tmpVertCenterLine', tmpVertCenterLine)
-
       const lastCenterLine = tmpVertCenterLine[tmpVertCenterLine.length - 1] //마지막 센터라인을 정의
 
       for (let i = 0; i < tmpVertCenterLine.length - 1; i++) {
@@ -2407,8 +2406,6 @@ export function useMode() {
         }
       }
 
-      console.log('roofPatternPolygonArray', roofPatternPolygonArray)
-
       setRoofPolygonPattern({ roofPatternPolygonArray, lines })
     } else {
       // 오목한 부분이 세로선일때 아래ㄷ, 위ㄷ
@@ -3131,23 +3128,7 @@ export function useMode() {
     canvas?.renderAll()
   }
 
-  /**
-   * 지붕 패턴 생성 로직
-   * @param roofStyle
-   */
-  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)
-    })
-
+  const getRoofPattern = (roofStyle, mode = 'normal') => {
     const ratio = window.devicePixelRatio || 1
 
     const inputPatternSize = { width: 30, height: 20 } //임시 사이즈
@@ -3166,6 +3147,12 @@ export function useMode() {
 
     // 벽돌 패턴 그리기
     ctx.scale(ratio, ratio)
+
+    if (mode === 'cell') {
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'
+      ctx.fillRect(0, 0, patternSize.width * 2, patternSize.height * 2)
+    }
+
     ctx.strokeStyle = 'green'
     ctx.lineWidth = 0.4
 
@@ -3193,6 +3180,30 @@ export function useMode() {
       repeat: 'repeat',
     })
 
+    return pattern
+  }
+
+  /**
+   * 지붕 패턴 생성 로직
+   * @param roofStyle
+   */
+  const makeRoofPatternPolygon = (roofStyle) => {
+    if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) {
+      alert('객체가 비어있습니다.')
+      return
+    }
+
+    setRoofStyle(roofStyle) //클릭한 지붕패턴을 저장
+
+    //내부 선 점선으로 변경 추후에 다시 되돌리는 로직 필요
+    roofPolygonPattern.lines.forEach((line, index) => {
+      line.line.set('strokeDashArray', [10, 5, 2, 5])
+      line.line.set('stroke', 'blue')
+      line.line.set('strokeWidth', 1)
+    })
+
+    const pattern = getRoofPattern(roofStyle)
+
     const commonOption = {
       fill: pattern,
       selectable: false,
@@ -3275,6 +3286,8 @@ export function useMode() {
       canvas?.renderAll()
     }
 
+    const pattern = getRoofPattern(roofStyle, 'cell')
+
     // 외각선을 안쪽으로 그려 가대선을 그린다.
     polygons.forEach((polygon, index) => {
       const trestlePolygon = handleOuterlinesTest(polygon, -12)
@@ -3299,9 +3312,15 @@ export function useMode() {
       trestlePolygon.on('mousedown', function () {
         toggleSelection(trestlePolygon)
       })
+
+      console.log('polygon', polygon)
+
+      polygon.set({ fill: pattern })
     })
 
     setSelectedCellRoofArray(selectedAreaArray)
+    canvas?.renderAll()
+    setMode(Mode.DEFAULT) //default 모드로 변경
   }
 
   /**