UserMatchingPage 리팩토링

client/src/components/userHistory/HistoryBox.tsx

@@ -31,7 +31,7 @@ const HistoryBox: React.FC<HistoryType> = ({
             <Item extra={`${moment(startTime).format('HH:mm')} - ${moment(endTime).format('HH:mm')}`} wrap>
               운행 시간
             </Item>
-            <Item extra={`${fee}원`}>요금</Item>
+            <Item extra={`${fee.toLocaleString()}원`}>요금</Item>
             <Item extra={`${carModel} | ${plateNumber}`} wrap>
               택시 정보
             </Item>

client/src/components/userMain/PreReqData.tsx

@@ -18,7 +18,7 @@ const PreRequestData: React.FC<PreRequestDataPropsType> = ({ time, fee }) => {
         </Div>
         <Div>
           <p>예상요금</p>
-          <P>{fee}원</P>
+          <P>{fee.toLocaleString()}원</P>
         </Div>
         <hr />
         <RequestButton />

client/src/components/userMatching/MatchedDriverData.tsx

@@ -80,4 +80,4 @@ const P = styled.div`
   text-overflow: ellipsis;
 `;
 
-export default MatchedDriverData;
+export default React.memo(MatchedDriverData);

client/src/components/userMatching/MatchingCancelButton.tsx

@@ -1,7 +1,12 @@
-import React from 'react';
-import { Button } from 'antd-mobile';
+import React, { useCallback } from 'react';
+import { Button, Toast } from 'antd-mobile';
+
+const MatchingCancelButton: React.FC<{ cancelMatching: () => Promise<void> }> = ({ cancelMatching }) => {
+  const onClickHandler = useCallback(async () => {
+    await cancelMatching();
+    Toast.show('호출을 취소했습니다.', Toast.SHORT);
+  }, []);
 
-const MatchingCancelButton: React.FC<{ onClickHandler: () => void }> = ({ onClickHandler }) => {
   return (
     <Button type={'primary'} onClick={onClickHandler} style={{ width: '90%' }}>
       호출 취소하기

client/src/components/userMatching/MatchingWrapper.tsx

@@ -3,12 +3,12 @@ import styled from 'styled-components';
 import Matching from './Matching';
 import MatchingCancelButton from './MatchingCancelButton';
 
-const MatchingWrapper: React.FC<{ onClickHandler: () => void }> = ({ onClickHandler }) => {
+const MatchingWrapper: React.FC<{ cancelMatching: () => Promise<void> }> = ({ cancelMatching }) => {
   return (
     <CenterDiv>
       <ColumnDiv>
         <Matching />
-        <MatchingCancelButton onClickHandler={onClickHandler} />
+        <MatchingCancelButton cancelMatching={cancelMatching} />
       </ColumnDiv>
     </CenterDiv>
   );

client/src/pages/user/UserMatchingPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { useSubscription, useMutation } from '@apollo/client';
 import MatchedDriverData from '@components/userMatching/MatchedDriverData';
 import MapContainer from '@containers/MapContainer';
@@ -12,6 +12,7 @@ import { useGoogleMapApiState } from 'src/contexts/GoogleMapProvider';
 import { SAVE_USER_HISTORY } from '@queries/user/userHistory';
 import { clearPathPoint } from '@stores/modules/pathPoint';
 import { clearPreData } from '@stores/modules/preData';
+import pathPointToRequest from '@utils/pathPointToRequest';
 import {
   MATCHED_TAXI,
   TAXI_LOCATION,
@@ -21,28 +22,26 @@ import {
 } from '@queries/user/userMatching';
 
 const UserMatchingPage: React.FC = () => {
-  const pathPoint = useSelector((state: { pathPoint: PathPoint }) => state.pathPoint);
   const history = useHistory();
+  const dispatch = useDispatch();
+  const pathPoint = useSelector((state: { pathPoint: PathPoint }) => state.pathPoint);
+  const preData = useSelector((state: { preData: PreData }) => state.preData);
   const [requestMatch] = useMutation(REQUEST_MATCH);
   const [stopMatching] = useMutation(STOP_MATCHING);
+  const [saveUserHistory] = useMutation(SAVE_USER_HISTORY);
   const { loading, error } = useSubscription(MATCHING_SUBSCRIPTION);
   const { data: taxiData, error: taxiDataError } = useSubscription(MATCHED_TAXI);
   const { data: taxiLocationData, error: taxiLatlngError } = useSubscription(TAXI_LOCATION);
   const [requestCount, setRequestCount] = useState(MAX_REQUEST_COUNT - 1);
   const [isMatched, setMatchState] = useState(false);
   const [taxiInfo, setTaxiInfo] = useState({ id: '', name: '', carModel: '', carColor: '', plateNumber: '' });
   const [taxiLocation, setTaxiLocation] = useState(undefined);
-  const [isMatchCanceled, setMatchCancel] = useState(false);
   const { loaded } = useGoogleMapApiState();
-  const [saveUserHistory] = useMutation(SAVE_USER_HISTORY);
-  const preData = useSelector((state: { preData: PreData }) => state.preData);
-  const [request, setRequest] = useState({});
-  const dispatch = useDispatch();
-  const [startTime, setStartTime] = useState<string>('');
   const [currentAlert, setCurrentAlert] = useState<any>(undefined);
+  const startTime = useRef('');
 
   useEffect(() => {
-    (async () => await registMatchingList())();
+    registMatchingList();
   }, []);
 
   useEffect(() => {
@@ -77,7 +76,7 @@ const UserMatchingPage: React.FC = () => {
       setRequestCount(requestCount - 1);
     }, MATCHING_INTERVAL);
 
-    if (!loading || isMatchCanceled) clearInterval(timer);
+    // if (!loading || isMatchCanceled) clearInterval(timer);
     return () => {
       clearInterval(timer);
       if (requestCount === 0) {
@@ -90,37 +89,19 @@ const UserMatchingPage: React.FC = () => {
   }, [requestCount, isMatched]);
 
   const registMatchingList = async () => {
-    setRequest({
-      startLocation: {
-        name: pathPoint.startPointName,
-        latlng: {
-          ...pathPoint.startPoint,
-        },
-      },
-      endLocation: {
-        name: pathPoint.endPointName,
-        latlng: {
-          ...pathPoint.endPoint,
+    const request = pathPointToRequest(pathPoint);
+    try {
+      const {
+        data: {
+          requestMatching: { _, __ },
         },
-      },
-    });
+      } = await requestMatch({ variables: { request } });
+    } catch (error) {
+      console.error(error);
+      Toast.fail('매칭을 다시 시도 해주세요.', Toast.SHORT);
+    }
   };
 
-  useEffect(() => {
-    (async () => {
-      try {
-        const {
-          data: {
-            requestMatching: { _, __ },
-          },
-        } = await requestMatch({ variables: { request } });
-      } catch (error) {
-        console.error(error);
-        Toast.fail('매칭을 다시 시도 해주세요.', Toast.SHORT);
-      }
-    })();
-  }, [request]);
-
   useEffect(() => {
     if (error) onErrorHandler();
   }, [error]);
@@ -132,21 +113,21 @@ const UserMatchingPage: React.FC = () => {
 
   const saveHistory = useCallback(async () => {
     const info = {
-      request: request,
+      request: pathPointToRequest(pathPoint),
       fee: preData.info.fee,
       carModel: taxiInfo.carModel,
       plateNumber: taxiInfo.plateNumber,
-      startTime: startTime,
+      startTime: startTime.current,
       endTime: new Date().toString(),
     };
     const {
       data: { saveUserHistory: result },
     } = await saveUserHistory({ variables: { info } });
     return result;
-  }, [request, preData, taxiInfo, startTime]);
+  }, [preData, taxiInfo]);
 
   const showOnBoardAlert = useCallback(() => {
-    setStartTime(new Date().toString());
+    startTime.current = new Date().toString();
     const alertInstance = alertModal('탑승 완료', '5초 후 창이 닫힙니다.', modalButton(alertModal('', '').close));
     setCurrentAlert(alertInstance);
     setTimeout(alertInstance.close, 5000);
@@ -186,22 +167,16 @@ const UserMatchingPage: React.FC = () => {
     } catch (error) {
       console.error(error);
     } finally {
-      setMatchCancel(true);
       history.push('/user/map');
     }
   }, []);
 
-  const onClickHandler = useCallback(async () => {
-    await cancelMatching();
-    Toast.show('호출을 취소했습니다.', Toast.SHORT);
-  }, [cancelMatching]);
-
   return (
     <>
       {loaded && (
         <>
           <RequestInfo startPoint={pathPoint.startPointName || ''} endPoint={pathPoint.endPointName || ''} />
-          {loading && <MatchingWrapper onClickHandler={onClickHandler} />}
+          {loading && <MatchingWrapper cancelMatching={cancelMatching} />}
           <MapContainer isMatched={isMatched} taxiLocation={taxiLocation} />
           {isMatched && <MatchedDriverData taxiInfo={taxiInfo} />}
         </>

client/src/utils/pathPointToRequest.ts

@@ -0,0 +1,20 @@
+import { PathPoint, Request } from '@custom-types';
+
+const pathPointToRequest = (pathPoint: PathPoint): Request => {
+  return {
+    startLocation: {
+      name: pathPoint.startPointName || '',
+      latlng: {
+        ...pathPoint.startPoint,
+      },
+    },
+    endLocation: {
+      name: pathPoint.endPointName || '',
+      latlng: {
+        ...pathPoint.endPoint,
+      },
+    },
+  };
+};
+
+export default pathPointToRequest;