Aurora Modules

게시판 상세

게시판 상세페이지에서 노출되는 게시판 상세 모듈입니다.

URL: /pages/board/post-detail.html?boardId={boardId}&articleNo={articleNo}

모듈명: article-view (deprecated)원본소스

게시판 상세 모듈입니다.

속성

속성명	타입	기본값	설명
article-no:query	number	-	(필수)`query string` 중 `articleNo` 값 게시글 번호
board-id:query	string	-	(필수)`query string` 중 `boardId` 게시판 ID
allow-iframe-board-nos	string	-	(선택) `iframe을 허용할 게시판 번호 목록 (쉼표 구분, '*'로 모든 게시판 허용)`

사용 가능 변수

변수명	타입	기본값	설명
isLoading	boolean	true	게시판 상세 API 조회 여부
isParentArticleOpen	boolean	false	본문 열림/닫힘 구분 값
title	string	-	게시글 상세 조회 API 응답 결과 중 `title`과 동일 게시글 제목
registerName	string	-	게시글 상세 조회 API 응답 결과 중 `registerName`와 동일 최초 등록자명
parentArticle	ParentArticle	-	게시글 상세 조회 API 응답 결과 중 `parentArticle`과 동일 (본문 게시글) (아래 타입 참조)
canReport	boolean	false	신고 가능 여부

ParentArticle 타입

속성명	타입	기본값	설명
title	string	-	게시글 제목
registerName	string	-	최초 등록자명
registerYmdt	string	-	최초 등록일(yyyy-mm-dd)
viewCnt	number	0	조회수
canReport	boolean	false	신고 가능 여부

모듈명: article-view-v2원본소스

게시판 상세 모듈입니다.

속성

속성명	타입	기본값	설명
board-no:query	string	boardNo	(필수) `게시판 번호에 사용 될 쿼리 값`
article-no:query	string	articleNo	(필수) `게시물 번호에 사용 될 쿼리 값`
allow-iframe-board-nos	string	-	(선택) `iframe을 허용할 게시판 번호 목록 (쉼표 구분, '*'로 모든 게시판 허용)`

사용 가능 변수

변수명	타입	기본값	설명
articleNo	number	-	게시글 번호
boardName	string	-	게시판 명
canModify	boolean	false	수정 가능 여부
canReport	boolean	false	신고 가능 여부
isLoading	boolean	true	게시판 상세 API 조회 여부
isParentArticleOpen	boolean	false	본문 열림/닫힘 구분 값
boardConfig	object	-	게시판 설정 게시판 설정 조회하기 boardConfigs 참고
postNo	number	-	게시글 번호 게시글 상세 조회 참고
title	string	-	게시글 제목 게시글 상세 조회 참고
content	string	-	게시글 본문 게시글 상세 조회 참고
imageUrl	object	null	이미지 URL 게시글 상세 조회 참고
categoryNo	object	null	카테고리 번호 게시글 상세 조회 참고
categoryLabel	string	null	카테고리 명 게시글 상세 조회 참고
registerName	string	-	최초 등록자명 게시글 상세 조회 참고
registerYmdt	string	-	최초 등록일 게시글 상세 조회 참고
registerNo	number	-	최초 등록자 번호 게시글 상세 조회 참고
registerType	string	-	최초 등록자 타입 게시글 상세 조회 참고
modifierName	string	-	최종 수정자명 게시글 상세 조회 참고
modifyYmdt	object	null	최종수정일 게시글 상세 조회 참고
modifierNo	object	null	최종 수정자 번호 게시글 상세 조회 참고
modifierType	object	null	최종 수정자 타입 게시글 상세 조회 참고
modifiable	boolean	-	수정가능 여부 게시글 상세 조회 참고
secreted	boolean	-	비밀글 여부 게시글 상세 조회 참고
noticed	boolean	-	공지글 여부 게시글 상세 조회 참고
recommended	boolean	-	본인의 추천 여부 게시글 상세 조회 참고
scraped	boolean	-	본인의 스크랩 여부 게시글 상세 조회 참고
reported	boolean	-	본인의 게시글 신고 여부 게시글 상세 조회 참고
replyEnabled	boolean	-	답글 작성 가능 여부 게시글 상세 조회 참고
viewCnt	number	0	조회수 게시글 상세 조회 참고
recommendedCnt	number	0	추천 수 게시글 상세 조회 참고
reportedCnt	number	0	게시글 신고 누적 횟수 게시글 상세 조회 참고
repliedCnt	number	0	답글 개수 게시글 상세 조회 참고
memberGroupNo	object	null	회원 그룹번호 게시글 상세 조회 참고
displayStatusType	string	DISPLAY	게시글 전시 상태 게시글 상세 조회 참고
tags	Array	-	태그 게시글 상세 조회 참고
postSearchTags	Array	-	검색용 게시글 태그 게시글 상세 조회 참고
attachments	Array	[]	첨부파일 목록(전체) 게시글 상세 조회 참고
files	Array	[]	첨부파일 리스트(일반 파일) 게시글 상세 조회 attachments 참고
images	Array	[]	이미지 리스트(이미지) 게시글 상세 조회 attachments 참고
parentArticle	object	null	부모 게시글 게시글 상세 조회 참고

모듈명: article-replies (deprecated)원본소스

게시판 답글 모듈입니다.

속성

속성명	타입	기본값	설명
article-no:query	number	-	(필수)`query string` 중 `articleNo` 값 게시글 번호
board-id:query	string	-	(필수)`query string` 중 `boardId` 게시판 ID
visible-pages-count	number	5	페이지네이션 표시 페이지 수

사용 가능 변수

변수명	타입	기본값	설명
boardConfig.replyUsed	boolean	false	-
totalAvailableAmt	number	0	사용가능한 총 적립금액
items	Items[]	[]	게시판 설정 조회하기 API 응답 결과 중 `items`와 동일 (아래 타입 참조)

Items 타입

속성명	타입	기본값	설명
secreted	boolean	false	비밀글 여부 (false: 공개글, true: 비밀글)
attached	boolean	false	파일 첨부 여부 (false: 첨부파일 미존재, true: 첨부파일 존재)
registerYmdt	string	-	최초 등록일 (yyyy-mm-dd)
registerName	string	-	최초 등록자명
viewCnt	number	0	조회수

모듈명: article-replies-v2원본소스

게시판 답글 모듈입니다.

속성

속성명	타입	기본값	설명
board-no:query	string	boardNo	(필수) `게시판 번호에 사용 될 쿼리 값`
article-no:query	string	articleNo	(필수) `게시물 번호에 사용 될 쿼리 값`

사용 가능 변수

변수명	타입	기본값	설명
isLoading	boolean	true	게시판 답글 API 조회 여부
boardNo	number	-	게시판 번호
totalCount	number	-	게시글 답글 리스트 개수
items	Array	[]	게시글 답글 리스트 게시판 답글 리스트 조회하기 참고
boardConfig	object	-	게시판 설정 게시판 설정 조회하기 boardConfigs 참고

모듈명: article-view-btns원본소스

게시판 상세 버튼 모듈입니다.

속성

속성명	타입	기본값	설명
article-no:query	number	-	(필수)`query string` 중 `articleNo` 값 게시글 번호
board-id:query	string	-	(필수)`query string` 중 `boardId` 게시판 ID

사용 가능 변수

변수명	타입	기본값	설명
secreted	boolean	false	게시글 상세 조회 API 응답 결과 중 `title`과 동일 비밀글 여부 (false: 공개글, true: 비밀글)
canModify	boolean	false	수정 권한 여부 `registerType`이 `GUEST` 이거나 `modifiable` 데이터가 `true`인 경우 true
registerType	string	false	게시글 상세 조회 API 응답 결과 중 `registerType`과 동일 최초 등록자 타입
boardName	string	-	게시판 설정 조회 API 응답 결과 중 `boardConfigs`에서 name과 동일 게시판 이름

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<main class="l-page">
    <div class="board">
        <article-view-v2 board-no:query="boardNo" article-no:query="articleNo">
            <div class="article-view">
                {{#unless isLoading}}
                <p class="board__head">
                    <span class="bold board__title" slot="boardName" shopby-board-name="{{boardName}}">{{boardName}}</span>
                </p>
                {{#if parentArticle}}
                <div class="article-view__parent" slot="isParentArticleOpen">
                    <div class="article-view__table title-row">
                        <span class="article-view__table cell">조회 {{parentArticle.viewCnt}}</span>
                        <span class="article-view__table cell-title">{{parentArticle.title}}</span>
                        <span class="bold article-view__table cell">{{parentArticle.registerName}}</span>
                        <span class="article-view__table cell">{{formatUseByDate parentArticle.registerYmdt}}</span>
                    </div>
                    <div class="article-view__content" shopby-html-content="PARENT"></div>
                </div>

                <div class="article-view__btns">
                    <div shopby-article-no="{{parentArticle.articleNo}}">
                        {{#if parentArticle.canReport}} {{#if parentArticle.reported}}
                        <button class="btn btn--line-dark btn--xs" shopby-action="CANCEL_REPORT">신고 취소</button>
                        {{else}}
                        <button class="btn btn--line-dark btn--xs" shopby-action="REPORT_WRITE">신고</button>
                        {{/if}} {{/if}}
                    </div>
                    <button class="btn btn--line-dark btn--xs" shopby-action="LIST">목록</button>
                </div>

                <p class="reply-section-title">답글보기</p>
                {{/if}}

                <div class="article-view__table title-row">
                    <span class="article-view__table cell">조회 {{viewCnt}}</span>
                    <span class="article-view__table cell-title">{{title}}</span>
                    <span class="bold article-view__table cell">{{registerName}}</span>
                    <span class="article-view__table cell cell-date">{{formatUseByDate registerYmdt}}</span>
                </div>

                <div class="article-view__content">
                    <div class="article-view__content--main-image">
                        <img src="{{imageUrl}}" />
                    </div>
                    <div class="article-view__content--text-detail" shopby-html-content="MAIN"></div>
                    <div class="article-view__content--attach-files right-box__question-attach-files folding-images-by-one-row is-active">
                        <ul class="folding-images-by-one-row__image-list">
                            {{#each images}}
                            <li class="folding-images-by-one-row__image-item" shopby-image-idx="{{@index}}">
                                {{img uploadedFileName 100 100 fileName}}
                                <button class="folding-images-by-one-row__image-zoom-in" shopby-on:click="ZOOM_IN_IMAGE">
                                    <span class="ico ico--magnet-white-12"></span>
                                </button>
                            </li>
                            {{/each}}
                        </ul>
                    </div>

                    <div class="article-view__content--attach-files">
                        <ul>
                            {{#each files}}
                            <li>
                                <span class="ico ico--clip-16 article-list__item-title-icon"></span>
                                <span
                                    style="cursor: pointer"
                                    shopby-file-name="{{uploadedFileName}}"
                                    shopby-origin-file-name="{{fileName}}"
                                    shopby-action="DOWNLOAD_FILE"
                                >
                                    {{fileName}}
                                </span>
                            </li>
                            {{/each}}
                        </ul>
                    </div>
                </div>

                {{/unless}}

                <div
                    class="article-view__btns"
                    shopby-secreted="{{secreted}}"
                    shopby-board-name="{{boardName}}"
                    shopby-register-type="{{registerType}}"
                    shopby-article-no="{{articleNo}}"
                    shopby-reply="{{#if parentArticle}}true{{/if}}"
                >
                    <div>
                        {{#if canModify}}
                        <button class="btn btn--line-gray btn--xs" shopby-action="MODIFY">수정</button>
                        <button class="btn btn--line-gray btn--xs" shopby-action="DELETE">삭제</button>
                        {{/if}} {{#if canReport}} {{#if reported}}
                        <button class="btn btn--line-dark btn--xs" shopby-action="CANCEL_REPORT">신고 취소</button>
                        {{else}}
                        <button class="btn btn--line-dark btn--xs" shopby-action="REPORT_WRITE">신고</button>
                        {{/if}} {{/if}}
                    </div>
                    {{#if parentArticle}}
                    <button class="btn btn--line-dark btn--xs" shopby-parent-article-no="{{parentArticle.postNo}}" shopby-action="MOVE_TO_PARENT_POST">
                        본문으로 가기
                    </button>
                    {{else}}
                    <div>
                        {{#if boardConfig.replyUsed}} {{#ifNe boardConfig.authorityConfig.replyPostWriteConfig.type 'ADMIN'}}
                        <button
                            class="btn btn--line-dark btn--xs"
                            shopby-action="WRITE_REPLY"
                            shopby-board-no="{{boardConfig.boardNo}}"
                            shopby-authority-type="{{boardConfig.authorityConfig.replyPostWriteConfig.type}}"
                            shopby-writable="{{boardConfig.writable}}"
                        >
                            답글
                        </button>
                        {{/ifNe}} {{/if}}
                        <button class="btn btn--line-dark btn--xs" shopby-action="LIST">목록</button>
                    </div>
                    {{/if}}
                </div>
            </div>
        </article-view-v2>

        <article-replies-v2 board-no:query="boardNo" article-no:query="articleNo" uses-pagination>
            <div>
                <div slot='totalCount'>
                    {{#if boardConfig.replyUsed}}
                        {{#ifNe totalCount 0}}
                            <p class='reply-section-title'>답글보기</p>
                            <table class='l-table reply-section-table'>
                                <colgroup>
                                    <col style='width: 10%' />
                                    <col />
                                    <col style='width: 20%' />
                                    <col style='width: 20%' />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>
                                            번호
                                        </th>
                                        <th>
                                            제목
                                        </th>
                                        <th>
                                            작성자
                                        </th>
                                        <th>
                                            작성일
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{#each items}}
                                    <tr>
                                        <td>
                                            {{listIndex @index ../pageNumber ../pageSize}}
                                        </td>
                                        <td>
                                            <a class="reply-list__item-link" shopby-action="GO_TO_REPLY_DETAIL" shopby-board-no={{../boardNo}} href="/pages/board/post-detail.html?boardNo={{../boardNo}}&articleNo={{postNo}}">
                                                <p class="reply-list__item-top">
                                                    <span class="ico ico--corner-down-right-16"></span>
                                                    {{#if secreted}}
                                                    <span class="ico ico--lock-black-16 reply-list__lock"></span>
                                                    <span class="reply-list__item-title">비밀글입니다.</span>
                                                    {{else}}
                                                    <span class="reply-list__item-title">{{title}}</span>
                                                    {{/if}}

                                                    {{#if attached}}
                                                    <span class="ico ico--clip-16 reply-list__paper-clip"></span>
                                                    {{/if}}
                                                    {{#isNewPost registerYmdt}}
                                                        <span class="ico ico--n-white-16 reply-list__item-new-icon"></span>
                                                    {{/isNewPost}}
                                                </p>
                                            </a>
                                        </td>
                                        <td>
                                            {{registerName}}
                                        </td>
                                        <td>
                                            {{formatUseByDate registerYmdt}}
                                        </td>
                                    </tr>
                                    {{/each}}
                                </tbody>
                            </table>

                            <div class='pagination' slot='pagination'>
                                <button class="sprite-image pagination__btn pagination__btn--double-lt reply-list__pagination-btn" shopby-on:click="MOVE_TO_FIRST_PAGE">
                                </button>
                                <button class="sprite-image pagination__btn pagination__btn--lt reply-list__pagination-btn" shopby-on:click="MOVE_TO_PREV_PAGE">
                                </button>
                                {{#each pagination.pages}}
                                <button class="pagination__link {{#if isCurrentPage}}is-current{{/if}} reply-list__pagination-btn" shopby-on:click="MOVE_TO_PAGE" shopby-page="{{page}}">{{page}}</a>
                                {{/each}}
                                <button class="sprite-image pagination__btn pagination__btn--rt reply-list__pagination-btn" shopby-on:click="MOVE_TO_NEXT_PAGE">
                                </button>
                                <button class="sprite-image pagination__btn pagination__btn--double-rt reply-list__pagination-btn" shopby-on:click="MOVE_TO_LAST_PAGE">
                                </button>
                            </div>
                        {{/ifNe}}
                    {{/if}}
                </div>
            </div>
        </article-replies-v2>
    </div>
</main>

<div class="board-detail">
    <article-view-v2 class="article-view" board-no:query="boardNo" article-no:query="articleNo">
        <div>
            {{#unless isLoading}} {{#if parentArticle}}
            <div class="article-view__parent" slot="isParentArticleOpen">
                {{#if isParentArticleOpen}}
                <div class="article-view__parent-content {{#if isParentArticleOpen}}{{else}}hidden{{/if}}">
                    <p class="article-view__title">{{{parentArticle.title}}}</p>
                    <div class="article-view__sub-info">
                        <div>
                            <span class="article-view__register-name">{{parentArticle.registerName}}</span>
                            <span class="article-view__register-ymdt font-montserrat">{{formatUseByDate parentArticle.registerYmdt}}</span>
                        </div>
                        <span class="article-view__view-count">
                            조회수 
                            <span class="font-montserrat">{{convertToKoreanCurrency parentArticle.viewCnt}}</span>
                        </span>
                    </div>
                    <div class="article-view__content">
                        <div shopby-html-content="PARENT"></div>
                    </div>

                    <div class="article-view__btns">
                        <div class="article-view__btns-action">
                            <div shopby-article-no="{{parentArticle.articleNo}}">
                                {{#if parentArticle.canReport}} {{#if parentArticle.reported}}
                                <button class="btn btn--line-gray" shopby-action="CANCEL_REPORT">신고 취소</button>
                                {{else}}
                                <button class="btn btn--line-gray" shopby-action="REPORT_WRITE">신고</button>
                                {{/if}} {{/if}}
                            </div>
                        </div>
                        <button class="btn btn--line-gray btn--xs" shopby-action="LIST">목록</button>
                    </div>
                </div>
                {{/if}}

                <button class="btn btn--line-gray btn--lg-wide" shopby-on:click="PARENT_ARTICLE_BTN">
                    본문 {{#if isParentArticleOpen}} 닫기
                    <span class="ico ico--chevron-down-24 article-view__ico-chevron-up"></span>
                    {{else}} 열기
                    <span class="ico ico--chevron-down-24"></span>
                    {{/if}}
                </button>
            </div>
            {{/if}}
            <div class="board__head">
                <h2 class="article-view__title">{{{title}}}</h2>
                <div class="article-view__sub-info">
                    <div>
                        <span class="article-view__register-name">{{registerName}}</span>
                        <span class="article-view__register-ymdt font-montserrat">{{formatUseByDate registerYmdt}}</span>
                    </div>
                    <span class="article-view__view-count">
                        조회수 
                        <span class="font-montserrat">{{convertToKoreanCurrency viewCnt}}</span>
                    </span>
                </div>
            </div>
            <div class="article-view__content">
                <div class="article-view__content--main-image">
                    <img src="{{imageUrl}}" />
                </div>
                <div shopby-html-content="MAIN"></div>
                <div class="article-view__content--attach-files folding-images-by-one-row is-active">
                    <ul class="folding-images-by-one-row__image-list">
                        {{#each images}}
                        <li class="folding-images-by-one-row__image-item" shopby-image-idx="{{@index}}">
                            {{img uploadedFileName 100 100 fileName}}
                            <button class="folding-images-by-one-row__image-zoom-in" shopby-on:click="ZOOM_IN_IMAGE">
                                <span class="ico ico--magnet-white-12"></span>
                            </button>
                        </li>
                        {{/each}}
                    </ul>
                </div>

                <div class="article-view__content--attach-files">
                    <ul>
                        {{#each files}}
                        <li>
                            <span class="ico ico--clip-16 article-list__item-title-icon"></span>
                            <span
                                style="cursor: pointer"
                                shopby-file-name="{{uploadedFileName}}"
                                shopby-origin-file-name="{{fileName}}"
                                shopby-action="DOWNLOAD_FILE"
                            >
                                {{fileName}}
                            </span>
                        </li>
                        {{/each}}
                    </ul>
                </div>
            </div>
            {{/unless}}

            <div
                class="article-view__btns"
                shopby-secreted="{{secreted}}"
                shopby-board-name="{{boardName}}"
                shopby-register-type="{{registerType}}"
                shopby-reply="{{#if parentArticle}}true{{/if}}"
            >
                <div class="article-view__btns-action">
                    <div slot="canModify">
                        {{#if canModify}}
                        <button class="btn btn--line-gray" shopby-action="MODIFY">수정</button>
                        <button class="btn btn--line-gray" shopby-action="DELETE">삭제</button>
                        {{/if}}
                    </div>
                    <div slot="report" shopby-article-no="{{articleNo}}">
                        {{#if canReport}} {{#if reported}}
                        <button class="btn btn--line-gray" shopby-action="CANCEL_REPORT">신고 취소</button>
                        {{else}}
                        <button class="btn btn--line-gray" shopby-action="REPORT_WRITE">신고</button>
                        {{/if}} {{/if}}
                    </div>
                </div>

                {{#if parentArticle}}
                <button class="btn btn--line-gray btn--xs" shopby-parent-article-no="{{parentArticle.postNo}}" shopby-action="MOVE_TO_PARENT_POST">
                    본문으로 가기
                </button>
                {{else}}
                <div>
                    {{#if boardConfig.replyUsed}} {{#ifNe boardConfig.authorityConfig.replyPostWriteConfig.type 'ADMIN'}}
                    <button
                        class="btn btn--line-gray btn--xs"
                        shopby-action="WRITE_REPLY"
                        shopby-board-no="{{boardConfig.boardNo}}"
                        shopby-authority-type="{{boardConfig.authorityConfig.replyPostWriteConfig.type}}"
                        shopby-writable="{{boardConfig.writable}}"
                    >
                        답글
                    </button>
                    {{/ifNe}} {{/if}}
                    <button class="btn btn--line-gray btn--xs" shopby-action="LIST">목록</button>
                </div>
                {{/if}}
            </div>
        </div>
    </article-view-v2>

    <article-replies-v2 class="article-replies" board-no:query="boardNo" article-no:query="articleNo" pair-key="REPLY_MORE_VIEW_BUTTON" uses-more-button>
        <div>
            <div slot='totalCount'>
                {{#if boardConfig.replyUsed}}
                    {{#ifNe totalCount 0}}
                    <p class="reply-section-title">답글보기</p>
                    <ul slot="items" class="reply-list">
                        {{#each items}}
                        <li class="reply-list__item">
                            <a shopby-action="GO_TO_REPLY_DETAIL" shopby-board-no={{../boardNo}} href="/pages/board/post-detail.html?boardNo={{../boardNo}}&articleNo={{postNo}}">
                                <p class="reply-list__item-top">
                                    <span class="ico ico--corner-down-right-16"></span>
                                    {{#if secreted}}
                                    <span class="ico ico--lock-black-16 article-list__item-title-icon"></span>
                                    <span class="bold reply-list__item-title">비밀글입니다.</span>
                                    {{else}}
                                    <span class="bold reply-list__item-title">{{{title}}}</span>
                                    {{/if}} {{#if attached}}
                                    <span class="ico ico--clip-16 article-list__item-title-icon"></span>
                                    {{/if}}
                                    {{#isNewPost registerYmdt}}
                                        <span class="ico ico--n-white-16 article-list__item-new-icon"></span>
                                    {{/isNewPost}}
                                </p>
                                <div class="reply-list__item-bottom">
                                    <div>
                                        <span class="reply-list__register-name">{{registerName}}</span>
                                        <span class="reply-list__register-ymdt font-montserrat">{{formatUseByDate registerYmdt}}</span>
                                    </div>
                                    <span class="reply-list__view-count">조회수 <span class="font-montserrat">{{viewCnt}}</span></span>
                                </div>
                            </a>
                        </li>
                        {{/each}}
                    </ul>
                    {{/ifNe}}
                {{/if}}
            </div>
        </div>
    </article-replies-v2>

    <article-view-btns board-id:query="boardId" board-no:query="boardNo" article-no:query="articleNo">
        <div class="article-view__btns">
            <div>
                <div slot="canModify" shopby-secreted="{{secreted}}" shopby-board-name="{{boardName}}" shopby-register-type="{{registerType}}">
                    {{#if canModify}}
                    <button class="btn btn--line-gray" shopby-action="MODIFY">수정</button>
                    <button class="btn btn--line-gray" shopby-action="DELETE">삭제</button>
                    {{/if}}
                </div>
            </div>
            <button class="btn btn--line-gray btn--xs" shopby-action="LIST">목록</button>
        </div>
    </article-view-btns>
</div>

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