dpdpdndn 블로그

FE-13-app-recruitment-detail

NEW2 min read

[FE-13] 앱 모집 상세 + 신청 + 개설자 취소 (A-R2)

작업 내용 (설계 의도)

변경 사항

mobile/app/recruitments/[id].tsx 신규. 토스 결제 상세 패턴 — 상단 요약 카드(참가비·정원 2/3·활동일·마감), 본문, 하단 고정 단일 CTA(“신청하기 · 5,000원”). useRecruitment로 조회.

  • 신청: useApplyRecruitment → ApplyResult 수신 → fee>0면 router.push('/payment?orderType=RECRUITMENT&orderId={applicationId}&paymentId=&checkoutUrl=...')(FE-10 pre-issued), fee=0면 즉시 확정 후 내 신청 목록.
  • 정원 마감 시 CTA disabled(“모집 마감됨”).
  • 개설자 뷰: [신청자 보기](→ A-R4) + [모집 취소](danger, useCancelRecruitment, 확인 다이얼로그).
  • 4상태: 로딩 LoadingView, 404 “없는 모집”, 403 잠금. 색 토큰.

근거: design-fe-app A-R2, 결제 재사용 결정.

의존

  • FE-08 (useRecruitment/useApply/useCancelRecruitment), FE-04 (OrderType)

다이어그램

처리 흐름 (신청)

sequenceDiagram
    participant D as recruitments/[id]
    participant H as useApplyRecruitment
    participant P as payment/new
    D->>H: mutate()
    H-->>D: {applicationId, checkoutUrl, fee}
    alt fee>0
        D->>P: push(RECRUITMENT, pre-issued checkoutUrl)
    else fee=0
        D->>D: 즉시 확정 → 내 신청 목록
    end

테스트 케이스

  • 요약 카드가 참가비·정원·마감을 렌더한다
  • 신청 탭(fee>0) 시 결제 화면으로 pre-issued 파라미터와 함께 이동한다
  • fee=0 신청은 결제 없이 확정 처리된다
  • 정원 마감 시 CTA가 disabled + “모집 마감됨”이다
  • 개설자 뷰에만 [신청자 보기]·[모집 취소]가 노출된다
  • 모집 취소 확인 후 useCancelRecruitment가 호출된다
  • 404/403 각각 없음/잠금 UI를 낸다

그래프 뷰