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 = ({
승인 대기중
-
- .
- .
- .
-