feat: 신규 유저, 업데이트 시간 시각화

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[];
 }
 

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 (
-<div className="grid grid-cols-7 items-center py-4 border-b border-gray-200 text-sm">
-
-
-  <div className="text-center">{row.rank}등</div>
+<div 
+  className={[
+    "relative grid grid-cols-7 items-center py-4 border-b text-sm",
+    row.newUser
+      ? "border-green-100 bg-gradient-to-r from-green-100/80 to-transparent"
+      : "border-blue-200",
+  ].join(" ")}
+>
+<div className="relative text-center">
+  {row.newUser && (
+    <img
+      src={newPng}
+      alt="new"
+      className="absolute left-3 top-1/2 -translate-y-1/2 w-6 h-6 object-contain"
+    />
+  )}
+  <span className="tabular-nums">{row.rank}등</span>
+</div>
 
-  <div className="flex items-center gap-2 pl-3">
+  <div className="flex items-center gap-2">
     <img src={getTierImageUrl(row.tier)} className="w-5 h-5" />
     <span>{row.name}</span>
   </div>

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 (
+    <div className="flex justify-center items-center mb-2">
+      <span className="text-xs text-gray-500">{formatUpdateTime(updateTime)}</span>
+    </div>
+  );
+}

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<RankingRowData[]>([]);
   const [hasMore, setHasMore] = useState(true);
+  const [updateTime, setUpdateTime] = useState<string>(""); 
 
   const loaderRef = useRef<HTMLDivElement | null>(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() {
           </div>
 
           <div className="flex items-center justify-between mb-6">
-            <RankingPeriodSelector value={period} onChange={handlePeriodChange} />
+            <div className="flex items-end gap-3">
+             <RankingPeriodSelector value={period} onChange={handlePeriodChange} />
+             <RankingUpdateTime updateTime={updateTime} />
+            </div>
+
             <RankingGroupSelector value={group} onChange={handleGroupChange} />
           </div>
         </div>