Merge pull request #10 from CHZZK-Study/chore/tanstack-query-setting

Chore: tanstack-query, MSW, 절대 경로 설정

.eslintrc.cjs

@@ -37,6 +37,6 @@ module.exports = {
   },
   parserOptions: {
     tsconfigRootDir: './',
-    project: ['./tsconfig.json', './tsconfig.app.json', './tsconfig.node.json'],
+    project: ['./tsconfig.json', './tsconfig.app.json', './tsconfig.node.json', './tsconfig.base.json']
   },
 };

package.json

@@ -20,6 +20,8 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.6",
+    "@tanstack/react-query": "^5.51.11",
+    "@tanstack/react-query-devtools": "^5.51.11",
     "classnames": "^2.5.1",
     "dotenv": "^16.4.5",
     "react": "^18.3.1",

src/main.tsx

@@ -4,11 +4,12 @@ import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import App from './App';
 import { store } from './store';
+import ReactQueryProvider from './provider/queryProvider';
 
 createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
+  <ReactQueryProvider showDevTools>
     <Provider store={store}>
       <App />
     </Provider>
-  </React.StrictMode>,
+  </ReactQueryProvider>,
 );

src/provider/queryProvider.tsx

@@ -0,0 +1,38 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import React, { useState } from 'react';
+
+interface ReactQueryProviderProps {
+  children: React.ReactNode;
+  showDevTools?: boolean;
+}
+
+function ReactQueryProvider({
+  showDevTools,
+  children,
+}: ReactQueryProviderProps) {
+  const [client] = useState(
+    new QueryClient({
+      defaultOptions: {
+        queries: {
+          refetchOnWindowFocus: false,
+          retryOnMount: true,
+          refetchOnReconnect: false,
+          retry: false,
+        },
+      },
+    }),
+  );
+  return (
+    <QueryClientProvider client={client}>
+      {showDevTools && <ReactQueryDevtools buttonPosition="bottom-left" />}
+      {children}
+    </QueryClientProvider>
+  );
+}
+
+ReactQueryProvider.defaultProps = {
+  showDevTools: false,
+};
+
+export default ReactQueryProvider;

tsconfig.app.json

@@ -1,4 +1,5 @@
 {
+  "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
@@ -23,5 +24,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": ["src/**/*"]
 }

tsconfig.base.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+
+    /* absolute paths */
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["/*"],
+      "@/components/*": ["components/*"],
+      "@/assets/*": ["assets/*"],
+      "@/constants/*": ["constants/*"],
+      "@/mocks/*": ["mocks/*"]
+    }
+  }
+}

tsconfig.node.json

@@ -1,4 +1,5 @@
 {
+  "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",

vite.config.ts

@@ -2,9 +2,19 @@
 
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+      '@/components': resolve(__dirname, 'src/components'),
+      '@/assets': resolve(__dirname, 'src/assets'),
+      '@/constants': resolve(__dirname, 'src/constants'),
+      '@/mocks': resolve(__dirname, 'src/mocks'),
+    },
+  },
   test: {
     globals: true,
     environment: 'jsdom',