feat: stats and leaderboard renewal

CLAUDE.md

@@ -0,0 +1,98 @@
+# Claude Code Guidelines
+
+## Development Commands
+
+```bash
+# Development
+bun run dev          # Start development server
+
+# Build & Lint
+bun run build        # Production build
+bun run lint         # Run ESLint
+```
+
+## Project Structure
+
+- `/app` - Next.js App Router pages and components
+- `/server` - Server-side services and plugins
+- `/src` - Shared utilities, hooks, and localization
+- `/public` - Static assets
+
+## Styling Guidelines
+
+### Tailwind Color System
+
+This project uses a custom color palette defined in `tailwind.config.js`. **Always use Tailwind classes instead of hardcoded colors**.
+
+#### Text Colors
+```tsx
+// Main text - use for primary content
+className="text-black dark:text-white"
+
+// Placeholder/secondary text
+className="text-placeholder-light dark:text-placeholder-dark"
+
+// Link text
+className="text-link-light dark:text-link-dark"
+```
+
+#### Background Colors
+```tsx
+// Paper/card backgrounds
+className="bg-paper-light dark:bg-paper-dark"
+
+// Modal backgrounds
+className="bg-modal-light dark:bg-modal-dark"
+
+// Gray backgrounds (1=lightest, 9=darkest)
+className="bg-gray1 dark:bg-gray8"
+className="hover:bg-gray2 dark:hover:bg-gray7"
+```
+
+#### Border Colors
+```tsx
+className="border-border-light dark:border-border-dark"
+```
+
+#### Brand/Accent Colors
+```tsx
+// Primary brand color (blue) - use for primary actions and highlights
+className="bg-brand"  // #4190EB
+
+// Primary buttons
+className="bg-btn-primary-light dark:bg-btn-primary-dark"
+className="text-btn-primary-text-light dark:text-btn-primary-text-dark"
+
+// Status colors
+className="text-success-light dark:text-success-dark"
+className="text-danger-light dark:text-danger-dark"
+className="text-warning-light dark:text-warning-dark"
+```
+
+### Typography
+Use predefined font sizes:
+- `text-h1` through `text-h4` for headings
+- `text-body1` through `text-body4` for body text
+
+### Common Patterns
+
+#### Dark Mode Support
+Always provide both light and dark variants:
+```tsx
+// Correct
+className="bg-paper-light dark:bg-paper-dark text-black dark:text-white"
+
+// Incorrect - hardcoded colors
+style={{ backgroundColor: '#1a1a1a', color: '#ffffff' }}
+```
+
+#### Hover States
+```tsx
+className="hover:bg-gray1 dark:hover:bg-gray8"
+```
+
+## Component Guidelines
+
+- Use `clsx` for conditional class names
+- Prefer Tailwind classes over inline styles
+- Support both light and dark modes for all UI components

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

@@ -21,6 +21,16 @@ import Button from '../Button';
 import SwitchToggle from './SwitchToggle';
 
 const inter = Inter({subsets: ['latin']});
+const normalizePath = (path: string): string => path.replace(/\/+$/, '');
+const isActivePath = (
+  pathname: string | null,
+  lang: string,
+  path: string,
+): boolean => {
+  const target = normalizePath(`/${lang}${path}`);
+  const current = normalizePath(pathname ?? '');
+  return current === target || current.startsWith(`${target}/`);
+};
 
 export type NavLink = {
   name: string;
@@ -64,7 +74,9 @@ function DesktopNavMenus(
                 href={`${link.path}`}
                 className={clsx(
                   'text-body4 truncate',
-                  pathname?.includes(link.path) ? 'opacity-100' : 'opacity-30',
+                  isActivePath(pathname, lang, link.path)
+                    ? 'opacity-100'
+                    : 'opacity-30',
                 )}
               >
                 <li
@@ -169,7 +181,9 @@ 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(pathname, lang, link.path)
+                    ? 'opacity-100'
+                    : 'opacity-30',
                 )}
               >
                 <li
@@ -247,18 +261,18 @@ export default function Header(props: Props): ReactElement {
           path: `/stats/${login}`,
         },
         {
-          name: t.recentList,
-          path: '/recent-list',
+          name: t.leaderboards,
+          path: '/leaderboards',
         },
       ]
     : [
         {
           name: t.stats,
-          path: `/stats/`,
+          path: `/stats`,
         },
         {
-          name: t.recentList,
-          path: '/recent-list',
+          name: t.leaderboards,
+          path: '/leaderboards',
         },
       ];
 
@@ -308,13 +322,15 @@ export default function Header(props: Props): ReactElement {
         'h-[56px] decoration-0 bg-basic sticky',
         'flex flex-row items-center justify-between',
         'px-[28px]',
+        'w-full min-w-0',
       )}
     >
       <div
         className={clsx(
           'flex-1 h-14',
           'flex flex-row items-center',
           'justify-between',
+          'min-w-0',
         )}
       >
         <div

app/[lang]/(home)/SectionFooter.tsx

@@ -82,7 +82,7 @@ export default function SectionFooter({t}: Props): ReactElement {
           />
           <p className={clsx('text-white text-[12px] align-center opacity-50')}>
             designed by &nbsp;
-            <a href="https://hyo.dev">hyochan</a>
+            <a href="https://github.com/hyochan">hyochan</a>
           </p>
         </div>
       </div>

app/[lang]/layout.tsx

@@ -30,9 +30,10 @@ export default async function LangLayout(props: Props): Promise<ReactElement> {
         className={clsx(
           'text-center flex-1 self-stretch relative',
           'flex flex-col-reverse',
+          'min-w-0 overflow-x-hidden',
         )}
       >
-        <div className={clsx('h-[calc(100vh-56px)]', 'flex')}>
+        <div className={clsx('h-[calc(100vh-56px)]', 'flex w-full min-w-0')}>
           {children}
         </div>
         <Header