[Add] React-Query devtools 설치

- 데이터 fetching 최적화 위해 React-Query Devtools 설치
- Devtools 사용위해 @tanstack/react-query로 라이브러리 교체 (기존에 react-query 라이브러리 사용)

Issues #122

client/package.json

@@ -13,6 +13,8 @@
     "@hyunbinseo/holidays-kr": "^2.2024.4",
     "@react-oauth/google": "^0.11.1",
     "@reduxjs/toolkit": "^1.9.5",
+    "@tanstack/react-query": "^4.35.3",
+    "@tanstack/react-query-devtools": "^4.35.3",
     "axios": "^1.5.0",
     "boxicons": "^2.1.4",
     "echarts": "^5.4.3",
@@ -21,7 +23,6 @@
     "gapi-script": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-query": "^3.39.3",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0",
     "react-spinners": "^0.13.8",

client/src/components/MarketComponents/MarketKospiChart.tsx

@@ -1,13 +1,13 @@
 import * as echarts from "echarts";
 import { styled } from "styled-components";
 import { useState, useEffect } from "react";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 
 const MarketkospiChart = () => {
   const [kospiData, setKospiData] = useState([]);
 
-  const { data, isLoading, error } = useQuery("kospi", getKospiData, {});
+  const { data, isLoading, error } = useQuery(["kospi"], getKospiData, {});
 
   useEffect(() => {
     if (data) {

client/src/hooks/stars/useDeletestars.ts

@@ -1,22 +1,22 @@
-import { useMutation } from 'react-query';
+import { useMutation } from "@tanstack/react-query";
 
 // DELETE 요청을 수행하는 함수
 const deleteStarData = async (companyId: number) => {
-  const accessToken = sessionStorage.getItem('accessToken');
+  const accessToken = sessionStorage.getItem("accessToken");
   const response = await fetch(`http://ec2-13-125-246-160.ap-northeast-2.compute.amazonaws.com:8080/stars/?companyId=${companyId}`, {
-      method: 'DELETE',
-      headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `${accessToken}`
-      },
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `${accessToken}`,
+    },
   });
 
   if (!response.ok) {
-      throw new Error('Failed to delete star data.');
+    throw new Error("Failed to delete star data.");
   }
 
   // DELETE 요청은 본문을 반환하지 않는 경우가 많으므로 json 변환을 생략
-  return true;  // 삭제가 성공적으로 완료됨을 나타냅니다.
+  return true; // 삭제가 성공적으로 완료됨을 나타냅니다.
 };
 
 const useDeleteStar = () => {