feat: 크루 랭킹 추가 및 게스트, 크루 존재하지 않을때의 분기처리

Java-and-Script · Nov 29, 2023 · 2af9b55 · 2af9b55
1 parent bd90a77
commit 2af9b55
Show file tree

Hide file tree

Showing 2 changed files with 154 additions and 11 deletions.
diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
@@ -1,11 +1,17 @@
 import { useNavigate } from 'react-router-dom';
 
+import { RankingHeader } from '@pages/CrewsRankingPage/CrewsRankingPage.styles';
+import { RankingItem } from '@pages/CrewsRankingPage/components/RankingItem';
+
 import { CrewItem } from '@components/CrewItem';
 import { Header } from '@components/Header';
 import { MatchItem } from '@components/MatchItem';
 import { Button } from '@components/shared/Button';
+import { Flex } from '@components/shared/Flex';
 import { Text } from '@components/shared/Text';
 
+import { useCrewsRankingQuery } from '@hooks/queries/useCrewsRankingQuery';
+
 import { theme } from '@styles/theme';
 
 import { useLoginInfoStore } from '@stores/loginInfo.store';
@@ -15,6 +21,7 @@ import { PATH_NAME } from '@consts/pathName';
 import { getGameStartDate } from '@utils/domain';
 
 import { MainPageContainer, MainPageSubContainer } from './MainPage.style';
+import { MainPageNoContentItem } from './MainPageNoContentItem';
 import { useMainPageNearCrewListQuery } from './useMainPageNearCrewListQuery';
 import { useMainPageNearGamesQuery } from './useMainPageNearGamesQuery';
 
@@ -35,6 +42,9 @@ export const MainPage = () => {
     addressDepth2,
   });
 
+  const { data: crewsRanking } = useCrewsRankingQuery();
+  const slicedCrewsRanking = crewsRanking.slice(0, 3);
+
   const filteredGameData = gameData.map(
     ({
       id,
@@ -92,23 +102,82 @@ export const MainPage = () => {
       <Header isLogo={true} />
       <MainPageSubContainer>
         <Text children={'내 근처 게스트 매치'} weight={700} size={'1.25rem'} />
-        {filteredGameData}
+        {filteredGameData.length === 0 ? (
+          <MainPageNoContentItem
+            name={'GAME'}
+            onClick={() => navigate(PATH_NAME.CREATE_GAME)}
+          />
+        ) : (
+          filteredGameData
+        )}
+        {filteredGameData.length === 0 || filteredGameData.length === 1 ? (
+          <Button
+            {...MAIN_PAGE_BUTTON_PROP}
+            onClick={() => navigate(PATH_NAME.MAP)}
+          >
+            다른 지역 게스트 매치 보러가기
+          </Button>
+        ) : (
+          <Button
+            {...MAIN_PAGE_BUTTON_PROP}
+            onClick={() => navigate(PATH_NAME.GAMES_NEAR)}
+          >
+            더보기
+          </Button>
+        )}
+      </MainPageSubContainer>
+      <MainPageSubContainer>
+        <Text children={'크루 랭킹'} weight={700} size={'1.25rem'} />
+        <RankingHeader justify="space-between">
+          <Flex gap={55}>
+            <Text size={14} nowrap>
+              순위
+            </Text>
+            <Text size={14} nowrap>
+              크루 이름
+            </Text>
+          </Flex>
+          <Text size={14} nowrap>
+            점수
+          </Text>
+        </RankingHeader>
+        {slicedCrewsRanking.map((crewRank) => (
+          <RankingItem
+            key={crewRank.id}
+            rank={crewRank.rank}
+            name={crewRank.name}
+            profilImageUrl={crewRank.profileImageUrl}
+            rating={crewRank.totalScore}
+            onClick={() =>
+              navigate(PATH_NAME.GET_CREWS_PATH(String(crewRank.id)))
+            }
+          />
+        ))}
         <Button
           {...MAIN_PAGE_BUTTON_PROP}
-          onClick={() => navigate(PATH_NAME.GAMES_NEAR)}
+          onClick={() => navigate(PATH_NAME.CREWS_RANKING)}
         >
-          더보기
+          전체 크루 랭킹 보기
         </Button>
       </MainPageSubContainer>
       <MainPageSubContainer>
         <Text children={'추천 크루'} weight={700} size={'1.25rem'} />
-        {filteredCrewData}
-        <Button
-          {...MAIN_PAGE_BUTTON_PROP}
-          onClick={() => navigate(PATH_NAME.CREWS_RECOMMEND)}
-        >
-          더보기
-        </Button>
+        {filteredCrewData.length === 0 ? (
+          <MainPageNoContentItem
+            name={'CREW'}
+            onClick={() => navigate(PATH_NAME.CREATE_CREW)}
+          />
+        ) : (
+          filteredCrewData
+        )}
+        {filteredCrewData.length !== 0 && (
+          <Button
+            {...MAIN_PAGE_BUTTON_PROP}
+            onClick={() => navigate(PATH_NAME.CREWS_RECOMMEND)}
+          >
+            더보기
+          </Button>
+        )}
       </MainPageSubContainer>
     </MainPageContainer>
   );
@@ -117,7 +186,6 @@ export const MainPage = () => {
 const MAIN_PAGE_BUTTON_PROP = {
   width: '100%',
   height: '3.5rem',
-  text: '더보기',
   fontSize: `${theme.FONT_SIZE.LG}`,
   fontWeight: theme.FONT_WEIGHT.BOLD,
   lineHeight: 0,

diff --git a/src/pages/MainPage/MainPageNoContentItem.tsx b/src/pages/MainPage/MainPageNoContentItem.tsx
@@ -0,0 +1,75 @@
+import styled from '@emotion/styled';
+
+import { Button } from '@components/shared/Button';
+import { Flex } from '@components/shared/Flex';
+import { Text } from '@components/shared/Text';
+
+import { theme } from '@styles/theme';
+
+type MainPageNoContentItemProps = {
+  name: string;
+  onClick: VoidFunction;
+};
+
+const englishToKorean = (english: string): string | void => {
+  if (english === 'GAME') return '게스트 매치';
+  if (english === 'CREW') return '크루';
+};
+
+export const MainPageNoContentItem = ({
+  name,
+  onClick,
+}: MainPageNoContentItemProps) => {
+  return (
+    <ItemWrapper gap={10} justify="space-between" onClick={onClick}>
+      <ItemInfoBox>
+        <Text size={20} ellipsis={1}>
+          {'NO'}
+        </Text>
+        <Text size={14} ellipsis={1} color={theme.PALETTE.GRAY_400}>
+          {name}
+        </Text>
+      </ItemInfoBox>
+      <Description direction="column" gap={3}>
+        <Text size={18} ellipsis={1}>
+          {`근처에 ${englishToKorean(name)}가 없어요`}
+        </Text>
+        <Text size={12} ellipsis={1}>
+          {'그렇다면 만들어볼까요?'}
+        </Text>
+        <Flex justify="space-between" align="center">
+          <Button
+            width={'100%'}
+            height={'1.75rem'}
+            fontWeight={theme.FONT_WEIGHT.BOLD}
+            fontSize={14}
+            textColor={theme.PALETTE.GRAY_300}
+            backgroundColor="#ffffff"
+          >
+            {name === 'GAME' ? '게스트 모집하기' : '크루 만들기'}
+          </Button>
+        </Flex>
+      </Description>
+    </ItemWrapper>
+  );
+};
+
+export const ItemWrapper = styled(Flex)`
+  background-color: white;
+  padding: 12px;
+  border-radius: 8px;
+`;
+
+export const ItemInfoBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: ${theme.PALETTE.GRAY_100};
+  min-width: 82px;
+  border-radius: 8px;
+`;
+
+export const Description = styled(Flex)`
+  flex-grow: 1;
+`;