P Primer · 17

추천 준비물

Product list

링크는 연회색 버튼 「쿠팡에서 보기」(바깥 링크 아이콘 붙음)나 표·체크리스트 속 파란 글자예요. 초록 같은 강조색 버튼은 쓰지 않아요.

쓰는 규칙대가성 문구가 상품 묶음 바로 위에 붙어 있고, 링크는 광고 링크로 표시한다. 실제 링크가 없는 준비물은 글자로만 둔다.

다른 이름: ProductList
···
usage (Astro)
---
// src/pages/[post].astro
import { ProductList } from '../components/registry';
---
<ProductList items={products} disclosure={AFFILIATE_DISCLOSURE} />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "ProductList": "rows" }
}
props (TypeScript)
export interface ProductListProps {
  items: Product[];
  /** 대가성 문구 — 상품 블록(data-product-block) 바로 앞 형제 요소에 있어야 한다(seo:audit) */
  disclosure: string;
  variant?: VariantOf<'ProductList'>;
}

rows는 상자 안 줄마다 상품 이름과 이유, 오른쪽에 「쿠팡에서 보기」 회색 버튼(바깥 링크 아이콘)이 서요. table은 「준비물」「왜 필요한가요」 머리 글자가 있고 맨 오른쪽 링크 칸은 머리 글자 없이 파란 「쿠팡에서 보기」 글자만 있는 표로, 칸마다 선이 있고 짝수 줄이 연한 회색이에요. checklist는 줄마다 빈 네모 칸과 이름·이유, 링크는 버튼 없이 작은 파란 글자예요.

링크가 눈에 덜 띄길 원하면 checklist가 가장 조용하고, 눌러 볼 자리를 분명히 하려면 rows가 맞아요. table은 폰에서 열이 좁아질 수 있어요. 링크가 없는 상품은 준비물 줄로만 나와요.

링크에는 검색엔진에 광고 링크임을 알리는 표시가 달려 있어요. 화면에는 보이지 않아요.

이럴 때 — 변형 3

  1. rows목록 준비물이 두세 개일 때 — 줄마다 조용한 버튼.쓰는 사이트 3곳: babyplay, babysick, feeding
  2. table표 왜 필요한지 설명이 중요할 때 — 준비물 | 왜 필요한가요 | 링크.쓰는 사이트 5곳: babysleep, milestone, newborn, vaccination, 허브
  3. checklist체크리스트 출산 준비물처럼 챙길 것 목록일 때 — 빈 칸과 글자 링크.쓰는 사이트 3곳: babyfood, birthprep, toddlerfood
페이지로 열기 ↗

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.