사이드바 6 패널 중 마지막 남은 비-collapsible 패널이던 OrderbookPanel 을
공용 Collapsible 로 통일. 이제 SymbolSidebar/PriceTargets 제외 모든 사이드
패널이 같은 토글/영속 패턴.
sticky 충돌 해소:
- 기존 sticky 스타일은 OrderbookPanel 자체 outer div 에 직접 박혀 있었음.
Collapsible 로 감싸면 outer 가 바뀌므로 Collapsible 의 className prop 으로
sticky 톤(bg-zinc-900/80 backdrop-blur)을 sticky=true 일 때만 주입.
- 접혔을 때: 헤더 한 줄(호가 + ts) 만 sticky top-4 로 상단에 떠 있음 →
차트/지표 영역 길게 스크롤 중에도 호가 헤더 접근 가능, 한 번 클릭이면
본문 펴짐. 펼쳤을 때: 본문 포함 전체 sticky.
- 내부 p-3 패딩은 제거 — Collapsible 의 px-4/pb-4/pt-3 본문 패딩이
카드 안쪽 여백을 대체.
defaultOpen=true:
- 호가는 사이드바에서 정보 밀도/시의성 모두 가장 높은 패널 →
진입 즉시 펴진 상태가 자연스러움. RelatedStocks(밀도 낮음) 만 false.
storageKey="orderbook": panel-open:orderbook 으로 영속.
검증:
- npx tsc --noEmit clean
- npx next lint "✔ No ESLint warnings or errors"
PeriodTabs (reviewer 488fb32 concern):
- Drop role=tablist/tab/aria-selected. These imply a full ARIA tab
pattern (tabpanel, aria-controls, roving tabIndex, internal Arrow
focus traversal) which we don't implement — page-level left/right keys
drive period change instead. Switch to plain button group with
aria-pressed={active}, which accurately describes a segmented
toggle. Comment updated to match.
OrderbookPanel sticky (new slice):
- Add optional sticky prop. When true, panel uses 'sticky top-4' with
a slightly heavier bg-zinc-900/80 + backdrop-blur so it stays
legible over the panels scrolling behind it.
- page.tsx passes sticky={isIntraday} — only 1D (10m bars) mode
benefits, since orderbook timeliness drops on daily+ charts and the
fixed slot would harm sidebar layout stability there.
backend:
- fetch/kis.py: fetch_orderbook(code) — KIS FHKST01010200 (inquire-asking-price-exp-ccn)
호출. output1 의 askp1~10/bidp1~10 + 잔량 + 합계, output2 의 현재가/전일대비 파싱.
- api/orderbook.py: GET /api/orderbook/{code}. symbols 매칭 안 되면 404, KIS 키 없으면
skipped_missing_key 상태로 빈 호가 반환 (502 와 구분).
- main.py: orderbook_router 등록.
frontend:
- lib/api.ts: OrderbookResponse 타입 + api.orderbook(code).
- components/OrderbookPanel.tsx: 매도 10단계(위→아래 가격 내림차순) / 현재가(굵게, 전일대비)
/ 매수 10단계. 잔량 막대는 사이드별 max 정규화로 셀 안에서 자라남. ask=파랑, bid=빨강
(한국 거래소 관행). 10초 폴링.
- app/[code]/page.tsx: 사이드바에 SymbolSidebar 다음으로 OrderbookPanel 마운트.
실시간 ws 가 아니라 HTTP 폴링이라 KIS rate-limit 친화적. 표시 전용 — 주문/체결 endpoint 는
일절 import 하지 않음 (kis.py 문서 정책).
