[FE-32] 웹 시설상품 섹션 컴포넌트 (W-PG)
작업 내용 (설계 의도)
변경 사항
web/app/portal/facilities/[id]/_components/ProgramSection.tsx 신규(standalone — 배선은 FE-34).
- 시설상품 목록(ProgramCard: 가격 위계 최상단·정원·소요시간) + [상품 등록] 다이얼로그(이름·설명·가격·정원·소요시간).
usePrograms/createProgram(FE-29),ProgramFormSchema(FE-26)로 검증. shadcn Dialog/Input/Button. - 4상태(로딩 스피너/0건 “등록된 상품이 없어요”/에러 toast/목록). 색은 Tailwind 시맨틱 클래스(라이트/다크). 로직
_hooks/.
근거: design-fe-web W-PG.
의존
- FE-29 (programs lib)
다이어그램
클래스 의존
flowchart LR PS["ProgramSection"] --> Lib["lib/portal/programs.ts (FE-29)"] Integ["facilities/[id]/page (FE-34)"] --> PS
테스트 케이스
- 시설상품 목록이 가격·정원·소요시간과 함께 렌더된다
- 등록 다이얼로그 제출 시 createProgram이 호출되고 목록이 갱신된다
- 가격<0·정원<1 입력 시 인라인 검증 에러
- 0건 시 “등록된 상품이 없어요”가 렌더된다
- 라이트/다크 시맨틱 클래스로 렌더된다