58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useRef } from "react";
|
|
|
|
interface ScoreSummaryProps {
|
|
correctCount: number;
|
|
totalCount: number;
|
|
onRestart: () => void;
|
|
}
|
|
|
|
export default function ScoreSummary({
|
|
correctCount,
|
|
totalCount,
|
|
onRestart,
|
|
}: ScoreSummaryProps) {
|
|
const restartButtonRef = useRef<HTMLButtonElement>(null);
|
|
|
|
useEffect(() => {
|
|
restartButtonRef.current?.focus();
|
|
}, []);
|
|
|
|
return (
|
|
<main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
|
|
<section className="mx-auto flex w-full max-w-3xl flex-col gap-8">
|
|
<div className="space-y-3">
|
|
<p className="text-sm font-semibold text-emerald-700">
|
|
괄호 음수 분배
|
|
</p>
|
|
<h1 className="text-4xl font-bold tracking-normal sm:text-5xl">
|
|
풀이 결과
|
|
</h1>
|
|
<p className="text-xl font-semibold text-slate-800">
|
|
{correctCount} / {totalCount} 정답
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-3">
|
|
<button
|
|
ref={restartButtonRef}
|
|
type="button"
|
|
onClick={onRestart}
|
|
className="inline-flex h-12 items-center justify-center rounded-md bg-emerald-700 px-6 text-base font-semibold text-white transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
|
|
>
|
|
다시 시작
|
|
</button>
|
|
<Link
|
|
href="/"
|
|
className="inline-flex h-12 items-center justify-center rounded-md border border-slate-300 px-6 text-base font-semibold text-slate-800 transition hover:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
|
|
>
|
|
처음으로
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|