[Refactor] 네트워크 중복 요청 제거

- 동일한 데이터 계속해서 API 요청하는 것이 아닌, 캐싱된 데이터 활용하도록 수정 (React-query 라이브러리 기능 활용)

Issues #122

client/src/components/StockOrderSection/WaitOrderIndicator.tsx

@@ -2,6 +2,7 @@ import { styled } from "styled-components";
 import { toast } from "react-toastify";
 import { useState, useEffect } from "react";
 import useGetMemberId from "../../hooks/useGetMemberId";
+import { useQueryClient } from "react-query";
 import * as Webstomp from "webstomp-client";
 import { dummyLogo } from "../../dummy/dummyLogo";
 import { volumeUnit } from "../../constant/constant";
@@ -15,6 +16,7 @@ const toastText02: string = " 체결 처리 되었습니다";
 const WaitOrderIndicator = () => {
   const { memberId } = useGetMemberId();
   const [waitOrder, setWaitOrder] = useState<WaitOrderProps | null>(null);
+  const queryClient = useQueryClient();
 
   useEffect(() => {
     if (memberId) {
@@ -40,6 +42,10 @@ const WaitOrderIndicator = () => {
 
   useEffect(() => {
     if (waitOrder !== null) {
+      queryClient.invalidateQueries("cash");
+      queryClient.invalidateQueries("holdingStock");
+      queryClient.invalidateQueries("orderRecord");
+
       const companyId = waitOrder.companyId;
       const type = waitOrder.orderType;
       const logo = dummyLogo[companyId - 1];

client/src/hooks/useGetCash.ts

@@ -7,9 +7,12 @@ const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080
 
 const useGetCash = () => {
   const isLogin = useSelector((state: StateProps) => state.login);
+  const login = isLogin === 1;
 
   const { data, isLoading, isError } = useQuery("cash", getCashData, {
-    enabled: isLogin === 1,
+    enabled: login,
+    staleTime: Infinity,
+    cacheTime: Infinity,
   });
 
   return { cashData: data, cashLoading: isLoading, cashError: isError };

client/src/hooks/useGetCompanyList.ts

@@ -2,7 +2,10 @@ import { useQuery } from "react-query";
 import axios from "axios";
 
 const useGetCompanyList = () => {
-  const { data, isLoading, error } = useQuery("companyList", getCompanyList, {});
+  const { data, isLoading, error } = useQuery("companyList", getCompanyList, {
+    staleTime: Infinity,
+    cacheTime: Infinity,
+  });
 
   return { companyList: data, compnayListLoading: isLoading, companyListError: error };
 };

client/src/hooks/useGetHoldingStock.ts

@@ -7,9 +7,12 @@ const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080
 
 const useGetHoldingStock = () => {
   const isLogin = useSelector((state: StateProps) => state.login);
+  const login = isLogin === 1;
 
   const { data, isLoading, isError } = useQuery("holdingStock", getHoldingStock, {
-    enabled: isLogin === 1,
+    enabled: login,
+    staleTime: Infinity,
+    cacheTime: Infinity,
   });
   return { holdingStockData: data, holdingStockLoading: isLoading, holdingStockError: isError };
 };

client/src/hooks/useGetMemberId.ts

@@ -6,11 +6,13 @@ import axios from "axios";
 const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/members";
 
 const useGetMemberId = () => {
-  const login = useSelector((state: StateProps) => state.login);
-  const isLogin = login === 1;
+  const islogin = useSelector((state: StateProps) => state.login);
+  const login = islogin === 1;
 
   const { data, isLoading, isError } = useQuery("memberId", getMemberId, {
-    enabled: isLogin,
+    enabled: login,
+    staleTime: Infinity,
+    cacheTime: Infinity,
   });
 
   return { memberId: data, memberIdLoading: isLoading, memberIdError: isError };

client/src/hooks/useGetStockData.ts

@@ -1,13 +1,12 @@
 import { isHoliday } from "@hyunbinseo/holidays-kr";
 import { useState, useEffect } from "react";
-import { useQuery, useQueryClient } from "react-query";
+import { useQuery } from "react-query";
 import axios from "axios";
 
 const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com/companies/charts/";
 
 const useGetStockData = (companyId: number) => {
   const [autoRefetch, setAutoRefetch] = useState(false);
-  const queryClient = useQueryClient();
 
   // 1) 주말, 공휴일 여부 체크
   const today = new Date();
@@ -53,12 +52,6 @@ const useGetStockData = (companyId: number) => {
     staleTime: Infinity,
     cacheTime: Infinity,
     refetchInterval: autoRefetch && dataRenewalTime ? 60000 * 30 : false, // 정각 혹은 30분에 맞춰서 30분 마다 데이터 리패칭
-    onSuccess: () => {
-      queryClient.invalidateQueries("stockInfo");
-      queryClient.invalidateQueries("cash");
-      queryClient.invalidateQueries("holdingStock");
-      queryClient.invalidateQueries("orderRecord");
-    },
   });
 
   return { stockPrice: data, stockPriceLoading: isLoading, stockPriceError: error };

client/src/hooks/useGetStockOrderRecord.ts

@@ -7,9 +7,12 @@ const url = "http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080
 
 const useGetStockOrderRecord = () => {
   const isLogin = useSelector((state: StateProps) => state.login);
+  const login = isLogin === 1;
 
   const { data, isLoading, isError } = useQuery("orderRecord", getOrderRecord, {
-    enabled: isLogin === 1,
+    enabled: login,
+    staleTime: Infinity,
+    cacheTime: Infinity,
   });
 
   return { orderRecordData: data, orderRecordLoading: isLoading, orderRecordError: isError };

client/src/hooks/useTradeStock.ts

@@ -16,7 +16,6 @@ const useTradeStock = () => {
       queryClient.invalidateQueries("holdingStock");
       queryClient.invalidateQueries("orderRecord");
 
-      // 🟢 중복되는 커스텀훅 -> 일단 기능구현 위해 처리함
       queryClient.invalidateQueries("stockHolds");
       queryClient.invalidateQueries("money");
     },