feat(ui): 관심종목(localStorage) + DART 공시 패널
- web/lib/watchlist.ts: KEY=stockchart.watchlist, storage+custom event 구독 - StarButton: 종목 페이지 헤더에서 ☆/★ 토글 - /watchlist 페이지: 카드 그리드 + 현재가/전일대비 + ✕ 제거 - DisclosuresPanel: 기존 /api/news?source=dart 재사용 (백엔드 신설 없음) - 종목 페이지 하단에 공시 패널 부착, 홈에 ★ 관심종목 링크 추가 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
39
web/components/StarButton.tsx
Normal file
39
web/components/StarButton.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
"use client";
|
||||
|
||||
// 관심종목 토글 버튼. 종목 페이지 PriceHero 옆에 들어감.
|
||||
// localStorage 만 건드리므로 백엔드 호출 없음.
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { watchlist } from "../lib/watchlist";
|
||||
|
||||
export function StarButton({ code, name }: { code: string; name?: string }) {
|
||||
const [active, setActive] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setActive(watchlist.has(code));
|
||||
return watchlist.subscribe(() => setActive(watchlist.has(code)));
|
||||
}, [code]);
|
||||
|
||||
const toggle = () => {
|
||||
const now = watchlist.toggle(code);
|
||||
setActive(now);
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggle}
|
||||
aria-pressed={active}
|
||||
title={active ? "관심종목에서 제거" : "관심종목에 추가"}
|
||||
className={`flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs transition ${
|
||||
active
|
||||
? "border-amber-500/60 bg-amber-500/10 text-amber-300"
|
||||
: "border-zinc-700 bg-zinc-900 text-zinc-400 hover:border-zinc-500 hover:text-zinc-200"
|
||||
}`}
|
||||
>
|
||||
<span aria-hidden>{active ? "★" : "☆"}</span>
|
||||
<span>{active ? "관심" : "관심"}</span>
|
||||
{name && <span className="sr-only">{name}</span>}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user