feat(alerts): 가격 알람 (localStorage + 60s 폴러 + 토스트)
- lib/alerts.ts: id/code/op(gte|lte)/target/triggered 저장소, watchlist/recent 와 동일 pub/sub - AlertsPanel: 종목 사이드바에 ≥/≤ 토글 + 목표가 입력 + 활성 알람 리스트(재무장/삭제) - AlertsToaster: layout 전역 마운트, 미발사 알람 코드만 폴링, 조건 충족시 markTriggered + 우측 하단 토스트(6s), Notification 권한 허용 시 브라우저 알림 병행
This commit is contained in:
claude-owner
@@ -2,6 +2,7 @@
|
||||
|
||||
import Link from "next/link";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { AlertsPanel } from "../../components/AlertsPanel";
|
||||
import { CompositeScoreCard } from "../../components/CompositeScoreCard";
|
||||
import { DisclosuresPanel } from "../../components/DisclosuresPanel";
|
||||
import { MetricsPanel } from "../../components/MetricsPanel";
|
||||
@@ -145,6 +146,7 @@ export default function CodePage({ params }: { params: { code: string } }) {
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<SymbolSidebar code={code} />
|
||||
<AlertsPanel code={code} name={chart?.name} current={current} />
|
||||
<RelatedStocks code={code} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import "./globals.css";
|
||||
import type { Metadata } from "next";
|
||||
import { AlertsToaster } from "../components/AlertsToaster";
|
||||
import { TopNav } from "../components/TopNav";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@@ -13,6 +14,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
<body className="min-h-screen">
|
||||
<TopNav />
|
||||
{children}
|
||||
<AlertsToaster />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
143
web/components/AlertsPanel.tsx
Normal file
143
web/components/AlertsPanel.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
"use client";
|
||||
|
||||
// 종목 페이지의 가격 알람 패널.
|
||||
// 현재 종목의 활성 알람 리스트 + 새 알람 추가 폼 (≥ / ≤ + 가격).
|
||||
// 발사 자체는 AlertsToaster 가 글로벌로 처리. 여기는 입력/표시만.
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { alerts, type Alert, type AlertOp } from "../lib/alerts";
|
||||
|
||||
type Props = {
|
||||
code: string;
|
||||
name?: string | null;
|
||||
// 현재가 — 폼 placeholder 와 기본값으로 사용.
|
||||
current?: number | null;
|
||||
};
|
||||
|
||||
export function AlertsPanel({ code, name, current }: Props) {
|
||||
const [items, setItems] = useState<Alert[]>([]);
|
||||
const [op, setOp] = useState<AlertOp>("gte");
|
||||
const [target, setTarget] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
const refresh = () => setItems(alerts.listForCode(code));
|
||||
refresh();
|
||||
return alerts.subscribe(refresh);
|
||||
}, [code]);
|
||||
|
||||
const onAdd = () => {
|
||||
const n = Number(target.replace(/[, ]/g, ""));
|
||||
if (!Number.isFinite(n) || n <= 0) return;
|
||||
alerts.add({ code, name: name ?? undefined, op, target: n });
|
||||
setTarget("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="rounded-md border border-zinc-800 bg-zinc-900/40 p-4">
|
||||
<div className="mb-3 flex items-baseline justify-between">
|
||||
<div className="text-sm font-medium text-zinc-200">가격 알람</div>
|
||||
<div className="text-[10px] text-zinc-500">
|
||||
{current != null ? `현재가 ${current.toLocaleString()}원` : ""}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<div className="flex overflow-hidden rounded-md border border-zinc-700 text-[11px]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOp("gte")}
|
||||
className={`px-2 py-1 ${
|
||||
op === "gte"
|
||||
? "bg-zinc-800 text-rose-300"
|
||||
: "bg-transparent text-zinc-500 hover:text-zinc-300"
|
||||
}`}
|
||||
>
|
||||
≥ 도달 시
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOp("lte")}
|
||||
className={`px-2 py-1 ${
|
||||
op === "lte"
|
||||
? "bg-zinc-800 text-sky-300"
|
||||
: "bg-transparent text-zinc-500 hover:text-zinc-300"
|
||||
}`}
|
||||
>
|
||||
≤ 하락 시
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
inputMode="numeric"
|
||||
value={target}
|
||||
onChange={(e) => setTarget(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") onAdd();
|
||||
}}
|
||||
placeholder={current != null ? String(Math.round(current)) : "목표가"}
|
||||
className="w-28 rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-xs text-zinc-100 outline-none focus:border-zinc-500"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onAdd}
|
||||
disabled={!target.trim()}
|
||||
className="rounded-md border border-amber-500/40 bg-amber-500/10 px-2 py-1 text-[11px] text-amber-300 hover:bg-amber-500/20 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
추가
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{items.length === 0 ? (
|
||||
<div className="mt-3 text-[11px] text-zinc-500">
|
||||
설정된 알람이 없습니다. 임계값을 추가하세요.
|
||||
</div>
|
||||
) : (
|
||||
<ul className="mt-3 divide-y divide-zinc-800">
|
||||
{items.map((a) => (
|
||||
<li
|
||||
key={a.id}
|
||||
className="flex items-center justify-between gap-2 py-1.5 text-xs"
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-1.5">
|
||||
<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>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
146
web/components/AlertsToaster.tsx
Normal file
146
web/components/AlertsToaster.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
"use client";
|
||||
|
||||
// 글로벌 가격 알람 폴러 + 인페이지 토스트.
|
||||
//
|
||||
// 동작:
|
||||
// 1) alerts 구독 + 60s 인터벌마다 미발사(triggered=false) 알람 코드 set 수집
|
||||
// 2) 각 코드별 /api/chart?days=2&interval=1d → 마지막 종가만 사용
|
||||
// 3) 조건 (gte: close >= target, lte: close <= target) 만족 시 markTriggered + 토스트
|
||||
//
|
||||
// 알람이 0건이면 폴링 자체를 하지 않음 (네트워크 정숙).
|
||||
// 토스트는 우측 하단에 쌓이며 6초 후 자동 dismiss.
|
||||
//
|
||||
// 브라우저 Notification 은 사용자가 허용한 경우에만 발송.
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { api } from "../lib/api";
|
||||
import { alerts, type Alert } from "../lib/alerts";
|
||||
|
||||
type Toast = {
|
||||
id: string;
|
||||
code: string;
|
||||
name?: string;
|
||||
op: Alert["op"];
|
||||
target: number;
|
||||
price: number;
|
||||
};
|
||||
|
||||
const POLL_MS = 60_000;
|
||||
const TOAST_TTL_MS = 6_000;
|
||||
|
||||
export function AlertsToaster() {
|
||||
const [active, setActive] = useState<Alert[]>([]);
|
||||
const [toasts, setToasts] = useState<Toast[]>([]);
|
||||
const tickingRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
const refresh = () => setActive(alerts.list().filter((a) => !a.triggered));
|
||||
refresh();
|
||||
return alerts.subscribe(refresh);
|
||||
}, []);
|
||||
|
||||
// 폴링.
|
||||
useEffect(() => {
|
||||
if (active.length === 0) return;
|
||||
let alive = true;
|
||||
|
||||
const codes = Array.from(new Set(active.map((a) => a.code)));
|
||||
|
||||
const tick = async () => {
|
||||
if (tickingRef.current) return;
|
||||
tickingRef.current = true;
|
||||
try {
|
||||
// 종목별 마지막 종가 (직전 2 거래일만 받음 — 가볍게).
|
||||
const prices = new Map<string, number | null>();
|
||||
await Promise.allSettled(
|
||||
codes.map(async (code) => {
|
||||
const c = await api.getChart(code, 2, "1d");
|
||||
const valid = c.ohlcv.filter((p) => p.close != null);
|
||||
const last = valid[valid.length - 1] ?? null;
|
||||
prices.set(code, last?.close ?? null);
|
||||
}),
|
||||
);
|
||||
if (!alive) return;
|
||||
|
||||
// 알람 평가 — 최신 스냅샷(read)으로 재조회 (구독 사이 추가/삭제 반영).
|
||||
const fresh = alerts.list().filter((a) => !a.triggered);
|
||||
const newToasts: Toast[] = [];
|
||||
for (const a of fresh) {
|
||||
const p = prices.get(a.code);
|
||||
if (p == null) continue;
|
||||
const hit =
|
||||
(a.op === "gte" && p >= a.target) ||
|
||||
(a.op === "lte" && p <= a.target);
|
||||
if (!hit) continue;
|
||||
alerts.markTriggered(a.id);
|
||||
newToasts.push({
|
||||
id: a.id,
|
||||
code: a.code,
|
||||
name: a.name,
|
||||
op: a.op,
|
||||
target: a.target,
|
||||
price: p,
|
||||
});
|
||||
// 브라우저 알림 (권한 허용 시).
|
||||
if (
|
||||
typeof window !== "undefined" &&
|
||||
"Notification" in window &&
|
||||
Notification.permission === "granted"
|
||||
) {
|
||||
try {
|
||||
new Notification(`${a.name ?? a.code} 알람`, {
|
||||
body: `${a.op === "gte" ? "≥" : "≤"} ${a.target.toLocaleString()} · 현재 ${p.toLocaleString()}`,
|
||||
});
|
||||
} catch {
|
||||
// 무시
|
||||
}
|
||||
}
|
||||
}
|
||||
if (newToasts.length) {
|
||||
setToasts((cur) => [...cur, ...newToasts]);
|
||||
for (const t of newToasts) {
|
||||
window.setTimeout(() => {
|
||||
setToasts((cur) => cur.filter((x) => x.id !== t.id));
|
||||
}, TOAST_TTL_MS);
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
tickingRef.current = false;
|
||||
}
|
||||
};
|
||||
|
||||
tick();
|
||||
const h = window.setInterval(tick, POLL_MS);
|
||||
return () => {
|
||||
alive = false;
|
||||
window.clearInterval(h);
|
||||
};
|
||||
}, [active]);
|
||||
|
||||
if (toasts.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="pointer-events-none fixed bottom-4 right-4 z-50 flex flex-col items-end gap-2">
|
||||
{toasts.map((t) => (
|
||||
<Link
|
||||
key={t.id}
|
||||
href={`/${t.code}`}
|
||||
className="pointer-events-auto block w-72 rounded-md border border-amber-500/40 bg-zinc-950/95 p-3 shadow-xl backdrop-blur"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="text-xs font-medium text-amber-300">🔔 가격 알람</span>
|
||||
<span className="text-[10px] text-zinc-500">{t.code}</span>
|
||||
</div>
|
||||
<div className="mt-1 text-sm font-semibold text-zinc-100">
|
||||
{t.name ?? t.code}
|
||||
</div>
|
||||
<div className="mt-1 text-[11px] text-zinc-400">
|
||||
{t.op === "gte" ? "≥" : "≤"} {t.target.toLocaleString()} 도달 ·
|
||||
현재 <span className="tabular-nums text-zinc-100">{t.price.toLocaleString()}</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
104
web/lib/alerts.ts
Normal file
104
web/lib/alerts.ts
Normal file
@@ -0,0 +1,104 @@
|
||||
// 가격 알람 — localStorage 기반. 단순 임계값 알람.
|
||||
//
|
||||
// 스키마 (Alert):
|
||||
// id 랜덤 문자열
|
||||
// code 종목코드
|
||||
// name 등록 시점의 종목명 (표시용)
|
||||
// op "gte" = 현재가 ≥ target, "lte" = 현재가 ≤ target
|
||||
// target 임계값 (원)
|
||||
// triggered 한 번 발사되면 true. 사용자가 명시적으로 다시 켜기 전까지 침묵.
|
||||
// createdAt epoch ms
|
||||
//
|
||||
// 발사는 AlertsToaster (글로벌 폴러) 가 처리. 이 모듈은 저장소+pub/sub 만 담당.
|
||||
|
||||
const KEY = "stockchart.alerts";
|
||||
|
||||
export type AlertOp = "gte" | "lte";
|
||||
|
||||
export type Alert = {
|
||||
id: string;
|
||||
code: string;
|
||||
name?: string;
|
||||
op: AlertOp;
|
||||
target: number;
|
||||
triggered: boolean;
|
||||
createdAt: number;
|
||||
};
|
||||
|
||||
function read(): Alert[] {
|
||||
if (typeof window === "undefined") return [];
|
||||
try {
|
||||
const raw = window.localStorage.getItem(KEY);
|
||||
if (!raw) return [];
|
||||
const v = JSON.parse(raw);
|
||||
if (!Array.isArray(v)) return [];
|
||||
return v.filter(
|
||||
(x): x is Alert =>
|
||||
x &&
|
||||
typeof x.id === "string" &&
|
||||
typeof x.code === "string" &&
|
||||
(x.op === "gte" || x.op === "lte") &&
|
||||
typeof x.target === "number" &&
|
||||
typeof x.triggered === "boolean",
|
||||
);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function write(items: Alert[]) {
|
||||
if (typeof window === "undefined") return;
|
||||
window.localStorage.setItem(KEY, JSON.stringify(items));
|
||||
window.dispatchEvent(new CustomEvent("alerts:change"));
|
||||
}
|
||||
|
||||
function genId(): string {
|
||||
return Math.random().toString(36).slice(2, 10) + Date.now().toString(36);
|
||||
}
|
||||
|
||||
export const alerts = {
|
||||
list(): Alert[] {
|
||||
return read();
|
||||
},
|
||||
listForCode(code: string): Alert[] {
|
||||
return read().filter((a) => a.code === code);
|
||||
},
|
||||
add(input: Omit<Alert, "id" | "triggered" | "createdAt"> & { triggered?: boolean }) {
|
||||
const cur = read();
|
||||
cur.unshift({
|
||||
id: genId(),
|
||||
triggered: input.triggered ?? false,
|
||||
createdAt: Date.now(),
|
||||
code: input.code,
|
||||
name: input.name,
|
||||
op: input.op,
|
||||
target: input.target,
|
||||
});
|
||||
write(cur);
|
||||
},
|
||||
remove(id: string) {
|
||||
write(read().filter((a) => a.id !== id));
|
||||
},
|
||||
markTriggered(id: string) {
|
||||
write(read().map((a) => (a.id === id ? { ...a, triggered: true } : a)));
|
||||
},
|
||||
reset(id: string) {
|
||||
write(read().map((a) => (a.id === id ? { ...a, triggered: false } : a)));
|
||||
},
|
||||
clear() {
|
||||
write([]);
|
||||
},
|
||||
subscribe(cb: () => void): () => void {
|
||||
if (typeof window === "undefined") return () => {};
|
||||
const onStorage = (e: StorageEvent) => {
|
||||
if (e.key === KEY) cb();
|
||||
};
|
||||
const onCustom = () => cb();
|
||||
window.addEventListener("storage", onStorage);
|
||||
window.addEventListener("alerts:change", onCustom as EventListener);
|
||||
return () => {
|
||||
window.removeEventListener("storage", onStorage);
|
||||
window.removeEventListener("alerts:change", onCustom as EventListener);
|
||||
};
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user