From 2af9b55b4cd6c6d7f7949aaf4cfacc810de9a342 Mon Sep 17 00:00:00 2001
From: 1eecan <busyx2modernsociety@gmail.com>
Date: Wed, 29 Nov 2023 18:21:57 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=81=AC=EB=A3=A8=20=EB=9E=AD=ED=82=B9?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EA=B2=8C=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?,=20=ED=81=AC=EB=A3=A8=20=EC=A1=B4=EC=9E=AC=ED=95=98=EC=A7=80?=
 =?UTF-8?q?=20=EC=95=8A=EC=9D=84=EB=95=8C=EC=9D=98=20=EB=B6=84=EA=B8=B0?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MainPage/MainPage.tsx              | 90 +++++++++++++++++---
 src/pages/MainPage/MainPageNoContentItem.tsx | 75 ++++++++++++++++
 2 files changed, 154 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/MainPage/MainPageNoContentItem.tsx

diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
index 553b7a22..0f598169 100644
--- 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
new file mode 100644
index 00000000..1133798e
--- /dev/null
+++ 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;
+`;