fix: 자동 리다이렉트 타이머 정리 문제 해결
🐛 버그 수정 - 화면 목록으로 이동 버튼 클릭 후에도 3초 타이머가 계속 실행되던 문제 해결 - 빠르게 버튼 클릭 후 다른 화면 진입 시 다시 튕겨나는 현상 수정 �� 변경 내용 - useRef로 타이머 참조 저장 (autoRedirectTimerRef) - 모달이 닫힐 때 타이머 정리 (clearTimeout) - 컴포넌트 언마운트 시 타이머 정리 - '화면 목록으로 이동' 버튼 클릭 시 타이머 즉시 정리 📝 기술적 개선 - setTimeout 타이머를 useRef로 관리 - useEffect cleanup 함수에서 타이머 정리 - 버튼 onClick에서 타이머 수동 정리 ✅ 결과 - 버튼 클릭 시 타이머가 즉시 정리됨 - 다른 화면으로 이동 후 3초 뒤 튕겨나지 않음 - 메모리 누수 방지
This commit is contained in:
parent
1d9634ac41
commit
aef62454c2
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue