#83 feat: 검색결과 존재하지 않을때 조건부 렌더링

AJD-Archive · Sep 25, 2024 · 759407a · 759407a
1 parent 4646cda
commit 759407a
Showing 1 changed file with 19 additions and 10 deletions.
diff --git a/src/pages/ChallengeCommunityPage.tsx b/src/pages/ChallengeCommunityPage.tsx
@@ -9,6 +9,7 @@ import ChallengeCard from '../components/ChallengeCard';
 import { Link } from 'react-router-dom';
 import { Challenge, ChallengeCategory, ChallengeResponse } from '../types/ChallengeType';
 import { getSearchChallenge } from '../api/ChallengeApi';
+import { NotExistingDocument } from '../styles/TeamDocumentStyled';
 
 const ChallengeCommunityPage = () => {
   const [count, setCount] = useState<number>(1); // 총 페이지 수
@@ -130,17 +131,25 @@ const ChallengeCommunityPage = () => {
           </S.SearchBar>
         </S.SearchContainer>
 
-        <Flex justifyContent="center">
-          <S.ChallengeContainer>
-            {challenges?.map((challenge, index) => (
-              <ChallengeCard key={index} challenge={challenge} />
-            ))}
-          </S.ChallengeContainer>
-        </Flex>
+        {challenges?.length !== 0 ? (
+          <>
+            <Flex justifyContent="center">
+              <S.ChallengeContainer>
+                {challenges?.map((challenge, index) => (
+                  <ChallengeCard key={index} challenge={challenge} />
+                ))}
+              </S.ChallengeContainer>
+            </Flex>
 
-        <S.PaginationWrapper>
-          <Pagination count={pageInfo?.totalPages} page={page} onChange={handleChangePage} />
-        </S.PaginationWrapper>
+            <S.PaginationWrapper>
+              <Pagination count={pageInfo?.totalPages} page={page} onChange={handleChangePage} />
+            </S.PaginationWrapper>
+          </>
+        ) : (
+          <Flex justifyContent="center" alignItems="center" height={400}>
+            <NotExistingDocument>해당하는 검색결과가 존재하지 않아요</NotExistingDocument>
+          </Flex>
+        )}
       </S.MainDashBoardContainer>
     </S.MainDashBoardLayout>
   );