Merge branch 'iipbs/common/main' into iipbs/sn/ii

packages/common/business_components/src/ui/map/Gis.js

@@ -118,7 +118,7 @@ function Gis({
   searchBar: SearchBar,
   waterDepth: WaterDepth,
   isPlaying = false,
-  setIsPlaying = () => {},
+  setIsPlaying = () => { },
   targetLayerTypes = [],
   orderedLayers = [],
   checkInterval = 3000,
@@ -128,6 +128,8 @@ function Gis({
   const [mapObject, setMapObject] = useState({});
   const [tabVisible, setTabVisible] = useState(true);
   const [layerNm, setLayerNm] = useState("");
+  const [totalSteps, setTotalSteps] = useState(0);
+  const [currentStep, setCurrentStep] = useState(0);
   // const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
   // const [featureData, setFeatureData] = useState(null) // 선택된 피쳐 데이터
   // const [isSearchModalOpen, setIsSearchModalOpen] = useState(false); // SearchModal 열림 상태
@@ -280,6 +282,12 @@ function Gis({
     [onCheckedLayersChange],
   );
 
+  // 진행률 변경 핸들러
+  const handleProgressChange = useCallback((total, current) => {
+    setTotalSteps(total);
+    setCurrentStep(current);
+  }, []);
+
   return (
     <>
       <GisContext.Provider
@@ -315,6 +323,7 @@ function Gis({
               targetLayerTypes={targetLayerTypes}
               orderedLayers={orderedLayers}
               checkInterval={checkInterval}
+              onProgressChange={handleProgressChange}
             />
 
             {typeof WaterDepth === "function" && (
@@ -323,6 +332,8 @@ function Gis({
                   onClose={() => setIsOpen(false)}
                   isPlaying={isPlaying}
                   setIsPlaying={setIsPlaying}
+                  totalSteps={totalSteps}
+                  currentStep={currentStep}
                 />
               </div>
             )}

packages/common/business_components/src/ui/map/GisTree.js

@@ -19,10 +19,11 @@ export default React.memo(function GisTree({
 	onLayerIconClick,
 	imageVisible = false,
 	isPlaying = false,
-  setIsPlaying = () => {},
-  targetLayerTypes = [],
-  orderedLayers = [],
-  checkInterval = 3000,
+	setIsPlaying = () => { },
+	targetLayerTypes = [],
+	orderedLayers = [],
+	checkInterval = 3000,
+	onProgressChange = () => { },
 }) {
 	const { gisCore, treeData } = useGisContext();
 	const [checked, setChecked] = useState([]);
@@ -265,6 +266,7 @@ export default React.memo(function GisTree({
 			isPausedRef.current = false;
 			targetNodesRef.current = [];
 			currentAnimationIndexRef.current = 0;
+			onProgressChange(0, 0);
 			return;
 		}
 
@@ -295,6 +297,9 @@ export default React.memo(function GisTree({
 
 			console.log('자동 체크 대상 노드들 (순서대로):', targetNodes.map(n => ({ id: n.id, name: n.text, type: n.data?.lyrTyNm })));
 
+			// 진행률 초기화 (전체 단계 수 설정)
+			onProgressChange(targetNodes.length, 0);
+
 			// 모든 대상 레이어를 먼저 언체크
 			targetNodes.forEach(node => {
 				checkSpecificNode(node.id, false);
@@ -321,6 +326,9 @@ export default React.memo(function GisTree({
 
 				currentAnimationIndexRef.current++;
 
+				// 진행률 업데이트
+				onProgressChange(currentTargetNodes.length, currentAnimationIndexRef.current);
+
 				// 다음 레이어 처리를 위한 타이머 설정
 				timeoutIdRef.current = setTimeout(processNextLayer, interval);
 			} else {
@@ -330,13 +338,22 @@ export default React.memo(function GisTree({
 				targetNodesRef.current = [];
 				currentAnimationIndexRef.current = 0;
 				timeoutIdRef.current = null;
+
+				// 진행률 100% 완료
+				onProgressChange(currentTargetNodes.length, currentTargetNodes.length);
+
+				// 잠시 후 진행률 초기화
+				setTimeout(() => {
+					onProgressChange(0, 0);
+				}, 1000);
+
 				setIsPlaying?.(false);
 			}
 		};
 
 		processNextLayer();
 
-	}, [nodes, checkSpecificNode, setIsPlaying, isPlaying]);
+	}, [nodes, checkSpecificNode, setIsPlaying, isPlaying, onProgressChange]);
 
 	// 애니메이션 일시정지 함수
 	const pauseAnimation = useCallback(() => {