랭킹페이지 페이지네이션 API 연결 구현 완료

.env

@@ -0,0 +1 @@
+REACT_APP_API_ENDPOINT = https://api.tadak.dev

src/components/LanguageCard/styles.js

@@ -1,5 +1,4 @@
 import styled from "@emotion/styled";
-import { theme } from "styles/theme";
 import { BadgeIconContainer } from "components/common/Badge/styles";
 
 export const CardContainer = styled.div`
@@ -19,7 +18,7 @@ export const IconContainer = styled(BadgeIconContainer)`
     justify-content: center;
     align-items:center;
 
-    background-color:${theme.color.white};
+    background-color:${({ theme }) => theme.color.white};
     border-radius:10px;
     width:64px;
     height:64px;
@@ -53,5 +52,5 @@ export const Summary = styled.div`
   font-weight: 400;
   font-size: 12px;
 
-  color: ${theme.color.white};
+  color: ${({ theme }) => theme.color.white};
 `;

src/components/LeaderBoard/index.js

@@ -37,11 +37,11 @@ function LeaderBoard({ ranks }) {
         {ranks &&
           ranks.map((rank, index) => (
             <LeaderBoardItem
-              rank={index + 1 + TOP_DISPLAY_USER}
+              rank={rank.ranking}
               variants={defaultFadeInScaleVariants}
               username={rank.user.username}
               email={rank.user.email}
-              KPM={rank.record}
+              KPM={rank.highest_record}
               language={rank.language_no}
               syntax={rank.grammar_no}
               key={index}

src/components/PortalModal/index.js

@@ -1,7 +1,7 @@
 import {
   StyledModal,
   DimmedArea,
-} from "components/PortalModal/style";
+} from "components/PortalModal/styles";
 import { createPortal } from "react-dom";
 import { useState, useEffect } from "react";
 import usePreventScroll from "hooks/usePreventScroll";

src/components/PortalModal/styles.js

@@ -0,0 +1,39 @@
+import styled from "@emotion/styled/macro";
+import { hexToRgba } from "utils/color";
+import { motion } from "framer-motion";
+
+export const StyledModal = styled(motion.div)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  gap: 16px;
+  border-radius: 10px;
+  padding: 40px 20px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 100;
+  width: 400px;
+  background: ${({ theme }) => theme.color.modalBG};
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+`;
+
+export const DimmedArea = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: ${({ theme }) => hexToRgba(theme.color.white, 0.2)};
+
+  z-index: 1000;
+`;

src/components/Timer/index.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { useState, useEffect } from "react";
-import { DigitText, SymbolText, TimerDiv } from "./style";
+import { DigitText, SymbolText, TimerDiv } from "components/Timer/styles";
 
 // EXAMPLE
 //   const [stopState, setStopState] = useState(false);

src/components/Timer/style.js → src/components/Timer/styles.js

@@ -1,5 +1,4 @@
 import styled from "@emotion/styled/macro";
-import { theme } from "styles/theme";
 export const TimerDiv = styled.div`
 display: flex;
 flex-direction: row;
@@ -11,11 +10,11 @@ border-radius: 20px;
 background: #161B21
 `
 
-const baseText=styled.div`
+const baseText = styled.div`
 font-style: normal;
 font-weight: 400;
 font-size: 48px;
-color: ${theme.color.white};
+color: ${({ theme }) => theme.color.white};
 `
 
 export const DigitText = styled(baseText)`

src/components/TypeInput/index.js

@@ -6,8 +6,7 @@ import { useLocation } from "react-router-dom";
 import { serverAxios } from "utils/commonAxios";
 import PortalModal from "components/PortalModal";
 import Button from "components/common/Button";
-import { ModalBody, ModalButton, ModalHeader, ModalIcon, ModalTitle } from "components/PortalModal/style";
-import { theme } from "styles/theme";
+import { ModalBody, ModalButton, ModalHeader, ModalIcon, ModalTitle } from "components/common/styles";
 import TimerIcon from "assets/svgs/Tumer_light.svg";
 
 function generateLetterStatus(currentInputString, letter, currentLetterIndex) {
@@ -266,7 +265,7 @@ function TypeInput({ timePassed, setCurrentKPM, currentKPM, setIsPlaying, paragr
         open={showCountdownModal}
         onClose={() => { }}
       >
-        <ModalHeader color={theme.color.blue.light}>준비하세요!</ModalHeader>
+        <ModalHeader color={({ theme }) => theme.color.blue.light}>준비하세요!</ModalHeader>
         <ModalTitle>{countDownSeconds}</ModalTitle>
         <ModalButton onClick={() => { setIsReady(false) }}>바로시작!</ModalButton>
       </PortalModal>

src/components/common/styles.js

@@ -0,0 +1,45 @@
+import styled from "@emotion/styled/macro";
+
+// TODO: 일단 Modal에서만 사용하는 스타일임, Modal 이외의 style에서도 활용가능하도록 일반화
+export const ModalIcon = styled.img`
+  width:40px;
+  height:40px;
+`
+
+export const ModalText = styled.div`
+  color: ${({ theme, color }) => color ?? theme.color.white};
+`
+
+export const ModalTitle = styled(ModalText)`
+  font-size: 40px;
+  font-weight: 700;
+`
+
+export const ModalHeader = styled(ModalText)`
+  font-size: 36px;
+  font-weight: 700;
+`
+
+export const ModalBody = styled(ModalText)`
+  font-size: 16px;
+`
+
+export const ModalButton = styled.div`
+  padding: 10px;
+  width: 100%;
+  background-color: #bfcdf0;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 16px;
+  color: #26262d;
+  text-align: center;
+  font-weight: bold;
+  &.active {
+    background-color: ${({ theme }) => theme.color.primary500};
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.color.primary200};
+  }
+  transition: 0.3s;
+`

src/constants/pagination.js

@@ -0,0 +1 @@
+export const LEADERBOARD_PAGE_SIZE = 10;

src/hooks/useRanks.js

@@ -15,6 +15,7 @@ function useRanks(pageNumber, pageSize, languageNo = 1, grammarNo = 1) {
 
   return {
     ranks: data?.ranks,
+    ranks_meta: data?.ranks_meta,
     error,
     mutate, // 데이터 변경 시 이 API 를 이용하는 모든 컴포넌트에 UI 업데이트 방송.
   };