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

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 = (url: string) => {
+  return http.get<TopicCardProps[] | null>(url);
+};

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<TopicCardProps[] | null>(null);
   const { fetchGet } = useGet();
+  const { data } = useProfileList(url);
 
   const getTopicsFromServer = async () => {
-    fetchGet<TopicCardProps[]>(url, errorMessage, (response) => {
-      setTopics(response);
-    });
+    if (data !== undefined) {
+      setTopics(data);
+    }
   };
 
   useEffect(() => {

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;