feat: api 연결

src/pages/Meeting.tsx

@@ -1,16 +1,20 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { queries } from '@/apis';
 import { FixedBottomButton } from '@/components/common/FixedBottomButton';
 import { FloatingActionButton } from '@/components/common/FloatingActionButton';
 import { Header } from '@/components/common/Header';
 import { Icon } from '@/components/common/Icon';
 import { MeetingList } from '@/components/features/MeetingList';
 
 export const Meeting = () => {
-  const isDataEmpty = [].length === 0; // TODO data
+  const { data } = useSuspenseQuery(queries.member.meetings); // TODO 에러처리
+  const isDataEmpty = data.length === 0;
 
   return (
     <>
       <Header left={<Icon name="jjakkakText" size={{ width: 115, height: 13 }} color="BK" />} />
-      <MeetingList title="나의 모임" data={[]} />
+      <MeetingList title="나의 모임" data={data} />
       {isDataEmpty ? (
         <FixedBottomButton>모임 일정 생성하기</FixedBottomButton>
       ) : (

src/pages/loaders/meetingLoader.tsx

@@ -0,0 +1,10 @@
+import type { LoaderFunction } from 'react-router-dom';
+
+import { queries } from '@/apis';
+import { queryClient } from '@/lib/reactQuery';
+
+// TODO pages 폴더 구조 정리 (colocation)
+export const meetingLoader: LoaderFunction = () => {
+  queryClient.prefetchQuery(queries.member.meetings);
+  return null;
+};

src/routes/route.tsx

@@ -1,6 +1,7 @@
 import { createBrowserRouter } from 'react-router-dom';
 
 import { App } from '@/App';
+import { meetingLoader } from '@/pages/loaders/meetingLoader';
 import { LoginFailure } from '@/pages/LoginFailure';
 import { LoginSuccess } from '@/pages/LoginSuccess';
 import { Meeting } from '@/pages/Meeting';
@@ -31,6 +32,7 @@ export const router = createBrowserRouter([
         children: [
           {
             index: true,
+            loader: meetingLoader,
             element: (
               <PrivateRoute>
                 <Meeting />