[FE-18] 앱 전역 게시글 종목 필터 (A-P5)
작업 내용 (설계 의도)
변경 사항
기존 mobile/app/(tabs)/community.tsx(전역 게시글 목록 탭)에 종목 필터를 추가하고, mobile/components/community/SportCategoryChips.tsx(가로 스크롤 칩) 컴포넌트를 신규 작성한다.
- 토스 카테고리 칩: [전체][⚽축구][🏀농구]… 선택 칩만 accent(화면당 1곳).
getSportCategoryDisplay(기존 헬퍼) 재사용. - 선택 시
usePosts({sportCategory})(FE-06 확장)로 필터 조회. 전체 선택 시 종목 미지정 포함 전체. - 4상태 — 해당 종목 0건 시 “이 종목 글이 아직 없어요”(정상). 색 토큰.
근거: design-fe-app A-P5, FR-6.
의존
- FE-06 (usePosts criteria 확장)
다이어그램
클래스 의존
flowchart LR Tab["(tabs)/community"] --> Chips["SportCategoryChips"] Tab --> Hook["usePosts({sportCategory}) (FE-06)"] Chips --> Fmt["lib/community-format getSportCategoryDisplay"]
테스트 케이스
- 칩 선택 시 usePosts가 해당 sportCategory로 조회한다
- “전체” 선택 시 종목 미지정 포함 전체가 조회된다
- 해당 종목 0건 시 “이 종목 글이 아직 없어요”(정상)가 렌더된다
- 선택된 칩만 accent 색으로 강조된다
- 라이트/다크 렌더