From 46418a65678f2ef395758259ade858de062dfa43 Mon Sep 17 00:00:00 2001
From: hoo00nn <hoo00nn@naver.com>
Date: Thu, 10 Dec 2020 13:19:06 +0900
Subject: [PATCH] =?UTF-8?q?Fix=20#noissue=20:=20=EC=9D=B4=EB=AF=B8=20?=
 =?UTF-8?q?=EB=A7=A4=EC=B9=AD=EB=90=9C=20=EC=98=A4=EB=8D=94=20=EC=95=8C?=
 =?UTF-8?q?=EB=A6=BC=20=ED=8C=9D=EC=97=85=20=EA=B3=84=EC=86=8D=20=EB=9C=A8?=
 =?UTF-8?q?=EB=8A=90=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

- 데이터가 저장되어있어 계속 남아있는 것이 문제
---
 client/src/routes/Driver/Main/Main.tsx | 44 ++++++++++++++++----------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/client/src/routes/Driver/Main/Main.tsx b/client/src/routes/Driver/Main/Main.tsx
index f10829fc..e5480cc4 100644
--- a/client/src/routes/Driver/Main/Main.tsx
+++ b/client/src/routes/Driver/Main/Main.tsx
@@ -1,10 +1,11 @@
-import React, { FC, useState, useCallback, useEffect } from 'react';
+import React, { FC, useState, useCallback, useEffect, useRef } from 'react';
 import { useSubscription } from '@apollo/client';
 import { useCustomQuery, useCustomMutation } from '@hooks/useApollo';
 import {
   UpdateDriverLocation,
   GetUnassignedOrders,
   GetUnassignedOrders_getUnassignedOrders_unassignedOrders as Order,
+  SubNewOrder,
 } from '@/types/api';
 import styled from '@theme/styled';
 import MapFrame from '@components/MapFrame';
@@ -45,11 +46,33 @@ const Main: FC = () => {
   const [isModal, openModal, closeModal] = useModal();
   const [orderItem, setOrderItem] = useState<Order>();
   const [currentLocation, setCurrentLocation] = useState<Location>();
+  const orderTimerRef = useRef<NodeJS.Timeout>();
   const [updateDriverLocation] = useCustomMutation<UpdateDriverLocation>(UPDATE_DRIVER_LOCATION);
-  const { data: addedOrder, loading } = useSubscription(SUB_NEW_ORDER, {
+
+  useSubscription<SubNewOrder>(SUB_NEW_ORDER, {
     variables: { lat: currentLocation?.lat, lng: currentLocation?.lng },
+    onSubscriptionData: ({ subscriptionData }) => {
+      const { newOrder } = subscriptionData.data?.subNewOrder || {};
+
+      if (newOrder) {
+        openModal();
+        setOrderItem(newOrder);
+
+        orderTimerRef.current = setTimeout(() => {
+          closeModal();
+        }, DRIVER.NEW_ORDER_DURATION);
+      }
+    },
   });
 
+  const onClickCloseModal = useCallback(() => {
+    if (orderTimerRef.current) {
+      clearTimeout(orderTimerRef.current);
+      orderTimerRef.current = undefined;
+    }
+    closeModal();
+  }, [orderTimerRef.current]);
+
   useSubscription(UPDATE_ORDER_LIST, {
     onSubscriptionData: async () => {
       const newData = await callQuery();
@@ -92,19 +115,6 @@ const Main: FC = () => {
     };
   }, []);
 
-  useEffect(() => {
-    if (!loading && addedOrder) {
-      const { newOrder } = addedOrder.subNewOrder;
-      openModal();
-      setOrderItem(newOrder);
-
-      const timer = setTimeout(() => {
-        closeModal();
-      }, DRIVER.NEW_ORDER_DURATION);
-      return () => clearTimeout(timer);
-    }
-  }, [addedOrder]);
-
   useEffect(() => {
     setOrderData(unassignedOrders);
   }, [unassignedOrders]);
@@ -128,8 +138,8 @@ const Main: FC = () => {
           </StyledOrderLogList>
         </MapFrame>
       )}
-      <Modal visible={isModal} onClose={closeModal}>
-        {orderItem && <OrderModalItem order={orderItem} closeModal={closeModal} />}
+      <Modal visible={isModal} onClose={onClickCloseModal}>
+        {orderItem && <OrderModalItem order={orderItem} closeModal={onClickCloseModal} />}
       </Modal>
     </>
   );