o2o-triple-pick/frontend/src/pages/Dashboard.tsx

60 lines
1.9 KiB
TypeScript

import { useEffect, useState } from "react";
import Hero from "@/components/Hero";
import ScheduleBoard from "@/components/ScheduleBoard";
import Ado2Ad from "@/components/Ado2Ad";
import Footer from "@/components/Footer";
import { dict } from "@/lib/i18n";
import { useLang } from "@/lib/useLang";
import { useLeague } from "@/lib/useLeague";
import { listMatches } from "@/lib/api";
import type { Match } from "@/lib/types";
// L1. 전체 일정 대시보드 (랜딩 진입) — 리그 탭(월드컵/KBO/MLB)별 경기 목록
export default function Dashboard() {
const lang = useLang();
const [league] = useLeague();
const t = dict(lang);
const [matches, setMatches] = useState<Match[] | null>(null);
const [error, setError] = useState(false);
useEffect(() => {
let alive = true;
setMatches(null);
setError(false);
listMatches(lang, league)
.then((m) => alive && setMatches(m))
.catch(() => alive && setError(true));
return () => {
alive = false;
};
}, [lang, league]);
return (
<main className="shell">
<Hero lang={lang} league={league} />
{/* 기간 안내 + CTA 영역 */}
<div className="mt-5 rounded-2xl border border-[var(--line-d)] bg-[var(--bg2)] p-4 text-center">
<p className="whitespace-pre-line text-[14px] font-bold leading-snug">
{t.introLead}
</p>
<p className="mt-1 text-[14px] font-bold leading-snug text-[var(--green)]">
{t.prizeLine1}
<br />
<span className="whitespace-nowrap">{t.prizeLine2}</span>
</p>
</div>
{error && (
<p className="mt-6 text-center text-[13px] text-white/55">
{lang === "en" ? "Failed to load matches." : "경기 정보를 불러오지 못했습니다."}
</p>
)}
{matches && <ScheduleBoard matches={matches} lang={lang} league={league} />}
<Ado2Ad lang={lang} />
<Footer lang={lang} league={league} />
</main>
);
}