iframe 결제시 라우팅 history 관리, 뒤로가기 구현

상황

1. iframe안에서 KCP 결제 진행
2. 같은 url path 경로에서 진행되지만 iframe에서 결제프로세싱을 진행하면 history가 쌓임
3. 뒤로가기를 눌러도 같은 주소로만 찍힐뿐 여러번 눌러야 예전페이지로 가게됨 

 

해결방안

1. nextjs에서 router기능으로 beforePopState, routeChangeStart 등을 이용하여 라우트 변화 감지에 따라 로직을 짤려고 했음

2. 하지만 뒤로가기를 눌러도 같은 페이지 path이고 트리거가 먹히지 않아 해당 메서드를 사용해도 안되었음

3. iframe속성을 찾아보고 가능한지 보았지만 실제로 되는 부분은 없음

4. history를 이용해서 스텍을 알수있다면 그걸로 컨트롤 하기로 함

5. history.length를 이용하여 iframe 안에서 결제 이동 프로세싱이 이러난후 마지막 페이지로 이동시 history.length가 그만큼 바뀌는지 테스트해봄

6. 테스트 결과 프로세싱 한만큼 스텍이 쌓이는것을 확인해서 처음 진입할때의 history.length에서 -1을 한후 (진입하기전 페이지부터 카운트해서 진입전 페이지로 보내고싶어서), 그 값을 state에 담아놓고, 결제가 완료되는 시점에서의 length를 state와 차이값을 history.go를 이용하여 원하는 만큼 뒤로갈수있게 조작하는데 이때는 state - history.length 만큼(- 마이너스 부호로 해야 뒤로감)을 하여 결제진입전 페이지로 보냄

7. 이제 뒤로가기를 누를시 예전으로 돌아왔기에 중복되는 라우트 스텍이없기 떄문에 잘 작동함

 

 

문제점

뒤로가기에 대한 처리를 위해 했지만 iframe방식 사용은 지양해야하고 완벽하게 대처하지 못하는 방법임

웹뷰이기때문에 앞으로가기에 대해 고려하진 않았으나 브라우저에서 진입시 앞으로가기에 대한 대처를 하지않았기때문에 이러한 상황이라면 적절하지 않을수있고 로직을 잘 생각해서 replace를 사용하는등 앞으로 가도 결제페이지로 가지 않게 처리해야함