Merge pull request #52 from Bibumhada/feat/fetch-serverApi

OverallResult button location, ResultCard key props 에러 수정
Bibumhada · Sep 24, 2023 · 716c135 · 716c135
2 parents 2a09850 + 7c29f0b
commit 716c135
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/src/components/common/ResultCard/ResultCard.tsx b/src/components/common/ResultCard/ResultCard.tsx
@@ -9,7 +9,6 @@ import noodle from 'assets/icons/icon-noodle.svg';
 import splitCategory from 'util/splitCategory';
 
 type ResultCardProps = {
-  key: number;
   roomId: string | undefined;
   winnerNum: number;
   rank: number;
@@ -48,7 +47,7 @@ const ResultCard = (props: ResultCardProps) => {
     </S.RankingWrapper>
   );
   return (
-    <S.RestaurantDetail key={props.key}>
+    <S.RestaurantDetail>
       {props.winnerNum === 1 ? oneWinner : multipleWinner}
       <span className="line"></span>
       <S.RestaurantName onClick={handleLinkClick}>

diff --git a/src/pages/OverallRanking/OverallRanking.styled.ts b/src/pages/OverallRanking/OverallRanking.styled.ts
@@ -10,6 +10,7 @@ export const OverallRankingWrapper = styled.div`
   padding: 45px 19px 43px;
   display: flex;
   flex-direction: column;
+  height: 100%;
   gap: 25px;
 
   .page-title {
@@ -24,12 +25,13 @@ export const OverallRankingWrapper = styled.div`
 export const RestaurantList = styled.ul`
   display: flex;
   flex-direction: column;
+  height: 100%;
   gap: 18px;
 `;
 
 export const RestaurantItem = styled.li`
   width: 100%;
-  height: 92px;
+  min-height: 92px;
   background-color: #fff;
   display: flex;
   align-items: center;
@@ -110,15 +112,22 @@ export const Distance = styled.p`
   color: var(--color-sub-gray);
 `;
 
+export const ButtonLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex-grow: 1;
+`;
+
 export const ButtonShare = styled.button`
   display: block;
   background-color: rgba(255, 255, 255, 0.2);
   color: #fff;
   padding: 11px 48px;
   border-radius: 20px;
   margin: 0 auto;
-
-  img {
+  margin-bottom: auto;
+  s img {
     margin-right: 10px;
     vertical-align: bottom;
   }

diff --git a/src/pages/OverallRanking/OverallRanking.tsx b/src/pages/OverallRanking/OverallRanking.tsx
@@ -86,11 +86,13 @@ function OverallRanking() {
                 </button>
               </S.RestaurantItem>
             ))}
-            <S.ButtonShare onClick={handleModalClick}>
-              <img src={shareResult} alt="share result icon" />
-              공유하기
-            </S.ButtonShare>
-            <Button onClick={handleRetry}>다시하기</Button>
+            <S.ButtonLayout>
+              <S.ButtonShare onClick={handleModalClick}>
+                <img src={shareResult} alt="share result icon" />
+                공유하기
+              </S.ButtonShare>
+              <Button onClick={handleRetry}>다시하기</Button>
+            </S.ButtonLayout>
           </S.RestaurantList>
         </S.OverallRankingWrapper>
       </S.Wrapper>