Files
stock_chart_site/web/components/OrderbookPanel.tsx
claude-owner 70d56b14ec feat(orderbook): wrap OrderbookPanel in Collapsible (sticky-aware)
사이드바 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"
2026-06-01 10:37:23 +09:00

7.5 KiB