diff --git a/src/pages/Team/Manage.tsx b/src/pages/Team/Manage.tsx index f95b932..bbd1bce 100644 --- a/src/pages/Team/Manage.tsx +++ b/src/pages/Team/Manage.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { useOutsideClick } from '@/hooks/useOutsideClick'; import { useModal } from '@/hooks/useModal'; import styled from '@emotion/styled'; @@ -11,193 +11,239 @@ import { Tag } from '@/components/Team/Tag'; import * as MemberAddModal from '@/components/Team/TeamManage/MemberAddModal'; import * as MemberManageModal from '@/components/Team/TeamManage/MemberManageModal'; import * as ThreeDotMenu from '@/components/Team/TeamManage/ThreeDotMenu'; - -const dummyMember: string[] = [ - '0000 테스트', - '0000 테스트', - '0000 테스트', - '0000 테스트', - '0000 테스트', - '0000 테스트', - '0000 테스트', - '0000 테스트', - '0000 테스트', - '0000 테스트', - '0000 테스트', - '0000 테스트', -]; +import { TeamDetailType } from '@/utils/types/teamType'; +import { useParams } from 'react-router-dom'; +import { teamDetailCheck, teamMemberDelete } from '@/utils/apis/team'; +import { getUser } from '@/utils/apis/user'; export const TeamManage = () => { + const { teamUUID } = useParams(); const [isOpen, setIsOpen] = useState(false); + const [data, setData] = useState(); + const [users, setUsers] = useState(); + const [teamMember, setTeamMember] = useState(); + const [selectedMamberName, setSelectedMemberName] = useState(); + const [selectedMemberUUID, setSelectedMemberUUID] = useState(); const ref = useOutsideClick(() => { setIsOpen(false); }); const { isVisible, onShow, ModalWrapper, onClose } = useModal(); + useEffect(() => { + if (!teamUUID) return; + + teamDetailCheck(teamUUID).then((res) => { + setData(res.data); + setTeamMember(res.data.member_list.map((item: any) => `${item.member_number} ${item.member_name}`)); + }); + }, []); + + useEffect(() => { + getUser().then((res) => { + setUsers(res.data.map((item: any) => item.number_and_name)); + }); + }, []); + const onOpen = (index: number) => { if (!isOpen) setIsOpen(index); }; + const onMemberDelete = () => { + if (!teamUUID || !selectedMemberUUID) return; + + teamMemberDelete(teamUUID, selectedMemberUUID) + .then(() => { + teamDetailCheck(teamUUID).then((res) => { + setData(res.data); + onClose(); + }); + }) + .catch(() => { + onClose(); + }); + }; + return ( <> - {isVisible === 'memberAdd' && ( - - - -
- 팀원 추가 - -
- - - - {dummyMember.map((member, index) => ( - {member} - ))} - - -
홍길동, 이름김, 테스트 등 3명
- - 담당자 변경 - - - - - )} - {isVisible === 'managerChange' && ( - - -
담당자 변경
-
담당자를 김은빈 학생에서 홍길동 학생으로 변경하시겠습니까?
-
- { - onClose(); - }} - > - 취소 - - - 담당자 변경 - -
- - - )} - {isVisible === 'memberDel' && ( - - -
팀원 삭제
-
김은빈 학생을 팀에서 삭제하시겠습니까?
-
- { - onClose(); - }} - > - 취소 - - - 팀원 삭제 - -
- - + {data && ( + <> + {isVisible === 'memberAdd' && ( + + + +
+ 팀원 추가 + +
+ + + + {users && + teamMember && + users + .filter((member) => !teamMember.includes(member)) + .map((member, index) => { + return {member}; + })} + + +
홍길동, 이름김, 테스트 등 3명
+ + 담당자 변경 + + + + + )} + {isVisible === 'managerChange' && ( + + +
담당자 변경
+
담당자를 김은빈 학생에서 홍길동 학생으로 변경하시겠습니까?
+
+ { + onClose(); + }} + > + 취소 + + + 담당자 변경 + +
+ + + )} + {isVisible === 'memberDel' && ( + + +
팀원 삭제
+
{selectedMamberName} 학생을 팀에서 삭제하시겠습니까?
+
+ { + onClose(); + }} + > + 취소 + + { + onMemberDelete(); + }} + > + 팀원 삭제 + +
+ + + )} + + + + + + {data.team_name_ko} + 팀 관리 + 팀 정보를 관리해보세요 + + +
+
{data.team_name_ko}
+
{data.team_name_en}
+
+
+
팀원 수 : {data.member_count}
+
생성자 : {data.admin_name}
+
생성일 : {data.created_at.split('T')[0]}
+
+ + +
팀원
+
+ + { + onShow('memberAdd'); + }} + > + 팀원 추가 + +
+ + {data.member_list.map((member, index) => { + return ( + +
+
+ {member.member_number} {member.member_name} +
+ {member.member_role === 'ADMINISTRATOR' && } +
+ + { + onOpen(index); + setSelectedMemberUUID(member.user_id); + setSelectedMemberName(`${member.member_number} ${member.member_name}`); + }} + /> + {isOpen === index && ( + + { + onShow('managerChange'); + }} + > + 담당자 지정 + + { + onShow('memberDel'); + }} + > + 팀원 삭제 + + + )} + + + ); + })} + + + + + + )} - - - - - - 에일리언즈 - 팀 관리 - 팀 정보를 관리해보세요 - - -
-
에일리언즈
-
team-aliens
-
-
-
팀원 수 : 10
-
생성자 : 8기 김은빈
-
생성일 : 2023-10-10
-
- - -
팀원
-
- - { - onShow('memberAdd'); - }} - > - 팀원 추가 - -
- - {dummyMember.map((member, index) => ( - -
-
{member}
- -
- - { - onOpen(index); - }} - /> - {isOpen === index && ( - - { - onShow('managerChange'); - }} - > - 담당자 지정 - - { - onShow('memberDel'); - }} - > - 팀원 삭제 - - - )} - - - ))} - - - - - ); }; diff --git a/src/utils/types/teamType.ts b/src/utils/types/teamType.ts index a3986ea..24f04d7 100644 --- a/src/utils/types/teamType.ts +++ b/src/utils/types/teamType.ts @@ -24,7 +24,7 @@ export type TeamCreateType = { export type MemberType = { member_name: string; member_number: string; - member_role: MemberRoleType[]; + member_role: MemberRoleType; user_id: string; };