`BOARD`

게시판을 선택하고 게시판 정보와 게시글 목록을 가져올 수 있어요.
게시판 설정 정보(댓글 사용 여부, 글 작성 권한 등)와 게시글 목록을 함께 제공해요.
게시판 목록, 공지사항, FAQ처럼 게시글을 표시하는 블록이나, 글을 작성하는 폼(Form) 등에도 사용할 수 있어요.

html

<template>
  <h1>{{property.board.name}}</h1>

  <!-- 태그 필터 탭 (태그가 있는 경우) -->
  {{#if property.board.tags.length}}
    <div class="tag-filters">
      {{#each property.board.tags}}
        <button class="tag-btn" data-tag-ids="{{id}}">{{name}}</button>
      {{/each}}
    </div>
  {{/if}}

  <!-- 게시글 목록 -->
  {{#each property.board.posts.data}}
    <div class="post">
      <span class="post-title">{{title}}</span>
      <span class="post-author">{{displayName}}</span>
      <span class="post-date">{{datetime createdDate}}</span>

      <!-- 조회 수 노출 여부 확인 -->
      {{#if (eq ../property.board.viewCountStatus "ENABLED")}}
        <span class="post-view-count">조회 {{viewCount}}</span>
      {{/if}}

      <!-- 좋아요 노출 여부 및 접속자 좋아요 여부 확인 -->
      {{#if (eq ../property.board.likeStatus "ENABLED")}}
        <span class="like-count {{#if liked}}liked{{/if}}">♥ {{likeCount}}</span>
      {{/if}}
    </div>
  {{else}}
    <p>게시글이 없어요.</p>
  {{/each}}

  <button class="more-btn">다음 페이지</button>
</template>

<script>
  const container = bm.container;

  // 활성 태그 버튼 표시
  function updateActiveTag() {
    const activeTagIds = bm.config('property:board.posts.tagIds') || '';
    container.querySelectorAll('.tag-btn').forEach(btn => {
      btn.classList.toggle('active', btn.dataset.tagIds === activeTagIds);
    });
  }

  updateActiveTag();

  bm.onContextChange = () => updateActiveTag();

  container.addEventListener('click', (event) => {
    // 태그 필터
    if (event.target.matches('.tag-btn')) {
      event.preventDefault();
      bm.config('property:board.posts.tagIds', event.target.dataset.tagIds);
      bm.config('property:board.posts.page', 1);
      return bm.apply();
    }

    // 다음 페이지
    if (event.target.matches('.more-btn')) {
      event.preventDefault();
      const currentPage = bm.config('property:board.posts.page');
      bm.config('property:board.posts.page', currentPage + 1);
      return bm.apply();
    }
  });
</script>

jsx

"board": {
  "id": 1,                      // 게시판 ID
  "name": "공지사항",            // 게시판 이름
  "commentStatus": "ENABLED",   // 댓글 사용 여부 (예: "ENABLED", "DISABLED")
  "authorDisplayRole": "NAME",  // 작성자 표시 정보 (예: "NAME", "EMAIL")
  "commentWriteRole": "MEMBER", // 댓글 작성 권한 (예: "ALL", "MEMBER", "ADMIN")
  "postWriteRole": "ALL",       // 글 작성 권한 (예: "ALL", "MEMBER", "ADMIN")
  "secretPostRole": "OPTIONAL", // 비밀글 허용 여부 (예: "NOT_USED", "REQUIRED", "OPTIONAL")
  "postTemplate": {             // 새 글 작성 템플릿
    "title": "...",
    "contents": "..."
  },
  "viewCountStatus": "ENABLED",       // 조회 수 노출 여부 (예: "ENABLED", "DISABLED")
  "likeStatus": "ENABLED",            // 좋아요 수 노출 여부 (예: "ENABLED", "DISABLED")
  "tagRequiredStatus": "OPTIONAL",    // 글 작성 시 태그(카테고리) 필수 여부 (예: "REQUIRED", "OPTIONAL")
  "guestAttachmentStatus": "ENABLED", // 비회원 첨부파일 업로드 허용 여부 (예: "ENABLED", "DISABLED")
  "tags": [                      // 게시판 내 지원 태그(카테고리) 목록
    {
      "id": "1,2",               // "All" (전체) 필터: 콤마(,)로 연결된 태그 ID
      "name": "All",
      "sequence": -1
    },
    {
      "id": 1,                   // 태그(카테고리) ID
      "name": "공지",             // 태그(카테고리) 이름
      "sequence": 0              // 태그(카테고리) 순서
    },
    {
      "id": 2,
      "name": "질문",
      "sequence": 1
    }
  ],
  "posts": {                      // 게시판 내 게시글
    "data": [                     // 게시글 목록
      {
        "id": 1,                   // 게시글 ID
        "title": "게시글 제목",     // 게시글 제목
        "contents": "<p>내용</p>",  // 게시글 본문
        "displayName": "김**",      // 작성자 표시명 (authorDisplayRole에 따라 다름)
        "isNotice": false,         // 공지글 여부
        "status": "PUBLIC",        // 게시글 상태 (예: "PUBLIC", "PRIVATE")
        "accessType": "OPEN",      // 접근 타입 (예: "OPEN", "SECRET")
        "authorType": "ADMIN",     // 작성자 타입 (예: "ADMIN", "MEMBER", "GUEST")
        "commentsCount": 3,        // 댓글 개수
        "attachmentsCount": 1,     // 첨부파일 개수
        "thumbnails": [            // 첨부파일 썸네일 목록 (있는 경우)
          "https://example.org/thumbnail.png"
        ],
        "viewCount": 0,            // 게시글 조회 수
        "liked": false,            // 접속자 기준 좋아요 여부
        "likeCount": 0,            // 게시글 좋아요 수
        "tags": [                  // 게시글 할당 태그(카테고리) 목록
          {
            "id": 1,
            "name": "공지"
          }
        ],
        "createdDate": "2023-11-02T02:24:16.388791" // 게시글 작성일시
      }
    ],
    "count": 35                   // 총 게시글 개수
  }
}

`bm.config()`

bm.config()를 통해 데이터를 가져오는 방식을 설정할 수 있어요.

bm.config('property:board.posts.page', page); // 페이지 번호 설정
bm.config('property:board.posts.limit', limit); // 가져올 게시글 개수 설정
bm.config('property:board.posts.sort', sort); // 정렬 설정 (예: 'createdDate', 'createdDate,desc', 'likeCount', 'likeCount,desc', 'viewCount', 'viewCount,desc')
bm.config('property:board.posts.viewCountMin', value); // 조회 수 최솟값 필터
bm.config('property:board.posts.viewCountMax', value); // 조회 수 최댓값 필터
bm.config('property:board.posts.likeCountMin', value); // 좋아요 수 최솟값 필터
bm.config('property:board.posts.likeCountMax', value); // 좋아요 수 최댓값 필터
bm.config('property:board.posts.createdDateMin', value); // 작성일 시작 필터 (ISO8601)
bm.config('property:board.posts.createdDateMax', value); // 작성일 종료 필터 (ISO8601)
bm.config('property:board.posts.searchKeyword', value); // 제목 키워드 검색 필터
bm.config('property:board.posts.tagIds', value); // 태그 필터 (예: '1' 또는 '1,2,3')

BOARD ​

bm.config() ​

`BOARD`

`bm.config()`