feat: query를 사용할 수 있도록 비동기 함수로 수정

Author: mimizae

src/App.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import Home from '@pages/Home';
 import Login from '@pages/Login';
@@ -32,6 +33,8 @@ import { getUserInfoApi } from '@apis/user';
 import { getCurrentUserId } from '@utils/getCurrentUserId';
 import Loading from '@components/Loading';
 
+const queryClient = new QueryClient();
+
 const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
 	const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
 
@@ -98,22 +101,24 @@ const publicRoutes = [
 
 const App: React.FC = () => {
 	return (
-		<BrowserRouter>
-			<Routes>
-				{/* 인증이 필요한 페이지 */}
-				{protectedRoutes.map(({ path, element }) => (
-					<Route key={path} path={path} element={<ProtectedRoute>{element}</ProtectedRoute>} />
-				))}
-
-				{/* 인증이 필요 없는 페이지 */}
-				{publicRoutes.map(({ path, element }) => (
-					<Route key={path} path={path} element={element} />
-				))}
-
-				{/* 없는 페이지에 대한 처리 */}
-				<Route path="*" element={<NotFound />} />
-			</Routes>
-		</BrowserRouter>
+		<QueryClientProvider client={queryClient}>
+			<BrowserRouter>
+				<Routes>
+					{/* 인증이 필요한 페이지 */}
+					{protectedRoutes.map(({ path, element }) => (
+						<Route key={path} path={path} element={<ProtectedRoute>{element}</ProtectedRoute>} />
+					))}
+
+					{/* 인증이 필요 없는 페이지 */}
+					{publicRoutes.map(({ path, element }) => (
+						<Route key={path} path={path} element={element} />
+					))}
+
+					{/* 없는 페이지에 대한 처리 */}
+					<Route path="*" element={<NotFound />} />
+				</Routes>
+			</BrowserRouter>
+		</QueryClientProvider>
 	);
 };
 

src/apis/post/index.ts

@@ -17,8 +17,10 @@ export const createPostApi = (data: CreatePostRequest) => newRequest.post<Create
 
 // 게시글 리스트 조회
 // 전체 게시글 리스트
-export const getPostListApi = (page: number = 1, take: number = 10) =>
-	newRequest.get<GetPostListResponse>(`/post`, { params: { page, take } });
+export const getPostListApi = async (page: number = 1, take: number = 10) => {
+	const { data } = await newRequest.get<GetPostListResponse>(`/post`, { params: { page, take } });
+	return data;
+};
 // 유저 게시글 리스트
 export const getUserPostListApi = (page: number = 1, take: number = 10, userId: number) =>
 	newRequest.get<GetUserPostListResponse>(`/post`, { params: { page, take, userId } });