feat: 둘러보기 페이지에서 본인 아닌 팀만 보이도록 구현

KNU-HAEDAL · May 29, 2024 · 561e898 · 561e898
1 parent 60cc69d
commit 561e898
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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>
   );
 };