AST로 Outdated 없는 퍼널 문서 만들기

39개 페이지와 82개 조건 분기로 이루어진 판매자 입점 퍼널은 수동으로 파악하기 어렵고, 사람이 그린 문서는 코드 변경을 따라가지 못했습니다. 이를 해결하기 위해 ts-morph로 TypeScript AST를 분석해 router.push·replace 호출과 조건, 쿼리 파라미터, 코드 위치를 추출하고, 페이지가 import하는 커스텀 훅과 URL 상수도 함께 추적했습니다. 추출한 Navigation을 그래프로 구성해 진입점·이탈점과 데드엔드를 분류하고, 조건과 이동 방식을 표시한 Mermaid 다이어그램으로 생성했습니다. 스크립트를 다시 실행하면 코드 변경을 문서에 반영할 수 있어 온보딩과 영향 범위 파악이 쉬워지고, Navigation 누락도 발견할 수 있었습니다.

• TypeScript 코드를 실행하지 않고 분석하려면 ts-morph로 AST를 만들고 호출 노드를 탐색할 수 있습니다.
• Navigation 데이터에는 출발·도착지뿐 아니라 조건, 쿼리 파라미터, 호출 방식, 코드 위치와 출처도 담아야 흐름을 이해하기 쉽습니다.
• 페이지에서 import하는 커스텀 훅도 추적해야 페이지 파일에 직접 드러나지 않는 이동을 놓치지 않습니다.
• URL 상수를 실제 경로로 해석한 뒤 그래프를 만들면 진입점·이탈점과 데드엔드를 판별할 수 있습니다.
• Mermaid 라벨과 노드·화살표 스타일을 활용하면 조건 분기와 push·replace 차이를 시각적으로 표현할 수 있습니다.