[Content] 홈 큐레이션 CMS

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

참고: Strapi의 Soph 큐레이션 관리와 유사한 구조. 큐레이션 그룹 단위로 묶어서 설정할 수 있다는 점이 차이점.

개요

YETI 홈 페이지에 큐레이션 그룹 단위로 가로 스크롤 카드 섹션을 Strapi CMS에서 관리하는 기능. 그룹과 아이템 모두 무제한 추가 가능하며, 카드 전체 클릭으로 이동한다.

화면 구조

PC / Mobile 모두 가로 스크롤 동일
텍스트 + 버튼: 이미지 위 오버레이
아이템 카드 전체 클릭 가능
마지막 카드 위치에 “Shop All” 고정 카드 노출 (shopAllUrl 입력 시)

┌──────────────────────────────────────────────── 가로 스크롤 ─┐
│  ┌──────────┐  ┌──────────┐  ┌──────────┐    ┌────────────┐ │
│  │  image   │  │  image   │  │  image   │    │            │ │
│  │ [badge]  │  │ [badge]  │  │          │    │  SHOP ALL  │ │
│  │ title    │  │ title    │  │ title    │    │  (고정)     │ │
│  │ desc     │  │ desc     │  │ desc     │    │            │ │
│  │ [button] │  │ [button] │  │ [button] │    └────────────┘ │
│  └──────────┘  └──────────┘  └──────────┘                   │
│   ← 카드 전체 클릭 가능 →                                    │
└──────────────────────────────────────────────────────────────┘

필드 정의

큐레이션 그룹 (무제한 추가)

필드	타입	필수	설명
groupTitle	Text	X	그룹 상단 타이틀
shopAllUrl	URL	X	“Shop All” 버튼 링크 (입력 시 Shop All 카드 노출)
order	Number	O	그룹 간 정렬 순서
items	Array	O	큐레이션 아이템 목록

“Shop All” 텍스트는 프론트 고정, 어드민에서는 링크만 설정
shopAllUrl 미입력 시 → Shop All 카드 비노출

큐레이션 아이템 (그룹 내 무제한 추가)

미디어

필드	타입	필수	설명
pcImage	Image Upload	O	PC용 이미지
mobileImage	Image Upload	O	Mobile용 이미지

텍스트 (이미지 위 오버레이)

필드	타입	필수	설명
badge	Text	X	배지 텍스트
badgeTextColor	Color	X	배지 색상
title	Text	O	타이틀
titleTextColor	Color	X	타이틀 색상
description	Text	X	설명글
descriptionTextColor	Color	X	설명 색상

버튼

필드	타입	필수	설명
buttonText	Text	X	버튼 라벨
buttonTextColor	Color	X	버튼 텍스트 색상
buttonBgColor	Color	X	버튼 배경 색상

링크

필드	타입	필수	설명
goToUrl	URL	O	카드 전체 클릭 시 이동 (현재 탭)
order	Number	O	아이템 정렬 순서

정책

클릭 동작

카드 전체 영역 클릭 → goToUrl로 이동
버튼은 시각적 CTA 강조 요소이며, 별도 URL 없이 카드 전체 클릭과 동일하게 동작
“Shop All” 클릭 → shopAllUrl로 이동

노출 규칙

조건	처리
그룹 내 아이템 0개	그룹 전체 비노출
`badge` 미입력	배지 비노출
`buttonText` 미입력	버튼 비노출
`description` 미입력	설명 비노출
`shopAllUrl` 미입력	Shop All 카드 비노출
노출 기간 설정	없음 (항상 노출)

CMS 입력 구조

[큐레이션 그룹 1] ──────────────────────
  groupTitle
  shopAllUrl
  order

  [아이템 1]
    pcImage / mobileImage
    badge / badgeTextColor
    title / titleTextColor
    description / descriptionTextColor
    buttonText / buttonTextColor / buttonBgColor
    goToUrl
    order

  [아이템 2] ...
  [+ 아이템 추가]

[큐레이션 그룹 2] ...
[+ 그룹 추가]

홈 전체 섹션 비교

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

변경 이력

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