diff --git a/src/api/service/group-service/index.ts b/src/api/service/group-service/index.ts index 04caa524..c6de1f96 100644 --- a/src/api/service/group-service/index.ts +++ b/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(`/groups/${payload.groupId}`); + return apiV2.get(`/groups/${payload.groupId}`); }, attendGroup: (payload: GroupIdPayload) => { diff --git a/src/app/meetup/[groupId]/page.tsx b/src/app/meetup/[groupId]/page.tsx index b2e4d5e2..3820414f 100644 --- a/src/app/meetup/[groupId]/page.tsx +++ b/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(false); - const [isPast, setIsPast] = useState(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 (
- + = maxParticipants || isPast, + isHost: myMembership?.role === 'HOST', + isJoined: myMembership?.status === 'ATTEND', + isPast: status === 'FINISHED', + isAttendDisabled: participantCount >= maxParticipants || status === 'FINISHED', }} groupId={groupId} /> diff --git a/src/components/pages/meetup/meetup-banner-images/index.tsx b/src/components/pages/meetup/meetup-banner-images/index.tsx index c5d7b1fe..119286aa 100644 --- a/src/components/pages/meetup/meetup-banner-images/index.tsx +++ b/src/components/pages/meetup/meetup-banner-images/index.tsx @@ -24,9 +24,15 @@ export const MeetupBannerImages = ({ images }: Props) => {
{hasImages ? ( - {images.map(({ imageId440x240, imageUrl440x240 }) => ( - - image + {images.map(({ groupImageId, variants }) => ( + + 썸네일 이미지 ))} diff --git a/src/components/pages/meetup/meetup-buttons/index.tsx b/src/components/pages/meetup/meetup-buttons/index.tsx index 6aa0014c..690e76fc 100644 --- a/src/components/pages/meetup/meetup-buttons/index.tsx +++ b/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; diff --git a/src/components/pages/meetup/meetup-descriptions/description-sections/description-setting/index.tsx b/src/components/pages/meetup/meetup-descriptions/description-sections/description-setting/index.tsx index 4bf8d3ce..1ef461f9 100644 --- a/src/components/pages/meetup/meetup-descriptions/description-sections/description-setting/index.tsx +++ b/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; + setting: Pick; } -export const DescriptionSetting = ({ setting: { location, startTime } }: Props) => { +export const DescriptionSetting = ({ + setting: { + address: { location }, + startTime, + }, +}: Props) => { return (
    diff --git a/src/components/pages/meetup/meetup-descriptions/index.tsx b/src/components/pages/meetup/meetup-descriptions/index.tsx index 3aee2b09..ec1e544c 100644 --- a/src/components/pages/meetup/meetup-descriptions/index.tsx +++ b/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 (
    - + - +
    ); diff --git a/src/types/service/group.ts b/src/types/service/group.ts index 001dc264..e25abfff 100644 --- a/src/types/service/group.ts +++ b/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; }[]; }