67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { notFound } from "next/navigation";
|
|
import Hero from "@/components/Hero";
|
|
import MatchupHUD from "@/components/MatchupHUD";
|
|
import Arena from "@/components/Arena";
|
|
import Footer from "@/components/Footer";
|
|
import { GROUP_A } from "@/lib/schedule";
|
|
import { getPredictions, getCrowd, matchUrl } from "@/lib/mockData";
|
|
|
|
// L2. 경기 상세(대결) 페이지 — 6경기 정적 생성
|
|
export function generateStaticParams() {
|
|
return GROUP_A.map((m) => ({ matchId: m.matchId }));
|
|
}
|
|
|
|
export async function generateMetadata({
|
|
params,
|
|
}: {
|
|
params: Promise<{ matchId: string }>;
|
|
}): Promise<Metadata> {
|
|
const { matchId } = await params;
|
|
const match = GROUP_A.find((m) => m.matchId === matchId);
|
|
if (!match) return { title: "TriplePick 2026" };
|
|
const title = `${match.teamA.shortName} vs ${match.teamB.shortName} AI 승부예측 | TriplePick`;
|
|
const desc = `GPT·Claude·Gemini가 ${match.teamA.name} vs ${match.teamB.name}를 서로 다르게 예측했습니다. 당신의 픽을 찍고 AI와 겨뤄보세요.`;
|
|
return {
|
|
title,
|
|
description: desc,
|
|
openGraph: { title, description: desc, siteName: "TriplePick", type: "website", locale: "ko_KR" },
|
|
twitter: { card: "summary_large_image", title, description: desc },
|
|
};
|
|
}
|
|
|
|
export default async function MatchPage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ matchId: string }>;
|
|
}) {
|
|
const { matchId } = await params;
|
|
const match = GROUP_A.find((m) => m.matchId === matchId);
|
|
if (!match) notFound();
|
|
|
|
const predictions = getPredictions(match);
|
|
const crowd = getCrowd(match);
|
|
|
|
return (
|
|
<main className="shell">
|
|
<Hero back />
|
|
|
|
{/* 경기별 후킹 카피 (한 줄) */}
|
|
<h1 className="mt-6 flex items-center justify-center gap-2 whitespace-nowrap text-[19px] font-extrabold leading-snug">
|
|
<span className="text-[var(--green)]">⫽</span>
|
|
{match.hookText}
|
|
<span className="text-[var(--green)]">⫽</span>
|
|
</h1>
|
|
|
|
<MatchupHUD match={match} />
|
|
<Arena
|
|
match={match}
|
|
predictions={predictions}
|
|
crowd={crowd}
|
|
shareUrl={matchUrl(match.matchId)}
|
|
/>
|
|
<Footer />
|
|
</main>
|
|
);
|
|
}
|