콘텐츠로 이동

[YETI] PLP Hero

개요

PLP 상단 Hero 영역을 Strapi CMS에서 URL 단위로 관리. URL에 매칭된 Hero가 없으면 Hero 영역 없이 상품 그리드를 바로 표시한다.

정책

Hero는 URL(pathname) 기준으로 매핑
하나의 Hero를 여러 URL에 재사용 가능
Hero 데이터가 없는 URL은 Hero 미노출 — 상품 그리드 바로 표시
Hero 영역 오류가 PLP 전체 오류로 이어지면 안 됨 (영역 독립 격리)

Hero 유형 3종

1. Explore Carousel (L1 카테고리용)

상품 슬라이드 + 카테고리 배너로 구성.

필드	필수	설명
heading	O	Hero 제목
products	O	슬라이드에 노출할 상품 목록 (썸네일 + 상품명 사용)
products_button_label	X	각 상품 카드 버튼 텍스트
products_button_link	X	각 상품 카드 버튼 링크
category_banners	X	상품 행 하단 이미지 버튼 행

category_banners 레이아웃

배너 수	레이아웃
1개	100% 전체 너비
2개	50/50 분할
3개	33/33/33 분할

적용 예시: /drinkware, /coolers, /bags, /kitchen

배경 비디오 위에 텍스트/버튼 오버레이.

필드	필수	설명
heading	O	비디오 위 제목
video_url	O	배경 비디오 URL
poster_image	권장	비디오 로딩/재생 불가 시 fallback 이미지
button_label	X	CTA 버튼 텍스트
button_link	X	버튼 링크
button_background_color	X	버튼 배경색 (hex)
button_text_color	X	버튼 텍스트색 (hex)
heading_color	X	제목 색상 (hex, 기본: white)

적용 예시: /coolers/hard-coolers, /outdoor-living/chairs

이미지 슬라이드 위에 고정 텍스트/버튼 오버레이.

필드	필수	설명
headline	O	메인 제목
slides	O	이미지 슬라이드 목록 (최대 8개)
description	X	설명 문구
button_label	X	CTA 버튼 텍스트
button_link	X	버튼 링크
headline_color	X	제목 색상 (hex, 기본: white)
description_color	X	설명 색상 (hex, 기본: white)
button_background_color	X	버튼 배경색
button_text_color	X	버튼 텍스트색

텍스트/버튼은 캐러셀 위에 고정 오버레이 (슬라이드마다 바뀌지 않음)
각 슬라이드 이미지는 개별 링크 설정 가능

적용 예시: /collections/new-arrivals, 시즌 기획전

Fallback 처리

상황	처리
URL이 매핑 목록에 없음	Hero 미노출
Hero 데이터 null	Hero 미노출
API 호출 실패	Hero skip → 상품 그리드 렌더링
video_url 로딩 실패	poster_image로 대체
products 비어있음	Hero 미노출
category_banners 이미지 로딩 실패	해당 배너만 숨김

변경 이력

버전	날짜	변경 내용
v1.0	2026-06-24	최초 작성