diff --git a/package-lock.json b/package-lock.json
index 01db405..9a3a633 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "chat-diary",
       "version": "0.1.0",
       "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",
@@ -20,7 +21,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",
@@ -32,6 +32,7 @@
         "zustand": "^4.4.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",
@@ -3876,6 +3877,57 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.28.13",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.28.13.tgz",
+      "integrity": "sha512-C3+CCOcza+mrZ7LglQbjeYEOTEC3LV0VN0eYaIN6GvqAZ8Foegdgch7n6QYPtT4FuLae5ALy+m+ZMEKpD6tMCQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.28.10",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.28.10.tgz",
+      "integrity": "sha512-5UN629fKa5/1K/2Pd26gaU7epxRrYiT1gy+V+pW5K6hnf1DeUKK3pANSb2eHKlecjIKIhTwyF7k9XdyE2gREvQ==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.28.14",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.28.14.tgz",
+      "integrity": "sha512-cZqt03Igb3I9tM72qNX5TAAmeYl75Z+k4Mv92VkXIXc2hCrv0fIywd7GN3JV1BBJl4mr7Cc+OOKKOPy8sNVOkA==",
+      "dependencies": {
+        "@tanstack/query-core": "5.28.13"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.28.14",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.28.14.tgz",
+      "integrity": "sha512-4CrFBI1O5wibV1ZdGAnBMmTuc7SiShhxWubxRMyIloeEioxs3DQkFbouGBea5nexuwIxAkvhUB8khpPnNjhxMw==",
+      "dev": true,
+      "dependencies": {
+        "@tanstack/query-devtools": "5.28.10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.28.14",
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.3",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.3.tgz",
@@ -5740,14 +5792,6 @@
         "node": ">= 8.0.0"
       }
     },
-    "node_modules/big-integer": {
-      "version": "1.6.52",
-      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.52.tgz",
-      "integrity": "sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
     "node_modules/big.js": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
@@ -5860,21 +5904,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/broadcast-channel": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
-      "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
-      "dependencies": {
-        "@babel/runtime": "^7.7.2",
-        "detect-node": "^2.1.0",
-        "js-sha3": "0.8.0",
-        "microseconds": "0.2.0",
-        "nano-time": "1.0.0",
-        "oblivious-set": "1.0.0",
-        "rimraf": "3.0.2",
-        "unload": "2.2.0"
-      }
-    },
     "node_modules/browser-process-hrtime": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
@@ -12115,11 +12144,6 @@
       "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
       "peer": true
     },
-    "node_modules/js-sha3": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
-      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -12520,15 +12544,6 @@
         "tmpl": "1.0.5"
       }
     },
-    "node_modules/match-sorter": {
-      "version": "6.3.3",
-      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.3.tgz",
-      "integrity": "sha512-sgiXxrRijEe0SzHKGX4HouCpfHRPnqteH42UdMEW7BlWy990ZkzcvonJGv4Uu9WE7Y1f8Yocm91+4qFPCbmNww==",
-      "dependencies": {
-        "@babel/runtime": "^7.23.8",
-        "remove-accents": "0.5.0"
-      }
-    },
     "node_modules/mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -12591,11 +12606,6 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/microseconds": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
-      "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
-    },
     "node_modules/mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -12779,14 +12789,6 @@
         "thenify-all": "^1.0.0"
       }
     },
-    "node_modules/nano-time": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
-      "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
-      "dependencies": {
-        "big-integer": "^1.6.16"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -13058,11 +13060,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/oblivious-set": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
-      "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
-    },
     "node_modules/obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -15084,31 +15081,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
-    "node_modules/react-query": {
-      "version": "3.39.3",
-      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
-      "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "broadcast-channel": "^3.4.1",
-        "match-sorter": "^6.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -15402,11 +15374,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/remove-accents": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
-      "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
-    },
     "node_modules/renderkid": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
@@ -17422,15 +17389,6 @@
         "node": ">= 10.0.0"
       }
     },
-    "node_modules/unload": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
-      "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
-      "dependencies": {
-        "@babel/runtime": "^7.6.2",
-        "detect-node": "^2.0.4"
-      }
-    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
diff --git a/package.json b/package.json
index c158e7b..85e0b64 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Tag/AllTags/AllTags.tsx b/src/components/Tag/AllTags/AllTags.tsx
index a4427f0..b74f4fd 100644
--- a/src/components/Tag/AllTags/AllTags.tsx
+++ b/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 {
diff --git a/src/hooks/useCalendar.ts b/src/hooks/useCalendar.ts
index 7a24608..af8edea 100644
--- a/src/hooks/useCalendar.ts
+++ b/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) {
diff --git a/src/index.tsx b/src/index.tsx
index 1769739..2d9dc10 100644
--- a/src/index.tsx
+++ b/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>,
 );
diff --git a/src/pages/Analysis/Analysis.tsx b/src/pages/Analysis/Analysis.tsx
index 3486d90..fed62c3 100644
--- a/src/pages/Analysis/Analysis.tsx
+++ b/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,
diff --git a/src/pages/Analysis/AnalysisDetail/AnalysisDetail.tsx b/src/pages/Analysis/AnalysisDetail/AnalysisDetail.tsx
index 0e1858a..e6098a9 100644
--- a/src/pages/Analysis/AnalysisDetail/AnalysisDetail.tsx
+++ b/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} />
diff --git a/src/pages/Detail/Detail.tsx b/src/pages/Detail/Detail.tsx
index e1ab020..1985d8f 100644
--- a/src/pages/Detail/Detail.tsx
+++ b/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],
+      });
     },
   });
 
diff --git a/src/pages/Detail/DetailEditing/DetailEditing.tsx b/src/pages/Detail/DetailEditing/DetailEditing.tsx
index a98c56e..39029a2 100644
--- a/src/pages/Detail/DetailEditing/DetailEditing.tsx
+++ b/src/pages/Detail/DetailEditing/DetailEditing.tsx
@@ -9,7 +9,7 @@ import { DetailCamera, DetailImgDelete } from '../../../assets/index';
 import ConfirmButton from '../../../components/common/Buttons/ConfirmBtn/ConfirmButton';
 import { useLocation, useNavigate } from 'react-router';
 import { useSearchParams } from 'react-router-dom';
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import {
   DiaryDetailType,
   modifyDiaryDetail,
@@ -189,11 +189,11 @@ const DetailEditing = () => {
     });
   }, [currentImgs]);
 
-  const { mutateAsync, isLoading } = useMutation((value: FormData) =>
-    modifyDiaryDetail(value),
-  );
+  const { mutateAsync, isPending } = useMutation({
+    mutationFn: (value: FormData) => modifyDiaryDetail(value),
+  });
 
-  if (isLoading) return <div>Loading...</div>;
+  if (isPending) return <div>Loading...</div>;
 
   return (
     <>
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index ba0b867..abe5671 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -8,7 +8,7 @@ import BottomNav from '../../components/common/BottomNav/BottomNav';
 import HomeHeader from '../../components/common/Header/Header';
 import HomeProfileHeader from '../../components/common/Header/HomeProfildHeader/HomeProfileHeader';
 import DateSelector from '../../components/common/BottomSheets/DateSelect/DateSelector';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { getDiaryList } from '../../apis/diaryListApi';
 import { getDiaryStreakDate } from '../../apis/home';
 import { Diary, StreakDate } from '../../utils/diary';
diff --git a/src/pages/Login/Kakao/KakaoLogin.tsx b/src/pages/Login/Kakao/KakaoLogin.tsx
index 13efecd..70a6f8a 100644
--- a/src/pages/Login/Kakao/KakaoLogin.tsx
+++ b/src/pages/Login/Kakao/KakaoLogin.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { login } from '../../../apis/loginApi';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { IUserInfo } from '../../../utils/user';
 
 const KakaoLogin = () => {
diff --git a/src/pages/MyPage/Notice/Notice.tsx b/src/pages/MyPage/Notice/Notice.tsx
index 7676f11..de4d74c 100644
--- a/src/pages/MyPage/Notice/Notice.tsx
+++ b/src/pages/MyPage/Notice/Notice.tsx
@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import NoticeItem from '../../../components/MyPage/Notice/NoticeItem';
 import ChangeHeader from '../../../components/common/Header/ChangeHeader/ChangeHeader';
 import styles from './Notice.module.scss';
diff --git a/src/pages/Tag/Tag.tsx b/src/pages/Tag/Tag.tsx
index 1f0245c..62e315b 100644
--- a/src/pages/Tag/Tag.tsx
+++ b/src/pages/Tag/Tag.tsx
@@ -14,7 +14,7 @@ import HomeHeader from '../../components/common/Header/Header';
 import TagChip from '../../components/Tag/AllTags/TagChip';
 import { Link } from 'react-router-dom';
 import NoTagResult from '../../components/Tag/NoTagResult';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { getDiaryListByTag } from '../../apis/tagApi';
 import useTagStore from '../../stores/tagStore';
 import usePageStore from '../../stores/pageStore';