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

@@ -18,6 +18,11 @@ const Trestle = forwardRef((props, ref) => {
   const currentAngleType = useRecoilValue(currentAngleTypeSelector)
   const pitchText = useRecoilValue(pitchTextSelector)
   const [selectedRoof, setSelectedRoof] = useState(null)
+  const [isAutoSelecting, setIsAutoSelecting] = useState(false) // 자동 선택 중인지 상태
+  const [autoSelectTimeout, setAutoSelectTimeout] = useState(null) // 타임아웃 참조
+  const autoSelectTimeoutRef = useRef(null)
+  // 공통 타임아웃 설정 (밀리초)
+  const AUTO_SELECT_TIMEOUT = 700 // API 호출 완료 대기 시간
   const {
     trestleState,
     trestleDetail,
@@ -63,7 +68,7 @@ const Trestle = forwardRef((props, ref) => {
 
 
   useEffect(() => {
-    if (roofs && !selectedRoof) {
+    if (roofs && roofs.length > 0 && !selectedRoof) {
       console.log("roofs:::::", roofs.length)
       setLengthBase(roofs[0].length);
       setSelectedRoof(roofs[0])
@@ -71,12 +76,12 @@ const Trestle = forwardRef((props, ref) => {
     if (selectedRoof && selectedRoof.lenAuth === "C") {
       onChangeLength(selectedRoof.length);
     }
-    if (selectedRoof && ["C", "R"].includes(selectedRoof.raftAuth)) {
+    if (selectedRoof && ["C", "R"].includes(selectedRoof.raftAuth) && roofs && roofs.length > 0) {
       onChangeRaftBase(roofs[0]);
     }
     //모듈 설치 영역 복구
     restoreModuleInstArea()
-  }, [roofs])
+  }, [roofs, selectedRoof])  // selectedRoof 추가
 
   useEffect(() => {
     if (flag && moduleSelectionData) {
@@ -161,7 +166,7 @@ const Trestle = forwardRef((props, ref) => {
 
   useEffect(() => {
     if (constructionList.length > 0) {
-      const existingConstruction = constructionList.find((construction) => construction.constTp === trestleState?.construction?.constTp)
+      const existingConstruction = constructionList.find((construction) => construction.constTp === trestleState.constTp)
       if (existingConstruction) {
         setSelectedConstruction(existingConstruction)
       } else if (autoSelectStep === 'construction') {
@@ -252,7 +257,7 @@ const Trestle = forwardRef((props, ref) => {
     // 다음 단계(가대메이커) 자동 선택 설정 - 지연 실행
     setTimeout(() => {
       setAutoSelectStep('trestle')
-    }, 500) // API 호출 완료를 위한 더 긴 지연
+    }, AUTO_SELECT_TIMEOUT) // API 호출 완료를 위한 더 긴 지연
   }
 
   const onChangeHajebichi = (e) => {
@@ -282,7 +287,7 @@ const Trestle = forwardRef((props, ref) => {
     // 다음 단계(가대메이커) 자동 선택 설정 - 지연 실행
     setTimeout(() => {
       setAutoSelectStep('trestle')
-    }, 500)
+    }, AUTO_SELECT_TIMEOUT)
   }
 
   const onChangeTrestleMaker = (e) => {
@@ -305,7 +310,7 @@ const Trestle = forwardRef((props, ref) => {
     // API 호출 완료 후 다음 단계(공법) 자동 선택 설정
     setTimeout(() => {
       setAutoSelectStep('constMthd')
-    }, 300)
+    }, AUTO_SELECT_TIMEOUT)
   }
 
   const onChangeConstMthd = (e) => {
@@ -325,10 +330,21 @@ const Trestle = forwardRef((props, ref) => {
       },
     })
 
+    // 기존 타임아웃 취소
+    if (autoSelectTimeoutRef.current) {
+      clearTimeout(autoSelectTimeoutRef.current)
+    }
+
+    // 자동 선택 중 상태 활성화
+    setIsAutoSelecting(true)
+
     // API 호출 완료 후 다음 단계(지붕밑바탕) 자동 선택 설정
-    setTimeout(() => {
+    const timeoutId = setTimeout(() => {
       setAutoSelectStep('roofBase')
-    }, 300)
+      setIsAutoSelecting(false)
+    }, AUTO_SELECT_TIMEOUT)
+
+    autoSelectTimeoutRef.current = timeoutId
   }
 
   const onChangeRoofBase = (e) => {
@@ -356,7 +372,7 @@ const Trestle = forwardRef((props, ref) => {
     // API 호출 완료 후 다음 단계(construction) 자동 선택 설정
     setTimeout(() => {
       setAutoSelectStep('construction')
-    }, 300)
+    }, AUTO_SELECT_TIMEOUT)
   }
 
   const handleConstruction = (index) => {
@@ -451,7 +467,7 @@ const Trestle = forwardRef((props, ref) => {
             ...selectedRoofBase,
           },
           construction: {
-            ...constructionList.find((data) => data.constTp === trestleState.constTp),
+            ...constructionList.find((data) => newAddedRoofs[index].construction.constTp === data.constTp),
             cvrYn,
             snowGdPossYn,
             cvrChecked,