[Refactor] 모임 상세 API V2 스펙으로 리펙토링

src/api/service/group-service/index.ts

@@ -1,4 +1,4 @@
-import { api } from '@/api/core';
+import { api, apiV2 } from '@/api/core';
 import {
   CreateGroupPayload,
   CreateGroupResponse,
@@ -44,7 +44,7 @@ export const groupServiceRemote = () => ({
   },
 
   getGroupDetails: (payload: GroupIdPayload) => {
-    return api.get<GetGroupDetailsResponse>(`/groups/${payload.groupId}`);
+    return apiV2.get<GetGroupDetailsResponse>(`/groups/${payload.groupId}`);
   },
 
   attendGroup: (payload: GroupIdPayload) => {

src/app/meetup/[groupId]/page.tsx

@@ -1,8 +1,6 @@
 'use client';
 
-import { use, useEffect, useState } from 'react';
-
-import Cookies from 'js-cookie';
+import { use } from 'react';
 
 import {
   MeetupBannerImages,
@@ -17,49 +15,26 @@ interface Props {
 }
 
 const MeetupDetailPage = ({ params }: Props) => {
-  const [isHost, setIsHost] = useState<boolean>(false);
-  const [isPast, setIsPast] = useState<boolean>(false);
   const { groupId } = use(params);
   const { data } = useGetGroupDetails({ groupId });
 
-  useEffect(() => {
-    if (!data) return;
-
-    const { createdBy, startTime } = data;
-
-    const sessionId = Number(Cookies.get('userId'));
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setIsHost(sessionId === createdBy.userId);
-
-    setIsPast(() => {
-      if (new Date(startTime) < new Date()) return true;
-      return false;
-    });
-  }, [data]);
-
   console.log(data);
 
   if (!data) return null;
 
-  const {
-    images,
-    joinedMembers,
-    userStatus: { isJoined },
-    participantCount,
-    maxParticipants,
-  } = data;
+  const { images, status, myMembership, joinedMembers, participantCount, maxParticipants } = data;
 
   return (
     <div>
       <MeetupBannerImages images={images} />
-      <MeetupDescriptions conditions={{ isHost, isPast }} descriptions={data} />
+      <MeetupDescriptions descriptions={data} />
       <MeetupMembers members={joinedMembers} />
       <MeetupButtons
         conditions={{
-          isHost,
-          isJoined,
-          isPast,
-          isAttendDisabled: participantCount >= maxParticipants || isPast,
+          isHost: myMembership?.role === 'HOST',
+          isJoined: myMembership?.status === 'ATTEND',
+          isPast: status === 'FINISHED',
+          isAttendDisabled: participantCount >= maxParticipants || status === 'FINISHED',
         }}
         groupId={groupId}
       />

src/components/pages/meetup/meetup-banner-images/index.tsx

@@ -24,9 +24,15 @@ export const MeetupBannerImages = ({ images }: Props) => {
     <section className='select-none'>
       {hasImages ? (
         <Swiper className='h-60' loop modules={[Pagination]} pagination>
-          {images.map(({ imageId440x240, imageUrl440x240 }) => (
-            <SwiperSlide key={imageId440x240} className='relative'>
-              <Image alt='image' draggable={false} fill objectFit='cover' src={imageUrl440x240} />
+          {images.map(({ groupImageId, variants }) => (
+            <SwiperSlide key={groupImageId} className='relative'>
+              <Image
+                alt='썸네일 이미지'
+                draggable={false}
+                fill
+                objectFit='cover'
+                src={variants[1].imageUrl}
+              />
             </SwiperSlide>
           ))}
         </Swiper>

src/components/pages/meetup/meetup-buttons/index.tsx

@@ -5,11 +5,10 @@
 import { MeetupModal } from '@/components/pages/meetup/meetup-modal';
 import { Button } from '@/components/ui/button';
 import { useModal } from '@/components/ui/modal';
-import { GetGroupDetailsResponse } from '@/types/service/group';
 
 interface Props {
   conditions: {
-    isJoined: GetGroupDetailsResponse['userStatus']['isJoined'];
+    isJoined: boolean;
     isHost: boolean;
     isPast: boolean;
     isAttendDisabled: boolean;

src/components/pages/meetup/meetup-descriptions/description-sections/description-setting/index.tsx

@@ -3,10 +3,15 @@ import { formatDateTime } from '@/lib/formatDateTime';
 import { GetGroupDetailsResponse } from '@/types/service/group';
 
 interface Props {
-  setting: Pick<GetGroupDetailsResponse, 'location' | 'startTime'>;
+  setting: Pick<GetGroupDetailsResponse, 'address' | 'startTime'>;
 }
 
-export const DescriptionSetting = ({ setting: { location, startTime } }: Props) => {
+export const DescriptionSetting = ({
+  setting: {
+    address: { location },
+    startTime,
+  },
+}: Props) => {
   return (
     <div className='mt-6'>
       <ul className='text-text-sm-medium space-y-[6px] text-gray-900'>

src/components/pages/meetup/meetup-descriptions/index.tsx

@@ -11,43 +11,45 @@ import { GetGroupDetailsResponse } from '@/types/service/group';
 interface Props {
   descriptions: Pick<
     GetGroupDetailsResponse,
+    | 'status'
     | 'createdBy'
     | 'createdAt'
+    | 'address'
     | 'title'
     | 'tags'
     | 'description'
-    | 'location'
     | 'startTime'
+    | 'myMembership'
     | 'maxParticipants'
     | 'participantCount'
   >;
-  conditions: {
-    isHost: boolean;
-    isPast: boolean;
-  };
 }
 
 export const MeetupDescriptions = ({
   descriptions: {
+    status,
     createdBy,
     createdAt,
+    address,
     title,
     tags,
     description,
-    location,
     startTime,
+    myMembership,
     maxParticipants,
     participantCount,
   },
-  conditions,
 }: Props) => {
   return (
     <section className='bg-white px-5 pt-6 pb-4'>
-      <DescriptionProfile conditions={conditions} hostInfo={createdBy} />
+      <DescriptionProfile
+        conditions={{ isHost: myMembership?.role === 'HOST', isPast: status === 'FINISHED' }}
+        hostInfo={createdBy}
+      />
       <DescriptionTitle title={title} />
       <DescriptionTags tags={tags} />
       <DescriptionDetail detail={description} />
-      <DescriptionSetting setting={{ location, startTime }} />
+      <DescriptionSetting setting={{ address, startTime }} />
       <DescriptionProgress createdAt={createdAt} progress={{ maxParticipants, participantCount }} />
     </section>
   );

src/types/service/group.ts

@@ -125,16 +125,25 @@ export interface CreateGroupResponse {
 export interface GetGroupDetailsResponse {
   id: number;
   title: string;
-  location: string;
-  locationDetail: string;
+  status: 'RECRUITING' | 'FULL' | 'FINISHED';
+  address: {
+    location: string;
+    locationDetail: string;
+  };
   startTime: string;
   endTime: string;
   images: {
+    groupImageId: number;
+    imageKey: string;
     sortOrder: number;
-    imageId440x240: number;
-    imageId100x100: number;
-    imageUrl440x240: string;
-    imageUrl100x100: string;
+    variants: {
+      variantId: number;
+      type: 'CARD_440_240' | 'THUMBNAIL_100_100';
+      width: number;
+      height: number;
+      format: 'WEBP';
+      imageUrl: string;
+    }[];
   }[];
   tags: string[];
   description: string;
@@ -148,16 +157,21 @@ export interface GetGroupDetailsResponse {
   };
   createdAt: string;
   updatedAt: string;
-  userStatus: {
-    isJoined: boolean;
+  myMembership?: {
+    groupUserId: number;
+    role: 'HOST' | 'MEMBER';
+    status: 'ATTEND' | 'LEFT';
     joinedAt: string;
-  };
+    leftAt: string;
+  } | null;
   joinedMembers: {
     userId: 0;
     groupRole: 'HOST' | 'MEMBER';
+    status: 'ATTEND' | 'LEFT';
     nickName: string;
     profileImage: string;
     joinedAt: string;
+    leftAt: string;
   }[];
 }