[Content] 홈 상품 섹션 — 신상품 · 추천상품

개요

YETI 홈 페이지 중간 영역에 위치하는 두 개의 동적 상품 섹션.
CMS(Strapi) 관리 대상이 아니며, API에서 실시간으로 상품 데이터를 조회하여 표시한다.

---

페이지 내 위치 순서

[메인 히어로 배너]
[홈 중간 이미지 컨테이너]
─────────────────────────────────────
[신상품 섹션]        ← 이 문서
[추천상품 섹션]      ← 이 문서
─────────────────────────────────────
[큐레이션 섹션]
[Shop By Category]
[BUILT FOR THE WILD® 브랜드 섹션]
[YETI Delivers 혜택 배너]
[푸터]

---

섹션 1 — 신상품

개요

최근 등록된 신상품을 표시한다. 상품 카드 구성은 PLP 카드와 동일.

데이터 기준

항목	내용
정렬 기준	상품 등록일 내림차순 (최신순)
노출 조건	visible=true 상품만 표시
색상 그룹핑	PLP와 동일 — style_key 기준 그룹핑, 대표 색상 1장으로 표시
페이지당 표시 수	20개

API

GET /v2/products/grouped
  ?sort=NEWEST
  &page={n}
  &size=20
  &sourceSite=YETI

---

섹션 2 — 추천상품

개요

조회수가 높은 인기 상품을 표시한다. 상품 카드 구성은 PLP 카드와 동일.

데이터 기준

항목	내용
정렬 기준	상품 조회수 내림차순 (많이 조회된 순)
노출 조건	visible=true 상품만 표시
색상 그룹핑	PLP와 동일 — style_key 기준 그룹핑, 대표 색상 1장으로 표시
페이지당 표시 수	20개

API

GET /v2/products/grouped
  ?sort=POPULAR
  &page={n}
  &size=20
  &sourceSite=YETI

---

공통 — 페이지네이션

두 섹션 모두 섹션 하단에 동일한 페이지네이션 컨트롤을 표시한다.

화면 구조

                  ┌───┐             ┌───┐
                  │ < │  n / 총개수  │ > │
                  └───┘             └───┘

동작 규칙

항목	내용
n	현재 페이지 번호 (1-based 표시. API는 0-based)
총개수	API totalElements (그룹 수)
< 버튼	이전 페이지 이동. 첫 페이지(n=1)일 때 비활성화
> 버튼	다음 페이지 이동. 마지막 페이지일 때 비활성화
페이지 변경 시	섹션 상단으로 스크롤 이동

마지막 페이지 계산: Math.ceil(totalElements / 20)

---

상품 카드

PLP 카드 컴포넌트와 동일하게 사용한다.

• 컬러칩 표시 (대표 색상 + colorVariants)
• 장바구니 담기: sizes.length === 1 → 즉시 담기 / sizes.length > 1 → 사이즈 선택 모달
• 썸네일 클릭 → 상품 상세 페이지 이동

상세 사양: PLP 색상 그룹핑 문서 참고

---

변경 이력

버전	날짜	변경 내용
v1.0	2026-07-09	최초 작성 — 신상품(최신순), 추천상품(조회수순), 각 20개, 페이지네이션(< n/총개수 >)