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

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

@@ -9,21 +9,28 @@ import { GroupListItemResponse } from '@/types/service/group';
 import { MeetingList } from './meeting-list';
 
 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, ['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 sentinelRef = useIntersectionObserver({
     onIntersect: () => {
@@ -42,7 +49,7 @@ export default function Current() {
       emptyStateType='current'
       error={error}
       hasNextPage={hasNextPage}
-      leaveActionText='모임 탈퇴'
+      isLoading={isFetching && items.length === 0}
       meetings={items}
       sentinelRef={sentinelRef}
       showActions={true}

src/app/schedule/_components/history.tsx

@@ -9,16 +9,23 @@ import { GroupListItemResponse } from '@/types/service/group';
 import { MeetingList } from './meeting-list';
 
 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, ['myGroups', 'past']>({
+    queryFn: async ({ cursor, size }) => {
+      return await API.groupService.getMyGroups({ type: 'past', cursor, size });
+    },
+    queryKey: ['myGroups', 'past'],
+    pageSize: 10,
+    errorMessage: '모임 이력을 불러오는데 실패했습니다.',
+    completedMessage: '모든 모임 이력을 불러왔습니다.',
+  });
 
   const sentinelRef = useIntersectionObserver({
     onIntersect: () => {
@@ -37,6 +44,7 @@ export default function History() {
       emptyStateType='past'
       error={error}
       hasNextPage={hasNextPage}
+      isLoading={isFetching && items.length === 0}
       meetings={items}
       sentinelRef={sentinelRef}
       showActions={false}

src/app/schedule/_components/meeting-card.tsx

@@ -0,0 +1,87 @@
+'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 Card 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 MeetingCardProps {
+  getModalType: (meeting: GroupListItemResponse) => 'pending' | 'leave' | 'delete';
+  meeting: GroupListItemResponse;
+  showActions: boolean;
+  tabType: TabType;
+}
+
+/**
+ * 모임 상세 페이지에서 chatRoomId를 가져와 채팅 입장할거임
+ */
+export const MeetingCard = ({ getModalType, meeting, showActions, tabType }: MeetingCardProps) => {
+  const router = useRouter();
+  const { open } = useModal();
+
+  const groupId = String(meeting.id);
+  const myMembership = meeting.myMembership;
+  const isPending = myMembership?.status === 'PENDING';
+  const isFinished = meeting.status === 'FINISHED';
+  const isHost = myMembership?.role === 'HOST';
+  const createdBy = meeting.createdBy;
+
+  const shouldFetchChatRoomId = showActions && !isPending && !isFinished;
+
+  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 = () => {
+    const modalType = getModalType(meeting);
+    open(<GroupModal groupId={groupId} type={modalType} />);
+  };
+
+  const handleCardClick = () => {
+    router.push(`/group/${groupId}`);
+  };
+
+  return (
+    <Card
+      dateTime={formatDateTime(meeting.startTime)}
+      images={meeting.images}
+      isFinished={isFinished}
+      isHost={isHost}
+      isPending={isPending}
+      joinPolicy={meeting.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}
+    />
+  );
+};