[Style] 모임상세 지난모임, 방장주인 condition에 따른 UI 랜더 작업

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<boolean>(false);
+  const [isPast, setIsPast] = useState<boolean>(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 (
     <div>
-      <MeetupBannerImages images={data.images} />
-      <MeetupDescriptions descriptions={data} />
-      <MeetupMembers members={data.joinedMembers} />
-      <MeetupButtons conditions={data} groupId={groupId} />
+      <MeetupBannerImages images={images} />
+      <MeetupDescriptions conditions={{ isHost, isPast }} descriptions={data} />
+      <MeetupMembers members={joinedMembers} />
+      <MeetupButtons
+        conditions={{
+          isHost,
+          isJoined,
+          isButtonDisabled: participantCount >= maxParticipants || isPast,
+        }}
+        groupId={groupId}
+      />
     </div>
   );
 };

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<boolean | null>(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 (
     <div className='sticky bottom-[56px] border-t-1 border-gray-200 bg-white px-4 py-3'>
       {isJoined ? (
@@ -57,13 +42,13 @@ export const MeetupButtons = ({
           >
             {isHost ? '모임 취소' : '모임 탈퇴'}
           </Button>
-          <Button className='flex-2' onClick={onEnterChatClick}>
+          <Button className='flex-2' disabled={isButtonDisabled} onClick={onEnterChatClick}>
             채팅 입장
           </Button>
         </div>
       ) : (
         <Button
-          disabled={participantCount >= maxParticipants}
+          disabled={isButtonDisabled}
           onClick={() => open(<MeetupModal groupId={groupId} type='attend' />)}
         >
           참여하기

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

@@ -5,11 +5,18 @@ import { GetGroupDetailsResponse } from '@/types/service/group';
 
 interface Props {
   hostInfo: GetGroupDetailsResponse['createdBy'];
+  conditions: {
+    isHost: boolean;
+    isPast: boolean;
+  };
 }
 
-export const DescriptionProfile = ({ hostInfo: { nickName, profileImage, userId } }: Props) => {
+export const DescriptionProfile = ({
+  hostInfo: { nickName, profileImage, userId },
+  conditions: { isHost, isPast },
+}: Props) => {
   return (
-    <div className='w-full select-none'>
+    <div className='flex-between w-full select-none'>
       <Link href={`/profile/${userId}`} className='flex gap-3'>
         <ImageWithFallback
           width={40}
@@ -20,11 +27,17 @@ export const DescriptionProfile = ({ hostInfo: { nickName, profileImage, userId
           src={profileImage}
         />
 
-        <div className='*:line-clamp-1'>
+        <div className='flex flex-col justify-center *:line-clamp-1'>
           <p className='text-text-md-semibold text-gray-800'>{nickName}</p>
           <p className='text-text-xs-regular text-gray-600'>some dummy bio text</p>
         </div>
       </Link>
+      {isPast && <p className='text-text-xs-semibold pr-1 text-gray-500'>모임 마감</p>}
+      {isHost && !isPast && (
+        <Link href='#' className='text-text-xs-semibold text-mint-500 pr-1'>
+          모임 수정하기
+        </Link>
+      )}
     </div>
   );
 };

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

@@ -6,7 +6,7 @@ interface Props {
     maxParticipants: GetGroupDetailsResponse['maxParticipants'];
     participantCount: GetGroupDetailsResponse['participantCount'];
   };
-  createdAt: string;
+  createdAt: GetGroupDetailsResponse['createdAt'];
 }
 
 export const DescriptionProgress = ({

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

@@ -21,6 +21,10 @@ interface Props {
     | 'maxParticipants'
     | 'participantCount'
   >;
+  conditions: {
+    isHost: boolean;
+    isPast: boolean;
+  };
 }
 
 export const MeetupDescriptions = ({
@@ -35,10 +39,11 @@ export const MeetupDescriptions = ({
     maxParticipants,
     participantCount,
   },
+  conditions,
 }: Props) => {
   return (
     <section className='bg-white px-5 pt-6 pb-4'>
-      <DescriptionProfile hostInfo={createdBy} />
+      <DescriptionProfile conditions={conditions} hostInfo={createdBy} />
       <DescriptionTitle title={title} />
       <DescriptionTags tags={tags} />
       <DescriptionDetail detail={description} />