feat: Tanstack Query 및 api 메서드 정의

package.json

@@ -21,7 +21,6 @@
     "qs": "^6.12.3"
   },
   "devDependencies": {
-    "@tanstack/eslint-plugin-query": "^5.50.1",
     "@types/qs": "^6.9.15",
     "cspell": "^8.10.0",
     "husky": "^9.0.11",

packages/core/eslint-config/base.js

@@ -39,7 +39,7 @@ module.exports = {
     'no-duplicate-imports': 'error',
     'no-unused-vars': ['error', { varsIgnorePattern: '^_', argsIgnorePattern: '^_' }],
     'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
-    '@typescript-eslint/consistent-type-imports': 'error',
+
     'react/no-unknown-property': ['error', { ignore: ['css'] }],
   },
   overrides: [{ files: ['*.js?(x)', '*.ts?(x)'] }],

packages/core/eslint-config/package.json

@@ -10,6 +10,7 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
+    "@tanstack/eslint-plugin-query": "^5.50.1",
     "@vercel/style-guide": "^5.2.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-turbo": "^2.0.0",

packages/core/eslint-config/react-internal.js

@@ -1,11 +1,15 @@
 const base_eslint_config = require('./base.js');
-import pluginQuery from '@tanstack/eslint-plugin-query';
 
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   ...base_eslint_config,
-  ...pluginQuery.configs['flat/recommended'],
-  extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier', 'turbo'],
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@tanstack/eslint-plugin-query/recommended',
+    'prettier',
+    'turbo',
+  ],
   env: {
     browser: true,
   },

packages/web-domains/src/common/apis/base.api.ts

@@ -1,8 +1,8 @@
-import axios, { AxiosRequestConfig } from 'axios';
+import axios, { AxiosRequestConfig, AxiosInstance } from 'axios';
 const baseURL = `/api`;
 
 export class Http {
-  private instance: axios.AxiosInstance;
+  private instance: AxiosInstance;
   constructor(path: string) {
     path = path.startsWith('/') ? path.slice(1) : path;
 

packages/web-domains/src/common/apis/check.api.ts

@@ -1,6 +1,7 @@
-import { AxiosRequestConfig } from 'axios';
 import { Http } from './base.api';
 
+import type { AxiosRequestConfig } from 'axios';
+
 class CheckAPI extends Http {
   Ping(params: string, config?: AxiosRequestConfig) {
     return this.GET(`${params}`, config);

packages/web-domains/src/common/contexts/QueryClientProvider.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { isServer, QueryClient, QueryClientProvider as TanstackProvider } from '@tanstack/react-query';
-import { ReactNode } from 'react';
+
+import type { ReactNode } from 'react';
 
 const makeQueryClient = () => {
   return new QueryClient({

packages/web-domains/src/first-domain/features/services/useFirstFeatureOfFirstDomainTestService.ts

@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
+
 import { checkAPI } from '../../../common/apis/check.api';
 
 export const useFirstFeatureOfFirstDomainService = () => {

packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx

@@ -1,6 +1,7 @@
 import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query';
-import { FirstFeatureOfFirstDomainTestContainer } from '../features/containers/FirstFeatureOfFirstDomainTestContainer';
+
 import { checkAPI } from '../../common/apis/check.api';
+import { FirstFeatureOfFirstDomainTestContainer } from '../features/containers/FirstFeatureOfFirstDomainTestContainer';
 
 export const FirstDomainExampleScreen = async () => {
   const queryClient = new QueryClient();
@@ -13,13 +14,11 @@ export const FirstDomainExampleScreen = async () => {
   });
 
   return (
-    <main className={styles.main}>
-      <HydrationBoundary state={dehydrate(queryClient)}>
-        <div>
-          <h1>도메인 화면을 전체 담당 하는 컴포넌트입니다.</h1>
-          <FirstFeatureOfFirstDomainTestContainer />
-        </div>
-      </HydrationBoundary>{' '}
-    </main>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <div>
+        <h1>도메인 화면을 전체 담당 하는 컴포넌트입니다.</h1>
+        <FirstFeatureOfFirstDomainTestContainer />
+      </div>
+    </HydrationBoundary>
   );
 };