리뷰어 지적: 주석엔 '다른 인풋/편집 영역에서 무시'라고 적어놨지만 실제 코드는
'/' 키에만 가드를 걸어둬서 Cmd/Ctrl+K 는 모든 input/textarea/contenteditable
에서 브라우저/편집기 단축키를 가로채는 상태였음.
수정: '/' 와 동일하게 !isEditableTarget(e.target) 조건 추가. 검색 인풋 자체에
포커스 중이면 어차피 focus()/setOpen(true) 가 noop 이라 UX 손해 없음.
키보드 조작:
- "/" : 검색 인풋 포커스 (다른 인풋 포커스 중이면 무시)
- Cmd/Ctrl+K : 동일 (OS 공통)
- ↑/↓ : 결과 목록 wrap-around 이동
- Enter : 현재 강조 항목으로 이동 (검색 결과 또는 최근 본 종목)
- Esc : popover 닫기 + 인풋 blur
기존 mouse hover 흐름과 충돌 없도록 onMouseEnter 에서 hi 동기화. navCodes 길이
변하면 hi 를 자동 clamp. placeholder 에 "( / )" 힌트 추가.
isEditableTarget() 가드로 다른 입력 필드 (PredictionPanel, 검색칩 등) 에 포커스
중일 때 "/" 가로채지 않음.
- 최대 5종목 누적수익률(%) 한 차트 비교, 기간 1M/3M/6M/1Y
- URL ?codes=A,B,C 양방향 동기화 (Suspense + useSearchParams)
- 검색 칩으로 종목 추가, ✕ 로 제거. 종목별 최종 수익률 칩 표시
- TopNav 우측에 "비교" 링크
- web/lib/recent.ts: stockchart.recent KEY, push/get/clear/subscribe (storage + custom event)
- [code]/page.tsx: 페이지 진입 시 recent.push(code) — 자동 트래킹
- web/components/RecentTiles.tsx: 홈 카드 그리드 (최대 10개, 2~5컬럼)
- web/app/page.tsx: SearchBox 아래에 RecentTiles 배치 (빈 리스트면 자동 숨김)
- TopNav: 검색어 비면서 포커스 시 최근 본 종목 popover 표시 + "지우기" 버튼
토스 "최근 본 종목" 톤 — 검색 빈 상태에서도 popover 가 비어 있지 않게.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- web/components/TopNav.tsx: sticky top header
· 좌: Stock Chart 로고 (→ /)
· 중: 컴팩트 검색 input + popover (debounced 200ms, with_sparkline=false 빠른 응답)
· 우: ★ 관심 (→ /watchlist)
- 바깥 클릭/Esc 로 popover 닫힘
- 결과 클릭 시 자동 닫힘 + 검색어 클리어
- web/app/layout.tsx: <body> 최상단에 <TopNav /> 부착
토스 톱바 톤. 모든 페이지에서 검색 가능 — 홈으로 돌아갈 필요 없음.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
