tkrmagid/stock_chart_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(chart): horizontal line drawing tool + modal-open shortcut guards

Browse Source 
리뷰어 093ac86 지적 처리:
- 종목 페이지 단축키 핸들러 (←/→/S) 에 modal 가드 추가.
  `document.querySelector('[role="dialog"][aria-modal="true"]')` 가 매치되면
  return — ShortcutsHelp 같은 모달이 열린 상태에서 close 버튼이 포커스를
  잡고 있어도 페이지 단축키가 뒤에서 동작하지 않도록.
- StockChart 의 F 단축키에도 동일한 modal 가드 — 동일 문제 (모달 위에서
  F 가 차트 전체화면 토글) 차단.

신규 슬라이스 — 차트 수평선 그리기 도구:
- `web/lib/lines.ts` — `hlines:<code>` 키 localStorage. id 단위 add/remove/clear,
  최대 10 개, 같은 가격 중복 추가 방지(부동소수 4 자리 비교), crypto.randomUUID
  폴백 포함.
- StockChart 툴바: `─ 수평선 (N/10)` 버튼 — hover 가격 또는 마지막 봉 종가에
  추가. 한도 도달 / 가격 없음이면 disabled.
- 추가된 라인은 chips 형태로 toolbar 아래 한 줄에 표시 — 각각 ✕ 로 제거,
  `전체 해제` 버튼 별도.
- H 키 단축키 — modifier/editable/modal 가드 일관 적용. 가격은 ref 로 들고
  있어 keydown effect 가 재구독되지 않음.
- 차트엔 `createPriceLine` 으로 zinc-400 solid 라인 (목표/손절의 점선과 톤
  분리). 종목 전환 시 자동 reload.
- ShortcutsHelp 에 H 단축키 등록.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
claude-owner
2026-05-29 00:29:56 +09:00
parent 093ac86d1a
commit 318eae67df
4 changed files with 207 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
web/components/StockChart.tsx
View File

@@ -15,6 +15,7 @@ import {
} from "lightweight-charts";
import type { ChartPayload, LatestPredictionResponse } from "../lib/api";
import { csvFilename, downloadCsv, ohlcvToCsv } from "../lib/csv";
import { addLine, clearLines, type HLine, readLines, removeLine } from "../lib/lines";
import type { Targets } from "../lib/targets";
type Props = {
@@ -223,6 +224,8 @@ export function StockChart({ chart, prediction, targets }: Props) {
// 목표가/손절가 가로 라인 — candleRef 의 priceLine 으로 부착.
const targetLineRef = useRef<IPriceLine | null>(null);
const stopLineRef = useRef<IPriceLine | null>(null);
// 사용자 수평선 — id → IPriceLine. localStorage 에 영속.
const hlineRefs = useRef<Map<string, IPriceLine>>(new Map());
// 보조 차트 crosshair 동기화용 time→value lookup.
// 메인 차트에서 hover 한 시점의 RSI/MACD 값을 O(1) 로 찾아 setCrosshairPosition 에
@@ -240,6 +243,8 @@ export function StockChart({ chart, prediction, targets }: Props) {
// 두 경로 모두 같은 state 로 통일 — UI(버튼 라벨/컨테이너 클래스) 분기 단순.
const wrapperRef = useRef<HTMLDivElement | null>(null);
const [fullscreen, setFullscreen] = useState(false);
// 사용자 수평선 — localStorage 동기. 종목 전환 시 reload.
const [hlines, setHlines] = useState<HLine[]>([]);
const isIntraday = chart.interval === "10m";
const showSma = !isIntraday; // 10분봉에선 의미 적음 — UI 도 숨김.
@@ -479,6 +484,33 @@ export function StockChart({ chart, prediction, targets }: Props) {
}
}, [targets, isIntraday]);
// 사용자 수평선 로드 — 종목 전환 또는 캔들 시리즈 재생성 시.
useEffect(() => {
setHlines(readLines(chart.code));
}, [chart.code, isIntraday]);
// 수평선 렌더링 — id 단위 diff 로 변경된 것만 add/remove. 단순화를 위해
// 매번 전부 지우고 다시 그리는 방식 채택 (라인 수가 10 개 cap 이라 비용 무시).
useEffect(() => {
const candle = candleRef.current;
if (!candle) return;
for (const line of hlineRefs.current.values()) {
try { candle.removePriceLine(line); } catch { /* 이미 해제됨 */ }
}
hlineRefs.current.clear();
for (const hl of hlines) {
const line = candle.createPriceLine({
price: hl.price,
color: "#a3a3a3", // zinc-400 — 중립 (목표/손절 의도 색과 구분).
lineWidth: 1,
lineStyle: 0, // solid — 점선인 목표/손절과 시각적으로 분리.
axisLabelVisible: true,
title: "",
});
hlineRefs.current.set(hl.id, line);
}
}, [hlines, isIntraday]);
// RSI 보조 차트 생성/제거 — toggle 또는 interval 변경 시. 메인 chart 와 별 인스턴스.
// priceScale fix (0-100) + 30/70 가이드 라인.
useEffect(() => {
@@ -672,6 +704,14 @@ export function StockChart({ chart, prediction, targets }: Props) {
};
}, [chart, isIntraday]);
// H 키로 수평선 추가 시 사용할 "현재 가격" ref — hover 있으면 hover.close, 없으면
// lastSummary.close. ref 로 들고 있어 keydown effect 가 매번 재구독되지 않음.
const currentPriceRef = useRef<number | null>(null);
useEffect(() => {
const p = hover?.close ?? lastSummary?.close ?? null;
currentPriceRef.current = p;
}, [hover, lastSummary]);
useEffect(() => {
const c = chartRef.current;
if (!c) return;
@@ -793,24 +833,29 @@ export function StockChart({ chart, prediction, targets }: Props) {
) {
return;
}
// 모달/대화상자가 열려 있으면 차트 단축키도 양보 — ShortcutsHelp 등이 열린 상태에서
// 뒤의 차트가 전체화면으로 토글되는 것을 막음.
if (document.querySelector('[role="dialog"][aria-modal="true"]')) return;
// Ctrl+F / Cmd+F (브라우저 찾기) / Alt+F (브라우저 메뉴) / Shift+F 는 가로채지 않음.
// 단순 F 만 차트 전체화면 토글로 사용.
if (
!e.ctrlKey &&
!e.metaKey &&
!e.altKey &&
!e.shiftKey &&
e.key.toLowerCase() === "f"
) {
const noMod = !e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey;
if (noMod && e.key.toLowerCase() === "f") {
e.preventDefault();
void toggleFullscreen();
} else if (noMod && e.key.toLowerCase() === "h") {
// H 키 — 현재 가격(hover 또는 마지막 봉 종가)에 수평선 추가.
const price = currentPriceRef.current;
if (price != null && Number.isFinite(price) && price > 0) {
e.preventDefault();
setHlines(addLine(chart.code, price));
}
} else if (e.key === "Escape" && fullscreen && !document.fullscreenElement) {
setFullscreen(false);
}
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [toggleFullscreen, fullscreen]);
}, [toggleFullscreen, fullscreen, chart.code]);
const toggle = (w: SmaWindow) => {
setActive((cur) => {
@@ -895,6 +940,20 @@ export function StockChart({ chart, prediction, targets }: Props) {
</button>
</>
)}
<button
type="button"
onClick={() => {
const price = hover?.close ?? lastSummary?.close ?? null;
if (price != null && Number.isFinite(price) && price > 0) {
setHlines(addLine(chart.code, price));
}
}}
disabled={hlines.length >= 10 || (hover?.close ?? lastSummary?.close ?? null) == null}
className="ml-auto flex items-center gap-1 rounded-full border border-zinc-800 px-2 py-0.5 text-[10px] text-zinc-400 transition hover:border-zinc-600 hover:text-zinc-200 disabled:cursor-not-allowed disabled:opacity-40"
title="현재 가격(hover 또는 마지막 봉 종가)에 수평선 추가 (H)"
>
─ 수평선 ({hlines.length}/10)
</button>
<button
type="button"
onClick={() => {
@@ -908,7 +967,7 @@ export function StockChart({ chart, prediction, targets }: Props) {
downloadCsv(filename, ohlcvToCsv(chart.ohlcv));
}}
disabled={!chart.ohlcv.length}
className="ml-auto flex items-center gap-1 rounded-full border border-zinc-800 px-2 py-0.5 text-[10px] text-zinc-400 transition hover:border-zinc-600 hover:text-zinc-200 disabled:cursor-not-allowed disabled:opacity-40"
className="flex items-center gap-1 rounded-full border border-zinc-800 px-2 py-0.5 text-[10px] text-zinc-400 transition hover:border-zinc-600 hover:text-zinc-200 disabled:cursor-not-allowed disabled:opacity-40"
title={`현재 로드된 기간(${chart.range.from} ~ ${chart.range.to}) 의 봉 데이터를 CSV 로 내보내기 (UTF-8 BOM, Excel 호환)`}
>
⬇ CSV
@@ -923,6 +982,36 @@ export function StockChart({ chart, prediction, targets }: Props) {
{fullscreen ? "⛶ 해제" : "⛶ 전체화면"}
</button>
</div>
{hlines.length > 0 && (
<div className="mb-1 flex flex-wrap items-center gap-1 px-1">
<span className="text-[10px] text-zinc-500">수평선:</span>
{hlines.map((hl) => (
<span
key={hl.id}
className="flex items-center gap-1 rounded-full border border-zinc-800 bg-zinc-900/60 pl-2 pr-1 py-0.5 text-[10px] tabular-nums text-zinc-300"
>
{fmtKPrice(hl.price)}
<button
type="button"
onClick={() => setHlines(removeLine(chart.code, hl.id))}
className="rounded-full px-1 text-[10px] text-zinc-500 hover:text-zinc-100"
title="이 수평선 제거"
aria-label={`${fmtKPrice(hl.price)} 원 수평선 제거`}
>
✕
</button>
</span>
))}
<button
type="button"
onClick={() => setHlines(clearLines(chart.code))}
className="ml-1 rounded-full border border-zinc-800 px-2 py-0.5 text-[10px] text-zinc-500 hover:border-zinc-600 hover:text-zinc-200"
title="모든 수평선 제거"
>
전체 해제
</button>
</div>
)}
<div className={chartBoxCls}>
<div ref={containerRef} className="h-full w-full" />
<CrosshairLabel info={hover ?? lastSummary} isHover={hover != null} />