From d1c02d2a190620278acc3a0c1a5cb0082d835810 Mon Sep 17 00:00:00 2001
From: salwwkd <hettzze@gmail.com>
Date: Tue, 21 Jan 2025 11:17:55 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=9E=AD=ED=82=B9?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/ranking/RankingList.tsx     | 45 +++++++++++++------
 src/components/ui/ranking/rankingListStyle.ts | 44 ++++++++++++++++--
 src/pages/rank/RankingPage.tsx                | 29 +++++++-----
 src/pages/rank/rankingPageStyle.ts            |  4 ++
 4 files changed, 93 insertions(+), 29 deletions(-)

diff --git a/src/components/ui/ranking/RankingList.tsx b/src/components/ui/ranking/RankingList.tsx
index 3ac6345..40e7fe5 100644
--- a/src/components/ui/ranking/RankingList.tsx
+++ b/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>
   );
 }
diff --git a/src/components/ui/ranking/rankingListStyle.ts b/src/components/ui/ranking/rankingListStyle.ts
index 6b93fd6..9683391 100644
--- a/src/components/ui/ranking/rankingListStyle.ts
+++ b/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);
+`;
diff --git a/src/pages/rank/RankingPage.tsx b/src/pages/rank/RankingPage.tsx
index fa6aa46..7e168d5 100644
--- a/src/pages/rank/RankingPage.tsx
+++ b/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></RankingList>
+      </FullBox>
+    </Wrapper>
   );
 }
diff --git a/src/pages/rank/rankingPageStyle.ts b/src/pages/rank/rankingPageStyle.ts
index c11a019..61d0066 100644
--- a/src/pages/rank/rankingPageStyle.ts
+++ b/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;

From 7608db867dd1bee01d3b53ec903b8fa4ddcd86ef Mon Sep 17 00:00:00 2001
From: salwwkd <hettzze@gmail.com>
Date: Tue, 21 Jan 2025 11:23:24 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=9E=AD=ED=82=B9?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/rank/RankingPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/rank/RankingPage.tsx b/src/pages/rank/RankingPage.tsx
index 7e168d5..5c5d58c 100644
--- a/src/pages/rank/RankingPage.tsx
+++ b/src/pages/rank/RankingPage.tsx
@@ -27,7 +27,7 @@ export default function RangkingPage() {
         {/* {data?.ranking.map((user, index) => (
         <RankingList nickname={user.userNickname} index={index} />
       ))} */}
-        <RankingList></RankingList>
+        <RankingList nickname="" index={0}></RankingList>
       </FullBox>
     </Wrapper>
   );