refactor: award로 네이밍 변경

woowacourse-teams · Aug 14, 2024 · f530d12 · f530d12
1 parent 8dcb2e3
commit f530d12
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 20 deletions.
diff --git a/frontend/src/components/ranking/rankingCard/RankingCard.style.ts b/frontend/src/components/ranking/rankingCard/RankingCard.style.ts
@@ -32,14 +32,14 @@ export const EmptyRankingData = styled.div`
   height: 100%;
 `;
 
-// board
-export const RankingBoardContainer = styled.div`
+// award 시상대
+export const RankingAwardContainer = styled.div`
   display: flex;
   gap: 0.2rem;
   justify-content: space-between;
 `;
 
-export const RankingBoardItem = styled.div`
+export const RankingAwardItem = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -50,15 +50,15 @@ export const RankingBoardItem = styled.div`
 
   a {
     font: ${({ theme }) => theme.TEXT.semiSmall};
+    color: ${({ theme }) => theme.COLOR.grey2};
   }
 
-  p {
-    font: ${({ theme }) => theme.TEXT.semiSmall};
-    color: ${({ theme }) => theme.COLOR.grey2};
+  a:hover {
+    text-decoration: underline;
   }
 `;
 
-export const RankingBoardBar = styled.div<{ $rankingNumber: string }>`
+export const RankingAwardBar = styled.div<{ $rankingNumber: string }>`
   display: flex;
   align-items: flex-end;
   justify-content: center;
@@ -104,7 +104,7 @@ export const RankingTableItem = styled.div`
 
   padding: 0.5rem 0;
 
-  border: 1px solid ${({ theme }) => theme.COLOR.grey3};
+  border: 1px solid ${({ theme }) => theme.COLOR.grey1};
   border-radius: 8px;
 `;
 

diff --git a/frontend/src/components/ranking/rankingCard/RankingCard.tsx b/frontend/src/components/ranking/rankingCard/RankingCard.tsx
@@ -24,25 +24,26 @@ const RankingCard = ({ title, rankingData }: RankingCardProps) => {
     );
   }
 
-  const boardOrder = [1, 0, 2];
-  const orderedData = boardOrder.map((index) => rankingData[index]);
+  // 시상대 2등, 1등, 3등 순으로
+  const awardOrderedData = [rankingData[1], rankingData[0], rankingData[2]];
 
   return (
     <S.RankingCardContainer>
       <h2>{title}</h2>
 
-      <S.RankingBoardContainer>
-        {orderedData.map((data) => (
-          <S.RankingBoardItem key={data.rankingNumber}>
+      <S.RankingAwardContainer>
+        {awardOrderedData.map((data) => (
+          <S.RankingAwardItem key={data.rankingNumber}>
             <Profile imgSrc={data.profileImage} size={50} />
-            <a href={data.githubLink}>{data.nickname}</a>
-            <p>{data.averageRating}</p>
-            <S.RankingBoardBar $rankingNumber={`rank-${data.rankingNumber}`}>
+            <a href={data.githubLink} target="_blank">
+              {data.nickname}
+            </a>
+            <S.RankingAwardBar $rankingNumber={`rank-${data.rankingNumber}`}>
               {data.rankingNumber}
-            </S.RankingBoardBar>
-          </S.RankingBoardItem>
+            </S.RankingAwardBar>
+          </S.RankingAwardItem>
         ))}
-      </S.RankingBoardContainer>
+      </S.RankingAwardContainer>
 
       <S.RankingTableContainer>
         <S.RankingTableItem>
@@ -57,7 +58,9 @@ const RankingCard = ({ title, rankingData }: RankingCardProps) => {
               <img src={rankImages[data.rankingNumber]} alt={`Rank ${data.rankingNumber}`} />
             </S.TableItem>
             <S.TableItem>
-              <a href={data.githubLink}>{data.nickname}</a>
+              <a href={data.githubLink} target="_blank">
+                {data.nickname}
+              </a>
             </S.TableItem>
             <S.TableItem>{data.givenReviewCount}개</S.TableItem>
             <S.TableItem>{data.averageRating}</S.TableItem>