[FE-31] 웹 운영시간·휴무 섹션 컴포넌트 (W-OH/W-HD)
작업 내용 (설계 의도)
변경 사항
web/app/portal/facilities/[id]/_components/OperatingHoursForm.tsx와 _components/HolidaySection.tsx 신규(standalone — 시설 상세 페이지 배선은 FE-34).
- OperatingHoursForm(W-OH): 요일별 행(오픈~마감·브레이크 추가/삭제·슬롯단위·정원),
ProgramFormSchema대신OperatingHoursFormSchema(FE-26)로 검증,updateOperatingHours(FE-28) 호출. 하단 단일 저장 CTA. shadcn Input/Button. - HolidaySection(W-HD): 휴무일 칩 리스트 + 날짜 추가 다이얼로그,
addHoliday/removeHoliday(FE-28). - 색은 Tailwind 시맨틱 클래스(라이트/다크). 로직은
_hooks/로 추출(컴포넌트 내 비즈니스 로직 금지).
근거: design-fe-web W-OH/W-HD.
의존
- FE-28 (operatingHours/holidays lib)
다이어그램
클래스 의존
flowchart LR OH["OperatingHoursForm"] --> Lib1["lib/portal/operatingHours.ts (FE-28)"] HD["HolidaySection"] --> Lib2["lib/portal/holidays.ts (FE-28)"] Integ["facilities/[id]/page (FE-34)"] --> OH Integ --> HD
테스트 케이스
- 요일별 입력 저장 시 updateOperatingHours가 호출된다
- 오픈>=마감 입력 시 인라인 검증 에러가 표시된다
- 브레이크타임 추가/삭제가 동작한다
- 휴무일 추가 후 칩이 렌더되고 삭제가 동작한다
- 중복 날짜 추가가 멱등 처리된다(에러 아님)
- 라이트/다크 시맨틱 클래스로 렌더된다(하드코딩 색 0건)