C Carbon · 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는 빈 네모 칸 옆에 이름과 이유를 쓰고, 링크는 아래 글자 링크예요.

링크를 눈에 띄게 하려면 rows, 광고 느낌을 가장 줄이려면 table이나 checklist가 맞아요. checklist의 네모 칸은 빈 체크박스 모양이에요.

링크가 없는 상품은 준비물 줄로만 나와요. 링크마다 「새 창, 광고 링크」 안내가 있지만 화면 읽기 프로그램에서만 읽히고 눈에는 보이지 않아요.

이럴 때 — 변형 3

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

항목 추가 요청

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