[Content] 홈 중간 이미지 컨테이너 CMS

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

참고: Gramicci 메인 콘텐츠 관리 기능과 유사한 구조. 다만 홈 페이지 중간중간의 고정 위치 영역에 표시한다는 점이 다름.

개요

YETI 홈 페이지 중간 영역에 최대 5개 고정 위치의 콘텐츠 블록(imageContainerBox)을 Strapi CMS에서 관리하는 기능. 이미지 위에 텍스트/버튼 오버레이로 표시하며, 위치는 고정되고 순서 변경 불가.

레이아웃 구조

5개 블록의 위치는 고정이며 순서 변경 불가. Box 3–5 입력 개수에 따라 열 수가 자동 결정된다.

┌─────────────────────────────────────────────┐
│         imageContainerBox 1                 │
│         (전체 폭, 단독)                      │
└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐
│         imageContainerBox 2                 │
│         (전체 폭, 단독)                      │
└─────────────────────────────────────────────┘

┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│    Box 3     │  │    Box 4     │  │    Box 5     │
│  (2열 or     │  │  (2열 or     │  │  (3열 시만   │
│   3열 그리드) │  │   3열 그리드) │  │   사용)      │
└──────────────┘  └──────────────┘  └──────────────┘

노출 규칙

조건	처리
Box 미입력 (이미지 없음)	해당 영역 전체 숨김
Box 3만 입력	1열 전체 폭으로 표시
Box 3, 4 입력 (Box 5 미입력)	2열 그리드
Box 3, 4, 5 모두 입력	3열 그리드
노출 기간 설정	없음 (항상 노출)

콘텐츠 표시 방식

텍스트(badge, title, description) + 버튼은 이미지 위 오버레이로 표시
클릭 동작: 버튼만 클릭 가능 (이미지 전체 클릭 없음)

필드 정의 (Box 공통)

5개 Box 모두 동일한 필드 구조를 가집니다.

미디어

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

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

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

버튼

필드	타입	필수	설명
buttonText	Text	X	버튼 라벨
buttonTextColor	Color	X	버튼 텍스트 색상
buttonBgColor	Color	X	버튼 배경 색상
buttonUrl	URL	X	버튼 클릭 시 이동 (현재 탭)

buttonText 미입력 시 → 버튼 비노출
hover 효과: Figma 기준

CMS 입력 화면 구조

각 Box는 독립적으로 입력하며, 아래 순서로 필드를 표시합니다.

[imageContainerBox 1] ─────────────────────
  pcImage
  mobileImage
  badge          | badgeTextColor
  title          | titleTextColor
  description    | descriptionTextColor
  buttonText     | buttonTextColor | buttonBgColor
  buttonUrl

[imageContainerBox 2] ─────────────────────
  (동일)

[imageContainerBox 3] ─────────────────────
  (동일)

[imageContainerBox 4] ─────────────────────
  (동일)

[imageContainerBox 5] ─────────────────────
  (동일)  ← Box 3, 4, 5 모두 입력 시 3열 그리드

Validation 규칙

조건	규칙
`pcImage` 또는 `mobileImage` 미입력	해당 Box 저장 불가 (또는 Box 전체 비노출)
`buttonText` 입력 시	`buttonUrl` 필수
색상 미입력 시	기본값 적용 (Figma 기본 색상)

메인 배너 vs 중간 배너 비교

항목	메인 히어로 배너	홈 중간 이미지 컨테이너
미디어	이미지 + 영상	이미지만
레이아웃	좌/우 선택	고정 위치 (1,2: 1열 / 3,4,5: 입력 수에 따라 2열 or 3열)
텍스트 위치	미디어 옆 (분리)	이미지 위 오버레이
전체 클릭	O (goToUrl)	X (버튼만)
캐러셀	O	X
노출 기간	O	X
정렬 순서	O (order)	X (위치 고정)

변경 이력

버전	날짜	변경 내용
v1.0	2026-06-23	최초 작성
v1.1	2026-07-09	Box 5 추가 — 3열 그리드 지원. 노출 규칙 업데이트 (Box 3,4만: 2열 / Box 3,4,5: 3열)