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

<div class="signup-app" data-gb-login-link="login.html" data-gb-initial-status="terms">
<div v-gb-terms>
<input type="checkbox" v-model="agreeAll" @change="toggleAllAgree"> 전체 동의
<input type="checkbox" v-model="agreements.stipulation"> 회원가입 약관
<div v-html="terms.stipulation"></div>
<input type="checkbox" v-model="agreements.privacy"> 개인정보 처리방침
<div>{{ terms.privacy }}</div>
<a :href="getLoginLink()">취소</a>
<button type="button" v-gb-btn-signup :disabled="!isEditor && !canProceedToSignup">다음</button>
</div>
<div v-gb-signup>
<input type="text" v-model="signup_form.mb_name" placeholder="이름">
<input type="text" v-model="signup_form.mb_id" placeholder="아이디">
<button type="button" @click="checkDuplicate('mb_id')" :disabled="!signup_form.mb_id">중복 확인</button>
<input type="password" v-model="signup_form.mb_password" placeholder="비밀번호 (8자 이상)">
<input type="password" v-model="signup_form.mb_password_re" placeholder="비밀번호 확인">
<input type="text" v-model="signup_form.mb_nick" placeholder="닉네임">
<button type="button" @click="checkDuplicate('mb_nick')" :disabled="!signup_form.mb_nick">중복 확인</button>
<input type="text" v-model="signup_form.mb_email" placeholder="이메일">
<button type="button" v-gb-btn-terms>이전 단계로</button>
<button type="button" :disabled="!isEditor && !isFormValid" @click="handleSignup">가입완료</button>
</div>
</div>

<div class="gnuboard" 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>
<a :href="getViewLink(item.wr_id)" 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()">글쓰기</a>
<a v-gb-list-first-show="" v-gb-list-btn-first="">처음</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-last-show="" v-gb-list-btn-last="">마지막</a>
</div>
</div>

<div class="gnuboard" data-gb-table="free"
data-gb-list-link="list.html" data-gb-write-link="write.html"
data-gb-initial-status="read">
<h2>{{ bs.wr_subject || '게시글 제목' }}</h2>
<p v-if="bs.wr_id">{{ bs.wr_datetime }} | {{ bs.wr_name }} | 조회 {{ bs.wr_hit }}</p>
<div v-if="bs.wr_id" v-html="bs.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()">목록보기</a>
<template v-if="canEdit || canGuestEdit">
<a :href="getEditLink(bs.wr_id)">수정</a>
<button @click="deleteWrite">삭제</button>
</template>
</div>

<div class="gnuboard" 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>
<input v-if="!isLoggedIn" type="text" v-model="bw.wr_name" placeholder="이름">
<input v-if="!isLoggedIn" type="password" v-model="bw.wr_password" placeholder="비밀번호">
<input type="text" v-model="bw.wr_subject" placeholder="제목">
<div id="editor" style="height:200px;"></div>
<div v-for="i in bi.bo_upload_count" :key="i">
<input type="file" :ref="'writeFile' + i" @change="handleWriteFileChange(i, $event)">
</div>
<a :href="getListLink()">취소</a>
<button @click="submitWrite">작성완료</button>
</div>
<div v-gb-edit>
<input v-if="!isLoggedIn" type="password" v-model="be.wr_password" placeholder="비밀번호">
<input type="text" v-model="be.wr_subject" placeholder="제목">
<ul v-if="bs.normal_files && bs.normal_files.length">
<li v-for="file in bs.normal_files" :key="file.bf_no">
<span>{{ file.bf_source }}</span>
<button type="button" @click="deleteFile(file.bf_no)">삭제</button>
</li>
</ul>
<div id="edit-editor" style="min-height:200px;"></div>
<button @click="submitEdit">수정완료</button>
</div>
</div>

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