[FE-04] 테마 UI 프리미티브 (components/ui)

작업 내용 (설계 의도)

변경 사항

근거: 20260704-채팅시스템고도화-design-fe-app.md “컴포넌트 트리”.

전 화면이 재사용할 도메인 무관 프레젠테이션 프리미티브를 components/ui/에 신설한다. 모든 색은 useTheme() 토큰만 사용(하드코딩 금지, 라이트/다크 자동). 화면 티켓(FE-09~14)의 공통 선행.

ThemedText, ThemedView — 토큰 배경/텍스트 적용 래퍼.
Button — 주요(accent)/보조(surface) variant, disabled·loading 상태.
Card, ListItem — surface 배경 리스트/카드.
Badge — 안읽은 수 원형 배지(0이면 미표시).
Avatar — 이니셜/아이콘 플레이스홀더.
EmptyState, ErrorView(재시도 콜백), LoadingView(스켈레톤/스피너).
SegmentedControl — 공개/비공개·발화권한 선택.

컴포넌트당 200줄 초과 금지. 비즈니스 로직 없음(순수 프레젠테이션). accessibilityRole/accessibilityLabel 필수.

의존

FE-01 (테마 토큰)

다이어그램

클래스 의존

flowchart LR
    Primitives[components/ui/*] --> useTheme
    Screens[화면 컴포넌트] --> Primitives

테스트 케이스

Badge가 count>0이면 숫자를, count=0이면 아무것도 렌더하지 않는다
ErrorView가 메시지를 표시하고 재시도 버튼 탭 시 콜백을 호출한다
EmptyState가 전달된 안내 문구를 렌더한다
Button disabled 시 onPress가 호출되지 않고 accessibilityState disabled가 true다
다크 모드에서 ThemedView 배경이 다크 토큰 값으로 렌더된다