Aurora Modules

상품 후기 상세

상품 후기 상세 페이지에서 노출되는 상품 후기 상세 모듈입니다.

URL: /pages/my/product-review-detail.html?productNo={productNo}&reviewNo={reviewNo}

모듈명: product-review-detail원본소스

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

속성

속성명	타입	기본값	설명
product-no:query	number	-	(필수)`query string` 중 `productNo` 값 상품 번호
review-no:query	number	-	(필수)`query string` 중 `reviewNo` 값 상품평 번호

사용 가능 변수

변수명	타입	기본값	설명
givenAccumulationYn	Y \| N	N	적립금 지급 여부
starSet	(full \| half \| empty)[]	[]	별표 점수 리스트 full:1점, half:0.5점, empty: 0점
registerName	string	-	작성자 명
registerYmdt	string	-	작성자 명
imageUrl	string	-	상품 대표 이미지
productName	string	-	상품명
orderedOption	OrderedOption	-	주문 옵션 정보
reviewConfig	ReviewConfig	-	게시판 설정 조회하기 API API 응답 값 중 `productReviewConfig`와 동일 (아래 타입 참조)

OrderedOption 타입

속성명	타입	기본값	설명
optionUsed	boolean	false	옵션 사용여부
optionName	string	-	옵션 명
optionValue	string	-	옵션 값

ReviewConfig 타입

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

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<main class="l-my-page">
    <div class="my-page-box">
        <div class="right-box">
            <div class="right-box__container">
                <p class="right-box__head">
                    <span class="font-noto right-box__title">상품후기 상세</span>
                </p>

                <product-review-detail product-no:query="productNo" review-no:query="reviewNo">
                    <div class="product-review-detail">
                        <div class="product-review-detail__top">
                            <div class="product-review-detail__rate">
                                <div class="star" slot="starSet">
                                    {{#each 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>
                            </div>
                            <div class="product-review-detail__product">
                                {{img imageUrl 80 80 productName '' ''}}
                                <div class="product-review-detail__product-info">
                                    <p class="bold product-review-detail__product-title">{{productName}}</p>
                                    {{#if orderedOption}} {{#if orderedOption.optionUsed}} {{#ifNe orderedOption.optionType 'PRODUCT_ONLY'}}
                                    <p class="product-review-detail__product-option">
                                        <span>{{orderedOption.optionName}}:{{orderedOption.optionValue}}</span>
                                    </p>
                                    {{/ifNe}} {{/if}} {{/if}}
                                </div>
                            </div>
                            <div class="product-review-detail__writer-info">
                                <span class="product-review-detail__writer-name">{{registerName}}</span>
                                <span class="product-review-detail__writer-date">{{formatUseByDate registerYmdt}}</span>
                            </div>
                        </div>
                        <div class="product-review-detail__bottom">
                            <div class="product-review-detail__content">
                                <p>{{content}}</p>

                                <div class="folding-images-by-one-row is-active">
                                    <ul class="folding-images-by-one-row__image-list" shopby-images="{{fileUrls}}">
                                        {{#each fileUrls}}
                                        <li class="folding-images-by-one-row__image-item" shopby-image-idx="{{@index}}">
                                            {{img this 80 80}}
                                            <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>
                        </div>
                        <div
                            class="detail-page__btn-group"
                            shopby-review-no="{{reviewNo}}"
                            shopby-product-no="{{productNo}}"
                            shopby-board-name="{{./reviewConfig.name}}"
                            shopby-given-accumulation="{{givenAccumulationYn}}"
                        >
                            <div>
                                <button class="btn btn--line-gray btn--xs" shopby-action="MODIFY">수정</button>
                                <button class="btn btn--line-gray btn--xs" shopby-action="DELETE">삭제</button>
                            </div>
                            <button class="btn btn--line-gray btn--xs" shopby-action="LIST">목록</button>
                        </div>
                    </div>
                </product-review-detail>
            </div>
        </div>
    </div>
</main>

<main class="l-content">
    <product-review-detail product-no:query="productNo" review-no:query="reviewNo">
        <div class="product-review-detail">
            <div class="product-review-detail__writer-info">
                <div class="star" slot="starSet">
                    {{#each 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>
                <div>
                    <span class="product-review-detail__writer-name">{{registerName}}</span>
                    <span class="product-review-detail__writer-date">{{formatUseByDate registerYmdt}}</span>
                </div>
            </div>

            <div class="product-review-detail__product">
                {{img imageUrl 80 80 productName '' ''}}

                <div class="product-review-detail__product-info">
                    <p class="bold product-review-detail__product-title">{{productName}}</p>
                    {{#if orderedOption}} {{#if orderedOption.optionUsed}} {{#ifNe orderedOption.optionType 'PRODUCT_ONLY'}}
                    <p class="product-review-detail__product-option">
                        <span>{{orderedOption.optionName}}:{{orderedOption.optionValue}}</span>
                    </p>
                    {{/ifNe}} {{/if}} {{/if}}
                </div>
            </div>

            <div class="product-review-detail__content">
                <p>{{content}}</p>

                <div class="folding-images-by-one-row is-active">
                    <ul class="folding-images-by-one-row__image-list" shopby-images="{{fileUrls}}">
                        {{#each fileUrls}}
                        <li class="folding-images-by-one-row__image-item" shopby-image-idx="{{@index}}">
                            {{img this 80 80}}
                            <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>

            <div
                class="product-review-detail__btn-group"
                shopby-review-no="{{reviewNo}}"
                shopby-product-no="{{productNo}}"
                shopby-given-accumulation="{{givenAccumulationYn}}"
            >
                <div>
                    <button class="btn btn--line-gray btn--md" shopby-action="MODIFY">수정</button>
                    <button class="btn btn--line-gray btn--md" shopby-action="DELETE">삭제</button>
                </div>
                <button class="btn btn--fill-dark btn--lg btn-group__list-btn" shopby-action="LIST">목록</button>
            </div>
        </div>
    </product-review-detail>
</main>

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