프론트엔드
29CM 주문서 결제 혜택 UX 개편기:그래서 얼마에 살 수 있는 거에요?
두줄요약
주문서 결제 혜택을 더 직관적으로 보여주도록 UX와 상태 관리 구조를 개편했습니다. 그 결과 구매전환율과 혜택 사용 비중, 결제 속도가 함께 개선되었습니다.
문제 상황
- 결제수단별 혜택은 많았지만 고객이 적용 가능 여부와 실제 할인 금액을 직관적으로 파악하기 어려움
- 마일리지와 즉시 할인, 결제수단 변경이 얽혀 주문서에서 최종 결제금액을 예측하기 어려운 구조
해결 방법
- 즉시 할인 전용 구좌를 신설해 전략적 제휴사와 최대 할인 배지를 한눈에 노출
- 도메인 모델과 뷰 모델을 분리하고, 결제수단 정렬·최대 할인 계산·실험군 분기를 훅으로 분리
- 결제수단과 즉시 할인을 양방향 연동하되 useEffect 대신 이벤트 핸들러에서 동기적으로 상태 처리
성능/운영 포인트
- 마일리지 입력마다 API 호출하지 않고 blur 방식으로 변경해 서버 부하와 UX 저하를 완화
- 할인 적용 기준을 실 결제금액으로 맞추며 재계산 로직을 조정
- 기능 배포 이후 제휴 운영과 혜택 활용 비중 확대에 기여