From b5322f5ad0b3b285e4784bb1cb005a505727b43c Mon Sep 17 00:00:00 2001
From: EunBae Gong <geb9211@gmail.com>
Date: Tue, 30 Jan 2024 07:34:47 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20default=20=EB=B3=80=EC=88=98=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/RankingPage/RankingPage.tsx          | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/RankingPage/RankingPage.tsx b/src/components/pages/RankingPage/RankingPage.tsx
index 0e885ec..77e998d 100644
--- a/src/components/pages/RankingPage/RankingPage.tsx
+++ b/src/components/pages/RankingPage/RankingPage.tsx
@@ -11,6 +11,9 @@ type Props = {
   usageRankingOrder: 0 | 1;
 };
 
+const DEFAULT_USAGE_RANKING_LEVEL = 0;
+const MAX_USAGE_RANKING_LEVEL = 3;
+
 const RankingPage = ({ usageRankingOrder }: Props) => {
   const { user } = useUserStore();
   const { recapInfo } = useRecapInfoStore();
@@ -18,7 +21,7 @@ const RankingPage = ({ usageRankingOrder }: Props) => {
   return (
     <TimelineLayout
       css={setBackgroundByUsageRankingLevel(
-        recapInfo?.usageRanking[0].level ?? 3,
+        recapInfo?.usageRanking[0].level ?? DEFAULT_USAGE_RANKING_LEVEL,
       )}>
       <div
         css={css`
@@ -61,7 +64,7 @@ const RankingPage = ({ usageRankingOrder }: Props) => {
           <Txt
             label={
               recapInfo?.usageRanking[usageRankingOrder].ranking.toString() ??
-              '0'
+              DEFAULT_USAGE_RANKING_LEVEL.toString()
             }
             color={'primaryBrand'}
             typograph={'headlineLarge'}
@@ -84,7 +87,8 @@ const RankingPage = ({ usageRankingOrder }: Props) => {
       </div>
       <img
         css={css`
-          height: ${recapInfo?.usageRanking[usageRankingOrder].level === 3
+          height: ${recapInfo?.usageRanking[usageRankingOrder].level ===
+          MAX_USAGE_RANKING_LEVEL
             ? '180px'
             : '250px'};
         `}
@@ -112,7 +116,7 @@ const RankingPage = ({ usageRankingOrder }: Props) => {
             label={
               usageRankingLevelText[
                 recapInfo?.usageRanking[usageRankingOrder].level.toString() ??
-                  '0'
+                  DEFAULT_USAGE_RANKING_LEVEL.toString()
               ].title
             }
             color={'grey190'}
@@ -122,7 +126,8 @@ const RankingPage = ({ usageRankingOrder }: Props) => {
             `}
           />
         </div>
-        {recapInfo?.usageRanking[usageRankingOrder].level === 3 ? (
+        {recapInfo?.usageRanking[usageRankingOrder].level ===
+        MAX_USAGE_RANKING_LEVEL ? (
           <Txt
             label={'Falco peregrinusTunstall, 1771'}
             color={'grey130'}
@@ -132,7 +137,8 @@ const RankingPage = ({ usageRankingOrder }: Props) => {
         <Txt
           label={
             usageRankingLevelText[
-              recapInfo?.usageRanking[usageRankingOrder].level.toString() ?? '0'
+              recapInfo?.usageRanking[usageRankingOrder].level.toString() ??
+                DEFAULT_USAGE_RANKING_LEVEL.toString()
             ].subTitle
           }
           color={'grey130'}