From 60ba2c89a9eff706595ffac7e0531d9c9f75aeec Mon Sep 17 00:00:00 2001 From: Jiwon Park Date: Mon, 17 Nov 2025 21:43:05 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=EB=9E=AD=ED=82=B9=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/SideRankingLIst.jsx | 27 ++++++++++ src/pages/home/RankingPage.jsx | 51 +++++++++++++++++++ src/routes/home.js | 8 ++- .../components/home/SideRankingList.scss | 50 ++++++++++++++++++ src/styles/pages/home/RankingPage.scss | 40 +++++++++++++++ 5 files changed, 174 insertions(+), 2 deletions(-) create mode 100644 src/components/home/SideRankingLIst.jsx create mode 100644 src/pages/home/RankingPage.jsx create mode 100644 src/styles/components/home/SideRankingList.scss create mode 100644 src/styles/pages/home/RankingPage.scss diff --git a/src/components/home/SideRankingLIst.jsx b/src/components/home/SideRankingLIst.jsx new file mode 100644 index 0000000..4b2cef5 --- /dev/null +++ b/src/components/home/SideRankingLIst.jsx @@ -0,0 +1,27 @@ +import "styles/components/home/SideRankingList.scss"; + +const SideRankingList = ({ title, list, highlightRank }) => { + return ( +
+

{title}

+ +
+ {list.map((item) => ( +
+ {item.rank}. + {item.name} + + {item.score}점 +
+ ))} +
+
+ ); +}; + +export default SideRankingList; diff --git a/src/pages/home/RankingPage.jsx b/src/pages/home/RankingPage.jsx new file mode 100644 index 0000000..f253976 --- /dev/null +++ b/src/pages/home/RankingPage.jsx @@ -0,0 +1,51 @@ +import SideRankingList from "components/home/SideRankingList"; +import "styles/pages/home/RankingPage.scss"; + +const leftList = [ + { rank: 1, name: "엉덩이가려워", score: 9157 }, + { rank: 2, name: "나똥굳다", score: 8000 }, + { rank: 3, name: "삼위일체", score: 7658 }, + { rank: 4, name: "삼위일체", score: 7658 }, + { rank: 5, name: "삼위일체", score: 7658 }, + { rank: 6, name: "삼위일체", score: 7658 }, + { rank: 7, name: "삼위일체", score: 7658 }, +]; + +const rightList = [ + { rank: 134, name: "난 아님", score: 698 }, + { rank: 136, name: "난 아님", score: 698 }, + { rank: 137, name: "난 아님", score: 698 }, + { rank: 138, name: "나야", score: 356 }, + { rank: 139, name: "난 아님", score: 698 }, + { rank: 140, name: "난 아님", score: 698 }, + { rank: 141, name: "안녕", score: 698 }, +]; + +const RankingPage = () => { + return ( +
+ {/* LEFT LIST */} + + + {/* CENTER */} +
+
138 등
+ +
+
356 점
+
+ +

50명만 더 높으면 등수를 앞지를 수 있어요!

+
+ + {/* RIGHT LIST */} + +
+ ); +}; + +export default RankingPage; diff --git a/src/routes/home.js b/src/routes/home.js index af61342..fd8f379 100644 --- a/src/routes/home.js +++ b/src/routes/home.js @@ -9,6 +9,7 @@ import ServiceFAQPage from "pages/home/ServiceFAQPage"; import ServiceCenterDetailPage from "pages/home/ServiceCenterDetailPage"; import ServicePostPage from "pages/home/ServicePostPage"; import FAQDetailPage from "pages/home/FAQDetailPage"; +import RankingPage from "pages/home/RankingPage"; const home = [ { path: "/", @@ -19,7 +20,10 @@ const home = [ index: true, element: , }, - + { + path: "ranking", + element: , + }, { path: "character-intro", element: , @@ -55,7 +59,7 @@ const home = [ { path: "service-center/post", element: - } + }, ], }, ]; diff --git a/src/styles/components/home/SideRankingList.scss b/src/styles/components/home/SideRankingList.scss new file mode 100644 index 0000000..f56f9eb --- /dev/null +++ b/src/styles/components/home/SideRankingList.scss @@ -0,0 +1,50 @@ +.side-ranking { + width: 320px; + + .side-title { + font-size: 20px; + font-weight: 400; + margin-bottom: 35px; + } + + .side-list { + display: flex; + flex-direction: column; + gap: 16.47px; + font-family: SUIT-Regular; + + .side-item { + display: flex; + font-size: 21px; + padding-left: 5px; + padding-right: 5px; + align-items: center; + + &.highlight { + background: #FFDA37; + } + + .rank { + padding-right: 10px; + } + + .name { + padding-right: 5px; + + } + + .dashed-line { + flex: 1; + border-bottom: 2px dashed #D7CCCC; + } + + .score { + width: 60px; + font-size: 16px; + text-align: right; + } + } + } + + +} \ No newline at end of file diff --git a/src/styles/pages/home/RankingPage.scss b/src/styles/pages/home/RankingPage.scss new file mode 100644 index 0000000..546eb19 --- /dev/null +++ b/src/styles/pages/home/RankingPage.scss @@ -0,0 +1,40 @@ +.ranking-page { + width: 1187px; + min-height: 100vh; + display: flex; + justify-content: space-between; + padding-top: 222px; + font-family: YoonChild; + + .ranking-center { + text-align: center; + margin-top: 40px; + + .my-rank { + font-family: SUIT-Regular; + font-size: 80px; + font-weight: 700; + } + + .my-score-wrapper { + margin-top: 40px; + display: flex; + justify-content: center; + + .my-score { + font-family: SUIT-Regular; + font-size: 32px; + font-weight: 700; + background: #ffe45b; + padding: 8px 20px; + border-radius: 6px; + } + } + + .desc { + margin-top: 50px; + font-size: 18px; + color: #6f6f6f; + } + } +} \ No newline at end of file From 3ac400f8b45dd834ff7b77c7fad0bf90012b8e8d Mon Sep 17 00:00:00 2001 From: Jiwon Park Date: Mon, 17 Nov 2025 22:18:31 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=EB=9E=AD=ED=82=B9=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20ui=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/home/RankingPage.jsx | 48 +++--- .../components/home/SideRankingList.scss | 6 +- src/styles/pages/home/RankingPage.scss | 137 ++++++++++++++---- 3 files changed, 141 insertions(+), 50 deletions(-) diff --git a/src/pages/home/RankingPage.jsx b/src/pages/home/RankingPage.jsx index f253976..53b5d20 100644 --- a/src/pages/home/RankingPage.jsx +++ b/src/pages/home/RankingPage.jsx @@ -23,27 +23,39 @@ const rightList = [ const RankingPage = () => { return ( -
- {/* LEFT LIST */} - - - {/* CENTER */} -
-
138 등
- -
-
356 점
+
+
+ {/* LEFT LIST */} + + + {/* CENTER */} +
+
내 등수
+
+ 138 + 등 +
+ +
+ 내 점수 + + 356 점 +
-

50명만 더 높으면 등수를 앞지를 수 있어요!

+ {/* RIGHT LIST */} + +
+
+

+ 50점만 더 높으면 등수를 앞지를 + 수 있어요! +

- - {/* RIGHT LIST */} -
); }; diff --git a/src/styles/components/home/SideRankingList.scss b/src/styles/components/home/SideRankingList.scss index f56f9eb..eac852e 100644 --- a/src/styles/components/home/SideRankingList.scss +++ b/src/styles/components/home/SideRankingList.scss @@ -1,5 +1,5 @@ .side-ranking { - width: 320px; + width: 302px; .side-title { font-size: 20px; @@ -15,11 +15,13 @@ .side-item { display: flex; - font-size: 21px; + font-size: 21.08px; padding-left: 5px; padding-right: 5px; align-items: center; + line-height: 29.65px; + &.highlight { background: #FFDA37; } diff --git a/src/styles/pages/home/RankingPage.scss b/src/styles/pages/home/RankingPage.scss index 546eb19..1ced9e8 100644 --- a/src/styles/pages/home/RankingPage.scss +++ b/src/styles/pages/home/RankingPage.scss @@ -1,40 +1,117 @@ -.ranking-page { - width: 1187px; - min-height: 100vh; +.ranking-page-wrapper { display: flex; - justify-content: space-between; - padding-top: 222px; - font-family: YoonChild; - - .ranking-center { - text-align: center; - margin-top: 40px; - - .my-rank { - font-family: SUIT-Regular; - font-size: 80px; - font-weight: 700; + flex-direction: column; + align-items: center; + width: 100%; + min-height: 100vh; + + .ranking-page { + width: 1187px; + display: flex; + justify-content: space-between; + padding-top: 222px; + font-family: YoonChild; + + .ranking-center { + position: relative; + margin-top: 90px; + width: 476px; + + .rank-label { + font-size: 20px; + } + + .my-rank { + display: flex; + align-items: flex-end; + justify-content: flex-end; + gap: 6px; + + .rank-number { + font-family: SUIT-Regular; + font-size: 128px; + font-weight: 600; + } + + .rank-unit { + font-family: SUIT-Regular; + font-size: 32px; + margin-bottom: 20px; + margin-left: 21px; + } + } + + /* 점수 라인 */ + .score-row { + margin-top: 60px; + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + + .score-label { + font-size: 20px; + } + + .dashed-line { + flex: 1; + border-bottom: 3px dashed #F6AA30; + } + + .my-score { + position: relative; + display: flex; + align-items: center; + justify-content: center; + + width: 152px; + height: 40px; + + font-family: SUIT-Regular; + font-size: 32px; + font-weight: 700; + + background: #FFDA37; + + &::before { + content: ""; + position: absolute; + left: 0; + top: 0; + width: 9px; + height: 100%; + background: #FF9F03 + } + } + } } - .my-score-wrapper { - margin-top: 40px; + } + + + .bottom-banner { + margin-top: 50px; + width: 100%; + height: 66px; + font-family: YoonChild-ManSeh; + + background: #E9FF9F; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15); + + display: flex; + align-items: center; + justify-content: center; + + p { + font-size: 16px; display: flex; + align-items: center; justify-content: center; - - .my-score { - font-family: SUIT-Regular; - font-size: 32px; - font-weight: 700; - background: #ffe45b; - padding: 8px 20px; - border-radius: 6px; - } } - .desc { - margin-top: 50px; - font-size: 18px; - color: #6f6f6f; + .banner-score { + font-size: 32px; + font-weight: 500px; } } } \ No newline at end of file From faee4aa01faeafce703e5a8d2231ba16fa66a876 Mon Sep 17 00:00:00 2001 From: Jiwon Park Date: Tue, 18 Nov 2025 00:59:05 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=EB=9E=AD=ED=82=B9=20api=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/SideRankingLIst.jsx | 6 +- src/constants/api.js | 3 + src/pages/home/RankingPage.jsx | 90 ++++++++++++++++--------- src/services/home/ranking.js | 10 +++ 4 files changed, 74 insertions(+), 35 deletions(-) create mode 100644 src/services/home/ranking.js diff --git a/src/components/home/SideRankingLIst.jsx b/src/components/home/SideRankingLIst.jsx index 4b2cef5..bfb9435 100644 --- a/src/components/home/SideRankingLIst.jsx +++ b/src/components/home/SideRankingLIst.jsx @@ -8,15 +8,15 @@ const SideRankingList = ({ title, list, highlightRank }) => {
{list.map((item) => (
{item.rank}. - {item.name} + {item.nickname} - {item.score}점 + {item.exp}점
))}
diff --git a/src/constants/api.js b/src/constants/api.js index 7d65ff2..066384e 100644 --- a/src/constants/api.js +++ b/src/constants/api.js @@ -75,4 +75,7 @@ export const SERVICE_LIST_API = process.env.REACT_APP_SERVICE_LIST_API; export const SERVICE_MY_LIST_API = process.env.REACT_APP_SERVICE_MY_LIST_API; export const SERVICE_QNA_API = process.env.REACT_APP_SERVICE_QNA; +export const RANKING_API = process.env.REACT_APP_RANKING; +export const RANkING_MY_API = process.env.REACT_APP_MY_RANKING; + export const AI_SERVER_IP = process.env.REACT_APP_AI_SERVER_IP; \ No newline at end of file diff --git a/src/pages/home/RankingPage.jsx b/src/pages/home/RankingPage.jsx index 53b5d20..81b4aa8 100644 --- a/src/pages/home/RankingPage.jsx +++ b/src/pages/home/RankingPage.jsx @@ -1,60 +1,86 @@ import SideRankingList from "components/home/SideRankingList"; +import { useEffect, useState } from "react"; +import { getMyRankingAPI, getRankingListAPI } from "services/home/ranking"; import "styles/pages/home/RankingPage.scss"; -const leftList = [ - { rank: 1, name: "엉덩이가려워", score: 9157 }, - { rank: 2, name: "나똥굳다", score: 8000 }, - { rank: 3, name: "삼위일체", score: 7658 }, - { rank: 4, name: "삼위일체", score: 7658 }, - { rank: 5, name: "삼위일체", score: 7658 }, - { rank: 6, name: "삼위일체", score: 7658 }, - { rank: 7, name: "삼위일체", score: 7658 }, -]; - -const rightList = [ - { rank: 134, name: "난 아님", score: 698 }, - { rank: 136, name: "난 아님", score: 698 }, - { rank: 137, name: "난 아님", score: 698 }, - { rank: 138, name: "나야", score: 356 }, - { rank: 139, name: "난 아님", score: 698 }, - { rank: 140, name: "난 아님", score: 698 }, - { rank: 141, name: "안녕", score: 698 }, -]; - const RankingPage = () => { + const [rankingList, setRankingList] = useState([]); + const [myRank, setMyRank] = useState(null); + const [myScore, setMyScore] = useState(null); + const [topList, setTopList] = useState([]); + const [nearList, setNearList] = useState([]); + + useEffect(() => { + const fetchRanking = async () => { + try { + // ② 내 랭킹 조회 + const myRes = await getMyRankingAPI(); + const me = myRes?.data || myRes; + + if (!me) return; + + // 전체 랭킹 조회 (7명까지) + const fullRes = await getRankingListAPI(); + const list = fullRes?.data || fullRes || []; + setRankingList(list); + setTopList(list.slice(0, 7)); + + setMyRank(me.rank); + setMyScore(me.exp); + + // 내 근처 랭킹 계산 (위 아래 3명) + const myIndex = list.findIndex((item) => item.rank === me.rank); + const start = Math.max(myIndex - 3, 0); + const end = Math.min(myIndex + 4, list.length); + setNearList(list.slice(start, end)); + } catch (err) { + console.error("랭킹 조회 실패:", err); + } + }; + + fetchRanking(); + }, []); + + // 바로 위 등수와의 점수 차이 + const diffScore = + myRank > 1 && rankingList.length >= myRank - 1 + ? rankingList[myRank - 2].exp - myScore + : 0; + return (
- {/* LEFT LIST */} - + - {/* CENTER */}
내 등수
- 138 + {myRank ?? "-"} 등
내 점수 - 356 점 + {myScore ?? 0} 점
- {/* RIGHT LIST */}
-

- 50점만 더 높으면 등수를 앞지를 - 수 있어요! -

+ {myRank === 1 ? ( +

현재 1등입니다!

+ ) : ( +

+ {diffScore}점만 더 높으면 + 등수를 앞지를 수 있어요! +

+ )}
); diff --git a/src/services/home/ranking.js b/src/services/home/ranking.js new file mode 100644 index 0000000..3f695ce --- /dev/null +++ b/src/services/home/ranking.js @@ -0,0 +1,10 @@ +import { RANKING_API, RANkING_MY_API } from "constants/api"; +import { apiInterface } from "services/axiosForm"; + +export const getRankingListAPI = async (params = {}) => { + return await apiInterface("get", RANKING_API, {}, params, false); +}; + +export const getMyRankingAPI = async () => { + return await apiInterface("get", RANkING_MY_API, {}, {}, true); +}; \ No newline at end of file From a948efe120d508ff2022e39d27e0d54feea6e9eb Mon Sep 17 00:00:00 2001 From: Jiwon Park Date: Tue, 18 Nov 2025 01:41:00 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20api=EB=84=A4=EC=9D=B4=EB=B0=8D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/SideRankingLIst.jsx | 27 ------------------------- src/constants/api.js | 4 ++-- 2 files changed, 2 insertions(+), 29 deletions(-) delete mode 100644 src/components/home/SideRankingLIst.jsx diff --git a/src/components/home/SideRankingLIst.jsx b/src/components/home/SideRankingLIst.jsx deleted file mode 100644 index bfb9435..0000000 --- a/src/components/home/SideRankingLIst.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import "styles/components/home/SideRankingList.scss"; - -const SideRankingList = ({ title, list, highlightRank }) => { - return ( -
-

{title}

- -
- {list.map((item) => ( -
- {item.rank}. - {item.nickname} - - {item.exp}점 -
- ))} -
-
- ); -}; - -export default SideRankingList; diff --git a/src/constants/api.js b/src/constants/api.js index 066384e..56be9cc 100644 --- a/src/constants/api.js +++ b/src/constants/api.js @@ -75,7 +75,7 @@ export const SERVICE_LIST_API = process.env.REACT_APP_SERVICE_LIST_API; export const SERVICE_MY_LIST_API = process.env.REACT_APP_SERVICE_MY_LIST_API; export const SERVICE_QNA_API = process.env.REACT_APP_SERVICE_QNA; -export const RANKING_API = process.env.REACT_APP_RANKING; -export const RANkING_MY_API = process.env.REACT_APP_MY_RANKING; +export const RANKING_API = process.env.REACT_APP_RANKING_API; +export const RANkING_MY_API = process.env.REACT_APP_MY_RANKING_API; export const AI_SERVER_IP = process.env.REACT_APP_AI_SERVER_IP; \ No newline at end of file From 6770ee1bb22791783f64690d2cea5ad716ff92ec Mon Sep 17 00:00:00 2001 From: Jiwon Park Date: Tue, 18 Nov 2025 01:42:02 +0900 Subject: [PATCH 5/7] =?UTF-8?q?fix:=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=9E=AD?= =?UTF-8?q?=ED=82=B9=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=9E=AC=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/SideRankingList.jsx | 27 +++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/components/home/SideRankingList.jsx diff --git a/src/components/home/SideRankingList.jsx b/src/components/home/SideRankingList.jsx new file mode 100644 index 0000000..bfb9435 --- /dev/null +++ b/src/components/home/SideRankingList.jsx @@ -0,0 +1,27 @@ +import "styles/components/home/SideRankingList.scss"; + +const SideRankingList = ({ title, list, highlightRank }) => { + return ( +
+

{title}

+ +
+ {list.map((item) => ( +
+ {item.rank}. + {item.nickname} + + {item.exp}점 +
+ ))} +
+
+ ); +}; + +export default SideRankingList; From fede7e4d013aa776f0b2f3c705788805728ff16c Mon Sep 17 00:00:00 2001 From: Hwang gend Date: Tue, 18 Nov 2025 20:07:12 +0900 Subject: [PATCH 6/7] =?UTF-8?q?chore:=20=EB=8D=94=EB=AF=B8=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/Home.jsx | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/src/components/home/Home.jsx b/src/components/home/Home.jsx index ecf1a1e..fbe04f5 100644 --- a/src/components/home/Home.jsx +++ b/src/components/home/Home.jsx @@ -12,19 +12,8 @@ import { getUserInfoAPI } from "services/user/user"; import "styles/components/home/Home.scss"; import { getAuthToken } from "utils/token"; import { getUserInfo } from "utils/user"; -import { RankingPreview } from "./RankingPreview"; -const rankingData = [ - { username: "Player1", score: 1000 }, - { username: "Player2", score: 900 }, - { username: "Player3", score: 800 }, - { username: "Player4", score: 700 }, - { username: "Player5", score: 600 }, - { username: "Player6", score: 500 }, - { username: "Player7", score: 400 }, - { username: "Player8", score: 300 }, - { username: "Player9", score: 200 }, - { username: "Player10", score: 100 }, -]; +import { RankingPreview } from "components/home/RankingPreview.jsx"; + const Home = () => { const navigate = useNavigate(); const { isSignIn } = useOutletContext(); @@ -91,7 +80,7 @@ const Home = () => {
- +
From 32870ad7b0f0dd4bdef574ff74a6fe520ce453ce Mon Sep 17 00:00:00 2001 From: Hwang gend Date: Tue, 18 Nov 2025 20:07:41 +0900 Subject: [PATCH 7/7] =?UTF-8?q?feat:=20=EB=9E=AD=ED=82=B9=20=EB=AF=B8?= =?UTF-8?q?=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20api=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/RankingPreview.jsx | 36 +++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/src/components/home/RankingPreview.jsx b/src/components/home/RankingPreview.jsx index b894487..c7fcfd0 100644 --- a/src/components/home/RankingPreview.jsx +++ b/src/components/home/RankingPreview.jsx @@ -1,5 +1,33 @@ +import { useEffect, useState } from "react"; +import { getMyRankingAPI, getRankingListAPI } from "services/home/ranking"; import "styles/components/home/RankingPreview.scss"; -export const RankingPreview = ({ rankingData }) => { +export const RankingPreview = () => { + const [rankingData, setRankingData] = useState([]); + const [myScore, setMyScore] = useState(null); + + useEffect(() => { + const fetchRanking = async () => { + try { + // 🔹 내 랭킹 먼저 가져오기 + const myRes = await getMyRankingAPI(); + const me = myRes?.data || myRes; + + if (me) { + setMyScore(me.exp); + } + + // 🔹 전체 랭킹 가져오기 + const listRes = await getRankingListAPI(); + const list = listRes?.data || listRes || []; + setRankingData(list); + } catch (e) { + console.error("랭킹 프리뷰 조회 실패:", e); + } + }; + + fetchRanking(); + }, []); + console.log(rankingData); return (

랭킹

@@ -8,10 +36,10 @@ export const RankingPreview = ({ rankingData }) => { rankingData.slice(0, 4).map((item, index) => (
  • - {index + 1}. {item.username} + {item.rank}. {item.nickname}
    - {item.score} 점 + {item.exp} 점
    • )) ) : ( @@ -24,7 +52,7 @@ export const RankingPreview = ({ rankingData }) => {
    - 9ssssss 점 + {myScore ?? 0} 점