[Content] 홈 Shop By Category CMS

Strapi 담당자: 미정 (Strapi 기반)

개요

YETI 홈 페이지 하단 영역에 카테고리 이미지를 가로 스크롤로 나열하는 섹션. 각 이미지마다 이동 URL을 설정할 수 있으며, 이미지 전체 클릭으로 이동한다. 텍스트/버튼 오버레이 없이 이미지와 카테고리명만 표시한다.

화면 구조

[섹션 타이틀: "Shop By Category"]

┌──────────────────────────────────────────────────── 가로 스크롤 ─┐
│  ┌────────────┐  ┌────────────┐  ┌────────────┐  ┌────────────┐  │
│  │   image    │  │   image    │  │   image    │  │   image    │  │
│  │            │  │            │  │            │  │            │  │
│  │            │  │            │  │            │  │            │  │
│  └────────────┘  └────────────┘  └────────────┘  └────────────┘  │
│  Drinkware        Coolers         Bags            Outdoor...      │
│  ← 각 이미지 카드 전체 클릭 가능 →                                │
└────────────────────────────────────────────────────────────────────┘

PC / Mobile 모두 가로 스크롤 동일
이미지 아래 카테고리명 표시
이미지 카드 전체 클릭으로 이동

필드 정의

섹션 설정

필드	타입	필수	설명
sectionTitle	Text	X	섹션 상단 타이틀. 미입력 시 타이틀 비노출

카테고리 아이템 (무제한 추가)

필드	타입	필수	설명
pcImage	Image Upload	O	PC용 카테고리 이미지
mobileImage	Image Upload	O	Mobile용 카테고리 이미지
categoryName	Text	O	이미지 아래 표시되는 카테고리명
goToUrl	URL	O	이미지 클릭 시 이동 경로 (현재 탭)
order	Number	O	아이템 정렬 순서 (낮을수록 먼저 표시)

정책

클릭 동작

이미지 카드 전체 영역 클릭 → goToUrl로 이동

노출 규칙

조건	처리
아이템 0개	섹션 전체 비노출
`sectionTitle` 미입력	타이틀 영역 비노출, 이미지 목록은 표시
노출 기간 설정	없음 (항상 노출)

CMS 입력 구조

[Shop By Category 섹션] ──────────────────────
  sectionTitle

  [아이템 1]
    pcImage
    mobileImage
    categoryName
    goToUrl
    order

  [아이템 2]
    ...

  [+ 아이템 추가]

홈 전체 섹션 비교 (업데이트)

섹션	미디어	텍스트 위치	클릭	스크롤	개수
메인 히어로 배너	이미지 + 영상	미디어 옆 (좌/우)	배너 전체 + 버튼 별도	캐러셀	무제한
중간 이미지 컨테이너	이미지	이미지 위 오버레이	버튼만	X	5개 고정 (1,2: 1열 / 3,4,5: 2열 or 3열)
큐레이션	이미지	이미지 위 오버레이	카드 전체	가로 스크롤	그룹/아이템 무제한
Shop By Category	이미지	이미지 아래 카테고리명	카드 전체	가로 스크롤	무제한

변경 이력

버전	날짜	변경 내용
v1.0	2026-07-09	최초 작성 — 카테고리 가로 스크롤, 이미지+카테고리명+goToUrl 구조