diff --git a/src/app/community/components/club/clubMenu/AllMyClubs.tsx b/src/app/community/components/club/clubMenu/AllMyClubs.tsx index b9995d2..cc74f5d 100644 --- a/src/app/community/components/club/clubMenu/AllMyClubs.tsx +++ b/src/app/community/components/club/clubMenu/AllMyClubs.tsx @@ -1,10 +1,7 @@ -import React, { useState, useEffect } from 'react'; -import CategoryDropdown from '@components/club/CategoryDropdown'; import { ClubCardProps } from '@/app/api/club/fetchClubs'; -import AddClubButton from '@components/club/common/AddClubButton'; -import SearchInput from '@components/club/SearchInput'; import API from '@/utils/axios'; import Link from 'next/link'; +import { useEffect, useState } from 'react'; export default function AllMyClubs() { const [clubs, setClubs] = useState([]); @@ -18,32 +15,41 @@ export default function AllMyClubs() { console.log('Fetching clubs with params:', params.toString()); - const response = await API.get(`/club/application/search`, { params }); + const response = await API.get(`/club/authenticated/search`, { params }); const data = response.data; console.log('API Response:', data); - const fetchedClubs = data.data.content.map((club: any) => ({ - id: club.id, - member_id: club.member_id, - member_name: club.member_name, - profile_image: club.profile_image, - title: club.title, - introduction: club.introduction, - detail_introduction: club.detail_introduction, - club_thumbnail: club.thumbnail, - club_type: club.club_type, - recruit_count: club.recruit_count, - club_members: club.club_members, - club_meetings: club.club_meetings - ? club.club_meetings.map((meeting: any) => ({ - ...meeting, - dateDiff: calculateDateDiff(meeting.date), - })) - : [], - liked: club.liked, - })); + const fetchedClubs = await Promise.all( + data.data.content.map(async (club: any) => { + const hasMatchingMembers = await fetchClubMembers(club.id); + if (hasMatchingMembers) { + return { + id: club.id, + member_id: club.member_id, + member_name: club.member_name, + profile_image: club.profile_image, + title: club.title, + introduction: club.introduction, + detail_introduction: club.detail_introduction, + club_thumbnail: club.thumbnail, + club_type: club.club_type, + recruit_count: club.recruit_count, + club_members: club.club_members, + club_meetings: club.club_meetings + ? club.club_meetings.map((meeting: any) => ({ + ...meeting, + dateDiff: calculateDateDiff(meeting.date), + })) + : [], + liked: club.liked, + }; + } else { + return null; + } + }), + ); - setClubs(fetchedClubs); + setClubs(fetchedClubs.filter((club) => club !== null)); } catch (error) { console.error('Error fetching clubs:', error); } finally { @@ -89,6 +95,8 @@ export default function AllMyClubs() { } }; + let memberId: number | null = null; + async function fetchClubMembers(clubId: number) { try { // 클럽 멤버 가져오기 @@ -98,13 +106,14 @@ export default function AllMyClubs() { const members = []; if (data.data.member_id) { - console.log(data.data.member_id); + // console.log(data.data.member_id); members.push(data.data.member_id); + memberId = data.data.member_id; } if (data.data.club_members && data.data.club_members.length > 0) { data.data.club_members.forEach((member: any) => { - console.log('Member ID:', member.member_id); + // console.log('Member ID:', member.member_id); members.push(member.member_id); }); @@ -112,19 +121,19 @@ export default function AllMyClubs() { const myPageResponse = await API.get(`/member/my-page`); const myPageData = myPageResponse.data; const myId = myPageData.data.id; - console.log(myId); + // console.log(myId); // 내 ID와 일치하는 멤버 확인 const matchedMembers = members.filter((memberId) => memberId === myId); if (matchedMembers.length > 0) { - console.log('내 ID와 일치하는 멤버가 있습니다.'); - console.log('일치하는 멤버:', matchedMembers); + // console.log('내 ID와 일치하는 멤버가 있습니다.'); + // console.log('일치하는 멤버:', matchedMembers); // 일치하는 멤버가 있을 때의 처리 return true; } else { - console.log('내 ID와 일치하는 멤버가 없습니다.'); + // console.log('내 ID와 일치하는 멤버가 없습니다.'); // 일치하는 멤버가 없을 때의 처리 return false; } @@ -142,25 +151,6 @@ export default function AllMyClubs() { return ( <> -
-
-
- -
- -
- -
- - -
-
{loading ? (

Loading...

) : ( @@ -168,127 +158,140 @@ export default function AllMyClubs() { {clubs.map((club) => (
-
- {/* 모바일 화면 */} -
-
-
- {club.title} -
-
-
-

- {club.title} -

+ {/* 모바일 화면 */} +
+
+
+ {club.title} + {club.member_id === memberId && ( +
+ Host Badge Icon
-

- {club.introduction} -

-
-
- Peoples Icon - {club.club_members?.length || 0}/ - {club.recruit_count} -
+ )} +
+
+
+

+ {club.title} +

+
+

+ {club.introduction} +

+
+
+ Peoples Icon + {club.club_members?.length || 0}/{club.recruit_count}
-
-
+
+
+
+
+ {club.club_type} +
+ {club.club_meetings.length > 0 && (
- {club.club_type} + {calculateDateDiff(club.club_meetings[0].date)}
- {club.club_meetings.length > 0 && ( -
- {calculateDateDiff(club.club_meetings[0].date)} -
- )} -
- + )}
-
- {/* PC 화면 */} -
-
+ + +
+
+ {/* PC 화면 */} +
+
+ {club.title} + {club.member_id === memberId && ( +
+ Host Badge Icon +
+ )} + +
+
+

{club.title}

+ +
+

+ {club.introduction} +

+
+
+ Peoples Icon + {club.club_members?.length || 0}/{club.recruit_count}
-

- {club.introduction} -

-
-
- Peoples Icon - {club.club_members?.length || 0}/ - {club.recruit_count} +
+
+
+
+ {club.club_type}
-
-
-
-
- {club.club_type} + {club.club_meetings.length > 0 && ( +
+ {calculateDateDiff(club.club_meetings[0].date)}
- {club.club_meetings.length > 0 && ( -
- {calculateDateDiff(club.club_meetings[0].date)} -
- )} -
+ )}
diff --git a/src/app/community/components/club/clubMenu/BookmarkMenu.tsx b/src/app/community/components/club/clubMenu/BookmarkMenu.tsx index c030f7e..638cba8 100644 --- a/src/app/community/components/club/clubMenu/BookmarkMenu.tsx +++ b/src/app/community/components/club/clubMenu/BookmarkMenu.tsx @@ -170,7 +170,6 @@ export default function BookmarkMenu() {
{clubs.map((club) => ( - {' '}
{/* 모바일 화면 */}
{/* 모바일 화면 */}
@@ -188,7 +188,7 @@ export default function ManageableClubs() { {/* PC 화면 */}
{/* 모바일 화면 */}
@@ -220,7 +220,7 @@ export default function UnapprovedClubs() { {/* PC 화면 */}