[Feature/BAR-7] @tanstack/react-query 설정 (#11)

* feat: @tanstack/react-query 설정

* feat: @tanstack/eslint-plugin-query 설정

* fix: 세미콜론 제거

.eslintrc.json

@@ -4,7 +4,8 @@
     "prettier",
     "eslint:recommended",
     "plugin:react-hooks/recommended",
-    "plugin:jsx-a11y/recommended"
+    "plugin:jsx-a11y/recommended",
+    "plugin:@tanstack/eslint-plugin-query/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "plugins": [

package.json

@@ -33,6 +33,8 @@
     "@storybook/nextjs": "^7.6.4",
     "@storybook/react": "^7.6.4",
     "@storybook/test": "^7.6.4",
+    "@tanstack/eslint-plugin-query": "^5.12.1",
+    "@tanstack/react-query-devtools": "^5.14.1",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

pages/_app.tsx

@@ -2,8 +2,14 @@ import type { AppProps } from 'next/app';
 
 import '@/src/styles/global.css';
 
+import TanstackQueryProvider from '@/src/components/Providers/TanstackQueryProvider';
+
 const App = ({ Component, pageProps }: AppProps) => {
-  return <Component {...pageProps} />;
+  return (
+    <TanstackQueryProvider dehydratedState={pageProps.dehydratedState}>
+      <Component {...pageProps} />
+    </TanstackQueryProvider>
+  );
 };
 
 export default App;

src/components/Providers/TanstackQueryProvider.tsx

@@ -0,0 +1,38 @@
+import { type PropsWithChildren, useState } from 'react';
+
+import {
+  type DehydratedState,
+  HydrationBoundary,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+interface TanstackQueryProviderProps {
+  dehydratedState: DehydratedState;
+}
+
+const TanstackQueryProvider = ({
+  children,
+  dehydratedState,
+}: PropsWithChildren<TanstackQueryProviderProps>) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+          },
+        },
+      }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
+      <ReactQueryDevtools />
+    </QueryClientProvider>
+  );
+};
+
+export default TanstackQueryProvider;