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๋“ฑ์ž…๋‹ˆ๋‹ค!

) : (