src/components/fabric/QPolygon.js

@@ -2,10 +2,12 @@ import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { QLine } from '@/components/fabric/QLine'
 import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
-import { calculateAngle, drawGableRoof, drawRidgeRoof, drawShedRoof, toGeoJSON } from '@/util/qpolygon-utils'
+import { calculateAngle, drawRidgeRoof, drawShedRoof, toGeoJSON } from '@/util/qpolygon-utils'
 import * as turf from '@turf/turf'
 import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
 import Big from 'big.js'
+import { drawSkeletonRidgeRoof, drawSkeletonWithTransformedEdges } from '@/util/skeleton-utils'
+import { logger } from '@/util/logger'
 
 export const QPolygon = fabric.util.createClass(fabric.Polygon, {
   type: 'QPolygon',
@@ -242,6 +244,12 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
    * @param settingModalFirstOptions
    */
   drawHelpLine(settingModalFirstOptions) {
+    // canvas에 skeleton 상태 저장 객체 초기화
+    if (!this.canvas.skeletonStates) {
+      this.canvas.skeletonStates = {};
+      this.canvas.skeletonLines = [];
+    }
+
     /* innerLines 초기화 */
     this.canvas
       .getObjects()
@@ -255,7 +263,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         // && obj.name !== 'outerLinePoint',
       )
       .forEach((obj) => this.canvas.remove(obj))
-    this.innerLines = []
     this.canvas.renderAll()
 
     let textMode = 'plane'
@@ -275,77 +282,55 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         break
     }
 
-    const types = this.lines.map((line) => line.attributes.type)
+    const types = []
+    this.lines.forEach((line) => types.push(line.attributes.type))
 
-    const isGableRoof = function (types) {
+    const gableType = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
-      if (!types.includes(LINE_TYPE.WALLLINE.GABLE)) {
-        return false
-      }
-      const gableTypes = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
-      const oddTypes = types.filter((type, i) => i % 2 === 0)
-      const evenTypes = types.filter((type, i) => i % 2 === 1)
 
-      const oddAllEaves = oddTypes.every((type) => type === LINE_TYPE.WALLLINE.EAVES)
+    const hasShed = types.includes(LINE_TYPE.WALLLINE.SHED)
-      const evenAllGable = evenTypes.every((type) => gableTypes.includes(type))
-      const evenAllEaves = evenTypes.every((type) => type === LINE_TYPE.WALLLINE.EAVES)
-      const oddAllGable = oddTypes.every((type) => gableTypes.includes(type))
 
-      return (oddAllEaves && evenAllGable) || (evenAllEaves && oddAllGable)
+    if (hasShed) {
-    }
+      const sheds = this.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.SHED)
-
+      const areLinesParallel = function (line1, line2) {
-    const isShedRoof = function (types, lines) {
+        const angle1 = calculateAngle(line1.startPoint, line1.endPoint)
-      const gableTypes = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
+        const angle2 = calculateAngle(line2.startPoint, line2.endPoint)
-      if (!types.includes(LINE_TYPE.WALLLINE.SHED)) {
-        return false
-      }
-      const shedLines = lines.filter((line) => line.attributes?.type === LINE_TYPE.WALLLINE.SHED)
-      const areShedLinesParallel = function (shedLines) {
-        return shedLines.every((shed, i) => {
-          const nextShed = shedLines[(i + 1) % shedLines.length]
-          const angle1 = calculateAngle(shed.startPoint, shed.endPoint)
-          const angle2 = calculateAngle(nextShed.startPoint, nextShed.endPoint)
         return angle1 === angle2
+      }
+
+      let isShedRoof = true
+      sheds.forEach((shed, i) => {
+        isShedRoof = areLinesParallel(shed, sheds[(i + 1) % sheds.length])
       })
+      if (isShedRoof) {
+        const eaves = this.lines
+          .filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
+          .filter((line) => {
+            const angle1 = calculateAngle(sheds[0].startPoint, sheds[0].endPoint)
+            const angle2 = calculateAngle(line.startPoint, line.endPoint)
+            if (Math.abs(angle1 - angle2) === 180) {
+              return line
             }
-      if (!areShedLinesParallel(shedLines)) {
-        return false
-      }
-
-      const getParallelEavesLines = function (shedLines, lines) {
-        const eavesLines = lines.filter((line) => line.attributes?.type === LINE_TYPE.WALLLINE.EAVES)
-
-        const referenceAngle = calculateAngle(shedLines[0].startPoint, shedLines[0].endPoint)
-
-        return eavesLines.filter((line) => {
-          const eavesAngle = calculateAngle(line.startPoint, line.endPoint)
-          return Math.abs(referenceAngle - eavesAngle) === 180
           })
-      }
+        if (eaves.length > 0) {
-
+          const gables = this.lines.filter((line) => sheds.includes(line) === false && eaves.includes(line) === false)
-      const parallelEaves = getParallelEavesLines(shedLines, lines)
+          const isGable = gables.every((line) => gableType.includes(line.attributes.type))
-      if (parallelEaves.length === 0) {
+          if (isGable) {
-        return false
-      }
-
-      const remainingLines = lines.filter((line) => !shedLines.includes(line) && !parallelEaves.includes(line))
-      return remainingLines.every((line) => gableTypes.includes(line.attributes.type))
-    }
-
-    if (types.every((type) => type === LINE_TYPE.WALLLINE.EAVES)) {
-      // 용마루 -- straight-skeleton
-      console.log('용마루 지붕')
-      drawRidgeRoof(this.id, this.canvas, textMode)
-    } else if (isGableRoof(types)) {
-      // A형, B형 박공 지붕
-      console.log('패턴 지붕')
-      drawGableRoof(this.id, this.canvas, textMode)
-    } else if (isShedRoof(types, this.lines)) {
-      console.log('한쪽흐름 지붕')
             drawShedRoof(this.id, this.canvas, textMode)
           } else {
-      console.log('변별로 설정')
             drawRidgeRoof(this.id, this.canvas, textMode)
           }
+        } else {
+          drawRidgeRoof(this.id, this.canvas, textMode)
+        }
+      } else {
+        drawRidgeRoof(this.id, this.canvas, textMode)
+      }
+    } else {
+
+        drawSkeletonRidgeRoof(this.id, this.canvas, textMode)
+        //drawRidgeRoof(this.id, this.canvas, textMode)
+
+    }
   },
 
   addLengthText() {

src/components/floor-plan/modal/basic/step/Trestle.jsx

@@ -23,7 +23,7 @@ const Trestle = forwardRef((props, ref) => {
   const autoSelectTimeoutRef = useRef(null)
 
   // 공통 타임아웃 설정 (밀리초)
-  const AUTO_SELECT_TIMEOUT = 500 // API 호출 완료 대기 시간
+  const AUTO_SELECT_TIMEOUT = 700 // API 호출 완료 대기 시간
   const {
     trestleState,
     trestleDetail,
@@ -66,7 +66,7 @@ const Trestle = forwardRef((props, ref) => {
   const [flag, setFlag] = useState(false)
   const tempModuleSelectionData = useRef(null)
   const [autoSelectStep, setAutoSelectStep] = useState(null) // 'raftBase', 'trestle', 'constMthd', 'roofBase', 'construction'
-  const prevHajebichiRef = useRef();
+
 
   useEffect(() => {
     if (roofs && roofs.length > 0 && !selectedRoof) {
@@ -76,14 +76,10 @@ const Trestle = forwardRef((props, ref) => {
     }
     if (selectedRoof && selectedRoof.lenAuth === "C") {
       onChangeLength(selectedRoof.length);
-    }else if (selectedRoof && ["C", "R"].includes(selectedRoof.raftAuth) && roofs && roofs.length > 0) {
-      onChangeRaftBase(roofs[0]);
-    }else if (selectedRoof && ["C", "R"].includes(selectedRoof.roofPchAuth) && roofs && roofs.length > 0 &&
-      roofs[0].hajebichi !== prevHajebichiRef.current ) {
-      prevHajebichiRef.current = roofs[0].hajebichi;
-      onChangeHajebichi(roofs[0].hajebichi);
     }
-
+    if (selectedRoof && ["C", "R"].includes(selectedRoof.raftAuth) && roofs && roofs.length > 0) {
+      onChangeRaftBase(roofs[0]);
+    }
     //모듈 설치 영역 복구
     restoreModuleInstArea()
   }, [roofs, selectedRoof])  // selectedRoof 추가
@@ -284,7 +280,7 @@ const Trestle = forwardRef((props, ref) => {
       roof: {
         moduleTpCd: selectedModules.itemTp ?? '',
         roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-        raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
+        raft: selectedRaftBase?.clCode,
         hajebichi: e,
       },
     })
@@ -307,8 +303,7 @@ const Trestle = forwardRef((props, ref) => {
       roof: {
         moduleTpCd: selectedModules.itemTp ?? '',
         roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-        raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
+        raft: selectedRaftBase?.clCode,
-        //hajebichi: selectedRaftBase?.hajebichi ?? selectedRoof?.hajebichi,
         trestleMkrCd: e.trestleMkrCd,
       },
     })
@@ -330,8 +325,7 @@ const Trestle = forwardRef((props, ref) => {
       roof: {
         moduleTpCd: selectedModules.itemTp ?? '',
         roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-        raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
+        raft: selectedRaftBase?.clCode,
-        //hajebichi: selectedRaftBase?.hajebichi ?? selectedRoof?.hajebichi,
         trestleMkrCd: selectedTrestle?.trestleMkrCd,
         constMthdCd: e.constMthdCd,
       },
@@ -363,8 +357,7 @@ const Trestle = forwardRef((props, ref) => {
       roof: {
         moduleTpCd: selectedModules.itemTp ?? '',
         roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-        raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
+        raft: selectedRaftBase?.clCode,
-        //hajebichi: selectedRaftBase?.hajebichi ?? selectedRoof?.hajebichi,
         trestleMkrCd: selectedTrestle?.trestleMkrCd,
         constMthdCd: selectedConstMthd?.constMthdCd,
         roofBaseCd: e.roofBaseCd,
@@ -390,8 +383,7 @@ const Trestle = forwardRef((props, ref) => {
         roof: {
           moduleTpCd: selectedModules.itemTp ?? '',
           roofMatlCd: selectedRoof?.roofMatlCd ?? '',
-          raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
+          raft: selectedRaftBase?.clCode,
-          //hajebichi: selectedRaftBase?.hajebichi ?? selectedRoof?.hajebichi,
           trestleMkrCd: selectedTrestle.trestleMkrCd,
           constMthdCd: selectedConstMthd.constMthdCd,
           roofBaseCd: selectedRoofBase.roofBaseCd,
@@ -428,7 +420,7 @@ const Trestle = forwardRef((props, ref) => {
           ridgeMargin,
           kerabaMargin,
           roofIndex: selectedRoof.index,
-          raft: selectedRaftBase?.clCode ?? selectedRoof?.roofBaseCd,
+          raft: selectedRaftBase?.clCode,
           trestle: {
             hajebichi: hajebichi,
             length: lengthBase,
@@ -465,8 +457,8 @@ const Trestle = forwardRef((props, ref) => {
           ridgeMargin,
           kerabaMargin,
           roofIndex: roof.index,
-          raft: selectedRaftBase?.clCode ?? selectedRoof?.raft ?? '',
+          raft: selectedRaftBase?.clCode,
-          //hajebichi: selectedRaftBase?.hajebichi ?? selectedRoof?.hajebichi ?? 0,
+          hajebichi: hajebichi,
           trestle: {
             length: lengthBase,
             hajebichi: hajebichi,
@@ -551,7 +543,7 @@ const Trestle = forwardRef((props, ref) => {
       }
 
       if (['C', 'R'].includes(roof.roofPchAuth)) {
-        if (!roof?.hajebichi) {
+        if (!roof?.roofPchBase) {
           Swal.fire({
             title: getMessage('modal.module.basic.settting.module.error7', [roof.nameJp]), // 하제비치를 입력해주세요.
             icon: 'warning',

src/components/simulator/Simulator.jsx

@@ -39,12 +39,8 @@ export default function Simulator() {
   // 차트 관련
   const [chartData, setChartData] = useState([])
 
-
   const data = {
-
-
     labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
-
     datasets: [
       {
         label: 'kWh',
@@ -53,25 +49,34 @@ export default function Simulator() {
           return isNaN(num) ? 0 : num
         }),
 
-        backgroundColor: (context) => {
+        backgroundColor: [
-          const chart = context.chart
+          'rgba(255, 99, 132, 0.2)',
-          const { ctx, chartArea } = chart
+          'rgba(54, 162, 235, 0.2)',
-
+          'rgba(255, 206, 86, 0.2)',
-          if (!chartArea) {
+          'rgba(75, 192, 192, 0.2)',
-            // This case happens on initial chart load
+          'rgba(153, 102, 255, 0.2)',
-            return null
+          'rgba(255, 159, 64, 0.2)',
-          }
+          'rgba(0, 99, 132, 0.2)',
-
+          'rgba(0, 162, 235, 0.2)',
-          const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top)
+          'rgba(0, 206, 86, 0.2)',
-          gradient.addColorStop(0, '#4FC3F7')  // Light blue at bottom
+          'rgba(0, 192, 192, 0.2)',
-          gradient.addColorStop(0.3, '#2FA8E0') // Original blue
+          'rgba(0, 102, 255, 0.2)',
-          gradient.addColorStop(0.7, '#1976D2') // Medium blue
+          'rgba(0, 159, 64, 0.2)',
-          gradient.addColorStop(1, '#0D47A1')   // Dark blue at top
+        ],
-
+        borderColor: [
-
+          'rgba(255, 99, 132, 0.2)',
-          return gradient
+          'rgba(54, 162, 235, 0.2)',
-        },
+          'rgba(255, 206, 86, 0.2)',
-        borderColor: '#2FA8E0' ,
+          'rgba(75, 192, 192, 0.2)',
+          'rgba(153, 102, 255, 0.2)',
+          'rgba(255, 159, 64, 0.2)',
+          'rgba(0, 99, 132, 0.2)',
+          'rgba(0, 162, 235, 0.2)',
+          'rgba(0, 206, 86, 0.2)',
+          'rgba(0, 192, 192, 0.2)',
+          'rgba(0, 102, 255, 0.2)',
+          'rgba(0, 159, 64, 0.2)',
+        ],
         borderWidth: 1,
       },
     ],

src/hooks/roofcover/useMovementSetting.js

@@ -411,35 +411,6 @@ export function useMovementSetting(id) {
 
     targetBaseLines.sort((a, b) => a.distance - b.distance)
     targetBaseLines = targetBaseLines.filter((line) => line.distance === targetBaseLines[0].distance)
-
-    if (isGableRoof) {
-      const zeroLengthLines = targetBaseLines.filter(
-        (line) => Math.sqrt(Math.pow(line.line.x2 - line.line.x1, 2) + Math.pow(line.line.y2 - line.line.y1, 2)) < 1,
-      )
-      if (zeroLengthLines.length > 0) {
-        zeroLengthLines.forEach((line) => {
-          const findLine = line.line
-          const findCoords = [
-            { x: findLine.x1, y: findLine.y1 },
-            { x: findLine.x2, y: findLine.y2 },
-          ]
-          wall.baseLines
-            .filter((baseLine) => {
-              return findCoords.some(
-                (coord) =>
-                  (Math.abs(coord.x - baseLine.x1) < 0.1 && Math.abs(coord.y - baseLine.y1) < 0.1) ||
-                  (Math.abs(coord.x - baseLine.x2) < 0.1 && Math.abs(coord.y - baseLine.y2) < 0.1),
-              )
-            })
-            .forEach((baseLine) => {
-              const isAlready = targetBaseLines.find((target) => target.line === baseLine)
-              if (isAlready) return
-              targetBaseLines.push({ line: baseLine, distance: targetBaseLines[0].distance })
-            })
-        })
-      }
-    }
-
     let value
     if (typeRef.current === TYPE.FLOW_LINE) {
       value =
@@ -474,9 +445,7 @@ export function useMovementSetting(id) {
       }
     }
     value = value.div(10)
-    targetBaseLines
+    targetBaseLines.forEach((target) => {
-      .filter((line) => Math.sqrt(Math.pow(line.line.x2 - line.line.x1, 2) + Math.pow(line.line.y2 - line.line.y1, 2)) >= 1)
-      .forEach((target) => {
       const currentLine = target.line
       const index = baseLines.findIndex((line) => line === currentLine)
       const nextLine = baseLines[(index + 1) % baseLines.length]
@@ -506,23 +475,27 @@ export function useMovementSetting(id) {
       currentLine.attributes.planeSize = currentSize
       currentLine.attributes.actualSize = currentSize
 
+      const nextOldActualSize = nextLine.attributes.planeSize
       nextLine.set({
-          x1: currentLine.x2,
+        x1: nextLine.x1 + deltaX,
-          y1: currentLine.y2,
+        y1: nextLine.y1 + deltaY,
-          startPoint: { x: currentLine.x2, y: currentLine.y2 },
+        startPoint: { x: nextLine.x1 + deltaX, y: nextLine.y1 + deltaY },
       })
       const nextSize = calcLinePlaneSize({ x1: nextLine.x1, y1: nextLine.y1, x2: nextLine.x2, y2: nextLine.y2 })
       nextLine.attributes.planeSize = nextSize
       nextLine.attributes.actualSize = nextSize
 
+      const prevOldActualSize = prevLine.attributes.planeSize
       prevLine.set({
-          x2: currentLine.x1,
+        x2: prevLine.x2 + deltaX,
-          y2: currentLine.y1,
+        y2: prevLine.y2 + deltaY,
-          endPoint: { x: currentLine.x1, y: currentLine.y1 },
+        endPoint: { x: prevLine.x2 + deltaX, y: prevLine.y2 + deltaY },
       })
       const prevSize = calcLinePlaneSize({ x1: prevLine.x1, y1: prevLine.y1, x2: prevLine.x2, y2: prevLine.y2 })
       prevLine.attributes.planeSize = prevSize
       prevLine.attributes.actualSize = prevSize
+
+      canvas.renderAll()
     })
 
     roof.drawHelpLine()