Merge pull request #339 from boostcampwm-2022/refactor/frontend-ranking

Refactor: 랭킹페이지, 랭킹 컴포넌트

Author: Yaminyam

frontend/src/components/Ranking/RankingTable/index.tsx

@@ -1,5 +1,5 @@
 import { Children } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 type TextAlignType = 'center' | 'right' | 'left';
 
@@ -32,6 +32,10 @@ interface StyledContainer {
   tdAlignList: TextAlignType[];
 }
 
+interface StyledRow {
+  isHover: boolean;
+}
+
 /**
  * Head 컴포넌트는 Ranking 컴포넌트의 자식 컴포넌트로 사용되어야 하고 Row 컴포넌트보다 먼저 사용되어야 합니다.
  */
@@ -47,7 +51,12 @@ function Head({ children }: HeadProps) {
  * Row 컴포넌트는 Ranking 컴포넌트의 자식 컴포넌트로 사용되어야 합니다.
  */
 function Row({ children, onClick }: RowProps) {
-  return <tr onClick={onClick}>{children}</tr>;
+  const isHover = !!onClick;
+  return (
+    <Tr onClick={onClick} isHover={isHover}>
+      {children}
+    </Tr>
+  );
 }
 
 /**
@@ -118,33 +127,34 @@ const Container = styled.table<StyledContainer>`
       }
     }
   }
+`;
 
-  tbody {
-    tr {
-      padding: 0 15px;
-      background-color: ${(props) => props.theme.colors.black3};
-      transition: background-color 0.1s ease-in-out;
-      cursor: pointer;
-      td {
-        vertical-align: middle;
-        height: 76px;
-        font-size: ${(props) => props.theme.fontSize.lg};
-
-        &:first-of-type {
-          border-top-left-radius: 8px;
-          border-bottom-left-radius: 8px;
-        }
-
-        &:last-of-type {
-          border-top-right-radius: 8px;
-          border-bottom-right-radius: 8px;
-          padding-right: 20px;
-        }
-      }
+const Tr = styled.tr<StyledRow>`
+  padding: 0 15px;
+  background-color: ${(props) => props.theme.colors.black3};
+  transition: background-color 0.1s ease-in-out;
+  td {
+    vertical-align: middle;
+    height: 76px;
+    font-size: ${(props) => props.theme.fontSize.lg};
+
+    &:first-of-type {
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
 
+    &:last-of-type {
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+      padding-right: 20px;
+    }
+  }
+  ${(props) =>
+    props.isHover &&
+    css`
+      cursor: pointer;
       &:hover {
         background-color: ${(props) => props.theme.colors.gray1};
       }
-    }
-  }
+    `}
 `;

frontend/src/pages/ranking.tsx

@@ -70,31 +70,33 @@ function Ranking({ tier, username, page }: RankingProps) {
             <RankingTable.Element>{t('common:table-score')}</RankingTable.Element>
             <RankingTable.Element>{t('common:table-tech-stack')}</RankingTable.Element>
           </RankingTable.Head>
-          {data?.users.map(({ id, username, avatarUrl, tier, score, primaryLanguages }, index) => (
-            <RankingTable.Row key={id} onClick={() => searchUser(username)}>
-              <RankingTable.Element>
-                <GrayText>{(page - 1) * COUNT_PER_PAGE + index + 1}</GrayText>
-              </RankingTable.Element>
-              <RankingTable.Element>
-                <Avatar src={avatarUrl} name={username} />
-              </RankingTable.Element>
-              <RankingTable.Element>
-                <CubeIcon tier={tier} />
-              </RankingTable.Element>
-              <RankingTable.Element>
-                <GrayText>{score?.toLocaleString()}</GrayText>
-              </RankingTable.Element>
-              <RankingTable.Element>
-                <TechStackList>
-                  {primaryLanguages.map((lang) => (
-                    <li key={lang}>
-                      <LanguageIcon language={lang} width={35} height={35} />
-                    </li>
-                  ))}
-                </TechStackList>
-              </RankingTable.Element>
-            </RankingTable.Row>
-          ))}
+          {data?.users.map(
+            ({ id, username, avatarUrl, tier: eachTier, score, primaryLanguages, totalRank, tierRank }) => (
+              <RankingTable.Row key={id} onClick={() => searchUser(username)}>
+                <RankingTable.Element>
+                  <GrayText>{tier === 'all' ? totalRank : tierRank}</GrayText>
+                </RankingTable.Element>
+                <RankingTable.Element>
+                  <Avatar src={avatarUrl} name={username} />
+                </RankingTable.Element>
+                <RankingTable.Element>
+                  <CubeIcon tier={eachTier} />
+                </RankingTable.Element>
+                <RankingTable.Element>
+                  <GrayText>{score?.toLocaleString()}</GrayText>
+                </RankingTable.Element>
+                <RankingTable.Element>
+                  <TechStackList>
+                    {primaryLanguages.map((lang) => (
+                      <li key={lang}>
+                        <LanguageIcon language={lang} width={35} height={35} />
+                      </li>
+                    ))}
+                  </TechStackList>
+                </RankingTable.Element>
+              </RankingTable.Row>
+            ),
+          )}
         </RankingTable>
         {isLoading && Array.from({ length: COUNT_PER_PAGE }).map((_, index) => <RankingSkeleton key={index} />)}
         {isError && <NotFound />}

frontend/src/type/response.ts

@@ -20,6 +20,8 @@ export interface RankingResponse {
   avatarUrl: string;
   dailyViews: number;
   score: number;
+  totalRank: number;
+  tierRank: number;
   scoreDifference: number;
   primaryLanguages: string[];
 }

frontend/src/utils/constants.ts

@@ -37,6 +37,7 @@ export const LANGUAGE_MAP: {
   'objective-c': 'objectivec',
   'asp.net': 'asp',
   hcl: 'hashicorp',
+  rust: 'light_rust',
 };
 
 export const CUBE_RANK = {