From 488fb32acb9c910a94d69ecc3f703984ad196a05 Mon Sep 17 00:00:00 2001
From: claude-owner <claude-owner@ejclaw.local>
Date: Fri, 29 May 2026 00:56:19 +0900
Subject: [PATCH] feat(period-tabs): rose accent + role=tab semantics for
 active period
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The active period tab previously used `bg-zinc-700`, which blends with the
zinc-toned header buttons (비교 / 공유 / Star) right beside it — users had to
read the tab label to know which period was loaded.

Switch active style to rose-500 (한국 상승 컬러 톤 — same family as positive
returns and target lines elsewhere in the app), with bold weight and a soft
glow. Inactive tabs unchanged. Also adds tablist/tab/aria-selected semantics
so screen readers announce the active period.
---
 web/components/PeriodTabs.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/web/components/PeriodTabs.tsx b/web/components/PeriodTabs.tsx
index 3cd5489..31d6d90 100644
--- a/web/components/PeriodTabs.tsx
+++ b/web/components/PeriodTabs.tsx
@@ -38,17 +38,30 @@ type Props = {
 };
 
 export function PeriodTabs({ value, onChange }: Props) {
+  // 활성 탭 스타일:
+  //   이전엔 `bg-zinc-700` 만 사용해 헤더의 다른 zinc-톤 버튼(비교/공유/Star) 과 색이 거의 동일,
+  //   페이지에서 "지금 어느 기간이 선택돼 있는지" 한눈에 안 들어왔음.
+  //   한국 컬러 상승 톤(rose-500) 으로 칠해서 zinc 버튼군 사이에서 즉시 식별. 다른 모듈의 활성/positive
+  //   상태(목표가 라인, 등락 양수 등) 도 같은 rose 계열이라 톤 일관성 유지.
+  // aria-pressed: 토글 그룹 의미 명시 — 스크린리더가 선택 상태 읽어줌.
   return (
-    <div className="inline-flex rounded-full border border-zinc-800 bg-zinc-900 p-1 text-xs">
+    <div
+      role="tablist"
+      aria-label="기간 선택"
+      className="inline-flex rounded-full border border-zinc-800 bg-zinc-900 p-1 text-xs"
+    >
       {PERIODS.map((p) => {
         const active = value === p.id;
         return (
           <button
             key={p.id}
+            type="button"
+            role="tab"
+            aria-selected={active}
             onClick={() => onChange(p.id, p.interval, p.days)}
             className={
               active
-                ? "rounded-full bg-zinc-700 px-3 py-1 font-medium text-zinc-50"
+                ? "rounded-full bg-rose-500 px-3 py-1 font-semibold text-white shadow-sm shadow-rose-500/40"
                 : "rounded-full px-3 py-1 text-zinc-400 hover:text-zinc-100"
             }
           >