107 lines
4.0 KiB
TypeScript
107 lines
4.0 KiB
TypeScript
import Link from "next/link";
|
|
import { matchesByDate, matchPhase, type MatchPhase } from "@/lib/schedule";
|
|
import { getPredictions, getCrowd } from "@/lib/mockData";
|
|
import { dateHeading, timeOnly } from "@/lib/format";
|
|
import { type Lang, dict, teamShort, roundLabel as tRound } from "@/lib/i18n";
|
|
import type { Match } from "@/lib/types";
|
|
import TeamFlag from "./TeamFlag";
|
|
|
|
const STROKE = "#94FBE0"; // 일정 텍스트·선택 아웃라인 스트로크 컬러
|
|
|
|
const PHASE_CLS: Record<MatchPhase, string> = {
|
|
open: "border-[#94FBE0] text-[#94FBE0]",
|
|
scheduled: "border-[var(--line-d)] text-[var(--ink-muted)]",
|
|
locked: "border-[var(--line-d)] text-[var(--ink-muted)]",
|
|
finished: "border-white/15 text-white/55",
|
|
};
|
|
|
|
export default function ScheduleBoard({ lang = "ko" }: { lang?: Lang }) {
|
|
const t = dict(lang);
|
|
const groups = matchesByDate();
|
|
return (
|
|
<section className="mt-6">
|
|
<div className="mb-3 flex items-baseline gap-2.5">
|
|
<h2 className="shrink-0 text-[22px] font-extrabold">{t.schedTitle}</h2>
|
|
<span className="whitespace-nowrap text-[12px] text-white/55">
|
|
{t.schedGuide}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-5">
|
|
{groups.map((g) => (
|
|
<div key={g.date}>
|
|
<div className="mb-2 text-[13px] font-bold" style={{ color: STROKE }}>
|
|
{dateHeading(g.date, lang)}
|
|
</div>
|
|
<div className="flex flex-col gap-2.5">
|
|
{g.matches.map((m) => (
|
|
<MatchCard key={m.matchId} match={m} lang={lang} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function MatchCard({ match, lang }: { match: Match; lang: Lang }) {
|
|
const t = dict(lang);
|
|
const phase = matchPhase(match);
|
|
const preds = getPredictions(match, lang);
|
|
const crowd = getCrowd(match);
|
|
|
|
// AI 픽 갈림 요약
|
|
const tally = { a: 0, d: 0, b: 0 };
|
|
for (const p of preds) {
|
|
if (p.outcome === "TEAM_A_WIN") tally.a++;
|
|
else if (p.outcome === "DRAW") tally.d++;
|
|
else tally.b++;
|
|
}
|
|
const split: string[] = [];
|
|
if (tally.a) split.push(`${teamShort(match.teamA, lang)} ${tally.a}`);
|
|
if (tally.d) split.push(`${t.draw} ${tally.d}`);
|
|
if (tally.b) split.push(`${teamShort(match.teamB, lang)} ${tally.b}`);
|
|
|
|
const href = `/match/${match.matchId}${lang === "en" ? "?lang=en" : ""}`;
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className="block rounded-2xl border-2 border-[#94FBE0]/45 bg-[#171b21] p-4 transition active:scale-[0.99] hover:border-[#94FBE0]"
|
|
>
|
|
<div className="flex items-center justify-between text-[11px]">
|
|
<span className="font-mono font-bold text-white/70">
|
|
{timeOnly(match.kickoffKst)} <span className="text-white/40">KST</span> ·{" "}
|
|
{tRound(match.roundLabel, lang)}
|
|
</span>
|
|
<span className={`rounded-md border px-2 py-0.5 font-semibold ${PHASE_CLS[phase]}`}>
|
|
{t.phase[phase]}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="mt-3 grid grid-cols-[1fr_auto_1fr] items-center gap-2">
|
|
<div className="flex items-center gap-2">
|
|
<TeamFlag team={match.teamA} className="h-6 w-9 shrink-0" />
|
|
<span className="truncate text-[15px] font-extrabold">{teamShort(match.teamA, lang)}</span>
|
|
</div>
|
|
<span className="font-impact text-[18px] italic text-[#94FBE0]">VS</span>
|
|
<div className="flex items-center justify-end gap-2">
|
|
<span className="truncate text-right text-[15px] font-extrabold">{teamShort(match.teamB, lang)}</span>
|
|
<TeamFlag team={match.teamB} className="h-6 w-9 shrink-0" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-3 flex items-center justify-between text-[11px] font-bold text-[#F4F3FE]">
|
|
<span>
|
|
<span className="font-semibold text-white/55">{t.aiPicks}</span> {split.join(" · ")}
|
|
</span>
|
|
<span className="flex items-center gap-2">
|
|
<span>{t.joined(crowd.total.toLocaleString())}</span>
|
|
<span className="text-[#94FBE0]">→</span>
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|