Aurora Modules

상품상세

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

URL: /pages/product/product-detail.html?productNo={productNo}

모듈명: image-slider원본소스

상품 상세 메인 이미지 모듈입니다.

속성

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

사용 가능 변수

변수명	타입	기본값	설명
relatedProducts	RelatedProduct[]	[]	관련 상품 정보 조회하기 API 응답과 동일 (아래 타입 참조)

RelatedProduct 타입

속성명	타입	기본값	설명
hasOnlyOriginalPrice	boolean	false	할인여부
src	string	-	이미지 URL
discountedPrice	number	0	할인적용금액
originalPrice	number	0	판매가

모듈명: product-summary원본소스

상품 상세 상단 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
useContentsIfPausing	boolean	false	가격대체문구 사용여부
contentsIfPausing	string	-	가격대체문구
channelType	string	-	인입 채널 유형
totalDiscountPrice	number	0	총 할인 금액
productNo	number	-	상품번호
status	Status	-	상품상세 조회 API 응답 중 `status`와 동일 (상품 상태) (아래 타입 참조)
coupon	Coupon	-	쿠폰 정보 (아래 타입 참조)
purchaseQuantityLimited	PurchaseQuantityLimited	-	상품상세 조회 API 응답 중 `limitations`을 가공 (구매수량제한) (아래 타입 참조)
summary	Summary	-	상품 요약정보 (아래 타입 참조)
baseInfo	BaseInfo	-	상품상세 조회 API 응답 중 `baseInfo`와 동일 (상품기본정보) (아래 타입 참조)
freight	Freight	-	배송정보 (아래 타입 참조)
accumulationConfig	AccumulationConfig	-	적립금 설정 (아래 타입 참조)
discountPriceStatus	DiscountPriceStatus[]	[]	할인가격정보 (아래 타입 참조)
categories	Categories	[]	상품상세 조회 API 응답 중 `categories`와 동일 (카테고리 목록)
reservationData	ReservationData	-	상품상세 조회 API 응답 중 `reservationData`와 동일 (예약판매정보)
visibleReservationInfo	boolean	-	예약판매정보 노출여부

Status 타입

속성명	타입	기본값	설명
display	boolean	false	전시여부
soldout	boolean	false	품절여부
productClassType	DEFAULT \| EVENT \| OFFLINE \| RENTAL	-	상품 타입
saleStatusType	READY \| ONSALE \| FINISHED \| STOP \| PROHIBITION	-	판매상태

Coupon 타입

속성명	타입	기본값	설명
couponUseYn	boolean	false	쿠폰 사용 여부
couponRate	number	0	쿠폰 할인율
priceWithCoupon	number	0	쿠폰 적용 후 상품 금액

PurchaseQuantityLimited 타입

속성명	타입	기본값	설명
visible	boolean	false	구매수량제한 영역 노출 여부
useBoth	boolean	false	구매수량제한 최소, 최대 두개 모두 설정 여부
maxBuyCountType	PERIOD \| PERSON \| TIME	-	최대 구매제한 유형
maxCount	number	0	최대 구매제한 개수
minCount	number	0	최소 구매제한 개수
maxBuyPeriodCnt	number	0	최대구매기간(수량)

Summary 타입

속성명	타입	기본값	설명
useDiscount	boolean	false	할인정보 사용여부
reviewAvailable	boolean	false	리뷰 작성 가능 여부
brandName	string	-	브랜드명
productName	string	-	상품명
accumulationUseYn	string	-	적립금 사용 여부 - Y: 사용가능 - N: 사용불가능
brandNo	number	-	브랜드번호
originalPrice	number	0	상품판매가
discountRate	number	0	할인율
discountAmount	number	0	할인액
discountedPrice	number	0	할인 된 금액
discountedPriceWithCoupon	number	0	(할인 된 금액 - 상품 기본옵션 가격기준으로 적용 가능한 최대 쿠폰 할인가)
freight	Freight	-	배송안내
accumulation	Accumulation	-	적립금

Freight 타입

속성명	타입	기본값	설명
summary	Summary	-	요약정보
shippingInfo	ShippingInfo	-	상품상세 조회 API 응답 중 `shippingInfo`와 동일 (배송 관련 정보)

Accumulation 타입

속성명	타입	기본값	설명
canAccumulate	boolean	false	적립금 사용 가능 여부
accumulatedAmount	number	0	적립금

BaseInfo 타입

속성명	타입	기본값	설명
promotionText	string	-	홍보문구

ShippingInfo 타입

속성명	타입	기본값	설명
shippingAvailable	boolean	false	배송 가능 여부
shippingConfig	ShippingConfig	-	배송 설정 (아래 타입 참조)

ShippingConfig 타입

속성명	타입	기본값	설명
combinable	boolean	false	묶음배송 가능여부 (true: 묶음 배송 가능, false: 묶음 배송 불가능)
internationalShippingAvailable	boolean	false	해외 배송 여부 (true: 해외 배송, false:국내 배송)
shippingAreaType	PARTNERSHIPPINGAREA \| MALLSHIPPINGAREA	-	출고 유형(배송 구분)
templateNo	number	-	배송 템플릿 번호
shippingAreaPartnerNo	number	-	배송지 파트너 번호

AccumulationConfig 타입

속성명	타입	기본값	설명
accumulationName	string	-	적립금명
accumulationUnit	string	-	적립금 단위

DiscountPriceStatus 타입

속성명	타입	기본값	설명
key	additionDiscountAmt \| immediateDiscountAmt	-	할인구분
label	추가할인 \| 즉시할인	-	할인구분명
discountAmt	number	0	할인금액

모듈명: product-detail원본소스

상품 상세 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
hasDutyInfo	boolean	false	상품정보고시 사용여부
hasContents	boolean	false	내용 여부
showsOptionImages	boolean	false	본문 내 옵션이미지 노출 여부
includesKcInDutyInfo	boolean	false	상품정보제공고시 내 인증정보 포함 여부
showCertificationInformation	boolean	false	인증정보 노출 여부
productNo	number	0	상품 번호
content	Content	-	내용 (아래 타입 참조)
dutyInfo	DutyInfo	-	상품정보고시 (아래 타입 참조)
baseInfo	BaseInfo	-	상품 기본 정보 (아래 타입 참조)
optionImages	OptionImage[]	[]	옵션 이미지 리스트 (아래 타입 참조)
partnerNotice	PartnerNotice[]	[]	파트너사 공지 (아래 타입 참조)
brand	object	null	상품 상세 조회하기API 응답 값 중 brand와 동일

OptionImage 타입

속성명	타입	기본값	설명
main	boolean	false	메인이미지 여부
url	string	-	이미지 경로
value	string	-	옵션명
optionNo	number	0	옵션 번호

Content 타입

속성명	타입	기본값	설명
header	string	-	상품설명HTML 상단
main	string	-	상품설명HTML 본문
footer	string	-	상품설명HTML 하단
dutyInfo	DutyInfo[]	[]	상품정보고시 (아래 타입 참조)

DutyInfo 타입

속성명	타입	기본값	설명
categoryName	string	-	카테고리명
categoryNo	string	-	카테고리 번호
contents	DutyInfoContent[]	[]	상품정보제공고시 내용

BaseInfo 타입

속성명	타입	기본값	설명
productManagementCd	string	-	판매자관리코드
placeOriginEtcLabel	string	-	원산지(기타 직접입력, 수입사등 표기)
placeOriginLabel	string	-	원산지
manufactureYmdt	string	-	제조일자
expirationYmdt	string	-	유효일자
certifications	Certifications[]	[]	인증정보 리스트 (아래 타입 참조)

DutyInfoContent 타입

속성명	타입	기본값	설명
label	string	-	상품정보고시 라벨
description	string	-	상품정보고시 설명

Certifications 타입

속성명	타입	기본값	설명
date	string	-	인증일자
code	string	-	인증번호
type	string	-	인증유형
target	string	-	인증상호
organization	string	-	인증기관
no	number	-	인증유형번호

PartnerNotice 타입

속성명	타입	기본값	설명
title	string	-	제목
content	string	-	내용

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

상품 상세 배너 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
banners	Banner[]	[]	배너 리스트

속성명	타입	기본값	설명
target	_blank \| _self	_self	문서가 열릴 위치
alt	string	-	배너 이미지를 대체할 텍스트
width	string	-	배너 이미지 길이
height	string	-	배너 이미지 높이
imageUrl	string	-	배너 이미지 URL
description	string	-	배너 이미지 설명
landingUrl	string	-	배너 이미지 랜딩 URL
openLocationType	string	-	배너 이미지 랜딩 타겟
inactiveNavigationImageUrl	string	-	배너 이미지 - 네비게이션 비활성 버튼 이미지
activeNavigationImageUrl	string	-	배너 이미지 - 네비게이션 활성 버튼 이미지
imageNo	number	-	배너 이미지 번호
displayOrder	number	-	배너 이미지 순서
displayValue	DisplayValue	-	전체 스킨 배너 조회 API 응답 중 `banners > displayValue` 값과 동일 (아래 타입 참조)

DisplayValue 타입

속성명	타입	기본값	설명
startDateTime	string	-	전시 시작 일자
endDateTime	string	-	전시 종료 일자
displayPeriodType	REGULAR \| PERIOD	REGULAR	전시기간 타입

모듈명: product-detail-board-button원본소스

상품 상세 게시물 상단 버튼 모듈입니다.

속성

속성명	타입	기본값	설명
product-no:query	string	-	(필수) 상품번호 쿼리 파라미터
board-type	product-review \| inquiry	-	(필수) 게시물 타입 - product-review: 리뷰 - inquiry: 문의
use-init	string	false	모듈 로드시 필요한 API 호출 여부 (해당 속성 제거시 API 미호출)

사용 가능 변수

변수명	타입	기본값	설명
inquiryGuestWriteable	boolean	false	비회원 문의 작성 가능 여부
reviewInfo	ReviewInfo	-	리뷰정보 (아래 타입 참조)

ReviewInfo 타입

속성명	타입	기본값	설명
canAttach	boolean	false	파일 첨부 가능 여부
reviewable	boolean	false	상품평 작성 가능 여부
reviewableCount	number	0	상품평 개수

모듈명: product-detail-inquiry-summary원본소스

상품 상세 문의 요약정보 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
inquiryTitle	string	-	상품 문의 제목
totalCount	number	0	상품 문의 총 개수

모듈명: product-detail-inquiry-list원본소스

상품 상세 문의 목록 모듈입니다.

속성

속성명	타입	기본값	설명
inquiry-page inquiry-page:query	number string	1 inquiryPage	(필수) `query string` 중 `inquiryPage` 리뷰 페이지
inquiry-page-size inquiry-page-size:query	number string	20 inquiryPageSize	(필수) `query string` 중 `inquiryPageSize` 리뷰 페이지 사이즈
inquiry-visible-pages-count	number	5	페이지네이션 표시 페이지 수

사용 가능 변수

변수명	타입	기본값	설명
showMoreButton	boolean	false	더보기 버튼 노출 여부
totalCount	number	0	상품문의 총 개수
pagination	Pagination	-	페이지네이션 (아래 타입 참조)
inquiries	Inquiry[]	-	상품문의 목록 조회 API 응답 중 `items` 동일 (상품문의 목록) (아래 타입 참조)

Inquiry 타입

속성명	타입	기본값	설명
isReplied	boolean	false	답변 여부
readable	boolean	false	읽기 전용 여부 비밀 글이 아니거나 내 상품문의 일때 `true`
registerName	string	-	작성자 명
registerDate	string	-	상품문의 등록 일자
productManagementCd	string	-	상품관리코드
inquiryNo	number	-	상품문의 번호

Pagination 타입

속성명	타입	기본값	설명
firstPage	string	-	첫번째 페이지
lastPage	string	-	마지막 페이지
prevPage	string	-	이전 페이지
nextPage	string	-	다음 페이지
pages	Page[]	[]	페이지 리스트
totalPages	number	0	페이지 총 개수

Page 타입

속성명	타입	기본값	설명
isCurrentPage	boolean	false	현재 페이지 여부
param	string	-	파라미터
page	number	0	페이지 번호

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

상품후기 요약정보 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
score	number	0	평점
limitScore	number	0	최대 평점
totalCount	number	0	상품평 총 개수
boardConfig	BoardConfig	-	게시판 설정 조회하기 API API 응답 결과 중 `boardConfigs`에서 현재 접근한 게시판에 대한 설정 정보 (아래 타입 참조)
starSet	(full \| half \| empty)[]	[]	별표 점수 리스트 full:1점, half:0.5점, empty: 0점

BoardConfig 타입

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

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

상품 상세 상품후기 포토 모아보기 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
totalCount	number	0	상품평 총 개수
boardConfig	BoardConfig	-	게시판 설정 조회 API 응답 결과 중 `boardConfigs`에서 현재 접근한 게시판에 대한 설정 정보 (아래 타입 참조)
photoCollections	PhotoCollection[]	[]	상품평 목록 조회 API 응답 중 `items`와 동일 (상품평 목록) (아래 타입 참조)

BoardConfig 타입

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

PhotoCollection 타입

속성명	타입	기본값	설명
imageUrl	string	-	첨부파일 이미지 첫 번째 URL
reviewNo	number	-	리뷰 번호
productNo	number	-	상품 번호
imageCount	number	0	첨부파일 이미지 개수

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

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

속성

속성명	타입	기본값	설명
product-no:query	string	-	`query string` 중 `productNo` 상품번호
review-page review-page:query	number string	1 reviewPage	`query string` 중 `reviewPage` 리뷰 페이지
review-page-size review-page-size:query	number string	20 reviewPageSize	`query string` 중 `reviewPageSize` 리뷰 페이지 사이즈
id	string	-	엘리먼트 ID
shopby-default-sort-type	string	-	정렬 기본값 정의
review-visible-pages-count	number	5	페이지네이션 표시 페이지 수

사용 가능 변수

변수명	타입	기본값	설명
photoReviewsOnly	boolean	false	포토후기만 보기 여부
useReviewRecommend	boolean	false	상품평 댓글 사용 여부
sortType	BESTREVIEW \| REGISTERYMDT \| RATINGDESC \| RATINGASC \| RECOMMEND	BEST_REVIEW	상품평 정렬 타입
score	number	0	평점
totalCount	number	0	상품평 총 개수
limitScore	number	0	최대 평점
photoCollectionTotalCount	number	0	포토 모아보기 삼풍평 총 개수
reviewInfo	ReviewInfo	-	리뷰정보 (아래 타입 참조) (아래 타입 참조)
pagination	Pagination	-	페이지네이션 (아래 타입 참조)
boardConfig	BoardConfig	-	상품평 게시판 설정 조회 API 응답과 동일
reviews	Review[]	[]	상품평 목록 조회 API 응답 중 `items`와 동일 (상품평 목록) (아래 타입 참조)
photoCollections	PhotoCollection[]	[]	상품평 총 개수 (아래 타입 참조)

BoardConfig 타입

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

PhotoCollection 타입

속성명	타입	기본값	설명
imageUrl	string	-	이미지 URL
imageCount	number	0	이미지 개수

ReviewInfo 타입

속성명	타입	기본값	설명
canAttach	boolean	false	파일 첨부 가능 여부
reviewable	boolean	false	상품평 작성 가능 여부
reviewableCount	number	0	상품평 개수

Review 타입

속성명	타입	기본값	설명
updatedDate	string	-	수정일자
optionValue	string	-	옵션값
images	string[]	[]	첨부파일 url 리스트
starSet	(full \| half \| empty)[]	[]	별표 점수 리스트 full:1점, half:0.5점, empty: 0점

Pagination 타입

속성명	타입	기본값	설명
firstPage	string	-	첫번째 페이지
lastPage	string	-	마지막 페이지
prevPage	string	-	이전 페이지
nextPage	string	-	다음 페이지
pages	Page[]	[]	페이지 리스트
totalPages	number	0	페이지 총 개수

Page 타입

속성명	타입	기본값	설명
isCurrentPage	boolean	false	현재 페이지 여부
page	number	1	페이지 번호
param	string	-	파라미터

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

상품 상세 탭 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
isLoading	boolean	true	탭 로딩 여부
hasGuide	boolean	false	배송/반품/교환 탭 사용 여부
currentTab	PRODUCTDETAIL \| SHIPPINGCLAIM \| PRODUCTREVIEW \| PRODUCTINQUIRY	PRODUCT_DETAIL	선택 된 탭
inquiryCount	number	0	문의 개수
reviewCount	number	0	리뷰 개수

모듈명: related-product원본소스

속성

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

사용 가능 변수

변수명	타입	기본값	설명
relatedProducts	RelatedProduct	-	(아래 타입 참조)

RelatedProduct 타입

속성명	타입	기본값	설명
…	Object	-	관련 상품 정보 조회 API 응답과 동일 (관련상품 리스트)
hasOnlyOriginalPrice	boolean	false	할인여부
src	string	-	이미지 URL
discountedPrice	number	0	할인적용금액
originalPrice	number	0	판매가
liked	boolean	false	좋아요 여부
baseInfo	Object	-	상품번호 리스트로 상품 조회 API 응답 값 중 baseInfo와 동일

모듈명: shipping-claim원본소스

배송/교환/반품정보 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
guide	Guide	-	배송/교환/환불 정보

Guide 타입

속성명	타입	기본값	설명
freight	string	-	상품 상세 조회 API 응답 중 `deliveryGuide`와 동일 (배송 안내)
exchange	string	-	상품 상세 조회 API 응답 중 `exchangeGuide`와 동일 (교환 및 반품 안내)
refund	string	-	상품 상세 조회 API 응답 중 `refundGuide`와 동일 (환불 안내)
afterService	string	-	상품 상세 조회 API 응답 중 `afterServiceGuide`와 동일 (AS 안내)

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<div class="product-detail">
    <section class="product-info">
        <!-- 이미지 영역 -->
        <image-slider use-thumb="true">
            <div>
                <div class="thumb-item">
                    <div class="thumb-item__main">
                        <div class="swiper product-image-slider" shopby-slider-id="product-main-image-slider">
                            <div class="swiper-wrapper" slot="images">
                                {{#each images}}
                                <div class="swiper-slide">
                                    <div class="thumb-item__main-img">
                                        <img src="{{src}}" alt="{{alt}}" fetchpriority="high" />
                                    </div>
                                </div>
                                {{/each}}
                            </div>
                            <div class="swiper-pagination" shopby-slider-pagination="product-main-image-slider"></div>
                        </div>
                    </div>

                    <div class="swiper" shopby-slider-id="product-sub-image-slider">
                        <div class="swiper-wrapper thumb-item__sub" slot="images" style="width: 556px">
                            {{#each images}}
                            <div class="swiper-slide">
                                <div class="thumb-item__sub-img">
                                    <img src="{{src}}" alt="{{alt}}" fetchpriority="high" />
                                </div>
                            </div>
                            {{/each}}
                        </div>
                    </div>
                </div>
            </div>
        </image-slider>

        <!-- Summary 영역 -->
        <div class="product-summary">
            <product-summary>
                <div>
                    <div class="product-summary__title" slot="summary">
                        <p class="product-summary__brand-name" slot="summary">{{summary.brandName}}</p>
                        <h2 class="product-summary__title" slot="summary">{{summary.productName}}</h2>

                        <!-- 홍보문구 -->
                        <div class="product-summary__promotion-text" slot="baseInfo">{{baseInfo.promotionText}}</div>

                        <div class="product-summary__price-detail" slot="summary">
                            {{#if useContentsIfPausing}}
                            <span class="product-summary__price">{{contentsIfPausing}}</span>
                            {{else}} {{#ifGt summary.discountRate 0}}
                            <span class="product-summary__off-percent">{{summary.discountRate}}%</span>
                            {{/ifGt}}
                            <span class="product-summary__price">{{#if summary}}{{convertToKoreanCurrency summary.discountedPrice}}원{{else}}-{{/if}}</span>
                            {{#ifGt summary.discountRate 0}}
                            <span class="product-summary__original-price">
                                {{convertToKoreanCurrency summary.originalPrice}}원
                                <span class="help-wrap">
                                    <button class="help-btn">
                                        <span class="ico ico--help-circle-14" shopby-action="TOGGLE_DISCOUNT_DETAIL"></span>
                                        <span class="a11y">할인 내역 툴팁 보기</span>
                                    </button>
                                    <div class="tooltip" shopby-element="discount-tooltip">
                                        <div class="tooltip__header">
                                            <span class="tooltip__title">할인 내역 안내</span>
                                            <span class="tooltip__close-btn">
                                                <span class="ico ico--x-black-24" shopby-action="TOGGLE_DISCOUNT_DETAIL"></span>
                                            </span>
                                        </div>

                                        <div class="tooltip__content">
                                            <div class="discount-price-information">
                                                <ul class="discount-price-information__detail" slot="discountPriceStatus">
                                                    {{#each discountPriceStatus}}
                                                    <li>
                                                        <p>
                                                            {{#ifEq key 'immediateDiscountAmt'}}즉시할인{{/ifEq}}{{#ifEq key 'additionDiscountAmt'
                                                            }}추가할인{{/ifEq}}
                                                        </p>
                                                        <em>- {{convertToKoreanCurrency discountAmt}}</em>
                                                    </li>
                                                    {{/each}}
                                                    <li class="total-price">
                                                        <p>총 할인금액</p>
                                                        <em>- {{convertToKoreanCurrency totalDiscountPrice}}</em>
                                                    </li>
                                                </ul>
                                                <ul class="discount-price-information__description">
                                                    <li>상품 옵션에 따라 할인혜택이 상이할 수 있습니다.</li>
                                                    <li>비회원 구매 시 할인적용이 불가능할 수 있습니다.</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </span>
                            </span>
                            {{/ifGt}} {{/if}}
                        </div>
                    </div>

                    <div class="product-summary__info">
                        <div slot="summary">
                            {{#if summary.accumulationUseYn}} {{#ifGt summary.accumulation.accumulatedAmount 0}}
                            <dl class="product-summary__info-accumulate">
                                <dt slot="accumulationConfig">{{accumulationConfig.accumulationName}}</dt>
                                <dd>
                                    <span>+{{convertToKoreanCurrency summary.accumulation.accumulatedAmount}}</span>
                                    <span slot="accumulationConfigUnit">{{accumulationConfigUnit}}</span>
                                    적립
                                    <span slot="accumulationConfig">
                                        {{#getSignUpAccumulationLabel accumulationConfig}} (로그인 시 적립 가능) {{/getSignUpAccumulationLabel}}
                                    </span>
                                </dd>
                            </dl>
                            {{/ifGt}} {{/if}}
                        </div>
                        <div slot="coupon">
                            {{#ifEq coupon.couponUseYn 'Y'}}
                            <dl class="product-summary__info-coupon">
                                <dt>쿠폰</dt>
                                <dd>
                                    {{#if coupon.couponRate}}
                                    <span class="discount">{{coupon.couponRate}}%</span>
                                    {{/if}} {{convertToKoreanCurrency coupon.priceWithCoupon}}원

                                    <div class="coupon-download-wrap">
                                        <button class="btn btn--fill-dark btn--xs" shopby-action="COUPON_DOWNLOAD">
                                            쿠폰받기
                                            <span class="ico ico--download-white-12"></span>
                                        </button>
                                    </div>
                                </dd>
                            </dl>
                            {{/ifEq}}
                        </div>
                        <dl class="product-summary__freight">
                            <dt>배송비</dt>
                            <dd slot="freight">
                                {{#with freight}} {{#if shippingInfo.shippingAvailable}} {{#with summary.freight}} {{#ifEq areaType 'PARTNER_SHIPPING_AREA'}}
                                <strong>{{partnerCompanyName}}</strong>
                                배송 {{/ifEq}} {{#ifEq conditionType 'FREE'}} 무료배송 {{/ifEq}} {{#ifEq conditionType 'FIXED_FEE'}} {{convertToKoreanCurrency
                                fee}}원
                                <em>(택배/등기/소포/선결제)</em>
                                {{else}} {{#ifNe conditionType 'FREE'}} {{convertToKoreanCurrency fee}}원 {{/ifNe}} {{/ifEq}} {{#ifEq conditionType
                                'QUANTITY_PROPOSITIONAL_FEE'}} ({{perOrderCnt}}개마다 부과) {{/ifEq}} {{#ifGt aboveDeliveryAmt 0}}
                                <em>({{convertToKoreanCurrency aboveDeliveryAmt}}원 이상 구매 시 무료)</em>
                                {{/ifGt}} {{/with}} {{else}} 배송불가 상품 {{/if}} {{/with}}
                            </dd>
                        </dl>
                        <dl class="product-summary__product-number">
                            <dt>상품번호</dt>
                            <dd slot="productNo">{{productNo}}</dd>
                        </dl>
                        <div slot="purchaseQuantityLimited">
                            {{#with purchaseQuantityLimited}} {{#if visible}}
                            <dl class="product-summary__purchase-quantity-limit">
                                <dt>구매수량제한</dt>
                                <dd>
                                    {{#if minCount}} 최소 {{minCount}}개 {{/if}}{{#if useBoth}} ,  {{/if}}{{#if maxCount}} 최대 {{maxCount}}개 ( {{#ifEq
                                    maxBuyCountType 'PERSON'}} 1인 {{/ifEq}}{{#ifEq maxBuyCountType 'TIME'}} 1회 {{/ifEq}}{{#ifEq maxBuyCountType 'PERIOD'}}
                                    {{maxBuyPeriodCnt}}일 동안 {{/ifEq}} ) {{/if}}
                                </dd>
                            </dl>
                            {{/if}} {{/with}}
                        </div>
                    </div>
                </div>
            </product-summary>

            <!-- 구매하기 영역 -->
            <product-purchase>
                <div class="product-purchase__info">
                    <div class="product-purchase__option" slot="selectorOptions">
                        <dl class="product-summary__purchase-option">
                            {{#unless hasOnlyOneOption}}
                            <dt>옵션 선택</dt>
                            <div style="clear: both; display: flex; flex-direction: column; gap: 10px">
                                {{#each selectorOptions}}
                                <div class="select select--sm">
                                    <select shopby-on:change="CHANGE_OPTION" shopby-option-key="{{depthKey}}">
                                        {{#select depthKey}}
                                        <option value="" disabled>{{option.emptyOptionLabel}}</option>
                                        {{#each option.options}}
                                        <option
                                            value="{{optionDepthKey}}"
                                            shopby-selected="{{#ifEq ../option.selectedOptionDepthKey optionDepthKey}}true{{/ifEq}}"
                                            shopby-disabled="{{disabled}}"
                                        >
                                            {{displayLabel}} {{#ifGt stockCnt 0}} / 재고 : {{stockCnt}}개{{/ifGt}} {{#ifNe addPrice 0}} ({{#ifGt addPrice
                                            0}}+{{/ifGt}}{{convertToKoreanCurrency addPrice}}원) {{/ifNe}}
                                        </option>
                                        {{/each}} {{/select}}
                                    </select>
                                </div>
                                {{/each}}
                            </div>
                            {{/unless}}
                            <!--  -->
                            {{#each quantities}}
                            <div class="quantity quantity-box{{#if ../hasOnlyOneOption}} undeletable{{/if}}">
                                <span class="quantity__label">{{title}}{{#ifGt quantity.stockCnt 0}} / 재고 : {{quantity.stockCnt}}개{{/ifGt}}</span>
                                <span class="quantity__content">
                                    <span class="counter">
                                        <button
                                            class="counter__btn"
                                            shopby-count="{{quantity.count}}"
                                            shopby-selected-key="{{selectedKey}}"
                                            shopby-on:click="SUBTRACT_OPTION_COUNT"
                                        >
                                            -
                                            <span class="a11y">감소</span>
                                        </button>
                                        <span class="counter__input">
                                            <input
                                                type="number"
                                                value="{{quantity.count}}"
                                                shopby-selected-key="{{selectedKey}}"
                                                shopby-on:change="CHANGE_OPTION_COUNT"
                                            />
                                        </span>
                                        <button
                                            class="counter__btn"
                                            shopby-count="{{quantity.count}}"
                                            shopby-selected-key="{{selectedKey}}"
                                            shopby-on:click="ADD_OPTION_COUNT"
                                        >
                                            +
                                            <span class="a11y">증가</span>
                                        </button>
                                    </span>
                                    <span>
                                        <span>{{convertToKoreanCurrency quantity.totalPrice}}</span>
                                        <div class="quantity__del">
                                            <span class="ico ico--x-black-24" shopby-on:click="REMOVE_OPTION" shopby-selected-key="{{selectedKey}}"></span>
                                        </div>
                                    </span>
                                </span>
                            </div>

                            {{#eachTextOptionMapByOption ../textOptionsMapByOption selectedKey}}
                            <dl
                                class="product-summary__purchase-option {{#if byQuantity}}open-by-quantity{{/if}}"
                                shopby-selected-option-key="{{../selectedKey}}"
                                shopby-text-option-key="{{textOptionKey}}"
                                shopby-purchase-option
                            >
                                <div class="text-option">
                                    <span class="text-option__label">
                                        <span>{{inputLabel}}</span>
                                        {{#if required}}
                                        <em>(필수)</em>
                                        {{/if}}
                                    </span>
                                </div>

                                <div class="product-summary__purchase-option-input-wrap">
                                    {{#each values}}
                                    <div class="character-counter {{#ifNe @index 0}}by-quantity{{/ifNe}}">
                                        <span class="input-field input-field--md">
                                            <input
                                                type="text"
                                                shopby-selected-option-key="{{../../selectedKey}}"
                                                shopby-text-option-key="{{../textOptionKey}}"
                                                shopby-text-option-index="{{@index}}"
                                                placeholder="{{../inputLabel}} (을)를 입력하세요."
                                                value="{{this}}"
                                                shopby-on:change="CHANGE_TEXT_OPTION_BY_OPTION"
                                                shopby-on:input="INPUT_TEXT_OPTION_BY_OPTION"
                                                maxlength="100"
                                            />
                                        </span>
                                        <span class="character-counter__status character-counter__status--character">
                                            <span class="character-counter__error" shopby-option-length-error></span>
                                            <span class="character-counter__count" shopby-option-length="{{../textOptionKey}}-{{@index}}">{{length this}}</span>
                                            <span class="character-counter__limit-count">/ 100</span>
                                        </span>
                                    </div>
                                    {{/each}}
                                </div>

                                {{#ifGt ../quantity.count 1}}
                                <div class="by-quantity-toggle-btn">
                                    <span shopby-on:click="TOGGLE_TEXT_OPTIONS_BY_QUANTITY">{{#if byQuantity}}옵션별 입력{{else}}수량별 입력{{/if}}</span>
                                </div>
                                {{/ifGt}}
                            </dl>
                            {{/eachTextOptionMapByOption}}
                            <!--  -->
                            {{/each}}
                        </dl>
                    </div>

                    <!-- 상풉옵션 -->
                    <div slot="textOptionsByProduct">
                        {{#each textOptionsByProduct}}
                        <dl class="product-summary__purchase-option">
                            <div class="text-option">
                                <span class="text-option__label">
                                    <span>{{textOption.inputLabel}}</span>
                                    {{#if textOption.required}}
                                    <em>(필수)</em>
                                    {{/if}}
                                </span>
                            </div>
                            <div class="character-counter">
                                <span class="input-field input-field--md">
                                    <input
                                        type="text"
                                        shopby-text-option-key="{{textOptionKey}}"
                                        shopby-text-option-index="0"
                                        placeholder="{{textOption.inputLabel}} (을)를 입력하세요."
                                        value="{{textOption.value}}"
                                        shopby-on:change="CHANGE_TEXT_OPTION_BY_PRODUCT"
                                        shopby-on:input="INPUT_TEXT_OPTION_BY_PRODUCT"
                                        maxlength="100"
                                    />
                                </span>
                                <span class="character-counter__status character-counter__status--character">
                                    <span class="character-counter__error" shopby-option-length-error></span>
                                    <span class="character-counter__count" shopby-option-length="{{textOptionKey}}-0">{{length textOption.value}}</span>
                                    <span class="character-counter__limit-count">/ 100</span>
                                </span>
                            </div>
                        </dl>
                        {{/each}}
                    </div>
                    <!-- 상풉옵션 END -->

                    <div class="purchase__total">
                        <span>총 상품 금액</span>
                        <span>
                            <em slot="totalPrice">{{#if totalPrice includeZero=true}}{{convertToKoreanCurrency totalPrice}}{{else}}-{{/if}}</em>
                            원
                        </span>
                    </div>

                    <div>
                        <div class="purchase__button-wrap">
                            <div class="like-btn-wrap">
                                <button
                                    type="button"
                                    class="btn btn--default sc-like-button purchase__like-btn {{#if likeStatus.isLiked}}is-active{{/if}}"
                                    slot="likeStatus"
                                    shopby-action="PRODUCT_LIKE"
                                >
                                    <svg width="40" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" shopby-action="PRODUCT_LIKE">
                                        <path
                                            d="M52.29 19.24c-6.382 0-10.932 3.926-12.41 6.888-1.82-3.086-8.408-8.31-14.79-6.888-7.977 1.777-12.613 11.532-5.774 21.324C25.521 49.45 34.74 56.557 39.88 61c5.319-4.443 17.728-14.216 22.16-22.213 5.596-10.097-1.773-19.547-9.75-19.547Z"
                                            stroke="var(--gray500)"
                                            stroke-linejoin="round"
                                            shopby-action="PRODUCT_LIKE"
                                        ></path>
                                    </svg>
                                </button>

                                <div class="tooltip" shopby-element="like-action-message"></div>
                            </div>

                            <span class="purchase__btns" slot="unpurchasable">
                                {{#if unpurchasable}}
                                <button class="btn btn--dark btn--md" style="width: 100%" disabled>구매불가</button>
                                {{else}}
                                <button class="btn btn--fill-dark btn--md" shopby-action="ADD_CART">장바구니</button>
                                <button class="btn btn--fill-point btn--md" shopby-on:click="PRODUCT_ORDER">구매하기</button>
                                {{/if}}
                            </span>
                        </div>

                        <div id="naver-pay" class="purchase__naver-pay-btn"></div>
                    </div>
                </div>
            </product-purchase>
        </div>
    </section>

    <!-- 탭 -->
    <product-detail-tabs>
        <div class="tabs-wrap">
            <ul class="tab" slot="tabs">
                {{#unless isLoading}}
                <li>
                    <a href="#PRODUCT_DETAIL">
                        <button
                            class="tab__btn {{#ifEq currentTab 'PRODUCT_DETAIL'}}is-active{{/ifEq}}"
                            shopby-on:click="TAB_CLICK"
                            shopby-tab-value="PRODUCT_DETAIL"
                        >
                            상품 상세정보
                        </button>
                    </a>
                </li>
                {{#if hasGuide}}
                <li>
                    <a href="#SHIPPING_CLAIM">
                        <button
                            class="tab__btn {{#ifEq currentTab 'SHIPPING_CLAIM'}}is-active{{/ifEq}}"
                            shopby-on:click="TAB_CLICK"
                            shopby-tab-value="SHIPPING_CLAIM"
                        >
                            배송/반품/교환 안내
                        </button>
                    </a>
                </li>
                {{/if}}
                <li>
                    <a href="#PRODUCT_REVIEW">
                        <button
                            class="tab__btn {{#ifEq currentTab 'PRODUCT_REVIEW'}}is-active{{/ifEq}}"
                            shopby-on:click="TAB_CLICK"
                            shopby-tab-value="PRODUCT_REVIEW"
                        >
                            상품 후기 ({{reviewCount}})
                        </button>
                    </a>
                </li>
                <li>
                    <a href="#PRODUCT_INQUIRY">
                        <button
                            class="tab__btn {{#ifEq currentTab 'PRODUCT_INQUIRY'}}is-active{{/ifEq}}"
                            shopby-on:click="TAB_CLICK"
                            shopby-tab-value="PRODUCT_INQUIRY"
                        >
                            상품문의 ({{inquiryCount}})
                        </button>
                    </a>
                </li>
                {{/unless}}
            </ul>
        </div>
    </product-detail-tabs>

    <!-- 상품 상세정보 -->
    <product-detail id="PRODUCT_DETAIL">
        <div class="product-content__box">
            <div class="editor product-content__content {{#unless isOpen}}hidden{{/unless}}" shopby-element="product-content">
                <div class="product-content__content-box">
                    <div class="product-content__content-detail" slot="content">
                        <div>
                            <div>{{safeString content.header }}</div>
                            <div>
                                {{safeString content.main }} {{#if showsOptionImages}}
                                <p class="option-info-txt">
                                    <span>상품의 옵션이미지를 선택하시면 자세히 보실 수 있어요.</span>
                                </p>
                                <div slot="optionImages">
                                    {{#each optionImages}}
                                    <div shopby-option-no="{{optionNo}}" shopby-option-value="{{value}}" shopby-on:click="SHOW_OPTION_IMAGE">
                                        <div>{{value}}</div>
                                        <div><img src="{{url}}" loading="lazy" /></div>
                                    </div>
                                    {{/each}}
                                </div>
                                {{/if}}
                            </div>
                            <div>{{safeString content.footer }}</div>
                        </div>

                        {{#unless hasContents}} {{#unless showsOptionImages}}
                        <p class="product-content__empty-content">등록된 상품 상세 정보가 없습니다.</p>
                        {{/unless}} {{/unless}}
                    </div>

                    <div slot="baseInfo">
                        {{#if baseInfo.hasProductBaseInfo}}
                        <details class="accordion" open>
                            <summary class="section-title accordion__title">상품 기본 정보</summary>
                            <div class="product-content__info">
                                {{#if baseInfo.placeOriginLabel}}
                                <dl class="accordion__item">
                                    <dt>원산지</dt>
                                    <dd>{{baseInfo.placeOriginLabel}} {{#if baseInfo.placeOriginEtcLabel}}({{baseInfo.placeOriginEtcLabel}}){{/if}}</dd>
                                </dl>
                                {{/if}} {{#if baseInfo.expirationYmdt}}
                                <dl class="accordion__item">
                                    <dt>유효일자</dt>
                                    <dd>{{dateFormat baseInfo.expirationYmdt 'yyyy-mm-dd'}}</dd>
                                </dl>
                                {{/if}} {{#if baseInfo.manufactureYmdt}}
                                <dl class="accordion__item">
                                    <dt>제조일자</dt>
                                    <dd>{{dateFormat baseInfo.manufactureYmdt 'yyyy-mm-dd'}}</dd>
                                </dl>
                                {{/if}}
                            </div>
                        </details>
                        {{/if}}
                    </div>

                    <!-- 상품정보제공고시 -->
                    <div slot="hasDutyInfo">
                        {{#if hasDutyInfo}}
                        <details class="accordion product-content__info-box duty-info" open>
                            <summary class="section-title accordion__title">상품정보제공고시</summary>
                            <div class="product-content__info" slot="dutyInfo">
                                {{#each dutyInfo.contents}}
                                <dl>
                                    <dt>{{label}}</dt>
                                    <dd>
                                        <div style="width: 100%">
                                            {{description}}

                                            <!-- 상품정보 제공고시 내 인증정보 -->
                                            {{#if ../includesKcInDutyInfo }} {{#ifStartsWith label 'KC'}} {{#each ../baseInfo.certifications}}
                                            <div class="kc-certification">
                                                <div class="kc-logo">
                                                    <span class="ico ico--kc"></span>
                                                </div>
                                                <div class="kc-info">
                                                    <div class="kc-description">{{type}} 안전확인 대상 품목으로 아래의 국가 통합인증 필함</div>
                                                    <div class="kc-code font-montserrat">
                                                        {{#if code}}인증 번호 :
                                                        <a href="https://www.safetykorea.kr/search/searchPop?certNum={{code}}">{{code}}</a>
                                                        {{/if}} {{#if date}}인증 날짜 :
                                                        <a href="https://rra.go.kr/ko/license/A_c_search.do">{{date}}</a>
                                                        {{/if}}
                                                    </div>
                                                </div>
                                            </div>
                                            {{/each}} {{/ifStartsWith}} {{/if}}
                                        </div>
                                    </dd>
                                </dl>
                                {{/each}}
                            </div>
                        </details>
                        {{/if}}
                    </div>

                    <!-- 인증정보 -->
                    <div slot="certificateInfo">
                        {{#if certificateInfo.showCertificationInformation}}
                        <details class="accordion product-content__info-box certification-info" open>
                            <summary class="section-title accordion__title">인증정보</summary>
                            <div>
                                <div class="product-content__info">
                                    {{#ifEq certificateInfo.type 'DETAIL_PAGE'}}
                                    <div class="simple-text">
                                        <p>상품 상세페이지 내 별도 표기</p>
                                    </div>
                                    {{else}} {{#each certificateInfo.certifications}}
                                    <div class="kc-certification">
                                        <div class="kc-logo">
                                            <span class="ico ico--kc"></span>
                                        </div>
                                        <div class="kc-info">
                                            <div class="kc-description">{{type}} 안전확인 대상 품목으로 아래의 국가 통합인증 필함</div>
                                            <div class="kc-code font-montserrat">
                                                {{#if code}}인증 번호 :
                                                <a href="https://www.safetykorea.kr/search/searchPop?certNum={{code}}">{{code}}</a>
                                                {{/if}} {{#if date}}인증 날짜 :
                                                <a href="https://rra.go.kr/ko/license/A_c_search.do">{{date}}</a>
                                                {{/if}}
                                            </div>
                                        </div>
                                    </div>
                                    {{/each}} {{/ifEq}}
                                </div>
                            </div>
                        </details>
                        {{/if}}
                    </div>
                </div>
            </div>
        </div>
    </product-detail>

    <!-- 배송/교환/반품 -->
    <shipping-claim id="SHIPPING_CLAIM">
        <div class="product-content-shipping-claim product-content__info-box">
            <div slot="guide">
                {{#if guide.freight}}
                <div class="product-content__info-box">
                    <details class="accordion" open>
                        <summary class="section-title accordion__title">배송안내</summary>
                        <div class="product-content__info-description">{{safeString guide.freight}}</div>
                    </details>
                </div>
                {{/if}} {{#if guide.exchange}}
                <div class="product-content__info-box">
                    <details class="accordion" open>
                        <summary class="section-title accordion__title">교환 및 반품안내</summary>
                        <div class="product-content__info-description">{{safeString guide.exchange}}</div>
                    </details>
                </div>
                {{/if}} {{#if guide.refund}}
                <div class="product-content__info-box">
                    <details class="accordion" open>
                        <summary class="section-title accordion__title">환불 안내</summary>
                        <div class="product-content__info-description">{{safeString guide.refund}}</div>
                    </details>
                </div>
                {{/if}} {{#if guide.afterService}}
                <div class="product-content__info-box">
                    <details class="accordion" open>
                        <summary class="section-title accordion__title">AS 안내</summary>
                        <div class="product-content__info-description">{{safeString guide.afterService}}</div>
                    </details>
                </div>
                {{/if}}
            </div>
        </div>
    </shipping-claim>

    <!-- 상품 후기 -->
    <product-detail-review-list
        id="PRODUCT_REVIEW"
        shopby-default-sort-type="BEST_REVIEW"
        review-page-size:query="reviewPageSize"
        review-page:query="reviewPage"
        product-no:query="productNo"
    >
        <div>
            <div class="product-content__info-box product-review">
                <div class="product-content__title-container l-title">
                    <div>
                        <p class="product-board-list product-content__title" slot="boardConfig">
                            {{#if boardConfig.name}}{{boardConfig.name}}{{else}}상품후기{{/if}}
                            <span class="product-board-list__total-count">
                                <em>{{totalCount}}</em>
                                건
                            </span>
                        </p>

                        <span class="rating rating--md" style="--rating-count: {{calculatePercentageRatingScore score}}%" slot="score"></span>
                        <span class="product-review-summary__score" slot="score">
                            <em>{{score}}</em>
                            <span> / {{limitScore}}</span>
                        </span>
                    </div>

                    <div class="review-header__btn" slot="reviewInfo">
                        {{#if reviewInfo.reviewable}}
                        <button
                            class="btn btn--fill-point btn--sm"
                            shopby-action="WRITE_REVIEW"
                            shopby-reviewable-count="{{reviewInfo.reviewableCount}}"
                            shopby-uses-attachment="{{reviewInfo.canAttach}}"
                        >
                            상품후기 등록
                        </button>
                        {{/if}}
                        <a href="/pages/board/product-review-list.html"><button class="btn btn--line-dark btn--sm">전체 상품후기 보기</button></a>
                    </div>
                </div>

                <div class="product-content__info">
                    <div slot="boardConfig">
                        <!-- 내용들 -->
                        {{#if boardConfig.expandedReviewConfig.useGatheringPhotoReview}}
                        <div class="product-review-media-summary">
                            <div class="product-review-media-summary__header">
                                <span class="product-review-media-summary__title">포토 모아보기</span>
                                <span class="product-review-media-summary__media_count" slot="photoCollectionTotalCount">({{photoCollectionTotalCount}})</span>
                                <span class="photo-review-more" slot="totalCount" shopby-action="PHOTO_REVIEW_MORE">
                                    {{#ifGe totalCount 7}}더보기 >{{/ifGe}}
                                </span>
                            </div>
                            <div class="product-review-media-summary__content">
                                <ul slot="photoCollections">
                                    {{#each photoCollections}} {{#ifLt @index 6}}
                                    <li class="photo-collection-item" shopby-review-product-no="{{productNo}}" shopby-review-no="{{reviewNo}}">
                                        <img src="{{imageUrl}}" alt="image" loading="lazy" shopby-action="REVIEW_DETAIL_POPUP" />
                                        {{#ifGt imageCount 1}}
                                        <p class="review-img-count" shopby-action="REVIEW_DETAIL_POPUP">{{imageCount}}</p>
                                        {{/ifGt}}
                                    </li>
                                    {{/ifLt}} {{/each}}
                                </ul>
                            </div>
                        </div>
                        {{/if}}
                    </div>

                    <div class="product-review-content">
                        <div class="product-review-search">
                            <ul class="product-review-search__sort-type" slot="sortType">
                                <li class="{{#ifEqOne sortType undefined 'BEST_REVIEW'}}active{{/ifEqOne}}">
                                    <button type="button" shopby-action="SORT_TAB" shopby-sort-type="BEST_REVIEW">베스트순</button>
                                </li>
                                <li class="{{#ifEq sortType 'REGISTER_YMDT'}}active{{/ifEq}}">
                                    <button type="button" shopby-action="SORT_TAB" shopby-sort-type="REGISTER_YMDT">등록일순</button>
                                </li>
                                <li class="{{#ifEq sortType 'RATING_DESC'}}active{{/ifEq}}">
                                    <button type="button" shopby-action="SORT_TAB" shopby-sort-type="RATING_DESC">평점높은순</button>
                                </li>
                                <li class="{{#ifEq sortType 'RATING_ASC'}}active{{/ifEq}}">
                                    <button type="button" shopby-action="SORT_TAB" shopby-sort-type="RATING_ASC">평점낮은순</button>
                                </li>
                                <li class="{{#ifEq sortType 'RECOMMEND'}}active{{/ifEq}}">
                                    <button type="button" shopby-action="SORT_TAB" shopby-sort-type="RECOMMEND">추천순</button>
                                </li>
                            </ul>
                            <div shopby-on:click="TOGGLE_PHOTO_REVIEW">
                                <label class="form-check form-check--md" slot="photoReviewsOnly">
                                    {{inputBox 'radio' photoReviewsOnly}}
                                    <span class="form-check__label">포토후기만 보기</span>
                                </label>
                            </div>
                        </div>

                        <div class="product-review-list">
                            <ul class="review-list" slot="reviews">
                                {{#each reviews}}
                                <li
                                    class="review-list-item {{#if openComment}}open-answer{{/if}}"
                                    shopby-review-no="{{reviewNo}}"
                                    shopby-board-name="{{../productReviewConfigName}}"
                                    shopby-element="REVIEW-ITEM-BOTTOM"
                                    shopby-uses-attachment="{{canAttach}}"
                                >
                                    <div class="review-list-item__content">
                                        <div class="review-list__score-container">
                                            <span class="review-list__score-star">
                                                {{#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="50%" />
                                                        <stop class="gradient__star" offset="50%" />
                                                    </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>
                                            <span class="review-list__score">{{rate}}</span>
                                        </div>
                                        <div class="review-list__content-container" shopby-element="review-item">
                                            {{#if images}}
                                            <div class="review-list__content-image" shopby-on:click="SHOW_PHOTO_DETAIL" shopby-review-no="{{reviewNo}}">
                                                <img src="{{images.[0]}}" alt="상품 후기 이미지" loading="lazy" />
                                                <p class="review-img-count">{{length images}}</p>
                                            </div>
                                            {{/if}}
                                            <div class="review-list__content-box">
                                                <div class="review-option">{{optionDisplayLabel}}</div>
                                                <div class="review-content">
                                                    {{#ifEq bestReviewYn 'Y'}}
                                                    <div class="ico-wrap best"><span class="ico ico--best-24"></span></div>
                                                    {{/ifEq}}
                                                    <div class="review-text" shopby-action="REVIEW_CONTENT_TEXT">{{content}}</div>
                                                </div>

                                                <div class="review-comment-box">
                                                    <!-- 추천하기 -->
                                                    {{#if ../useReviewRecommend}}
                                                    <div class="review-recommend">
                                                        <button
                                                            class="thumbs-btn"
                                                            shopby-on:click="TOGGLE_REVIEW_RECOMMEND"
                                                            shopby-action="RECOMMEND"
                                                            shopby-review-no="{{reviewNo}}"
                                                        >
                                                            <span class="ico ico--thumbs-up-16" shopby-action="RECOMMEND"></span>
                                                            <span class="a11y">추천하기</span>
                                                        </button>

                                                        <span>
                                                            추천해요
                                                            <em class="font-montserrat" shopby-element="recommend-{{reviewNo}}">{{recommendCnt}}</em>
                                                        </span>
                                                    </div>
                                                    {{/if}}

                                                    <!-- 댓글 -->
                                                    <div class="review-comment">
                                                        {{#ifGt commentCount 0}} {{#if ../useReviewRecommend}}
                                                        <span style="color: #dedede; margin-left: 10px">|</span>
                                                        {{/if}}
                                                        <span class="comment" shopby-on:click="TOGGLE_REVIEW_COMMENT" shopby-review-no="{{reviewNo}}">
                                                            댓글
                                                            <em class="font-montserrat">{{commentCount}}</em>
                                                        </span>
                                                        {{/ifGt}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="review-list__edit-container">
                                            <div>
                                                <span>{{registerName}}</span>
                                                |
                                                <span>{{dateFormat registerYmdt 'yyyy-mm-dd'}}</span>
                                            </div>
                                            <div class="review-list__btn-box">
                                                {{#if myReview}}
                                                <div>
                                                    <button class="btn btn--line-gray btn--xs" shopby-action="REVIEW_MODIFY">수정</button>
                                                </div>
                                                <div>
                                                    <button
                                                        class="btn btn--line-gray btn--xs"
                                                        shopby-action="REVIEW_DELETE"
                                                        shopby-given-accumulation="{{givenAccumulationYn}}"
                                                    >
                                                        삭제
                                                    </button>
                                                </div>
                                                {{/if}}
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 댓글 -->
                                    {{#if openComment}} {{#each comments}}
                                    <div class="review-list-item__content comment">
                                        <div class="review-list__score-container"></div>
                                        <div class="review-list__content-container">{{content}}</div>
                                        <div class="review-list__edit-container">
                                            <div>
                                                <span>{{#if isAdmin}}관리자{{/if}}</span>
                                                |
                                                <span>{{dateFormat registerYmdt 'yyyy-mm-dd'}}</span>
                                            </div>
                                        </div>
                                    </div>
                                    {{/each}} {{/if}}
                                </li>

                                {{/each}} {{#unless reviews}}
                                <div class="notice notice--full">
                                    <span class="sprite-image notice--warning"></span>
                                    <em>후기가 없습니다.</em>
                                </div>
                                {{/unless}}
                            </ul>
                        </div>
                    </div>

                    <div class="product-review-footer">
                        <div class="pagination" slot="pagination">
                            <a href="?{{pagination.firstPage}}#PRODUCT_REVIEW">
                                <button class="sprite-image pagination__btn pagination__btn--double-lt">
                                    <span class="a11y">맨처음</span>
                                </button>
                            </a>
                            <a href="?{{pagination.prevPage}}#PRODUCT_REVIEW">
                                <button class="sprite-image pagination__btn pagination__btn--lt">
                                    <span class="a11y">이전</span>
                                </button>
                            </a>
                            {{#each pagination.pages}}
                            <!-- 현재 위치는 is-current로 표시 -->
                            <a class="pagination__link {{#if isCurrentPage}}is-current{{/if}}" href="?{{param}}#PRODUCT_REVIEW">{{page}}</a>
                            {{/each}} {{#unless pagination.pages}}
                            <a class="pagination__link is-current" href="#PRODUCT_REVIEW">1</a>
                            {{/unless}}
                            <a href="?{{pagination.nextPage}}#PRODUCT_REVIEW">
                                <button class="sprite-image pagination__btn pagination__btn--rt">
                                    <span class="a11y">다음</span>
                                </button>
                            </a>
                            <a href="?{{pagination.lastPage}}#PRODUCT_REVIEW">
                                <button class="sprite-image pagination__btn pagination__btn--double-rt">
                                    <span class="a11y">맨끝</span>
                                </button>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </product-detail-review-list>

    <!-- 상품문의 -->
    <div class="product-content__info-box product-qna" id="PRODUCT_INQUIRY">
        <div class="product-content__title-container l-title">
            <!-- summary -->
            <product-detail-inquiry-summary>
                <div class="product-board-list product-content__title font-montserrat">
                    <span class="product-board-list__total-count">
                        <span slot="inquiryTitle">{{inquiryTitle}}</span>
                        <em slot="totalCount">{{totalCount}}</em>
                        건
                    </span>
                </div>
            </product-detail-inquiry-summary>

            <product-detail-board-button board-type="inquiry">
                <div>
                    <button
                        class="btn btn--fill-point btn--sm"
                        slot="inquiryGuestWriteable"
                        shopby-action="PRODUCT_INQUIRY_WRITE"
                        shopby-guest-writeable="{{inquiryGuestWriteable}}"
                        shopby-product-name="{{baseInfo.productName}}"
                        shopby-image-url="{{getFirstImageWithDefault baseInfo.imageUrls}}"
                    >
                        상품문의 등록
                    </button>
                </div>
            </product-detail-board-button>
        </div>

        <product-detail-inquiry-list inquiry-page-size:query="inquiryPageSize" inquiry-page:query="inquiryPage">
            <div>
                <div>
                    <div class="product-content__info">
                        <!-- 내용들 -->
                        <div class="product-review-list">
                            <ul class="qna-list" slot="inquiries">
                                {{#each inquiries}}
                                <!-- active -->
                                <li class="qna-list__item" shopby-active>
                                    <div class="qna-list__item-box">
                                        <div class="qna-list__item-status">
                                            {{#if isReplied}}
                                            <span class="badge badge--line-dark">답변완료</span>
                                            {{else}}
                                            <span class="badge badge--line-point">답변대기</span>
                                            {{/if}}
                                        </div>
                                        <div class="qna-list__item-category">상품</div>
                                        <div class="qna-list__item-content title" shopby-readable="{{readable}}" shopby-action="INQUIRY_DETAIL">
                                            {{#if isSecreted}}
                                            <span class="ico ico--lock-black-16"></span>
                                            {{/if}} {{#if readable}} {{title}} {{else}} 비밀글입니다 {{/if}}
                                        </div>
                                        <div class="qna-list__item-register">{{registerName}} | {{registerDate}}</div>
                                    </div>
                                    <div class="qna-list__item-box more">
                                        <div class="qna-list__item-status"></div>
                                        <div class="qna-list__item-category">
                                            <div class="ico ico-question"></div>
                                        </div>
                                        <div class="qna-list__item-content">{{content}}</div>
                                        <div class="qna-list__item-register">
                                            <div class="btn-box">
                                                <div>
                                                    {{#if myInquiry}}
                                                    <button class="btn btn--line-gray btn--xs" shopby-action="INQUIRY_MODIFY" shopby-inquiry-no="{{inquiryNo}}">
                                                        수정
                                                    </button>
                                                    {{/if}}
                                                </div>
                                                {{#if canModify}}
                                                <div>
                                                    <button class="btn btn--line-gray btn--xs" shopby-action="INQUIRY_DELETE" shopby-inquiry-no="{{inquiryNo}}">
                                                        삭제
                                                    </button>
                                                </div>
                                                {{/if}}
                                            </div>
                                        </div>
                                    </div>
                                    {{#each answers}}
                                    <div class="qna-list__item-box more">
                                        <div class="qna-list__item-status"></div>
                                        <div class="qna-list__item-category">
                                            <div class="ico ico-answer"></div>
                                        </div>
                                        <div class="qna-list__item-content">{{content}}</div>
                                        <div class="qna-list__item-register">{{nickName}} | {{dateFormat registerYmdt 'yyyy-mm-dd'}}</div>
                                    </div>
                                    {{/each}}
                                </li>
                                {{/each}} {{#unless inquiries}}
                                <div class="notice notice--full">
                                    <span class="sprite-image notice--warning"></span>
                                    <em>문의가 없습니다.</em>
                                </div>
                                {{/unless}}
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- pagination -->
                <div class="pagination" slot="pagination">
                    <a href="?{{pagination.firstPage}}#PRODUCT_INQUIRY">
                        <button class="sprite-image pagination__btn pagination__btn--double-lt">
                            <span class="a11y">맨처음</span>
                        </button>
                    </a>
                    <a href="?{{pagination.prevPage}}#PRODUCT_INQUIRY">
                        <button class="sprite-image pagination__btn pagination__btn--lt">
                            <span class="a11y">이전</span>
                        </button>
                    </a>
                    {{#each pagination.pages}}
                    <!-- 현재 위치는 is-current로 표시 -->
                    <a class="pagination__link {{#if isCurrentPage}}is-current{{/if}}" href="?{{param}}#PRODUCT_INQUIRY">{{page}}</a>
                    {{/each}} {{#unless pagination.pages}}
                    <a class="pagination__link is-current" href="#PRODUCT_INQUIRY">1</a>
                    {{/unless}}
                    <a href="?{{pagination.nextPage}}#PRODUCT_INQUIRY">
                        <button class="sprite-image pagination__btn pagination__btn--rt">
                            <span class="a11y">다음</span>
                        </button>
                    </a>
                    <a href="?{{pagination.lastPage}}#PRODUCT_INQUIRY">
                        <button class="sprite-image pagination__btn pagination__btn--double-rt">
                            <span class="a11y">맨끝</span>
                        </button>
                    </a>
                </div>
            </div>
        </product-detail-inquiry-list>
    </div>

    <!-- 관련상품 -->
    <related-product product-no:query="productNo">
        <div>
            <div class="thumb-box-wrap" slot="relatedProducts">
                {{#if relatedProducts}}
                <div class="thumb-box">
                    <div class="thumb-title">관련 상품</div>
                    <div class="thumb-item">
                        <div class="swiper" shopby-slider-id="related-product__slider">
                            <ul class="swiper-wrapper">
                                {{#each relatedProducts}}
                                <li class="swiper-slide thumb-item-wrap">
                                    <a href="?productNo={{productNo}}">
                                        <div class="thumb-item__img">
                                            <img src="{{src}}" alt="{{alt}}" loading="lazy" />
                                            <button
                                                type="button"
                                                class="btn btn--default sc-like-button thumb-fab{{#if liked}} is-active{{/if}}"
                                                shopby-action="RELATED_PRODUCT_LIKE"
                                                shopby-product-no="{{productNo}}"
                                            >
                                                <svg width="50" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M52.29 19.24c-6.382 0-10.932 3.926-12.41 6.888-1.82-3.086-8.408-8.31-14.79-6.888-7.977 1.777-12.613 11.532-5.774 21.324C25.521 49.45 34.74 56.557 39.88 61c5.319-4.443 17.728-14.216 22.16-22.213 5.596-10.097-1.773-19.547-9.75-19.547Z"
                                                        stroke="var(--color-point)"
                                                        stroke-linejoin="round"
                                                        shopby-action="RELATED_PRODUCT_LIKE"
                                                    ></path>
                                                </svg>
                                            </button>
                                        </div>
                                        <div class="thumb-item__info">
                                            <div class="thumb-item__info-name font-noto">{{productName}}</div>
                                            <div class="thumb-item__info-price">
                                                <div class="current-price">
                                                    <em class="font-montserrat">{{convertToKoreanCurrency discountedPrice}}</em>
                                                    <span class="font-noto">원</span>
                                                </div>
                                                {{#unless hasOnlyOriginalPrice}}
                                                <span class="origin-price">
                                                    <s class="font-montserrat">{{convertToKoreanCurrency originalPrice}}</s>
                                                    <s class="font-noto">원</s>
                                                </span>
                                                {{/unless}}
                                            </div>
                                            <div class="thumb-item__icon-box">
                                                {{#each stickers}} {{#ifEq type 'TEXT'}}
                                                <span>{{safeString label}}</span>
                                                {{else}}
                                                <img src="{{label}}" alt="{{name}}아이콘" loading="lazy" />
                                                {{/ifEq}} {{/each}}
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                {{/each}}
                            </ul>
                        </div>
                        <button class="thumb-pagination-btn-prev sprite-image pagination__btn pagination__btn--lt">
                            <span class="a11y">이전</span>
                        </button>
                        <button class="thumb-pagination-btn-next sprite-image pagination__btn pagination__btn--rt">
                            <span class="a11y">다음</span>
                        </button>
                    </div>
                </div>
                {{/if}}
            </div>
        </div>
    </related-product>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<div class="product-detail">
    <!-- 이미지 슬라이더 영역 -->
    <image-slider>
        <div>
            <div slot="images">
                <div class="swiper product-image-slider" shopby-slider-id="product-main-image-slider">
                    <div class="swiper-wrapper">
                        {{#each images}}
                        <div class="swiper-slide">
                            <div class="thumb-item">
                                <div class="thumb-item__media">
                                    <span class="thumb-item__img"><img src="{{src}}" alt="{{alt}}" fetchpriority="high" /></span>
                                </div>
                            </div>
                        </div>
                        {{/each}}
                    </div>
                    <div class="swiper-pagination" shopby-slider-pagination="product-main-image-slider"></div>
                </div>
            </div>
            <div class="swiper hidden" shopby-slider-id="product-sub-image-slider"></div>
        </div>
    </image-slider>

    <product-summary>
        <div class="product-summary">
            <div class="l-content">
                <div class="product-summary-box">
                    <p class="product-summary__brand-name" slot="summary">{{summary.brandName}}</p>
                    <h2 class="product-summary__title" slot="summary">{{summary.productName}}</h2>

                    <!-- 홍보문구 -->
                    <div class="product-summary__promotion-text" slot="baseInfo">{{baseInfo.promotionText}}</div>

                    <div class="product-summary__price-detail font-montserrat" slot="summary">
                        {{#if useContentsIfPausing}}
                        <span class="product-summary__price">{{contentsIfPausing}}</span>
                        {{else}} {{#ifGt summary.discountRate 0}}
                        <span class="product-summary__off-percent">{{summary.discountRate}}%</span>
                        {{/ifGt}}

                        <span class="product-summary__price">{{convertToKoreanCurrency summary.discountedPrice}}원</span>
                        {{#ifGt summary.discountRate 0}}
                        <s class="product-summary__original-price">
                            {{convertToKoreanCurrency summary.originalPrice}}원
                            <span class="help-wrap">
                                <button class="help-btn">
                                    <span class="ico ico--help-circle-14" shopby-action="DISCOUNT_DETAIL"></span>
                                    <span class="a11y">할인 내역 보기</span>
                                </button>
                            </span>
                        </s>
                        {{/ifGt}} {{/if}}
                    </div>
                </div>

                <div class="product-summary__info">
                    <div slot="summary">
                        {{#if summary.accumulationUseYn}} {{#ifGt summary.accumulation.accumulatedAmount 0}}
                        <dl class="product-summary__info-accumulate">
                            <dt slot="accumulationConfig">{{accumulationConfig.accumulationName}}</dt>
                            <dd>
                                <span class="font-montserrat">+{{convertToKoreanCurrency summary.accumulation.accumulatedAmount}}</span>
                                <span slot="accumulationConfigUnit">{{accumulationConfigUnit}}</span>
                                적립
                                <span slot="accumulationConfig">
                                    {{#getSignUpAccumulationLabel accumulationConfig}} (로그인 시 적립 가능) {{/getSignUpAccumulationLabel}}
                                </span>
                            </dd>
                        </dl>
                        {{/ifGt}} {{/if}}
                    </div>
                    <div slot="coupon">
                        {{#ifEq coupon.couponUseYn 'Y'}}
                        <dl class="product-summary__info-coupon">
                            <dt>쿠폰</dt>
                            <dd>
                                <span class="discount">{{coupon.couponRate}}%</span>
                                {{convertToKoreanCurrency coupon.priceWithCoupon}}원

                                <div class="coupon-download__btn-wrap">
                                    <button class="btn btn--fill-dark btn--sm" shopby-action="COUPON_DOWNLOAD">
                                        쿠폰받기
                                        <span class="ico ico--download-white-12" shopby-action="COUPON_DOWNLOAD"></span>
                                    </button>
                                </div>
                            </dd>
                        </dl>
                        {{/ifEq}}
                    </div>
                    <dl class="product-summary__freight">
                        <dt>배송비</dt>
                        <dd slot="freight">
                            {{#with freight}} {{#if shippingInfo.shippingAvailable}} {{#with summary.freight}} {{#ifEq areaType 'PARTNER_SHIPPING_AREA'}}
                            <strong>{{partnerCompanyName}}</strong>
                            배송 {{/ifEq}} {{#ifEq conditionType 'FREE'}} 무료배송 {{/ifEq}} {{#ifEq conditionType 'FIXED_FEE'}} {{convertToKoreanCurrency
                            fee}}원
                            <em>(택배/등기/소포/선결제)</em>
                            {{else}} {{#ifNe conditionType 'FREE'}} {{convertToKoreanCurrency fee}}원 {{/ifNe}} {{/ifEq}} {{#ifEq conditionType
                            'QUANTITY_PROPOSITIONAL_FEE'}} ({{perOrderCnt}}개마다 부과) {{/ifEq}} {{#ifGt aboveDeliveryAmt 0}}
                            <em>({{convertToKoreanCurrency aboveDeliveryAmt}}원 이상 구매 시 무료)</em>
                            {{/ifGt}} {{/with}} {{else}} 배송불가 상품 {{/if}} {{/with}}
                        </dd>
                    </dl>

                    <div slot="purchaseQuantityLimited">
                        {{#with purchaseQuantityLimited}} {{#if visible}}
                        <dl class="product-summary__purchase-quantity-limit">
                            <dt>구매수량제한</dt>
                            <dd>
                                {{#if minCount}} 최소 {{minCount}}개 {{/if}}{{#if useBoth}} ,  {{/if}}{{#if maxCount}} 최대 {{maxCount}}개 ( {{#ifEq
                                maxBuyCountType 'PERSON'}} 1인 {{/ifEq}}{{#ifEq maxBuyCountType 'TIME'}} 1회 {{/ifEq}}{{#ifEq maxBuyCountType 'PERIOD'}}
                                {{maxBuyPeriodCnt}}일 동안 {{/ifEq}} ) {{/if}}
                            </dd>
                        </dl>
                        {{/if}} {{/with}}
                    </div>

                    <dl class="product-summary__product-number">
                        <dt>상품번호</dt>
                        <dd slot="productNo">{{productNo}}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </product-summary>

    <product-detail-banners>
        <div>
            <div class="center" slot="banners">
                {{#each banners}} {{#if landingUrl}}
                <a href="{{landingUrl}}" rel="noreferrer" target="{{target}}">
                    {{/if}}
                    <img src="{{imageUrl}}" alt="{{alt}}" loading="lazy" width="{{width}}" height="{{height}}" />
                    {{#if landingUrl}}
                </a>
                {{/if}} {{/each}}
            </div>
        </div>
    </product-detail-banners>

    <section class="l-panel product-content">
        <product-detail-tabs>
            <div class="tabs-wrap">
                <ul class="tab" slot="tabs">
                    {{#unless isLoading}}
                    <li>
                        <button
                            class="tab__btn {{#ifEq currentTab 'PRODUCT_DETAIL'}}is-active{{/ifEq}}"
                            type="button"
                            shopby-on:click="TAB_CLICK"
                            shopby-tab-value="PRODUCT_DETAIL"
                        >
                            상품 상세정보
                        </button>
                    </li>
                    {{#if hasGuide}}
                    <li>
                        <button
                            class="tab__btn {{#ifEq currentTab 'SHIPPING_CLAIM'}}is-active{{/ifEq}}"
                            type="button"
                            shopby-on:click="TAB_CLICK"
                            shopby-tab-value="SHIPPING_CLAIM"
                        >
                            배송/반품/교환
                        </button>
                    </li>
                    {{/if}}
                    <li>
                        <button
                            class="tab__btn {{#ifEq currentTab 'PRODUCT_REVIEW'}}is-active{{/ifEq}}"
                            type="button"
                            shopby-on:click="TAB_CLICK"
                            shopby-tab-value="PRODUCT_REVIEW"
                        >
                            상품 후기 ({{reviewCount}})
                        </button>
                    </li>
                    <li>
                        <button
                            class="tab__btn {{#ifEq currentTab 'PRODUCT_INQUIRY'}}is-active{{/ifEq}}"
                            type="button"
                            shopby-on:click="TAB_CLICK"
                            shopby-tab-value="PRODUCT_INQUIRY"
                        >
                            상품문의 ({{inquiryCount}})
                        </button>
                    </li>
                    {{/unless}}
                </ul>
            </div>
        </product-detail-tabs>

        <product-detail shopby-tab-element="PRODUCT_DETAIL" style="display: block">
            <div class="product-content__box">
                <div class="editor product-content__content" shopby-element="product-content">
                    <div class="product-content__content-box" slot="content">
                        <p class="product-content__title">상품상세정보</p>
                        <div shopby-element="product-content-detail">
                            <div>{{safeString content.header }}</div>
                            <div>
                                {{safeString content.main }} {{#if showsOptionImages}}
                                <p class="option-info-txt">
                                    <span>상품의 옵션이미지를 선택하시면 자세히 보실 수 있어요.</span>
                                </p>
                                <div slot="optionImages">
                                    {{#each optionImages}}
                                    <div shopby-option-no="{{optionNo}}" shopby-option-value="{{value}}" shopby-on:click="SHOW_OPTION_IMAGE">
                                        <div>{{value}}</div>
                                        <div><img src="{{url}}" loading="lazy" /></div>
                                    </div>
                                    {{/each}}
                                </div>
                                {{/if}}
                            </div>
                            <div>{{safeString content.footer }}</div>
                        </div>

                        {{#unless hasContents}} {{#unless showsOptionImages}}
                        <p class="product-content__empty-content">등록된 상품 상세 정보가 없습니다.</p>
                        {{/unless}} {{/unless}}

                        <div class="information-container" slot="baseInfo">
                            {{#if baseInfo.hasProductBaseInfo}}
                            <details class="accordion" open>
                                <summary class="section-title accordion__title">상품 기본 정보</summary>
                                <ul class="accordion__items table">
                                    {{#if baseInfo.placeOriginLabel}}
                                    <dl class="accordion__item">
                                        <dt>원산지</dt>
                                        <dd>{{baseInfo.placeOriginLabel}} {{#if baseInfo.placeOriginEtcLabel}}({{baseInfo.placeOriginEtcLabel}}){{/if}}</dd>
                                    </dl>
                                    {{/if}} {{#if baseInfo.expirationYmdt}}
                                    <dl class="accordion__item">
                                        <dt>유효일자</dt>
                                        <dd>{{dateFormat baseInfo.expirationYmdt 'yyyy-mm-dd'}}</dd>
                                    </dl>
                                    {{/if}} {{#if baseInfo.manufactureYmdt}}
                                    <dl class="accordion__item">
                                        <dt>제조일자</dt>
                                        <dd>{{dateFormat baseInfo.manufactureYmdt 'yyyy-mm-dd'}}</dd>
                                    </dl>
                                    {{/if}}
                                </ul>
                            </details>
                            {{/if}}
                        </div>

                        <!-- 상품정보제공고시 -->
                        {{#if hasDutyInfo}}
                        <details class="accordion" open>
                            <summary class="section-title accordion__title">상품정보제공고시</summary>
                            <div class="product-content__certification product-content__certification--duty-info" slot="includesKcInDutyInfo">
                                <ul class="accordion__items table">
                                    {{#each dutyInfo.contents}}
                                    <dl>
                                        <dt>{{label}}</dt>
                                        <dd>
                                            {{description}}

                                            <!-- 상품정보 제공고시 내 인증정보 -->
                                            {{#if ../includesKcInDutyInfo }} {{#ifStartsWith label 'KC'}} {{#each ../baseInfo.certifications}}
                                            <div class="kc-certification">
                                                <div class="kc-logo">
                                                    <span class="ico ico--kc"></span>
                                                </div>
                                                <div class="kc-info">
                                                    <div class="kc-description">{{type}} 안전확인 대상 품목으로 아래의 국가 통합인증 필함</div>
                                                    <div class="kc-code font-montserrat">
                                                        {{#if code}}인증 번호 :
                                                        <a href="https://www.safetykorea.kr/search/searchPop?certNum={{code}}">{{code}}</a>
                                                        {{/if}} {{#if date}}인증 날짜 :
                                                        <a href="https://rra.go.kr/ko/license/A_c_search.do">{{date}}</a>
                                                        {{/if}}
                                                    </div>
                                                </div>
                                            </div>
                                            {{/each}} {{/ifStartsWith}} {{/if}}
                                        </dd>
                                    </dl>
                                    {{/each}}
                                </ul>
                            </div>
                        </details>
                        {{/if}}

                        <!-- 인증정보 -->
                        <div class="certification-information">
                            {{#if showCertificationInformation}}
                            <details class="accordion" open slot="includesKcInDutyInfo">
                                <summary class="section-title accordion__title">인증정보</summary>
                                {{#with baseInfo}} {{#ifEq certificationType 'DETAIL_PAGE'}}
                                <div class="simple-text">
                                    <p>상품 상세페이지 내 별도 표기</p>
                                </div>
                                {{else}} {{#each certifications}}
                                <div class="kc-certification">
                                    <div class="kc-logo">
                                        <span class="ico ico--kc"></span>
                                    </div>
                                    <div class="kc-info">
                                        <div class="kc-description">{{type}} 안전확인 대상 품목으로 아래의 국가 통합인증 필함</div>
                                        <div class="kc-code font-montserrat">
                                            {{#if code}}인증 번호 :
                                            <a href="https://www.safetykorea.kr/search/searchPop?certNum={{code}}">{{code}}</a>
                                            {{/if}} {{#if date}}인증 날짜 :
                                            <a href="https://rra.go.kr/ko/license/A_c_search.do">{{date}}</a>
                                            {{/if}}
                                        </div>
                                    </div>
                                </div>
                                {{/each}} {{/ifEq}} {{/with}}
                            </details>
                            {{/if}}
                        </div>

                        <div class="product-content__more-btn hidden" shopby-element="TOGGLE_SHOW_MORE">
                            <button shopby-action="TOGGLE_SHOW_MORE">상세정보 펼쳐보기</button>
                        </div>
                    </div>
                </div>
            </div>
        </product-detail>

        <!-- 상품 후기 -->
        <div class="product-detail-review-wrap" shopby-tab-element="PRODUCT_REVIEW">
            <!-- 상품후기 총 별점 -->
            <product-detail-review-summary>
                <div>
                    <div class="product-review-summary">
                        <div class="product-review-summary__title font-montserrat">
                            <span slot="boardConfig">{{#if boardConfig.name}}{{boardConfig.name}}{{else}}상품후기{{/if}}</span>
                            <em slot="totalCount">{{totalCount}}</em>
                            건
                        </div>
                        <div class="product-review-summary__rating">
                            <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="50%" />
                                        <stop class="gradient__star" offset="50%" />
                                    </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 class="product-review-summary__score font-montserrat" slot="score">
                                <span>{{score}}</span>
                                / {{limitScore}}
                            </div>
                        </div>
                    </div>
                </div>
            </product-detail-review-summary>

            <!-- 상품후기 버튼 -->
            <product-detail-board-button product-no:query="productNo" board-type="product-review" use-init>
                <div>
                    <div class="btn-group" slot="reviewInfo">
                        {{#if reviewInfo.reviewable}}
                        <button
                            class="btn btn--fill-point btn--lg"
                            shopby-action="WRITE_REVIEW"
                            shopby-reviewable-count="{{reviewInfo.reviewableCount}}"
                            shopby-uses-attachment="{{reviewInfo.canAttach}}"
                        >
                            상품후기 등록
                        </button>
                        {{/if}}
                        <a href="/pages/board/product-review-list.html">
                            <button class="btn btn--line-dark btn--lg">전체 상품후기 보기</button>
                        </a>
                    </div>
                </div>
            </product-detail-board-button>

            <div class="l-panel summary-bottom-line"></div>

            <!-- 포토 모아보기 -->
            <product-detail-review-photo-collect>
                <div>
                    <div class="product-review__photo-collect" slot="boardConfig">
                        {{#if boardConfig.expandedReviewConfig.useGatheringPhotoReview}}
                        <div class="summary">
                            <div class="product-review__photo-collect-title" slot="totalCount">
                                <span>포토 모아보기</span>
                                <em class="font-montserrat">({{totalCount}})</em>
                            </div>
                            <div slot="totalCount" shopby-action="PHOTO_REVIEW_MORE">{{#ifGe totalCount 4}} 더보기 > {{/ifGe}}</div>
                        </div>

                        <div class="product-review__photo-collect-content">
                            <ul slot="photoCollections">
                                {{#each photoCollections}} {{#ifLt @index 4}}
                                <li class="photo-collection-item" shopby-review-product-no="{{productNo}}" shopby-review-no="{{reviewNo}}">
                                    <img src="{{imageUrl}}" alt="image" loading="lazy" shopby-action="REVIEW_DETAIL_POPUP" />
                                    {{#ifGt imageCount 1}}
                                    <p class="review-img-count" shopby-action="REVIEW_DETAIL_POPUP">{{imageCount}}</p>
                                    {{/ifGt}}
                                </li>
                                {{/ifLt}} {{/each}}
                            </ul>
                        </div>
                        {{/if}}
                    </div>
                </div>
            </product-detail-review-photo-collect>

            <!-- 상품후기 리스트 -->
            <!-- 상품 후기 -->
            <product-detail-review-list id="PRODUCT_REVIEW" shopby-page-size="20" shopby-default-sort-type="BEST_REVIEW">
                <div>
                    <div class="product-review">
                        <div class="product-content__info">
                            <!-- 내용들 -->
                            <div class="product-review-content">
                                <div class="product-review-search l-panel">
                                    <span class="select select--sm">
                                        <select shopby-action="SORT_REVIEWS">
                                            <option value="BEST_REVIEW">베스트순</option>
                                            <option value="REGISTER_YMDT">등록일순</option>
                                            <option value="RATING_DESC">평점높은순</option>
                                            <option value="RATING_ASC">평점낮은순</option>
                                            <option value="RECOMMEND">추천순</option>
                                        </select>
                                    </span>

                                    <div shopby-on:click="TOGGLE_PHOTO_REVIEW">
                                        <label class="form-check form-check--sm" slot="photoReviewsOnly">
                                            {{inputBox 'radio' photoReviewsOnly}}
                                            <span class="form-check__label">포토후기만 보기</span>
                                        </label>
                                    </div>
                                </div>

                                <div class="product-review-list" slot="reviews">
                                    {{#if reviews}}
                                    <ul class="review-list">
                                        {{#each reviews}}
                                        <li
                                            class="review-list-item l-panel"
                                            shopby-review-no="{{reviewNo}}"
                                            shopby-board-name="{{../productReviewConfigName}}"
                                            shopby-uses-attachment="{{canAttach}}"
                                        >
                                            <div class="list-item__header">
                                                <div class="star">
                                                    <span class="review-list__score-star">
                                                        {{#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}}
                                                    </span>
                                                    <span style="color: #dedede; margin: 0 10px">|</span>
                                                    <span class="review-list__score font-montserrat">{{rate}}</span>
                                                </div>

                                                <div class="review-list__date font-montserrat">{{registerYmdt}}</div>
                                            </div>

                                            <div class="list-item__body">
                                                <div class="list-item__body-summary">
                                                    {{#if images}}
                                                    <div class="list-item__body-image" shopby-on:click="SHOW_PHOTO_DETAIL" shopby-review-no="{{reviewNo}}">
                                                        <img src="{{images.[0]}}" alt="상품 후기 이미지" loading="lazy" />
                                                        <p class="image-count">{{length images}}</p>
                                                    </div>
                                                    {{/if}}
                                                    <div>
                                                        <div class="list-item__body-user">{{registerName}}</div>
                                                        <div class="list-item__body-product">{{productName}}</div>
                                                        <div class="list-item__body-product-option">{{optionDisplayLabel}}</div>
                                                    </div>
                                                </div>

                                                <div class="list-item__body-content-wrap">
                                                    {{#ifEq bestReviewYn 'Y'}}
                                                    <div class="ico-wrap"><span class="ico ico--best-24"></span></div>
                                                    {{/ifEq}}
                                                    <div class="list-item__body-content" shopby-action="REVIEW_DETAIL">{{content}}</div>
                                                </div>
                                            </div>

                                            <div class="list-item__bottom {{#if openComment}}open-answer{{/if}}" shopby-element="REVIEW-ITEM-BOTTOM">
                                                <div class="btn-wrap">
                                                    <div class="action-modify">
                                                        {{#if myReview}}
                                                        <button type="button" class="btn btn--line-gray btn--sm" shopby-action="REVIEW_MODIFY">수정</button>
                                                        <button
                                                            type="button"
                                                            class="btn btn--line-gray btn--sm"
                                                            shopby-action="REVIEW_DELETE"
                                                            shopby-given-accumulation="{{givenAccumulationYn}}"
                                                        >
                                                            삭제
                                                        </button>
                                                        {{/if}}
                                                    </div>
                                                    <div class="action-other">
                                                        {{#if ../useReviewRecommend}}
                                                        <div>
                                                            <span class="ico ico--thumbs-up-16"></span>
                                                            <span>
                                                                <span
                                                                    class="recommend"
                                                                    shopby-on:click="TOGGLE_REVIEW_RECOMMEND"
                                                                    shopby-action="RECOMMEND"
                                                                    shopby-review-no="{{reviewNo}}"
                                                                >
                                                                    추천해요
                                                                </span>
                                                                <em class="font-montserrat" shopby-element="recommend-{{reviewNo}}">{{recommendCnt}}</em>
                                                            </span>
                                                        </div>
                                                        {{/if}} {{#ifGt commentCount 0}} {{#if ../useReviewRecommend}}
                                                        <span style="color: #dedede; margin: 0 10px">|</span>
                                                        {{/if}}
                                                        <div shopby-on:click="TOGGLE_REVIEW_COMMENT" shopby-review-no="{{reviewNo}}">
                                                            <span class="comment">댓글</span>
                                                            <em class="font-montserrat">{{commentCount}}</em>
                                                        </div>
                                                        {{/ifGt}}
                                                    </div>
                                                </div>

                                                {{#ifGt commentCount 0}}
                                                <div class="answer-wrap">
                                                    {{#each comments}}
                                                    <div class="answer-item">
                                                        <div class="answer__header">
                                                            <div>{{#if isAdmin}}관리자{{/if}}</div>
                                                            <div class="date font-montserrat">{{registerYmdt}}</div>
                                                        </div>
                                                        <div class="answer__content">{{content}}</div>
                                                    </div>
                                                    {{/each}}
                                                </div>
                                                {{/ifGt}}
                                            </div>
                                        </li>
                                        {{/each}}
                                    </ul>
                                    {{else}}
                                    <div class="product-review-list__empty">
                                        <span class="product-board-list__empty-notes">아직 작성 된 상품후기가 없어요.</span>
                                        <p class="product-board-list__accumulation-notes">
                                            구매 후 상품후기를 남겨주세요!
                                            <br />
                                            {{#if useReviewsAccumulation}}
                                            <span class="review-accumulation product-board-list__accumulation">
                                                {{#each accumulations}}
                                                <span class="review-accumulation__point">
                                                    {{#ifEq this.[0] 'reviewsAccumulation'}}텍스트후기{{/ifEq}} {{#ifEq this.[0]
                                                    'photoReviewsAccumulation'}}포토후기{{/ifEq}}
                                                    <em>{{this.[1]}}</em>
                                                    {{../unit}} {{#if @last}}적립{{else}}/{{/if}}
                                                </span>
                                                {{/each}}
                                            </span>
                                            {{/if}}
                                        </p>
                                    </div>
                                    {{/if}}
                                </div>
                            </div>

                            <div slot="showMoreButton">
                                {{#if showMoreButton}}
                                <button class="btn btn--line-gray btn--lg-wide" shopby-on:click="MORE_VIEW_BUTTON_CLICK">더보기</button>
                                {{/if}}
                            </div>
                        </div>
                    </div>
                </div>
            </product-detail-review-list>
        </div>

        <!-- 상품 문의 -->
        <div class="product-board-summary-wrap" shopby-tab-element="PRODUCT_INQUIRY">
            <!-- summary -->
            <product-detail-inquiry-summary>
                <div class="product-board-summary">
                    <div class="product-board-summary__title font-montserrat">
                        <span slot="inquiryTitle">{{inquiryTitle}}</span>
                    </div>
                    <div>
                        상품에 대한 궁금하신 내용을 문의해주세요.
                        <br />
                        주문/배송 문의는 주문AS, 1:1문의로 문의해주세요.
                    </div>
                </div>
            </product-detail-inquiry-summary>

            <product-detail-board-button board-type="inquiry">
                <div>
                    <div class="btn-group">
                        <button
                            class="btn btn--fill-point btn--lg"
                            shopby-action="PRODUCT_INQUIRY_WRITE"
                            slot="inquiryGuestWriteable"
                            shopby-guest-writeable="{{inquiryGuestWriteable}}"
                            shopby-product-name="{{baseInfo.productName}}"
                            shopby-image-url="{{getFirstImageWithDefault baseInfo.imageUrls}}"
                        >
                            상품문의 등록
                        </button>
                    </div>
                </div>
            </product-detail-board-button>

            <div class="l-panel summary-bottom-line"></div>

            <!-- 리스트 -->
            <product-detail-inquiry-list inquiry-page-size:query="inquiryPageSize" inquiry-page:query="inquiryPage">
                <div class="personal-inquiry">
                    <div class="personal-inquiry-title font-montserrat l-panel">
                        문의전체
                        <em slot="totalCount">{{totalCount}}</em>
                        건
                    </div>

                    <div class="personal-inquiry-list" slot="inquiries">
                        {{#unless inquiries}}
                        <div class="notice" style="height: 300px">
                            <span class="sprite-image notice--warning"></span>
                            <em>게시글이 존재하지 않습니다.</em>
                        </div>
                        {{/unless}} {{#each inquiries}}
                        <div class="l-panel">
                            <!--  -->
                            <div
                                class="personal-inquiry-list__item"
                                shopby-skin-inquiry-item="shopby-skin-inquiry-item"
                                shopby-inquiry-no="{{inquiryNo}}"
                                style="border-bottom: 0"
                            >
                                <div class="personal-inquiry-item__top">
                                    {{#if isReplied}}
                                    <span class="badge badge--line-dark">답변완료</span>
                                    {{else}}
                                    <span class="badge badge--line-point">답변대기</span>
                                    {{/if}}
                                    <div class="personal-inquiry-item__top-writer">
                                        <span class="font-noto bold">{{registerName}}</span>
                                        <span class="font-montserrat personal-inquiry-item__date">{{registerDate}}</span>
                                    </div>
                                </div>
                                <div class="personal-inquiry-item__bottom">
                                    <div class="personal-inquiry-item__inquiry-info-box" shopby-readable="{{readable}}">
                                        <div class="personal-inquiry-item__inquiry-info">
                                            {{#if typeLabel}}
                                            <span class="personal-inquiry-item__inquiry-type">{{typeLabel}}</span>
                                            {{/if}}
                                            <span class="personal-inquiry-item__inquiry-title-box">
                                                {{#if isSecreted}}
                                                <span class="ico ico--lock-black-16"></span>
                                                {{/if}}

                                                <span class="personal-inquiry-item__inquiry-title">
                                                    {{#if readable}} {{title}} {{else}} 비밀글입니다 {{/if}}
                                                </span>
                                            </span>
                                        </div>

                                        <span
                                            class="ico ico--chevron-down-24 {{#if isOpenInquiryDetail}}open{{/if}}"
                                            shopby-on:click="INQUIRY_DETAIL"
                                            shopby-action="INQUIRY_DETAIL"
                                        ></span>
                                    </div>

                                    {{#if isOpenInquiryDetail}}
                                    <div class="personal-inquiry-item__reply-container">
                                        {{#if readable}}
                                        <div class="personal-inquiry-item__reply">
                                            <strong class="reply-icon reply-icon--question">Q</strong>
                                            <div class="personal-inquiry-item__reply-content">{{content}}</div>
                                        </div>
                                        {{/if}}

                                        <!-- 답변 -->
                                        {{#each answers}}
                                        <div class="personal-inquiry-item__reply">
                                            <strong class="reply-icon reply-icon--answer">A</strong>
                                            <div class="personal-inquiry-item__reply-box">
                                                <div class="personal-inquiry-item__reply-content">{{content}}</div>
                                                <div class="personal-inquiry-item__reply-writer">
                                                    <span class="font-noto personal-inquiry-item__reply-writer-name">{{nickName}}</span>
                                                    <span class="font-montserrat personal-inquiry-item__reply-writer-date">
                                                        {{formatUseByDate registerYmdt}}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        {{/each}}
                                    </div>
                                    {{/if}}
                                </div>
                            </div>

                            <div class="personal-inquiry__detail-btn-group" shopby-inquiry-no="{{inquiryDetail.inquiryNo}}">
                                <div>
                                    {{#if myInquiry}}
                                    <button
                                        class="btn btn--line-gray btn--md personal-inquiry__modify-btn"
                                        shopby-action="INQUIRY_MODIFY"
                                        shopby-inquiry-no="{{inquiryNo}}"
                                    >
                                        수정
                                    </button>
                                    {{/if}} {{#if canModify}}
                                    <button
                                        class="btn btn--line-gray btn--md personal-inquiry__modify-btn"
                                        shopby-action="INQUIRY_DELETE"
                                        shopby-inquiry-no="{{inquiryNo}}"
                                    >
                                        삭제
                                    </button>
                                    {{/if}}
                                </div>
                            </div>
                        </div>
                        {{/each}}
                        <!--  -->
                    </div>
                </div>
            </product-detail-inquiry-list>
        </div>

        <!-- 배송/교환/반품 -->
        <shipping-claim shopby-tab-element="SHIPPING_CLAIM">
            <div class="shipping-claim l-content">
                <div class="shipping-claim-info" slot="guide">
                    {{#if guide.freight}}
                    <details class="accordion" open>
                        <summary class="section-title accordion__title">배송안내</summary>
                        <div>{{safeString guide.freight}}</div>
                    </details>
                    {{/if}} {{#if guide.exchange}}
                    <details class="accordion" open>
                        <summary class="section-title accordion__title">교환 및 반품안내</summary>
                        <div>{{safeString guide.exchange}}</div>
                    </details>
                    {{/if}} {{#if guide.afterService}}
                    <details class="accordion" open>
                        <summary class="section-title accordion__title">AS 안내</summary>
                        <div>{{safeString guide.afterService}}</div>
                    </details>
                    {{/if}} {{#if guide.refund}}
                    <details class="accordion" open>
                        <summary class="section-title accordion__title">환불 안내</summary>
                        <div>{{safeString guide.refund}}</div>
                    </details>
                    {{/if}}
                </div>
            </div>
        </shipping-claim>
        <!--  -->

        <!-- 관련상품 -->
        <div class="product-content__box">
            <related-product product-no:query="productNo">
                <section class="product-list-items">
                    <div class="thumb-SWIPER" slot="relatedProducts">
                        {{#if relatedProducts}}
                        <h2>관련 상품</h2>
                        <div class="swiper swiper-initialized swiper-horizontal swiper-ios swiper-backface-hidden" shopby-slider-id="related-product__slider">
                            <div class="swiper-wrapper">
                                {{#each relatedProducts}}
                                <div class="swiper-slide">
                                    <div class="thumb-item">
                                        <!-- 상품 썸네일 박스 -->
                                        <div class="thumb-item__media">
                                            <!-- 상품이미지 -->
                                            <a class="thumb-item__img-box" href="?productNo={{productNo}}">
                                                <span class="thumb-item__img">
                                                    <img src="{{src}}?220x220" alt="{{alt}}" loading="lazy" />
                                                </span>
                                            </a>

                                            <!-- 좋아요 버튼 -->
                                            <button
                                                type="button"
                                                class="btn btn--default sc-like-button thumb-fab{{#if liked}} is-active{{/if}}"
                                                shopby-action="PRODUCT_LIKE"
                                                shopby-product-no="{{productNo}}"
                                            >
                                                <svg width="40" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
                                                    <path
                                                        d="M52.29 19.24c-6.382 0-10.932 3.926-12.41 6.888-1.82-3.086-8.408-8.31-14.79-6.888-7.977 1.777-12.613 11.532-5.774 21.324C25.521 49.45 34.74 56.557 39.88 61c5.319-4.443 17.728-14.216 22.16-22.213 5.596-10.097-1.773-19.547-9.75-19.547Z"
                                                        stroke="var(--color-point)"
                                                        stroke-linejoin="round"
                                                        shopby-action="PRODUCT_LIKE"
                                                    ></path>
                                                </svg>
                                            </button>

                                            {{#if isSoldOut}}
                                            <div class="thumb-item__overlay">SOLD OUT</div>
                                            {{/if}}
                                        </div>

                                        <div class="thumb-item__info">
                                            <p class="product-thumb-title">{{productName}}</p>

                                            <div class="product-thumb-price-info">
                                                <em class="product-thumb-price">{{convertToKoreanCurrency discountedPrice}}</em>
                                                <span class="product-thumb-unit">원</span>
                                            </div>

                                            <div class="thumb-item__icon-box">
                                                {{#each stickers}} {{#ifEq type 'TEXT'}}
                                                <span>{{safeString label}}</span>
                                                {{else}}
                                                <img src="{{label}}" alt="{{name}}아이콘" />
                                                {{/ifEq}} {{/each}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {{/each}}
                            </div>
                        </div>
                        {{/if}}
                    </div>
                </section>
            </related-product>
        </div>
    </section>
</div>

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

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

속성

사용 가능 변수

RelatedProduct 타입

사용 가능 변수

Status 타입

Coupon 타입

PurchaseQuantityLimited 타입

Summary 타입

Freight 타입

Accumulation 타입

BaseInfo 타입

ShippingInfo 타입

ShippingConfig 타입

AccumulationConfig 타입

DiscountPriceStatus 타입

사용 가능 변수

OptionImage 타입

Content 타입

DutyInfo 타입

BaseInfo 타입

DutyInfoContent 타입

Certifications 타입

PartnerNotice 타입

사용 가능 변수

Banner 타입

DisplayValue 타입

속성

사용 가능 변수

ReviewInfo 타입

사용 가능 변수

속성

사용 가능 변수

Inquiry 타입

Pagination 타입

Page 타입

사용 가능 변수

BoardConfig 타입

사용 가능 변수

BoardConfig 타입

PhotoCollection 타입

속성

사용 가능 변수

BoardConfig 타입

PhotoCollection 타입

ReviewInfo 타입

Review 타입

Pagination 타입

Page 타입

사용 가능 변수

속성

사용 가능 변수

RelatedProduct 타입

사용 가능 변수

Guide 타입