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