From 0aebdc9bdb2139ac03bfc31bbf5e27305eb9e1c6 Mon Sep 17 00:00:00 2001 From: claude-owner Date: Mon, 1 Jun 2026 11:10:00 +0900 Subject: [PATCH] =?UTF-8?q?ui(collapsible):=20unify=20subtitle=20text=20si?= =?UTF-8?q?ze=20with=20CardHeader=20(10px=20=E2=86=92=2011px)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 본문/사이드바 헤더 보조 텍스트 토큰 통일. Collapsible subtitle 이 text-[10px] 였는데, 같은 페이지 좌우(좌: 본문 카드의 CardHeader, 우: 사이드바의 Collapsible) 에서 헤더 우측 metadata 슬롯이 1px 다른 크기로 노출되고 있었음. 두 슬롯은 시각적으로 같은 역할(title 옆 보조 정보) 인데 토큰이 분기돼 있어 미세한 시각 점프 발생. 해결: Collapsible subtitle 을 text-[11px] 로 bump — CardHeader subtitle 과 동일 토큰. 사이드바는 280px 로 좁지만 기존 truncate 안전망(min-w-0 truncate) 이 그대로 overflow 를 흡수하므로 1px 키워도 wrap/clip 위험 없음. 유지: 헤더 chevron(▶) 은 text-[10px] 그대로 — 순수 장식 글리프라 subtitle 텍스트 크기와 별개 토큰. CardHeader 측은 chevron 자체가 없어 비교 대상이 아님. 다른 text-[10px] 사용처는 의도된 토큰으로 유지: - StockChart 툴바 버튼/SMA preset/수평선 chips — 액션 컨트롤군 자체 토큰. - AlertsPanel 발화 뱃지/조용히 버튼 — 보조 액션 토큰. - InvestorCumulative window 버튼 그룹 — aria-pressed 컨트롤 토큰. - ShortcutsHelp kbd — 키 글리프 토큰. - CompositeScoreCard "/ 100" / SubScore hint — footnote 캡션 토큰. 검증: tsc/next lint 통과. --- web/components/Collapsible.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/web/components/Collapsible.tsx b/web/components/Collapsible.tsx index 50a7c30..bacbfba 100644 --- a/web/components/Collapsible.tsx +++ b/web/components/Collapsible.tsx @@ -79,7 +79,12 @@ export function Collapsible({ // 손절 987,654") 사이드바 폭을 넘기는 대신 말줄임표로 끝나도록. shrink-0 였을 땐 // title 을 밀어내며 헤더가 두 줄로 깨질 수 있었음. title 쪽도 min-w-0 을 줘 flex // shrink 계산이 올바르게 되도록. - + // + // 크기 토큰: text-[11px] — CardHeader 의 subtitle 과 동일 토큰. 사이드바 패널 + // 헤더(Collapsible) 와 본문 카드 헤더(CardHeader) 가 같은 페이지 좌우에 나란히 + // 놓이므로 헤더 우측 보조 텍스트 크기를 통일. 280px 좁은 사이드바에서도 truncate + // 가 overflow 를 흡수해 1px 키워도 wrap 위험 없음. + {subtitle} )}