[FE-11] 커뮤니티 목록·개설 화면
작업 내용 (설계 의도)
변경 사항
근거: 설계 문서 S3·S4. 파일: app/communities/index.tsx·app/communities/new.tsx(신규, 이 티켓 단독 소유).
신규 동아리 목록·개설 화면. 기존 app/community/*(post 게시판)와 라우트 충돌 없이 복수형 communities/로 분리.
- S3 목록:
useCommunities(FE-07). 검색 입력 + 커뮤니티 카드(종목·이름·공개여부·멤버수·설명) + 플로팅 개설 CTA. 4상태(loading 스켈레톤/empty “첫 동아리를 만들어보세요”/error/success). 카드 탭 →communities/{id}. - S4 개설:
useCreateCommunity(FE-07). 이름·설명·종목(select)·공개여부(SegmentedControl) 폼, 하단 고정 단일 CTA(유효 시 활성). 제출 성공 → 상세로 이동 + 방목록 캐시 무효화(전용방 자동생성). 실패 인라인. - 토스 패턴: 검색+카드 리스트+플로팅 단일 CTA(S3), 한 화면 한 과업 폼+하단 고정 CTA(S4).
색 하드코딩 금지, 라이트/다크. 유효성·가공 로직은 훅/유틸.
의존
- FE-04 (UI 프리미티브), FE-07 (커뮤니티 훅)
다이어그램
클래스 의존
flowchart LR List[communities/index] --> useCommunities New[communities/new] --> useCreateCommunity List --> Card New --> SegmentedControl
테스트 케이스
- 커뮤니티 목록이 카드로 렌더되고 공개/비공개 표시가 정확하다
- 목록이 비면 빈 상태와 개설 유도가 렌더된다
- 개설 폼 필수값 미입력 시 CTA가 비활성이다
- 개설 성공 시 상세 화면으로 이동하고 방목록 캐시가 무효화된다
- 개설 실패 시 인라인 오류가 표시되고 CTA가 복구된다