결재 방식을 innate 와 chellenge를 나누는 방식으로 수정을 진행 chellenge 결제 모듈을 dialog 형식으로 뜰 수 있도록 수정 data 넘겨주는 부분과 lifecycle 관련 하여 수정 중

payment api 보내고 Data 받아옴 ⇒ 주문서 생성 api 실행 ⇒ 결제 모듈 실행 의 결제 흐름은 그대로 두고 차이가 나는 부분은 props로 받아서 함수가 실행되어야 하는 흐름에 맞춰서 넣는 식으로 해결을 해보려고 했지만 똑같은 역할을 하는 함수에서 하나는 값을 return을 해버리고 하나는 값을 store에 저장을 해버리고 또 api의 res값을 받아와서 사용해야 하는데 innate에서는 사용을 하지 않고 이런 부분들은 하나로 합칠 수가 없다고 생각이 들어서 innate는 그대로 두고 chellenge만 수정을 하였다. 이 문제를 해결하기 위해서는 현재 innate와 chellenge 결제 관련 api와 db가 나뉘어져 있는것으로 하는데 이걸 하나로 묶고 하나의 store에서 판매를 하는 ..

어제에 이어서 결제 방식을 수정하는 작업을 진행했다. 현재 사이트에서 사용하는 결제 form이 두가지라서 이것을 우선 하나로 합쳐주는 작업을 계속해서 진행 중인데 이 부분이 쉽게 해결이 되고 있지 않다.

현제 우리 사이트의 결제 방식은 결제하기 버튼을 누르면 페이지가 이동이 되고 결제 모듈이 뜨는 방식이다. 현제 결재 기능에 간편결제 기능을 추가하려고 하기 때문에 결제하기를 클릭할 시 페이지 이동이 없고 dialog로 바로 뜨도록 만드는 방식으로 바꾸려고 한다. 간편 결제 값을 내려주기도 편하고 사용자 입장에서도 페이지가 왔다갔다 하는것 보다는 이 방법이 더 편할것 같다는 생각이 들었다. 결제 페이지를 들어가면 getInitialProps 함수에서 form 입력값이 전부 입력이 되어 있는지 확인하고 결제 정보를 store 에서 가져온다. 페이지가 로드 되고나서 주문을 생성 하는 api를 보내고 setState를 통해서 response 값의 id 값을 넘겨준다. 그리고 값들을 정리를 해서 결제 모듈로 넘겨..

DropDown Component를 만들었고 props로 아래와 같은 인자를 받도록 만들었다. interface Props { items: Option[]; color?: string; onSelectlist?: (key: string) => void; } const DropDown: FunctionComponent = ({ items, color, selectlist, }) => { const selectedItem = find(listItems, { selected: true }); const changeKey = () => { ... if (selectedItem && selectlist) { onSelectlist(selectedItem.key as T); } ... } .... } export ..

이전에 getServerSideprops, getStaticProps 에 대해서 간단하게 정리한 글이 있었지만 그때는 완벽하게 이해는 하지 못 했다. 오늘 다시 이 메소드들을 살펴 보면서 이해한 부분들에 대해서 적어보려고 한다. getIntialprops는 next 9 버전 부터 사용을 권장하지 않지만 getServerSideprops와의 차이점을 설명하기 위해 넣어보았다. 우선 getIntialprops과 getServerSideprops 의 차이점에 대해서 알아보자. 두 메서드 모두 요청 마다 데이터를 가져와서 페이지를 pre-render 해야하는 경우에 사용하면 된다. 두 메서드의 차이점은 데이터 요청을 했을 경우 페이지를 새로 그리는지 아닌지에서 차이가 난다. - 첫 요청의 값 = { name: ..