diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d068833e8..9234a045c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,6 +13,7 @@
         "@emotion/styled": "^11.11.0",
         "@googlemaps/react-wrapper": "^1.1.35",
         "@tanstack/react-query": "^5.13.4",
+        "assert": "^2.1.0",
         "axios": "^1.4.0",
         "browser-image-compression": "^2.0.2",
         "dotenv": "^16.3.1",
@@ -20,7 +21,8 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.14.1",
-        "recoil": "^0.7.7"
+        "recoil": "^0.7.7",
+        "ts-pattern": "^5.0.6"
       },
       "devDependencies": {
         "@babel/preset-env": "^7.22.5",
@@ -37,7 +39,7 @@
         "@storybook/react-webpack5": "^7.2.2",
         "@storybook/testing-library": "^0.2.0",
         "@svgr/webpack": "^8.0.1",
-        "@tanstack/react-query-devtools": "^4.29.23",
+        "@tanstack/react-query-devtools": "^5.13.4",
         "@testing-library/cypress": "^9.0.0",
         "@trivago/prettier-plugin-sort-imports": "^4.1.1",
         "@types/google.maps": "^3.53.5",
@@ -6477,22 +6479,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@tanstack/match-sorter-utils": {
-      "version": "8.8.4",
-      "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz",
-      "integrity": "sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==",
-      "dev": true,
-      "dependencies": {
-        "remove-accents": "0.4.2"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/kentcdodds"
-      }
-    },
     "node_modules/@tanstack/query-core": {
       "version": "5.13.4",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.13.4.tgz",
@@ -6502,6 +6488,16 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.13.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.13.3.tgz",
+      "integrity": "sha512-1acztPKZexvM9Ns2T0aq4rMVSDA3VGdB73KF7zT/KNVl6VfnBvs24wuIRVSPZKqyZznZTzT3/DzcpntYqg9hmw==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/react-query": {
       "version": "5.13.4",
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.13.4.tgz",
@@ -6518,23 +6514,20 @@
       }
     },
     "node_modules/@tanstack/react-query-devtools": {
-      "version": "4.32.6",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-4.32.6.tgz",
-      "integrity": "sha512-Gd9pBkm2sbeze9P5Yp8R7y0rZVUdoIOhduomDjz138WdJuVbRS4Y8p6gX2uMJFsUFVe7jA6fX/D6NfQ9o5OS/A==",
+      "version": "5.13.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.13.4.tgz",
+      "integrity": "sha512-htYzfOrE6vucBCRrVLxW8qEg8mfC5UaMJMiFPgbv5yH3zoHtJSjVZP7fcvgTp3RwFKBr1IOQ9yHLTjSSXemS7A==",
       "dev": true,
       "dependencies": {
-        "@tanstack/match-sorter-utils": "^8.7.0",
-        "superjson": "^1.10.0",
-        "use-sync-external-store": "^1.2.0"
+        "@tanstack/query-devtools": "5.13.3"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "@tanstack/react-query": "^4.32.6",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "@tanstack/react-query": "^5.13.4",
+        "react": "^18.0.0"
       }
     },
     "node_modules/@testing-library/cypress": {
@@ -8201,15 +8194,15 @@
       }
     },
     "node_modules/assert": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/assert/-/assert-2.0.0.tgz",
-      "integrity": "sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==",
-      "dev": true,
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-2.1.0.tgz",
+      "integrity": "sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==",
       "dependencies": {
-        "es6-object-assign": "^1.1.0",
-        "is-nan": "^1.2.1",
-        "object-is": "^1.0.1",
-        "util": "^0.12.0"
+        "call-bind": "^1.0.2",
+        "is-nan": "^1.3.2",
+        "object-is": "^1.1.5",
+        "object.assign": "^4.1.4",
+        "util": "^0.12.5"
       }
     },
     "node_modules/assert-plus": {
@@ -8278,7 +8271,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
       "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -9087,7 +9079,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -9693,21 +9684,6 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "dev": true
     },
-    "node_modules/copy-anything": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
-      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
-      "dev": true,
-      "dependencies": {
-        "is-what": "^4.1.8"
-      },
-      "engines": {
-        "node": ">=12.13"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mesqueeb"
-      }
-    },
     "node_modules/copy-webpack-plugin": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz",
@@ -10445,7 +10421,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
       "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
-      "dev": true,
       "dependencies": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -11123,12 +11098,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/es6-object-assign": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
-      "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw==",
-      "dev": true
-    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -12981,7 +12950,6 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
       "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "dev": true,
       "dependencies": {
         "is-callable": "^1.1.3"
       }
@@ -13328,7 +13296,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
       "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -13590,7 +13557,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       },
@@ -13735,7 +13701,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
       "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.1"
       },
@@ -13747,7 +13712,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
       "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -13759,7 +13723,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -13771,7 +13734,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
       "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
-      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.2"
       },
@@ -14266,8 +14228,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/ini": {
       "version": "2.0.0",
@@ -14430,7 +14391,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
       "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -14505,7 +14465,6 @@
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
       "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -14594,7 +14553,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
       "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
-      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -14664,7 +14622,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
       "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.0",
         "define-properties": "^1.1.3"
@@ -14840,7 +14797,6 @@
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
       "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
-      "dev": true,
       "dependencies": {
         "which-typed-array": "^1.1.11"
       },
@@ -14903,18 +14859,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-what": {
-      "version": "4.1.15",
-      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.15.tgz",
-      "integrity": "sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12.13"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mesqueeb"
-      }
-    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -16717,7 +16661,6 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
       "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3"
@@ -16733,7 +16676,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -16742,7 +16684,6 @@
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
       "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -18413,12 +18354,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/remove-accents": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
-      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==",
-      "dev": true
-    },
     "node_modules/renderkid": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
@@ -19603,18 +19538,6 @@
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
       "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
-    "node_modules/superjson": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.13.1.tgz",
-      "integrity": "sha512-AVH2eknm9DEd3qvxM4Sq+LTCkSXE2ssfh1t11MHMXyYXFQyQ1HLgVvV+guLTsaQnJU3gnaVo34TohHPulY/wLg==",
-      "dev": true,
-      "dependencies": {
-        "copy-anything": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -20354,6 +20277,11 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/ts-pattern": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.0.6.tgz",
+      "integrity": "sha512-Y+jOjihlFriWzcBjncPCf2/am+Hgz7LtsWs77pWg5vQQKLQj07oNrJryo/wK2G0ndNaoVn2ownFMeoeAuReu3Q=="
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.2",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz",
@@ -20868,20 +20796,10 @@
         }
       }
     },
-    "node_modules/use-sync-external-store": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
-      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
-      "dev": true,
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/util": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
       "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
-      "dev": true,
       "dependencies": {
         "inherits": "^2.0.3",
         "is-arguments": "^1.0.4",
@@ -21609,7 +21527,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz",
       "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
-      "dev": true,
       "dependencies": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
@@ -26141,20 +26058,17 @@
       "dev": true,
       "optional": true
     },
-    "@tanstack/match-sorter-utils": {
-      "version": "8.8.4",
-      "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz",
-      "integrity": "sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==",
-      "dev": true,
-      "requires": {
-        "remove-accents": "0.4.2"
-      }
-    },
     "@tanstack/query-core": {
       "version": "5.13.4",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.13.4.tgz",
       "integrity": "sha512-8+rJucXvC/xlr4OrxHhEIob/cTlbT4fgmz1VsvB0D12FRStKaXeLORNGcOhSAynRd2NL74SV/Qq0IIb4DedLcA=="
     },
+    "@tanstack/query-devtools": {
+      "version": "5.13.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.13.3.tgz",
+      "integrity": "sha512-1acztPKZexvM9Ns2T0aq4rMVSDA3VGdB73KF7zT/KNVl6VfnBvs24wuIRVSPZKqyZznZTzT3/DzcpntYqg9hmw==",
+      "dev": true
+    },
     "@tanstack/react-query": {
       "version": "5.13.4",
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.13.4.tgz",
@@ -26164,14 +26078,12 @@
       }
     },
     "@tanstack/react-query-devtools": {
-      "version": "4.32.6",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-4.32.6.tgz",
-      "integrity": "sha512-Gd9pBkm2sbeze9P5Yp8R7y0rZVUdoIOhduomDjz138WdJuVbRS4Y8p6gX2uMJFsUFVe7jA6fX/D6NfQ9o5OS/A==",
+      "version": "5.13.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.13.4.tgz",
+      "integrity": "sha512-htYzfOrE6vucBCRrVLxW8qEg8mfC5UaMJMiFPgbv5yH3zoHtJSjVZP7fcvgTp3RwFKBr1IOQ9yHLTjSSXemS7A==",
       "dev": true,
       "requires": {
-        "@tanstack/match-sorter-utils": "^8.7.0",
-        "superjson": "^1.10.0",
-        "use-sync-external-store": "^1.2.0"
+        "@tanstack/query-devtools": "5.13.3"
       }
     },
     "@testing-library/cypress": {
@@ -27525,15 +27437,15 @@
       }
     },
     "assert": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/assert/-/assert-2.0.0.tgz",
-      "integrity": "sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==",
-      "dev": true,
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-2.1.0.tgz",
+      "integrity": "sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==",
       "requires": {
-        "es6-object-assign": "^1.1.0",
-        "is-nan": "^1.2.1",
-        "object-is": "^1.0.1",
-        "util": "^0.12.0"
+        "call-bind": "^1.0.2",
+        "is-nan": "^1.3.2",
+        "object-is": "^1.1.5",
+        "object.assign": "^4.1.4",
+        "util": "^0.12.5"
       }
     },
     "assert-plus": {
@@ -27589,8 +27501,7 @@
     "available-typed-arrays": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
-      "dev": true
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
     },
     "aws-sign2": {
       "version": "0.7.0",
@@ -28200,7 +28111,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -28663,15 +28573,6 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "dev": true
     },
-    "copy-anything": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
-      "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
-      "dev": true,
-      "requires": {
-        "is-what": "^4.1.8"
-      }
-    },
     "copy-webpack-plugin": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz",
@@ -29219,7 +29120,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
       "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
-      "dev": true,
       "requires": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -29759,12 +29659,6 @@
         "is-symbol": "^1.0.2"
       }
     },
-    "es6-object-assign": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
-      "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw==",
-      "dev": true
-    },
     "esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -31051,7 +30945,6 @@
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
       "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "dev": true,
       "requires": {
         "is-callable": "^1.1.3"
       }
@@ -31308,7 +31201,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
       "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -31497,7 +31389,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
       "requires": {
         "get-intrinsic": "^1.1.3"
       }
@@ -31609,7 +31500,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
       "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-      "dev": true,
       "requires": {
         "get-intrinsic": "^1.1.1"
       }
@@ -31617,20 +31507,17 @@
     "has-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-      "dev": true
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg=="
     },
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
     },
     "has-tostringtag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
       "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
-      "dev": true,
       "requires": {
         "has-symbols": "^1.0.2"
       }
@@ -31988,8 +31875,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
       "version": "2.0.0",
@@ -32115,7 +32001,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
       "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -32168,8 +32053,7 @@
     "is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
-      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-      "dev": true
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA=="
     },
     "is-ci": {
       "version": "3.0.1",
@@ -32225,7 +32109,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
       "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
-      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
@@ -32271,7 +32154,6 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
       "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.0",
         "define-properties": "^1.1.3"
@@ -32381,7 +32263,6 @@
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
       "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
-      "dev": true,
       "requires": {
         "which-typed-array": "^1.1.11"
       }
@@ -32423,12 +32304,6 @@
         "get-intrinsic": "^1.1.1"
       }
     },
-    "is-what": {
-      "version": "4.1.15",
-      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.15.tgz",
-      "integrity": "sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA==",
-      "dev": true
-    },
     "is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -33781,7 +33656,6 @@
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
       "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3"
@@ -33790,14 +33664,12 @@
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
     },
     "object.assign": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
       "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -35024,12 +34896,6 @@
         "unist-util-visit": "^2.0.0"
       }
     },
-    "remove-accents": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
-      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==",
-      "dev": true
-    },
     "renderkid": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
@@ -35958,15 +35824,6 @@
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
       "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
-    "superjson": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.13.1.tgz",
-      "integrity": "sha512-AVH2eknm9DEd3qvxM4Sq+LTCkSXE2ssfh1t11MHMXyYXFQyQ1HLgVvV+guLTsaQnJU3gnaVo34TohHPulY/wLg==",
-      "dev": true,
-      "requires": {
-        "copy-anything": "^3.0.2"
-      }
-    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -36532,6 +36389,11 @@
         }
       }
     },
+    "ts-pattern": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.0.6.tgz",
+      "integrity": "sha512-Y+jOjihlFriWzcBjncPCf2/am+Hgz7LtsWs77pWg5vQQKLQj07oNrJryo/wK2G0ndNaoVn2ownFMeoeAuReu3Q=="
+    },
     "tsconfig-paths": {
       "version": "3.14.2",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz",
@@ -36890,18 +36752,10 @@
         "tslib": "^2.0.0"
       }
     },
-    "use-sync-external-store": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
-      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
-      "dev": true,
-      "requires": {}
-    },
     "util": {
       "version": "0.12.5",
       "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
       "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
-      "dev": true,
       "requires": {
         "inherits": "^2.0.3",
         "is-arguments": "^1.0.4",
@@ -37430,7 +37284,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.11.tgz",
       "integrity": "sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==",
-      "dev": true,
       "requires": {
         "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
diff --git a/frontend/package.json b/frontend/package.json
index 09e032dc6..ab073b2fc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -39,6 +39,7 @@
     "@emotion/styled": "^11.11.0",
     "@googlemaps/react-wrapper": "^1.1.35",
     "@tanstack/react-query": "^5.13.4",
+    "assert": "^2.1.0",
     "axios": "^1.4.0",
     "browser-image-compression": "^2.0.2",
     "dotenv": "^16.3.1",
@@ -46,7 +47,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1",
-    "recoil": "^0.7.7"
+    "recoil": "^0.7.7",
+    "ts-pattern": "^5.0.6"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.22.5",
@@ -63,7 +65,7 @@
     "@storybook/react-webpack5": "^7.2.2",
     "@storybook/testing-library": "^0.2.0",
     "@svgr/webpack": "^8.0.1",
-    "@tanstack/react-query-devtools": "^4.29.23",
+    "@tanstack/react-query-devtools": "^5.13.4",
     "@testing-library/cypress": "^9.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/google.maps": "^3.53.5",
diff --git a/frontend/src/constants/trip.ts b/frontend/src/constants/trip.ts
index 8c18925ed..9580bfd49 100644
--- a/frontend/src/constants/trip.ts
+++ b/frontend/src/constants/trip.ts
@@ -27,4 +27,4 @@ export const TRIP_TYPE = {
   PERSONAL: 'PERSONAL',
   SHARED: 'SHARED',
   PUBLISHED: 'PUBLISHED',
-};
+} as const;
diff --git a/frontend/src/hooks/api/queryClient.ts b/frontend/src/hooks/api/queryClient.ts
index b47ff70eb..d07fb13d6 100644
--- a/frontend/src/hooks/api/queryClient.ts
+++ b/frontend/src/hooks/api/queryClient.ts
@@ -6,9 +6,7 @@ export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       retry: NETWORK.RETRY_COUNT,
-      suspense: true,
-      useErrorBoundary: true,
-      cacheTime: 0,
+      gcTime: 0,
     },
   },
 });
diff --git a/frontend/src/hooks/api/useCityQuery.ts b/frontend/src/hooks/api/useCityQuery.ts
index 8a32d7c27..ce11f037b 100644
--- a/frontend/src/hooks/api/useCityQuery.ts
+++ b/frontend/src/hooks/api/useCityQuery.ts
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -7,10 +7,12 @@ import { getCity } from '@api/city/getCity';
 import type { CityData } from '@type/city';
 
 export const useCityQuery = () => {
-  const { data } = useQuery<CityData[], AxiosError>(['city'], getCity, {
-    cacheTime: 24 * 60 * 60 * 60 * 1000,
+  const { data: cityData } = useSuspenseQuery<CityData[], AxiosError>({
+    queryKey: ['city'],
+    queryFn: getCity,
+    gcTime: 24 * 60 * 60 * 60 * 1000,
     staleTime: Infinity,
   });
 
-  return { cityData: data! };
+  return { cityData };
 };
diff --git a/frontend/src/hooks/api/useCommunityTripQuery.ts b/frontend/src/hooks/api/useCommunityTripQuery.ts
index d3f49a734..3ff1ed231 100644
--- a/frontend/src/hooks/api/useCommunityTripQuery.ts
+++ b/frontend/src/hooks/api/useCommunityTripQuery.ts
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { useRecoilValue } from 'recoil';
 
@@ -13,9 +13,10 @@ import type { TripData } from '@type/trip';
 export const useCommunityTripQuery = (tripId: string) => {
   const isLoggedIn = useRecoilValue(isLoggedInState);
 
-  const { data } = useQuery<TripData, AxiosError>(['PUBLISHED', tripId], () =>
-    getCommunityTrip(tripId, isLoggedIn)
-  );
+  const { data: communityTripData } = useSuspenseQuery<TripData, AxiosError>({
+    queryKey: ['published', tripId],
+    queryFn: () => getCommunityTrip(tripId, isLoggedIn),
+  });
 
-  return { tripData: data! };
+  return { communityTripData };
 };
diff --git a/frontend/src/hooks/api/useCommunityTripsQuery.ts b/frontend/src/hooks/api/useCommunityTripsQuery.ts
index bc2efd184..945bfab61 100644
--- a/frontend/src/hooks/api/useCommunityTripsQuery.ts
+++ b/frontend/src/hooks/api/useCommunityTripsQuery.ts
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -7,9 +7,10 @@ import { getCommunityTrips } from '@api/trips/getCommunityTrips';
 import type { CommunityTripsData } from '@type/trips';
 
 export const useCommunityTripsQuery = (page: number, size: number, isLoggedIn: boolean) => {
-  const { data } = useQuery<CommunityTripsData, AxiosError>(['communityTrips', page], () =>
-    getCommunityTrips(page, size, isLoggedIn)
-  );
+  const { data: communityTripsData } = useSuspenseQuery<CommunityTripsData, AxiosError>({
+    queryKey: ['communityTrips', page, size, isLoggedIn],
+    queryFn: () => getCommunityTrips(page, size, isLoggedIn),
+  });
 
-  return { tripsData: data! };
+  return { communityTripsData };
 };
diff --git a/frontend/src/hooks/api/useDayLogTitleMutation.ts b/frontend/src/hooks/api/useDayLogTitleMutation.ts
index bb135eab4..f71692409 100644
--- a/frontend/src/hooks/api/useDayLogTitleMutation.ts
+++ b/frontend/src/hooks/api/useDayLogTitleMutation.ts
@@ -26,7 +26,7 @@ export const useDayLogTitleMutation = () => {
       createToast('소제목 변경에 실패했습니다. 잠시 후 다시 시도해 주세요.');
     },
     onSuccess: (_, { tripId }) => {
-      queryClient.invalidateQueries(['trip', tripId]);
+      queryClient.invalidateQueries({ queryKey: ['trip', tripId] });
     },
   });
 
diff --git a/frontend/src/hooks/api/useExpenseCategoryQuery.ts b/frontend/src/hooks/api/useExpenseCategoryQuery.ts
index 787a86eca..610c4abb6 100644
--- a/frontend/src/hooks/api/useExpenseCategoryQuery.ts
+++ b/frontend/src/hooks/api/useExpenseCategoryQuery.ts
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -7,10 +7,10 @@ import { getExpenseCategory } from '@api/expense/getExpenseCategory';
 import type { ExpenseCategoryData } from '@type/expense';
 
 export const useExpenseCategoryQuery = () => {
-  const { data } = useQuery<ExpenseCategoryData[], AxiosError>(
-    ['expenseCategory'],
-    getExpenseCategory
-  );
+  const { data: expenseCategoryData } = useSuspenseQuery<ExpenseCategoryData[], AxiosError>({
+    queryKey: ['expenseCategory'],
+    queryFn: getExpenseCategory,
+  });
 
-  return { expenseCategoryData: data! };
+  return { expenseCategoryData };
 };
diff --git a/frontend/src/hooks/api/useExpenseQuery.ts b/frontend/src/hooks/api/useExpenseQuery.ts
index e13fe7d04..838efd0fa 100644
--- a/frontend/src/hooks/api/useExpenseQuery.ts
+++ b/frontend/src/hooks/api/useExpenseQuery.ts
@@ -1,4 +1,6 @@
-import { useQuery } from '@tanstack/react-query';
+import { match } from 'ts-pattern';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -24,14 +26,15 @@ export const useExpenseQuery = (tripId: string, tripType: TripTypeData) => {
     queryFn.expense = () => getSharedExpense(tripId);
   }
 
-  const { data } = useQuery<ExpenseData, AxiosError>(
-    [`${tripType}expense`, tripId],
-    queryFn.expense,
-    {
-      cacheTime: 5 * 60 * 1000,
-      staleTime: 60 * 1000,
-    }
-  );
-
-  return { expenseData: data! };
+  const { data: expenseData } = useSuspenseQuery<ExpenseData, AxiosError>({
+    queryKey: ['expense', tripType, tripId],
+    queryFn: match(tripType)
+      .with(TRIP_TYPE.PUBLISHED, () => () => getCommunityTripExpense(tripId))
+      .with(TRIP_TYPE.SHARED, () => () => getSharedExpense(tripId))
+      .otherwise(() => () => getExpense(tripId)),
+    gcTime: 5 * 60 * 1000,
+    staleTime: 60 * 1000,
+  });
+
+  return { expenseData };
 };
diff --git a/frontend/src/hooks/api/useRecommendedTripsQuery.ts b/frontend/src/hooks/api/useRecommendedTripsQuery.ts
index f678618cf..4607d04b2 100644
--- a/frontend/src/hooks/api/useRecommendedTripsQuery.ts
+++ b/frontend/src/hooks/api/useRecommendedTripsQuery.ts
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -7,9 +7,10 @@ import { getRecommendedTrips } from '@api/trips/getRecommendedTrips';
 import type { RecommendedTripsData } from '@type/trips';
 
 export const useRecommendedTripsQuery = (isLoggedIn: boolean) => {
-  const { data } = useQuery<RecommendedTripsData, AxiosError>(['recommendedTrips'], () =>
-    getRecommendedTrips(isLoggedIn)
-  );
+  const { data: recommendedTripsData } = useSuspenseQuery<RecommendedTripsData, AxiosError>({
+    queryKey: ['recommendedTrips', isLoggedIn],
+    queryFn: () => getRecommendedTrips(isLoggedIn),
+  });
 
-  return { tripsData: data! };
+  return { recommendedTripsData };
 };
diff --git a/frontend/src/hooks/api/useSharedTripQuery.ts b/frontend/src/hooks/api/useSharedTripQuery.ts
index 73d6e91ab..4d5e09087 100644
--- a/frontend/src/hooks/api/useSharedTripQuery.ts
+++ b/frontend/src/hooks/api/useSharedTripQuery.ts
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -7,7 +7,10 @@ import { getSharedTrip } from '@api/trip/getSharedTrip';
 import type { TripData } from '@type/trip';
 
 export const useSharedTripQuery = (tripId: string) => {
-  const { data } = useQuery<TripData, AxiosError>(['SHARED', tripId], () => getSharedTrip(tripId));
+  const { data: sharedTripData } = useSuspenseQuery<TripData, AxiosError>({
+    queryKey: ['shared', tripId],
+    queryFn: () => getSharedTrip(tripId),
+  });
 
-  return { tripData: data! };
+  return { sharedTripData };
 };
diff --git a/frontend/src/hooks/api/useTripEditPageQueries.ts b/frontend/src/hooks/api/useTripEditPageQueries.ts
index 15297dcf1..b039653bb 100644
--- a/frontend/src/hooks/api/useTripEditPageQueries.ts
+++ b/frontend/src/hooks/api/useTripEditPageQueries.ts
@@ -1,4 +1,4 @@
-import { useQueries } from '@tanstack/react-query';
+import { useSuspenseQueries } from '@tanstack/react-query';
 
 import { getExpenseCategory } from '@api/expense/getExpenseCategory';
 import { getTrip } from '@api/trip/getTrip';
@@ -6,12 +6,12 @@ import { getTrip } from '@api/trip/getTrip';
 import { TRIP_TYPE } from '@constants/trip';
 
 export const useTripEditPageQueries = (tripId: string) => {
-  const [tripQuery, expenseCategoryQuery] = useQueries({
+  const [{ data: tripData }, { data: expenseCategoryData }] = useSuspenseQueries({
     queries: [
       { queryKey: [TRIP_TYPE.PERSONAL, tripId], queryFn: () => getTrip(tripId) },
       { queryKey: ['expenseCategory'], queryFn: getExpenseCategory, staleTime: Infinity },
     ],
   });
 
-  return { tripData: tripQuery.data!, expenseCategoryData: expenseCategoryQuery.data! };
+  return { tripData, expenseCategoryData };
 };
diff --git a/frontend/src/hooks/api/useTripQuery.ts b/frontend/src/hooks/api/useTripQuery.ts
index f05df8a50..9f494470c 100644
--- a/frontend/src/hooks/api/useTripQuery.ts
+++ b/frontend/src/hooks/api/useTripQuery.ts
@@ -1,4 +1,6 @@
-import { useQuery } from '@tanstack/react-query';
+import { match } from 'ts-pattern';
+
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { useRecoilValue } from 'recoil';
 
@@ -17,22 +19,15 @@ import { TRIP_TYPE } from '@constants/trip';
 export const useTripQuery = (tripType: TripTypeData, tripId: string) => {
   const isLoggedIn = useRecoilValue(isLoggedInState);
 
-  const queryFn: { trip: () => Promise<TripData> } = {
-    trip: () => getTrip(tripId),
-  };
-
-  if (tripType === TRIP_TYPE.PUBLISHED) {
-    queryFn.trip = () => getCommunityTrip(tripId, isLoggedIn);
-  }
-
-  if (tripType === TRIP_TYPE.SHARED) {
-    queryFn.trip = () => getSharedTrip(tripId);
-  }
-
-  const { data } = useQuery<TripData, AxiosError>([tripType, tripId], queryFn.trip, {
-    cacheTime: 5 * 60 * 1000,
+  const { data: tripData } = useSuspenseQuery<TripData, AxiosError>({
+    queryKey: ['trip', tripType, tripId],
+    queryFn: match(tripType)
+      .with(TRIP_TYPE.PUBLISHED, () => () => getCommunityTrip(tripId, isLoggedIn))
+      .with(TRIP_TYPE.SHARED, () => () => getSharedTrip(tripId))
+      .otherwise(() => () => getTrip(tripId)),
+    gcTime: 5 * 60 * 1000,
     staleTime: 60 * 1000,
   });
 
-  return { tripData: data! };
+  return { tripData };
 };
diff --git a/frontend/src/hooks/api/useTripsQuery.ts b/frontend/src/hooks/api/useTripsQuery.ts
index be9a3a867..29db75c2e 100644
--- a/frontend/src/hooks/api/useTripsQuery.ts
+++ b/frontend/src/hooks/api/useTripsQuery.ts
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -7,7 +7,10 @@ import { getTrips } from '@api/trips/getTrips';
 import type { TripsData } from '@type/trips';
 
 export const useTripsQuery = () => {
-  const { data } = useQuery<TripsData[], AxiosError>(['trips'], getTrips);
+  const { data: tripsData } = useSuspenseQuery<TripsData[], AxiosError>({
+    queryKey: ['trips'],
+    queryFn: getTrips,
+  });
 
-  return { tripsData: data! };
+  return { tripsData };
 };
diff --git a/frontend/src/hooks/api/useUserInfoMutation.ts b/frontend/src/hooks/api/useUserInfoMutation.ts
index 5ed7ef354..9377959fc 100644
--- a/frontend/src/hooks/api/useUserInfoMutation.ts
+++ b/frontend/src/hooks/api/useUserInfoMutation.ts
@@ -17,7 +17,7 @@ export const useUserInfoMutation = () => {
   const userInfoMutation = useMutation({
     mutationFn: putUserInfo,
     onSuccess: () => {
-      queryClient.invalidateQueries(['userInfo']);
+      queryClient.invalidateQueries({ queryKey: ['userInfo'] });
 
       createToast('정보를 성공적으로 수정했습니다!', 'success');
     },
diff --git a/frontend/src/hooks/api/useUserInfoQuery.ts b/frontend/src/hooks/api/useUserInfoQuery.ts
index 8127626f4..cbfe79f3d 100644
--- a/frontend/src/hooks/api/useUserInfoQuery.ts
+++ b/frontend/src/hooks/api/useUserInfoQuery.ts
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import type { AxiosError } from 'axios';
 
@@ -7,10 +7,12 @@ import { getUserInfo } from '@api/member/getUserInfo';
 import type { UserData } from '@type/member';
 
 export const useUserInfoQuery = () => {
-  const { data } = useQuery<UserData, AxiosError>(['userInfo'], getUserInfo, {
-    cacheTime: 60 * 60 * 60 * 1000,
+  const { data: userInfoData } = useSuspenseQuery<UserData, AxiosError>({
+    queryKey: ['userInfo'],
+    queryFn: getUserInfo,
+    gcTime: 60 * 60 * 60 * 1000,
     staleTime: 60 * 60 * 60 * 1000,
   });
 
-  return { userInfoData: data! };
+  return { userInfoData };
 };
diff --git a/frontend/src/hooks/common/useMultipleImageUpload.ts b/frontend/src/hooks/common/useMultipleImageUpload.ts
index 48f183758..80c483408 100644
--- a/frontend/src/hooks/common/useMultipleImageUpload.ts
+++ b/frontend/src/hooks/common/useMultipleImageUpload.ts
@@ -24,7 +24,7 @@ export const useMultipleImageUpload = ({
   onError,
 }: UseMultipleImageUploadParams) => {
   const imageMutation = useImageMutation();
-  const isImageUploading = imageMutation.isLoading;
+  const isImageUploading = imageMutation.isPending;
 
   const initialImageUrls = convertToImageUrls([...initialImageNames]);
 
diff --git a/frontend/src/hooks/common/useSingleImageUpload.ts b/frontend/src/hooks/common/useSingleImageUpload.ts
index e16db7aa7..22cd0a624 100644
--- a/frontend/src/hooks/common/useSingleImageUpload.ts
+++ b/frontend/src/hooks/common/useSingleImageUpload.ts
@@ -19,7 +19,7 @@ export const useSingleImageUpload = ({
   updateFormImage,
 }: UseSingleImageUploadParams) => {
   const imageMutation = useImageMutation();
-  const isImageUploading = imageMutation.isLoading;
+  const isImageUploading = imageMutation.isPending;
 
   const [uploadedImageUrl, setUploadedImageUrl] = useState(initialImageUrl);
 
diff --git a/frontend/src/pages/CommunityPage/CommunityPage.tsx b/frontend/src/pages/CommunityPage/CommunityPage.tsx
index 2a1dc3a05..a488d71c5 100644
--- a/frontend/src/pages/CommunityPage/CommunityPage.tsx
+++ b/frontend/src/pages/CommunityPage/CommunityPage.tsx
@@ -21,8 +21,8 @@ const CommunityPage = () => {
 
   const isLoggedIn = useRecoilValue(isLoggedInState);
 
-  const { tripsData: recommendedTripsData } = useRecommendedTripsQuery(isLoggedIn);
-  const { tripsData: communityTripsData } = useCommunityTripsQuery(page, 10, isLoggedIn);
+  const { recommendedTripsData } = useRecommendedTripsQuery(isLoggedIn);
+  const { communityTripsData } = useCommunityTripsQuery(page, 10, isLoggedIn);
 
   const { pageIndexDatas, changeNavigationDatas } = useTripPageIndex(
     communityTripsData,
diff --git a/frontend/src/pages/CommunityTripPage/CommunityTripPage.tsx b/frontend/src/pages/CommunityTripPage/CommunityTripPage.tsx
index ad6c07e90..bbb91a5e4 100644
--- a/frontend/src/pages/CommunityTripPage/CommunityTripPage.tsx
+++ b/frontend/src/pages/CommunityTripPage/CommunityTripPage.tsx
@@ -17,19 +17,19 @@ const CommunityTripPage = () => {
 
   if (!tripId) throw new Error('존재하지 않는 여행입니다.');
 
-  const { tripData } = useCommunityTripQuery(tripId);
+  const { communityTripData } = useCommunityTripQuery(tripId);
 
   const { places, selectedDayLog, handleDayLogIdSelectClick } = useTripPage(
-    tripData.tripType,
+    communityTripData.tripType,
     tripId
   );
 
   return (
     <Flex>
       <section css={containerStyling}>
-        <TripInformation tripType={tripData.tripType} tripId={tripId} isEditable={false} />
+        <TripInformation tripType={communityTripData.tripType} tripId={tripId} isEditable={false} />
         <DayLogList
-          tripType={tripData.tripType}
+          tripType={communityTripData.tripType}
           tripId={tripId}
           selectedDayLog={selectedDayLog}
           isEditable={false}
@@ -40,8 +40,8 @@ const CommunityTripPage = () => {
         <GoogleMapWrapper>
           <TripMap
             places={places}
-            centerLat={tripData.cities[0].latitude}
-            centerLng={tripData.cities[0].longitude}
+            centerLat={communityTripData.cities[0].latitude}
+            centerLng={communityTripData.cities[0].longitude}
           />
         </GoogleMapWrapper>
       </section>
diff --git a/frontend/src/pages/SharedPage/SharedTripPage.tsx b/frontend/src/pages/SharedPage/SharedTripPage.tsx
index e52b70ec4..fcd5a9717 100644
--- a/frontend/src/pages/SharedPage/SharedTripPage.tsx
+++ b/frontend/src/pages/SharedPage/SharedTripPage.tsx
@@ -17,19 +17,19 @@ const SharedTripPage = () => {
 
   if (!tripId) throw new Error('존재하지 않는 공유코드입니다.');
 
-  const { tripData } = useSharedTripQuery(tripId);
+  const { sharedTripData } = useSharedTripQuery(tripId);
 
   const { places, selectedDayLog, handleDayLogIdSelectClick } = useTripPage(
-    tripData.tripType,
+    sharedTripData.tripType,
     tripId
   );
 
   return (
     <Flex>
       <section css={containerStyling}>
-        <TripInformation tripType={tripData.tripType} tripId={tripId} isEditable={false} />
+        <TripInformation tripType={sharedTripData.tripType} tripId={tripId} isEditable={false} />
         <DayLogList
-          tripType={tripData.tripType}
+          tripType={sharedTripData.tripType}
           tripId={tripId}
           selectedDayLog={selectedDayLog}
           isEditable={false}
@@ -40,8 +40,8 @@ const SharedTripPage = () => {
         <GoogleMapWrapper>
           <TripMap
             places={places}
-            centerLat={tripData.cities[0].latitude}
-            centerLng={tripData.cities[0].longitude}
+            centerLat={sharedTripData.cities[0].latitude}
+            centerLng={sharedTripData.cities[0].longitude}
           />
         </GoogleMapWrapper>
       </section>