chore: migrate recent-list to leaderboard

Author: hyochan

app/[lang]/(common)/Header/index.tsx

@@ -46,6 +46,13 @@ function DesktopNavMenus(
   const router = useRouter();
   const supabase = getSupabaseBrowserClient();
 
+  const normalizePath = (path: string): string => path.replace(/\/+$/, '');
+  const isActivePath = (path: string): boolean => {
+    const target = normalizePath(`/${lang}${path}`);
+    const current = normalizePath(pathname ?? '');
+    return current === target || current.startsWith(`${target}/`);
+  };
+
   return (
     <div
       className={clsx('flex-1 justify-between items-center', 'max-md:hidden')}
@@ -64,7 +71,7 @@ function DesktopNavMenus(
                 href={`${link.path}`}
                 className={clsx(
                   'text-body4 truncate',
-                  pathname?.includes(link.path) ? 'opacity-100' : 'opacity-30',
+                  isActivePath(link.path) ? 'opacity-100' : 'opacity-30',
                 )}
               >
                 <li
@@ -130,6 +137,13 @@ function MobileNavMenus(
 
   const [isNavCollapsed, setIsNavCollapsed] = useState(true);
 
+  const normalizePath = (path: string): string => path.replace(/\/+$/, '');
+  const isActivePath = (path: string): boolean => {
+    const target = normalizePath(`/${lang}${path}`);
+    const current = normalizePath(pathname ?? '');
+    return current === target || current.startsWith(`${target}/`);
+  };
+
   return (
     <div className={clsx('md:hidden flex-1', 'flex flex-row-reverse')}>
       <div className="cursor-pointer">
@@ -169,7 +183,7 @@ function MobileNavMenus(
                   'text-body4 truncate flex-1 h-10 px-8',
                   'flex items-center',
                   'hover:opacity-100',
-                  pathname?.includes(link.path) ? 'opacity-100' : 'opacity-30',
+                  isActivePath(link.path) ? 'opacity-100' : 'opacity-30',
                 )}
               >
                 <li
@@ -248,17 +262,17 @@ export default function Header(props: Props): ReactElement {
         },
         {
           name: t.recentList,
-          path: '/recent-list',
+          path: '/leaderboard',
         },
       ]
     : [
         {
           name: t.stats,
-          path: `/stats/`,
+          path: `/stats`,
         },
         {
           name: t.recentList,
-          path: '/recent-list',
+          path: '/leaderboard',
         },
       ];
 

app/[lang]/recent-list/GithubUserList.tsx app/[lang]/leaderboard/GithubUserList.tsxapp/[lang]/recent-list/GithubUserList.tsx renamed to app/[lang]/leaderboard/GithubUserList.tsx

@@ -84,28 +84,45 @@ export default function TopTierUsers({title}: Props): ReactElement {
             className={clsx(
               'shrink-0 flex flex-col items-center p-2 rounded-xl w-[80px]',
               'bg-gradient-to-br from-amber-500/10 to-orange-500/10 dark:from-amber-500/20 dark:to-orange-500/20',
-              'border border-amber-500/20 dark:border-amber-500/30',
-              'hover:scale-105 transition-transform duration-200',
+              'border border-border-light dark:border-border-dark',
+              'transition-transform duration-200',
+              'group',
+              'focus:outline-none focus:ring-0 focus-visible:ring-0 focus:ring-transparent',
             )}
           >
             <Image
               alt={user.login}
               src={user.avatarUrl}
               width={40}
               height={40}
-              className="rounded-full ring-2 ring-amber-500/50"
+              className={clsx(
+                'rounded-full ring-2 ring-amber-500/50',
+                'transition-transform duration-200 group-hover:scale-110',
+              )}
             />
             <Image
               alt={user.tierName}
               src={getTierSvg(user.tierName as Tier)}
               width={14}
               height={14}
-              className="-mt-2 relative z-10"
+              className="-mt-2 relative z-10 transition-transform duration-200 group-hover:scale-110"
             />
-            <span className="mt-1 text-[10px] font-medium text-basic truncate max-w-[70px]">
+            <span
+              className={clsx(
+                'mt-1 text-[10px] font-medium text-basic truncate max-w-[70px]',
+                'transition-transform duration-200 group-hover:scale-105',
+              )}
+            >
               {user.login}
             </span>
-            <span className="text-[9px] text-placeholder">{user.score}</span>
+            <span
+              className={clsx(
+                'text-[9px] text-placeholder',
+                'transition-transform duration-200 group-hover:scale-105',
+              )}
+            >
+              {user.score}
+            </span>
           </a>
         ))}
       </div>

app/[lang]/recent-list/TierRowItem.tsx app/[lang]/leaderboard/TierRowItem.tsxapp/[lang]/recent-list/TierRowItem.tsx renamed to app/[lang]/leaderboard/TierRowItem.tsx

@@ -29,6 +29,8 @@ function SectionHeader({t, stats, endDate}: SectionProps): ReactElement {
 
   // Reset loading when endDate changes (data loaded)
   useEffect(() => {
+    // Safe reset after data refresh
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setIsLoading(false);
   }, [endDate, stats]);
 

app/[lang]/recent-list/TopTierUsers.tsx app/[lang]/leaderboard/TopTierUsers.tsxapp/[lang]/recent-list/TopTierUsers.tsx renamed to app/[lang]/leaderboard/TopTierUsers.tsx

@@ -40,7 +40,6 @@ export default function StatsChart({
     return () => cancelAnimationFrame(rafId);
   }, []);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleLegendMouseEnter = useCallback((data: any) => {
     if (data?.dataKey) {
       setHoveredLine(String(data.dataKey));
@@ -51,7 +50,6 @@ export default function StatsChart({
     setHoveredLine(null);
   }, []);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleLegendClick = useCallback((data: any) => {
     if (data?.dataKey) {
       const key = data.dataKey as LineKey;

app/[lang]/recent-list/page.tsx app/[lang]/leaderboard/page.tsxapp/[lang]/recent-list/page.tsx renamed to app/[lang]/leaderboard/page.tsx

@@ -34,6 +34,8 @@ export default function SearchTextInput({
 
   // Reset loading state when navigation completes (props change)
   useEffect(() => {
+    // Safe reset after navigation completes
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setIsLoading(false);
   }, [initialValue]);
 

app/[lang]/stats/[login]/Scouter/StatsDetails/SectionDooboo.tsx

@@ -1,6 +1,6 @@
 {
   "nav": {
-    "recentList": "Recent List",
+    "recentList": "Leaderboard",
     "stats": "Stats",
     "certifiedUsers": "Certified Users",
     "signIn": "Sign in",
@@ -126,4 +126,4 @@
     "goHome": "Go Home",
     "tryAgain": "Try Again"
   }
-}
+}

app/[lang]/stats/[login]/Scouter/StatsDetails/StatsChart.tsx

@@ -1,6 +1,6 @@
 {
   "nav": {
-    "recentList": "최근 목록",
+    "recentList": "리더보드",
     "stats": "스탯",
     "certifiedUsers": "인증 목록",
     "signIn": "로그인",