상품 카드와 가격 표기

언제 쓰는가

팔 것을 나열하는 모든 자리. 소프트웨어·강의·에셋·토큰 팩. 카드 하나가 상품 하나이고, 카드를 누르면 상세로 간다.

구조

<x-gujo::product-card
    :href="route('catalog.show', $product->id)"
    :title="$product->title"
    :description="$product->tagline"
    :price="$product->display_price"
    :price-suffix="__('store.price_one_time')"
    :badge="$product->is_new ? __('store.badge_new') : null"
    :thumbnail="$product->thumbnail_url"
/>

1. 카드는 <x-gujo::product-card> 하나. 썸네일이 없으면 제목 첫 글자 플레이스홀더(.gj-pcard-thumb--placeholder)가 자동으로 들어간다.
2. 제목 옆 배지는 하나만. 상태 배지는 .gj-badge--ok(정상)·.gj-badge--warn(주의)·.gj-badge--sale(할인).
3. 가격은 .gj-price 안에 정본 통화 하나로 적고, 단위는 <small> (priceSuffix) 로 붙인다. 예: $12 <small>1회</small>, $20 <small>/월</small>.
4. 할인은 .gj-price 안에 <s>원가</s> 다음 세일가, 세일가는 .gj-price--sale. 할인율은 .gj-badge--sale 배지 하나.
5. 아이콘형 목록(작은 정사각 아이콘 + 제목)은 .gj-pcard-icon.
6. 플랜 비교(구독)는 카드가 아니라 .gj-plans + .gj-plan (+ .gj-plan--hi, .gj-plan-ribbon, .gj-plan-amount).

쓰는 .gj-* 클래스와 Blade 컴포넌트

• 컴포넌트: <x-gujo::product-card>
• 클래스: .gj-pcard, .gj-pcard-thumb, .gj-pcard-thumb--placeholder, .gj-pcard-top, .gj-pcard-meta, .gj-pcard-icon, .gj-price, .gj-price--sale, .gj-price-line, .gj-badge, .gj-badge--ok, .gj-badge--warn, .gj-badge--sale, .gj-plans, .gj-plans--3, .gj-plan, .gj-plan--hi, .gj-plan-amount, .gj-plan-ribbon, .gj-iconrow, .gj-icon

하지 말 것

• 카드에 가격 외의 판매 수치(판매량·평점·재고)를 넣지 않는다. 카드는 제목·한 줄·가격.
• 정본가는 USD 하나다(ADR 0003). 원화 청구가는 결제 단계에서 환율로 파생하며, 카드에 두 통화를 같이 적지 않는다.
• 카드 안에서 바로 결제 버튼을 열지 않는다. 결제는 상세 → 결제 전 확인 → core 계산대 순서다.
• 글자 사이 간격(letter-spacing)을 앱에서 조정하지 않는다.
• 상품 링크에 슬러그를 쓰지 않는다. route('catalog.show', $product->id) 처럼 숫자 ID 다.