Develop

src/components/ui/ranking/RankingList.tsx

@@ -1,7 +1,18 @@
 import gold from "../../../assets/images/icon_gold.svg";
 import silver from "../../../assets/images/icon_silver.svg";
 import bronze from "../../../assets/images/icon_bronze.svg";
-import { BronzeImage, GoldImage, SilverImage } from "./rankingListStyle";
+import {
+  BronzeImage,
+  GoldImage,
+  Hr,
+  NickNameBox,
+  NicknameImage,
+  NickNameText,
+  RankingBox,
+  RankingNumber,
+  SilverImage,
+} from "./rankingListStyle";
+import profile from "../../../assets/images/image_profile_01.svg";
 
 interface IRankingList {
   nickname: string;
@@ -11,19 +22,25 @@ interface IRankingList {
 export default function RankingList({ nickname, index }: IRankingList) {
   return (
     <div>
-      <p>
-        {index === 0 ? (
-          <GoldImage src={gold} alt="금메달" />
-        ) : index === 1 ? (
-          <SilverImage src={silver} alt="은메달" />
-        ) : index === 2 ? (
-          <BronzeImage src={bronze} alt="동메달" />
-        ) : (
-          ""
-        )}
-      </p>
-      <p>{nickname}</p>
-      <p>{index + 1}</p>
+      <RankingBox>
+        <NickNameBox>
+          <p>
+            {index === 0 ? (
+              <GoldImage src={gold} alt="금메달" />
+            ) : index === 1 ? (
+              <SilverImage src={silver} alt="은메달" />
+            ) : index === 2 ? (
+              <BronzeImage src={bronze} alt="동메달" />
+            ) : (
+              ""
+            )}
+          </p>
+          <NicknameImage src={profile} alt="닉네임 프로필" />
+          <NickNameText>{nickname}</NickNameText>
+        </NickNameBox>
+        <RankingNumber>{index + 1}</RankingNumber>
+      </RankingBox>
+      <Hr></Hr>
     </div>
   );
 }

src/components/ui/ranking/rankingListStyle.ts

@@ -1,5 +1,43 @@
 import styled from "styled-components";
 
-export const GoldImage = styled.img``;
-export const SilverImage = styled.img``;
-export const BronzeImage = styled.img``;
+export const RankingBox = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0px 44px 0px 61px;
+`;
+export const NickNameBox = styled.div`
+  display: flex;
+  gap: 20px;
+`;
+export const GoldImage = styled.img`
+  width: 30px;
+  height: 30px;
+`;
+export const SilverImage = styled.img`
+  width: 30px;
+  height: 30px;
+`;
+export const BronzeImage = styled.img`
+  width: 30px;
+  height: 30px;
+`;
+export const NicknameImage = styled.img`
+  width: 40px;
+  height: 40px;
+`;
+export const NickNameText = styled.div`
+  color: var(--gray-999);
+  font-size: 18px;
+  font-weight: 500;
+`;
+export const RankingNumber = styled.div`
+  color: var(--gray-999);
+  font-size: 24px;
+  font-weight: 600;
+`;
+export const Hr = styled.hr`
+  width: 400px;
+  height: 1px;
+  background: var(--gray-999);
+`;

src/pages/rank/RankingPage.tsx

@@ -5,25 +5,30 @@ import {
   MainTextBox,
   TrophyBox,
   TrophyImage,
+  Wrapper,
 } from "./rankingPageStyle";
 import trophy from "../../assets/images/icon_trophy.svg";
+import RankingList from "../../components/ui/ranking/RankingList";
 // import RankingList from "../../components/ui/ranking/RankingList";
 
 export default function RangkingPage() {
   return (
-    <FullBox>
-      <TrophyBox>
-        <TrophyImage src={trophy} alt="랭킹 트로피 이미지" />
-        <H1>전체 랭킹</H1>
-      </TrophyBox>
-      <MainTextBox>
-        <div>닉네임</div>
-        <div>순위</div>
-      </MainTextBox>
-      <Hr />
-      {/* {data?.ranking.map((user, index) => (
+    <Wrapper>
+      <FullBox>
+        <TrophyBox>
+          <TrophyImage src={trophy} alt="랭킹 트로피 이미지" />
+          <H1>전체 랭킹</H1>
+        </TrophyBox>
+        <MainTextBox>
+          <div>닉네임</div>
+          <div>순위</div>
+        </MainTextBox>
+        <Hr />
+        {/* {data?.ranking.map((user, index) => (
         <RankingList nickname={user.userNickname} index={index} />
       ))} */}
-    </FullBox>
+        <RankingList nickname="" index={0}></RankingList>
+      </FullBox>
+    </Wrapper>
   );
 }

src/pages/rank/rankingPageStyle.ts

@@ -1,5 +1,9 @@
 import styled from "styled-components";
 
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`;
 export const FullBox = styled.div`
   width: 400px;
   display: flex;