S shadcn · 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
페이지로 열기 ↗

항목 추가 요청

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