[FE-11] 앱 모집 목록 화면 (A-R1)

작업 내용 (설계 의도)

변경 사항

mobile/app/recruitments/index.tsx 신규. 토스 피드 패턴 — 카드 리스트 + 하단 플로팅 단일 CTA(개설), 상단 [전체/우리 모임] 세그먼트(communityId 필터 옵션). useRecruitments로 조회, 4상태(LoadingView/EmptyState/ErrorView/리스트)를 components/ui로 처리. 색은 useTheme() 토큰(라이트/다크). recruitment.enabled 플래그 OFF면 진입점 미노출(게이팅은 상위 FE-24이 담당하나 화면 자체는 플래그 확인).

카드: 제목·정원·참가비(무료 표기 포함)·D-day 마감·상태 배지(OPEN=success). 근거: design-fe-app A-R1, 4상태 표.

의존

  • FE-08 (useRecruitment), FE-05 (플래그)

다이어그램

클래스 의존

flowchart LR
    Screen["recruitments/index"] --> Hook["useRecruitments (FE-08)"]
    Screen --> UI["components/ui Card/EmptyState/ErrorView/LoadingView"]
    Screen --> Theme["useTheme tokens"]

테스트 케이스

  • 목록 데이터가 카드로 렌더된다(제목·참가비·D-day)
  • 0건 시 EmptyState “아직 모집이 없어요”가 렌더된다
  • fetch 실패 시 ErrorView + 재시도 버튼이 렌더된다
  • 개설 CTA 탭 시 recruitments/new로 이동한다
  • 참가비 0원 모집이 “무료”로 표기된다
  • 라이트/다크 모드에서 하드코딩 색 없이 렌더된다