From f54a728b4d2c49ada2aaf8a5acfa39c4b8abd3e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?=
 <stc9606@palnet.co.kr>
Date: Fri, 26 Aug 2022 11:08:52 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B4=80=EC=A0=9C=20hisotry?=
 =?UTF-8?q?=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/naver/NaverMap.js          |  8 ++--
 src/components/map/naver/dron/DronHistory.js  | 40 +++++++++++--------
 src/modules/control/gp/sagas/controlGpSaga.ts |  9 ++---
 3 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/components/map/naver/NaverMap.js b/src/components/map/naver/NaverMap.js
index 3faea5ba..85731379 100644
--- a/src/components/map/naver/NaverMap.js
+++ b/src/components/map/naver/NaverMap.js
@@ -14,10 +14,8 @@ export const NaverCustomMap = () => {
     const naver = window.naver;    
     
     const [mapObject, setMapObject] = useState(null);
-    const [arrPolyline, setArrPolyline] = useState([]);
-
-    let arrMarkers = []; // 마커 배열
-    // let arrPolyline = []; // 폴리라인 배열
+    const [arrPolyline, setArrPolyline] = useState([]);    
+    
     let features = geoJson.features;
 
     useEffect(() => {
@@ -68,7 +66,7 @@ export const NaverCustomMap = () => {
                     <DronHistory
                         map={mapObject}
                         naver={naver}
-                        arrPolyline={arrPolyline}
+                        arrPolyline={arrPolyline}                        
                         handleHistoryInit={handleHistoryInit}
                     />
 
diff --git a/src/components/map/naver/dron/DronHistory.js b/src/components/map/naver/dron/DronHistory.js
index 16a2f270..ff70a3ea 100644
--- a/src/components/map/naver/dron/DronHistory.js
+++ b/src/components/map/naver/dron/DronHistory.js
@@ -8,32 +8,40 @@ export const DronHistory = props => {
 	const { controlGpList } = useSelector(state => state.controlGpState);
 	const { objectId, isClickObject } = useSelector(state => state.controlMapReducer);	
 
+	const [arrHistory, setArrHistory] = useState([]);
+
 	let naver = props.naver;
 	let polyline;
-	let polylinePath = [];
+	let polylinePath = [];		
 
 	const dispatch = useDispatch();
 
 	useEffect(() => {
-		if(objectId && isClickObject) {					
-			const gps = controlGpList.find((gps) => gps.controlId === objectId)			
+		if(objectId && isClickObject) {									
+			if(arrHistory && arrHistory.length > 0) {
+				const gps = controlGpList.find((gps) => gps.controlId === objectId);
+
+				if(gps) {
+					const addHistory = {
+						objectId: gps.objectId,
+						lat: gps.lat,
+						lng: gps.lng
+					}
+
+					const history = [...arrHistory, addHistory];
+					polylineInit(history);
 
-			if(gps) {
-				const addHistory = {
-					objectId: gps.objectId,
-					lat: gps.lat,
-					lng: gps.lng
-				}
-	
-				const history = [...controlGpHistory, addHistory];				
-	
-				polylineInit(history);			
-			}			
+					setArrHistory((his) => {
+						return [...his, addHistory];
+					});
+				}			
+			}						
 		}
 	}, [controlGpList]);
 
-	useEffect(() => {					
-		polylineInit(controlGpHistory)		
+	useEffect(() => {	
+		setArrHistory(controlGpHistory);		
+		polylineInit(controlGpHistory);
 	}, [controlGpHistory]);
 
 	useEffect(() => {
diff --git a/src/modules/control/gp/sagas/controlGpSaga.ts b/src/modules/control/gp/sagas/controlGpSaga.ts
index 8618410e..989488f0 100644
--- a/src/modules/control/gp/sagas/controlGpSaga.ts
+++ b/src/modules/control/gp/sagas/controlGpSaga.ts
@@ -36,20 +36,19 @@ function* getControlGpSaga(
             });
         } 
         
-        // console.log('gps>>>> ', gpsData);
+        console.log('gps data >>>> ', gpsData);
 
         yield put(
             Actions.controlGpAction.success({
-                controlGpList: data
+                controlGpList: gpsData
             })
         );
 
-        if (objectId && isClickObject) {    
-            console.log(' mm ;;')        
+        if (objectId && isClickObject) {                   
             let detailData;            
 
             //상세 정보에서 실시간 데이터 호출
-            data.map(item => {
+            gpsData.map(item => {
                 if (item.controlId === objectId) {
                     detailData = item;
                 }