Aurora Modules

상품 문의 상세

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

URL: /pages/my/product-inquiry-detail.html?productNo={productNo}&inquiryNo={inquiryNo}&boardIdx={boardIdx}

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

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

속성

속성명	타입	기본값	설명
product-no:query	number	-	(필수)`query string` 중 `productNo` 값 상품 번호
inquiry-no:query	number	-	(필수)`query string` 중 `inquiryNo` 값 상품 문의 번호
boardIdx	number	-	`query string` 중 `boardIdx` 값 상품 문의 게시글 index 번호

사용 가능 변수

변수명	타입	기본값	설명
replied	boolean	false	답변 여부
type	PRODUCT \| DELIVERY \| CANCEL \| RETURN \| EXCHANGE \| REFUND \| OTHER	-	상품문의 타입
productInquiryDisplayType	상품 \| 배송 \| 취소 \| 반품 \| 교환 \| 환불 \| 기타	-	상품문의 타입 한글명
title	string	-	문의 제목
content	string	-	문의 내용
imageUrl	string	-	상품 이미지 url
productName	string	-	상품명
registerName	string	-	작성자 명
registerYmdt	string	-	상품문의 등록 일자
answers	Answers[]	[]	답변 내용 (아래 타입 참조)

Answers 타입

속성명	타입	기본값	설명
secreted	boolean	false	상품문의 답변 비밀글 여부
administrator	boolean	false	상품문의 답변 관리자 여부
registerYmdt	string	-	상품문의 답변 등록 일자
updateYmdt	string	-	상품문의 답변 수정 일
partnerName	string	-	상품문의 답변자 파트너인 경우, 파트너명
nickName	string	-	상품문의 답변자 닉네임
title	string	-	상품문의 답변 제목
content	string	-	상품문의 답변 내용
memberId	string	-	상품문의 답변 작성자 아이디
inquiryNo	number	-	상품문의 답변 번호

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<main class="l-my-page">
    <div class="my-page-box">
        <div class="right-box">
            <div class="right-box__container">
                <product-inquiry-detail product-no:query="productNo" inquiry-no:query="inquiryNo" board-idx:query="boardIdx">
                    <div class="product-inquiry-detail">
                        <div class="right-box__container">
                            <p class="right-box__head">
                                <span class="right-box__title">상품문의 상세</span>
                            </p>
                            <div class="right-box__table" slot="productInquiryDetail">
                                <table class="l-table">
                                    <colgroup>
                                        <!-- 번호 -->
                                        <col width="80px" />
                                        <!--문의유형 -->
                                        <col width="120px" />
                                        <!-- 제목-->
                                        <col />
                                        <!-- 관리 -->
                                        <col width="200px" />
                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <td>{{boardIdx}}</td>
                                            <td>
                                                <p class="inquiry-item__type">{{productInquiryDisplayType}}</p>
                                            </td>
                                            <td class="td_left">
                                                <div class="inquiry-item__product-info">
                                                    <div class="thumb-item__media">
                                                        <span class="thumb-item__img">{{img imageUrl 80 80 productName 'middle' ''}}</span>
                                                    </div>
                                                    <div class="inquiry-item__product-item-info">
                                                        <span class="font-noto inquiry-item__title">
                                                            {{#if secreted}}
                                                            <span class="ico ico--lock-black-16"></span>
                                                            {{/if}} {{title}}
                                                        </span>
                                                        <span class="font-noto inquiry-item__description">{{productName}}</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="inquiry-item__top-writer">
                                                    <span class="font-noto bold">{{registerName}}</span>
                                                    <span class="inquiry-item__date">{{formatUseByDate registerYmdt}}</span>
                                                </div>
                                                {{#if replied}}
                                                <span class="badge badge--line-dark inquiry-item__reply-status">답변완료</span>
                                                {{else}}
                                                <span class="badge badge--line-point inquiry-item__reply-status">답변대기</span>
                                                {{/if}}
                                            </td>
                                        </tr>
                                        <tr class="right-box__row">
                                            <td>
                                                <strong class="font-montserrat right-box__icon right-box__icon-question">Q</strong>
                                            </td>
                                            <td colspan="2" class="td_left">
                                                <div class="font-noto right-box__content">{{{content}}}</div>
                                            </td>
                                            <td></td>
                                        </tr>
                                        {{#if replied}} {{#each answers}}
                                        <tr class="right-box__row">
                                            <td>
                                                <strong class="font-montserrat right-box__icon right-box__icon-answer">A</strong>
                                            </td>
                                            <td colspan="2" class="td_left">
                                                <div class="font-noto right-box__answer">{{content}}</div>
                                            </td>
                                            <td class="right-box__answer-write-info">
                                                <span>{{nickName}}</span>
                                                <span>{{formatUseByDate registerYmdt}}</span>
                                            </td>
                                        </tr>
                                        {{/each}} {{/if}}
                                    </tbody>
                                </table>
                            </div>
                            <div class="right-box__btns" shopby-product-no="{{productNo}}" shopby-inquiry-no="{{inquiryNo}}">
                                <div>
                                    <button class="btn btn--line-gray btn--xs" shopby-action="MODIFY">수정</button>
                                    {{#unless replied}}
                                    <button class="btn btn--line-gray btn--xs" shopby-action="DELETE">삭제</button>
                                    {{/unless}}
                                </div>
                                <button class="btn btn--line-dark btn--xs" shopby-action="LIST">목록</button>
                            </div>
                        </div>
                    </div>
                </product-inquiry-detail>
            </div>
        </div>
    </div>
</main>

<main class="l-content">
    <product-inquiry-detail product-no:query="productNo" inquiry-no:query="inquiryNo">
        <div class="product-inquiry-detail">
            <div class="inquiry-item">
                <div class="inquiry-item__top">
                    {{#if replied}}
                    <span class="badge badge--line-dark">답변완료</span>
                    {{else}}
                    <span class="badge badge--line-point">답변대기</span>
                    {{/if}}
                    <div class="inquiry-item__top-writer">
                        <span class="font-noto">{{registerName}}</span>
                        <span class="inquiry-item__top-register-date">{{formatUseByDate registerYmdt}}</span>
                    </div>
                </div>
                <div class="inquiry-item__bottom">
                    {{img imageUrl 80 80 productName '' ''}}
                    <div class="inquiry-item__inquiry-info">
                        <p class="inquiry-item__inquiry-type">문의유형 - {{productInquiryDisplayType}}</p>
                        <p>
                            <span class="ico ico--lock-black-16"></span>
                            <span class="inquiry-item__inquiry-title">{{{title}}}</span>
                        </p>
                        <p class="inquiry-item__inquiry-product-name">{{productName}}</p>
                    </div>
                </div>
            </div>
            <div class="inquiry-item__reply">
                <strong class="reply-icon reply-icon--question">Q</strong>
                <div class="question-content">
                    <p>{{content}}</p>
                </div>
            </div>
            {{#if replied}} {{#each answers}}
            <div class="inquiry-item__reply">
                <strong class="reply-icon reply-icon--answer">A</strong>
                <div class="inquiry-item__top-writer">
                    <span class="font-noto bold">운영자</span>
                    <span class="inquiry-item__date">{{formatUseByDate registerYmdt}}</span>
                    <div class="reply-content">{{{content}}}</div>
                </div>
            </div>
            {{/each}} {{/if}}

            <div class="product-inquiry-detail__detail-btn-group" shopby-product-no="{{productNo}}" shopby-inquiry-no="{{inquiryNo}}">
                <div>
                    <button class="btn btn--line-gray btn--md product-inquiry-detail__modify-btn" shopby-action="MODIFY">수정</button>
                    {{#unless replied}}
                    <button class="btn btn--line-gray btn--md product-inquiry-detail__modify-btn" shopby-action="DELETE">삭제</button>
                    {{/unless}}
                </div>
                <button class="btn btn--fill-dark btn--lg product-inquiry-detail__list-btn" shopby-action="LIST">목록</button>
            </div>
        </div>
    </product-inquiry-detail>
</main>

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