refactor(fe): 일부 UI 공통화 (Button, BackButton, EmptyState/StatusMessage, TagChip, PageTitle)

[seongbin9786]

Changes

• Button에 pill 계열 variant 추가
  • size: cta(h-11) / pill(h-8) / pill-sm(h-9), variant: outline-foreground / destructive-solid
  • 수제 pill 버튼·className 오버라이드 치환 (confirm-popup, timeline-filter-drawer, settings-tab, tag-type-panel, auth-status-screen, record-activity, people-tab)
  • confirm-popup의 트리 안 destructive className 분기 제거
• BackButton 공통화
  • className까지 동일했던 수제 뒤로가기 3곳 치환 (settings-page-header, person-page-header, profile-onboarding)
  • Button ghost/icon-lg 기반, focus-visible ring 확보
• EmptyState / StatusMessage 부품 추가
  • StatusMessage: tone(muted/error) x inset(screen py-20 / list py-12)
  • 로딩·에러·안내 문단 19곳, 빈 상태 4벌 치환
  • 파일마다 달랐던 여백(py-8/10/12/20)을 screen/list 2단계로 통일
• TagChip 컴포넌트화
  • size 5단계 x tone(primary/foreground/colored) x surface, selected 시 aria-pressed 내장
  • tagChipClass 호출부 11곳 + timeline-filters 우회 사본(personFilterChipClass) 치환
  • 관계 태그 팔레트·색 유틸을 lib/relation-tag-colors.ts로 이관
    • ui 레이어의 도메인 지식 제거
• PageTitle 공통화
  • 22px 화면 제목 타이포 6곳 단일화 (font-black leading-tight tracking-tight)
• Story 추가 (BackButton, EmptyState, StatusMessage, TagChip, PageTitle), Button 스토리 확장

기존 컴포넌트 영향 범위

• 기존 Button variant/size 스타일 무변경 (축 추가만)
• badge의 tagChipBaseClass 합성 유지
• 시각 변화는 드리프트 통일 목적만 존재
  • timeline-tab 제목 font-extrabold -> font-black, leading-tight 추가
  • person-timeline-view 로딩 py-12 -> py-20, 빈 상태 py-10 -> py-12
  • 빈 상태 CTA 여백 mt-5 -> mt-4 통일 (people-tab, record-activity)
  • confirm-popup 확인 버튼 다크모드가 반투명에서 의도된 solid로 교정
  • record pill 2곳 높이 42 -> 44px
• 접근성 개선
  • aria-pressed 자동 부여 (period-toggle, timeline 필터)
  • 치환된 버튼 전체에 focus-visible ring 확보

To-do

• form-page-header·record/person-new 퍼널 헤더의 뒤로가기는 시각 사양이 달라 유지 (헤더 통합 시 처리)
• 픽셀 동일 유지가 불가한 3곳은 raw 유지 (people-tab 헤더 추가, not-found 홈으로, event-detail 수정 텍스트 버튼)
• relation-force-map의 색 유틸 중복은 lib 이관 준비만 완료, 치환은 추후

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mongle	Ready	Preview, Comment	Jul 18, 2026 6:03am