diff --git a/src/components/home/RankingPreview.jsx b/src/components/home/RankingPreview.jsx
index c7fcfd0..6be3eb5 100644
--- a/src/components/home/RankingPreview.jsx
+++ b/src/components/home/RankingPreview.jsx
@@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
-import { getMyRankingAPI, getRankingListAPI } from "services/home/ranking";
+import { getRankingListAPI } from "services/home/ranking";
import "styles/components/home/RankingPreview.scss";
+import { getAuthToken } from "utils/token";
export const RankingPreview = () => {
const [rankingData, setRankingData] = useState([]);
const [myScore, setMyScore] = useState(null);
@@ -8,18 +9,25 @@ export const RankingPreview = () => {
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);
+
+ // ์ก์ธ์ค ํ ํฐ์ด ์์ ๋๋ง ๋ด ๋ญํน ์กฐํ
+ const { accessToken } = getAuthToken();
+
+ if (accessToken) {
+ const myRes = 0;
+ const me = myRes?.data || myRes;
+
+ if (me) {
+ setMyScore(me.exp);
+ }
+ } else {
+ // ํ ํฐ ์์ผ๋ฉด '-' ์ ์ง
+ setMyScore("-");
+ }
} catch (e) {
console.error("๋ญํน ํ๋ฆฌ๋ทฐ ์กฐํ ์คํจ:", e);
}
@@ -27,7 +35,7 @@ export const RankingPreview = () => {
fetchRanking();
}, []);
- console.log(rankingData);
+
return (
๋ญํน
diff --git a/src/pages/home/RankingPage.jsx b/src/pages/home/RankingPage.jsx
index 81b4aa8..18c4f27 100644
--- a/src/pages/home/RankingPage.jsx
+++ b/src/pages/home/RankingPage.jsx
@@ -1,34 +1,42 @@
import SideRankingList from "components/home/SideRankingList";
import { useEffect, useState } from "react";
import { getMyRankingAPI, getRankingListAPI } from "services/home/ranking";
+import { getAuthToken } from "utils/token"; // ๐น ํ ํฐ ๊ฐ์ ธ์ค๋ ํจ์
import "styles/pages/home/RankingPage.scss";
const RankingPage = () => {
const [rankingList, setRankingList] = useState([]);
- const [myRank, setMyRank] = useState(null);
- const [myScore, setMyScore] = useState(null);
+ const [myRank, setMyRank] = useState("-");
+ const [myScore, setMyScore] = useState("-");
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๋ช
๊น์ง)
+ // ์ ์ฒด ๋ญํน ์กฐํ (์์ 7๋ช
)
const fullRes = await getRankingListAPI();
const list = fullRes?.data || fullRes || [];
setRankingList(list);
setTopList(list.slice(0, 7));
+ // ์ก์ธ์ค ํ ํฐ์ด ์์ผ๋ฉด ์ฌ๊ธฐ์ ์ข
๋ฃ โ "-" ์ ์ง
+ const { accessToken } = getAuthToken();
+ if (!accessToken) {
+ setNearList([]); // ๊ทผ์ฒ ๋ญํน ์์
+ return;
+ }
+
+ // ๋ด ๋ญํน ์กฐํ
+ const myRes = await getMyRankingAPI();
+ const me = myRes?.data || myRes;
+
+ if (!me) return;
+
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);
@@ -41,39 +49,48 @@ const RankingPage = () => {
fetchRanking();
}, []);
- // ๋ฐ๋ก ์ ๋ฑ์์์ ์ ์ ์ฐจ์ด
+ // ๋ฐ๋ก ์ ๋ฑ์์์ ์ ์ ์ฐจ์ด (1๋ฑ์ด๊ฑฐ๋ ํ ํฐ ์์ ๋๋ ๋ด ์ ๋ณด ์์ผ๋ฉด 0)
const diffScore =
- myRank > 1 && rankingList.length >= myRank - 1
+ typeof myRank === "number" && myRank > 1 && rankingList.length >= myRank - 1
? rankingList[myRank - 2].exp - myScore
: 0;
return (
+ {/* ์์ ๋ญํน */}
+ {/* ๋ด ๋ญํน ์์ญ */}
๋ด ๋ฑ์
- {myRank ?? "-"}
+ {myRank}
๋ฑ
๋ด ์ ์
- {myScore ?? 0} ์
+
+ {myScore === "-" ? "-" : `${myScore} ์ `}
+
+ {/* ๋ด ๊ทผ์ฒ ๋ญํน (- ์ผ ๋๋ ์๋ ์ฒ๋ฆฌ๋จ) */}
+
+ {/* ํ๋จ ๋ฐฐ๋ */}
- {myRank === 1 ? (
+ {myRank === "-" ? (
+
๊ฐ์ธ ๋ญํน ์ ๋ณด๊ฐ ์์ด์!
+ ) : myRank === 1 ? (
ํ์ฌ 1๋ฑ์
๋๋ค!
) : (