From 139403c133106cf77fbf67579e72f1e683437046 Mon Sep 17 00:00:00 2001
From: claude-owner <owner@ejclaw.local>
Date: Thu, 28 May 2026 18:25:27 +0900
Subject: [PATCH] =?UTF-8?q?feat(alerts):=20/alerts=20=ED=86=B5=ED=95=A9=20?=
 =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20+=20TopNav?=
 =?UTF-8?q?=20=F0=9F=94=94=20=EB=A7=81=ED=81=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 종목별 그룹핑 (Map by code), 활성·발사됨 분리 카운트
- 행 단위 재무장/삭제 + 전체 삭제 (confirm)
- Notification 권한이 default 일 때만 권한 요청 배너 노출
- TopNav 우측 ★ 옆에 🔔 알람 페이지 링크 추가
---
 web/app/alerts/page.tsx   | 211 ++++++++++++++++++++++++++++++++++++++
 web/components/TopNav.tsx |   7 ++
 2 files changed, 218 insertions(+)
 create mode 100644 web/app/alerts/page.tsx

diff --git a/web/app/alerts/page.tsx b/web/app/alerts/page.tsx
new file mode 100644
index 0000000..97f5749
--- /dev/null
+++ b/web/app/alerts/page.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+// /alerts — 모든 가격 알람을 한 화면에서 관리.
+// 종목별로 그룹핑, 활성/발사됨 분리, 재무장·삭제·일괄 지우기.
+// AlertsToaster 가 글로벌로 폴링하므로 이 페이지는 표시/조작만 담당.
+
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import { alerts, type Alert } from "../../lib/alerts";
+
+export default function AlertsPage() {
+  const [items, setItems] = useState<Alert[]>([]);
+  const [hydrated, setHydrated] = useState(false);
+
+  useEffect(() => {
+    setHydrated(true);
+    const refresh = () => setItems(alerts.list());
+    refresh();
+    return alerts.subscribe(refresh);
+  }, []);
+
+  // 종목별 그룹. 표시는 최신 등록순(prepend 된 순서) 유지.
+  const grouped = useMemo(() => {
+    const m = new Map<string, { name?: string; rows: Alert[] }>();
+    for (const a of items) {
+      const g = m.get(a.code) ?? { name: a.name, rows: [] };
+      if (!g.name && a.name) g.name = a.name;
+      g.rows.push(a);
+      m.set(a.code, g);
+    }
+    return Array.from(m.entries()).map(([code, g]) => ({
+      code,
+      name: g.name,
+      rows: g.rows,
+    }));
+  }, [items]);
+
+  const activeCount = items.filter((a) => !a.triggered).length;
+  const firedCount = items.length - activeCount;
+
+  return (
+    <main className="mx-auto max-w-5xl px-6 py-8">
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <Link href="/" className="text-xs text-zinc-500 hover:text-zinc-300">
+          ← 홈
+        </Link>
+        <span className="text-[11px] text-zinc-500">
+          활성 {activeCount} · 발사됨 {firedCount}
+        </span>
+      </div>
+
+      <div className="flex items-end justify-between gap-3">
+        <div>
+          <h1 className="text-2xl font-bold text-zinc-50">가격 알람</h1>
+          <p className="mt-1 text-sm text-zinc-400">
+            브라우저에 저장됩니다. 활성 알람은 60초마다 체크되어 임계값 도달 시 토스트 +
+            (권한 허용 시) 시스템 알림.
+          </p>
+        </div>
+        {items.length > 0 && (
+          <button
+            type="button"
+            onClick={() => {
+              if (confirm("모든 알람을 삭제하시겠어요?")) alerts.clear();
+            }}
+            className="shrink-0 rounded-md border border-zinc-700 px-2 py-1 text-[11px] text-zinc-400 hover:border-rose-500/40 hover:text-rose-300"
+          >
+            전체 삭제
+          </button>
+        )}
+      </div>
+
+      <div className="mt-6">
+        {!hydrated ? (
+          <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4 text-xs text-zinc-500">
+            로딩 중…
+          </div>
+        ) : items.length === 0 ? (
+          <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-6 text-center text-sm text-zinc-500">
+            아직 설정된 알람이 없습니다.
+            <br />
+            종목 페이지의 <b className="text-amber-300">가격 알람</b> 카드에서 추가하세요.
+          </div>
+        ) : (
+          <NotificationHint />
+        )}
+
+        {hydrated && grouped.length > 0 && (
+          <div className="mt-4 space-y-3">
+            {grouped.map((g) => (
+              <Group key={g.code} code={g.code} name={g.name} rows={g.rows} />
+            ))}
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}
+
+// 알림 권한이 default 면 안내 + 요청 버튼.
+function NotificationHint() {
+  const [perm, setPerm] = useState<NotificationPermission | "unsupported">(
+    "unsupported",
+  );
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!("Notification" in window)) {
+      setPerm("unsupported");
+      return;
+    }
+    setPerm(Notification.permission);
+  }, []);
+
+  if (perm === "granted" || perm === "denied" || perm === "unsupported") return null;
+  return (
+    <div className="mb-4 flex items-center justify-between gap-3 rounded-md border border-amber-500/30 bg-amber-500/5 px-3 py-2 text-xs text-amber-200">
+      <span>시스템 알림 권한이 없습니다. 허용하면 브라우저 탭이 닫혀 있어도 알람을 받을 수 있습니다.</span>
+      <button
+        type="button"
+        onClick={async () => {
+          try {
+            const p = await Notification.requestPermission();
+            setPerm(p);
+          } catch {
+            // 무시
+          }
+        }}
+        className="shrink-0 rounded-md border border-amber-400/50 bg-amber-500/10 px-2 py-1 text-[11px] hover:bg-amber-500/20"
+      >
+        권한 허용
+      </button>
+    </div>
+  );
+}
+
+function Group({
+  code,
+  name,
+  rows,
+}: {
+  code: string;
+  name?: string;
+  rows: Alert[];
+}) {
+  return (
+    <div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-3">
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <Link
+          href={`/${code}`}
+          className="flex items-baseline gap-2 text-sm text-zinc-100 hover:text-white"
+        >
+          <span className="font-medium">{name ?? code}</span>
+          <span className="text-[10px] text-zinc-500">{code}</span>
+        </Link>
+        <span className="text-[10px] text-zinc-500">{rows.length}개</span>
+      </div>
+      <ul className="divide-y divide-zinc-800">
+        {rows.map((a) => (
+          <li key={a.id} className="flex items-center justify-between gap-2 py-1.5">
+            <div className="flex min-w-0 items-center gap-1.5 text-xs">
+              <span
+                className={`shrink-0 rounded-sm px-1 py-0.5 text-[10px] font-semibold ${
+                  a.op === "gte"
+                    ? "bg-rose-900/50 text-rose-300"
+                    : "bg-sky-900/50 text-sky-300"
+                }`}
+              >
+                {a.op === "gte" ? "≥" : "≤"}
+              </span>
+              <span className="tabular-nums text-zinc-100">
+                {a.target.toLocaleString()}
+              </span>
+              <span className="ml-1 text-[10px] text-zinc-500">
+                {new Date(a.createdAt).toLocaleString("ko-KR", {
+                  month: "2-digit",
+                  day: "2-digit",
+                  hour: "2-digit",
+                  minute: "2-digit",
+                })}
+              </span>
+              {a.triggered && (
+                <span className="ml-1 rounded-sm bg-zinc-800 px-1 py-0.5 text-[9px] text-zinc-400">
+                  발사됨
+                </span>
+              )}
+            </div>
+            <div className="flex shrink-0 items-center gap-1">
+              {a.triggered && (
+                <button
+                  type="button"
+                  onClick={() => alerts.reset(a.id)}
+                  className="rounded-sm border border-zinc-700 px-1.5 py-0.5 text-[10px] text-zinc-400 hover:text-zinc-200"
+                >
+                  재무장
+                </button>
+              )}
+              <button
+                type="button"
+                onClick={() => alerts.remove(a.id)}
+                className="rounded-sm px-1 text-[10px] text-zinc-500 hover:text-rose-300"
+                aria-label="알람 삭제"
+              >
+                ✕
+              </button>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/web/components/TopNav.tsx b/web/components/TopNav.tsx
index 061a90f..9b10fbb 100644
--- a/web/components/TopNav.tsx
+++ b/web/components/TopNav.tsx
@@ -151,6 +151,13 @@ export function TopNav() {
           )}
         </div>
 
+        <Link
+          href="/alerts"
+          className="shrink-0 text-xs text-zinc-400 hover:text-zinc-200"
+          title="가격 알람"
+        >
+          🔔
+        </Link>
         <Link
           href="/watchlist"
           className="shrink-0 text-xs text-amber-300 hover:text-amber-200"