From aef62454c247e7de9352c6a5d055b0d355b146cf Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Fri, 31 Oct 2025 18:27:34 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9E=90=EB=8F=99=20=EB=A6=AC=EB=8B=A4?=
 =?UTF-8?q?=EC=9D=B4=EB=A0=89=ED=8A=B8=20=ED=83=80=EC=9D=B4=EB=A8=B8=20?=
 =?UTF-8?q?=EC=A0=95=EB=A6=AC=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

✅ 결과
- 버튼 클릭 시 타이머가 즉시 정리됨
- 다른 화면으로 이동 후 3초 뒤 튕겨나지 않음
- 메모리 누수 방지
---
 .../components/screen/MenuAssignmentModal.tsx | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/components/screen/MenuAssignmentModal.tsx b/frontend/components/screen/MenuAssignmentModal.tsx
index dafa1319..e04f3bda 100644
--- a/frontend/components/screen/MenuAssignmentModal.tsx
+++ b/frontend/components/screen/MenuAssignmentModal.tsx
@@ -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 {