From f90fb7c8469b5dc07fffbc2f1d6d53f0a263775f Mon Sep 17 00:00:00 2001 From: gimdogyun Date: Thu, 11 Jul 2024 21:15:27 +0900 Subject: [PATCH 1/4] feat : ParticipantMenuProps & ParticipantItemProps --- src/components/ParticipantMenu/types.ts | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/components/ParticipantMenu/types.ts diff --git a/src/components/ParticipantMenu/types.ts b/src/components/ParticipantMenu/types.ts new file mode 100644 index 00000000..fb3f375e --- /dev/null +++ b/src/components/ParticipantMenu/types.ts @@ -0,0 +1,24 @@ +import { FlexProps } from '@chakra-ui/react'; +import { ReactNode } from 'react'; + +import { Member } from '@/types'; + +export interface ParticipantMenuProps extends FlexProps { + leader?: Member; + includeMembers: Member[]; + excludeMembers: Member[]; + children: ReactNode; + isOpen: boolean; + setIsOpen: React.Dispatch>; + onRemove?: (member: Member) => void; + onAdd?: (member: Member) => void; + onMandateLeader?: (member: Member) => void; +} + +export interface ParticipantItemProps { + member: Member; + type: 'LEADER' | 'INCLUDE' | 'EXCLUDE'; + onRemove: (member: Member) => void; + onAdd: (member: Member) => void; + onMandateLeader: (member: Member) => void; +} From 25a533ef55b4d49a5acff3290fd4206fd246fc41 Mon Sep 17 00:00:00 2001 From: gimdogyun Date: Thu, 11 Jul 2024 21:15:45 +0900 Subject: [PATCH 2/4] feat : ParticipantItem --- .../ParticipantMenu/ParticipantItem/index.tsx | 79 +++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 src/components/ParticipantMenu/ParticipantItem/index.tsx diff --git a/src/components/ParticipantMenu/ParticipantItem/index.tsx b/src/components/ParticipantMenu/ParticipantItem/index.tsx new file mode 100644 index 00000000..afb51c3b --- /dev/null +++ b/src/components/ParticipantMenu/ParticipantItem/index.tsx @@ -0,0 +1,79 @@ +import { Avatar, Flex, IconButton, Text } from '@chakra-ui/react'; +import { RiAddLine, RiCloseFill, RiVipCrownLine } from 'react-icons/ri'; + +import { ParticipantItemProps } from '@/components/ParticipantMenu/types'; +import colors from '@/theme/foundations/colors'; + +const ParticipantItem = ({ member, type, onAdd, onMandateLeader, onRemove }: ParticipantItemProps) => { + const handleDeleteMember = () => { + onRemove(member); + }; + + const handleMandateLeader = () => { + onMandateLeader(member); + }; + + const handleAddMember = () => { + onAdd(member); + }; + + return ( + + + + {member.name} + + {type === 'INCLUDE' && ( + + } + onClick={handleDeleteMember} + size="icon_sm" + /> + } + onClick={handleMandateLeader} + size="icon_sm" + /> + + )} + {type === 'EXCLUDE' && ( + + } + onClick={handleAddMember} + size="icon_sm" + /> + + )} + + ); +}; + +export default ParticipantItem; From fad5c685e36c1317eef1e17d9615c4e5e566d491 Mon Sep 17 00:00:00 2001 From: gimdogyun Date: Thu, 11 Jul 2024 21:15:57 +0900 Subject: [PATCH 3/4] feat : ParticipantMenu --- src/components/ParticipantMenu/index.tsx | 111 +++++++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 src/components/ParticipantMenu/index.tsx diff --git a/src/components/ParticipantMenu/index.tsx b/src/components/ParticipantMenu/index.tsx new file mode 100644 index 00000000..efa0fe35 --- /dev/null +++ b/src/components/ParticipantMenu/index.tsx @@ -0,0 +1,111 @@ +/* eslint-disable react/jsx-props-no-spreading */ +import { Divider, Flex, Input } from '@chakra-ui/react'; +import { useEffect, useRef, useState } from 'react'; +import { BiSearch } from 'react-icons/bi'; + +import ParticipantItem from '@/components/ParticipantMenu/ParticipantItem'; +import { ParticipantMenuProps } from '@/components/ParticipantMenu/types'; +import { Member } from '@/types'; + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const defaultFunction = (member: Member) => {}; + +const ParticipantMenu = ({ + leader, + includeMembers, + excludeMembers, + children, + isOpen, + setIsOpen, + onRemove = defaultFunction, + onAdd = defaultFunction, + onMandateLeader = defaultFunction, + ...flexProps +}: ParticipantMenuProps) => { + const [search, setSearch] = useState(''); + const menuRef = useRef(null); + + const searchedLeader = leader?.name.includes(search) ? leader : null; + const searchedIncludeMember = includeMembers.filter((member) => member.name.includes(search)); + const searchedExcludeMember = excludeMembers.filter((member) => member.name.includes(search)); + + useEffect(() => { + const handleOutsideClose = (e: MouseEvent) => { + if (isOpen && !menuRef.current?.contains(e.target as Node)) setIsOpen(false); + }; + document.addEventListener('click', handleOutsideClose); + + return () => document.removeEventListener('click', handleOutsideClose); + }, [isOpen, setIsOpen]); + + return ( + + { + setIsOpen((prev) => !prev); + }} + > + {children} + + + ); +}; + +export default ParticipantMenu; From 4d0f9f5847819c374e061429c3a143d5b76fe12b Mon Sep 17 00:00:00 2001 From: gimdogyun Date: Fri, 12 Jul 2024 16:59:48 +0900 Subject: [PATCH 4/4] =?UTF-8?q?refactor=20:=20=EB=A6=AC=EB=B7=B0=EB=B0=98?= =?UTF-8?q?=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - includeMembers, excludeMembers optional - excludeMember가 존재할때만 Divider - #284 --- src/components/ParticipantMenu/index.tsx | 6 +++--- src/components/ParticipantMenu/types.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/ParticipantMenu/index.tsx b/src/components/ParticipantMenu/index.tsx index efa0fe35..e57a5f03 100644 --- a/src/components/ParticipantMenu/index.tsx +++ b/src/components/ParticipantMenu/index.tsx @@ -12,8 +12,8 @@ const defaultFunction = (member: Member) => {}; const ParticipantMenu = ({ leader, - includeMembers, - excludeMembers, + includeMembers = [], + excludeMembers = [], children, isOpen, setIsOpen, @@ -90,7 +90,7 @@ const ParticipantMenu = ({ onMandateLeader={onMandateLeader} /> ))} - + {searchedExcludeMember && searchedExcludeMember.length > 0 && } {searchedExcludeMember.map((member: Member) => ( >;