Aurora Modules

상품후기 상세 모달

전체 상품 후기 게시판 페이지에 상품 후기 상세 모달에서 노출되는 상품후기 상세 모듈입니다.

모듈명: board-reviews-detail원본소스

상품후기 상세 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
activeImg	string	-	선택한 이미지
review	Review	-	상품평 가져오기 API 응답 결과와 동일 (상품평) (아래 타입 참조)
reviewConfig	ReviewConfig	-	게시판 설정 조회하기 API API 응답 값 중 `productReviewConfig`와 동일 (아래 타입 참조)

Review 타입

속성명	타입	기본값	설명
registerName	string	-	작성자 명
registerYmdt	string	-	등록일
fileUrls	string[]	[]	파일 URL 리스트
starSet	(full \| half \| empty)[]	[]	별표 점수 리스트 full:1점, half:0.5점, empty: 0점
productNo	number	-	상품 번호
reviewNo	number	-	상품평 번호
productTotalCount	number	0	상품평 총 개수
orderedOption	OrderedOption	-	주문 옵션 정보 (아래 타입 참조)

OrderedOption 타입

속성명	타입	기본값	설명
optionName	string	-	옵션명
optionValue	string	-	옵션값

ReviewConfig 타입

속성명	타입	기본값	설명
replyUsed	boolean	false	답글작성 가능 여부
guestPostingUsed	boolean	false	비회원 작성가능 여부
attachmentUsed	boolean	false	첨부파일 사용 여부
name	string	-	게시판 이름

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<board-reviews-detail>
    <div>
        <div slot="reviewDetail">
            {{#ifEq reviewConfig.expandedReviewConfig.photoReviewDisplayType 'FIRST_TYPE'}}
            <div class="board-reviews-detail-first-type">
                <div class="board-reviews-detail__images" slot="firstTypeActiveImg">
                    {{img activeImg 360 360 '' 'board-reviews-detail__active-image'}}
                    <ul class="article-form article-form__attachments board-reviews-detail__attachments" slot="imagesList">
                        {{#each review.fileUrls}}
                        <li
                            class="article-form__attachment board-reviews-detail__attachment {{#ifEq ../activeImg this}}active{{/ifEq}}"
                            shopby-image-url="{{this}}"
                            shopby-on:click="CLICK_ATTACH_IMAGE"
                        >
                            {{img this 80 80}}
                        </li>
                        {{/each}}
                    </ul>

                    <button class="prev" shopby-on:click="PREV_BOARD_REVIEW"><span class="ico ico--chevron-down-24"></span></button>
                    <button class="next" shopby-on:click="NEXT_BOARD_REVIEW"><span class="ico ico--chevron-down-24"></span></button>
                </div>

                <div class="board-reviews-detail__top">
                    <div class="board-reviews-detail__rate-box">
                        <div class="star" slot="starSet">
                            {{#each review.starSet}}
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                xmlns:xlink="http://www.w3.org/1999/xlink"
                                width="20"
                                height="20"
                                viewBox="0 0 20 20"
                                class="crema_product_reviews_score_star_wrapper__star"
                            >
                                <linearGradient id="gradient-star">
                                    <stop class="gradient__star-secondary" offset="73%" />
                                    <stop class="gradient__star" offset="73%" />
                                </linearGradient>
                                <defs>
                                    <path
                                        id="star-full"
                                        d="M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z"
                                    />
                                    <path
                                        id="star-half"
                                        fill="url(#gradient-star)"
                                        d="M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z"
                                    />
                                </defs>
                                <path
                                    id="star-empty"
                                    d="M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z"
                                    fill="#EAECF0"
                                />
                                <use xlink:href="#star-{{.}}"></use>
                            </svg>
                            {{/each}}
                        </div>
                        <button
                            class="btn btn--line-dark btn--xs"
                            shopby-action="VIEW_PHOTO_REVIEWS"
                            shopby-product-no="{{review.productNo}}"
                            shopby-review-no="{{review.reviewNo}}"
                            shopby-product-total-count="{{review.productTotalCount}}"
                        >
                            전체보기
                        </button>
                    </div>

                    <div class="board-reviews-detail__bottom">
                        <div class="board-reviews-detail__write-info">
                            <span class="board-reviews-detail__writer">{{review.registerName}}</span>
                            <span class="font-montserrat board-reviews-detail__date">{{formatUseByDate review.registerYmdt}}</span>
                        </div>
                        {{#if review.orderedOption}} {{#if review.orderedOption.optionUsed}}
                        <div class="board-reviews-detail__option">
                            <span class="board-reviews-detail__option-name">{{review.orderedOption.optionName}}</span>
                            :
                            <span class="board-reviews-detail__option-value">{{review.orderedOption.optionValue}}</span>
                        </div>
                        {{/if}} {{/if}}

                        <div class="board-reviews-detail__content">{{{review.content}}}</div>

                        <div class="board-reviews-detail__recommend">
                            {{#if reviewConfig.expandedReviewConfig.useReviewRecommend}}
                            <div class="recommend__cnt">
                                <span class="ico ico--thumbs-up-16"></span>
                                추천해요
                                <span class="bold highlight">{{convertToKoreanCurrency review.recommendCnt}}</span>
                            </div>
                            {{/if}} {{#if reviewConfig.canComment}} {{#if comments.contents}}
                            <div slot="reviewComments">
                                댓글
                                <span class="ico ico--chevron-down-24 {{#if isViewComments}}open{{/if}}" shopby-on:click="VIEW_COMMENTS"></span>
                            </div>
                            {{/if}} {{/if}}
                        </div>

                        {{#if reviewConfig.canComment}}
                        <ul class="review-comment-list" slot="reviewComments">
                            {{#if isViewComments}} {{#each comments.contents}}
                            <li>
                                <div class="review-comments__write-info">
                                    <span class="review-comments__writer">관리자</span>
                                    <span class="font-montserrat review-comments__date">{{formatUseByDate registerYmdt}}</span>
                                </div>
                                <div class="font-montserrat review-comments__content">{{content}}</div>
                            </li>
                            {{/each}} {{/if}}
                        </ul>
                        {{/if}}
                    </div>
                </div>
            </div>

            {{else}}
            <div class="board-reviews-detail-second-type">
                <div class="board-reviews-detail__top">
                    <div class="star" slot="starSet">
                        {{#each review.starSet}}
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                            width="20"
                            height="20"
                            viewBox="0 0 20 20"
                            class="crema_product_reviews_score_star_wrapper__star"
                        >
                            <linearGradient id="gradient-star">
                                <stop class="gradient__star-secondary" offset="73%" />
                                <stop class="gradient__star" offset="73%" />
                            </linearGradient>
                            <defs>
                                <path
                                    id="star-full"
                                    d="M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z"
                                />
                                <path
                                    id="star-half"
                                    fill="url(#gradient-star)"
                                    d="M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z"
                                />
                            </defs>
                            <path
                                id="star-empty"
                                d="M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z"
                                fill="#EAECF0"
                            />
                            <use xlink:href="#star-{{.}}"></use>
                        </svg>
                        {{/each}}
                    </div>
                    <button
                        class="btn btn--line-dark btn--xs"
                        shopby-action="VIEW_PHOTO_REVIEWS"
                        shopby-product-no="{{review.productNo}}"
                        shopby-review-no="{{review.reviewNo}}"
                    >
                        전체보기
                    </button>
                </div>

                <div class="board-reviews-detail__images-box" slot="secondeTypeActiveImg">
                    <div class="board-reviews-detail__images">
                        {{img activeImg}}
                        <button class="prev" shopby-on:click="PREV_BOARD_REVIEW">
                            <span class="ico ico--chevron-down-24"></span>
                        </button>
                        <button class="next" shopby-on:click="NEXT_BOARD_REVIEW">
                            <span class="ico ico--chevron-down-24"></span>
                        </button>
                    </div>
                    <ul class="article-form article-form__attachments board-reviews-detail__attachments" slot="imagesList">
                        {{#each review.fileUrls}}
                        <li
                            class="article-form__attachment board-reviews-detail__attachment {{#ifEq ../activeImg this}}active{{/ifEq}}"
                            shopby-image-url="{{this}}"
                            shopby-on:click="CLICK_ATTACH_IMAGE"
                        >
                            {{img this 80 80}}
                        </li>
                        {{/each}}
                    </ul>
                </div>
                <div class="board-reviews-detail__bottom">
                    <div class="board-reviews-detail__write-info">
                        <div class="board-reviews-detail__option">
                            {{#if review.orderedOption}} {{#if review.orderedOption.optionUsed}}
                            <span class="board-reviews-detail__option-name">{{review.orderedOption.optionName}}</span>
                            :
                            <span class="board-reviews-detail__option-value">{{review.orderedOption.optionValue}}</span>
                            {{/if}} {{/if}}
                        </div>
                        <div>
                            <span class="board-reviews-detail__writer">{{review.registerName}}</span>
                            <span class="board-reviews-detail__date">{{formatUseByDate review.registerYmdt}}</span>
                        </div>
                    </div>

                    <div class="board-reviews-detail__content">{{{review.content}}}</div>

                    <div class="board-reviews-detail__recommend">
                        {{#if reviewConfig.expandedReviewConfig.useReviewRecommend}}
                        <button
                            class="recommend__cnt"
                            shopby-on:click="TOGGLE_REVIEW_RECOMMEND"
                            shopby-action="RECOMMEND"
                            shopby-review-no="{{review.reviewNo}}"
                        >
                            <span class="ico ico--thumbs-up-16"></span>
                            추천해요
                            <span class="font-montserrat bold highlight" slot="recommendCnt">{{convertToKoreanCurrency review.recommendCnt}}</span>
                        </button>
                        {{/if}} {{#if comments.contents}}
                        <div slot="isViewComments">
                            댓글
                            <span class="ico ico--chevron-down-24 {{#if isViewComments}}open{{/if}}" shopby-on:click="VIEW_COMMENTS"></span>
                        </div>
                        {{/if}}
                    </div>

                    <ul class="review-comment-list" slot="isViewComments">
                        {{#if isViewComments}} {{#each comments.contents}}
                        <li>
                            <div class="review-comments__write-info">
                                <span class="font-noto review-comments__writer">관리자</span>
                                <span class="font-montserrat review-comments__date">{{formatUseByDate registerYmdt}}</span>
                            </div>
                            <div class="font-montserrat review-comments__content">{{content}}</div>
                        </li>
                        {{/each}} {{/if}}
                    </ul>
                </div>
            </div>
            {{/ifEq}}
        </div>
    </div>
</board-reviews-detail>

<board-reviews-detail>
    <div>
        <div class="board-reviews-detail" slot="reviewDetail">
            <div class="board-reviews-detail__top">
                <span class="star" slot="starSet">
                    {{#each review.starSet}}
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="20"
                        height="20"
                        viewBox="0 0 20 20"
                        class="crema_product_reviews_score_star_wrapper__star"
                    >
                        <linearGradient id="gradient-star">
                            <stop class="gradient__star-secondary" offset="73%" />
                            <stop class="gradient__star" offset="73%" />
                        </linearGradient>
                        <defs>
                            <path
                                id="star-full"
                                d="M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z"
                            />
                            <path
                                id="star-half"
                                fill="url(#gradient-star)"
                                d="M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z"
                            />
                        </defs>
                        <path
                            id="star-empty"
                            d="M9.53834 1.60996C9.70914 1.19932 10.2909 1.19932 10.4617 1.60996L12.5278 6.57744C12.5998 6.75056 12.7626 6.86885 12.9495 6.88383L18.3123 7.31376C18.7556 7.3493 18.9354 7.90256 18.5976 8.19189L14.5117 11.6919C14.3693 11.8139 14.3071 12.0053 14.3506 12.1876L15.5989 17.4208C15.7021 17.8534 15.2315 18.1954 14.8519 17.9635L10.2606 15.1592C10.1006 15.0615 9.89938 15.0615 9.73937 15.1592L5.14806 17.9635C4.76851 18.1954 4.29788 17.8534 4.40108 17.4208L5.64939 12.1876C5.69289 12.0053 5.6307 11.8139 5.48831 11.6919L1.40241 8.19189C1.06464 7.90256 1.24441 7.3493 1.68773 7.31376L7.05054 6.88383C7.23744 6.86885 7.40024 6.75056 7.47225 6.57744L9.53834 1.60996Z"
                            fill="#EAECF0"
                        />
                        <use xlink:href="#star-{{.}}"></use>
                    </svg>
                    {{/each}}
                </span>

                <button
                    class="btn btn--line-dark btn--sm"
                    shopby-action="VIEW_PHOTO_REVIEWS"
                    shopby-product-no="{{review.productNo}}"
                    shopby-review-no="{{review.reviewNo}}"
                >
                    전체보기
                </button>
            </div>

            <div class="board-reviews-detail__images" slot="firstTypeActiveImg">
                {{img activeImg 335 335 '' 'board-reviews-detail__active-image'}}
                <ul class="article-form article-form__attachments board-reviews-detail__attachments" slot="imagesList">
                    {{#each review.fileUrls}}
                    <li
                        class="article-form__attachment board-reviews-detail__attachment {{#ifEq ../activeImg this}}active{{/ifEq}}"
                        shopby-image-url="{{this}}"
                        shopby-on:click="CLICK_ATTACH_IMAGE"
                    >
                        {{img this 80 80}}
                    </li>
                    {{/each}}
                </ul>
                <button class="prev" shopby-on:click="PREV_BOARD_REVIEW"><span class="ico ico--chevron-down-24"></span></button>
                <button class="next" shopby-on:click="NEXT_BOARD_REVIEW"><span class="ico ico--chevron-down-24"></span></button>
            </div>

            <div class="board-reviews-detail__bottom">
                <div class="board-reviews-detail__write-info">
                    <span class="board-reviews-detail__writer">{{review.registerName}}</span>
                    <span class="board-reviews-detail__date">{{formatUseByDate review.registerYmdt}}</span>
                </div>
                {{#if review.orderedOption}} {{#if review.orderedOption.optionUsed}}
                <div class="board-reviews-detail__option">
                    <span class="board-reviews-detail__option-name">{{review.orderedOption.optionName}}</span>
                    :
                    <span class="board-reviews-detail__option-value">{{review.orderedOption.optionValue}}</span>
                </div>
                {{/if}} {{/if}}

                <div class="board-reviews-detail__content">
                    <p>{{{review.content}}}</p>
                    {{#if reviewConfig.expandedReviewConfig.useReviewRecommend}}
                    <div class="board-reviews-detail__recommend">
                        <button
                            class="recommend__cnt"
                            shopby-on:click="TOGGLE_REVIEW_RECOMMEND"
                            shopby-action="RECOMMEND"
                            shopby-review-no="{{review.reviewNo}}"
                        >
                            <span class="ico ico--thumbs-up-16"></span>
                            <span class="board-reviews-detail__recommend-text">추천해요</span>
                            <span class="highlight board-reviews-detail__recommend-count">{{convertToKoreanCurrency review.recommendCnt}}</span>
                        </button>
                    </div>
                    {{/if}}
                </div>

                {{#if reviewConfig.canComment}}
                <ul class="review-comments-list">
                    {{#each comments.contents}}
                    <li class="review-comments-list__item">
                        <div class="review-comments__write-info">
                            <span class="font-noto review-comments__writer">관리자</span>
                            <span class="font-montserrat review-comments__date">{{formatUseByDate registerYmdt}}</span>
                        </div>
                        <div class="font-montserrat review-comments__content">{{content}}</div>
                    </li>
                    {{/each}}
                </ul>
                {{/if}}
            </div>
        </div>
    </div>
</board-reviews-detail>

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