Skip to content

Commit 3bc6dfb

Browse files
Lee-Dong-SeokLee-Dong-Seok
committed
Merge branch 'feat/markup/landing-page/DEVING-78' of https://github.com/MoimService/Moim-FE into feat/markup/landing-page/DEVING-78
2 parents f41fdf2 + 3c922ee commit 3bc6dfb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+1068
-486
lines changed

‎public/hobby_cat.png‎

1.57 KB
Loading

‎public/mogakco_cat.png‎

3.6 KB
Loading

‎public/side-project_cat.png‎

2.89 KB
Loading

‎src/app/(user-page)/my-meeting/_features/CardRightSection.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@ const CardRightSection = ({
6262
);
6363
router.push(
6464
`/my-meeting/my/user-list?meetingId=${meetingId}&type=${showPublicSelect ? 'created' : 'participated'}`,
65+
{
66+
scroll: false,
67+
},
6568
);
6669
};
6770

‎src/app/(user-page)/my-meeting/_features/Created.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ const Created = () => {
6161
className="flex-row"
6262
meetingId={meeting.meetingId}
6363
category={''}
64+
showLikeButton={false}
6465
>
6566
<CardRightSection
6667
memberList={meeting.memberList}
@@ -91,6 +92,7 @@ const Created = () => {
9192
className=""
9293
meetingId={meeting.meetingId}
9394
category={''}
95+
showLikeButton={false}
9496
/>
9597
<CardRightSection
9698
memberList={meeting.memberList}
@@ -120,6 +122,7 @@ const Created = () => {
120122
className=""
121123
meetingId={meeting.meetingId}
122124
category={''}
125+
showLikeButton={false}
123126
/>
124127
<CardRightSection
125128
memberList={meeting.memberList}
@@ -133,6 +136,18 @@ const Created = () => {
133136
))}
134137
</div>
135138
))}
139+
{/* 추가 데이터 로딩 중 표시 */}
140+
{isFetchingNextPage && <MeetingListSkeleton />}
141+
142+
{/* 데이터가 없는 경우 표시 */}
143+
{meetingData.pages[0].content.length === 0 && (
144+
<div className="typo-head3 flex h-[60vh] w-full items-center justify-center text-center text-Cgray500">
145+
<div>
146+
<p className="mb-2">내가 만든 모임이 없어요.</p>
147+
<p>원하는 모임을 만들어보세요!</p>
148+
</div>
149+
</div>
150+
)}
136151
</div>
137152
);
138153
};

‎src/app/(user-page)/my-meeting/_features/Likes.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ const Likes = () => {
124124

125125
{/* 데이터가 없는 경우 표시 */}
126126
{meetingData.pages[0].content.length === 0 && (
127-
<div className="flex h-[60vh] w-full items-center justify-center text-center text-Cgray500">
127+
<div className="typo-head3 flex h-[60vh] w-full items-center justify-center pt-[130px] text-center text-Cgray500">
128128
<div>
129129
<p className="mb-2">찜한 모임이 없어요.</p>
130130
<p>원하는 모임을 찜해보세요!</p>

‎src/app/(user-page)/my-meeting/_features/ModalUserList.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ const ModalUserList = ({
2626
const handleProfileClick = (user: Member) => {
2727
router.push(
2828
`/my-meeting/my/profile?meetingId=${meetingId}&userId=${user.userId}&memberStatus=${user.memberStatus}`,
29+
{
30+
scroll: false,
31+
},
2932
);
3033
};
3134

‎src/app/(user-page)/my-meeting/_features/Participated.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { IMyMeetingParticipated } from 'types/myMeeting';
1010

1111
import CardRightSection from './CardRightSection';
1212
import LeaveMeetingButton from './LeaveMeetingButton';
13+
import PendingSection from './PendingSection';
1314
import PendingStatusChip from './PendingStatusChip';
1415
import MeetingListSkeleton from './skeletons/SkeletonMeetingList';
1516

@@ -83,6 +84,9 @@ const Participated = () => {
8384

8485
return (
8586
<div>
87+
{/* 승인 대기중인 모임 섹션 (상단에 배치) */}
88+
<PendingSection />
89+
<h1 className="typo-head1 mt-10 text-white">나의 Deving 모임</h1>
8690
{meetingData.pages.map((page, pageIdx) => (
8791
<div key={pageIdx}>
8892
{page.content.map((meeting) => (
@@ -193,11 +197,6 @@ const Participated = () => {
193197
className="flex lg:hidden"
194198
meetingId={meeting.meetingId}
195199
/>
196-
197-
{meeting.myMemberStatus === 'PENDING' && (
198-
<PendingStatusChip meetingId={meeting.meetingId} />
199-
)}
200-
201200
{meeting.myMemberStatus === 'APPROVED' &&
202201
!meeting.isMeetingManager && (
203202
<LeaveMeetingButton
@@ -216,14 +215,19 @@ const Participated = () => {
216215
))}
217216

218217
{/* 무한 스크롤을 위한 별도의 Observer 요소 */}
219-
{hasNextPage && <div ref={lastMeetingRef} id="infinite-scroll-trigger" />}
220-
218+
{hasNextPage && (
219+
<div
220+
ref={lastMeetingRef}
221+
id="infinite-scroll-trigger"
222+
className="mt-10 h-10" // 높이와 마진 추가
223+
/>
224+
)}
221225
{/* 추가 데이터 로딩 중 표시 */}
222226
{isFetchingNextPage && <MeetingListSkeleton />}
223227

224228
{/* 데이터가 없는 경우 표시 */}
225229
{meetingData.pages[0].content.length === 0 && (
226-
<div className="flex h-[60vh] w-full items-center justify-center text-center text-Cgray500">
230+
<div className="typo-head3 flex h-[60vh] w-full items-center justify-center text-center text-Cgray500">
227231
<div>
228232
<p className="mb-2">내가 참여하고있는 모임이 없어요.</p>
229233
<p>원하는 모임에 참가하세요!</p>

‎src/app/(user-page)/my-meeting/_features/PendingSection.tsx‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import HorizonCard from '@/components/ui/HorizonCard';
2+
import { useInfiniteMyMeetingPendingQueries } from '@/hooks/queries/useMyMeetingQueries';
3+
import { translateCategoryNameToEng } from '@/util/searchFilter';
4+
import { ChevronRight } from 'lucide-react';
5+
import { useRouter } from 'next/navigation';
6+
import { useState } from 'react';
7+
import { IMyMeetingPending } from 'types/myMeeting';
8+
9+
import PendingStatusChip from './PendingStatusChip';
10+
import MeetingListSkeleton from './skeletons/SkeletonMeetingList';
11+
12+
const PendingSection = () => {
13+
const router = useRouter();
14+
const [visiblePages, setVisiblePages] = useState(1);
15+
16+
const {
17+
data: pendingData,
18+
fetchNextPage,
19+
hasNextPage,
20+
isFetchingNextPage,
21+
isLoading,
22+
} = useInfiniteMyMeetingPendingQueries();
23+
24+
const getMeetingDetailUrl = (meeting: IMyMeetingPending) =>
25+
`/meeting/${translateCategoryNameToEng(meeting.categoryTitle)}/${meeting.meetingId}`;
26+
27+
const handleCardClick = (meeting: IMyMeetingPending) => {
28+
router.push(getMeetingDetailUrl(meeting));
29+
};
30+
31+
// 더 보기 버튼 클릭 핸들러
32+
const handleLoadMore = () => {
33+
if (hasNextPage) {
34+
fetchNextPage().then(() => {
35+
setVisiblePages((prev) => prev + 1);
36+
});
37+
}
38+
};
39+
40+
if (isLoading) {
41+
return <MeetingListSkeleton />;
42+
}
43+
44+
if (!pendingData || pendingData.pages[0].content.length === 0) {
45+
return null;
46+
}
47+
48+
// 현재 표시할 페이지만 필터링
49+
const visibleData = pendingData.pages.slice(0, visiblePages);
50+
51+
return (
52+
<div className="mb-12 mt-12">
53+
{/* 스크롤 컨테이너 */}
54+
<div
55+
className="custom-scrollbar flex overflow-x-auto pb-4"
56+
style={{
57+
scrollbarWidth: 'thin',
58+
scrollbarColor: '#3853EA #30333E',
59+
}}
60+
>
61+
<style jsx>{`
62+
.custom-scrollbar::-webkit-scrollbar {
63+
height: 62px;
64+
}
65+
.custom-scrollbar::-webkit-scrollbar-track {
66+
background: #30333e;
67+
border-radius: 4px;
68+
}
69+
.custom-scrollbar::-webkit-scrollbar-thumb {
70+
background-color: #3853ea;
71+
border-radius: 4px;
72+
}
73+
`}</style>
74+
{visibleData.map((page, pageIdx) => (
75+
<div key={pageIdx} className="flex space-x-4">
76+
{page.content.map((meeting) => (
77+
<div
78+
key={meeting.meetingId}
79+
className="relative min-w-[320px] lg:min-w-[500px]"
80+
>
81+
<HorizonCard
82+
onClick={() => handleCardClick(meeting)}
83+
title={meeting.title}
84+
thumbnailUrl={meeting.thumbnail}
85+
location={meeting.location}
86+
total={meeting.maxMember}
87+
value={meeting.memberCount}
88+
className="flex-row"
89+
meetingId={meeting.meetingId}
90+
showLikeButton={false}
91+
category={''}
92+
thumbnailWidth={160}
93+
thumbnailHeight={160}
94+
></HorizonCard>
95+
<PendingStatusChip meetingId={meeting.meetingId} />
96+
</div>
97+
))}
98+
</div>
99+
))}
100+
101+
{/* 더 보기 버튼 */}
102+
{hasNextPage && (
103+
<div className="ml-2 flex items-center justify-center">
104+
<button
105+
onClick={handleLoadMore}
106+
disabled={isFetchingNextPage}
107+
className={`flex min-h-[100px] min-w-[44px] items-center justify-center rounded-lg border border-Cgray300 bg-main p-2 transition-colors ${
108+
isFetchingNextPage
109+
? 'cursor-not-allowed opacity-70'
110+
: 'hover:bg-Cgray100'
111+
}`}
112+
aria-label="더 많은 대기중인 모임 보기"
113+
>
114+
{isFetchingNextPage ? (
115+
<span className="animate-pulse text-white">로딩중...</span>
116+
) : (
117+
<ChevronRight className="text-white" />
118+
)}
119+
</button>
120+
</div>
121+
)}
122+
</div>
123+
124+
{/* 추가 데이터 로딩 중 표시 (버튼 외에 추가적인 로딩 표시가 필요한 경우) */}
125+
{isFetchingNextPage && !hasNextPage && (
126+
<div className="mt-4">
127+
<MeetingListSkeleton />
128+
</div>
129+
)}
130+
</div>
131+
);
132+
};
133+
134+
export default PendingSection;

‎src/app/(user-page)/my-meeting/_features/PendingStatusChip.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,6 @@ export const PendingStatusChip = ({
2424
<div className="absolute left-2 top-2 z-10 flex h-8 overflow-hidden rounded-md shadow-md">
2525
<div className="flex items-center bg-main bg-opacity-90 px-3 py-1 text-sm font-medium text-white">
2626
<span>승인 대기중</span>
27-
<span className="ml-1 inline-flex">
28-
<span className="animate-delay-100">.</span>
29-
<span className="animate-delay-200">.</span>
30-
<span className="animate-delay-300">.</span>
31-
</span>
3227
</div>
3328

3429
<button

0 commit comments

Comments
 (0)