feat: 세션, 세션 종료화면 생성

2026-02-01 20:31:09 +09:00
parent b9b7a07da3
commit 22f318a219
6 changed files with 567 additions and 102 deletions
--- a/src/app/session/end/page.tsx
+++ b/src/app/session/end/page.tsx
@@ -0,0 +1,93 @@
+// app/session/end/page.tsx
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useMemo } from "react";
+
+type Mode = "freeflow" | "sprint" | "deepwork";
+
+const BG = "#E9EEF6";
+const BORDER = "#C9D7F5";
+const PRIMARY = "#2F6FED";
+const PRIMARY_HOVER = "#295FD1";
+
+function clampMode(v: string | null): Mode {
+  if (v === "sprint" || v === "deepwork" || v === "freeflow") return v;
+  return "freeflow";
+}
+
+function modeLabel(mode: Mode) {
+  if (mode === "sprint") return "스프린트";
+  if (mode === "deepwork") return "딥워크";
+  return "프리플로우";
+}
+
+function hhmmss(total: number) {
+  const s = Math.max(0, Math.floor(total));
+  const hh = String(Math.floor(s / 3600)).padStart(2, "0");
+  const mm = String(Math.floor((s % 3600) / 60)).padStart(2, "0");
+  const ss = String(s % 60).padStart(2, "0");
+  return `${hh}:${mm}:${ss}`;
+}
+
+export default function SessionEndPage() {
+  const router = useRouter();
+  const params = useSearchParams();
+
+  const mode = useMemo(() => clampMode(params.get("mode")), [params]);
+  const elapsed = useMemo(() => {
+    const v = Number(params.get("elapsed") ?? "0");
+    return Number.isFinite(v) ? v : 0;
+  }, [params]);
+
+  return (
+    <main className="min-h-screen w-full" style={{ backgroundColor: BG }}>
+      <header className="px-5 pt-6">
+        <div className="select-none text-xl font-bold tracking-tight leading-none text-slate-800">
+          hushroom
+        </div>
+      </header>
+
+      <section className="mx-auto flex min-h-[calc(100vh-64px)] max-w-lg flex-col justify-center px-5 pb-10 pt-6">
+        <div
+          className="rounded-3xl border bg-white px-6 py-6 shadow-sm"
+          style={{ borderColor: BORDER }}
+        >
+          <div className="text-sm font-semibold text-slate-600">
+            {modeLabel(mode)}
+          </div>
+          <div className="mt-3 text-[44px] font-semibold leading-none text-slate-900 tabular-nums">
+            {hhmmss(elapsed)}
+          </div>
+          <div className="mt-3 text-base text-slate-700">세션이 종료됐어요</div>
+        </div>
+
+        <div className="mt-5 grid grid-cols-2 gap-3">
+          <button
+            type="button"
+            onClick={() => router.push("/")}
+            className="rounded-3xl border bg-white px-5 py-4 text-base font-semibold text-slate-800 shadow-sm transition active:scale-[0.99]"
+            style={{ borderColor: BORDER }}
+          >
+            홈
+          </button>
+
+          <button
+            type="button"
+            onClick={() => router.push(`/session?mode=${mode}`)}
+            className="rounded-3xl px-5 py-4 text-base font-semibold text-white shadow-sm transition active:scale-[0.99]"
+            style={{ backgroundColor: PRIMARY }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = PRIMARY_HOVER)
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = PRIMARY)
+            }
+          >
+            다시
+          </button>
+        </div>
+      </section>
+    </main>
+  );
+}