Merge branch 'develop-FE' into refactor/#642

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,12 +1,12 @@
 import { ReactNode } from 'react';
-
 import useGetTopics from '../../apiHooks/new/useGetTopics';
 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;

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

@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 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';
@@ -24,6 +25,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 });

frontend/src/router.tsx

@@ -7,6 +7,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'));
@@ -116,9 +117,9 @@ const routes: routeElement[] = [
       {
         path: 'my-page',
         element: (
-          <SuspenseComp>
+          <Suspense fallback={<TopicListSkeleton />}>
             <Profile />
-          </SuspenseComp>
+          </Suspense>
         ),
         withAuth: true,
       },