이 문서는 여러 화면에서 재사용되는 상품 카드 컴포넌트 스펙 문서다. 특정 단일 화면에 종속되지 않으므로 “화면 정보” 표 대신 아래 관련 화면 목록으로 대체한다.
모든 상품 표시 영역에서 일관된 정보 구조와 시각적 표현을 유지하기 위한 상품 카드 컴포넌트 표준 스펙이다. 이미지·브랜드명·가격·플래그·사이즈·품절 여부 등 카드 구성 요소의 순서와 규칙을 정의한다.
원본: 상품 표시 정책.md 전체.
- 이미지, 브랜드명, 제품명, 가격, 플래그, 할인율, 사이즈, 품절여부로 구성된다.
- 각 요소는 일관된 순서와 레이아웃으로 표시된다.
| 항목 |
기준 |
| 이미지 종류 |
기본 썸네일 이미지 + 호버 시 전환되는 대체 이미지 2종 |
| 비율 |
약 2:3 |
| 로딩 처리 |
스켈레톤 방식 |
- 브랜드명과 상품명은 Bold 처리한다.
- 브랜드명은 상품명 상단에 배치한다.
- 텍스트 오버플로우 시 말줄임표(
...)로 처리하며, 브랜드명은 최대 1줄, 상품명은 최대 2줄까지 표시한다.
| 상태 |
표시 |
| 정상가 |
기본 텍스트 스타일로 표시 |
| 할인가 |
원가는 취소선 + 회색 처리, 할인가는 Bold 처리, 할인가 우측에 할인율(%) 표시 |
| 품절 상품 |
가격 영역에 ‘품절’ 텍스트로 대체 표시 |
| 항목 |
기준 |
| 표시 가능 플래그 |
신상품, 회원전용, 앱전용, 컬렉션 상품, 무료배송 |
| 우선순위 |
신상품 > 회원전용 > 앱전용 > 컬렉션 상품 > 무료배송 |
| 최대 표시 개수 |
한 상품당 최대 5개까지 |
| 전부 활성화된 경우 |
우선순위 순서대로 모두 표시 |
| 컬렉션 플래그 |
설정된 컬렉션명을 표시 |
- 상품 호버 시 사이즈 정보가 표시된다.
- 사이즈 표시는 재고 유무에 따라 구분(재고 있음: 정상 컬러 / 품절: 회색 처리)한다. 재고값(
current_stock) 계산 규칙은 공통 ERP 재고 매핑 참고.
- 호버 시 이미지가 대체 이미지로 변경된다.
- 상품 카드 클릭 시 상품 상세 페이지로 이동한다.
라플 상품은 일반 상품 카드와 다른 구성을 사용한다. 응모 탭에서 노출된다.
- 상품 이미지, 상품명, 가격(버튼 형태)으로 구성된다.
- 일반 상품과 다르게 응모 탭에서 정보를 제공한다.
- 단일 이미지만 사용하며, 호버 시 이미지 변경 효과가 없다.
- 이미지 비율은 일반 상품과 동일하다.
- 가격은
{price}원 형식으로 버튼 형태로 표시된다.
- 응모 기간이 종료된 경우 가격 버튼이 “응모 종료” 버튼으로 변경된다.
- 가격 버튼 클릭 시 응모 상세페이지로 이동한다.
- 라플 상품은 호버 시 사이즈 정보가 표시되지 않는다.
- 응모 기간과 응모 여부에 따라 버튼 상태가 자동으로 변경된다.
| 상태 |
버튼 |
| 응모 가능 |
“응모하기” 버튼 활성화 |
| 응모 마감 |
“종료된 응모입니다.” 버튼 활성화 |
| 지원한 응모 |
“이미 지원한 응모입니다.” 버튼 활성화 |
- 상품 카드는 PLP·피드·숏폼·라플 등 어느 화면에서 사용되든 위 스펙을 그대로 따른다. 화면별 레이아웃(그리드 열 수, 무한 스크롤 단위 등)은 각 화면 문서에서 별도로 정의한다.
- 재고/품절 판정 값은 항상 공통 ERP 재고 매핑 문서의
current_stock 규칙을 참조한다. 이 문서에서 재고값을 재정의하지 않는다.
| 항목 |
내용 |
| 라플 카드 변형 문서 이관 |
현재 라플(응모) 카드 변형 섹션을 이 상품 카드 컴포넌트 문서에 포함해뒀다. 향후 라플 도메인 문서(Content/raffle-*.md 또는 별도 RAF 도메인 문서)가 생기면 해당 문서로 이관 검토 필요. 라플 문서는 다른 작업자가 Content/ 밑에 만들 예정이므로, 이관 시점과 담당자를 별도로 조율해야 함 |
| 버전 |
날짜 |
변경 내용 |
| v1.0 |
2026-07-30 |
최초 작성 — 상품 표시 정책.md 전체 이전. 여러 화면에서 재사용되는 상품 카드 컴포넌트 스펙으로 명시, 라플 카드 변형 유지 |