Merge remote-tracking branch 'origin/master'

src/components/approval/ReferenceBox/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useMemo, useCallback, useEffect, useTransition } from 'react';
+import { useState, useMemo, useCallback, useEffect, useTransition, useRef } from 'react';
 import {
   Files,
   Eye,
@@ -152,19 +152,44 @@ export function ReferenceBox() {
     }
   }, []);
 
-  // ===== 초기 로드 및 필터 변경 시 데이터 재로드 =====
-  useEffect(() => {
-    loadData();
-  }, [loadData]);
-
+  // ===== 초기 로드 =====
+  // 마운트 시 1회만 실행 (summary 로드)
   useEffect(() => {
     loadSummary();
-  }, [loadSummary]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ===== 데이터 로드 (의존성 명시적 관리) =====
+  // currentPage, searchQuery, filterOption, sortOption, activeTab 변경 시 데이터 재로드
+  useEffect(() => {
+    loadData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPage, searchQuery, filterOption, sortOption, activeTab]);
 
   // ===== 검색어/필터/탭 변경 시 페이지 초기화 =====
+  // ref로 이전 값 추적하여 불필요한 상태 변경 방지 (무한 루프 방지)
+  const prevSearchRef = useRef(searchQuery);
+  const prevFilterRef = useRef(filterOption);
+  const prevSortRef = useRef(sortOption);
+  const prevTabRef = useRef(activeTab);
+
   useEffect(() => {
-    setCurrentPage(1);
-  }, [searchQuery, filterOption, sortOption, activeTab]);
+    const searchChanged = prevSearchRef.current !== searchQuery;
+    const filterChanged = prevFilterRef.current !== filterOption;
+    const sortChanged = prevSortRef.current !== sortOption;
+    const tabChanged = prevTabRef.current !== activeTab;
+
+    if (searchChanged || filterChanged || sortChanged || tabChanged) {
+      // 페이지가 1이 아닐 때만 리셋 (불필요한 상태 변경 방지)
+      if (currentPage !== 1) {
+        setCurrentPage(1);
+      }
+      prevSearchRef.current = searchQuery;
+      prevFilterRef.current = filterOption;
+      prevSortRef.current = sortOption;
+      prevTabRef.current = activeTab;
+    }
+  }, [searchQuery, filterOption, sortOption, activeTab, currentPage]);
 
   // ===== 탭 변경 핸들러 =====
   const handleTabChange = useCallback((value: string) => {