파트너 대시보드에 송금·주문 통계 위젯 추가

파트너 대시보드에 송금·주문 통계 붙이기

기존 파트너 대시보드는 결제 흐름 위주로만 정보를 뿌려줬음. 그러다 보니 파트너가 송금 내역이나 주문 추이를 보려면 메뉴를 두세 번 더 타고 들어가야 했고, "한 화면에서 다 보고 싶다"는 피드백이 누적돼 있었음.

이번 작업으로 두 가지를 한 위젯 영역에 묶었음.

• 연락처 송금 통계: 일/주/월 단위 송금 건수, 금액, 보류 비율
• 주문 통계: 결제 완료 vs 취소·환불 비교, 시간대별 흐름

쿼리부터 정리함

위젯 두 개 늘렸다고 쿼리 두 개 그냥 붙이면 대시보드 첫 진입이 무거워짐. 그래서 다음 룰로 정리.

특히 보류 송금은 결제대행사 정산 주기에 따라 시점이 흔들리는데, 캐시 TTL 짧게 잡고 강제 새로고침 버튼만 한 개 둠. 무리하게 실시간 갱신 박으면 백오피스 부하만 올라감.

화면 쪽 시행착오

위젯 늘면서 모바일에서 카드가 두 줄로 깨지는 이슈가 있었음. 처음엔 그리드 컬럼만 늘렸는데, 실제 디바이스로 확인하니 세 번째 카드가 잘려서 다시 잡았음.

<!-- before: 컬럼만 키움 -->
<div class="grid-cols-3">...</div>

<!-- after: 임계값에서 카드 자체를 접음 -->
<div class="grid auto-rows-min responsive-cards">...</div>

핵심은 카드 컨테이너에 auto-rows-min을 박고, 너비 임계값에서는 송금/주문을 하나의 탭으로 접도록 한 것. 그래야 좁은 화면에서도 카드 잘림 없이 보여줌.

채팅 채널 연계

대시보드 위젯에서 보류 송금 카드를 누르면 바로 파트너 운영 채널로 문의가 열리도록 연결도 붙였음. 기존엔 별도 메뉴를 거쳐야 했는데, 한 번에 처리되니 운영팀 응답 속도가 체감상 줄었다는 피드백을 받음.

[보류 송금 카드 클릭]
   ↓
파트너 채팅 패널 열림 + 보류 건 ID 자동 첨부
   ↓
운영자 응답 (평균 대기시간 단축)

회고

• 위젯 늘릴 때는 쿼리 비용부터 본다. UI 작업이 아니라 집계 설계 작업이었음.
• 캐시 TTL은 결제대행사 정산 주기와 보조를 맞춰야 데이터가 어색해지지 않음.
• 파트너 입장에선 "한 화면에서 본다"가 곧 신뢰. 위젯 두 개 추가했을 뿐인데 문의량이 눈에 띄게 줄었음.
• 모바일 검증은 반드시 실제 디바이스에서 한다. 개발자 도구 반응형만 믿으면 늦음.

다음