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

src/components/community/ArchiveTable.jsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useContext } from 'react'
 import { useRecoilState } from 'recoil'
 import { useAxios } from '@/hooks/useAxios'
 
@@ -9,7 +9,12 @@ import { useMessage } from '@/hooks/useMessage'
 
 import { handleFileDown } from '@/util/board-utils'
 
+import { QcastContext } from '@/app/QcastProvider'
+
 export default function ArchiveTable({ clsCode }) {
+  // global 로딩바
+  const { setIsGlobalLoading } = useContext(QcastContext)
+
   const { getMessage } = useMessage()
 
   // api 조회 관련
@@ -20,6 +25,7 @@ export default function ArchiveTable({ clsCode }) {
   // 목록 조회
   useEffect(() => {
     async function fetchData() {
+      setIsGlobalLoading(true)
       const url = `/api/board/list`
       const params = new URLSearchParams({
         schNoticeTpCd: 'QC',
@@ -42,6 +48,7 @@ export default function ArchiveTable({ clsCode }) {
           alert(resultData.result.message)
         }
       }
+      setIsGlobalLoading(false)
     }
 
     fetchData()

src/components/community/Table.jsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useContext } from 'react'
 import { useRecoilState } from 'recoil'
 
 import { searchState } from '@/store/boardAtom'
@@ -10,7 +10,12 @@ import { useMessage } from '@/hooks/useMessage'
 
 import BoardDetailModal from '../community/modal/BoardDetailModal'
 
+import { QcastContext } from '@/app/QcastProvider'
+
 export default function Table({ clsCode }) {
+  // global 로딩바
+  const { setIsGlobalLoading } = useContext(QcastContext)
+
   const { getMessage } = useMessage()
 
   // api 조회 관련
@@ -25,6 +30,7 @@ export default function Table({ clsCode }) {
   // 목록 조회
   useEffect(() => {
     async function fetchData() {
+      setIsGlobalLoading(true)
       const startRow = (search.currentPage - 1) * search.pageBlock > 0 ? (search.currentPage - 1) * search.pageBlock + 1 : 1
       const endRow = search.currentPage * search.pageBlock
 
@@ -53,6 +59,7 @@ export default function Table({ clsCode }) {
           alert(resultData.result.message)
         }
       }
+      setIsGlobalLoading(false)
     }
 
     fetchData()

src/components/fabric/QLine.js

@@ -153,4 +153,13 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     }
     return this
   },
+
+  setLengthText(text) {
+    const thisText = this.canvas.getObjects().find((obj) => obj.name === 'lengthText' && obj.parentId === this.id)
+    if (thisText) {
+      thisText.set({ text: text.toString() })
+      this.canvas.renderAll()
+    }
+    return this
+  },
 })

src/util/qpolygon-utils.js

@@ -305,14 +305,14 @@ export const drawGabledRoof = (roofId, canvas) => {
     return
   }
 
-  const roofPoints = roof.points
+  // const roofPoints = roof.points
-  const minX = Math.min(...roofPoints.map((point) => point.x))
+  // const minX = Math.min(...roofPoints.map((point) => point.x))
-  const maxX = Math.max(...roofPoints.map((point) => point.x))
+  // const maxX = Math.max(...roofPoints.map((point) => point.x))
-  const minY = Math.min(...roofPoints.map((point) => point.y))
+  // const minY = Math.min(...roofPoints.map((point) => point.y))
-  const maxY = Math.max(...roofPoints.map((point) => point.y))
+  // const maxY = Math.max(...roofPoints.map((point) => point.y))
 
   // 맞은편 라인을 찾기 위해 현재 polygon 으로 만들수 있는 최대한의 길이를 구한다.
-  const checkLength = Math.abs(Math.sqrt(Math.pow(maxX - minX, 2) + Math.pow(maxY - minY, 2)))
+  // const checkLength = Math.abs(Math.sqrt(Math.pow(maxX - minX, 2) + Math.pow(maxY - minY, 2)))
 
   // 처마라인의 기본속성 입력
   const eaves = []
@@ -324,7 +324,7 @@ export const drawGabledRoof = (roofId, canvas) => {
   const ridges = []
   eaves.sort((a, b) => a.length - b.length)
 
-  eaves.forEach((eave, i) => {
+  eaves.forEach((eave) => {
     const index = eave.index,
       currentRoof = eave.roof
     const currentWall = wallLines[index]
@@ -390,7 +390,7 @@ export const drawGabledRoof = (roofId, canvas) => {
     })
   })
   // 처마마다 지붕 polygon 을 그린다.
-  eaves.forEach((eave, i) => {
+  eaves.forEach((eave) => {
     const index = eave.index,
       currentRoof = eave.roof
     const currentWall = wallLines[index]
@@ -574,6 +574,52 @@ export const drawGabledRoof = (roofId, canvas) => {
   }
   //기준선 제거
   // ridges.forEach((ridge) => canvas.remove(ridge))
+
+  eaves.forEach((eave) => {
+    const currentRoof = eave.roof
+    let currentRidges = ridges.filter((ridge) => ridge.attributes.currentRoof.includes(currentRoof.id))
+    if (Math.sign(currentRoof.x1 - currentRoof.x2) === 0) {
+      currentRidges = currentRidges.reduce((farthest, ridge) => {
+        const currentDistance = Math.abs(ridge.x1 - currentRoof.x1)
+        const farthestDistance = farthest ? Math.abs(farthest.x1 - currentRoof.x1) : 0
+        return currentDistance > farthestDistance ? ridge : farthest
+      }, null)
+    } else {
+      currentRidges = currentRidges.reduce((farthest, ridge) => {
+        const currentDistance = Math.abs(ridge.y1 - currentRoof.y1)
+        const farthestDistance = farthest ? Math.abs(farthest.y1 - currentRoof.y1) : 0
+        return currentDistance > farthestDistance ? ridge : farthest
+      }, null)
+    }
+    if (currentRidges) {
+      const ridgeMidX = (currentRidges.x1 + currentRidges.x2) / 2
+      const ridgeMidY = (currentRidges.y1 + currentRidges.y2) / 2
+      const x2 = Math.sign(currentRidges.x1 - currentRidges.x2) === 0 ? currentRoof.x1 : ridgeMidX
+      const y2 = Math.sign(currentRidges.x1 - currentRidges.x2) === 0 ? ridgeMidY : currentRoof.y1
+
+      const centerLine = new QLine([ridgeMidX, ridgeMidY, x2, y2], {
+        stroke: '#000000',
+        strokeWidth: 2,
+        strokeDashArray: [5, 5],
+        selectable: false,
+        fontSize: roof.fontSize,
+        attributes: {
+          roofId: roof.id,
+          type: 'pitchSizeLine',
+        },
+      })
+      const adjust = Math.sqrt(
+        Math.pow(Math.round(Math.abs(centerLine.x1 - centerLine.x2) * 10), 2) + Math.pow(Math.round(Math.abs(centerLine.y1 - centerLine.y2) * 10), 2),
+      )
+      const currentDegree = currentRoof.attributes.pitch > 0 ? getDegreeByChon(currentRoof.attributes.pitch) : currentRoof.attributes.degree
+      const height = Math.tan(currentDegree * (Math.PI / 180)) * adjust
+      const lengthText = Math.round(Math.sqrt(Math.pow(adjust, 2) + Math.pow(height, 2)))
+      canvas.add(centerLine)
+      canvas.renderAll()
+      centerLine.setLengthText(lengthText)
+      roof.innerLines.push(centerLine)
+    }
+  })
 }
 
 /**
@@ -583,14 +629,15 @@ export const drawGabledRoof = (roofId, canvas) => {
  */
 export const drawShedRoof = (roofId, canvas) => {
   const roof = canvas?.getObjects().find((object) => object.id === roofId)
-  const hasNonParallelLines = roof.lines.filter((line) => line.x1 !== line.x2 && line.y1 !== line.y2)
+  const hasNonParallelLines = roof.lines.filter((line) => Math.abs(line.x1 - line.x2) > 1 && Math.abs(line.y1 - line.y2) > 1)
   if (hasNonParallelLines.length > 0) {
     alert('대각선이 존재합니다.')
     return
   }
 
-  const sheds = roof.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.SHED)
+  const sheds = roof.lines.filter((line) => line.attributes?.type === LINE_TYPE.WALLLINE.SHED)
-  const gables = roof.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.GABLE)
+  const gables = roof.lines.filter((line) => line.attributes?.type === LINE_TYPE.WALLLINE.GABLE)
+  const eaves = roof.lines.filter((line) => line.attributes?.type === LINE_TYPE.WALLLINE.EAVES)
 
   let shedDegree = sheds[0].attributes.degree || 0
   const shedChon = sheds[0].attributes.pitch || 0
@@ -607,6 +654,60 @@ export const drawShedRoof = (roofId, canvas) => {
     const height = getHeight(adjust, shedDegree)
     gable.attributes.actualSize = Math.round(Math.sqrt(Math.pow(adjust, 2) + Math.pow(height, 2)))
   })
+
+  const pitchSizeLines = []
+
+  sheds.forEach((shed) => {
+    let points = []
+    let x1, y1, x2, y2
+    const signX = Math.sign(shed.x1 - shed.x2)
+    if (signX !== 0) {
+      points.push(shed.x1, shed.x2)
+      y1 = shed.y1
+    } else {
+      points.push(shed.y1, shed.y2)
+      x1 = shed.x1
+    }
+    eaves.forEach((eave) => {
+      if (signX !== 0) {
+        points.push(eave.x1, eave.x2)
+        points.sort((a, b) => a - b)
+        x1 = (points[1] + points[2]) / 2
+        x2 = (points[1] + points[2]) / 2
+        y2 = eave.y1
+      } else {
+        points.push(eave.y1, eave.y2)
+        points.sort((a, b) => a - b)
+        y1 = (points[1] + points[2]) / 2
+        y2 = (points[1] + points[2]) / 2
+        x2 = eave.x1
+      }
+      points.sort((a, b) => a - b)
+      const line = new QLine([x1, y1, x2, y2], {
+        stroke: '#000000',
+        strokeWidth: 2,
+        strokeDashArray: [5, 5],
+        selectable: false,
+        fontSize: roof.fontSize,
+        attributes: {
+          roofId: roof.id,
+          type: 'pitchSizeLine',
+        },
+      })
+      pitchSizeLines.push(line)
+    })
+  })
+
+  const maxLine = pitchSizeLines.reduce((prev, current) => (prev.length > current.length ? prev : current), pitchSizeLines[0])
+  canvas.add(maxLine)
+  canvas.renderAll()
+
+  const adjust = Math.sqrt(
+    Math.pow(Math.round(Math.abs(maxLine.x1 - maxLine.x2) * 10), 2) + Math.pow(Math.round(Math.abs(maxLine.y1 - maxLine.y2) * 10), 2),
+  )
+  const height = getHeight(adjust, shedDegree)
+  const lengthText = Math.round(Math.sqrt(Math.pow(adjust, 2) + Math.pow(height, 2)))
+  maxLine.setLengthText(lengthText)
 }
 
 export const drawRidgeRoof = (roofId, canvas) => {