IntradayReturns(1D 10분봉 모드)와 PeriodReturns(일봉 이상)는 페이지의
같은 슬롯에서 모드 전환으로 갈아끼우는 한 쌍이다. 두 컴포넌트의 Bucket
서브컴포넌트는 className 문자열까지 완전히 동일했지만 각 파일에 별도
정의돼 있었다 — 한쪽 톤만 바꾸면 모드 전환 시 시각적 점프가 생기는
드리프트 리스크.
신규 web/components/ReturnBucket.tsx 로 단일 source of truth 분리:
- 색 규칙(rose/sky/zinc), 카드 톤(rounded-md border-zinc-800
bg-zinc-900/30 px-2 py-2 text-center), 라벨/값 타이포 일괄 캡슐화.
- 두 패널은 각자 horizon 라벨/계산 로직만 유지하고 렌더는 ReturnBucket
으로 위임.
기존 외부 동작/시각 결과 동일 — 동일한 className 을 한 곳으로 묶은
순수 리팩토링.
검증:
- npx tsc --noEmit clean
- npx next lint "✔ No ESLint warnings or errors"
232b94755a