FE-22-app-facility-detail-program

[FE-22] 앱 시설 상세 확장 — 시설상품·운영시간/휴무 표시 (A-F1)

작업 내용 (설계 의도)

변경 사항

기존 mobile/app/facility/[id]/index.tsx를 확장한다.

• 운영시간·휴무 표시 카드(OperatingHoursCard, 읽기 전용) — useFacilityDetail 응답의 운영시간·휴무 파생값. 미등록 시 섹션 숨김.
• 시설상품 목록 섹션(ProgramList/ProgramCard) — usePrograms(facilityId)(FE-07). 가격 위계 최상단·정원·소요시간 보조. [예약] 탭 → booking/new?facilityId=&programId=(FE-23) 이동. facility.program.enabled 플래그 확인.
• 하드코딩 색 → useTheme() 토큰(기존 화면 리트로핏). 섹션별 4상태(program 0건 “등록된 상품이 없어요”).

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

의존

• FE-07 (usePrograms/운영시간 파생)

다이어그램

클래스 의존

flowchart LR
    Screen["facility/[id]"] --> Fac["useFacilityDetail (기존)"]
    Screen --> Prog["usePrograms (FE-07)"]
    Screen --> Theme["useTheme tokens"]
    Card["ProgramCard 예약"] --> Book["booking/new?programId (FE-23)"]

테스트 케이스

• 시설상품 목록이 가격·정원·소요시간과 함께 렌더된다
• program 0건 시 “등록된 상품이 없어요”가 렌더된다
• 운영시간 미등록 시 운영시간 카드가 숨겨진다
• 휴무일이 있으면 표시된다
• 예약 버튼 탭 시 booking/new로 programId와 함께 이동한다
• 하드코딩 색 0건, 라이트/다크 렌더