Chore: Chat-326-리액트쿼리-버전업

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@tanstack/react-query": "^5.28.14",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -15,7 +16,6 @@
     "date-fns": "^3.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-query": "^3.39.3",
     "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
     "react-slick": "^0.29.0",
@@ -51,6 +51,7 @@
     ]
   },
   "devDependencies": {
+    "@tanstack/react-query-devtools": "^5.28.14",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
     "eslint": "^8.56.0",

src/components/Tag/AllTags/AllTags.tsx

@@ -3,7 +3,7 @@ import styles from './AllTags.module.scss';
 
 import TagCategory from './TagCategory';
 import { DiaryDetailType } from '../../../apis/diaryDetailApi';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { getTagPool } from '../../../apis/tagApi';
 
 export interface TagType {

src/hooks/useCalendar.ts

@@ -1,6 +1,6 @@
 import { getDaysInMonth } from 'date-fns';
 import { useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { getCalendarData } from '../apis/home';
 import useCalendarStore from '../stores/calendarStore';
 
@@ -41,10 +41,10 @@ const useCalendar = () => {
     );
   }, [currentDate]);
 
-  const { data, isLoading, error } = useQuery<IChatData[]>(
-    ['calendarData', formattedDate],
-    () => getCalendarData(formattedDate),
-  );
+  const { data, isLoading, error } = useQuery<IChatData[]>({
+    queryKey: ['calendarData', formattedDate],
+    queryFn: () => getCalendarData(formattedDate),
+  });
 
   useEffect(() => {
     if (!isLoading && !error && data) {

src/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import './index.css';
 import App from './App';
 import './index.css';
@@ -15,5 +16,6 @@ const root = ReactDOM.createRoot(
 root.render(
   <QueryClientProvider client={client}>
     <App />
+    <ReactQueryDevtools initialIsOpen={false} />
   </QueryClientProvider>,
 );

src/pages/Analysis/Analysis.tsx

@@ -14,7 +14,7 @@ import BottomNav from '../../components/common/BottomNav/BottomNav';
 import styles from './Analysis.module.scss';
 import HomeHeader from '../../components/common/Header/Header';
 import { Link } from 'react-router-dom';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import {
   frequentAiType,
   frequentTagType,

src/pages/Analysis/AnalysisDetail/AnalysisDetail.tsx

@@ -5,7 +5,7 @@ import { useLocation, useParams } from 'react-router-dom';
 import BottomNav from '../../../components/common/BottomNav/BottomNav';
 import { useEffect, useState } from 'react';
 import TagRankingItem from '../../../components/Analysis/TagRankingItem';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { getTagDetailRanking } from '../../../apis/analysisApi';
 import { TagCounts, TagDetailRanking } from '../../../utils/analysisDetail';
 import { isLogin } from '../../../utils/user';
@@ -155,8 +155,12 @@ const AnalysisDetail = () => {
         })
       ) : (
         <div className={styles.NoTagResultContainer}>
-          <div className={styles.content1}>아직 {category} 태그를 사용한 적이 없어요.</div>
-          <div className={styles.content1}>일기에 {category} 태그를 적용해보세요!</div>
+          <div className={styles.content1}>
+            아직 {category} 태그를 사용한 적이 없어요.
+          </div>
+          <div className={styles.content1}>
+            일기에 {category} 태그를 적용해보세요!
+          </div>
         </div>
       )}
       <BottomNav page={2} isBtn={false} />

src/pages/Detail/Detail.tsx

@@ -16,7 +16,7 @@ import TagChip from '../../components/Tag/AllTags/TagChip';
 import { useEffect, useState } from 'react';
 import DetailPlusModal from '../../components/common/BottomSheets/DatailPlus/DetailPlusModal';
 import DiaryDeleteDialog from '../../components/common/Dialog/DiaryDeleteDialog/DiaryDeleteDialog';
-import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { deleteDiary, getDiaryDetail } from '../../apis/diaryDetailApi';
 import { isLogin } from '../../utils/user';
 
@@ -99,11 +99,14 @@ const Detail = () => {
     }
   });
 
-  const deleteMutation = useMutation(() => deleteDiary(diaryDate!), {
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteDiary(diaryDate!),
     // 삭제 요청 성공한 경우에만 실행
     onSuccess: () => {
       // 삭제된 일기 캐시 제거
-      queryClient.invalidateQueries(['DIARY', 'DETAIL', diaryDate]);
+      queryClient.invalidateQueries({
+        queryKey: ['DIARY', 'DETAIL', diaryDate],
+      });
     },
   });