Aurora Modules

게시글 등록 폼

게시글 등록 폼 모듈입니다.

예시화면은 비회원 기준으로 작성되었으며 등록/수정시 동일한 모듈을 사용할 수 있습니다.

사용 가능 변수

변수명	타입	기본값	설명
isModify	boolean	-	등록/수정 여부
isLoading	boolean	true	-
isGuestMode	boolean	false	등록시에는 로그인 되어있지 않는 경우 `true` 수정시에는 게시글 조회하기 API 응답 결과 중 `registerType` 값이 `GUEST`인 경우 `true`
usesAttachment	boolean	-	첨부 가능 여부 (어드민 설정 값을 따름)
passwordIsValid	boolean	-	입력한 비밀번호 유효성 여부 (8자리 이상 20자리 이하인 경우 `true`)
secretPostingUsed	boolean	-	비밀글 가능 여부 (어드민 설정 값을 따름)
willBeSecretArticle	boolean	-	비밀글 체크 여부
name	string	-	작성자명
title	string	-	게시글 제목
content	string	-	게시글 내용
password	string	-	비밀번호
passwordErrorMessage	string	-	비밀번호가 유효하지 않는 경우 에러 메세지
files	File[]	[]	첨부 파일 리스트
imagesList	ImagesList[]	[]	첨부 이미지 리스트
boardConfig	BoardConfig	-	게시판 설정 조회하기 API API 응답 결과 중 `boardConfigs`에서 현재 접근한 게시판에 대한 설정 정보 (아래 타입 참조)
isModify	boolean	true	수정모드 여부

BoardConfig 타입

속성명	타입	기본값	설명
canPostByMember	boolean	false	회원 작성가능 여부
guestPostingUsed	boolean	false	비회원 작성가능 여부
canPostBySecret	boolean	false	비밀글 작성 여부
canAttach	boolean	false	첨부파일 사용 여부
canUseCategory	boolean	false	카테고리 사용 여부

Categories 타입

속성명	타입	기본값	설명
label	string	-	카테고리 이름
categoryNo	number	-	카테고리 번호

ImagesList 타입

속성명	타입	기본값	설명
imageUrl	string	-	이미지 경로 url
originName	string	-	이미지 명

File 타입

속성명	타입	기본값	설명
originalFileName	string	-	원본 파일명
uploadedFileName	string	-	업로드 된 파일명

모듈명: article-form-terms원본소스

게시글 등록 폼 약관 정보 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
used	boolean	false	약관 사용 여부
agreeGuestTerms	boolean	false	약관 동의 여부
contents	string	-	약관 내용
enforcementDate	string	-	시행일

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<div class="article-write article-write--modal" shopby-layer-modal-helper-key="article-write-form">
    <article-form>
        <div class="article-form">
            {{#unless isLoading}} {{#if boardConfig.canUseCategory}}
            <p class="article-form__category">
                <label class="bold">카테고리</label>
                <span class="select select--sm">
                    <select shopby-on:change="CHANGE_CATEGORY_TYPE" shopby-select-category>
                        {{#each boardConfig.categories}}
                        <option value="{{categoryNo}}">{{label}}</option>
                        {{/each}}
                    </select>
                </span>
            </p>
            {{/if}} {{#unless isGuestMode}}
            <div>
                <label class="bold">작성자</label>
                <p class="input-field input-field--md article-form__input is-disabled">
                    <input type="text" value="{{writer}}" disabled />
                </p>
            </div>

            <p class="input-field input-field--md article-form__input">
                <input type="text" placeholder="제목을 작성해 주세요." value="{{title}}" shopby-max="50" shopby-on:input="TITLE" />
            </p>
            {{else}}
            <div>
                <label class="bold">작성자</label>
                <p class="input-field input-field--md article-form__input">
                    <input type="text" value="{{writer}}" shopby-max="20" shopby-on:input="NAME" placeholder="작성자를 입력해주세요." />
                </p>
            </div>
            <div>
                <label class="bold">비밀번호</label>
                <p class="input-field input-field--md">
                    <input
                        type="password"
                        name="password"
                        value="{{password}}"
                        shopby-max="20"
                        shopby-on:input="PASSWORD"
                        shopby-on:change="PASSWORD"
                        placeholder="비밀번호를 입력해주세요."
                    />
                </p>
                <span slot="passwordIsValid">
                    {{#unless passwordIsValid}}
                    <span class="caution">{{passwordErrorMessage}}</span>
                    {{/unless}}
                </span>
            </div>

            <p class="input-field input-field--md">
                <input type="text" placeholder="제목을 작성해 주세요." value="{{title}}" shopby-max="50" shopby-on:input="TITLE" />

                <span slot="title" class="article-form__title">
                    <span class="bold highlight">{{title.length}}</span>
                    / 50
                </span>
            </p>
            {{/unless}}
            <section class="article-form__content">
                <textarea placeholder="내용을 입력해주세요." shopby-max="1000" shopby-on:input="CONTENT">{{{content}}}</textarea>

                <p class="article-form__content-sub">
                    {{#if secretPostingUsed}}
                    <label class="form-check form-check--md">
                        {{#if willBeSecretArticle}}
                        <input type="checkbox" shopby-on:change="WILL_BE_SECRET_ARTICLE" checked />
                        {{else}}
                        <input type="checkbox" shopby-on:change="WILL_BE_SECRET_ARTICLE" />
                        {{/if}}
                        <span class="form-check__label">
                            <span class="check-radio__ico">
                                <span class="ico ico--check-white"></span>
                            </span>
                            비밀글
                        </span>
                    </label>
                    {{/if}}

                    <span slot="content">
                        <span class="bold highlight">{{content.length}}</span>
                        / 1000
                    </span>
                </p>
            </section>
            {{/unless}}
        </div>
    </article-form>

    <file-attach>
        <div>
            <div class="review-form__content" slot="usesAttachment">
                <ul class="article-form article-form__attachments" slot="imagesList">
                    {{#each imagesList}}
                    <li class="article-form__attachment">
                        {{img imageUrl 92 92 originName '' ''}}
                        <button
                            type="button"
                            class="btn btn--sm article-form__delete"
                            shopby-image-url="{{imageUrl}}"
                            shopby-action="DELETE_IMAGE_IN_LIST"
                        ></button>
                    </li>
                    {{/each}}
                    <input
                        type="file"
                        hidden
                        multiple
                        accept="image/*"
                        shopby-attach-input="ATTACH_INPUT"
                        shopby-limit-count="5"
                        shopby-limit-mega-bytes="5"
                        shopby-on:change="ATTACH_IMAGE"
                    />
                    {{#if usesAttachment}}
                    <button type="button" class="btn btn--line-dark article-form__attachment-input" shopby-on:click="ATTACH_IMAGE"></button>
                    {{/if}}
                </ul>
                <!-- FILES -->
                <div>
                    <ul class="article-form article-form__attachments-file" slot="files">
                        {{#each files}}
                        <li class="article-form__attachment-file">
                            <span class="ico ico--clip-16 article-list__item-title-icon"></span>
                            {{originalFileName}}
                            <button
                                type="button"
                                class="btn btn--sm article-form__delete"
                                shopby-file-name="{{uploadedFileName}}"
                                shopby-action="DELETE_FILE"
                            ></button>
                        </li>
                        {{/each}}
                    </ul>
                </div>
                {{#if usesAttachment}}
                <p class="board-form__notice-text">업로드 용량은 5MB 이하로만 가능 합니다.</p>
                {{/if}}
            </div>
        </div>
    </file-attach>

    <article-form-terms>
        <section class="article-form__terms">
            {{#unless (isSignedIn)}}
            <label class="form-check form-check--md">
                <input type="checkbox" shopby-on:change="CHECK_GUEST_TERMS" />
                <span class="bold form-check__label">비회원 글 작성에 대한 개인정보 수집 이용 동의 (필수)</span>
            </label>
            <ul class="article-form__terms-item" slot="contents">
                {{{contents}}}
            </ul>
            {{/unless}}
        </section>
    </article-form-terms>

    <board-form-button-group>
        <div>
            <div class="board-form__buttons" slot="formBtnGroups">
                <button type="button" class="btn btn--line-dark btn--lg board-form__btn" shopby-action="CANCEL">취소</button>
                {{#if isModify}}
                <button type="button" class="btn btn--fill-point btn--lg board-form__btn" shopby-action="MODIFY">수정</button>
                {{else}}
                <button type="button" class="btn btn--fill-point btn--lg board-form__btn" shopby-action="SUBMIT">등록</button>
                {{/if}}
            </div>
        </div>
    </board-form-button-group>
</div>

<div class="article-write article-write--modal" shopby-layer-modal-helper-key="article-write-form">
    <article-form>
        <div class="article-form">
            {{#unless isLoading}} {{#if boardConfig.canUseCategory}}
            <p class="article-form__category">
                <label class="bold">카테고리</label>
                <span class="select select--sm">
                    <select shopby-on:change="CHANGE_CATEGORY_TYPE" shopby-select-category>
                        {{#each boardConfig.categories}}
                        <option value="{{categoryNo}}">{{label}}</option>
                        {{/each}}
                    </select>
                </span>
            </p>
            {{/if}} {{#unless isGuestMode}}
            <div>
                <label class="bold">작성자</label>
                <p class="input-field input-field--md article-form__input is-disabled">
                    <input type="text" value="{{writer}}" disabled />
                </p>
            </div>
            <p class="input-field input-field--md article-form__input">
                <input type="text" placeholder="제목을 작성해 주세요." value="{{title}}" shopby-max="50" shopby-on:input="TITLE" />
            </p>
            {{else}}
            <div>
                <label class="bold">작성자</label>
                <p class="input-field input-field--md article-form__input">
                    <input type="text" value="{{writer}}" shopby-max="20" shopby-on:input="NAME" placeholder="작성자를 입력해주세요." />
                </p>
            </div>
            <div>
                <label class="bold">비밀번호</label>
                <p class="input-field input-field--md">
                    <input
                        type="password"
                        name="password"
                        value="{{password}}"
                        shopby-max="20"
                        shopby-on:input="PASSWORD"
                        shopby-on:change="PASSWORD"
                        placeholder="비밀번호를 입력해주세요."
                    />
                </p>
                <span slot="passwordIsValid">
                    {{#unless passwordIsValid}}
                    <span class="caution">{{passwordErrorMessage}}</span>
                    {{/unless}}
                </span>
            </div>
            <p class="input-field input-field--md">
                <input type="text" placeholder="제목을 작성해 주세요." value="{{title}}" shopby-max="50" shopby-on:input="TITLE" />

                <span slot="title" class="article-form__title">
                    <span class="bold highlight">{{title.length}}</span>
                    / 50
                </span>
            </p>
            {{/unless}}
            <section class="article-form__content">
                <textarea placeholder="내용을 입력해주세요." shopby-max="1000" shopby-on:input="CONTENT">{{{content}}}</textarea>

                <p class="article-form__content-sub">
                    {{#if secretPostingUsed}}
                    <label class="form-check form-check--md">
                        {{#if willBeSecretArticle}}
                        <input type="checkbox" shopby-on:change="WILL_BE_SECRET_ARTICLE" checked />
                        {{else}}
                        <input type="checkbox" shopby-on:change="WILL_BE_SECRET_ARTICLE" />
                        {{/if}}
                        <span class="form-check__label">
                            <span class="check-radio__ico">
                                <span class="ico ico--check-white"></span>
                            </span>
                            비밀글
                        </span>
                    </label>
                    {{/if}}

                    <span slot="content">
                        <span class="bold highlight">{{content.length}}</span>
                        / 1000
                    </span>
                </p>
            </section>
            {{/unless}}
        </div>
    </article-form>

    <file-attach>
        <div>
            <div class="review-form__content" slot="usesAttachment">
                <ul class="article-form article-form__attachments" slot="imagesList">
                    {{#each imagesList}}
                    <li class="article-form__attachment">
                        {{img imageUrl 220 220 originName '' ''}}
                        <button
                            type="button"
                            class="btn btn--sm article-form__delete"
                            shopby-image-url="{{imageUrl}}"
                            shopby-action="DELETE_IMAGE_IN_LIST"
                        ></button>
                    </li>
                    {{/each}}
                    <input
                        type="file"
                        hidden
                        multiple
                        accept="image/*"
                        shopby-attach-input="ATTACH_INPUT"
                        shopby-limit-count="5"
                        shopby-limit-mega-bytes="5"
                        shopby-on:change="ATTACH_IMAGE"
                    />
                    {{#if usesAttachment}}
                    <button type="button" class="btn btn--line-dark article-form__attachment-input" shopby-on:click="ATTACH_IMAGE"></button>
                    {{/if}}
                </ul>
                <!-- FILES -->
                <div>
                    <ul class="article-form__attachments-files" slot="files">
                        {{#each files}}
                        <li class="article-form__attachment-file">
                            <span class="ico ico--clip-16 article-list__item-title-icon"></span>
                            {{originalFileName}}
                            <button
                                type="button"
                                class="btn btn--sm article-form__delete"
                                shopby-file-name="{{uploadedFileName}}"
                                shopby-action="DELETE_FILE"
                            ></button>
                        </li>
                        {{/each}}
                    </ul>
                </div>
                {{#if usesAttachment}}
                <p class="board-form__notice-text">업로드 용량은 5MB 이하로만 가능 합니다.</p>
                {{/if}}
            </div>
        </div>
    </file-attach>

    <article-form-terms>
        <section class="article-form__terms">
            {{#unless (isSignedIn)}}
            <label class="form-check form-check--md">
                <input type="checkbox" shopby-on:change="CHECK_GUEST_TERMS" />
                <span class="bold form-check__label">비회원 글 작성에 대한 개인정보 수집 이용 동의 (필수)</span>
            </label>
            <ul class="article-form__terms-item" slot="contents">
                {{{contents}}}
            </ul>
            {{/unless}}
        </section>
    </article-form-terms>

    <board-form-button-group>
        <div>
            <div class="board-form__buttons" slot="formBtnGroups">
                <button type="button" class="btn btn--line-dark board-form__btn" shopby-action="CANCEL">취소</button>
                {{#if isModify}}
                <button type="button" class="btn btn--fill-point board-form__btn" shopby-action="MODIFY">수정</button>
                {{else}}
                <button type="button" class="btn btn--fill-point board-form__btn" shopby-action="SUBMIT">등록</button>
                {{/if}}
            </div>
        </div>
    </board-form-button-group>
</div>

/* 여기에 스타일 코드를 작성해주세요. */