[FE] Refactor/#643: Profile 페이지 API 로직 수정 및 React-Query 적용 (#647)

* feat: http 모듈 추가

* feat: Profile get api 추가

* feat: useProfileList hook 추가

* refactor: fetchGet을 useProfileList로 변경

* refactor: getProfile api에 url 직접 입력으로 변경

* refactor: 사용하지 않는 매개 변수 삭제 및 queryFn 수정

* refactor: 필요없는 코드 삭제

* refactor: query refetch 추가

* refactor: tanstack query 기본 설정 추가

* refactor: profile리스트 가져오는 부분 query 추가 및 필요없는 코드 삭제

* refactor: useQuery를 useSuspenseQuery로 변경

* refactor: Profile에 Query suspense 적용

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<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T>;
+  post<T = unknown>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig,
+  ): Promise<T>;
+  patch<T = unknown>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig,
+  ): Promise<T>;
+  put<T = unknown>(
+    url: string,
+    data?: any,
+    config?: AxiosRequestConfig,
+  ): Promise<T>;
+  delete<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T>;
+}
+
+export const http: HttpClient = axiosInstance;
+
+// axios.interceptors.request.use()
+axios.interceptors.response.use((res) => res.data)

frontend/src/apis/Patrick/index.ts

@@ -0,0 +1,6 @@
+import { http } from './http';
+import { TopicCardProps } from '../../types/Topic';
+
+export const getProfile = () => {
+  return http.get<TopicCardProps[] | null>("/members/my/topics");
+};

frontend/src/components/TopicCardList/index.tsx

@@ -1,14 +1,14 @@
-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';
 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;
@@ -27,18 +27,7 @@ function TopicCardList({
   routePage,
   children,
 }: TopicCardListProps) {
-  const [topics, setTopics] = useState<TopicCardProps[] | null>(null);
-  const { fetchGet } = useGet();
-
-  const getTopicsFromServer = async () => {
-    fetchGet<TopicCardProps[]>(url, errorMessage, (response) => {
-      setTopics(response);
-    });
-  };
-
-  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}
             />
           </ul>
         ))}

frontend/src/hooks/queries/useProfileList.ts

@@ -0,0 +1,13 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { getProfile } from '../../apis/Patrick';
+
+const useProfileList = () => {
+  const { data, refetch } = useSuspenseQuery({
+    queryKey: ['profileList'],
+    queryFn: getProfile,
+  });
+
+  return { data, refetch };
+};
+
+export default useProfileList;

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(
-  <ThemeProvider theme={theme}>
-    <GlobalStyle />
-    <ErrorBoundary fallback={NotFound}>
-      <App />
-    </ErrorBoundary>
-  </ThemeProvider>,
+  <QueryClientProvider client={queryClient}>
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <ErrorBoundary fallback={NotFound}>
+        <App />
+      </ErrorBoundary>
+    </ThemeProvider>
+  </QueryClientProvider>,
 );

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: (
-          <SuspenseComp>
+          <Suspense fallback={<TopicListSkeleton />}>
             <Profile />
-          </SuspenseComp>
+          </Suspense>
         ),
         withAuth: true,
       },