Boards

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

data-board-id 는 필수입니다

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

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

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

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

배포 시 자동 연결

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

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 요소만 값으로 채웁니다 — 디자인이 그대로 보존됩니다.

<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 를 채웁니다.

<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).

<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 요소를 두면 본인 글에만 자동으로 나타납니다.

속성 요약

전체 속성·필드 표는 Attributes를 참고하세요. 회원 로그인은 Members에서 다룹니다.