# Shop

정적 사이트에 장바구니와 결제를 붙입니다. 상품 담기 버튼과 카트 배지는 HTML 속성으로 선언하고, 카트·체크아웃 흐름은 `@saeroon/shop-sdk` 가 처리합니다.

## 배포 시 자동 연결

쇼핑 `data-saeroon-*` 속성이 있는 HTML을 배포하면 shop SDK 스크립트가 자동 주입됩니다. 공개 쇼핑 API는 사이트 slug 로 범위가 정해지므로, `saeroon.config.json` 에 `siteSlug` 가 있어야 합니다(신규 배포 시 자동 기록). 이 값은 스크립트 태그의 `data-site-slug` 로 주입되어 SDK가 사이트를 해석합니다. SDK 로더는 `https://cdn.saeroon.com/sdk/shop/v1/loader.js` 에서 제공됩니다.

```bash
npx @saeroon/cli deploy ./my-shop
```

> 같은 사이트에 회원·게시판도 함께 쓴다면 배포 시 공개 키(`--pk pk_live_…`)를 넘겨야 합니다. 쇼핑만 쓰는 사이트는 공개 키가 필요 없습니다.

## 장바구니에 담기

담기 버튼에 `data-saeroon-add-to-cart` 를 붙이고, 상품을 GUID(`data-product-id`) 또는 slug(`data-product-slug`) 로 지정합니다.

```html
<button data-saeroon-add-to-cart data-product-slug="rose-bouquet"
        data-toast="장바구니에 담았습니다">담기</button>

<!-- 수량 입력과 연결 -->
<input id="qty" type="number" value="1" min="1" />
<button data-saeroon-add-to-cart data-product-id="00000000-0000-0000-0000-000000000000"
        data-quantity-from="#qty">담기</button>
```

- 수량은 `data-quantity="<수>"` 로 고정하거나 `data-quantity-from="<선택자>"` 로 입력 요소와 연결합니다(기본 1).
- `data-toast` 성공 문구, `data-redirect` 로 담은 뒤 이동할 경로를 지정할 수 있습니다.

## 카트 배지와 오류 표시

```html
<span data-saeroon-cart-count>0</span>
<div data-saeroon-shop-error></div>
```

`data-saeroon-cart-count` 는 카트 수량이 바뀔 때마다 갱신됩니다. 담기에 실패하면 `data-saeroon-shop-error` 요소에 사유가 표시됩니다.

## 상품과 주문 관리

상품 등록·재고·가격과 주문 내역은 [hosting 대시보드](https://hosting.saeroon.com)의 사이트 커머스 화면에서 관리합니다. 정적 사이트는 그 상품을 slug·GUID 로 참조해 담기·결제만 붙입니다.

## 속성 요약

| 속성 | 위치 | 뜻 |
|---|---|---|
| `data-saeroon-add-to-cart` | 버튼 | 담기 동작(필수 마커) |
| `data-product-id` / `data-product-slug` | 담기 버튼 | 대상 상품(둘 중 하나) |
| `data-quantity` / `data-quantity-from` | 담기 버튼 | 수량 지정(선택) |
| `data-saeroon-cart-count` | 임의 요소 | 카트 수량 배지 |
| `data-saeroon-shop-error` | 임의 요소 | 오류 표시 위치 |

전체 속성 표는 [Attributes](/docs/attributes)를 참고하세요.