fix: 자동 리다이렉트 타이머 정리 문제 해결

🐛 버그 수정
- 화면 목록으로 이동 버튼 클릭 후에도 3초 타이머가 계속 실행되던 문제 해결
- 빠르게 버튼 클릭 후 다른 화면 진입 시 다시 튕겨나는 현상 수정

�� 변경 내용
- useRef로 타이머 참조 저장 (autoRedirectTimerRef)
- 모달이 닫힐 때 타이머 정리 (clearTimeout)
- 컴포넌트 언마운트 시 타이머 정리
- '화면 목록으로 이동' 버튼 클릭 시 타이머 즉시 정리

📝 기술적 개선
- setTimeout 타이머를 useRef로 관리
- useEffect cleanup 함수에서 타이머 정리
- 버튼 onClick에서 타이머 수동 정리

 결과
- 버튼 클릭 시 타이머가 즉시 정리됨
- 다른 화면으로 이동 후 3초 뒤 튕겨나지 않음
- 메모리 누수 방지
This commit is contained in:
kjs 2025-10-31 18:27:34 +09:00
parent 1d9634ac41
commit aef62454c2
1 changed files with 25 additions and 3 deletions

View File

@ -46,6 +46,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
const [assignmentSuccess, setAssignmentSuccess] = useState(false);
const [assignmentMessage, setAssignmentMessage] = useState("");
const searchInputRef = useRef<HTMLInputElement>(null);
const autoRedirectTimerRef = useRef<NodeJS.Timeout | null>(null);
// 메뉴 목록 로드 (관리자 메뉴 + 사용자 메뉴)
const loadMenus = async () => {
@ -98,7 +99,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
}
};
// 모달이 열릴 때 메뉴 목록 로드
// 모달이 열릴 때 메뉴 목록 로드 및 정리
useEffect(() => {
if (isOpen) {
loadMenus();
@ -107,7 +108,21 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
setSearchTerm("");
setAssignmentSuccess(false);
setAssignmentMessage("");
} else {
// 모달이 닫힐 때 타이머 정리
if (autoRedirectTimerRef.current) {
clearTimeout(autoRedirectTimerRef.current);
autoRedirectTimerRef.current = null;
}
}
// 컴포넌트 언마운트 시 타이머 정리
return () => {
if (autoRedirectTimerRef.current) {
clearTimeout(autoRedirectTimerRef.current);
autoRedirectTimerRef.current = null;
}
};
}, [isOpen]);
// 메뉴 선택 처리
@ -208,7 +223,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
}
// 3초 후 자동으로 모달 닫고 화면 목록으로 이동
setTimeout(() => {
autoRedirectTimerRef.current = setTimeout(() => {
onClose(); // 모달 닫기
if (onBackToList) {
onBackToList();
@ -237,7 +252,7 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
}
// 3초 후 자동으로 모달 닫고 화면 목록으로 이동
setTimeout(() => {
autoRedirectTimerRef.current = setTimeout(() => {
onClose(); // 모달 닫기
if (onBackToList) {
onBackToList();
@ -374,6 +389,13 @@ export const MenuAssignmentModal: React.FC<MenuAssignmentModalProps> = ({
<DialogFooter>
<Button
onClick={() => {
// 타이머 정리
if (autoRedirectTimerRef.current) {
clearTimeout(autoRedirectTimerRef.current);
autoRedirectTimerRef.current = null;
}
// 화면 목록으로 이동
if (onBackToList) {
onBackToList();
} else {