[FE-09] 채팅방 목록 화면 재작성 (안읽은 배지·미리보기·빈상태)
작업 내용 (설계 의도)
변경 사항
근거: 설계 문서 S1. 파일: app/rooms/index.tsx(재작성, 이 티켓 단독 소유).
기존 방 목록은 이름·타입만 표시하고 색 하드코딩·라이트 전용이다. 안읽은 배지·최근 메시지 미리보기·빈 상태를 갖추고 테마 토큰으로 재작성한다.
- 컨테이너:
useRooms(기존) +useUnreadCounts(FE-05) 병합 → 방별 unread 매핑. - 프레젠테이션:
ListItem+Badge+ThemedText(FE-04). 방 이름(커뮤니티명/1:1 상대), 최근 메시지 미리보기(lastMessagePreview역제안, 없으면 생략), 최근 시각, 안읽은 원형 배지(0이면 숨김). - 4상태: loading(스켈레톤), empty(“참여 중인 채팅방이 없어요”), error(ErrorView+재시도), success(카드 리스트, pull-to-refresh).
- 헤더 우측에 초대 수신함 진입(대기 초대 있으면 점 배지) —
chat.community.enabledON일 때만. - 토스 패턴: 리스트 + 우측 원형 배지, 헤더 단일 액션.
비즈니스 로직(unread 병합)은 훅/유틸로, 컴포넌트는 렌더링. 색 하드코딩 금지, 라이트/다크 모두.
의존
- FE-04 (UI 프리미티브), FE-05 (unread 훅)
다이어그램
클래스 의존
flowchart LR Screen[rooms/index] --> useRooms Screen --> useUnreadCounts Screen --> ListItem Screen --> Badge
테스트 케이스
- 안읽은 수>0인 방에 배지 숫자가, 0인 방에 배지가 없음이 렌더된다
- 방 목록이 비면 빈 상태 문구가 렌더된다
- 로드 실패 시 ErrorView와 재시도 버튼이 렌더되고 재시도가 refetch를 부른다
- 방 아이템 탭 시
/rooms/{id}로 이동한다 - 다크 모드에서 배경·텍스트가 다크 토큰으로 렌더된다