Aurora Modules

1:1 문의

1:1문의 목록 페이지에서 노출되는 모듈입니다.

URL: /pages/my/inquiry-list.html

모듈명: inquiry-total-count원본소스

1:1 문의 총 개수 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
name	string	-	1:1 문의 설정 게시판 이름
totalCount	number	0	1:1 문의 총 개수

모듈명: inquiry-register원본소스

1:1 문의 등록 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
usesAttachment	boolean	false	1:1 문의 첨부파일 게시 허용 여부
name	string	-	1:1 문의 게시판 이름

모듈명: inquiry-list원본소스

1:1 문의 목록 모듈입니다.

속성

속성명	타입	기본값	설명
pair-key	string	-	'더보기 버튼' 또는 '페이지네이션' 연결 키
default-page-size	number	20	한 페이지당 노출 수
page-size page-size:query	number string	20 pageSize	`query string` 중 `pageSize` 값 한 페이지당 노출 수
page-number page-number:query	number string	1 pageNumber	`query string` 중 `pageNumber` 값 페이지 번호
search-type:query	ALL \| TITLE \| CONTENT	ALL (MOBILE) TITLE (PC)	`query string` 중 `searchType` 값 검색 유형
search-keyword:query	string	-	`query string`중 `searchKeyword` 값 검색어
uses-pagination	boolean	false	'페이지네이션' 사용 여부
uses-more-button	boolean	false	'더보기 버튼' 사용 여부

사용 가능 변수

변수명	타입	기본값	설명
inquiry	Inquiry	-	1:1 문의 내역 조회 API 응답과 동일 (아래 타입 참조)

Inquiry 타입

속성명	타입	기본값	설명
totalCount	number	0	1:1 문의 총 개수
items	Items[]	[]	1:1 문의 목록 (아래 타입 참조)

Items 타입

속성명	타입	기본값	설명
answerEmailSend	boolean	false	답변 등록시 메일 수신 여부 (false: 수신 안함, true: 수신함)
answerSmsSend	boolean	false	답변 등록시 SMS 수신 여부 (false: 수신 안함, true: 수신함)
inquiryStatus	ISSUED \| IN_PROGRESS \| ANSWERED	ISSUED	답변 상태
orderNo	string	-	주문번호
issuerName	string	-	1:1 문의자 이름
productName	string	-	상품명
registerYmdt	string	-	등록일
inquiryTitle	string	-	문의 제목
inquiryContent	string	-	문의 내용
imageUrls	string[]	[]	이미지 url
originalImageUrls	string[]	[]	원본 이미지 url
productNo	number	-	상품번호
inquiryNo	number	-	1:1문의 번호
registerNo	number	-	등록인 번호
answer	Answer	-	1:1문의 답변 (아래 타입 참조)
inquiryType	InquiryType	-	1:1문의 유형 (아래 타입 참조)

InquiryType 타입

속성명	타입	기본값	설명
inquiryTypeName	sting	-	1:1문의 유형 이름
inquiryTypeDescription	sting	-	1:1문의 유형 설명
inquiryTypeNo	number	-	1:1문의 유형 번호

Answer 타입

속성명	타입	기본값	설명
answerRegisterYmdt	sting	-	답변 일자
answerContent	sting	-	답변 내용
answerNo	number	-	답변 번호

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<main class="l-my-page">
    <div class="my-page-box">
        <div class="right-box">
            <div class="right-box__container">
                <p class="right-box__head">
                    <span class="font-noto right-box__title">1:1문의 관리</span>
                </p>
                <!-- 검색 영역 -->
                <search-field shopby-module-key="inquiry-list-search-field">
                    <span class="search-field">
                        <span class="select select--md search-field__select-box">
                            <select shopby-on:change="CHANGE_SEARCH_TYPE">
                                <option value="TITLE">제목</option>
                                <option value="CONTENT">내용</option>
                            </select>
                        </span>
                        <span class="search-field__input">
                            <span class="input-field input-field--md">
                                <input
                                    type="text"
                                    value="{{keyword}}"
                                    placeholder="검색어를 입력해주세요."
                                    shopby-on:change="CHANGE_SEARCH_FIELD_KEYWORD"
                                    shopby-on:keydown="KEYPRESS_SEARCH_FIELD_KEYWORD"
                                />
                            </span>
                            <button type="button" class="search-field__search-btn" shopby-on:click="SEARCH">
                                <span class="ico ico--magnet-black-24"></span>
                            </button>
                        </span>
                    </span>
                </search-field>

                <summary class="l-title l-title__align-end right-box__no-end-line">
                    <inquiry-total-count>
                        <span class="my-page__count">
                            총
                            <span class="highlight" slot="totalCount">{{totalCount}}</span>
                            건
                        </span>
                    </inquiry-total-count>

                    <inquiry-register>
                        <div>
                            <button
                                type="button"
                                class="btn btn--fill-point btn--sm"
                                slot="name"
                                shopby-action="REGISTER"
                                shopby-inquiry-board-name="{{name}}"
                                shopby-uses-attachment="{{usesAttachment}}"
                            >
                                1:1문의 등록
                            </button>
                        </div>
                    </inquiry-register>
                </summary>

                <inquiry-list
                    pair-key="PAGINATION_1"
                    default-page-size="20"
                    page-size:query="pageSize"
                    page-number:query="pageNumber"
                    search-type:query="searchType"
                    search-keyword:query="searchKeyword"
                    uses-pagination
                >
                        <div class="personal-inquiry__list">
                            <div class='right-box__table' slot='inquiry'>
                                <table class='l-table'>
                                    <colgroup>
                                        <!-- 번호 -->
                                        <col width='10%' />
                                        <!--문의유형 -->
                                        <col width='15%' />
                                        <!-- 제목-->
                                        <col />
                                        <!-- 관리 -->
                                        <col width='20%' />
                                    </colgroup>
                                    <thead>
                                        <tr>
                                            <th>번호</th>
                                            <th>문의유형</th>
                                            <th>제목</th>
                                            <th>관리</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{#each inquiry.items}}
                                            <tr>
                                                <td>{{listIndex @index ../pageNumber ../pageSize}}</td>
                                                <td>
                                                    <p class='inquiry-item__type'>{{inquiryTypeInformation.name}}</p>
                                                </td>
                                                <td class="td_left">
                                                        <a class="inquiry-item__product-info" href="/pages/my/inquiry-detail.html?inquiryNo={{inquiryNo}}&boardIdx={{listIndex @index ../pageNumber ../pageSize}}">
                                                            {{#if ../inquiryConfiguration.usesAttachment}}
                                                            <div class='thumb-item__media'>
                                                                <span class='thumb-item__img'>
                                                                    {{img (getFirstImageWithDefault imageUrls) 80 80 productName 'middle' ''}}
                                                                </span>
                                                            </div>
                                                            {{/if}}
                                                            <span class='font-noto inquiry-item__title'>
                                                                <span class="ico ico--lock-black-16"></span>
                                                                {{inquiryTitle}}
                                                            </span>
                                                        </a>
                                                 </td>
                                                <td>
                                                    <div class="inquiry-item__top-writer">
                                                        <span class="font-noto bold">{{maskingName issuerName}}</span>
                                                        <span class='inquiry-item__date'>{{formatUseByDate registerYmdt}}</p>
                                                    </div>

                                                    {{#ifEq inquiryStatus 'ANSWERED'}}
                                                        <span class='badge badge--line-dark'>답변완료</span>
                                                    {{else}}
                                                        <span class='badge badge--line-point'>답변대기</span>
                                                    {{/ifEq}}
                                                </td>
                                            </tr>
                                        {{/each}}
                                    </tbody>
                                </table>
                                <div slot="totalCount">
                                    {{#ifEq inquiry.totalCount 0 }}
                                    <div slot="isLoading">
                                        {{#if isLoading}}
                                        <div class="loader loader--lg loader--full">
                                                <span class="spinner"></span>
                                        </div>
                                        {{else}}
                                        <div class='notice empty-list'>
                                            <div class='notice notice--full'>
                                                <span class='sprite-image notice--warning'></span>
                                                <em class='notice__description--center'>
                                                    게시글이 존재하지 않습니다.
                                                </em>
                                            </div>
                                        </div>
                                        {{/if}}
                                    </div>
                                    {{/ifEq}}
                                </div>
                            </div>
                        </div>
                </inquiry-list>
            </div>
        </div>
    </div>
</main>

<main class="l-content">
    <search-field shopby-module-key="inquiry-list-search-field">
        <span class="search-field">
            <span class="search-field__input">
                <span class="input-field input-field--sm search-field__text-input">
                    <input
                        type="text"
                        value="{{keyword}}"
                        placeholder="검색어를 입력해주세요."
                        shopby-on:change="CHANGE_SEARCH_FIELD_KEYWORD"
                        shopby-on:keydown="KEYPRESS_SEARCH_FIELD_KEYWORD"
                    />
                </span>
                <button type="button" class="search-field__search-btn" shopby-on:click="SEARCH">
                    <span class="ico ico--magnet-black-24"></span>
                </button>
            </span>
        </span>
    </search-field>

    <div class="personal-inquiry-list">
        <summary class="l-title l-title__align-end personal-inquiry-list__summary">
            <inquiry-total-count>
                <span class="my-page__total-count">
                    <span class="my-page__name" slot="name">
                        <span class="personal-inquiry-list__summary-name">{{name}}</span>
                    </span>
                    <span class="my-page__count personal-inquiry__summary-total-count">
                        <span slot="totalCount">{{totalCount}}</span>
                        건
                    </span>
                </span>
            </inquiry-total-count>
            <inquiry-register>
                <div>
                    <div slot="usesAttachment">
                        <button type="button" class="btn btn--fill-point btn--sm" shopby-action="REGISTER" shopby-uses-attachment="{{usesAttachment}}">
                            1:1문의 등록
                        </button>
                    </div>
                </div>
            </inquiry-register>
        </summary>

        <inquiry-list
            pair-key="INQUIRY_MORE_VIEW_BUTTON"
            default-page-size="20"
            page-size:query="pageSize"
            page-number:query="pageNumber"
            search-type:query="searchType"
            search-keyword:query="searchKeyword"
            uses-more-button
        >
            <div>
                <div slot="inquiry">
                    {{#each inquiry.items}}
                    <div class="inquiry-item" shopby-skin-inquiry-item="shopby-skin-inquiry-item">
                        <div class="inquiry-item__top">
                            {{#ifEq inquiryStatus 'ANSWERED'}}
                            <span class="badge badge--line-dark">답변완료</span>
                            {{else}}
                            <span class="badge badge--line-point">답변대기</span>
                            {{/ifEq}}
                            <div class="inquiry-item__top-writer">
                                <span class="font-noto bold">{{maskingName issuerName}}</span>
                                <span class="inquiry-item__date">{{formatUseByDate registerYmdt}}</span>
                            </div>
                        </div>
                        <a class="inquiry-item__bottom" href="/pages/my/inquiry-detail.html?inquiryNo={{inquiryNo}}">
                            {{img displayImages.src 80 80 displayImages.name '' ''}}
                            <div class="inquiry-item__inquiry-info">
                                <p class="inquiry-item__inquiry-type">문의유형 - {{inquiryTypeInformation.name}}</p>
                                <p class="inquiry-item__inquiry-info-title">
                                    <span class="ico ico--lock-black-16"></span>
                                    <span class="font-noto inquiry-item__title">{{inquiryTitle}}</span>
                                </p>
                            </div>
                        </a>
                    </div>
                    {{else}}
                    <div class="notice notice--full">
                        <span class="sprite-image notice--warning"></span>
                        <em>게시글이 존재하지 않습니다.</em>
                    </div>
                    {{/each}}
                </div>
            </div>
        </inquiry-list>

        <more-view-button pair-key="INQUIRY_MORE_VIEW_BUTTON">
            <div>
                <div slot="hasMoreViewButton">
                    {{#if hasMoreViewButton}}
                    <button class="btn btn--line-gray btn--lg-wide" shopby-on:click="MORE_VIEW_BUTTON_CLICK">더보기</button>
                    {{/if}}
                </div>
            </div>
        </more-view-button>
    </div>
</main>

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