Skip to content

bm.do('board:createPost')

  • 설정된 게시판에 글을 작성해요.
  • 게시판(BOARD)을 활용하면 폼(Form)을 만드는 용도로도 활용할 수 있어요.
  • 로그인된 회원인 경우에는 작성자 정보가 자동으로 입력되지만, 비회원이 글을 작성하려는 경우에는 userName, email, password 필드를 통해 작성자 정보를 추가로 입력받아야 해요.
  • 글에 파일을 첨부하려는 경우 files 필드에 FileList 를 넘겨 첨부할 수 있어요.
    • 파일은 최대 5개 첨부가 가능하고 각 10MB 제한이 있어요.
    • 지원 확장자: .jpg, .jpeg, .png, .svg, .webp, .gif, .mp4, .pdf, .docx, .hwp, .csv, .xlsx, .pptx, .psd, .ai, .zip
html
<data value="$customer" />

<template>
  <form>
    <!-- 카테고리가 있는 경우에만 카테고리 선택 UI 표시 -->
    {{#if property.board.tags.length}}
      <select name="tagId" {{#if (eq property.board.tagRequiredStatus "REQUIRED")}}required{{/if}}>
        {{#each property.board.tags}}
          <option value="{{id}}">{{name}}</option>
        {{/each}}
      </select>
    {{/if}}

    <input type="text" name="title" placeholder="제목" required />
    <textarea name="contents" placeholder="내용" required></textarea>

    <!-- 비회원인 경우에만 작성자 정보 입력 필드 표시 -->
    {{#unless customer}}
      <input type="text" name="userName" placeholder="이름" required />
      <input type="email" name="email" placeholder="이메일" required />
      <input type="password" name="password" placeholder="비밀번호" required />
    {{/unless}}

    <!-- 회원이거나 비회원 첨부가 허용된 경우에만 파일 첨부 UI 표시 -->
    {{#if (or customer (eq property.board.guestAttachmentStatus "ENABLED"))}}
      <input type="file" name="attachments" multiple />
    {{/if}}

    <button type="submit">등록</button>
  </form>
</template>

<script>
  const container = bm.container;
  const context = bm.context;

  container.addEventListener('submit', async (e) => {
    e.preventDefault();

    const form = e.target;

    // BOARD 세팅을 통해 블록에 설정된 게시판 정보
    const board = context.property.board;
    // <data value="$customer"/> 를 통해 주입된 고객 정보 (로그인하지 않은 경우 null)
    const customer = context.customer;

    const params = {
      boardId: board.id,
      title: form.title.value,
      contents: form.contents.value,
      accessType: 'OPEN',
      // 카테고리 선택 시에만 tagIds 포함
      ...(form.tagId?.value && { tagIds: [form.tagId.value] }),
      // 비회원인 경우에만 작성자 정보 직접 입력
      ...(!customer && {
        userName: form.userName.value,
        email: form.email.value,
        password: form.password.value,
      }),
    };

    // 첨부 파일이 있는 경우에만 포함
    if (form.attachments?.files.length > 0) {
      params.files = form.attachments.files;
    }

    try {
      await bm.do('board:createPost', { params });
      bm.do('snackbar:open', { message: '폼이 제출되었어요.' });
    } catch (err) {
      bm.do('snackbar:open', { message: err.message });
    }
  }, true);

</script>

회원/비회원을 지원하는 게시판 글 작성 예시

jsx
await bm.do('board:createPost', {
  params: {
    boardId: ...,        // (필수) 작성 대상 게시판 ID
    title: '...',        // (필수) 글 제목
    contents: '...',     // (필수) 글 내용
    accessType: '...',   // (필수) 공개 여부 ('OPEN', 'SECRET')
    tagIds: [1, 2, 3],   // (조건부 필수) 태그 ID 목록. `tagRequiredStatus`가 'REQUIRED'인 경우 필수

    // 비회원인 경우 필수 (회원인 경우 생략, 자동으로 작성자 정보 입력)
    userName: '...',     // (조건부 필수) 작성자 이름
    email: '...',        // (조건부 필수) 작성자 이메일
    password: '...',     // (조건부 필수) 글 비밀번호

    // 비회원은 `guestAttachmentStatus`가 'ENABLED'인 경우에만 사용 가능
    files: FileList      // (선택) 첨부 파일 (FileList 객체)
  }
})

Sixshop Developers Portal