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

// applicant.tsx (신청자 정보 페이지)
if (신청자 === 대표자 && 사업자형태 === 개인사업자) {
  router.push(결제수단_페이지)
} else if (신청자 === 대리인) {
  router.push(위임정보_페이지)
} else {
  // ... 더 많은 분기들
}

// FileScanner: glob 패턴으로 페이지 파일 탐색
const files = await glob('src/pages/funnel/**/*.tsx', {
  ignore: ['**/components/**', '**/hooks/**', '**/_*.tsx'],
});

// index.tsx, universal.tsx만 필터링
return files.filter(file =>
  ['index.tsx', 'universal.tsx'].includes(path.basename(file))
);

// 첫 번째 시도: 너무 단순함
{ from: 'applicant', to: 'pay-method' }

interface NavigationEdge {
  from: string;           // 출발 페이지
  to: string;             // 도착지 (상수 또는 URL)
  method: 'push' | 'replace';  // 브라우저 히스토리 처리 방식
  condition?: string;     // 이 Navigation이 실행되는 조건
  queryParams?: Record<string, string>;  // 전달되는 쿼리 파라미터
  lineNumber: number;     // 코드에서의 정확한 위치
  sourceType: 'page' | 'hook';  // 페이지에서 직접 호출 vs 훅에서 호출
  hookName?: string;      // 훅에서 호출된 경우 훅 이름
}

// NavigationExtractor: AST에서 Navigation 호출 탐색
extractFromFile(filePath: string, pageName: string): NavigationEdge[] {
  const sourceFile = this.project.addSourceFileAtPath(filePath);
  const edges: NavigationEdge[] = [];

  // 모든 함수 호출을 순회
  const callExpressions = sourceFile.getDescendantsOfKind(SyntaxKind.CallExpression);

  for (const call of callExpressions) {
    // router.push(), router.replace() 패턴 감지
    if (this.isRouterNavigation(call)) {
      const edge = this.extractEdge(call, pageName);
      if (edge) edges.push(edge);
    }
  }

  return edges;
}

// 조건문 추출 로직
private extractCondition(node: Node): string | undefined {
  let current = node.getParent();

  while (current) {
    if (current.isKind(SyntaxKind.IfStatement)) {
      // if문 발견! 조건식 추출
      return current.getExpression().getText();
    }
    current = current.getParent();
  }

  return undefined;  // 조건문 없이 실행되는 Navigation
}

// applicant.tsx - 페이지 컴포넌트
function ApplicantPage() {
  useBusinessLogin() // 이 훅 안에서 router.push()를 호출하면?
}

// hooks/useBusinessLogin.ts - 커스텀 훅
function useBusinessLogin() {
  const router = useRouter()

  useEffect(() => {
    router.push('/business-login-bridge') // 여기!
  }, [])
}

// HookAnalyzer: 페이지의 import 구문에서 훅 추출
extractHookImports(pageFilePath: string): HookImport[] {
  const sourceFile = this.project.addSourceFileAtPath(pageFilePath);
  const hookImports: HookImport[] = [];

  for (const importDecl of sourceFile.getImportDeclarations()) {
    const moduleSpecifier = importDecl.getModuleSpecifierValue();

    // '/hooks/' 경로에서 import하는 것만 추적
    if (moduleSpecifier.includes('/hooks/')) {
      const namedImports = importDecl.getNamedImports();

      for (const namedImport of namedImports) {
        const hookName = namedImport.getName();
        // use로 시작하는 것만 훅으로 판단
        if (hookName.startsWith('use')) {
          hookImports.push({ hookName, hookFilePath: this.resolveHookFilePath(...) });
        }
      }
    }
  }

  return hookImports;
}

// 훅 내부에 Navigation이 있는지 체크
hasNavigationCalls(hookFilePath: string): boolean {
  const sourceFile = this.project.addSourceFileAtPath(hookFilePath);

  const callExpressions = sourceFile.getDescendantsOfKind(SyntaxKind.CallExpression);
  for (const call of callExpressions) {
    if (NavigationDetector.isRouterNavigation(call)) {
      return true;
    }
  }

  return false;
}

// 추출 결과에는 출처가 함께 기록됩니다
{
  from: 'applicant',
  to: '/business-login-bridge',
  sourceType: 'hook',        // 'page'가 아닌 'hook'
  hookName: 'useBusinessLogin',
  lineNumber: 42
}

// 코드에는 이렇게 쓰여 있지만
router.push(URLS.FUNNEL.PAY_METHOD)

// 그래프에는 실제 경로가 필요합니다
'/funnel/pay-method'

// URLResolver: URL 상수 파일 파싱
async loadUrlConstants(): Promise<void> {
  const urlsFile = project.addSourceFileAtPath('src/constants/urls.ts');

  // URLS 객체 찾기
  const urlsObject = urlsFile.getVariableDeclaration('URLS');

  // 중첩 객체를 재귀적으로 순회하며 매핑 생성
  this.extractNestedObject(urlsObject, 'FUNNEL');
}

// 결과: Map<상수명, 실제경로>
// 'FUNNEL.PAY_METHOD' → '/funnel/pay-method'
// 'FUNNEL.DELEGATION_INFO' → '/funnel/delegation-info'

// 진입점: 들어오는 edge가 없고, 나가는 edge만 있는 페이지
// 이탈점: 나가는 edge가 없고, 들어오는 edge만 있는 페이지

for (const [pageName, node] of nodes) {
  if (node.incomingEdges.length === 0 && node.outgoingEdges.length > 0) {
    entryPoints.push(pageName);  // 퍼널의 시작점
  }

  if (node.outgoingEdges.length === 0 && node.incomingEdges.length > 0) {
    exitPoints.push(pageName);   // 퍼널의 끝점 (신청 완료 등)
  }
}

// MermaidGenerator: 그래프를 Mermaid 문법으로 변환
generate(graph: NavigationGraph): string {
  const lines: string[] = [];

  lines.push('```mermaid');
  lines.push('flowchart TD');

  // 노드 정의 (진입점은 둥근 모양, 이탈점은 기울어진 모양)
  for (const [pageName] of graph.nodes) {
    const shape = this.getNodeShape(pageName, graph);
    lines.push(`    ${nodeId}${shape}`);
  }

  // 엣지 정의 (조건, 쿼리 파라미터를 라벨로)
  for (const edge of graph.edges) {
    const label = this.getEdgeLabel(edge);  // 조건문, ?param=value 등
    const style = edge.method === 'replace' ? '==>' : '-->';
    lines.push(`    ${fromId} ${style}|"${label}"| ${toId}`);
  }

  lines.push('```');
  return lines.join('\\n');
}

flowchart TD
    entry([진입 페이지])
    applicant[신청자 정보]
    pay_method[결제 수단]
    delegation[위임 정보]
    review[검토]
    complete[/신청 완료/]

    entry -->|"?from=home"| applicant
    applicant -->|"신청자 === 대표자 && 사업자형태 === 개인사업자"| pay_method
    applicant -->|"신청자 === 대리인"| delegation
    pay_method --> review
    delegation --> review
    review ==>|"[replace]"| complete

    classDef entryNode fill:#e1f5ff,stroke:#0066cc,stroke-width:2px
    classDef exitNode fill:#ffe1e1,stroke:#cc0000,stroke-width:2px
    class entry entryNode
    class complete exitNode