From 996d5faaf42793ff8e4d5d462845ab9e01bdb8f3 Mon Sep 17 00:00:00 2001
From: Haewon Kam <haewonkam@Haewons-MacBook-Pro.local>
Date: Thu, 18 Jun 2026 16:47:57 +0900
Subject: [PATCH] Refine ranking placement, visibility, and consistency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move cumulative ranking above the gold ₩1M card (ranking → challenge flow)
- Drop redundant "전체 보기" link (inline folding shows full Top 10);
  /leaderboard route kept for direct access
- Make fold toggle purple + match its size to the tab buttons; enlarge
  title/tab/row text for readability
- Match email input & submit button radius to the ranking box (rounded-xl)
- Leaderboard full page: top button = "투표로 돌아가기" (history back, home fallback)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/leaderboard/page.tsx   |  6 +++---
 components/Arena.tsx       | 10 +++++-----
 components/BackButton.tsx  | 27 +++++++++++++++++++++++++++
 components/Hero.tsx        | 19 +++++++++++++------
 components/Leaderboard.tsx | 27 +++++++--------------------
 lib/i18n.ts                |  3 +++
 6 files changed, 58 insertions(+), 34 deletions(-)
 create mode 100644 components/BackButton.tsx

diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
index 713c439..744aca7 100644
--- a/app/leaderboard/page.tsx
+++ b/app/leaderboard/page.tsx
@@ -20,12 +20,12 @@ export default async function LeaderboardPage({
 
   return (
     <main className="shell">
-      <Hero back />
+      <Hero back backHistory />
       <p className="mt-6 text-center text-[13px] leading-relaxed text-[var(--ink-muted)]">
         {t.goldDesc}
       </p>
-      {/* 전체 페이지: 펼친 상태(폴딩 토글·전체보기 링크 숨김) */}
-      <Leaderboard lang={lang} defaultOpen showAllLink={false} />
+      {/* 전체 페이지: 펼친 상태(폴딩 토글 숨김) */}
+      <Leaderboard lang={lang} defaultOpen />
       <Footer />
     </main>
   );
diff --git a/components/Arena.tsx b/components/Arena.tsx
index 87f696c..99bf4d0 100644
--- a/components/Arena.tsx
+++ b/components/Arena.tsx
@@ -340,7 +340,7 @@ export default function Arena({
             value={email}
             onChange={(e) => onEmailChange(e.target.value)}
             placeholder={t.emailPh}
-            className="w-full rounded-2xl border border-[var(--share)] bg-[#0f1217] px-4 py-3 text-[16px] text-white shadow-[0_0_0_2px_rgba(166,94,255,0.12)] outline-none focus:shadow-[0_0_0_2px_rgba(166,94,255,0.3)]"
+            className="w-full rounded-xl border border-[var(--share)] bg-[#0f1217] px-4 py-3 text-[16px] text-white shadow-[0_0_0_2px_rgba(166,94,255,0.12)] outline-none focus:shadow-[0_0_0_2px_rgba(166,94,255,0.3)]"
           />
           <label className="mt-2.5 flex items-start gap-2 text-[13px] leading-snug text-[var(--ink-muted)]">
             <input
@@ -354,7 +354,7 @@ export default function Arena({
           <button
             onClick={confirmSubmit}
             disabled={!emailValid}
-            className="btn-share mt-3.5 flex w-full items-center justify-center gap-1.5 rounded-2xl py-3 text-[15px] font-extrabold transition active:scale-[0.99] disabled:opacity-[0.72]"
+            className="btn-share mt-3.5 flex w-full items-center justify-center gap-1.5 rounded-xl py-3 text-[15px] font-extrabold transition active:scale-[0.99] disabled:opacity-[0.72]"
           >
             {t.submit} <span aria-hidden>→</span>
           </button>
@@ -459,6 +459,9 @@ export default function Arena({
         </section>
       )}
 
+      {/* ===== 누적 랭킹 TOP 10 (골드 카드 위 · 폴딩) — 랭킹→상금 도전 흐름 ===== */}
+      <Leaderboard lang={lang} />
+
       {/* ===== 골드 상금 (003) ===== */}
       <section className="gold-card mt-5 rounded-2xl p-5">
         <div className="flex items-center justify-between gap-3">
@@ -477,9 +480,6 @@ export default function Arena({
         </div>
       </section>
 
-      {/* ===== 누적 랭킹 TOP 10 (골드 카드 직후 · 폴딩) ===== */}
-      <Leaderboard lang={lang} />
-
       {/* ===== Crowd Pick (003) — 보팅 비율(≠ AI 승리 확률) ===== */}
       <section className="mt-6">
         <div className="mb-2.5 text-[20px] font-extrabold">
diff --git a/components/BackButton.tsx b/components/BackButton.tsx
new file mode 100644
index 0000000..3e65568
--- /dev/null
+++ b/components/BackButton.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+// 뒤로가기 — 직전 페이지(예: 투표하던 매치 페이지)로 복귀.
+// 히스토리가 없으면(직접 진입) 홈으로 폴백.
+export default function BackButton({
+  label,
+  home,
+}: {
+  label: string;
+  home: string;
+}) {
+  const router = useRouter();
+  const goBack = () => {
+    if (typeof window !== "undefined" && window.history.length > 1) router.back();
+    else router.push(home);
+  };
+  return (
+    <button
+      onClick={goBack}
+      className="flex items-center gap-1.5 rounded-full border border-white/12 bg-white/8 px-[18px] py-[9px] text-[18px] font-bold text-white/85 active:scale-95"
+    >
+      {label}
+    </button>
+  );
+}
diff --git a/components/Hero.tsx b/components/Hero.tsx
index 0380bb3..54fef0d 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link";
 import ShareButton from "./ShareButton";
 import LangSwitch from "./LangSwitch";
+import BackButton from "./BackButton";
 import { type Lang, dict } from "@/lib/i18n";
 
 type Share = { url: string; title: string; text: string };
@@ -8,10 +9,12 @@ type Share = { url: string; title: string; text: string };
 // 브랜드 헤더 (대시보드·상세 공용). 경기별 후킹 카피는 상세 페이지에서 별도 노출.
 export default function Hero({
   back = false,
+  backHistory = false,
   share,
   lang = "ko",
 }: {
   back?: boolean;
+  backHistory?: boolean; // true면 홈 대신 직전 페이지로 복귀(뒤로가기)
   share?: Share;
   lang?: Lang;
 }) {
@@ -21,12 +24,16 @@ export default function Hero({
     <header className="pt-5 text-center">
       {back && (
         <div className="mb-3 flex items-center justify-between">
-          <Link
-            href={home}
-            className="flex items-center gap-1.5 rounded-full border border-white/12 bg-white/8 px-[18px] py-[9px] text-[18px] font-bold text-white/85 active:scale-95"
-          >
-            {t.back}
-          </Link>
+          {backHistory ? (
+            <BackButton label={t.backPrev} home={home} />
+          ) : (
+            <Link
+              href={home}
+              className="flex items-center gap-1.5 rounded-full border border-white/12 bg-white/8 px-[18px] py-[9px] text-[18px] font-bold text-white/85 active:scale-95"
+            >
+              {t.back}
+            </Link>
+          )}
           {share && (
             <ShareButton {...share} label={t.share} copiedLabel={t.shareCopied} />
           )}
diff --git a/components/Leaderboard.tsx b/components/Leaderboard.tsx
index f53d578..135e0d0 100644
--- a/components/Leaderboard.tsx
+++ b/components/Leaderboard.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import Link from "next/link";
 import { type Lang, dict } from "@/lib/i18n";
 import {
   fetchLeaderboard,
@@ -14,11 +13,9 @@ import {
 export default function Leaderboard({
   lang = "ko",
   defaultOpen = false,
-  showAllLink = true,
 }: {
   lang?: Lang;
   defaultOpen?: boolean;
-  showAllLink?: boolean;
 }) {
   const t = dict(lang);
   const [open, setOpen] = useState(defaultOpen);
@@ -37,17 +34,7 @@ export default function Leaderboard({
 
   return (
     <section className="mt-5 rounded-2xl border border-[var(--line-d)] bg-[var(--bg2)] p-4">
-      <div className="flex items-center justify-between gap-2">
-        <h3 className="text-[16px] font-extrabold">{t.lbTitle}</h3>
-        {showAllLink && (
-          <Link
-            href={lang === "en" ? "/leaderboard?lang=en" : "/leaderboard"}
-            className="shrink-0 text-[12px] font-bold text-[var(--share)]"
-          >
-            {t.lbAll} →
-          </Link>
-        )}
-      </div>
+      <h3 className="text-[19px] font-extrabold">{t.lbTitle}</h3>
 
       {open && (
         <>
@@ -62,7 +49,7 @@ export default function Leaderboard({
               <button
                 key={val}
                 onClick={() => setTab(val)}
-                className={`rounded-xl py-2.5 text-[14px] font-extrabold transition ${
+                className={`rounded-xl py-2.5 text-[15px] font-extrabold transition ${
                   tab === val
                     ? "bg-[var(--share)] text-white"
                     : "border border-[var(--line-d)] text-[var(--ink-muted)]"
@@ -74,7 +61,7 @@ export default function Leaderboard({
           </div>
 
           {/* 헤더 라벨 */}
-          <div className="mt-3 flex items-center justify-between px-3 text-[11px] font-bold text-[var(--ink-muted)]">
+          <div className="mt-3 flex items-center justify-between px-3 text-[12px] font-bold text-[var(--ink-muted)]">
             <span>{tab === "ai" ? t.lbTabAI : t.lbTabVoters}</span>
             <span>{t.lbPoints}</span>
           </div>
@@ -93,16 +80,16 @@ export default function Leaderboard({
                   }`}
                 >
                   <span
-                    className={`w-6 shrink-0 text-center font-mono text-[15px] font-extrabold tabular-nums ${
+                    className={`w-6 shrink-0 text-center font-mono text-[16px] font-extrabold tabular-nums ${
                       top3 ? "text-[var(--share)]" : "text-[var(--ink-muted)]"
                     }`}
                   >
                     {i + 1}
                   </span>
-                  <span className="min-w-0 flex-1 truncate text-[15px] font-bold text-white">
+                  <span className="min-w-0 flex-1 truncate text-[16px] font-bold text-white">
                     {r.label}
                   </span>
-                  <span className="shrink-0 font-mono text-[15px] font-extrabold tabular-nums text-white">
+                  <span className="shrink-0 font-mono text-[16px] font-extrabold tabular-nums text-white">
                     {r.points.toLocaleString()}
                     <span className="ml-0.5 text-[12px] text-[var(--ink-muted)]">
                       {t.lbUnit}
@@ -119,7 +106,7 @@ export default function Leaderboard({
       {!defaultOpen && (
         <button
           onClick={() => setOpen((v) => !v)}
-          className="mt-3 flex w-full items-center justify-center gap-1 rounded-xl border border-[var(--line-d)] py-2.5 text-[13px] font-bold text-[var(--ink-muted)] transition active:scale-[0.99]"
+          className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-xl border border-[var(--share)] bg-[rgba(166,94,255,0.12)] py-2.5 text-[15px] font-extrabold text-[var(--share)] transition active:scale-[0.99]"
         >
           {open ? t.lbClose : t.lbOpen}
           <span aria-hidden>{open ? "▲" : "▼"}</span>
diff --git a/lib/i18n.ts b/lib/i18n.ts
index c478ad2..2f8bbdb 100644
--- a/lib/i18n.ts
+++ b/lib/i18n.ts
@@ -40,6 +40,7 @@ export function roundLabel(label: string, lang: Lang): string {
 type Dict = {
   heroPill: string;
   back: string;
+  backPrev: string;
   share: string;
   shareCopied: string;
   introLead: string;
@@ -113,6 +114,7 @@ export const DICT: Record<Lang, Dict> = {
   ko: {
     heroPill: "AI와 함께하는 2026 글로벌 축구 축전 승부예측 챌린지",
     back: "← 전체 일정",
+    backPrev: "← 투표로 돌아가기",
     share: "투표 공유하기",
     shareCopied: "링크 복사됨 ✓",
     introLead: "GPT · Claude · Gemini가 매 경기를\n서로 다르게 예측합니다.",
@@ -186,6 +188,7 @@ export const DICT: Record<Lang, Dict> = {
   en: {
     heroPill: "AI-powered Global Football Festival 2026 match predictions",
     back: "← All matches",
+    backPrev: "← Back to voting",
     share: "Share vote",
     shareCopied: "Link copied ✓",
     introLead: "GPT · Claude · Gemini predict\nevery match differently.",