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

리뷰어 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

View File

@@ -22,6 +22,7 @@ const SHORTCUTS: Shortcut[] = [
{ scope: "전역", keys: ["Esc"], label: "팝오버 / 오버레이 닫기" },
{ scope: "전역", keys: ["?"], label: "이 도움말 열기 / 닫기" },
{ scope: "종목 페이지", keys: ["F"], label: "차트 전체화면 토글" },
{ scope: "종목 페이지", keys: ["H"], label: "현재 가격에 수평선 추가" },
{ scope: "종목 페이지", keys: ["←", "→"], label: "기간 탭 이전 / 다음" },
{ scope: "종목 페이지", keys: ["S"], label: "관심종목 추가 / 제거" },
{ scope: "검색 팝오버", keys: ["↑", "↓"], label: "결과 이동" },