안녕하세요.
셀렉트 쇼룸의 고객센터 페이지 YAML 코드입니다.
궁금한 점은 댓글이나 이메일, 1:1 문의 등으로 편하게 말씀주세요. 감사합니다.
menus:
- path: cs-center
name: 📞 고객센터
pages:
- path: cs-center
params:
- key: name
label: 이름
help: 홍길동을 입력해보세요.
- key: phone
label: 연락처
- key: order_id
label: 주문ID
help: 1을 입력해보세요.
value: 1
- key: channel_order_number
label: 판매사 주문번호
blocks:
- type: center
style:
width: calc(50% - 0.5rem - 2px)
padding-right: 1rem
# margin-right: -1rem
# border: 0
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1)
border-radius: 1rem 1rem 0 0
border: solid 1px rgba(0,0,0,0.1) !important
class: p-5
blocks:
- type: query
title: 주문내역
resource: mysql.qa
sqlType: select
sql: >
SELECT *
FROM ProductOrder
WHERE (LENGTH(:name)=0 OR order_name LIKE CONCAT('%', :name, '%'))
AND (LENGTH(:phone)=0 OR order_phone LIKE CONCAT('%', :phone, '%'))
AND (LENGTH(:order_id)=0 OR id = :order_id)
AND (LENGTH(:channel_order_number)=0 OR channel_order_number = :channel_order_number)
showDownload: false
modals:
- path: create-ticket
# mode: side
blocks:
- type: query
resource: mysql.qa
sqlType: insert
sql: >
INSERT INTO SupportTicket
SET order_id = :order_id
, channel_order_number = :channel_order_number
, request_name = :request_name
, created_at = NOW()
params:
- key: order_id
valueFromRow: id
hidden: false
disabled: true
label: 주문ID
- key: request_name
valueFromRow: order_name
hidden: false
disabled: true
label: 주문자명
- key: description
format: textarea
class: w-100
label: 이슈 내용
rows: 10
columns:
updated_at:
hidden: true
deleted_at:
hidden: true
thumbnail:
format: image
thumbnail: true
label: 상품이미지
id:
label: 주문ID
created_at:
label: 생성일
buttons:
- label: 이슈 추가
openModal: create-ticket
channel_order_number:
label: 주문번호
product_name:
label: 상품명
option_name:
label: 옵션명
price:
label: 가격
payment_status:
label: 결제상태
order_status:
label: 주문상태
shipping_info:
label: 배송지 정보
order_name:
label: 주문자명
order_phone:
label: 전화번호
formatFn: maskCenter4
- type: query
title: 고객정보
resource: mysql.qa
sqlType: select
sql: >
SELECT *
FROM CustomerProfile
WHERE (LENGTH(:name)=0 OR name LIKE CONCAT('%', :name, '%'))
AND (LENGTH(:phone)=0 OR phone LIKE CONCAT('%', :phone, '%'))
columns:
id:
label: 고객ID
name:
label: 이름
phone:
label: 연락처
formatFn: maskCenter4
address:
label: 주소
email:
label: 이메일
reserve_amount:
hidden: true
coupon_count:
hidden: true
deposit_amount:
hidden: true
status:
hidden: true
created_at:
hidden: true
updated_at:
hidden: true
deleted_at:
hidden: true
submitButton:
hidden: true
showDownload: false
- type: left
style:
# width: 500px
blocks:
- type: tab
# style:
# minHeight: 400px
tabOptions:
type: button full
autoload: 1
# style:
# minHeight: 200px
containerClass: h-60
tabs:
- name: 전체
# style:
# minHeight: 400px
blocks:
- type: query
resource: mysql.qa
sqlType: select
sql: >
SELECT id, created_at, support_channel, request_name, assignee, description
FROM SupportTicket
WHERE (order_id = :order_id
OR channel_order_number = :channel_order_number)
# display: card
showDownload: false
paginationOptions:
enabled: true
perPage: 3
columns:
id:
label: 티켓ID
created_at:
label: 생성일
support_channel:
label: 지원채널
request_name:
label: 고객명
assignee:
label: 담당자
description:
label: 이슈 내용
viewModal:
blocks:
- type: query
resource: mysql.qa
sqlType: select
sql: >
SELECT *
FROM SupportTicket
WHERE id = :id
params:
- key: id
valueFromRow: id
# display: col-1
containerClass: p-2
# thStyle:
# maxWidth: 100px !important
display: form
updateOptions:
type: query
resource: mysql.qa
sqlType: update
sql: >
UPDATE SupportTicket
SET updated_at = NOW()
, support_channel = :support_channel
, request_name = :request_name
, assignee = :assignee
, description = :description
, status = :status
WHERE id = :id
toast: OK
columns:
id:
label: 티켓ID
created_at:
label: 생성일
updated_at:
label: 수정일
deleted_at:
label: 삭제일
support_channel:
label: 지원채널
editable: true
request_name:
label: 고객명
editable: true
assignee:
label: 담당자
editable: true
description:
label: 이슈 내용
editable: true
# rows: 10
format: textarea
status:
label: 상태
editable: true
dropdown:
- 상담대기
- 진행중
- 상담완료
customer_id:
label: 고객ID
# editable: true
order_id:
label: 주문ID
# editable: true
channel_order_number:
label: 판매사 주문번호
- name: 상담대기
blocks:
- type: query
resource: mysql.qa
sqlType: select
sql: >
SELECT id, created_at, support_channel, request_name, assignee
FROM SupportTicket
WHERE (order_id = :order_id
OR channel_order_number = :channel_order_number)
AND status = '상담대기'
showDownload: false
columns:
id:
label: 티켓ID
created_at:
label: 생성일
support_channel:
label: 지원채널
request_name:
label: 고객명
assignee:
label: 담당자
- name: 진행중
blocks:
- type: query
resource: mysql.qa
sqlType: select
sql: >
SELECT id, created_at, support_channel, request_name, assignee
FROM SupportTicket
WHERE (order_id = :order_id
OR channel_order_number = :channel_order_number)
AND status = '진행중'
showDownload: false
columns:
id:
label: 티켓ID
created_at:
label: 생성일
support_channel:
label: 지원채널
request_name:
label: 고객명
assignee:
label: 담당자
- name: 상담완료
blocks:
- type: query
resource: mysql.qa
sqlType: select
sql: >
SELECT id, created_at, support_channel, request_name, assignee
FROM SupportTicket
WHERE (order_id = :order_id
OR channel_order_number = :channel_order_number)
AND status = '상담완료'
showDownload: false
columns:
id:
label: 티켓ID
created_at:
label: 생성일
support_channel:
label: 지원채널
request_name:
label: 고객명
assignee:
label: 담당자
- type: markdown
style:
overflow: scroll
maxHeight: calc(100vh - 100px)
content: |
<div class="flex container" style="max-width: 840px">
<div class="bg-slate-50 text-slate-600 text-base w-100 rounded-2xl p-5 leading-7"
style="
background-image: url(https://files.umso.co/lib_bwRJlGVmETDRvOcA/ylo8umtpvuygby6e.png);
background-size: 20vh;
background-position: 97% 2%;
background-repeat: no-repeat;
padding-top: 10vh !important;
"
>
# Customer Support
주문과 배송이 완벽해도 늘 새로운 고객 문의가 찾아옵니다.
이때 고객을 이해하고 빠르고 정확한 고객지원하기위해 적절한 화면/시스템이 필요합니다.
고객정보를 실시간으로 조회하고, 상태로 분류를 하며, 여러 단계의 상세조회까지 가능합니다.
> 입력만 하는 엑셀에서 더 나아가, 셀렉트를 통해 대시보드 시각화까지 해보세요.
셀렉트를 통해 결제, 환불, 예약 관련 고객문의를 처리하는 분들이 있습니다. 화면과 팝업, 탭의 주소 URL은 슬랙(Slack)에 바로 공유 가능해요.
**포인트1.** 상담상태에 따른 문의건들을 조회합니다.
**포인트2.** 채널톡, 카카오비즈니스톡, 이메일등을 통해 들어온 문제 해결을 위해 실제 디비 처리를 실행합니다.
</div>
</div>