✨ 그룹 삭제, 멤버 강퇴 api 연동

app/frontend/src/pages/Groups/Detail/GroupMember.tsx

@@ -1,18 +1,52 @@
 import { ReactComponent as Delete } from '@/assets/icons/delete.svg';
-import { UserChip } from '@/components';
+import { UserChip, Modal } from '@/components';
+import { useModal } from '@/hooks';
+import { useKickMemberQuery } from '@/queries/hooks/group';
 
 import * as styles from './index.css';
 
 type GroupMemberProps = {
+  id: string;
+  memberId: string;
   userName?: string;
   profileSrc?: string;
+  isOwner?: boolean;
 };
 
-export function GroupMember({ userName, profileSrc }: GroupMemberProps) {
+export function GroupMember({
+  id,
+  memberId,
+  userName,
+  profileSrc,
+  isOwner = false,
+}: GroupMemberProps) {
+  const { openModal } = useModal();
+  const { mutate: kickMember } = useKickMemberQuery();
+
+  const openKickModal = ({
+    onClickConfirm,
+  }: {
+    onClickConfirm: () => void;
+  }) => {
+    openModal(
+      <Modal
+        title={`${userName}님을 강퇴하시겠습니까?`}
+        buttonType="double"
+        onClickConfirm={onClickConfirm}
+      />,
+    );
+  };
+  const onClickKick = () =>
+    openKickModal({ onClickConfirm: () => kickMember({ id, memberId }) });
+
   return (
     <div className={styles.groupMember}>
       <UserChip username={userName} profileSrc={profileSrc} />
-      <Delete className={styles.deleteButton} />
+      {isOwner && (
+        <button type="button" onClick={onClickKick}>
+          <Delete className={styles.deleteButton} />
+        </button>
+      )}
     </div>
   );
 }

app/frontend/src/pages/Groups/Detail/index.tsx

@@ -5,7 +5,10 @@ import { useQuery } from '@tanstack/react-query';
 
 import { ReactComponent as People } from '@/assets/icons/people.svg';
 import { Error, Loading } from '@/components';
+import { useGroupModal } from '@/components/Group/hooks/useGroupModal';
 import { queryKeys } from '@/queries';
+import { getMyInfoQuery } from '@/queries/hooks';
+import { useDeleteGroupQuery } from '@/queries/hooks/group';
 import { vars } from '@/styles';
 
 import { GroupMember } from './GroupMember';
@@ -15,12 +18,19 @@ const { grayscale200 } = vars.color;
 
 export function GroupDetailPage() {
   const { id } = useParams();
+  const { data: currentUser } = useQuery(getMyInfoQuery);
   const { data: groupMemberData, isLoading: groupMemberDataLoading } = useQuery(
     queryKeys.group.groupMembers(id!),
   );
   const { data: groupData, isLoading: groupDataLoading } = useQuery(
     queryKeys.group.groupDetail(id!),
   );
+  const { mutate: deleteGroup } = useDeleteGroupQuery();
+  const { openDeleteGroupModal } = useGroupModal();
+
+  if (!currentUser) {
+    return <Error message="사용자 정보를 불러오지 못했습니다." />;
+  }
 
   if (groupMemberDataLoading || groupDataLoading) {
     return (
@@ -40,6 +50,11 @@ export function GroupDetailPage() {
     );
   }
 
+  const isOwner = currentUser.id === groupData.groupOwnerId;
+
+  const onClickDelete = () =>
+    openDeleteGroupModal({ onClickConfirm: () => deleteGroup(groupData.id) });
+
   return (
     <div className={styles.container}>
       <div className={styles.groupHeader}>
@@ -52,14 +67,27 @@ export function GroupDetailPage() {
             {groupData.memberCount}
           </div>
         </div>
-        <Button theme="danger" shape="fill" size="medium">
-          그룹 삭제
-        </Button>
+        {isOwner && (
+          <Button
+            theme="danger"
+            shape="fill"
+            size="medium"
+            onClick={onClickDelete}
+          >
+            그룹 삭제
+          </Button>
+        )}
       </div>
       <ul className={styles.memberContainer}>
         {groupMemberData.map(({ providerId, nickname, profilePicture }) => (
           <li key={providerId}>
-            <GroupMember userName={nickname} profileSrc={profilePicture} />
+            <GroupMember
+              id={groupData.id}
+              memberId={providerId}
+              userName={nickname}
+              profileSrc={profilePicture}
+              isOwner={isOwner}
+            />
           </li>
         ))}
       </ul>