훅 분리, 리렌더링

Author: ryd10227

src/global/apis/func/index.ts

@@ -1,12 +1,18 @@
 import { subwayFreshLineName } from '@/global/utils';
 import axios, { AxiosError } from 'axios';
 import { axiosInstance } from '../axiosInstance';
-import { SavedRoute, SearchPathsTypes, SearchStationNameTypes, SubwayLine } from '../entity';
+import {
+  AddRouteTypes,
+  SavedRoute,
+  SearchPathsTypes,
+  SearchStationNameTypes,
+  SubwayLine,
+} from '../entity';
 import { LoginFetchResponse } from '@/screens/loginScreen/apis/entity';
 import { API_BASE_URL } from '@env';
 
 /**
- * 인증 토근 재인증 axios
+ * 인증 토큰 재인증 axios
  */
 export const tokenReissueFetch = async ({
   accessToken,
@@ -166,3 +172,16 @@ export const getSavedRoutesFetch = async () => {
     throw er;
   }
 };
+
+/**
+ * 내 경로 저장 axios
+ */
+export const saveMyRoutesFetch = async (newRoute: object) => {
+  try {
+    const res = await axiosInstance.post('/api/v1/my_find_road/add_route', newRoute);
+    return res;
+  } catch (err) {
+    const er = err as AxiosError;
+    throw er;
+  }
+};

src/global/apis/hook/index.ts

@@ -2,6 +2,7 @@ import {
   deleteAccountFetch,
   getSavedRoutesFetch,
   getSearchRoutesFetch,
+  saveMyRoutesFetch,
   searchStationName,
 } from '../func';
 import { useMutation, useQuery } from 'react-query';
@@ -110,3 +111,20 @@ export const useGetSavedRoutesQuery = () => {
   const { data } = useQuery(['getRoads'], getSavedRoutesFetch);
   return { data };
 };
+
+/**
+ * 내 경로 저장 훅
+ */
+export const useSaveMyRoutesQuery = ({
+  onSuccess,
+  onError,
+}: {
+  onSuccess: () => void;
+  onError?: (error: any) => void;
+}) => {
+  const { data, mutate } = useMutation(saveMyRoutesFetch, {
+    onSuccess,
+    onError,
+  });
+  return { data, mutate };
+};

src/screens/nameNewRouteScreen/index.tsx

@@ -3,62 +3,55 @@ import { FontText, Input } from '@/global/ui';
 import { COLOR } from '@/global/constants';
 import React, { useState } from 'react';
 import { useRootNavigation } from '@/navigation/RootNavigation';
-import { AxiosError } from 'axios';
-import { axiosInstance } from '@/global/apis/axiosInstance';
-import { AddRouteTypes } from '@/global/apis/entity';
 import { useRoute } from '@react-navigation/native';
+import { useSaveMyRoutesQuery } from '@/global/apis/hook';
+import { useQueryClient } from 'react-query';
 
-interface SaveNewRouteProps {
-  newRouteName: string | undefined;
-  pathId: number | undefined;
-}
 const NameNewRouteScreen = () => {
   const { params } = useRoute();
   const { pathId } = params as { pathId: number };
   const navigation = useRootNavigation();
-  const [newRouteName, setNewRouteName] = useState<string>();
+  const [roadName, setRoadName] = useState<string>();
+  const queryClient = useQueryClient();
 
-  const saveRoute = async ({ newRouteName, pathId }: SaveNewRouteProps) => {
-    const newRoute = {
-      roadName: newRouteName,
-      totalTime: 0,
-      subwayTransitCount: 0,
-      firstStartStation: 'string',
-      lastEndStation: 'string',
-      subPaths: [
-        {
-          trafficType: 1,
-          distance: 0,
-          sectionTime: 0,
-          stationCount: 0,
-          lanes: [
-            {
-              name: 'string',
-              subwayCode: 0,
-              startName: 'string',
-              endName: pathId,
-            },
-          ],
-          subways: [
-            {
-              index: pathId,
-              stationName: '압구정',
-            },
-          ],
-        },
-      ],
-    };
+  const { mutate } = useSaveMyRoutesQuery({
+    onSuccess: async () => {
+      await queryClient.invalidateQueries();
+    },
+    onError: async (error: any) => {
+      await queryClient.invalidateQueries();
+      console.error(error);
+    },
+  });
 
-    try {
-      const res = await axiosInstance.post<{ newRoute: AddRouteTypes }>(
-        '/api/v1/my_find_road/add_route',
-        newRoute,
-      );
-      return res;
-    } catch (err) {
-      const er = err as AxiosError;
-      throw er;
-    }
+  const newRoute = {
+    roadName: roadName,
+    totalTime: 0,
+    subwayTransitCount: 0,
+    firstStartStation: 'string',
+    lastEndStation: 'string',
+    subPaths: [
+      {
+        trafficType: 1,
+        distance: 0,
+        sectionTime: 0,
+        stationCount: 0,
+        lanes: [
+          {
+            name: 'string',
+            subwayCode: 0,
+            startName: 'string',
+            endName: pathId,
+          },
+        ],
+        subways: [
+          {
+            index: pathId,
+            stationName: '압구정',
+          },
+        ],
+      },
+    ],
   };
 
   return (
@@ -75,16 +68,16 @@ const NameNewRouteScreen = () => {
       <InputBox>
         <Input
           placeholder="경로 이름을 입력하세요"
-          value={newRouteName}
-          onChangeText={(text) => setNewRouteName(text)}
+          value={roadName}
+          onChangeText={(text) => setRoadName(text)}
           inputMode="email"
           maxLength={10}
         ></Input>
       </InputBox>
 
       <TextLengthBox>
         <FontText
-          value={`${newRouteName?.length ? newRouteName.length : 0}/10`}
+          value={`${roadName?.length ? roadName.length : 0}/10`}
           textSize="12px"
           textWeight="Regular"
           textColor={COLOR.GRAY_999}
@@ -94,10 +87,10 @@ const NameNewRouteScreen = () => {
 
       <BottomBtn
         onPress={() => {
-          saveRoute({ newRouteName, pathId });
+          mutate(newRoute);
           navigation.popToTop();
         }}
-        disabled={!newRouteName}
+        disabled={!roadName}
       >
         <FontText
           value="완료"

src/screens/savedRoutesScreen/components/RenderSavedRoutes.tsx

@@ -3,11 +3,9 @@ import { View, StyleSheet } from 'react-native';
 import { FontText, TextButton } from '@/global/ui';
 import { COLOR } from '@/global/constants';
 import SubwayRoute from '@/screens/selectNewRouteScreen/components/SubwayRoute';
-import {
-  useDeleteSavedSubwayRoute,
-  useGetSavedRoutesQuery,
-} from '@/global/apis/hook';
+import { useDeleteSavedSubwayRoute, useGetSavedRoutesQuery } from '@/global/apis/hook';
 import MyTabModal from '@/global/components/MyTabModal';
+import { useQueryClient } from 'react-query';
 
 interface RenderSavedRoutesProps {
   id: number;
@@ -17,11 +15,14 @@ interface RenderSavedRoutesProps {
 const RenderSavedRoutes = () => {
   const [popupVisible, setPopupVisible] = useState<boolean>(false);
   const [routeToDelete, setRouteToDelete] = useState<number | null>(null);
+  const queryClient = useQueryClient();
+
   const { deleteMutate } = useDeleteSavedSubwayRoute({
-    onSuccess: () => {
-      // 리렌더링
+    onSuccess: async () => {
+      await queryClient.invalidateQueries();
     },
   });
+  
   const { data: savedRoutesData } = useGetSavedRoutesQuery();
 
   const renderSavedRoutes = () =>
@@ -30,18 +31,18 @@ const RenderSavedRoutes = () => {
         <View style={styles.containerRenderTitle}>
           <FontText
             value={roadName}
-            textSize="22px"
-            textWeight="Bold"
-            lineHeight="29px"
+            textSize="18px"
+            textWeight="SemiBold"
+            lineHeight="23px"
             textColor={COLOR.BASIC_BLACK}
           />
           <TextButton
             value="삭제"
-            textSize="16px"
+            textSize="13px"
             textColor={COLOR.GRAY_999}
             textWeight="Medium"
             onPress={() => showDeletePopup(id)}
-            lineHeight="21px"
+            lineHeight="19px"
           />
         </View>