diff --git a/src/components/floor-plan/modal/basic/step/Trestle.jsx b/src/components/floor-plan/modal/basic/step/Trestle.jsx index c8b40ef3..77ade743 100644 --- a/src/components/floor-plan/modal/basic/step/Trestle.jsx +++ b/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,