diff --git a/src/api/client/getRanking.ts b/src/api/client/getRanking.ts index ab56139..45be59e 100644 --- a/src/api/client/getRanking.ts +++ b/src/api/client/getRanking.ts @@ -16,10 +16,12 @@ export interface RankingRow { baekjoonId: string; team: string; diff: number; + newUser: boolean; } export interface RankingPage { hasNext: boolean; + updateTime: string; rows: RankingRow[]; } diff --git a/src/assets/images/grass.png b/src/assets/images/grass.png new file mode 100644 index 0000000..b2f24f9 Binary files /dev/null and b/src/assets/images/grass.png differ diff --git a/src/assets/images/new1.png b/src/assets/images/new1.png new file mode 100644 index 0000000..d8760d9 Binary files /dev/null and b/src/assets/images/new1.png differ diff --git a/src/assets/images/new3.png b/src/assets/images/new3.png new file mode 100644 index 0000000..5f1eeca Binary files /dev/null and b/src/assets/images/new3.png differ diff --git a/src/assets/images/new444.png b/src/assets/images/new444.png new file mode 100644 index 0000000..a417a78 Binary files /dev/null and b/src/assets/images/new444.png differ diff --git a/src/components/ranking/RankingRow.tsx b/src/components/ranking/RankingRow.tsx index 58bdc86..287cedd 100644 --- a/src/components/ranking/RankingRow.tsx +++ b/src/components/ranking/RankingRow.tsx @@ -1,5 +1,6 @@ import { getTierImageUrl } from "../../constants/tierMap"; import { getTeamLabel, type TeamName } from "@/types/team"; +import newPng from "@/assets/images/new444.png"; /** * author : 박준희 @@ -14,6 +15,7 @@ export interface RankingRowData { baekjoonId: string; team: TeamName; diff: number; + newUser: boolean; } interface RankingRowProps { @@ -22,12 +24,26 @@ interface RankingRowProps { const RankingRow = ({ row }: RankingRowProps) => { return ( -
- - -
{row.rank}등
+
+
+ {row.newUser && ( + new + )} + {row.rank}등 +
-
+
{row.name}
diff --git a/src/components/ranking/RankingUpdateTime.tsx b/src/components/ranking/RankingUpdateTime.tsx new file mode 100644 index 0000000..a44be3c --- /dev/null +++ b/src/components/ranking/RankingUpdateTime.tsx @@ -0,0 +1,31 @@ +/** + * author : 박준희 + */ +type Props = { + updateTime?: string | null; // "2025-12-24T19:00:00" +}; + +const formatUpdateTime = (value: string) => { + const date = new Date(value); + if (isNaN(date.getTime())) { + return `${value} KST 기준`; + } + + const yyyy = date.getFullYear(); + const mm = date.getMonth() + 1; + const dd = date.getDate(); + const hh = String(date.getHours()).padStart(2, '0'); + const mi = String(date.getMinutes()).padStart(2, '0'); + + return `${yyyy}년 ${mm}월 ${dd}일 ${hh}:${mi} KST 기준`; +}; + +export default function RankingUpdateTime({ updateTime }: Props) { + if (!updateTime) return null; + + return ( +
+ {formatUpdateTime(updateTime)} +
+ ); +} diff --git a/src/pages/RankingPage.tsx b/src/pages/RankingPage.tsx index b492e6d..c7eb727 100644 --- a/src/pages/RankingPage.tsx +++ b/src/pages/RankingPage.tsx @@ -6,6 +6,7 @@ import RankingDateDisplay from "../components/ranking/RankingDateDisplay"; import RankingGroupSelector from "../components/ranking/RankingGroupSelector"; import Calendar from "../components/common/Calendar"; import RankingHeader from "../components/ranking/RankingHeader"; +import RankingUpdateTime from "../components/ranking/RankingUpdateTime"; import { useFetch } from "../hooks/useFetch"; import { getRanking, type RankingPage as RankingPageType } from "../api/client/getRanking"; @@ -27,6 +28,7 @@ export default function RankingPage() { const [page, setPage] = useState(1); const [rows, setRows] = useState([]); const [hasMore, setHasMore] = useState(true); + const [updateTime, setUpdateTime] = useState(""); const loaderRef = useRef(null); const SIZE = 20; @@ -85,6 +87,7 @@ export default function RankingPage() { if (!data) return; setHasMore(data.hasNext); + setUpdateTime(data.updateTime); const mapped: RankingRowData[] = data.rows.map((row) => ({ ...row, @@ -141,7 +144,11 @@ export default function RankingPage() {
- +
+ + +
+