[YETI] PLP 페이지 레이아웃

화면 정보

Screen ID	Screen Title	진입 조건
SHOP-PLP-02	상품 목록 (PLP)	헤더 카테고리 탭 클릭 / 메가메뉴 서브카테고리 링크 클릭

개요

YETI PLP 전체 페이지 구조를 정의한다.
브레드크럼은 PLP에서 표시하지 않는다.

페이지 레이아웃

┌─────────────────────────────────────────────────────────┐
│                    [Hero 영역]                           │
│           (Strapi CMS 매핑 — plp-hero 참고)              │
├─────────────────────────────────────────────────────────┤
│  [서브카테고리 탭]   ← TAB형 카테고리에만 표시            │
├────────────────┬────────────────────────────────────────┤
│                │  BEST MATCHES   N Results   [정렬 ▾]   │
│  [필터         │  ─────────────────────────────────────  │
│   사이드패널]  │  [상품 카드] [상품 카드] [상품 카드]    │
│                │  [상품 카드] [상품 카드] [상품 카드]    │
│                │  [상품 카드] [상품 카드] [상품 카드]    │
│                │  …  (무한 스크롤)                       │
└────────────────┴────────────────────────────────────────┘

추천 상품, 카테고리 FAQ 등 상품 그리드 하단 부가 콘텐츠 섹션은 제외한다. PLP는 Hero + 서브카테고리 탭 + 필터 사이드패널 + 상품 그리드로만 구성된다.

Hero

Strapi CMS에서 URL 단위로 매핑된다.
상세 정의 → PLP Hero

서브카테고리 탭

sub_type = 'TAB'인 카테고리에서만 표시된다.

항목	내용
표시 조건	현재 카테고리 `sub_type = TAB`인 경우만
구성	아이콘 + 탭명 (예: 🥤 Hydration \| ☕ Coffee & Tea)
탭 선택 시	해당 탭 상품만 필터링, 필터 Facet 재계산
탭 미선택	전체 상품 표시

탭 동작 상세 → PLP 필터

필터 사이드패널

항목	내용
위치	상품 그리드 좌측 (데스크톱)
기본 상태	모든 필터 그룹 접힘(collapsed)
동작	필터 그룹 헤더 클릭 시 펼침/접힘 토글
모바일	화면 하단 “필터” 버튼 탭 → 전체 화면 오버레이로 표시

필터 그룹 목록 (접힘 기본)

노출되는 필터 그룹과 순서는 카테고리마다 다르다 (예: Drinkware는 Product Type·Size·Color·Beverage Type·Lid Type·Features, Coolers는 Category·Product Type·Collection·Price·Color). Oracle Red Bull Racing은 필터 자체가 없다.

카테고리별 전체 목록 → PLP 필터 > 카테고리별 필터 구성

상품 그리드

항목	내용
열 수	3열 (데스크톱 기준)
기본 정렬	Best Matches
결과 수 표시	`N Results` — 현재 필터 조건 기준 상품 수
스크롤 방식	무한 스크롤 (하단 도달 시 다음 페이지 자동 로드)

정렬 옵션

값	표시명	기본
best_matches	Best Matches	✅
newest	Newest	—
price_asc	Price: Low to High	—
price_desc	Price: High to Low	—

정렬 옵션은 URL 파라미터(?sort=best_matches)와 동기화된다.

상품 카드 상세 스펙 → PLP 컬러 그룹핑, PLP 프로모션 카드

품절 상품 노출 정책

YETI는 품절 상품이라도 카테고리 상품 진열 순서(category_sort.sort)에서 자동으로 하단으로 밀려나면 안 된다. 등록된 sort 순서를 그대로 유지한 채 노출한다.

항목	내용
정렬 순서	품절 여부와 무관하게 `category_sort.sort` 등록 순서 그대로
품절 표시	카드에 “품절(Sold Out)” 배지만 표시, 위치 이동 없음
다른 스토어와의 차이	WORKSOUT/CARHARTT/GRAMICCI에는 품절 상품을 하단으로 내리는 기존 배치(자동 정렬 로직)가 있는 것으로 추정되나 이 문서 저장소에는 그 로직이 별도로 문서화되어 있지 않음 — YETI는 이 배치 적용 대상에서 제외해야 함
완전 품절(전체 사이즈/색상 소진)	카드 자체는 그대로 노출, 장바구니 담기만 비활성화

개발팀 확인 필요: 다른 스토어의 품절 자동 하단 정렬 로직(배치명·트리거 조건)을 먼저 특정한 뒤, 해당 로직에서 YETI(sourceSite=YETI 또는 동일한 스토어 구분값)를 제외 처리해야 한다. 아래 미결 사항 참고.

범위 밖 (Out of Scope)

추천 상품 섹션 — 미노출
카테고리 FAQ 섹션 — 미노출
상품 그리드 하단 부가 콘텐츠 전반 — 미노출

미결 사항

항목	내용
모바일 열 수	피그마 확인 필요 (2열 예상)
품절 자동 하단 정렬 로직 특정	개발팀 확인 필요 — 다른 스토어에 적용 중인 품절 하단 정렬 배치의 정확한 이름·트리거 조건 확인 후 YETI 제외 처리 방법 결정

합격 기준

변경 이력

버전	날짜	변경 내용
v1.1	2026-07-28	추천 상품·카테고리 FAQ 섹션 제거(PLP 부가 콘텐츠 전체 제외). 품절 상품 노출 정책 추가 — 품절 상품도 자동으로 하단 정렬되지 않고 등록 sort 순서 유지. 필터 그룹 목록을 카테고리별 상세로 대체(plp-filter 링크)
v1.0	2026-07-23	최초 작성 — PLP 전체 레이아웃 정의. 브레드크럼 제거, 필터 사이드패널(접힘 기본), 3열 그리드, Best Matches 기본 정렬, 무한 스크롤, 추천 상품, 카테고리 FAQ