Feat/refactor/i participated meeting/DEVING-79 내가 참여하고있는 모임 리펙토링

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

@@ -14,13 +14,13 @@ import PublicSelect from './PublicDropdown';
 
 const CardRightSection = ({
   memberList,
-  isPublic,
+  isPublic = false,
   className,
   meetingId,
   showPublicSelect = false,
 }: {
   memberList: Member[];
-  isPublic: boolean;
+  isPublic?: boolean;
   className?: string;
   meetingId: number;
   showPublicSelect?: boolean;
@@ -61,7 +61,7 @@ const CardRightSection = ({
       memberList,
     );
     router.push(
-      `/my-meeting/my/user-list?meetingId=${meetingId}&type=${showPublicSelect ? 'created' : 'joined'}`,
+      `/my-meeting/my/user-list?meetingId=${meetingId}&type=${showPublicSelect ? 'created' : 'participated'}`,
     );
   };
 

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

@@ -0,0 +1,44 @@
+'use client';
+
+import { useQuitMeetingMutation } from '@/hooks/mutations/useMyMeetingMutation';
+import { LogOut } from 'lucide-react';
+
+interface LeaveMeetingButtonProps {
+  meetingId: number;
+  className?: string;
+}
+
+const LeaveMeetingButton = ({
+  meetingId,
+  className = '',
+}: LeaveMeetingButtonProps) => {
+  const { mutate: quitMeeting, isPending: isLoading } =
+    useQuitMeetingMutation();
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    quitMeeting(meetingId);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className={`absolute bottom-2 right-2 z-10 flex items-center rounded-md px-3 py-1.5 ${
+        isLoading ? 'opacity-70' : ''
+      } ${className}`}
+      aria-label="모임 탈퇴하기"
+      disabled={isLoading}
+    >
+      <LogOut
+        size={16}
+        className={`mr-1.5 ${isLoading ? 'animate-pulse' : ''}`}
+      />
+      <span className="typo-button2">
+        {isLoading ? '처리 중...' : '모임 탈퇴하기'}
+      </span>
+    </button>
+  );
+};
+
+export default LeaveMeetingButton;