From 70557391da08044225254f36fa755645e37cf3b5 Mon Sep 17 00:00:00 2001 From: jerry Date: Mon, 15 Jul 2024 21:36:58 +0900 Subject: [PATCH 01/16] =?UTF-8?q?chore:=20react=20query=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 ++ yarn.lock | 39 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+) diff --git a/package.json b/package.json index abfbe9b7..69b30d0d 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,8 @@ "@mui/icons-material": "^5.16.0", "@mui/material": "^5.16.0", "@mui/x-date-pickers": "^7.9.0", + "@tanstack/react-query": "^5.51.1", + "@tanstack/react-query-devtools": "^5.51.1", "axios": "^1.7.2", "dayjs": "^1.11.11", "jotai": "^2.8.4", diff --git a/yarn.lock b/yarn.lock index 7f9d15e9..2236e787 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3400,6 +3400,43 @@ __metadata: languageName: node linkType: hard +"@tanstack/query-core@npm:5.51.1": + version: 5.51.1 + resolution: "@tanstack/query-core@npm:5.51.1" + checksum: 10c0/c973965a35fc98ba8e4495f8a50752eb047b7cf2648b8575266ad74708aa219b95f14ea186f341e1f1521cbe586ffd86e0296c91d12e61c23fc4c9e6386cfdf2 + languageName: node + linkType: hard + +"@tanstack/query-devtools@npm:5.51.1": + version: 5.51.1 + resolution: "@tanstack/query-devtools@npm:5.51.1" + checksum: 10c0/244367572faf5af1dbaf4a64654547fe92e913a888ca889e01ce7715c9834ac1d10107767c45478fe8d890c7b8b43c55c58f97a8db1755f08804623d51d3ec20 + languageName: node + linkType: hard + +"@tanstack/react-query-devtools@npm:^5.51.1": + version: 5.51.1 + resolution: "@tanstack/react-query-devtools@npm:5.51.1" + dependencies: + "@tanstack/query-devtools": "npm:5.51.1" + peerDependencies: + "@tanstack/react-query": ^5.51.1 + react: ^18 || ^19 + checksum: 10c0/39922b3d31c3ef5fcc1b7ecc16b18feeb17955ddc623f3ba688b6a903d284a349d12a8d645024ddb5373f7da80c0090af1aadf8ab0e3164f5c99e94a8bba07de + languageName: node + linkType: hard + +"@tanstack/react-query@npm:^5.51.1": + version: 5.51.1 + resolution: "@tanstack/react-query@npm:5.51.1" + dependencies: + "@tanstack/query-core": "npm:5.51.1" + peerDependencies: + react: ^18.0.0 + checksum: 10c0/08b54812a41ae363e00f090f3b2ff4bf3e4a920b5b46489d26cc4f6cc95021bf91248b0b19f514039eb3b625eb7d720dc851877a6655abd6686b0a898a87db3d + languageName: node + linkType: hard + "@testing-library/dom@npm:10.1.0": version: 10.1.0 resolution: "@testing-library/dom@npm:10.1.0" @@ -4842,6 +4879,8 @@ __metadata: "@storybook/react": "npm:^8.1.11" "@storybook/react-vite": "npm:^8.1.11" "@storybook/test": "npm:^8.1.11" + "@tanstack/react-query": "npm:^5.51.1" + "@tanstack/react-query-devtools": "npm:^5.51.1" "@types/prettier-linter-helpers": "npm:^1" "@types/react": "npm:^18.3.3" "@types/react-dom": "npm:^18.3.0" From fa152fe9461c735a74d3c983cb6fef22ae475824 Mon Sep 17 00:00:00 2001 From: jerry Date: Mon, 15 Jul 2024 21:44:34 +0900 Subject: [PATCH 02/16] =?UTF-8?q?feat:=20queryClient=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 29 ++++++++++++++++++----------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index d45dd72b..c8758964 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,6 +10,8 @@ import { ThemeProvider } from "styled-components"; import Modal from "@components/commons/modal/Modal"; import { ThemeProvider as MuiThemeProvider, createTheme } from "@mui/material/styles"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; const darkTheme = createTheme({ palette: { @@ -18,18 +20,23 @@ const darkTheme = createTheme({ }); function App() { + const queryClient = new QueryClient(); + return ( - - - - - - - - - - - + + + + + + + + + + + + + + ); } From 2cd0160f6f91df484e0c06385af81d33ae7a8cbd Mon Sep 17 00:00:00 2001 From: jerry Date: Tue, 16 Jul 2024 00:20:19 +0900 Subject: [PATCH 03/16] =?UTF-8?q?remove:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20.gitkeep=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/.gitkeep | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/apis/.gitkeep diff --git a/src/apis/.gitkeep b/src/apis/.gitkeep deleted file mode 100644 index e69de29b..00000000 From 59eb74c6d9d3a20d67cc8d14a706f986b3b58434 Mon Sep 17 00:00:00 2001 From: jerry Date: Tue, 16 Jul 2024 04:22:11 +0900 Subject: [PATCH 04/16] =?UTF-8?q?feat:=20instace=20=EB=B0=8F=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/domains/test/index.ts | 27 +++++++++++++++++++++++++++ src/apis/index.ts | 30 ++++++++++++++++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 src/apis/domains/test/index.ts create mode 100644 src/apis/index.ts diff --git a/src/apis/domains/test/index.ts b/src/apis/domains/test/index.ts new file mode 100644 index 00000000..655d8466 --- /dev/null +++ b/src/apis/domains/test/index.ts @@ -0,0 +1,27 @@ +import { get } from "@apis/index"; +import { useQuery } from "@tanstack/react-query"; + +interface TestReponse { + id: number; + userId: number; + title: string; + completed: boolean; +} + +// example get api +const getTest = async () => { + try { + const response = await get("/todos/1"); + console.log(response.data); + return response.data; + } catch (err) { + console.error("에러"); + } +}; + +export const useGetTest = () => { + return useQuery({ + queryKey: ["test"], + queryFn: () => getTest(), + }); +}; diff --git a/src/apis/index.ts b/src/apis/index.ts new file mode 100644 index 00000000..d9c85523 --- /dev/null +++ b/src/apis/index.ts @@ -0,0 +1,30 @@ +import axios from "axios"; + +export const instance = axios.create({ + baseURL: import.meta.env.VITE_API_BASE_URL, + // withCredentials: true, + + headers: { + Authorization: `Bearer ${localStorage.getItem("accessToken") || ""}`, + }, +}); + +export function get(...args: Parameters) { + return instance.get(...args); +} + +export function post(...args: Parameters) { + return instance.post(...args); +} + +export function put(...args: Parameters) { + return instance.put(...args); +} + +export function patch(...args: Parameters) { + return instance.patch(...args); +} + +export function del(...args: Parameters) { + return instance.delete(...args); +} From 6db2b41c4343a0ffbec4031464407ffcfb8b24a2 Mon Sep 17 00:00:00 2001 From: jerry Date: Tue, 16 Jul 2024 04:23:16 +0900 Subject: [PATCH 05/16] =?UTF-8?q?feat:=20api=20=ED=86=B5=EC=8B=A0=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/main/Main.tsx | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/pages/main/Main.tsx b/src/pages/main/Main.tsx index c32a2815..c4807564 100644 --- a/src/pages/main/Main.tsx +++ b/src/pages/main/Main.tsx @@ -1,13 +1,15 @@ import { useState } from "react"; import * as S from "./Main.styled"; -import MainNavigation from "./components/mainNavigation/MainNavigation"; import Carousel from "./components/carousel/Carousel"; import Chips from "./components/chips/Chips"; import Floating from "./components/floating/Floating"; -import Performance from "./components/performance/Performance"; import Footer from "./components/footer/Footer"; +import MainNavigation from "./components/mainNavigation/MainNavigation"; +import Performance from "./components/performance/Performance"; +import { useGetTest } from "@apis/domains/test"; +import Loading from "@components/commons/loading/Loading"; import { dummyData } from "./constants/dummyData"; const Main = () => { @@ -17,15 +19,24 @@ const Main = () => { setGenre(value); }; + const { data, isLoading } = useGetTest(); + console.log("test data", data, isLoading); + return ( - - - - - - -