Feature/#266 팀원 목록 조회 api 연결 (#276)

* refact: 모달과 컴포넌트 분리

#266

* feat: 팀 멤버 조회 api 정의

#266

* feat: team 멤버 조회 api 연결

#266

src/app/api/team.ts

@@ -67,7 +67,12 @@ const postJoinTeam = (token: string, teamId: number, code: string) =>
 
 const getTeams = () => teamFetcher(`/teams`);
 
-const getTeamMembers = (teamId: number) => teamFetcher(`/teams/${teamId}/members`);
+const getTeamMembers = (token: string, teamId: number) =>
+  teamFetcher(`/teams/${teamId}/members`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
 
 const getMyTeams = (memberId: number) => teamFetcher(`/teams/members/${memberId}`);
 

src/containers/team/teamMember/FiredMemberModal/index.tsx

@@ -0,0 +1,24 @@
+import ConfirmModal from '@/components/Modal/ConfirmModal';
+
+import { MemberModalProps } from '../types';
+
+const FiredMemberModal = ({ member, isOpen, onClose }: MemberModalProps) => {
+  const handleFiredMemberClick = () => {
+    // TODO: 멤버 퇴출 api 연결
+    onClose();
+  };
+
+  return (
+    <ConfirmModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="팀원 퇴출"
+      confirmButtonText="퇴출"
+      onConfirmButtonClick={handleFiredMemberClick}
+    >
+      {member.name}을 퇴출하시겠습니까?
+    </ConfirmModal>
+  );
+};
+
+export default FiredMemberModal;

src/containers/team/teamMember/MandateMemberModal/index.tsx

@@ -0,0 +1,24 @@
+import ConfirmModal from '@/components/Modal/ConfirmModal';
+
+import { MemberModalProps } from '../types';
+
+const MandateMemberModal = ({ member, isOpen, onClose }: MemberModalProps) => {
+  const handleMandateMemberClick = () => {
+    // TODO: 팀장 권한 위임 api 연결
+    onClose();
+  };
+
+  return (
+    <ConfirmModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="팀장 위임"
+      confirmButtonText="위임"
+      onConfirmButtonClick={handleMandateMemberClick}
+    >
+      {member.name}에게 팀장을 위임하겠습니까?
+    </ConfirmModal>
+  );
+};
+
+export default MandateMemberModal;

src/containers/team/teamMember/index.tsx

@@ -1,13 +1,16 @@
 'use client';
 
 import { Avatar, AvatarGroup, Box, Flex, IconButton, useBreakpointValue } from '@chakra-ui/react';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { BiCrown, BiUserX } from 'react-icons/bi';
 
-import ConfirmModal from '@/components/Modal/ConfirmModal';
-import { teamMember } from '@/mocks/teamMember';
+import { getTeamMembers } from '@/app/api/team';
+import { useGetFetchWithToken } from '@/hooks/useFetchWithToken';
 import { Member } from '@/types';
 
+import FiredMemberModal from './FiredMemberModal';
+import MandateMemberModal from './MandateMemberModal';
+
 const TeamMember = ({ teamId }: { teamId: number }) => {
   const [mandateModalOpen, setMandateModalOpen] = useState<boolean>(false);
   const [firedModalOpen, setFiredModalOpen] = useState<boolean>(false);
@@ -38,36 +41,24 @@ const TeamMember = ({ teamId }: { teamId: number }) => {
     setIsHovering(false);
   };
 
-  const handleFiredMemberClick = () => {
-    // TODO: 팀원 퇴출 api 연결
-    handleModalCloseClick();
-  };
-
-  const handleMandateMemberClick = () => {
-    // TODO: 팀장 권한 위임 api 연결
-    handleModalCloseClick();
-  };
-
-  useEffect(() => {
-    // TODO: 팀원 목록 불러오기
-  }, [teamId]);
+  const members: Member[] = useGetFetchWithToken(getTeamMembers, [teamId]);
 
   return (
     <Box pos="relative" onMouseOut={handleMouseOut} onMouseOver={handleMouseOver}>
       <AvatarGroup max={useBreakpointValue({ base: 3, lg: 4 })} size="md">
-        {teamMember.map((member) => {
+        {members?.map((member) => {
           return <Avatar key={member.id} name={member.name} src={member.imageUrl} />;
         })}
       </AvatarGroup>
       {isHovering && (
         <Box pos="absolute" zIndex="40" right="0" w="220px" h="400px">
           <Box w="100%" h="100%" mt="2" p="4" pr="1" bg="white" borderRadius="xl" shadow="md">
             <Box overflow="scroll" w="100%" h="100%">
-              {teamMember.map((member) => {
+              {members?.map((member) => {
                 return (
-                  <Flex align="center" justify="space-between" gap="2" p="2">
+                  <Flex key={member.id} align="center" justify="space-between" gap="2" p="2">
                     <Box>
-                      <Avatar key={member.id} mr="2" name={member.name} size="sm" src={member.imageUrl} />
+                      <Avatar mr="2" name={member.name} size="sm" src={member.imageUrl} />
                       {member.name}
                     </Box>
                     {/* TODO: 팀장만 버튼 보이게 수정 */}
@@ -102,24 +93,8 @@ const TeamMember = ({ teamId }: { teamId: number }) => {
           </Box>
         </Box>
       )}
-      <ConfirmModal
-        isOpen={firedModalOpen}
-        onClose={handleModalCloseClick}
-        title="팀원 퇴출"
-        confirmButtonText="퇴출"
-        onConfirmButtonClick={handleFiredMemberClick}
-      >
-        {modalMember.name}을 퇴출하시겠습니까?
-      </ConfirmModal>
-      <ConfirmModal
-        isOpen={mandateModalOpen}
-        onClose={handleModalCloseClick}
-        title="팀장 위임"
-        confirmButtonText="위임"
-        onConfirmButtonClick={handleMandateMemberClick}
-      >
-        {modalMember.name}에게 팀장을 위임하겠습니까?
-      </ConfirmModal>
+      <FiredMemberModal member={modalMember} isOpen={firedModalOpen} onClose={handleModalCloseClick} />
+      <MandateMemberModal member={modalMember} isOpen={mandateModalOpen} onClose={handleModalCloseClick} />
     </Box>
   );
 };

src/containers/team/teamMember/types.ts

@@ -0,0 +1,7 @@
+import { Member } from '@/types';
+
+export interface MemberModalProps {
+  member: Member;
+  isOpen: boolean;
+  onClose: () => void;
+}