Feat/107/my gathering api

src/_apis/my-gathering/hosted-gathering-list-apis.ts

@@ -0,0 +1,12 @@
+import { fetchApi } from '@/src/utils/api';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+
+export function getHostedGatheringList(startDate: string): Promise<GatheringCardProps[]> {
+  const url = `/api/gatherings/hosted?startDate=${startDate}`;
+  return fetchApi<{ data: GatheringCardProps[] }>(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then((response) => response.data);
+}

src/_apis/my-gathering/joined-gathering-list-apis.ts

@@ -0,0 +1,12 @@
+import { fetchApi } from '@/src/utils/api';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+
+export function getJoinedGatheringList(startDate: string): Promise<GatheringCardProps[]> {
+  const url = `/api/gatherings/joined?startDate=${startDate}`;
+  return fetchApi<{ data: GatheringCardProps[] }>(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then((response) => response.data);
+}

src/_queries/my-gathering/hosted-gathering-list-queries.ts

@@ -0,0 +1,10 @@
+import { getHostedGatheringList } from '@/src/_apis/my-gathering/hosted-gathering-list-apis';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+
+export function useGetHostedGatheringListQuery(startDate: string) {
+  return {
+    queryKey: ['gatheringDetail', startDate],
+    queryFn: () => getHostedGatheringList(startDate),
+    select: (data: GatheringCardProps[]) => data,
+  };
+}

src/_queries/my-gathering/joined-gathering-list-queries.ts

@@ -0,0 +1,10 @@
+import { getJoinedGatheringList } from '@/src/_apis/my-gathering/joined-gathering-list-apis';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+
+export function useGetJoinedGatheringListQuery(startDate: string) {
+  return {
+    queryKey: ['gatheringDetail', startDate],
+    queryFn: () => getJoinedGatheringList(startDate),
+    select: (data: GatheringCardProps[]) => data,
+  };
+}

src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useMemo } from 'react';
-import { formatDate } from '@/src/utils/format-date';
+import { formatDate, getDayOfWeek } from '@/src/utils/format-date';
 import ScheduledGatheringCard from '@/src/components/common/gathering-card/scheduled-gathering-card/container';
 import { GatheringCardProps } from '@/src/types/gathering-data';
 
@@ -27,7 +27,9 @@ export default function GatheringListWithDate({ gatheringList }: GatheringListWi
             {gathering.isNewDate && (
               <div className="hidden flex-nowrap md:block">
                 <div className="text-lg font-semibold">{formatDate(gathering.dateTime).date}</div>
-                <div className="text-base font-medium text-gray-500">월요일</div>
+                <div className="text-base font-medium text-gray-500">
+                  {getDayOfWeek(gathering.dateTime)}
+                </div>
               </div>
             )}
           </div>

src/app/(crew)/my-gathering/hosted/page.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useGetHostedGatheringListQuery } from '@/src/_queries/my-gathering/hosted-gathering-list-queries';
+import { formatDateToRequest } from '@/src/utils/format-date';
+import GatheringListWithDate from '@/src/app/(crew)/my-gathering/_component/gathering-list-with-date';
+import PopOverCalendar from '@/src/components/common/input/pop-over-calendar';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+
+export default function MyGatheringHostedPage() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [hostedGatheringList, setHostedGatheringList] = useState<GatheringCardProps[]>();
+
+  const { data, refetch } = useQuery(
+    useGetHostedGatheringListQuery(formatDateToRequest(selectedDate)),
+  );
+
+  useEffect(() => {
+    setHostedGatheringList(data);
+  }, [data]);
+
+  useEffect(() => {
+    refetch();
+  }, [selectedDate]);
+
+  return (
+    <div>
+      <div className="py-4 md:py-6">
+        <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
+      </div>
+      {hostedGatheringList && <GatheringListWithDate gatheringList={hostedGatheringList} />}
+    </div>
+  );
+}

src/app/(crew)/my-gathering/joined/page.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useGetJoinedGatheringListQuery } from '@/src/_queries/my-gathering/joined-gathering-list-queries';
+import { formatDateToRequest } from '@/src/utils/format-date';
+import GatheringListWithDate from '@/src/app/(crew)/my-gathering/_component/gathering-list-with-date';
+import PopOverCalendar from '@/src/components/common/input/pop-over-calendar';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+
+export default function MyGatheringJoinedPage() {
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [joinedGatheringList, setJoinedGatheringList] = useState<GatheringCardProps[]>();
+
+  const { data, refetch } = useQuery(
+    useGetJoinedGatheringListQuery(formatDateToRequest(selectedDate)),
+  );
+
+  useEffect(() => {
+    setJoinedGatheringList(data);
+  }, [data]);
+
+  useEffect(() => {
+    refetch();
+  }, [selectedDate]);
+
+  return (
+    <div>
+      <div className="py-4 md:py-6">
+        <PopOverCalendar value={selectedDate} onChange={(d) => setSelectedDate(d)} />
+      </div>
+      {joinedGatheringList && <GatheringListWithDate gatheringList={joinedGatheringList} />}
+    </div>
+  );
+}

src/app/(crew)/my-gathering/layout.tsx

@@ -5,8 +5,8 @@ import { usePathname, useRouter } from 'next/navigation';
 import Tabs from '@/src/components/common/tab';
 
 const myGatheringTabs = [
-  { id: 'my-gathering-participation', label: '참여한 약속', route: '/my-gathering/participation' },
-  { id: 'my-gathering-creation', label: '만든 약속', route: '/my-gathering/creation' },
+  { id: 'my-gathering-joined', label: '참여한 약속', route: '/my-gathering/joined' },
+  { id: 'my-gathering-hosted', label: '만든 약속', route: '/my-gathering/hosted' },
 ];
 
 export default function MyGatheringLayout({

src/app/(crew)/my-gathering/page.tsx

@@ -1,6 +1,6 @@
 import { redirect } from 'next/navigation';
 
 export default function MyGatheringPage() {
-  redirect('/my-gathering/participation');
+  redirect('/my-gathering/joined');
   return null;
 }