[Feat] 스케줄 페이지에 신청 취소 및 탈퇴 및 채팅 버튼 API 연동하기

src/app/schedule/_components/card.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import { useQuery } from '@tanstack/react-query';
+
+import { API } from '@/api';
+import { GroupModal } from '@/components/pages/group/group-modal';
+import CardComponent from '@/components/shared/card';
+import { useModal } from '@/components/ui';
+import { formatDateTime } from '@/lib/formatDateTime';
+import { groupKeys } from '@/lib/query-key/query-key-group';
+import { GroupListItemResponse } from '@/types/service/group';
+
+type TabType = 'current' | 'myPost' | 'past';
+
+interface ScheduleCardProps {
+  createdBy: GroupListItemResponse['createdBy'];
+  groupId: string;
+  isFinished: boolean;
+  isHost: boolean;
+  isPending: boolean;
+  joinPolicy: GroupListItemResponse['joinPolicy'];
+  meeting: GroupListItemResponse;
+  modalType: 'pending' | 'leave' | 'delete';
+  shouldFetchChatRoomId: boolean;
+  showActions: boolean;
+  tabType: TabType;
+}
+
+export const ScheduleCard = ({
+  createdBy,
+  groupId,
+  isFinished,
+  isHost,
+  isPending,
+  joinPolicy,
+  meeting,
+  modalType,
+  shouldFetchChatRoomId,
+  showActions,
+  tabType,
+}: ScheduleCardProps) => {
+  const router = useRouter();
+  const { open } = useModal();
+
+  const { data: groupDetails } = useQuery({
+    queryKey: groupKeys.detail(groupId),
+    queryFn: () => API.groupService.getGroupDetails({ groupId }),
+    enabled: shouldFetchChatRoomId,
+  });
+
+  const handleChatClick = () => {
+    if (!groupDetails?.chatRoomId) return;
+    router.push(`/message/chat/${groupDetails.chatRoomId}`);
+  };
+
+  const handleLeaveClick = () => {
+    open(<GroupModal groupId={groupId} type={modalType} />);
+  };
+
+  const handleCardClick = () => {
+    router.push(`/group/${groupId}`);
+  };
+
+  return (
+    <CardComponent
+      dateTime={formatDateTime(meeting.startTime)}
+      images={meeting.images}
+      isFinished={isFinished}
+      isHost={isHost}
+      isPending={isPending}
+      joinPolicy={joinPolicy}
+      leaveAndChatActions={
+        showActions
+          ? {
+              onLeave: handleLeaveClick,
+              onChat: handleChatClick,
+            }
+          : undefined
+      }
+      location={meeting.location}
+      maxParticipants={meeting.maxParticipants}
+      nickName={createdBy.nickName}
+      participantCount={meeting.participantCount}
+      profileImage={createdBy.profileImage}
+      tabType={tabType}
+      tags={meeting.tags}
+      title={meeting.title}
+      onClick={handleCardClick}
+    />
+  );
+};

src/app/schedule/_components/constants.tsx

@@ -0,0 +1,44 @@
+import { type ReactNode } from 'react';
+
+export type TabType = 'current' | 'myPost' | 'past';
+
+const DEFAULT_BUTTON_WIDTH = 'w-31';
+
+export const EMPTY_STATE_CONFIG: Record<
+  TabType,
+  { text: ReactNode; buttonText: string; buttonWidth: string }
+> = {
+  current: {
+    text: (
+      <>
+        현재 참여 중인 모임이 없어요.
+        <br />
+        지금 바로 모임을 참여해보세요!
+      </>
+    ),
+    buttonText: '모임 보러가기',
+    buttonWidth: DEFAULT_BUTTON_WIDTH,
+  },
+  myPost: {
+    text: (
+      <>
+        아직 생성한 모임이 없어요.
+        <br />
+        지금 바로 모임을 만들어보세요!
+      </>
+    ),
+    buttonText: '모임 만들기',
+    buttonWidth: DEFAULT_BUTTON_WIDTH,
+  },
+  past: {
+    text: (
+      <>
+        아직 참여한 모임이 없어요.
+        <br />
+        마음에 드는 모임을 발견해보세요!
+      </>
+    ),
+    buttonText: '모임 보러가기',
+    buttonWidth: DEFAULT_BUTTON_WIDTH,
+  },
+} as const;

src/app/schedule/_components/current.tsx

@@ -4,26 +4,34 @@ import { API } from '@/api';
 import { useInfiniteScroll } from '@/hooks/use-group/use-group-infinite-list';
 import { useIntersectionObserver } from '@/hooks/use-intersection-observer';
 import { INTERSECTION_OBSERVER_THRESHOLD } from '@/lib/constants/group-list';
+import { groupKeys } from '@/lib/query-key/query-key-group';
 import { GroupListItemResponse } from '@/types/service/group';
 
-import { MeetingList } from './meeting-list';
+import { Meetings } from './meetings';
 
 export default function Current() {
-  const { items, error, fetchNextPage, hasNextPage, isFetchingNextPage, completedMessage } =
-    useInfiniteScroll<GroupListItemResponse, ['myGroups', 'current']>({
-      queryFn: async ({ cursor, size }) => {
-        return await API.groupService.getMyGroups({
-          type: 'current',
-          cursor,
-          size,
-          myStatuses: ['ATTEND', 'PENDING'],
-        });
-      },
-      queryKey: ['myGroups', 'current'],
-      pageSize: 10,
-      errorMessage: '현재 모임 목록을 불러오는데 실패했습니다.',
-      completedMessage: '모든 현재 모임을 불러왔습니다.',
-    });
+  const {
+    items,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isFetching,
+    completedMessage,
+  } = useInfiniteScroll<GroupListItemResponse>({
+    queryFn: async ({ cursor, size }) => {
+      return await API.groupService.getMyGroups({
+        type: 'current',
+        cursor,
+        size,
+        myStatuses: ['ATTEND', 'PENDING'],
+      });
+    },
+    queryKey: groupKeys.myGroupsList('current') as ['myGroups', 'current'],
+    pageSize: 10,
+    errorMessage: '현재 모임 목록을 불러오는데 실패했습니다.',
+    completedMessage: '모든 현재 모임을 불러왔습니다.',
+  });
 
   const sentinelRef = useIntersectionObserver({
     onIntersect: () => {
@@ -36,13 +44,13 @@ export default function Current() {
   });
 
   return (
-    <MeetingList
+    <Meetings
       completedMessage={completedMessage}
       emptyStatePath='/'
       emptyStateType='current'
       error={error}
       hasNextPage={hasNextPage}
-      leaveActionText='모임 탈퇴'
+      isLoading={isFetching && items.length === 0}
       meetings={items}
       sentinelRef={sentinelRef}
       showActions={true}

src/app/schedule/_components/history.tsx

@@ -4,21 +4,29 @@ import { API } from '@/api';
 import { useInfiniteScroll } from '@/hooks/use-group/use-group-infinite-list';
 import { useIntersectionObserver } from '@/hooks/use-intersection-observer';
 import { INTERSECTION_OBSERVER_THRESHOLD } from '@/lib/constants/group-list';
+import { groupKeys } from '@/lib/query-key/query-key-group';
 import { GroupListItemResponse } from '@/types/service/group';
 
-import { MeetingList } from './meeting-list';
+import { Meetings } from './meetings';
 
 export default function History() {
-  const { items, error, fetchNextPage, hasNextPage, isFetchingNextPage, completedMessage } =
-    useInfiniteScroll<GroupListItemResponse, ['myGroups', 'past']>({
-      queryFn: async ({ cursor, size }) => {
-        return await API.groupService.getMyGroups({ type: 'past', cursor, size });
-      },
-      queryKey: ['myGroups', 'past'],
-      pageSize: 10,
-      errorMessage: '모임 이력을 불러오는데 실패했습니다.',
-      completedMessage: '모든 모임 이력을 불러왔습니다.',
-    });
+  const {
+    items,
+    error,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isFetching,
+    completedMessage,
+  } = useInfiniteScroll<GroupListItemResponse>({
+    queryFn: async ({ cursor, size }) => {
+      return await API.groupService.getMyGroups({ type: 'past', cursor, size });
+    },
+    queryKey: groupKeys.myGroupsList('past') as ['myGroups', 'past'],
+    pageSize: 10,
+    errorMessage: '모임 이력을 불러오는데 실패했습니다.',
+    completedMessage: '모든 모임 이력을 불러왔습니다.',
+  });
 
   const sentinelRef = useIntersectionObserver({
     onIntersect: () => {
@@ -31,12 +39,13 @@ export default function History() {
   });
 
   return (
-    <MeetingList
+    <Meetings
       completedMessage={completedMessage}
       emptyStatePath='/'
       emptyStateType='past'
       error={error}
       hasNextPage={hasNextPage}
+      isLoading={isFetching && items.length === 0}
       meetings={items}
       sentinelRef={sentinelRef}
       showActions={false}