텐바이텐 파트너 어드민 페이지 사용이 번거로워 오픈 API를 활용하여 개발한 어드민 사이트입니다.

https://sunyoungoh.github.io/vue-tenbyten-admin/

• Vue2
• Vuex
• Chart.js
• CryptoJS

• Node.js
• express
• MogoDB atlas
• nodemailer
• CryptoJS

텐바이텐 API

텐바이텐 업체 아이디와 API키값으로 로그인 할 수 있는 로그인 페이지입니다.

• 텐바이텐 API는 별도의 인증절차가 없으므로 사용자가 입력한 아이디와 API 호출 결과의 brandid 값과 대조하여 로그인 진행
• API키값 보안을 위해 CryptoJS 로 AES256 암호화 하여 axios 요청

당월 판매 개수와 6개월치 판매 그래프를 보여주는 화면입니다.

• 네비게이션가드 사용으로 미 로그인 시 접근 불가

신규 주문 정보를 확인하는 페이지입니다.

• 신규 주문 필드별 오름차순, 내림차순 정렬

• 반응형 구현

배송 준비 중인 주문 내역을 확인하고 메일 발송 및 운송장 등록을 할 수 있는 페이지입니다.

기능

• 메일 발송 (디지털 상품 발송)
  • 수신 이메일 기준 : 1. 주문메모에 이메일 2. 사용자 이메일
    • 정규식을 활용하여 test() 이메일 여부를 검증하고 match()로 이메일만 추출하여 메일을 발송합니다.
    • 메일 발송은 백엔드에서 Nodemailer 모듈을 사용
• 운송장 등록 (상품 발송처리)
• 모든 주문 메일 발송 및 송장 한번에 등록하기
• 발송 성공한 주문내역 정보 mongoDB에 데이터 저장 (발송내역 , 판매내역 페이지에서 활용)

발송 성공	발송 실패

메일 발송을 성공한 내역을 월별로 보여주는 페이지입니다.

기능

• < > 버튼을 통한 월별 메일 발송 내역 조회
• 지난달, 이번달은 한글로 표시
• 필드별 오름차순, 내림차순 정렬 (선택된 필드 강조)
• 주문자 이름으로 내역 검색 기능
• 휴대폰 번호 클릭 시 문자앱으로 이동하여 문자 발송

월별 판매내역과 매출, 판매 순위, 탑3를 보여주는 페이지입니다.

기능

• < > 버튼을 통한 월별 판매 내역 조회
• 지난달, 이번달은 한글로 표시
• 필드별 오름차순, 내림차순 정렬 (선택된 필드 강조)
• 아이템 고유 itemId 기준으로 취합하여 탑3 통계

일주일간 등록된 고객 문의를 확인하고 답변을 달 수 있는 페이지입니다.

기능

• 미답변, 답변, 전체 문의 보기
• 답변 달기, 보기
• 미답변 문의 있을 시 헤더 탭 우측상단에 뱃지 표시

시연 영상	답변 여러 개일 때 캡쳐