diff --git a/src/app/meetup/[groupId]/page.tsx b/src/app/meetup/[groupId]/page.tsx index 9b9d3394..99657cf3 100644 --- a/src/app/meetup/[groupId]/page.tsx +++ b/src/app/meetup/[groupId]/page.tsx @@ -1,6 +1,8 @@ 'use client'; -import { use } from 'react'; +import { use, useEffect, useState } from 'react'; + +import Cookies from 'js-cookie'; import { MeetupBannerImages, @@ -15,19 +17,51 @@ interface Props { } const MeetupDetailPage = ({ params }: Props) => { + const [isHost, setIsHost] = useState(false); + const [isPast, setIsPast] = useState(false); const { groupId } = use(params); const { data } = useGetGroupDetails({ groupId }); - if (!data) return null; + 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; + return (
- - - - + + + + = maxParticipants || isPast, + }} + groupId={groupId} + />
); }; diff --git a/src/components/pages/meetup/meetup-buttons/index.tsx b/src/components/pages/meetup/meetup-buttons/index.tsx index d6c5dba9..2f64d3e2 100644 --- a/src/components/pages/meetup/meetup-buttons/index.tsx +++ b/src/components/pages/meetup/meetup-buttons/index.tsx @@ -2,33 +2,24 @@ // import { useRouter } from 'next/navigation'; -import { useEffect, useState } from 'react'; - -import Cookies from 'js-cookie'; - 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: Pick< - GetGroupDetailsResponse, - 'userStatus' | 'createdBy' | 'participantCount' | 'maxParticipants' - >; + conditions: { + isJoined: GetGroupDetailsResponse['userStatus']['isJoined']; + isHost: boolean; + isButtonDisabled: boolean; + }; groupId: string; } export const MeetupButtons = ({ - conditions: { - userStatus: { isJoined }, - createdBy, - participantCount, - maxParticipants, - }, + conditions: { isJoined, isHost, isButtonDisabled }, groupId, }: Props) => { - const [isHost, setIsHost] = useState(null); const { open } = useModal(); // const { push } = useRouter(); @@ -38,12 +29,6 @@ export const MeetupButtons = ({ // push('/message/id'); }; - useEffect(() => { - const sessionId = Number(Cookies.get('userId')); - // eslint-disable-next-line react-hooks/set-state-in-effect - setIsHost(sessionId === createdBy.userId); - }, [createdBy]); - return (
{isJoined ? ( @@ -57,13 +42,13 @@ export const MeetupButtons = ({ > {isHost ? '모임 취소' : '모임 탈퇴'} -
) : (