From adbfe438f333b44aa84b8e4722ffd8a9491d1927 Mon Sep 17 00:00:00 2001 From: jisusin Date: Sun, 29 Jun 2025 23:31:58 +0900 Subject: [PATCH 1/5] =?UTF-8?q?init:=20Tanstack=20Query=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=20=EC=84=B8=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 6 ++++-- pnpm-lock.yaml | 38 ++++++++++++++++++++++++++++++++++++++ src/main.tsx | 29 +++++++++++++++++++++++++---- 3 files changed, 67 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 40816287..5a5d32bb 100644 --- a/package.json +++ b/package.json @@ -11,12 +11,14 @@ "svgr": "npx @svgr/cli -d src/assets/svg --ignore-existing --typescript --no-dimensions public/svg" }, "dependencies": { + "@tanstack/react-query": "^5.81.5", "axios": "^1.10.0", "react": "^19.1.0", "react-dom": "^19.1.0" }, "devDependencies": { "@eslint/js": "^9.29.0", + "@tanstack/react-query-devtools": "^5.81.5", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.2", "@vanilla-extract/css": "^1.17.4", @@ -33,9 +35,9 @@ "globals": "^16.2.0", "prettier": "^3.6.0", "typescript": "~5.8.3", - "typescript-eslint": "^8.34.1", "vite": "^6.3.5", "vite-plugin-svgr": "^4.3.0" - } + }, + "packageManager": "pnpm@10.12.4+sha512.5ea8b0deed94ed68691c9bad4c955492705c5eeb8a87ef86bc62c74a26b037b08ff9570f108b2e4dbd1dd1a9186fea925e527f141c648e85af45631074680184" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 623558d8..2c8049b8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@tanstack/react-query': + specifier: ^5.81.5 + version: 5.81.5(react@19.1.0) axios: specifier: ^1.10.0 version: 1.10.0 @@ -21,6 +24,9 @@ importers: '@eslint/js': specifier: ^9.29.0 version: 9.30.0 + '@tanstack/react-query-devtools': + specifier: ^5.81.5 + version: 5.81.5(@tanstack/react-query@5.81.5(react@19.1.0))(react@19.1.0) '@types/react': specifier: ^19.1.2 version: 19.1.8 @@ -669,6 +675,23 @@ packages: '@swc/types@0.1.23': resolution: {integrity: sha512-u1iIVZV9Q0jxY+yM2vw/hZGDNudsN85bBpTqzAQ9rzkxW9D+e3aEM4Han+ow518gSewkXgjmEK0BD79ZcNVgPw==} + '@tanstack/query-core@5.81.5': + resolution: {integrity: sha512-ZJOgCy/z2qpZXWaj/oxvodDx07XcQa9BF92c0oINjHkoqUPsmm3uG08HpTaviviZ/N9eP1f9CM7mKSEkIo7O1Q==} + + '@tanstack/query-devtools@5.81.2': + resolution: {integrity: sha512-jCeJcDCwKfoyyBXjXe9+Lo8aTkavygHHsUHAlxQKKaDeyT0qyQNLKl7+UyqYH2dDF6UN/14873IPBHchcsU+Zg==} + + '@tanstack/react-query-devtools@5.81.5': + resolution: {integrity: sha512-lCGMu4RX0uGnlrlLeSckBfnW/UV+KMlTBVqa97cwK7Z2ED5JKnZRSjNXwoma6sQBTJrcULvzgx2K6jEPvNUpDw==} + peerDependencies: + '@tanstack/react-query': ^5.81.5 + react: ^18 || ^19 + + '@tanstack/react-query@5.81.5': + resolution: {integrity: sha512-lOf2KqRRiYWpQT86eeeftAGnjuTR35myTP8MXyvHa81VlomoAWNEd8x5vkcAfQefu0qtYCvyqLropFZqgI2EQw==} + peerDependencies: + react: ^18 || ^19 + '@types/estree@1.0.8': resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} @@ -2543,6 +2566,21 @@ snapshots: dependencies: '@swc/counter': 0.1.3 + '@tanstack/query-core@5.81.5': {} + + '@tanstack/query-devtools@5.81.2': {} + + '@tanstack/react-query-devtools@5.81.5(@tanstack/react-query@5.81.5(react@19.1.0))(react@19.1.0)': + dependencies: + '@tanstack/query-devtools': 5.81.2 + '@tanstack/react-query': 5.81.5(react@19.1.0) + react: 19.1.0 + + '@tanstack/react-query@5.81.5(react@19.1.0)': + dependencies: + '@tanstack/query-core': 5.81.5 + react: 19.1.0 + '@types/estree@1.0.8': {} '@types/json-schema@7.0.15': {} diff --git a/src/main.tsx b/src/main.tsx index 4aff0256..a6f53f77 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,9 +1,30 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import App from './App.tsx' +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; -createRoot(document.getElementById('root')!).render( +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, + retryOnMount: true, + refetchOnReconnect: false, + retry: 2, + }, + mutations: { + retry: 1, + }, + }, +}); + +createRoot(document.getElementById("root")!).render( - - , -) + + + {import.meta.env.DEV && ( + + )} + + +); From 9acd6b705671b038e321a95bcdf84c6d37ecc803 Mon Sep 17 00:00:00 2001 From: jisusin Date: Thu, 3 Jul 2025 20:10:09 +0900 Subject: [PATCH 2/5] =?UTF-8?q?refactor:=20queryClient=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=EB=B3=84=EB=8F=84=20=ED=8C=8C=EC=9D=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/util/queryClient.ts | 16 ++++++++++++++++ src/main.tsx | 17 ++--------------- 2 files changed, 18 insertions(+), 15 deletions(-) create mode 100644 src/common/util/queryClient.ts diff --git a/src/common/util/queryClient.ts b/src/common/util/queryClient.ts new file mode 100644 index 00000000..d98f290e --- /dev/null +++ b/src/common/util/queryClient.ts @@ -0,0 +1,16 @@ +import { QueryClient } from "@tanstack/react-query"; + +export const queryClient = new QueryClient({ + defaultOptions: { + queries: { + staleTime: 1000 * 60 * 1, + refetchOnWindowFocus: false, + refetchOnMount: true, + refetchOnReconnect: false, + retry: 2, + }, + mutations: { + retry: 1, + }, + }, +}); \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index a6f53f77..9547bf8e 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,22 +1,9 @@ import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import App from './App.tsx' -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; - -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - refetchOnWindowFocus: false, - retryOnMount: true, - refetchOnReconnect: false, - retry: 2, - }, - mutations: { - retry: 1, - }, - }, -}); +import { queryClient } from "./common/util/queryClient.ts"; createRoot(document.getElementById("root")!).render( From 9d5c80727ba39547d74775a9159b28f8ef0cffa6 Mon Sep 17 00:00:00 2001 From: jisusin Date: Thu, 3 Jul 2025 20:10:52 +0900 Subject: [PATCH 3/5] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20.gitkeep=20=ED=8C=8C=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/util/.gitkeep | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/common/util/.gitkeep diff --git a/src/common/util/.gitkeep b/src/common/util/.gitkeep deleted file mode 100644 index e69de29b..00000000 From 6032c97b0a7a5adf1da9c16e64c0086c64e82be6 Mon Sep 17 00:00:00 2001 From: jisusin Date: Sat, 5 Jul 2025 15:56:27 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20React=20Query=20=EC=9D=98=EC=A1=B4?= =?UTF-8?q?=EC=84=B1=20=ED=8C=A8=ED=82=A4=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pnpm-lock.yaml | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0a346998..4bc5c5fb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,12 +8,12 @@ importers: .: dependencies: - '@tanstack/react-query': - specifier: ^5.81.5 - version: 5.81.5(react@19.1.0) '@reduxjs/toolkit': specifier: ^2.8.2 version: 2.8.2(react-redux@9.2.0(@types/react@19.1.8)(react@19.1.0)(redux@5.0.1))(react@19.1.0) + '@tanstack/react-query': + specifier: ^5.81.5 + version: 5.81.5(react@19.1.0) axios: specifier: ^1.10.0 version: 1.10.0 @@ -33,9 +33,6 @@ importers: '@eslint/js': specifier: ^9.29.0 version: 9.30.0 - '@tanstack/react-query-devtools': - specifier: ^5.81.5 - version: 5.81.5(@tanstack/react-query@5.81.5(react@19.1.0))(react@19.1.0) '@storybook/addon-a11y': specifier: ^9.0.15 version: 9.0.15(storybook@9.0.15(@testing-library/dom@10.4.0)(prettier@3.6.2)) @@ -57,6 +54,9 @@ importers: '@storybook/react-vite': specifier: ^9.0.15 version: 9.0.15(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(rollup@4.44.1)(storybook@9.0.15(@testing-library/dom@10.4.0)(prettier@3.6.2))(typescript@5.8.3)(vite@6.3.5(@types/node@24.0.6)) + '@tanstack/react-query-devtools': + specifier: ^5.81.5 + version: 5.81.5(@tanstack/react-query@5.81.5(react@19.1.0))(react@19.1.0) '@types/react': specifier: ^19.1.2 version: 19.1.8 @@ -953,6 +953,7 @@ packages: resolution: {integrity: sha512-lOf2KqRRiYWpQT86eeeftAGnjuTR35myTP8MXyvHa81VlomoAWNEd8x5vkcAfQefu0qtYCvyqLropFZqgI2EQw==} peerDependencies: react: ^18 || ^19 + '@testing-library/dom@10.4.0': resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==} engines: {node: '>=18'} From eadd9d3043b7c24fa2c08815f63d0f130947689e Mon Sep 17 00:00:00 2001 From: jisusin Date: Sat, 5 Jul 2025 15:58:26 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20ESLint=20=EC=9E=90=EB=8F=99=20?= =?UTF-8?q?=ED=8F=AC=EB=A7=B7=ED=8C=85=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/vitest.setup.ts | 1 + src/common/util/queryClient.ts | 4 ++-- src/main.tsx | 10 +++++----- src/stories/Button.stories.ts | 1 - src/stories/Button.stories.tsx | 1 + src/stories/Header.stories.ts | 1 - src/stories/Page.stories.ts | 1 - 7 files changed, 9 insertions(+), 10 deletions(-) diff --git a/.storybook/vitest.setup.ts b/.storybook/vitest.setup.ts index e04e3c0d..ce9e3aea 100644 --- a/.storybook/vitest.setup.ts +++ b/.storybook/vitest.setup.ts @@ -1,6 +1,7 @@ import '@storybook/addon-a11y/preview'; import { setProjectAnnotations } from '@storybook/react-vite'; + import * as globalStorybookConfig from './preview'; // This is an important step to apply the right configuration when testing your stories. diff --git a/src/common/util/queryClient.ts b/src/common/util/queryClient.ts index d98f290e..10ee97c1 100644 --- a/src/common/util/queryClient.ts +++ b/src/common/util/queryClient.ts @@ -1,4 +1,4 @@ -import { QueryClient } from "@tanstack/react-query"; +import { QueryClient } from '@tanstack/react-query'; export const queryClient = new QueryClient({ defaultOptions: { @@ -13,4 +13,4 @@ export const queryClient = new QueryClient({ retry: 1, }, }, -}); \ No newline at end of file +}); diff --git a/src/main.tsx b/src/main.tsx index bd80bde9..54aea235 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,19 +1,19 @@ import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; + import App from './App.tsx'; + import './style/global.css.ts'; import { QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; + import { queryClient } from './common/util/queryClient.ts'; -createRoot(document.getElementById("root")!).render( +createRoot(document.getElementById('root')!).render( - {import.meta.env.DEV && ( - - )} + {import.meta.env.DEV && } , ); - diff --git a/src/stories/Button.stories.ts b/src/stories/Button.stories.ts index 0c3151f3..7c195cfc 100644 --- a/src/stories/Button.stories.ts +++ b/src/stories/Button.stories.ts @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; - import { fn } from 'storybook/test'; import { Button } from './Button'; diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx index f88b65ed..2e52fba1 100644 --- a/src/stories/Button.stories.tsx +++ b/src/stories/Button.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; + import { Button } from './Button'; //예시입니다. diff --git a/src/stories/Header.stories.ts b/src/stories/Header.stories.ts index 36a3b8f9..c66d24aa 100644 --- a/src/stories/Header.stories.ts +++ b/src/stories/Header.stories.ts @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; - import { fn } from 'storybook/test'; import { Header } from './Header'; diff --git a/src/stories/Page.stories.ts b/src/stories/Page.stories.ts index 7bbda250..6fab2fd6 100644 --- a/src/stories/Page.stories.ts +++ b/src/stories/Page.stories.ts @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from '@storybook/react-vite'; - import { expect, userEvent, within } from 'storybook/test'; import { Page } from './Page';