이와 같이 PostNewPage.tsx에서 useFunnel을 통해 스텝들을 관리하고 있었다.
[소동]에서 한 방식은 한 페이지에서 퍼널을 적용하여 스텝들을 움직였다. 이 방식의 치명적인 단점은 브라우저 뒤로가기의 역할을 수행시 히스토리가 바로 /home으로 간다는 단점이 있다. ****
→ 즉, 사용자가 이전 단계의 정보를 고치려고 브라우저 뒤로가기를 누른다면 홈으로 가게 된다.
왜냐 /post-new 에서 이 스텝들이 내부적으로 갈아 끼워지는 형식으로 진행되기 때문에 당연히 브라우저 뒤로가기 버튼은 홈으로 가게 된다. 이를 보완하기 위해 이번에 스텝마다 파라미터를 지정해 라우팅 시켜주었다.
그리고 이제 useFunnel hook을 통해 페이지내 스텝들을 관리하였다.
먼저 가장 큰 차이는 파라미터를 추가해야된다는 점이다. 현재 위치의 URL에서 쿼리 문자열을 읽고 수정하는 데 사용하기 위해 react-router-dom의 useSearchParams 기능을 이용했다.
아래와 같이 현재 location을 받아온다. 그러면 이제 다음과 같이 주소가 바뀌는 것을 확인할 수 있다. 브라우저 히스토리에도 남아 이전 버튼 또한 잘 작동하게 된다.
그리고 다음 스텝을 위해서 옆에 사진과 같이 컴포넌트에 다음 위치를 전달해주어 다음버튼을 실행시키게 한다.
