[TIL] 01.12 결제 방식 변경 정리 (페이지 이동 => 다이얼로그)

오늘은 드디어 결제 방식 수정을 완료하였다. 그동안의 과정을 정리해보려고 한다. 

 

기존의 결제 방식은 아래의 그림 처럼 결제 폼에서 submit 을 실행 하면 페이지 이동이 발생하고 iamport 모듈이 뜨는 방식이였다. 

이 방식으로는 간편 결제를 추가했을 경우 처음 결제 방식을 선택하고 만약 다른 결제 방식을 선택하는 경우 페이지를 이동을 해야하고 또 결제 폼 입력을 새로해야 한다는 불편함이 있기에 방식을 수정하기로 하였다. 

 

아래와 같은 형태로 만들어서 submit이 실행이 되면 결제 모듈이 뜰수 있도록 수정작업을 진행하였다.

처음에는 기존의 결제 로직을 그대로 가져가려고 했기 때문에 꽤나 애를 먹었다. 하지만 기존의 결제 로직은 페이지 이동이 일어 났을 때의 로직이였고 지금은 한 페이지에서 흐름을 제어해야 하기때문에 약간의 수정이 필요하였다. 

 

기존의 결제 로직 순서는 아래와 같다.

1. 결제 페이지로 들어가면 <Checkout> 에서 결제 관련 데이터를 받아온다.

2. <CheckoutForm> 에서 Submit 함수를 실행 하면 setPaymentData reducer가 실행이 되고 페이지가 이동이 된다.

3. <Payment> 에서 geIinitialProps 에서 getPaymentData reducer가 실행이 되고 결제 정보가 store에 저장이 된다.

    그리고 coponentDidMount 에서 주문서를 생성하는 api가 실행을 시키고 response 값을 state에 담아준다.

    해당 state 의 값으로 url을 생성한다. 마지막으로 PaymentData 변수에 값을 정리하여 <PaymentModule> 로 넘겨준다. 

4.<PaymentModule> 에서 init 함수가 실행이 된다. 

 

위 로직에서 setPaymentData를 해주는 부분은 페이지 이동이 되기 때문에 데이터를 담아 두었다가 페이지 이동이 되면 계산된 데이터를 넘겨주려고 했던것 같다. 하지만 수정항 로직에서는 페이지 이동이 일어나지 않아 해당 데이터를 바로 사용하면 되기에 바로getPaymentData를 실행 하도록 수정하였다. 그리고 <payment> 에서 실행 되던 주문서 생성 함수를 <Checkout> 으로 옮기고 props로 <CheckoutForm>으로 내려주어 getPaymentData가 실행이 되고 난뒤에 실행이 되도록 설정을 해주었다. 

 

정리하자면 

1. <Checkout> 에서 주문서 생성 함수와 url 생성 함수를 만들어서 props로 내려준다. 

2. <CheckoutForm> 에서 Submit 함수를 실행 하면 getPaymentData reducer가 실행이 되고 결제 정보가 store에 저장이 된다.

    그리고 componentDidUpdate에서 주문서를 생성하는 함수를 실행 한다. 

3. <Payment> 에서 PaymentData 변수에 값을 정리하여 <PaymentModule> 로 넘겨주고 위 로직이 완료 되었다는 상태값을 받으면            isOpenModule state 값을 true 로 만들어 결제 모듈이 실행 되도록 만든다.

4.<PaymentModule> 에서 init 함수가 실행이 된다. 

 

innate, challenge 각각의 결제 폼을 가지고 있었는데 <Payment> 컴포넌트에서 로직의 흐름이 꽤나 차이가 나서 하나로 합치는데 힘이 들었다. 처음부터 흐름을 좀 더 제대로 파악하고 기존의 틀에 얽매이지 않았다면 좀 더 수월하게 작업을 할 수 있었을 거라는 생각이 든다.