보조선 select 풀릴 시 색 변경 제거

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -1,6 +1,6 @@
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 import { canvasState, currentAngleTypeSelector, currentObjectState } from '@/store/canvasAtom'
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useRef, useState } from 'react'
 import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
 import { usePolygon } from '@/hooks/usePolygon'
@@ -76,6 +76,8 @@ export function useRoofAllocationSetting(id) {
   const { changeCorridorDimensionText } = useText()
   const { saveSnapshot, clearStacks } = useUndoRedo()
   const outlineDisplay = useRecoilValue(outlineDisplaySelector)
+  // [UNSELECT-RESTORE] 보조선/능선/골짜기 선택 강조 시 직전 스타일을 저장 → 선택 해제·변경·팝업 닫힘 때 원복
+  const highlightedLineRef = useRef(null)
 
   useEffect(() => {
     /** 배치면 초기설정에서 선택한 지붕재 배열 설정 */
@@ -86,6 +88,13 @@ export function useRoofAllocationSetting(id) {
     /** 지붕면 조회 */
     const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) /** roofPolygon.innerLines */
 
+    // [UNSELECT-RESTORE] 이전에 강조했던 라인을 선택 해제·변경 시 원래 스타일로 복구
+    const prevHighlighted = highlightedLineRef.current
+    if (prevHighlighted && prevHighlighted.obj !== currentObject) {
+      prevHighlighted.obj.set({ stroke: prevHighlighted.stroke, strokeWidth: prevHighlighted.strokeWidth })
+      highlightedLineRef.current = null
+    }
+
     roofBases.forEach((roof) => {
       roof.innerLines.forEach((line) => {
         /** 실측값이 없는 경우 라인 두께 4로 설정 */
@@ -102,8 +111,14 @@ export function useRoofAllocationSetting(id) {
 
     /** 현재 선택된 객체가 보조라인, 피라미드, 힙인 경우 두께 4로 설정 */
     if (currentObject && currentObject.name && ['auxiliaryLine', 'ridge', 'hip'].includes(currentObject.name)) {
+      // [UNSELECT-RESTORE] 강조 직전(innerLines 리셋 반영 후) 스타일을 1회만 저장해 복구 기준으로 사용
+      if (highlightedLineRef.current?.obj !== currentObject) {
+        highlightedLineRef.current = { obj: currentObject, stroke: currentObject.stroke, strokeWidth: currentObject.strokeWidth }
+      }
       currentObject.set({ strokeWidth: 4, stroke: '#EA10AC' })
     }
+
+    canvas.renderAll()
   }, [currentObject])
 
   useEffect(() => {
@@ -118,6 +133,18 @@ export function useRoofAllocationSetting(id) {
     fetchBasicSettings(basicSetting.planNo)
   }, [])
 
+  // [UNSELECT-RESTORE] 팝업 닫힘(언마운트) 시 마지막으로 강조한 라인을 원래 스타일로 복구
+  useEffect(() => {
+    return () => {
+      const highlighted = highlightedLineRef.current
+      if (highlighted) {
+        highlighted.obj.set({ stroke: highlighted.stroke, strokeWidth: highlighted.strokeWidth })
+        highlightedLineRef.current = null
+        canvas?.renderAll()
+      }
+    }
+  }, [])
+
   /**
    * 배치면 초기설정 조회
    */