Bibot Mock Payment Service

Bibot OCR 기반 자동 영수증 경비 처리 서비스와 연계되는 유틸리티 서비스 입니다.

실제 카드사와 연동한 것과 같이 가상 결제가 일어났을 때 영수증 이미지를 생성 해 주는 프로그램입니다.

주요 기능

Keycloak 기반 로그인 및 로그아웃

로직 순서도

로그인 화면

가상 카드 결제 및 가상 영수증 생성 기능

로직 순서도

가게 정보 입력

상품 추가

가상 결제 및 영수증 이미지 생성

Kafka로 전달 된 결제 정보 메시지 예시

생성 된 영수증 예시

기술 스택

Backend

• Spring Boot 3.0.6
• PostgreSQL 15
• Apache Kafka 2.13-2.8.1

Frontend

• React 18.2.0
• React-countup 6.4.2
• React-dom 18.2.0
• React-slick 0.29.0
• Recoil 0.7.7
• Typescript 5.1.3
• Next.js 13.4.4
• Next-auth 4.22.1
• Next-pwa 5.6.0
• Next-themes 0.2.1
• axios 1.4.0
• cross-env 7.0.3
• env-cmd 10.1.0
• formik 2.4.0
• uuid 9.0.0
• yup 1.2.0

Infra

후기

• Kafka를 통해 비동기적인 로직 처리를 구현하였습니다. 사실 로직의 난이도 상 굳이 비동기 처리로 할 필요도, Kafka를 통해 이벤트 기반으로 결제와 이미지 생성을 분리 할 필요는 없었습니다.
• 하지만, 두가지 로직을 분리 함으로써 부하 분산의 효과가 있다는 걸 알게 되었습니다. 결제 처리는 결제 처리대로 빠르게, 이미지 생성은 결제와는 무관하게 독자적으로 처리됩니다.
• 요청 하나의 응답 시간을 줄여줌으로써 퍼포먼스를 낼 수 있다는 것을 알게되었습니다.
• 서버사이드 이벤트를 통해 이미지를 전달 받는 방식으로 업그레이드 해볼 예정입니다!