@use-funnel 개발기 #2: 기존 라이브러리를 어떻게 뜯어 고칠 것인가?

기존 퍼널 라이브러리는 Next.js 의존성, 단계별 상태 검증의 부재, 이전 단계 상태를 활용하기 어려운 점 때문에 다양한 라우터와 UI 요구를 수용하기 힘들었다. 이를 해결하기 위해 핵심 로직을 `@use-funnel/core`로 분리하고, 라우터별 패키지가 `createUseFunnel`에 구현을 주입하는 구조로 바꿨다. 단계별 상태는 TypeScript 제네릭과 구별된 유니온으로 표현하고, 상태 타입 비교를 통해 다음 단계에 필요한 데이터가 빠지면 타입 오류가 나도록 했다. 또 `Render.overlay`와 `Render.with`를 제공해 이전 화면을 유지하는 오버레이와 조건별 전환을 지원하며, 공통 로직과 확장 인터페이스를 분리하는 설계의 중요성을 보여준다.

• 라우터별 구현과 퍼널 핵심 로직을 분리하면 Next.js에 종속되지 않는 라이브러리를 만들 수 있다.
• 단계별 상태를 제네릭으로 선언하고 구별된 유니온을 활용하면 단계 전환과 데이터 전달을 컴파일 시점에 검증할 수 있다.
• 기존 단계의 상태를 유지해야 하는 오버레이 UI는 렌더링할 단계를 배열로 관리해 구현할 수 있다.
• 복잡한 퍼널에서는 이벤트와 화면 렌더링을 분리해 전환 규칙의 응집도를 높일 수 있다.