[TIL] 01.04 결제 방식 변경

현제 우리 사이트의 결제 방식은 결제하기 버튼을 누르면 페이지가 이동이 되고 결제 모듈이 뜨는 방식이다. 

현제 결재 기능에 간편결제 기능을 추가하려고 하기 때문에 결제하기를 클릭할 시 페이지 이동이 없고 dialog로 바로 뜨도록 만드는 방식으로 바꾸려고 한다. 간편 결제 값을 내려주기도 편하고 사용자 입장에서도 페이지가 왔다갔다 하는것 보다는 이 방법이 더 편할것 같다는 생각이 들었다. 

 

1. 결제 페이지를 들어가면 getInitialProps 함수에서 form 입력값이 전부 입력이 되어 있는지 확인하고 결제 정보를 store 에서 가져온다.
2. 페이지가 로드 되고나서 주문을 생성 하는 api를 보내고 setState를 통해서 response 값의 id 값을 넘겨준다.
3. 그리고 값들을 정리를 해서 결제 모듈로 넘겨주는 과정이 일어난다.

innate, chellenge 에서 각각 사용 되고 있는 payment compoent에서 결제 모듈로 넘겨 주는 값들이 조금 차이가 있고 지금 전체 적인 결제 구조가 흐름 상 dialog를 띄우기에는 적합하지 않은 구조이기 때문에 전체적으로 수정을 진행 해야한다. server 단에서 처리 하는 부분은 props로 내려줄 수 있도록 수정을 하고 api 부분은 button click시 실행이 되도록 해야 한다. innate, chellenge의 값이 다른 부분은 상위 컴포넌트로 빼내어서 props로 내려주도록 처리를 하고 payment component를 통일 시켜야 한다. test component를 만들어서 test 해보고 있는 중이다.