[feat] #186 team: 탈퇴 기능 추가

src/app/(team)/team/_components/MemberList/MemberCard.tsx

@@ -1,5 +1,4 @@
 import UserIcon from '@/components/user/UserIcon';
-import BreakEmail from '@/app/(team)/team/_components/MemberList/BreakEmail';
 import MemberMenu from '@/app/(team)/team/_components/MemberList/MemberMenu';
 import MemberProfileModal from '@/components/common/Modal/content/MemberProfileModal';
 import { useModalStore } from '@/store/useModalStore';
@@ -8,7 +7,9 @@ import { GroupResponse } from '@/lib/apis/group/type';
 import {
   memberCardContainerStyle,
   memberCardItemWrapperStyle,
-  memberCardTextWrapperStyle,
+  memberCardProfileWrapperStyle,
+  memberCardNameStyle,
+  memberCardEmailStyle,
 } from '@/app/(team)/team/_components/MemberList/styles';
 import { toast } from 'react-toastify';
 import { TOAST_MESSAGES } from '@/constants/messages';
@@ -68,28 +69,25 @@ const MemberCard = ({
       }}
       className={`${memberCardContainerStyle}`}
     >
-      {/* 아이템 래퍼 */}
+      {/* left item */}
       <div className={`${memberCardItemWrapperStyle}`}>
-        <div className="tablet:h-[33px] tablet:w-[146px] flex items-center gap-3">
-          {/* 프로필 아이콘 */}
+        {/* 프로필 아이콘 */}
+        <div className={`${memberCardProfileWrapperStyle}`}>
           <UserIcon
             image={profileImage}
             sizeClass="tablet:size-8 size-6"
             imageSize="32px"
           />
-
-          {/* 이름 + 이메일 */}
-          <div className={`${memberCardTextWrapperStyle}`}>
-            <p className="text-md-regular">{name}</p>
-            <BreakEmail email={email} />
-          </div>
         </div>
-
-        {/* 메뉴 버튼 */}
-        {isAdmin && userId !== memberId && (
-          <MemberMenu memberId={memberId} name={name} onDelete={onDelete} />
-        )}
+        {/* 이름 */}
+        <p className={`${memberCardNameStyle}`}>{name}</p>
+        {/* 이메일 */}
+        <p className={`${memberCardEmailStyle}`}>{email}</p>
       </div>
+      {/* 메뉴 버튼 */}
+      {isAdmin && userId !== memberId && (
+        <MemberMenu memberId={memberId} name={name} onDelete={onDelete} />
+      )}
     </div>
   );
 };

src/app/(team)/team/_components/MemberList/MemberMenu.tsx

@@ -25,7 +25,7 @@ const MemberMenu = ({ memberId, name, onDelete }: MemberMenuProps) => {
 
   return (
     <DropDown>
-      <DropDown.Trigger className="mb-0">
+      <DropDown.Trigger className="mb-0 shrink-0">
         <TaskMenuButton size="sm" />
       </DropDown.Trigger>
       <DropDown.Menu align="right" className="mt-2 h-[40px] w-[120px]">

src/app/(team)/team/_components/MemberList/styles.ts

@@ -21,18 +21,28 @@ export const memberCardContainerStyle = clsx(
   'flex items-center justify-center',
   'laptop:max-w-[384px] tablet:h-[73px] h-[68px] min-w-0',
   'bg-slate-800',
-  'p-3 rounded-[16px]',
+  'px-6 rounded-[16px]',
   'cursor-pointer'
 );
 
-export const memberCardItemWrapperStyle = clsx(
-  'flex items-center justify-between',
-  'laptop:max-w-[336px] h-full',
-  'w-full'
+export const memberCardItemWrapperStyle =
+  'grid grid-cols-[min-content_1fr] grid-rows-[auto_auto] gap-x-3 w-full';
+
+export const memberCardProfileWrapperStyle = clsx(
+  'tablet:row-span-2 tablet:items-center',
+  'flex flex-col col-span-1 row-span-1 items-start justify-center'
 );
 
-export const memberCardTextWrapperStyle = clsx(
-  'flex flex-col justify-center gap-0.5',
-  'laptop:max-w-[200px] tablet:max-w-[120px] max-w-[85px]',
-  'w-full'
+export const memberCardNameStyle = clsx(
+  'text-md-medium',
+  'col-span-1 col-start-2 row-span-1 row-start-1 self-center text-left',
+  'truncate'
+);
+
+export const memberCardEmailStyle = clsx(
+  'text-xs-regular text-slate-300',
+  'tablet:col-span-1 tablet:col-start-2',
+  'col-span-2 col-start-1 row-span-1 row-start-2 text-left',
+  'mt-0.5',
+  'truncate'
 );

src/app/(team)/team/_components/ReportBanner/styles.ts

@@ -37,7 +37,7 @@ export const reportCardsWrapperStyle = clsx(
 export const reportCardContainerStyle = clsx(
   'flex items-center justify-center',
   'max-w-[400px]',
-  'laptop:h-[76.5px] h-[80px] w-full min-w-0 p-4',
+  'h-[77px] w-full min-w-0 p-4',
   'bg-slate-700',
   RADIUS
 );

src/app/(team)/team/_components/TeamBanner/TeamBannerMenu.tsx

@@ -0,0 +1,71 @@
+import DropDown from '@/components/common/Dropdown';
+import IconRenderer from '@/components/common/Icons/IconRenderer';
+import { useIsAdmin } from '@/hooks/useIsAdmin';
+import { deleteGroupMemberById } from '@/lib/apis/group';
+import { GroupResponse } from '@/lib/apis/group/type';
+import { useModalStore } from '@/store/useModalStore';
+import { useRouter } from 'next/navigation';
+import { ROUTES } from '@/constants/routes';
+import { toast } from 'react-toastify';
+
+interface TeamBannerMenuProps {
+  group: GroupResponse;
+  userId: number;
+}
+
+const TeamBannerMenu = ({ group, userId }: TeamBannerMenuProps) => {
+  const router = useRouter();
+  const isAdmin = useIsAdmin({ membersData: group.members, userId });
+  const { openModal } = useModalStore();
+
+  const handleTeamLeave = async () => {
+    try {
+      await deleteGroupMemberById({ groupId: group.id, memberId: userId });
+      router.push(ROUTES.HOME);
+      toast.success(`'${group.name}' 팀을 탈퇴했습니다.`);
+    } catch (error) {
+      console.error('탈퇴 실패', error);
+      toast.error('탈퇴에 실패했습니다. 잠시 후 다시 시도해 주세요.');
+    }
+  };
+
+  const openTeamLeaveModal = () => {
+    openModal({
+      variant: 'danger',
+      title: `'${group.name}' 팀에서 나가시겠어요?`,
+      button: {
+        number: 2,
+        text: '확인',
+        onRequest: () => handleTeamLeave(),
+      },
+    });
+  };
+
+  if (isAdmin) {
+    return (
+      <IconRenderer
+        onClick={() => router.push(ROUTES.TEAM_EDIT(group.id))}
+        name="GearIcon"
+        className="cursor-pointer"
+      />
+    );
+  }
+
+  return (
+    <DropDown>
+      <DropDown.Trigger>
+        <IconRenderer name="GearIcon" className="cursor-pointer" />
+      </DropDown.Trigger>
+      <DropDown.Menu align="right" className="mt-2 h-[40px] w-[120px]">
+        <DropDown.Item
+          onClick={openTeamLeaveModal}
+          className="text-md-regular h-[38px] w-full"
+        >
+          탈퇴하기
+        </DropDown.Item>
+      </DropDown.Menu>
+    </DropDown>
+  );
+};
+
+export default TeamBannerMenu;

src/app/(team)/team/_components/TeamBanner/index.tsx

@@ -1,8 +1,7 @@
 'use client';
 import Image from 'next/image';
-import TeamDropdownMenu from '@/app/(team)/team/_components/TeamBanner/TeamMenu';
+import TeamBannerMenu from '@/app/(team)/team/_components/TeamBanner/TeamBannerMenu';
 import GradientScrollable from '@/components/common/Scroll/GradientScrollable';
-import { useIsAdmin } from '@/hooks/useIsAdmin';
 import { GroupResponse } from '@/lib/apis/group/type';
 import {
   teamBannerWrapperStyle,
@@ -17,8 +16,6 @@ const TeamBanner = ({
   group: GroupResponse;
   userId: number;
 }) => {
-  const isAdmin = useIsAdmin({ membersData: group.members, userId });
-
   return (
     <div className={`${teamBannerWrapperStyle}`}>
       <Image
@@ -34,7 +31,7 @@ const TeamBanner = ({
         <GradientScrollable>{group.name}</GradientScrollable>
       </div>
 
-      {isAdmin && <TeamDropdownMenu group={group} />}
+      <TeamBannerMenu group={group} userId={userId} />
     </div>
   );
 };