리팩토링: 코드 최적화

2026-05-25 18:42:13 +09:00
parent 5ee33bf0d3
commit d56cada1ec
11 changed files with 215 additions and 175 deletions
@@ -0,0 +1,49 @@
+"use client";
+
+import Link from "next/link";
+
+interface ScoreSummaryProps {
+  correctCount: number;
+  totalCount: number;
+  onRestart: () => void;
+}
+
+export default function ScoreSummary({
+  correctCount,
+  totalCount,
+  onRestart,
+}: ScoreSummaryProps) {
+  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
+            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>
+  );
+}