[FE-21] 앱 소모임 예약 연결 화면 (방장, A-B2)

작업 내용 (설계 의도)

변경 사항

mobile/app/communities/[id]/bookings/new.tsx 신규. 토스 슬롯 선택 패턴 — 시설 선택 → 예약 가능 회차(slot) 선택 → [이 회차로 연결]. 기존 useSlots(booking) 재사용으로 슬롯 조회(CLOSED 슬롯 제외), useLinkCommunityBooking(FE-09)으로 POST /communities/{id}/bookings. 방장만 진입/실행(403 시 “방장만 연결할 수 있어요”).

  • 신규 예약 메커니즘을 만들지 않고 기존 booking slot을 참조만 한다(FR-13).
  • 4상태(슬롯 로딩/0건 “예약 가능한 회차가 없어요”/에러/성공→목록 갱신 후 뒤로). 색 토큰.

근거: design-fe-app A-B2.

의존

  • FE-09 (useLinkCommunityBooking)

다이어그램

클래스 의존

flowchart LR
    Screen["communities/[id]/bookings/new"] --> Slots["useSlots (기존 재사용)"]
    Screen --> Link["useLinkCommunityBooking (FE-09)"]
    Screen --> Theme["useTheme tokens"]

테스트 케이스

  • 시설 선택 후 예약 가능 회차 목록이 렌더된다
  • CLOSED 슬롯은 목록에서 제외된다
  • 회차 선택 후 연결 시 linkCommunityBooking이 slotId와 함께 호출된다
  • 슬롯 0건 시 “예약 가능한 회차가 없어요”가 렌더된다
  • 403 시 “방장만 연결할 수 있어요”가 렌더된다
  • 라이트/다크 렌더