# Boards

정적 사이트에 게시판을 붙입니다. 글 목록·상세·작성·수정·삭제, 댓글, 좋아요까지 HTML 속성으로 동작합니다.

## data-board-id 는 필수입니다

게시판 관련 요소에는 대상 게시판의 **GUID** 를 담는 `data-board-id` 가 반드시 필요합니다. 배포는 slug 를 id 로 자동 변환하지 않으므로, 게시판의 실제 GUID 를 직접 넣어야 합니다. 빠지면 그 요소는 동작하지 않습니다.

게시판과 GUID 를 얻는 두 경로:

- [hosting 대시보드](https://hosting.saeroon.com)에서 게시판을 만들면 설정에서 GUID 를 확인
- CLI로 게시판 템플릿을 적용: `npx @saeroon/cli board apply <템플릿-slug> --site <site-id>`

등록된 게시판 템플릿 목록은 `npx @saeroon/cli board list` 로 조회합니다.

## 배포 시 자동 연결

게시판 `data-saeroon-*` 속성이 있는 HTML을 배포하면 `@saeroon/web-sdk` 가 자동 주입됩니다. SDK가 사이트를 해석하도록 공개 키를 함께 넘깁니다.

```bash
npx @saeroon/cli deploy ./my-site --pk pk_live_XXXX
```

## 글 목록

`data-saeroon-post-list` 요소에 `data-board-id` 를 지정합니다. 안에 `<template data-saeroon-post-item>` 을 두면 그 마크업을 글마다 복제하고 `data-saeroon-field` 요소만 값으로 채웁니다 — 디자인이 그대로 보존됩니다.

```html
<div data-saeroon-post-list data-board-id="00000000-0000-0000-0000-000000000000"
     data-page-size="10" data-detail-base="/post">
  <template data-saeroon-post-item>
    <a class="post" data-saeroon-post-link>
      <h3 data-saeroon-field="title"></h3>
      <span data-saeroon-field="authorName"></span>
      <time data-saeroon-field="date"></time>
    </a>
  </template>
  <div data-saeroon-empty>아직 글이 없습니다.</div>
</div>
```

`data-saeroon-field` 로 채울 수 있는 값: `title`·`authorName`·`date`·`content`·`viewCount`·`likeCount`·`commentCount`·`tag`·`thumbnail`·`meta:<키>`. `data-detail-base` 가 있으면 각 `data-saeroon-post-link` 의 링크가 `<base>?post=<id>` 로 연결됩니다.

## 글 상세

`data-saeroon-post-detail` 요소는 URL 쿼리 `?post=<id>` 의 글을 읽어 내부 `data-saeroon-field` 를 채웁니다.

```html
<article data-saeroon-post-detail>
  <h1 data-saeroon-field="title"></h1>
  <div data-saeroon-field="content"></div>
  <div data-saeroon-empty>글을 찾을 수 없습니다.</div>
</article>
```

## 글쓰기·댓글·좋아요

글 작성 폼에도 `data-board-id` 가 필요합니다. `data-visibility` 로 공개 범위를 지정할 수 있습니다(`Public`·`MembersOnly`·`OwnerOnly`).

```html
<form data-saeroon-post-create data-board-id="00000000-0000-0000-0000-000000000000">
  <input name="title" required />
  <textarea name="content" required></textarea>
  <button type="submit">등록</button>
  <div data-saeroon-error></div>
</form>

<!-- 댓글 목록 + 작성 -->
<div data-saeroon-comment-list>
  <template data-saeroon-comment-item>
    <div><span data-saeroon-field="authorName"></span>: <span data-saeroon-field="content"></span></div>
  </template>
</div>
<form data-saeroon-comment-create>
  <textarea name="content" required></textarea>
  <button type="submit">댓글</button>
</form>

<!-- 좋아요 -->
<button data-saeroon-like>좋아요 <span data-saeroon-field="likeCount">0</span></button>
```

글·댓글 소유자 액션(수정·삭제)은 마크업에 `data-saeroon-post-actions`·`data-saeroon-comment-actions` 요소를 두면 본인 글에만 자동으로 나타납니다.

## 속성 요약

| 속성 | 위치 | 뜻 |
|---|---|---|
| `data-saeroon-post-list` + `data-board-id` | 컨테이너 | 글 목록. GUID 필수 |
| `data-saeroon-post-create` + `data-board-id` | `<form>` | 글 작성. GUID 필수 |
| `data-saeroon-post-detail` | 컨테이너 | `?post=<id>` 상세 |
| `data-saeroon-comment-list` / `-create` | 컨테이너·폼 | 댓글 |
| `data-saeroon-like` | 버튼 | 좋아요 토글 |
| `data-saeroon-field="<키>"` | 임의 요소 | 값 채우기 |

전체 속성·필드 표는 [Attributes](/docs/attributes)를 참고하세요. 회원 로그인은 [Members](/docs/members)에서 다룹니다.