그누보드5 연동,
영상 보면서 5분 만에 끝내기.

<div class="signup-app" data-gb-login-link="login.html" data-gb-redirect="index.html" data-gb-initial-status="terms">
<div v-gb-terms="">
<div class="checkset checkset-all"><input type="checkbox" id="signup-agree-all" class="checkset-input" v-model="agreeAll" @change="toggleAllAgree"><label for="signup-agree-all" class="checkset-label"></label><span class="checkset-text">전체 동의</span></div>
<div class="checkset"><input type="checkbox" id="signup-stipulation" class="checkset-input" v-model="agreements.stipulation"><label for="signup-stipulation" class="checkset-label"></label><span class="checkset-text">회원가입 약관</span></div>
<div v-html="terms.stipulation"></div>
<div class="checkset"><input type="checkbox" id="signup-privacy" class="checkset-input" v-model="agreements.privacy"><label for="signup-privacy" class="checkset-label"></label><span class="checkset-text">개인정보 처리방침</span></div>
<a :href="getLoginLink()" data-link-type="page">취소</a>
<button type="button" v-gb-btn-signup :disabled="!isEditor && !canProceedToSignup">다음</button>
</div>
<div v-gb-signup="">
<div class="inputset inputset-lg"><input type="text" class="inputset-input form-control" v-model="signup_form.mb_name" placeholder="이름"></div>
<div class="inputset inputset-lg"><input type="text" class="inputset-input form-control" v-model="signup_form.mb_id" placeholder="아이디"></div>
<button type="button" @click="checkDuplicate('mb_id')" :disabled="!signup_form.mb_id">중복 확인</button>
<button type="button" v-gb-btn-terms>이전 단계로</button>
<button type="button" :disabled="!isEditor && !isFormValid" @click="handleSignup">가입완료</button>
</div>
</div>

(function () {
  $(function () {
    $(".signup-N1").each(function () {
      var el = $(this).find(".signup-app")[0];
      if (el) vue_gnulogin(el);
    });
  });
})();

<div class="gnuboard v-cloak="" data-gb-table="free"
data-gb-table-name="자유 게시판"
data-gb-list-link="list.html"
data-gb-view-link="viewer.html"
data-gb-write-link="write.html">
<div v-gb-list="" v-gb-list-row="10" v-gb-list-page="5" v-gb-list-onload="true">
<p>총 {{ br.total_records }}개의 게시글</p>
<input type="text" v-model="filter.stx" @keyup.enter="search" placeholder="검색어">
<button @click="search">검색</button>
<p v-gb-list-empty="" data-gb-tpl="list_empty">등록된 글이 없습니다.</p>
<a :href="getViewLink(item.wr_id)" data-link-type="page" v-for="item in br.writes" :key="item.wr_id" :data-gb-wr-id="item.wr_id">
<img v-if="getListItemImage(item)" :src="getListItemImage(item)" :alt="item.wr_subject" data-gb-tpl="wr_thumbnail">
<span data-gb-tpl="wr_subject">{{ item.wr_subject }}</span>
<span data-gb-tpl="wr_name">{{ item.wr_name }}</span>
<span data-gb-tpl="wr_datetime">{{ item.wr_datetime }}</span>
</a>
<a v-if="canWrite" :href="getWriteLink()" data-link-type="page">글쓰기</a>
<a v-gb-list-first-show="" v-gb-list-btn-first="">처음</a>
<a v-gb-list-prev-show="" v-gb-list-btn-prev="">이전</a>
<a v-for="page in pagination.pages" v-gb-list-btn-page="page" v-gb-list-page-active-class="'active'">{{ page }}</a>
<a v-gb-list-next-show="" v-gb-list-btn-next="">다음</a>
<a v-gb-list-last-show="" v-gb-list-btn-last="">마지막</a>
</div>
</div>

// 블록 최상위 class — 본인 블록명으로 바꾸세요 (예: gb5-board-N8)
(function () {
  $(function () {
    $(".gb5-board-N8").each(function () {
      var gnu = $(this).find(".gnuboard")[0];
      if (gnu) vue_gnuboard(gnu);
    });
  });
})();

<div class="gnuboard v-cloak="" data-gb-table="free"
data-gb-list-link="list.html" data-gb-write-link="write.html"
data-gb-initial-status="read">
<h2 data-gb-tpl="wr_subject">{{ bs.wr_subject }}</h2>
<p v-if="bs.wr_id"><span data-gb-tpl="wr_datetime">{{ bs.wr_datetime }}</span> | <span data-gb-tpl="wr_name">{{ bs.wr_name }}</span> | 조회 <span data-gb-tpl="wr_hit">{{ bs.wr_hit }}</span></p>
<div v-if="bs.wr_id" v-html="bs.wr_content" data-gb-tpl="wr_content"></div>
<div v-for="file in bs.normal_files">
<span>{{ file.bf_source }} ({{ formatFileSize(file.bf_filesize) }})</span>
<a :href="file.bf_file">다운로드</a>
</div>
<a :href="getListLink()" data-link-type="page">목록보기</a>
<template v-if="canEdit || canGuestEdit">
<a :href="getEditLink(bs.wr_id)" data-link-type="page">수정</a>
<button type="button" @click="deleteWrite">삭제</button>
</template>
</div>

(function () {
  $(function () {
    $(".viewer-N1").each(function () {
      var el = $(this).find(".gnuboard")[0];
      if (el) vue_gnuboard(el);
    });
  });
})();

<div class="gnuboard v-cloak="" data-gb-table="free"
data-gb-list-link="list.html" data-gb-view-link="viewer.html"
data-gb-initial-status="write">
<div v-gb-write="">
<div v-if="bi.bo_use_category && bi.bo_category_list" class="form-box">
<div class="radioset-wrap">
<div class="radioset" v-for="(cat, index) in bi.bo_category_list.split('|')" :key="index">
<input :id="'write-cat-' + index" name="write-category" class="radioset-input input-line" type="radio" :value="cat" v-model="bw.ca_name">
<label class="radioset-label" :for="'write-cat-' + index"></label>
<span class="radioset-text">{{ cat }}</span>
</div>
</div>
</div>
<div class="inputset inputset-lg"><input type="text" class="inputset-input form-control" v-model="bw.wr_subject" placeholder="제목"></div>
<div id="editor" class="gb-editor gb-editor-write"></div>
<a :href="getListLink()" data-link-type="page">취소</a>
<button type="button" @click="submitWrite">작성완료</button>
</div>
<div v-gb-edit="">
<div class="inputset inputset-lg"><input type="text" class="inputset-input form-control" v-model="be.wr_subject" placeholder="제목"></div>
<div id="edit-editor" class="gb-editor gb-editor-edit"></div>
<button type="button" @click="submitEdit">수정완료</button>
</div>
</div>

.gb-editor-write { height: 20rem; }
.gb-editor-edit { min-height: 20rem; }
.gnuboard[v-cloak] { visibility: hidden; }

(function () {
  $(function () {
    $(".write-N1").each(function () {
      var el = $(this).find(".gnuboard")[0];
      if (el) vue_gnuboard(el);
    });
  });
})();

<div class="profile-app"
data-gb-login-link="login.html"
data-gb-redirect="index.html">
<div v-gb-password-check>
<input type="password" v-model="password_check_form.password" placeholder="비밀번호" @keyup.enter="handlePasswordCheck">
<button @click="handlePasswordCheck">확인</button>
</div>
<div v-gb-profile-edit>
<img :src="profileImage" alt="프로필">
<input type="file" ref="imageInput" accept="image/*" @change="handleImageChange" class="blind">
<button type="button" @click="clickImageInput">이미지 변경</button>
<button type="button" @click="clickImageDelete" v-if="isEditor || profile_form.mb_image_path || imagePreview">이미지 삭제</button>
<input type="text" v-model="profile_form.mb_id" disabled>
<input type="text" v-model="profile_form.mb_name" placeholder="이름" required>
<input type="text" v-model="profile_form.mb_nick" placeholder="닉네임" required>
<button type="button" @click="checkDuplicate('mb_nick')" :disabled="!isEditor && (!profile_form.mb_nick || profile_form.mb_nick === original_profile.mb_nick)">중복확인</button>
<input type="email" v-model="profile_form.mb_email" placeholder="이메일" required>
<button type="button" v-gb-btn-password-check="">← 비밀번호 확인으로</button>
<button type="button" :disabled="!isEditor && !isFormValid" @click="handleUpdateProfile">프로필 수정</button>
</div>
</div>

<div class="gnuboard">
<div v-if="!isLoggedIn">
<a href="./login.html" data-link-type="page">로그인</a>
<a href="./signup.html" data-link-type="page">회원가입</a>
</div>
<div v-if="isLoggedIn">
<img :src="profileImage" alt="프로필">
<span>{{ user.mb_name }}</span>
<button type="button" @click="handleLogout">로그아웃</button>
<a href="./profile.html" data-link-type="page">프로필 수정</a>
</div>
</div>

(function () {
  $(function () {
    $(".header-N1").each(function () {
      var el = $(this).find(".gnuboard")[0];
      if (el) vue_gnuboard(el);
    });
  });
})();