diff --git a/front/src/interfaces/GroupInterface.ts b/front/src/interfaces/GroupInterface.ts index 54c8d32..a0d9405 100644 --- a/front/src/interfaces/GroupInterface.ts +++ b/front/src/interfaces/GroupInterface.ts @@ -2,6 +2,7 @@ export interface IGroupProps { id: number; name: string; isPrivate: boolean; + isMember: boolean; } export interface ICreateGroupModalProps { diff --git a/front/src/pages/group/components/GroupLists.tsx b/front/src/pages/group/components/GroupLists.tsx index 52d3dd1..3e0697f 100644 --- a/front/src/pages/group/components/GroupLists.tsx +++ b/front/src/pages/group/components/GroupLists.tsx @@ -9,18 +9,18 @@ import { IGroupProps } from '@interfaces/GroupInterface'; import styled from '@emotion/styled'; -const MyGroupLists = [ - { - id: 1, - name: '해달 파이팅', - isPrivate: false, - }, - { - id: 2, - name: '해달 고고', - isPrivate: false, - }, -]; +// const MyGroupLists = [ +// { +// id: 1, +// name: '해달 파이팅', +// isPrivate: false, +// }, +// { +// id: 2, +// name: '해달 고고', +// isPrivate: false, +// }, +// ]; const GroupContainer = styled.div` padding: 20px; diff --git a/front/src/pages/search/components/SearchResult.tsx b/front/src/pages/search/components/SearchResult.tsx index b7dc7d7..720830d 100644 --- a/front/src/pages/search/components/SearchResult.tsx +++ b/front/src/pages/search/components/SearchResult.tsx @@ -42,6 +42,26 @@ const InputResultLayout = styled.div` padding: 0.5rem 1rem; `; +const GroupType = styled.p` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 5px 0 0; + font-size: 14px; + color: var(--color-white); + width: 60px; + height: 20px; + border-radius: 12px; + background-color: var(--color-red); + font-size: var(--size-xs); +`; + +const GroupTypeLayout = styled.div` + display: flex; + flex-direction: column; +`; + const SearchResult = () => { const { data, isPending, isError, error } = useGroups(); @@ -61,18 +81,33 @@ const SearchResult = () => { return <InputResultLayout>검색 결과가 없습니다.</InputResultLayout>; } + const filteredGroups = data.filter((group: IGroupProps) => !group.isMember); + const onClickNav = () => {}; return ( <InputResultLayout> - {data.map((group: IGroupProps) => ( - <SearchResultLayout key={group.id}> - <Text size='var(--size-sm)' weight='700' color='var(--color-black)'> - {group.name} - </Text> - <PButton onClick={onClickNav}>참여하기</PButton> - </SearchResultLayout> - ))} + {filteredGroups.length === 0 ? ( + <Text size='var(--size-sm)' weight='700' color='var(--color-black)'> + 조건에 맞는 검색 결과가 없습니다. + </Text> + ) : ( + filteredGroups.map((group: IGroupProps) => ( + <SearchResultLayout key={group.id}> + <GroupTypeLayout> + <Text + size='var(--size-sm)' + weight='700' + color='var(--color-black)' + > + {group.name} + </Text> + <GroupType>{group.isPrivate ? 'Private' : 'Public'}</GroupType> + </GroupTypeLayout> + <PButton onClick={onClickNav}>참여하기</PButton> + </SearchResultLayout> + )) + )} </InputResultLayout> ); };