ui(chart): unify fullscreen toggle aria-pressed visual with toolbar siblings

The fullscreen button in the chart toolbar carried aria-pressed={fullscreen}
but had no active-state visual differentiation — only its label flipped
("⛶ 전체화면" ↔ "⛶ 해제"). Its sibling toggles in the same row (SMA presets,
RSI, MACD) all use the canonical zinc token (border-zinc-600 bg-zinc-800/80
text-zinc-100 when active). Sighted users got an inconsistent press-feedback
within a single toolbar.

Switch fullscreen to the same conditional className pattern. CSV button next
to it is intentionally not a toggle so stays unchanged.

Other aria-pressed carriers audited and left as-is:
- PeriodTabs: intentionally rose-500 (primary control must stand out from
  zinc toolbar buttons, comment already documents this)
- StarButton: intentionally amber (favorite/star semantic)
- InvestorCumulative / StockChart SMA presets / RSI / MACD: already on the
  canonical zinc token
This commit is contained in:
claude-owner
2026-06-01 11:14:27 +09:00
parent 0aebdc9bdb
commit c172f244e3

View File

@@ -1050,7 +1050,16 @@ export function StockChart({ chart, prediction, targets }: Props) {
<button
type="button"
onClick={() => void toggleFullscreen()}
className="flex items-center gap-1 rounded-full border border-zinc-800 px-2 py-0.5 text-[10px] text-zinc-400 transition hover:border-zinc-600 hover:text-zinc-200"
// aria-pressed 시각 피드백 — 같은 툴바의 SMA/RSI/MACD 토글과 동일한 canonical
// 토큰(border-zinc-600 bg-zinc-800/80 text-zinc-100) 으로 active 톤 맞춤.
// 이전엔 라벨 텍스트("⛶ 전체화면" → "⛶ 해제") 만 바뀌고 border/bg 변화가 없어,
// 시각적으로 옆 토글들과 "눌렸음" 신호의 강도가 달랐음. fullscreen 모드에서도
// 툴바는 그대로 노출되므로 (overlay 안에 같은 차트 + 툴바) 누른 상태 표시가 의미 있음.
className={`flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] transition ${
fullscreen
? "border-zinc-600 bg-zinc-800/80 text-zinc-100"
: "border-zinc-800 bg-transparent text-zinc-400 hover:border-zinc-600 hover:text-zinc-200"
}`}
title={fullscreen ? "전체화면 해제 (ESC / F)" : "전체화면 (F)"}
aria-pressed={fullscreen}
>