src/components/floor-plan/CanvasFrame.jsx

@@ -32,7 +32,6 @@ import { useEvent } from '@/hooks/useEvent'
 import { compasDegAtom } from '@/store/orientationAtom'
 import { hotkeyStore } from '@/store/hotkeyAtom'
 import { usePopup } from '@/hooks/usePopup'
-import { outerLinePointsState } from '@/store/outerLineAtom'
 
 export default function CanvasFrame() {
   const canvasRef = useRef(null)
@@ -46,7 +45,6 @@ export default function CanvasFrame() {
   const totalDisplay = useRecoilValue(totalDisplaySelector) // 집계표 표시 여부
   const { setIsGlobalLoading } = useContext(QcastContext)
   const resetModuleStatisticsState = useResetRecoilState(moduleStatisticsState)
-  const resetOuterLinePoints = useResetRecoilState(outerLinePointsState)
   const resetMakersState = useResetRecoilState(makersState)
   const resetSelectedMakerState = useResetRecoilState(selectedMakerState)
   const resetSeriesState = useResetRecoilState(seriesState)
@@ -139,7 +137,6 @@ export default function CanvasFrame() {
 
   const resetRecoilData = () => {
     // resetModuleStatisticsState()
-    resetOuterLinePoints()
     resetMakersState()
     resetSelectedMakerState()
     resetSeriesState()

src/components/floor-plan/modal/object/DormerOffset.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { useRecoilValue } from 'recoil'
@@ -15,8 +15,8 @@ export default function DormerOffset(props) {
   const { closePopup } = usePopup()
   const [arrow1, setArrow1] = useState(null)
   const [arrow2, setArrow2] = useState(null)
-  const arrow1LengthRef = useRef(0)
-  const arrow2LengthRef = useRef(0)
+  const arrow1LengthRef = useRef()
+  const arrow2LengthRef = useRef()
   const [arrow1Length, setArrow1Length] = useState(0)
   const [arrow2Length, setArrow2Length] = useState(0)
 
@@ -59,12 +59,12 @@ export default function DormerOffset(props) {
                     name=""
                     label=""
                     className="input-origin block"
-                    value={arrow1LengthRef.current.value ?? 0}
+                    value={arrow1LengthRef.current.value}
                     ref={arrow1LengthRef}
                     onChange={(value) => setArrow1Length(value)}
                     options={{
                       allowNegative: false,
-                      allowDecimal: false,
+                      allowDecimal: false
                     }}
                   />
                 </div>

src/hooks/common/useCommonUtils.js

@@ -648,7 +648,6 @@ export function useCommonUtils() {
             lockMovementY: true,
             name: obj.name,
             editable: false,
-            selectable: true, // 복사된 객체 선택 가능하도록 설정
             id: uuidv4(), //복사된 객체라 새로 따준다
           })
 
@@ -657,25 +656,19 @@ export function useCommonUtils() {
 
           //배치면일 경우
           if (obj.name === 'roof') {
-            clonedObj.canvas = canvas // canvas 참조 설정
+            clonedObj.setCoords()
+            clonedObj.fire('modified')
+            // clonedObj.fire('polygonMoved')
             clonedObj.set({
               direction: obj.direction,
               directionText: obj.directionText,
               roofMaterial: obj.roofMaterial,
-              stroke: 'black', // 복사된 객체는 선택 해제 상태의 색상으로 설정
-              selectable: true, // 선택 가능하도록 설정
-              evented: true, // 마우스 이벤트를 받을 수 있도록 설정
-              isFixed: false, // containsPoint에서 특별 처리 방지
             })
 
             obj.lines.forEach((line, index) => {
               clonedObj.lines[index].set({ attributes: line.attributes })
             })
 
-            clonedObj.fire('polygonMoved') // 내부 좌표 재계산 (points, pathOffset)
-            clonedObj.fire('modified')
-            clonedObj.setCoords() // 모든 속성 설정 후 좌표 업데이트
-            canvas.setActiveObject(clonedObj)
             canvas.renderAll()
             addLengthText(clonedObj) //수치 추가
             drawDirectionArrow(clonedObj) //방향 화살표 추가

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -372,18 +372,11 @@ export function useRoofAllocationSetting(id) {
     setBasicSetting((prev) => {
       return { ...prev, selectedRoofMaterial: newRoofList.find((roof) => roof.selected) }
     })
-    const selectedRoofMaterial = newRoofList.find((roof) => roof.selected)
-    const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF && obj.roofMaterial?.index === selectedRoofMaterial.index)
-
-    roofs.forEach((roof) => {
-      setSurfaceShapePattern(roof, roofDisplay.column, false, { ...selectedRoofMaterial }, true)
-      drawDirectionArrow(roof)
-    })
 
     setRoofList(newRoofList)
     setRoofMaterials(newRoofList)
     setRoofsStore(newRoofList)
-
+    const selectedRoofMaterial = newRoofList.find((roof) => roof.selected)
     setSurfaceShapePattern(currentObject, roofDisplay.column, false, selectedRoofMaterial, true)
     drawDirectionArrow(currentObject)
     modifyModuleSelectionData()

src/util/fabric-extensions.js

@@ -29,39 +29,22 @@ fabric.Rect.prototype.getCurrentPoints = function () {
 
 /**
  * fabric.Group에 getCurrentPoints 메서드를 추가 (도머 그룹용)
- * 그룹 내 객체들의 점들을 수집하여 현재 월드 좌표를 반환
+ * 그룹의 groupPoints를 다시 계산하여 반환
  */
 fabric.Group.prototype.getCurrentPoints = function () {
-  // 그룹 내 객체들로부터 실시간으로 점들을 계산
-  if (this._objects && this._objects.length > 0) {
-    let allPoints = []
+  // groupPoints를 다시 계산
 
-    // 그룹 내 모든 객체의 점들을 수집
-    this._objects.forEach(function (obj) {
-      if (obj.getCurrentPoints && typeof obj.getCurrentPoints === 'function') {
-        const objPoints = obj.getCurrentPoints()
-        allPoints = allPoints.concat(objPoints)
-      } else if (obj.points && Array.isArray(obj.points)) {
-        const pathOffset = obj.pathOffset || { x: 0, y: 0 }
-        const matrix = obj.calcTransformMatrix()
-        const transformedPoints = obj.points
-          .map(function (p) {
-            return new fabric.Point(p.x - pathOffset.x, p.y - pathOffset.y)
+  // 그룹에 groupPoints가 있으면 해당 점들을 사용 (도머의 경우)
+  if (this.groupPoints && Array.isArray(this.groupPoints)) {
+    const matrix = this.calcTransformMatrix()
+    console.log('this.groupPoints', this.groupPoints)
+    return this.groupPoints.map(function (p) {
+      const point = new fabric.Point(p.x, p.y)
+      return fabric.util.transformPoint(point, matrix)
     })
-          .map(function (p) {
-            return fabric.util.transformPoint(p, matrix)
-          })
-        allPoints = allPoints.concat(transformedPoints)
-      }
-    })
-
-    if (allPoints.length > 0) {
-      // Convex Hull 알고리즘을 사용하여 외곽 점들만 반환
-      return this.getConvexHull(allPoints)
-    }
   }
 
-  // 객체가 없으면 바운딩 박스를 사용
+  // groupPoints가 없으면 바운딩 박스를 사용
   const bounds = this.getBoundingRect()
   const points = [
     { x: bounds.left, y: bounds.top },