Aurora Modules

상품후기 게시판 목록

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

URL: /pages/board/product-review-list.html?ordering={ordering}&pageNumber={pageNumber}

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

상품후기 게시판 탭 모듈입니다.

속성

속성명	타입	기본값	설명
board-type:query	ALL \| PHOTO \| REVIEWED_PRODUCTS	ALL	`query string` 중 `boardType` 값 (탭 구분 값)

사용 가능 변수

변수명	타입	기본값	설명
currentTab	ALL \| PHOTO \| REVIEWED_PRODUCTS	ALL	현재 탭 구분 값 (ALL: 전체 상품후기, PHOTO: 포토 상품후기, REVIEWED_PRODUCTS: 상품기준 상품후기)

모듈명: board-reviews-search-field원본소스

상품후기 게시판 검색 모듈입니다.

속성

속성명	타입	기본값	설명
shopby-module-key	string	product-list-search-field	모듈 고유 키

사용 가능 변수

변수명	타입	기본값	설명
categories	Category[]	[]	몰 정보 조회 API 응답 중 `categories.multiLevelCategories`를 가공 (전체 카테고리) (아래 타입 참조)
reviewConfig	ReviewConfig	-	게시판 설정 조회하기 API API 응답 값 중 `productReviewConfig`와 동일 (아래 타입 참조)

Category 타입

속성명	타입	기본값	설명
categoryNo	number	-	카테고리 번호
depth	number	-	카테고리 depth
label	string	-	카테고리명
count	number	0	카테고리 상품 수
children	array	[]	하위 카테고리 목록 CategoryChildren 타입과 동일한 데이터

ReviewConfig 타입

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

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

상품후기 게시판 목록 모듈입니다.

속성

속성명	타입	기본값	설명
page-number page-number:query	number string	1 pageNumber	`query string` 중 `pageNumber` 값 페이지 번호
ordering:query	string	-	`query string` 중 `ordering` 값 정렬 순서
sort-criterion:query	string	ALL	`query string` 중 `sortCriterion` 값 (상품후기 게시판 유형) (ALL \| PHOTO \| REVIEWED_PRODUCTS)
search-type:query	ALL \| TITLE \| CONTENT \| WRITER	ALL	`query string` 중 `searchType` 값 검색 유형
keyword:query	string	-	`query string` 중 `keyword` 값 검색어
pair-key	string	-	'더보기 버튼' 또는 '페이지네이션' 연결 키
uses-more-button	boolean	false	'더보기 버튼' 사용 여부
uses-pagination	boolean	false	'페이지네이션' 사용 여부
visible-pages-count	number	5	페이지네이션 표시 페이지 수

사용 가능 변수

변수명	타입	기본값	설명
boardType	ALL \| PHOTO \| REVIEWED_PRODUCTS	ALL	상품후기 게시판 유형 (ALL: 전체 상품후기, PHOTO: 포토 상품후기, REVIEWED_PRODUCTS: 상품기준 상품후기)
totalCount	number	0	상품후기 개수
items	Items[]	[]	전체/포토 상품평 게시판 목록 조회 또는 상품 기준 상품평 게시판 목록 조회 API 응답 중 `items`와 동일 (탭별로 호출하는 API가 다릅니다) (아래 타입 참조)

Items 타입

속성명	타입	기본값	설명
starSet	(full \| half \| empty)[]	[]	별표 점수 리스트 full:1점, half:0.5점, empty: 0점
productName	string	-	상품명 전체/포토 상품평 게시판 목록 조회 API 응답에서는 `productInfo.name`와 동일 상품 기준 상품평 게시판 목록 조회 API 응답에서는 `productName`와 동일
mainImage	string	-	상품 대표 이미지
productNo	number	-	상품 번호 전체/포토 상품평 게시판 목록 조회 API 응답에서는 `productInfo.no`와 동일 상품 기준 상품평 게시판 목록 조회 API 응답에서는 `productNo`와 동일
appliedImmediateDiscountPrice	number	0	즉시할인가 적용된 판매가
reviews	Reviews[]	[]	상품평 정보 상품 기준 상품평 게시판 목록 조회 API 응답에서는 `reviews`와 동일 (아래 타입 참조)

Reviews 타입

속성명	타입	기본값	설명
isBestReview	boolean	false	베스트 상품평 여부
attachedImage	string	-	상품평 첨부파일
content	string	-	상품평 내용
reviewNo	number	-	상품평 번호

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<main class="l-page">
    <div class="board-reviews">
        <board-reviews-tabs board-type:query="boardType">
            <div class="tabs-wrap">
                <ul class="tab" slot="tabs">
                    <li>
                        <button class="tab__btn {{#ifEq currentTab 'ALL'}}is-active{{/ifEq}}" type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="ALL">
                            전체 상품후기
                        </button>
                    </li>
                    <li>
                        <button
                            class="tab__btn {{#ifEq currentTab 'PHOTO'}}is-active{{/ifEq}}"
                            type="button"
                            shopby-on:click="TAB_CLICK"
                            shopby-tab-value="PHOTO"
                        >
                            포토 상품후기
                        </button>
                    </li>
                    <li>
                        <button
                            class="tab__btn {{#ifEq currentTab 'REVIEWED_PRODUCTS'}}is-active{{/ifEq}}"
                            type="button"
                            shopby-on:click="TAB_CLICK"
                            shopby-tab-value="REVIEWED_PRODUCTS"
                        >
                            상품기준 상품후기
                        </button>
                    </li>
                </ul>
            </div>
        </board-reviews-tabs>

        <board-review-search-field sort-criterion:query="sortCriterion">
            <div>
                <div class="board-review-search-field__top" slot="boardType">
                    <p class="board-reviews__title">{{displayBoardType}}</p>

                    {{#if (isSignedIn)}}
                    <button type="button" class="btn btn--fill-point btn--sm" shopby-uses-attachment="{{reviewConfig.canAttach}}" shopby-action="REGISTER">
                        상품후기 등록
                    </button>
                    {{/if}}
                </div>
                <div class="board-review-search-field" slot="boardType">
                    {{#ifEq boardType 'REVIEWED_PRODUCTS'}}
                    <div class="sort-selector__button-box" shopby-on:click="CLICK_SORT" slot="sortCriterion">
                        <button class="font-noto btn sort-selector__select-btn {{#ifEq sortCriterion 'REVIEW_COUNT'}}is-active{{/ifEq}}" value="REVIEW_COUNT">
                            리뷰많은순
                        </button>
                        <button class="font-noto btn sort-selector__select-btn {{#ifEq sortCriterion 'REGISTER_YMDT'}}is-active{{/ifEq}}" value="REGISTER_YMDT">
                            등록일순
                        </button>
                        <button
                            class="font-noto btn sort-selector__select-btn {{#ifEq sortCriterion 'REVIEW_RATE_DESC'}}is-active{{/ifEq}}"
                            value="REVIEW_RATE_DESC"
                        >
                            평점높은순
                        </button>
                        <button
                            class="font-noto btn sort-selector__select-btn {{#ifEq sortCriterion 'REVIEW_RATE_ASC'}}is-active{{/ifEq}}"
                            value="REVIEW_RATE_ASC"
                        >
                            평점낮은순
                        </button>
                    </div>
                    {{else}}
                    <div class="sort-selector__button-box" shopby-on:click="CLICK_SORT" slot="sortCriterion">
                        <button class="font-noto btn sort-selector__select-btn {{#ifEq sortCriterion 'BEST_REVIEW'}}is-active{{/ifEq}}" value="BEST_REVIEW">
                            베스트순
                        </button>
                        <button class="font-noto btn sort-selector__select-btn {{#ifEq sortCriterion 'REGISTER_YMDT'}}is-active{{/ifEq}}" value="REGISTER_YMDT">
                            등록일순
                        </button>
                        <button class="font-noto btn sort-selector__select-btn {{#ifEq sortCriterion 'RATING_DESC'}}is-active{{/ifEq}}" value="RATING_DESC">
                            평점높은순
                        </button>
                        <button class="font-noto btn sort-selector__select-btn {{#ifEq sortCriterion 'RATING_ASC'}}is-active{{/ifEq}}" value="RATING_ASC">
                            평점낮은순
                        </button>
                        {{#if reviewConfig.expandedReviewConfig.useReviewRecommend}}
                        <button class="font-noto btn sort-selector__select-btn {{#ifEq sortCriterion 'RECOMMEND'}}is-active{{/ifEq}}" value="RECOMMEND">
                            추천순
                        </button>
                        {{/if}}
                    </div>
                    {{/ifEq}}

                    <span class="search-field">
                        <span class="select select--md search-field__select-box">
                            <select shopby-on:change="CHANGE_SEARCH_TYPE" slot="categories">
                                {{#each categories}}
                                <option value="{{value}}">{{label}}</option>
                                {{/each}}
                            </select>
                        </span>
                        <span class="search-field__input">
                            <span class="input-field input-field--md search-field__text-input">
                                <input
                                    type="text"
                                    value="{{keyword}}"
                                    placeholder="검색어를 입력해주세요."
                                    shopby-on:change="CHANGE_SEARCH_FIELD_KEYWORD"
                                    shopby-on:keydown="KEYPRESS_SEARCH_FIELD_KEYWORD"
                                />
                            </span>
                            <button type="button" class="search-field__search-btn" shopby-on:click="SEARCH">
                                <span class="ico ico--magnet-black-24"></span>
                            </button>
                        </span>
                    </span>
                </div>
            </div>
        </board-review-search-field>

        <board-reviews-list
            search-type:query="searchType"
            keyword:query="keyword"
            page-number:query="pageNumber"
            ordering:query="ordering"
            sort-criterion:query="sortCriterion"
            uses-pagination
        >
            <div>
                <div slot="totalCount">
                    {{#if totalCount}}
                    <ul class="board-reviews-list__list" slot="items">
                        {{#each items}} {{#ifEq ../boardType 'REVIEWED_PRODUCTS'}}
                        <li class="board-reviews-list__reviewed-item" shopby-product-no="{{productNo}}">
                            <div>
                                <a href="/pages/product/product-detail.html?productNo={{productNo}}">
                                    <div class="board-reviewed-item__top">
                                        <div class="board-reviewed-item__top-img">{{img mainImage}}</div>
                                        <div class="board-reviewed-item__content">
                                            <div class="board-reviewed-item__product-review-info">
                                                <div>
                                                    <p class="product-review-info__product-name">{{{productName}}}</p>
                                                    <p>
                                                        <span class="font-montserrat product-review-info__product-price">
                                                            {{convertToKoreanCurrency appliedImmediateDiscountPrice}}
                                                        </span>
                                                        <span class="font-noto product-review-info__product-price-unit">원</span>
                                                    </p>
                                                </div>

                                                <div>
                                                    <span class="product-review-info__info-box">
                                                        <span class="font-noto product-review-info__info">후기</span>
                                                        <span class="font-montserrat product-review-info__review-count">{{totalReviewCount}}</span>
                                                    </span>
                                                    <span class="product-review-info__info-box">
                                                        <span class="product-review-info__info">평점</span>
                                                        <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>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <section class="board-reviewed-item__reviews">
                                    {{#each reviews}}
                                    <div class="reviews-item" shopby-review-no="{{reviewNo}}" shopby-on:click="REVIEW_DETAIL">
                                        {{img attachedImage}}
                                        <span class="reviews-item__content">
                                            {{#if isBestReview}}
                                            <span class="font-montserrat bold highlight board-review-item__best-post">BEST</span>
                                            {{/if}} {{{content}}}
                                        </span>
                                    </div>
                                    {{/each}}
                                </section>
                            </div>
                        </li>
                        {{else}}
                        <li class="board-reviews-list__item" shopby-product-no="{{productInfo.no}}" shopby-review-no="{{reviewNo}}">
                            <div class="board-reviews-item__top" shopby-on:click="REVIEW_DETAIL">
                                <div class="board-reviews-item__top-img">
                                    {{img (getFirstImageWithDefault images)}} {{#ifGt images.length 1}}
                                    <span class="font-montserrat board-reviews-item__top-img-cnt">{{images.length}}</span>
                                    {{/ifGt}}
                                </div>
                                <div class="board-reviews-item__content">
                                    {{#if isBestReview}}
                                    <span class="font-montserrat bold highlight board-review-item__best-post">BEST</span>
                                    {{/if}} {{content}}
                                </div>

                                <div class="board-reviews-item__write-info">
                                    <div class="board-reviews-item__write">
                                        <span class="bold board-reviews-item__writer">{{register.name}}</span>
                                    </div>
                                </div>
                            </div>

                            <a href="/pages/product/product-detail.html?productNo={{productInfo.no}}">
                                <section class="board-reviews-item__product-info">
                                    {{img productInfo.thumbnailImage}}
                                    <div class="board-reviews-item__product-review-info">
                                        <p class="product-review-info__product-name">{{productInfo.name}}</p>
                                        <p class="font-montserrat product-review-info__review-count">
                                            후기 :
                                            <span class="bold">{{productInfo.totalReviewCount}}</span>
                                        </p>
                                    </div>
                                </section>
                            </a>
                        </li>
                        {{/ifEq}} {{/each}}
                    </ul>
                    {{else}}
                    <div class="notice notice--full">
                        <span class="sprite-image notice--warning"></span>
                        <em>게시글이 존재하지 않습니다.</em>
                    </div>

                    {{/if}}
                </div>
            </div>
        </board-reviews-list>
    </div>
</main>

<main class="l-content">
    <div class="board-reviews">
        <board-reviews-tabs board-type:query="boardType">
            <div class="tabs-wrap">
                <ul class="tab board-reviews__tabs" slot="tabs">
                    <li>
                        <button class="tab__btn {{#ifEq currentTab 'ALL'}}is-active{{/ifEq}}" type="button" shopby-on:click="TAB_CLICK" shopby-tab-value="ALL">
                            전체 상품후기
                        </button>
                    </li>
                    <li>
                        <button
                            class="tab__btn {{#ifEq currentTab 'PHOTO'}}is-active{{/ifEq}}"
                            type="button"
                            shopby-on:click="TAB_CLICK"
                            shopby-tab-value="PHOTO"
                        >
                            포토 상품후기
                        </button>
                    </li>
                    <li>
                        <button
                            class="tab__btn {{#ifEq currentTab 'REVIEWED_PRODUCTS'}}is-active{{/ifEq}}"
                            type="button"
                            shopby-on:click="TAB_CLICK"
                            shopby-tab-value="REVIEWED_PRODUCTS"
                        >
                            상품기준 상품후기
                        </button>
                    </li>
                </ul>
            </div>
        </board-reviews-tabs>

        <board-review-search-field shopby-module-key="product-list-search-field">
            <span class="search-field">
                <span class="select select--sm search-field__select-box">
                    <select shopby-on:change="CHANGE_SEARCH_TYPE" slot="categories">
                        {{#each categories}}
                        <option value="{{value}}">{{label}}</option>
                        {{/each}}
                    </select>
                </span>
                <span class="search-field__input">
                    <span class="input-field input-field--sm search-field__text-input">
                        <input
                            type="text"
                            value="{{keyword}}"
                            placeholder="검색어를 입력해주세요."
                            shopby-on:change="CHANGE_SEARCH_FIELD_KEYWORD"
                            shopby-on:keydown="KEYPRESS_SEARCH_FIELD_KEYWORD"
                        />
                    </span>
                    <button type="button" class="search-field__search-btn" shopby-on:click="SEARCH">
                        <span class="ico ico--magnet-black-24"></span>
                    </button>
                </span>
            </span>
        </board-review-search-field>

        <board-reviews-list
            pair-key="PRODUCT_LIST_MORE_VIEW_BUTTON"
            search-type:query="searchType"
            keyword:query="keyword"
            page-number:query="pageNumber"
            ordering:query="ordering"
            sort-criterion:query="sortCriterion"
            uses-more-button
        >
            <div class="board-reviews-list">
                <div class="board-reviews-list__search-container" slot="boardType">
                    {{#ifEq boardType 'REVIEWED_PRODUCTS'}}
                    <span class="select select--sm search-field__select-box">
                        <select shopby-on:change="CHANGE_ORDERING_TYPE">
                            <option value="REVIEW_COUNT">리뷰많은순</option>
                            <option value="REGISTER_YMDT">등록일순</option>
                            <option value="REVIEW_RATE_DESC">평점높은순</option>
                            <option value="REVIEW_RATE_ASC">평점낮은순</option>
                        </select>
                    </span>
                    {{else}}
                    <span class="select select--sm search-field__select-box">
                        <select shopby-on:change="CHANGE_ORDERING_TYPE">
                            <option value="BEST_REVIEW">베스트순</option>
                            <option value="REGISTER_YMDT">등록일순</option>
                            <option value="RATING_DESC">평점높은순</option>
                            <option value="RATING_ASC">평점낮은순</option>
                            {{#if reviewConfig.expandedReviewConfig.useReviewRecommend}}
                            <option value="RECOMMEND">추천순</option>
                            {{/if}}
                        </select>
                    </span>
                    {{/ifEq}} {{#if (isSignedIn)}}
                    <button type="button" class="btn btn--fill-point btn--sm" shopby-uses-attachment="{{reviewConfig.canAttach}}" shopby-action="REGISTER">
                        상품후기 등록
                    </button>
                    {{/if}}
                </div>

                <div slot="totalCount">
                    {{#if totalCount}}
                    <ul class="board-reviews-list__list" slot="items">
                        {{#each items}} {{#ifEq ../boardType 'REVIEWED_PRODUCTS'}}
                        <li class="board-reviews-list__reviewed-item" shopby-product-no="{{productNo}}">
                            <div>
                                <a href="/pages/product/product-detail.html?productNo={{productNo}}">
                                    <div class="board-reviewed-item__top">
                                        <div class="board-reviewed-item__top-img">{{img mainImage}}</div>
                                        <div class="board-reviewed-item__content">
                                            <div class="board-reviewed-item__product-review-info">
                                                <div>
                                                    <p class="product-review-info__product-name">{{{productName}}}</p>
                                                    <p>
                                                        <span class="product-review-info__product-price font-montserrat">
                                                            {{convertToKoreanCurrency appliedImmediateDiscountPrice}}
                                                        </span>
                                                        원
                                                    </p>
                                                </div>

                                                <div>
                                                    <div class="product-review-info__item">
                                                        <span class="product-review-info__info">후기</span>
                                                        <span class="product-review-info__review-count font-montserrat">{{totalReviewCount}}</span>
                                                    </div>
                                                    <div class="product-review-info__item">
                                                        <span class="product-review-info__info">평점</span>
                                                        <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>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <section class="board-reviewed-item__reviews">
                                    {{#each reviews}}
                                    <div class="reviews-item" shopby-review-no="{{reviewNo}}" shopby-on:click="REVIEW_DETAIL">
                                        {{img attachedImage}}
                                        <span class="reviews-item__content">
                                            {{#if isBestReview}}
                                            <span class="font-montserrat bold highlight board-review-item__best-post">BEST</span>
                                            {{/if}} {{{content}}}
                                        </span>
                                    </div>
                                    {{/each}}
                                </section>
                            </div>
                        </li>
                        {{else}}
                        <li class="board-reviews-list__item" shopby-product-no="{{productInfo.no}}" shopby-review-no="{{reviewNo}}">
                            <div class="board-reviews-item__top" shopby-on:click="REVIEW_DETAIL">
                                <div class="board-reviews-item__top-img">
                                    {{img (getFirstImageWithDefault images)}} {{#ifGt images.length 1}}
                                    <span class="board-reviews-item__top-img-cnt">{{images.length}}</span>
                                    {{/ifGt}}
                                </div>
                                <div class="board-reviews-item__content">
                                    {{#if isBestReview}}
                                    <span class="font-montserrat bold highlight board-review-item__best-post">BEST</span>
                                    {{/if}} {{content}}
                                </div>

                                <div class="board-reviews-item__write-info">
                                    <div class="board-reviews-item__write">
                                        <span class="bold board-reviews-item__writer">{{register.name}}</span>
                                    </div>
                                </div>
                            </div>
                            <a href="/pages/product/product-detail.html?productNo={{productInfo.no}}">
                                <section class="board-reviews-item__product-info">
                                    {{img productInfo.thumbnailImage}}
                                    <div class="board-reviews-item__product-review-info">
                                        <p class="product-review-info__product-name">{{productInfo.name}}</p>
                                        <p class="product-review-info__review-count">
                                            후기 : 
                                            <span class="bold font-montserrat">{{productInfo.totalReviewCount}}</span>
                                        </p>
                                    </div>
                                </section>
                            </a>
                        </li>
                        {{/ifEq}} {{/each}}
                    </ul>
                    {{else}}
                    <div class="notice notice--full">
                        <span class="sprite-image notice--warning"></span>
                        <em>게시글이 존재하지 않습니다.</em>
                    </div>
                    {{/if}}
                </div>
            </div>
        </board-reviews-list>
    </div>
</main>

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