Feat/refactor/self qa/DEVING-90

src/app/(user-page)/my-meeting/_features/Participated.tsx

@@ -86,7 +86,7 @@ const Participated = () => {
     <div>
       {/* 승인 대기중인 모임 섹션 (상단에 배치) */}
       <PendingSection />
-      <h1 className="typo-head1 text-white">나의 Deving 모임</h1>
+      <h1 className="typo-head1 mt-10 text-white">나의 Deving 모임</h1>
       {meetingData.pages.map((page, pageIdx) => (
         <div key={pageIdx}>
           {page.content.map((meeting) => (

src/app/meeting/[category]/[id]/page.tsx

@@ -15,12 +15,12 @@ import {
 import { getMeetingDetail, getMeetingDetailManager } from 'service/api/meeting';
 import { Paginated } from 'types/meeting';
 
-import BackButton from '../../_features/BackButton';
 import CardWrapper from '../../_features/CardWrapper';
 import ContentLabel from '../../_features/ContextLabel';
 import MeetingInfo from '../../_features/MeetingInfo';
 import ReviewInput from '../../_features/ReviewInput';
 import ReviewList from '../../_features/ReviewList';
+import TopSection from '../../_features/TopSection';
 import UserInfo from '../../_features/UserInfo';
 
 export default async function page({ params }: { params: { id: string } }) {
@@ -52,9 +52,10 @@ export default async function page({ params }: { params: { id: string } }) {
   return (
     <div className="flex flex-col gap-[48px]">
       <FloatingButtonGroup />
-      <BackButton />
+
       <HydrationBoundary state={dehydrate(queryClient)}>
         <div className="flex flex-col gap-[48px] p-[16px] md:px-[48px]">
+          <TopSection meetingId={meetingId} />
           <CardWrapper meetingId={meetingId} />
           <UserInfo meetingId={meetingId} />
           <MeetingInfo meetingId={meetingId} />

src/app/meeting/_features/CardRightSection.tsx

@@ -32,6 +32,7 @@ const CardRightSection = ({ meeting }: { meeting: MeetingDetail }) => {
   };
 
   const status = meeting.isMeetingManager ? 'LEADER' : meeting.memberStatus;
+  const isRejected = status === 'REJECTED' || status === 'EXPEL';
 
   return (
     <div className="flex w-full flex-col justify-end gap-[24px] py-[16px] md:p-[16px] lg:h-[208px] lg:w-[318px]">
@@ -49,6 +50,11 @@ const CardRightSection = ({ meeting }: { meeting: MeetingDetail }) => {
         <Button className="w-full" onClick={handleLeader}>
           내 모임 보러가기
         </Button>
+      ) : isRejected ? (
+        // 거절되거나 추방된 경우
+        <Button className="w-full" disabled>
+          신청이 불가능합니다
+        </Button>
       ) : ['false', 'new user'].includes(status) ? (
         meeting.maxMember === meeting.memberCount ? (
           // 인원이 다 찬 경우

src/app/meeting/_features/TopSection.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useDetailQueries } from '@/hooks/queries/useMeetingQueries';
+import { ArrowLeft, Edit } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+
+const TopSection = ({ meetingId }: { meetingId: number }) => {
+  const router = useRouter();
+
+  const { data: meeting, isLoading, error } = useDetailQueries(meetingId);
+  const status = meeting?.isMeetingManager ? 'LEADER' : meeting?.memberStatus;
+
+  if (isLoading || error) {
+    return null;
+  }
+
+  return (
+    <div className="mt-[40px] flex items-center justify-between px-[16px]">
+      <div>
+        <ArrowLeft
+          className="hover:text-Cgray900 h-[24px] w-[24px] text-Cgray700 transition-colors hover:cursor-pointer"
+          onClick={() => router.back()}
+        />
+      </div>
+
+      {status === 'LEADER' && (
+        <Link href={`/meeting/edit-meeting/${meeting?.meetingId}`}>
+          <div className="flex gap-2">
+            <div>
+              <Edit className="hover:text-Cgray900 h-[24px] w-[24px] text-Cgray700 transition-colors hover:cursor-pointer" />
+            </div>
+            <p className="text-white">수정하기</p>
+          </div>
+        </Link>
+      )}
+    </div>
+  );
+};
+
+export default TopSection;