From bbcfd937be1b480c3b47c52c1f99283900e915fd Mon Sep 17 00:00:00 2001 From: GC-Park Date: Sun, 14 Jan 2024 23:45:58 +0900 Subject: [PATCH 01/12] =?UTF-8?q?feat:=20http=20=EB=AA=A8=EB=93=88=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/Patrick/http.ts | 36 +++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 frontend/src/apis/Patrick/http.ts diff --git a/frontend/src/apis/Patrick/http.ts b/frontend/src/apis/Patrick/http.ts new file mode 100644 index 000000000..49926b831 --- /dev/null +++ b/frontend/src/apis/Patrick/http.ts @@ -0,0 +1,36 @@ +import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'; + +const API_PREFIX = 'api'; + +export const BASE_URL = + process.env.APP_URL || `https://mapbefine.com/${API_PREFIX}`; + +const axiosInstance = axios.create({ + baseURL: BASE_URL, + timeout: 5000, +}); + +export interface HttpClient extends AxiosInstance { + get(url: string, config?: AxiosRequestConfig): Promise; + post( + url: string, + data?: any, + config?: AxiosRequestConfig, + ): Promise; + patch( + url: string, + data?: any, + config?: AxiosRequestConfig, + ): Promise; + put( + url: string, + data?: any, + config?: AxiosRequestConfig, + ): Promise; + delete(url: string, config?: AxiosRequestConfig): Promise; +} + +export const http: HttpClient = axiosInstance; + +// axios.interceptors.request.use() +axios.interceptors.response.use((res) => res.data) From 223e0eac205019f5226044bf110691867e7b0781 Mon Sep 17 00:00:00 2001 From: GC-Park Date: Sun, 14 Jan 2024 23:47:04 +0900 Subject: [PATCH 02/12] =?UTF-8?q?feat:=20Profile=20get=20api=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 --- frontend/src/apis/Patrick/index.ts | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 frontend/src/apis/Patrick/index.ts diff --git a/frontend/src/apis/Patrick/index.ts b/frontend/src/apis/Patrick/index.ts new file mode 100644 index 000000000..bb2a340c8 --- /dev/null +++ b/frontend/src/apis/Patrick/index.ts @@ -0,0 +1,6 @@ +import { http } from './http'; +import { TopicCardProps } from '../../types/Topic'; + +export const getProfile = (url: string) => { + return http.get(url); +}; From 1310d86c17267089f008e3999eed6539a021d052 Mon Sep 17 00:00:00 2001 From: GC-Park Date: Sun, 14 Jan 2024 23:47:36 +0900 Subject: [PATCH 03/12] =?UTF-8?q?feat:=20useProfileList=20hook=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 --- frontend/src/hooks/queries/useProfileList.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 frontend/src/hooks/queries/useProfileList.ts diff --git a/frontend/src/hooks/queries/useProfileList.ts b/frontend/src/hooks/queries/useProfileList.ts new file mode 100644 index 000000000..4e70270a4 --- /dev/null +++ b/frontend/src/hooks/queries/useProfileList.ts @@ -0,0 +1,15 @@ +import { useQuery } from '@tanstack/react-query'; +import { getProfile } from '../../apis/Patrick'; +import { TopicCardProps } from '../../types/Topic'; + +const useProfileList = (url: string) => { + return useQuery({ + queryKey: ['profileList'], + queryFn: async () => { + const data = await getProfile(url); + return data; + }, + }); +}; + +export default useProfileList; From bf162c333b57357c003e732b4b90247cebdfa607 Mon Sep 17 00:00:00 2001 From: GC-Park Date: Sun, 14 Jan 2024 23:48:01 +0900 Subject: [PATCH 04/12] =?UTF-8?q?refactor:=20fetchGet=EC=9D=84=20useProfil?= =?UTF-8?q?eList=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TopicCardList/index.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/TopicCardList/index.tsx b/frontend/src/components/TopicCardList/index.tsx index 666749985..67f742112 100644 --- a/frontend/src/components/TopicCardList/index.tsx +++ b/frontend/src/components/TopicCardList/index.tsx @@ -9,6 +9,7 @@ import Grid from '../common/Grid'; import Space from '../common/Space'; import Text from '../common/Text'; import TopicCard from '../TopicCard'; +import useProfileList from '../../hooks/queries/useProfileList'; interface TopicCardListProps { url: string; @@ -29,11 +30,12 @@ function TopicCardList({ }: TopicCardListProps) { const [topics, setTopics] = useState(null); const { fetchGet } = useGet(); + const { data } = useProfileList(url); const getTopicsFromServer = async () => { - fetchGet(url, errorMessage, (response) => { - setTopics(response); - }); + if (data !== undefined) { + setTopics(data); + } }; useEffect(() => { From 0bec8fcbca21e26b9d9b1755d79bb96eca8d9802 Mon Sep 17 00:00:00 2001 From: GC-Park Date: Tue, 16 Jan 2024 14:33:15 +0900 Subject: [PATCH 05/12] =?UTF-8?q?refactor:=20getProfile=20api=EC=97=90=20u?= =?UTF-8?q?rl=20=EC=A7=81=EC=A0=91=20=EC=9E=85=EB=A0=A5=EC=9C=BC=EB=A1=9C?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/Patrick/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/apis/Patrick/index.ts b/frontend/src/apis/Patrick/index.ts index bb2a340c8..5fbe65b53 100644 --- a/frontend/src/apis/Patrick/index.ts +++ b/frontend/src/apis/Patrick/index.ts @@ -1,6 +1,6 @@ import { http } from './http'; import { TopicCardProps } from '../../types/Topic'; -export const getProfile = (url: string) => { - return http.get(url); +export const getProfile = () => { + return http.get("/members/my/topics"); }; From 26e5bd5134839892ab5dfa7afbd165094bf70686 Mon Sep 17 00:00:00 2001 From: GC-Park Date: Wed, 17 Jan 2024 13:31:18 +0900 Subject: [PATCH 06/12] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EB=A7=A4=EA=B0=9C=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=20=EC=82=AD=EC=A0=9C=20=EB=B0=8F=20queryFn=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TopicCardList/index.tsx | 2 +- frontend/src/hooks/queries/useProfileList.ts | 7 ++----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/TopicCardList/index.tsx b/frontend/src/components/TopicCardList/index.tsx index 67f742112..b92728148 100644 --- a/frontend/src/components/TopicCardList/index.tsx +++ b/frontend/src/components/TopicCardList/index.tsx @@ -30,7 +30,7 @@ function TopicCardList({ }: TopicCardListProps) { const [topics, setTopics] = useState(null); const { fetchGet } = useGet(); - const { data } = useProfileList(url); + const { data } = useProfileList(); const getTopicsFromServer = async () => { if (data !== undefined) { diff --git a/frontend/src/hooks/queries/useProfileList.ts b/frontend/src/hooks/queries/useProfileList.ts index 4e70270a4..365a901d8 100644 --- a/frontend/src/hooks/queries/useProfileList.ts +++ b/frontend/src/hooks/queries/useProfileList.ts @@ -2,13 +2,10 @@ import { useQuery } from '@tanstack/react-query'; import { getProfile } from '../../apis/Patrick'; import { TopicCardProps } from '../../types/Topic'; -const useProfileList = (url: string) => { +const useProfileList = () => { return useQuery({ queryKey: ['profileList'], - queryFn: async () => { - const data = await getProfile(url); - return data; - }, + queryFn: getProfile, }); }; From ce1fd8a9fad242f7270d45cf8075d47f19ded64a Mon Sep 17 00:00:00 2001 From: GC-Park Date: Wed, 17 Jan 2024 13:32:43 +0900 Subject: [PATCH 07/12] =?UTF-8?q?refactor:=20=ED=95=84=EC=9A=94=EC=97=86?= =?UTF-8?q?=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TopicCardList/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/src/components/TopicCardList/index.tsx b/frontend/src/components/TopicCardList/index.tsx index b92728148..dc4b0a38a 100644 --- a/frontend/src/components/TopicCardList/index.tsx +++ b/frontend/src/components/TopicCardList/index.tsx @@ -1,7 +1,6 @@ -import { Fragment, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { styled } from 'styled-components'; -import useGet from '../../apiHooks/useGet'; import { TopicCardProps } from '../../types/Topic'; import Button from '../common/Button'; import Flex from '../common/Flex'; @@ -29,7 +28,6 @@ function TopicCardList({ children, }: TopicCardListProps) { const [topics, setTopics] = useState(null); - const { fetchGet } = useGet(); const { data } = useProfileList(); const getTopicsFromServer = async () => { From ed692075a2f5dcd2b323622930f0affd618a0ccf Mon Sep 17 00:00:00 2001 From: GC-Park Date: Wed, 17 Jan 2024 14:05:35 +0900 Subject: [PATCH 08/12] =?UTF-8?q?refactor:=20query=20refetch=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 --- frontend/src/hooks/queries/useProfileList.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/hooks/queries/useProfileList.ts b/frontend/src/hooks/queries/useProfileList.ts index 365a901d8..bb157bc8a 100644 --- a/frontend/src/hooks/queries/useProfileList.ts +++ b/frontend/src/hooks/queries/useProfileList.ts @@ -1,12 +1,13 @@ import { useQuery } from '@tanstack/react-query'; import { getProfile } from '../../apis/Patrick'; -import { TopicCardProps } from '../../types/Topic'; const useProfileList = () => { - return useQuery({ + const { data, refetch } = useQuery({ queryKey: ['profileList'], queryFn: getProfile, }); + + return { data, refetch }; }; export default useProfileList; From 0422d45e433087d9319eaa7cdb8b954b5050fb1f Mon Sep 17 00:00:00 2001 From: GC-Park Date: Wed, 17 Jan 2024 14:06:15 +0900 Subject: [PATCH 09/12] =?UTF-8?q?refactor:=20tanstack=20query=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=20=EC=84=A4=EC=A0=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/index.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index d2999a20f..ba31e7ac5 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -1,6 +1,7 @@ import ReactDOM from 'react-dom/client'; import ReactGA from 'react-ga4'; import { ThemeProvider } from 'styled-components'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import App from './App'; import ErrorBoundary from './components/ErrorBoundary'; @@ -12,6 +13,8 @@ const rootElement = document.getElementById('root'); if (!rootElement) throw new Error('Failed to find the root element'); const root = ReactDOM.createRoot(rootElement); +const queryClient = new QueryClient(); + // if (process.env.NODE_ENV === 'development') { // const { worker } = require('./mocks/browser'); // worker.start({ quiet: true }); @@ -22,10 +25,12 @@ if (process.env.REACT_APP_GOOGLE_ANALYTICS) { } root.render( - - - - - - , + + + + + + + + , ); From be61c4f67ed571cca5cce7ea4067587dfdbce9e2 Mon Sep 17 00:00:00 2001 From: GC-Park Date: Wed, 17 Jan 2024 14:07:39 +0900 Subject: [PATCH 10/12] =?UTF-8?q?refactor:=20profile=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EA=B0=80=EC=A0=B8=EC=98=A4=EB=8A=94=20=EB=B6=80?= =?UTF-8?q?=EB=B6=84=20query=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=ED=95=84?= =?UTF-8?q?=EC=9A=94=EC=97=86=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/TopicCardList/index.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/TopicCardList/index.tsx b/frontend/src/components/TopicCardList/index.tsx index dc4b0a38a..b8c2643fd 100644 --- a/frontend/src/components/TopicCardList/index.tsx +++ b/frontend/src/components/TopicCardList/index.tsx @@ -27,18 +27,7 @@ function TopicCardList({ routePage, children, }: TopicCardListProps) { - const [topics, setTopics] = useState(null); - const { data } = useProfileList(); - - const getTopicsFromServer = async () => { - if (data !== undefined) { - setTopics(data); - } - }; - - useEffect(() => { - getTopicsFromServer(); - }, []); + const { data: topics, refetch: refetchTopic } = useProfileList(); if (!topics) return null; @@ -88,7 +77,7 @@ function TopicCardList({ bookmarkCount={topic.bookmarkCount} isInAtlas={topic.isInAtlas} isBookmarked={topic.isBookmarked} - getTopicsFromServer={getTopicsFromServer} + getTopicsFromServer={refetchTopic} /> ))} From 174a67427c2ece059bf8cdee2ec8188f4ce88efd Mon Sep 17 00:00:00 2001 From: GC-Park Date: Wed, 17 Jan 2024 18:15:52 +0900 Subject: [PATCH 11/12] =?UTF-8?q?refactor:=20useQuery=EB=A5=BC=20useSuspen?= =?UTF-8?q?seQuery=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/queries/useProfileList.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/hooks/queries/useProfileList.ts b/frontend/src/hooks/queries/useProfileList.ts index bb157bc8a..cfa066fb9 100644 --- a/frontend/src/hooks/queries/useProfileList.ts +++ b/frontend/src/hooks/queries/useProfileList.ts @@ -1,8 +1,8 @@ -import { useQuery } from '@tanstack/react-query'; +import { useSuspenseQuery } from '@tanstack/react-query'; import { getProfile } from '../../apis/Patrick'; const useProfileList = () => { - const { data, refetch } = useQuery({ + const { data, refetch } = useSuspenseQuery({ queryKey: ['profileList'], queryFn: getProfile, }); From a108bac4b5a71eeb238e64e4b72f3554bb906ec4 Mon Sep 17 00:00:00 2001 From: GC-Park Date: Wed, 17 Jan 2024 18:17:04 +0900 Subject: [PATCH 12/12] =?UTF-8?q?refactor:=20Profile=EC=97=90=20Query=20su?= =?UTF-8?q?spense=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/router.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx index dd9b8268a..b2f5f13b6 100644 --- a/frontend/src/router.tsx +++ b/frontend/src/router.tsx @@ -6,6 +6,7 @@ import Home from './pages/Home'; import NotFound from './pages/NotFound'; import RootPage from './pages/RootPage'; import Search from './pages/Search'; +import TopicListSkeleton from './components/Skeletons/TopicListSkeleton'; const SelectedTopic = lazy(() => import('./pages/SelectedTopic')); const NewPin = lazy(() => import('./pages/NewPin')); @@ -115,9 +116,9 @@ const routes: routeElement[] = [ { path: 'my-page', element: ( - + }> - + ), withAuth: true, },