Feature/#284 participant menu

[jasper200207]

관련 이슈

• close [FEAT] ParticipantMenu 컴포넌트 #284
• [API] 스터디원 API #271

작업 요약

• 스터디원 조회 메뉴 컴포넌트 입니다. 팀원 관리에서도 사용될수 있다고 해서 공통 컴포넌트로 만들었습니다.

작업 상세 설명

• ParticipantMenu
  • leader? : Member
    • 리더 변수값이 들어가야 합니다
  • includeMembers : Member[]
    • 그룹(팀, 스터디)에 포함된 유저 입니다
    • Remove 버튼과 Mandate 버튼이 포함됩니다
  • excludeMembers : Member[]
    • 그룸 (팀, 스터디)에 포함되지 않은 유저 입니다
    • Add 버튼이 포함됩니다
  • isOpen : boolean
    • 메뉴 열렸는지 여부
  • setIsOpen : React.Dispatch<React.SetStateAction>
    • 메뉴 useState의 setState
  • onRemove? : (member:Member) => void
    • 삭제시 함수
  • onAdd? : (member:Member) => void
    • 추가시 함수
  • onMandateLeader? : (member:Member) => void
    • 위임시 함수
  • children과 flexPops
    • 메뉴를 오픈하기 위한 버튼을 children으로 받아오도록 했습니다
    • 배치도 커스텀이 가능하도록 Flex의 Props를 받아 적용하도록 했습니다.

리뷰 요구 사항

• 리뷰 예상 시간 : 8분
• @llddang 팀원 관리에도 사용한다고 하셨는데 기능 충분할지 확인 바랍니다

미리 보기

• 예시 이미지

• 예시 사용 코드

<ParticipantMenu
    gap="3"
    w="fit-content"
    ml="auto"
    leader={teamMember[0]}
    includeMembers={teamMember}
    excludeMembers={teamMember}
    isOpen={isParticipantMenuOpen}
    setIsOpen={setIsParticipantMenuOpen}
    onRemove={(memeber: Member) => {}}
    onAdd={(memeber: Member) => {}}
    onMandateLeader={(memeber: Member) => {}}
 >
     <IconButton
         fontSize="16px"
         transform={isParticipantMenuOpen ? 'rotate(90deg)' : 'rotate(0deg)'}
         transition="all 0.2s"
         aria-label=""
         icon={<MdOutlineArrowForwardIos />}
         isRound
         size="icon_sm"
         variant="icon_orange"
     />
         <Text>관리</Text>
     </ParticipantMenu>
<Participant participantInfos={participantData} />

[llddang]

저는 exclude Members가 없을 예정이라서요 nullable 붙여주실 수 있을까요?

[llddang]

searchedExcludeMember의 데이터가 있을때만 Divider이 있으면 좋겠습니다!

[llddang]

수고하셨습니다!!

[pipisebastian]

굿굿!!!