feat: 프로필 내 모임추가

src/api/endpoint/meetings/getMeetings.ts

@@ -0,0 +1,53 @@
+import axios from 'axios';
+import { z } from 'zod';
+
+// FIXME: 1/28 데모데이 due date가 얼마 남지 않은 이슈로 크루 api와 바로 통신했습니다.
+// 플그 서버와 통신하도록 수정 + zod, createEndPoint 사용하도록 변경 필요합니다. 담당자: FE 서지수, BE 이승헌
+// 무한스크롤 적용해야합니다.
+
+const MeetingSchema = z.object({
+  id: z.number(),
+  isMeetingLeader: z.boolean(),
+  title: z.string(),
+  imageUrl: z.string(),
+  category: z.string(),
+  isActiveMeeting: z.boolean(),
+  mstartDate: z.string(),
+  mendDate: z.string(),
+});
+
+const MetaSchema = z.object({
+  page: z.number(),
+  take: z.number(),
+  itemCount: z.number(),
+  pageCount: z.number(),
+  hasPreviousPage: z.boolean(),
+  hasNextPage: z.boolean(),
+});
+
+export const CREW_ORIGIN =
+  process.env.NODE_ENV === 'development' ? `https://crew.api.dev.sopt.org` : `https://crew.api.prod.sopt.org`;
+
+// export const getMeetings = createEndpoint({
+//   request: (orgUserId: number) => ({
+//     method: 'GET',
+//     url: `${CREW_ORIGIN}/meeting/v2/org-user?orgUserId=${orgUserId}`,
+// }),
+//   serverResponseScheme: z.object({
+//     meetings: z.array(MeetingSchema),
+//     meta: MetaSchema,
+//   }),
+// });
+
+// export const getMeetings = async (orgUserId: number) => {
+//     await axios.request({
+//       method: 'GET',
+//       baseURL: `${CREW_ORIGIN}/meeting/v2/org-user?orgUserId=${orgUserId}`,
+//     });
+//   };
+
+export async function getMeetings(orgUserId: number) {
+  const data = await axios.get(`https://crew.api.dev.sopt.org/meeting/v2/org-user?orgUserId=${orgUserId}`);
+
+  return data.data?.meetings;
+}

src/components/members/detail/MemberDetail.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
+import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
 import { uniq } from 'lodash-es';
 import Link from 'next/link';
@@ -10,6 +11,7 @@ import MailIcon from 'public/icons/icon-mail.svg';
 import ProfileIcon from 'public/icons/icon-profile.svg';
 import { FC, useMemo } from 'react';
 
+import { getMeetings } from '@/api/endpoint/meetings/getMeetings';
 import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe';
 import { useGetMemberProfileById } from '@/api/endpoint_LEGACY/hooks';
 import { isProjectCategory } from '@/api/endpoint_LEGACY/projects/type';
@@ -21,9 +23,11 @@ import EmptyProfile from '@/components/members/detail/EmptyProfile';
 import InfoItem from '@/components/members/detail/InfoItem';
 import InterestSection from '@/components/members/detail/InterestSection';
 import MemberDetailSection from '@/components/members/detail/MemberDetailSection';
+import MemberMeetingCard from '@/components/members/detail/MemberMeetingCard';
 import MemberProjectCard from '@/components/members/detail/MemberProjectCard';
 import MessageSection from '@/components/members/detail/MessageSection';
 import PartItem from '@/components/members/detail/PartItem';
+import { MeetingType } from '@/components/members/detail/types';
 import { DEFAULT_DATE } from '@/components/members/upload/constants';
 import { Category } from '@/components/projects/types';
 import { playgroundLink } from '@/constants/links';
@@ -51,7 +55,11 @@ const MemberDetail: FC<MemberDetailProps> = ({ memberId }) => {
   const router = useRouter();
   const { data: profile, isLoading, error } = useGetMemberProfileById(safeParseInt(memberId) ?? undefined);
   const { data: me } = useGetMemberOfMe();
-
+  const { data: meetingList } = useQuery({
+    queryKey: ['getMeetings'],
+    queryFn: () => getMeetings(Number(memberId) ?? undefined),
+  });
+  console.log(meetingList);
   const sortedSoptActivities = useMemo(() => {
     if (!profile?.soptActivities) {
       return [];
@@ -253,6 +261,20 @@ const MemberDetail: FC<MemberDetailProps> = ({ memberId }) => {
             </>
           )}
         </ProjectContainer>
+        <ProjectContainer>
+          <ProjectTitle>{profile.name}님이 참여한 모임</ProjectTitle>
+          {meetingList && meetingList?.length > 0 && (
+            <>
+              <ProjectSub>{meetingList.length}개의 프로젝트에 참여</ProjectSub>
+              <ProjectDisplay>
+                {meetingList.map((meeting: MeetingType) => (
+                  <MemberMeetingCard key={meeting.id} userName={profile.name} {...meeting} />
+                ))}
+              </ProjectDisplay>
+            </>
+          )}
+          {meetingList?.length === 0 && <ProjectSub>아직 참여한 프로젝트가 없어요</ProjectSub>}
+        </ProjectContainer>
       </Wrapper>
     </Container>
   );
@@ -508,7 +530,7 @@ const ProjectDisplay = styled.div`
   row-gap: 20px;
   column-gap: 29px;
   margin-top: 32px;
-
+  
   @media ${MOBILE_MEDIA_QUERY} {
     display: flex;
     flex-direction: column;

src/components/members/detail/MemberMeetingCard.tsx

@@ -1,3 +1,68 @@
-export default function MemberMeetingCard() {
-  return <div>MemberGroupCard</div>;
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import dayjs from 'dayjs';
+import Link from 'next/link';
+
+import ContentsCard from '@/components/common/ContentsCard';
+import { playgroundLink } from '@/constants/links';
+
+interface Meeting {
+  id: number;
+  isMeetingLeader: boolean;
+  title: string;
+  category: string;
+  imageUrl: string;
+  isActiveMeeting: boolean;
+  mstartDate: string;
+  mendDate: string;
 }
+
+interface MeetingProps extends Meeting {
+  userName: string;
+}
+
+export default function MemberMeetingCard({
+  id,
+  isMeetingLeader,
+  title,
+  category,
+  imageUrl,
+  mstartDate,
+  mendDate,
+  isActiveMeeting,
+  userName,
+}: MeetingProps) {
+  const meetingCategory = isMeetingLeader ? `${category} | ${userName}님이 만든 모임` : category;
+  const startDate = dayjs(mstartDate).format('YYYY.MM.DD');
+  const endDate = dayjs(mendDate).format('YYYY.MM.DD');
+  const date = startDate === endDate ? startDate : `${startDate} - ${endDate}`;
+
+  return (
+    <Link href={playgroundLink.groupDetail(id)}>
+      <ContentsCard
+        thumbnail={imageUrl}
+        title={title}
+        top={meetingCategory}
+        bottom={
+          <Bottom>
+            <Circle isActiveMeeting={isActiveMeeting} />
+            {date}
+          </Bottom>
+        }
+      />
+    </Link>
+  );
+}
+
+const Circle = styled.div<{ isActiveMeeting: boolean }>`
+  border-radius: 50%;
+  background-color: ${({ isActiveMeeting }) => (isActiveMeeting ? '#CDF47C' : colors.gray300)};
+  width: 6px;
+  height: 6px;
+`;
+
+const Bottom = styled.footer`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;

src/components/members/detail/types.ts

@@ -15,3 +15,14 @@ export type Career =
       endDate: string;
       isCurrent: false;
     };
+
+export type MeetingType = {
+  id: number;
+  isMeetingLeader: boolean;
+  title: string;
+  imageUrl: string;
+  category: string;
+  isActiveMeeting: boolean;
+  mstartDate: string;
+  mendDate: string;
+};

src/constants/links.ts

@@ -17,6 +17,7 @@ export const playgroundLink = {
   projectUpload: () => `/projects/upload`,
   projectEdit: (id: string | number) => `/projects/edit/${id}`,
   groupList: () => '/group',
+  groupDetail: (id: string | number) => `/group/detail?id=${id}`,
   intro: () => `/intro`,
   login: () => `/auth/login`,
   register: () => `/auth/verify`,