diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 55ad5579..1bebdb16 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -20,7 +20,6 @@ export default function RootLayout({ return ( - {/* {children} */} {children} diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index 6d97aae7..207b7aba 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -1,28 +1,3 @@ -import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query'; +import { FirstDomainExampleScreen } from '@sambad/web-domains/first-domain'; -import { checkAPI } from '../../../packages/web-domains/src/common/apis/check.api'; -import { FirstFeatureOfFirstDomainTestContainer } from '../../../packages/web-domains/src/first-domain/features/containers/FirstFeatureOfFirstDomainTestContainer'; - -import styles from './page.module.css'; - -export default async function FirstDomainExampleScreen() { - const queryClient = new QueryClient(); - - await queryClient.prefetchQuery({ - queryKey: ['health'], - queryFn: async () => { - return await checkAPI.Ping(''); - }, - }); - - return ( -
- -
-

도메인 화면을 전체 담당 하는 컴포넌트입니다.

- -
- {' '} -
- ); -} +export default FirstDomainExampleScreen; diff --git a/package.json b/package.json index 57bcfa37..f713a447 100644 --- a/package.json +++ b/package.json @@ -14,13 +14,9 @@ "generate:package": "turbo gen package-template" }, "dependencies": { - "@emotion/react": "^11.11.4", - "@tanstack/react-query": "^5.50.1", - "axios": "^1.7.2", - "qs": "^6.12.3" + "@emotion/react": "^11.11.4" }, "devDependencies": { - "@types/qs": "^6.9.15", "cspell": "^8.10.0", "husky": "^9.0.11", "next": "14.2.4", diff --git a/packages/web-domains/package.json b/packages/web-domains/package.json index f2c59389..53d3e2ce 100644 --- a/packages/web-domains/package.json +++ b/packages/web-domains/package.json @@ -11,7 +11,11 @@ "lint": "eslint . --max-warnings 0", "type-check": "tsc --noEmit" }, - "dependencies": {}, + "dependencies": { + "@tanstack/react-query": "^5.50.1", + "axios": "^1.7.2", + "qs": "^6.12.3" + }, "devDependencies": { "@sambad/sds": "workspace:*", "@sambad/eslint-config": "workspace:*", @@ -20,6 +24,7 @@ "@types/eslint": "^8.56.5", "@types/react": "^18.2.61", "@types/react-dom": "^18.2.19", + "@types/qs": "^6.9.15", "eslint": "^8.57.0", "react": "^18", "typescript": "^5.3.3" diff --git a/packages/web-domains/src/common/apis/base.api.ts b/packages/web-domains/src/common/apis/base.api.ts index e511a928..40b2d37e 100644 --- a/packages/web-domains/src/common/apis/base.api.ts +++ b/packages/web-domains/src/common/apis/base.api.ts @@ -1,41 +1,28 @@ -import axios, { AxiosRequestConfig, AxiosInstance } from 'axios'; +import axios from 'axios'; const baseURL = `/api`; -export class Http { - private instance: AxiosInstance; - constructor(path: string) { - path = path.startsWith('/') ? path.slice(1) : path; - - this.instance = axios.create({ - baseURL: `${baseURL}/${path}`, - }); - } +const axiosInstance = axios.create({ + baseURL: baseURL, +}); - protected async GET(url: string, config?: AxiosRequestConfig) { - const response = await this.instance.get(url, config); +export class Http { + static async GET(...args: Parameters) { + const response = await axiosInstance.get(...args); return response.data; } - protected async POST( - url: string, - payload?: Request, - config?: AxiosRequestConfig, - ) { - const response = await this.instance.post(url, payload, config); + static async POST(...args: Parameters) { + const response = await axiosInstance.post(...args); return response; } - protected async PUT( - url: string, - payload?: Request, - config?: AxiosRequestConfig, - ) { - const response = await this.instance.put(url, payload, config); + static async PUT(...args: Parameters) { + const response = await axiosInstance.put(...args); return response; } - protected async DELETE(url: string, config?: AxiosRequestConfig) { - const response = await this.instance.delete(url, config); + static async DELETE(...args: Parameters) { + const response = await axiosInstance.delete(...args); return response.data; } } diff --git a/packages/web-domains/src/common/apis/check.api.ts b/packages/web-domains/src/common/apis/check.api.ts deleted file mode 100644 index df60a2e3..00000000 --- a/packages/web-domains/src/common/apis/check.api.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Http } from './base.api'; - -import type { AxiosRequestConfig } from 'axios'; - -class CheckAPI extends Http { - Ping(params: string, config?: AxiosRequestConfig) { - return this.GET(`${params}`, config); - } -} - -export const checkAPI = new CheckAPI('actuator/health'); diff --git a/packages/web-domains/src/common/apis/queries/useHealthCheckQuery.ts b/packages/web-domains/src/common/apis/queries/useHealthCheckQuery.ts new file mode 100644 index 00000000..a27ad5b7 --- /dev/null +++ b/packages/web-domains/src/common/apis/queries/useHealthCheckQuery.ts @@ -0,0 +1,28 @@ +import { QueryClient, useQuery } from '@tanstack/react-query'; + +import { Http } from '../base.api'; + +const ping = () => Http.GET('/actuator/health'); + +export const useHealthCheckQuery = () => { + const { data } = useQuery({ + queryKey: ['health'], + queryFn: ping, + }); + + return { data }; +}; + +export const useHealthCheckPrefetchQuery = async () => { + const queryClient = new QueryClient(); + + const prefetchedData = await queryClient.prefetchQuery({ + queryKey: ['health'], + queryFn: ping, + }); + + return { + queryClient, + prefetchedData, + }; +}; diff --git a/packages/web-domains/src/common/contexts/QueryClientProvider.tsx b/packages/web-domains/src/common/contexts/QueryClientProvider.tsx index 840c1bde..87dfa701 100644 --- a/packages/web-domains/src/common/contexts/QueryClientProvider.tsx +++ b/packages/web-domains/src/common/contexts/QueryClientProvider.tsx @@ -1,7 +1,7 @@ 'use client'; import { isServer, QueryClient, QueryClientProvider as TanstackProvider } from '@tanstack/react-query'; -import type { ReactNode } from 'react'; +import type { PropsWithChildren } from 'react'; const makeQueryClient = () => { return new QueryClient({ @@ -28,7 +28,7 @@ const getQueryClient = () => { return browserQueryClient; }; -export const QueryClientProvider = ({ children }: { children?: ReactNode }) => { +export const QueryClientProvider = ({ children }: PropsWithChildren) => { const queryClient = getQueryClient(); return {children}; diff --git a/packages/web-domains/src/first-domain/features/services/useFirstFeatureOfFirstDomainTestService.ts b/packages/web-domains/src/first-domain/features/services/useFirstFeatureOfFirstDomainTestService.ts index bd965792..fbe260e6 100644 --- a/packages/web-domains/src/first-domain/features/services/useFirstFeatureOfFirstDomainTestService.ts +++ b/packages/web-domains/src/first-domain/features/services/useFirstFeatureOfFirstDomainTestService.ts @@ -1,22 +1,11 @@ -import { useQuery } from '@tanstack/react-query'; import { useEffect, useState } from 'react'; -import { checkAPI } from '../../../common/apis/check.api'; +import { useHealthCheckQuery } from '../../../common/apis/queries/useHealthCheckQuery'; export const useFirstFeatureOfFirstDomainService = () => { const [displayText, setDisplayText] = useState(''); - const { data } = useQuery({ - queryKey: ['health'], - queryFn: async () => { - return await checkAPI.Ping(''); - }, - - select: (data) => { - console.log(data); - }, - }); - + const { data } = useHealthCheckQuery(); useEffect(() => { console.log(data); }, [data]); diff --git a/packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx b/packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx index f5d52f67..a0202cfb 100644 --- a/packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx +++ b/packages/web-domains/src/first-domain/screens/FirstDomainExampleScreen.tsx @@ -1,18 +1,10 @@ -import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query'; +import { HydrationBoundary, dehydrate } from '@tanstack/react-query'; -import { checkAPI } from '../../common/apis/check.api'; +import { useHealthCheckPrefetchQuery } from '../../common/apis/queries/useHealthCheckQuery'; import { FirstFeatureOfFirstDomainTestContainer } from '../features/containers/FirstFeatureOfFirstDomainTestContainer'; export const FirstDomainExampleScreen = async () => { - const queryClient = new QueryClient(); - - await queryClient.prefetchQuery({ - queryKey: ['health'], - queryFn: async () => { - return await checkAPI.Ping(''); - }, - }); - + const { queryClient } = await useHealthCheckPrefetchQuery(); return (
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b25d8bdb..ff35125d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,22 +11,10 @@ importers: '@emotion/react': specifier: ^11.11.4 version: 11.11.4(react@18.2.0) - '@tanstack/react-query': - specifier: ^5.50.1 - version: 5.50.1(react@18.2.0) - axios: - specifier: ^1.7.2 - version: 1.7.2 - qs: - specifier: ^6.12.3 - version: 6.12.3 devDependencies: '@turbo/gen': specifier: ^1.12.4 version: 1.12.4(@types/node@20.11.24)(typescript@5.4.5) - '@types/qs': - specifier: ^6.9.15 - version: 6.9.15 cspell: specifier: ^8.10.0 version: 8.10.4 @@ -152,6 +140,16 @@ importers: packages/core/typescript-config: {} packages/web-domains: + dependencies: + '@tanstack/react-query': + specifier: ^5.50.1 + version: 5.50.1(react@18.2.0) + axios: + specifier: ^1.7.2 + version: 1.7.2 + qs: + specifier: ^6.12.3 + version: 6.12.3 devDependencies: '@sambad/eslint-config': specifier: workspace:* @@ -168,6 +166,9 @@ importers: '@types/node': specifier: ^20.11.24 version: 20.11.24 + '@types/qs': + specifier: ^6.9.15 + version: 6.9.15 '@types/react': specifier: ^18.2.61 version: 18.2.61