diff --git a/src/app/(user-page)/my-meeting/_features/Participated.tsx b/src/app/(user-page)/my-meeting/_features/Participated.tsx index c332341..69f7a44 100644 --- a/src/app/(user-page)/my-meeting/_features/Participated.tsx +++ b/src/app/(user-page)/my-meeting/_features/Participated.tsx @@ -10,6 +10,7 @@ import { IMyMeetingParticipated } from 'types/myMeeting'; import CardRightSection from './CardRightSection'; import LeaveMeetingButton from './LeaveMeetingButton'; +import PendingSection from './PendingSection'; import PendingStatusChip from './PendingStatusChip'; import MeetingListSkeleton from './skeletons/SkeletonMeetingList'; @@ -83,6 +84,9 @@ const Participated = () => { return (
+ {/* 승인 대기중인 모임 섹션 (상단에 배치) */} + +

나의 Deving 모임

{meetingData.pages.map((page, pageIdx) => (
{page.content.map((meeting) => ( @@ -193,11 +197,6 @@ const Participated = () => { className="flex lg:hidden" meetingId={meeting.meetingId} /> - - {meeting.myMemberStatus === 'PENDING' && ( - - )} - {meeting.myMemberStatus === 'APPROVED' && !meeting.isMeetingManager && ( { ))} {/* 무한 스크롤을 위한 별도의 Observer 요소 */} - {hasNextPage &&
} - + {hasNextPage && ( +
+ )} {/* 추가 데이터 로딩 중 표시 */} {isFetchingNextPage && } diff --git a/src/app/(user-page)/my-meeting/_features/PendingSection.tsx b/src/app/(user-page)/my-meeting/_features/PendingSection.tsx new file mode 100644 index 0000000..7668a08 --- /dev/null +++ b/src/app/(user-page)/my-meeting/_features/PendingSection.tsx @@ -0,0 +1,134 @@ +import HorizonCard from '@/components/ui/HorizonCard'; +import { useInfiniteMyMeetingPendingQueries } from '@/hooks/queries/useMyMeetingQueries'; +import { translateCategoryNameToEng } from '@/util/searchFilter'; +import { ChevronRight } from 'lucide-react'; +import { useRouter } from 'next/navigation'; +import { useState } from 'react'; +import { IMyMeetingPending } from 'types/myMeeting'; + +import PendingStatusChip from './PendingStatusChip'; +import MeetingListSkeleton from './skeletons/SkeletonMeetingList'; + +const PendingSection = () => { + const router = useRouter(); + const [visiblePages, setVisiblePages] = useState(1); + + const { + data: pendingData, + fetchNextPage, + hasNextPage, + isFetchingNextPage, + isLoading, + } = useInfiniteMyMeetingPendingQueries(); + + const getMeetingDetailUrl = (meeting: IMyMeetingPending) => + `/meeting/${translateCategoryNameToEng(meeting.categoryTitle)}/${meeting.meetingId}`; + + const handleCardClick = (meeting: IMyMeetingPending) => { + router.push(getMeetingDetailUrl(meeting)); + }; + + // 더 보기 버튼 클릭 핸들러 + const handleLoadMore = () => { + if (hasNextPage) { + fetchNextPage().then(() => { + setVisiblePages((prev) => prev + 1); + }); + } + }; + + if (isLoading) { + return ; + } + + if (!pendingData || pendingData.pages[0].content.length === 0) { + return null; + } + + // 현재 표시할 페이지만 필터링 + const visibleData = pendingData.pages.slice(0, visiblePages); + + return ( +
+ {/* 스크롤 컨테이너 */} +
+ + {visibleData.map((page, pageIdx) => ( +
+ {page.content.map((meeting) => ( +
+ handleCardClick(meeting)} + title={meeting.title} + thumbnailUrl={meeting.thumbnail} + location={meeting.location} + total={meeting.maxMember} + value={meeting.memberCount} + className="flex-row" + meetingId={meeting.meetingId} + showLikeButton={false} + category={''} + thumbnailWidth={160} + thumbnailHeight={160} + > + +
+ ))} +
+ ))} + + {/* 더 보기 버튼 */} + {hasNextPage && ( +
+ +
+ )} +
+ + {/* 추가 데이터 로딩 중 표시 (버튼 외에 추가적인 로딩 표시가 필요한 경우) */} + {isFetchingNextPage && !hasNextPage && ( +
+ +
+ )} +
+ ); +}; + +export default PendingSection; diff --git a/src/app/(user-page)/my-meeting/_features/PendingStatusChip.tsx b/src/app/(user-page)/my-meeting/_features/PendingStatusChip.tsx index a38dff9..85786a0 100644 --- a/src/app/(user-page)/my-meeting/_features/PendingStatusChip.tsx +++ b/src/app/(user-page)/my-meeting/_features/PendingStatusChip.tsx @@ -24,11 +24,6 @@ export const PendingStatusChip = ({
승인 대기중 - - . - . - . -