From 81a5ebc6ce49e75e1e470e2d5497062783eb7866 Mon Sep 17 00:00:00 2001
From: LEEJW1953 <jiwonlee1953@naver.com>
Date: Sun, 17 Mar 2024 14:28:16 +0900
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=EA=B7=B8=EB=A3=B9=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C,=20=EB=A9=A4=EB=B2=84=20=EA=B0=95=ED=87=B4=20api=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/Groups/Detail/GroupMember.tsx   | 40 +++++++++++++++++--
 .../src/pages/Groups/Detail/index.tsx         | 36 +++++++++++++++--
 2 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/app/frontend/src/pages/Groups/Detail/GroupMember.tsx b/app/frontend/src/pages/Groups/Detail/GroupMember.tsx
index 39b75175..bde8f31d 100644
--- a/app/frontend/src/pages/Groups/Detail/GroupMember.tsx
+++ b/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>
   );
 }
diff --git a/app/frontend/src/pages/Groups/Detail/index.tsx b/app/frontend/src/pages/Groups/Detail/index.tsx
index 4e86d0d1..671452eb 100644
--- a/app/frontend/src/pages/Groups/Detail/index.tsx
+++ b/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>