feat(shortcuts): keyboard shortcuts help overlay + F modifier guard

- 글로벌 `ShortcutsHelp` 컴포넌트 추가 — `?` 키로 토글, ESC 또는 바깥
  클릭 / 닫기 버튼 / 우하단 floating ? 버튼으로 닫음. /, Ctrl+K, F,
  ESC, ↑↓, Enter 등 현재 사이트의 모든 단축키를 scope 별로 표시.
- 입력 필드 포커스 시 단축키 무시 가드 — `?` 입력 의도를 방해하지 않음.
- 열릴 때 닫기 버튼에 포커스 → 키보드 사용자 Tab 흐름 자연스럽게.
- 모달 click-outside → setOpen(false), aria-modal/role=dialog 로 접근성.
- 리뷰어 9f215ac 지적: StockChart F 단축키가 Ctrl+F/Cmd+F/Alt+F 도
  가로채던 것을 modifier guard 로 막음. shift/ctrl/meta/alt 어느 것도
  눌리지 않은 단순 F 일 때만 toggleFullscreen.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
claude-owner
2026-05-29 00:21:07 +09:00
parent 9f215acaaa
commit 6f71aef451
3 changed files with 158 additions and 1 deletions

View File

@@ -793,7 +793,15 @@ export function StockChart({ chart, prediction, targets }: Props) {
) {
return;
}
if (e.key === "f" || e.key === "F") {
// Ctrl+F / Cmd+F (브라우저 찾기) / Alt+F (브라우저 메뉴) / Shift+F 는 가로채지 않음.
// 단순 F 만 차트 전체화면 토글로 사용.
if (
!e.ctrlKey &&
!e.metaKey &&
!e.altKey &&
!e.shiftKey &&
e.key.toLowerCase() === "f"
) {
e.preventDefault();
void toggleFullscreen();
} else if (e.key === "Escape" && fullscreen && !document.fullscreenElement) {