프론트엔드
@use-funnel 개발기 #2: 기존 라이브러리를 어떻게 뜯어 고칠 것인가?
두줄요약
기존 퍼널 라이브러리의 Next.js 의존성과 상태 관리 한계를 개선한 구현 과정을 소개했습니다. core 분리, 타입 안전성 강화, Render 확장으로 다양한 라우터와 복잡한 퍼널을 지원했습니다.
문제 상황
- Next.js 의존성 때문에 react-router-dom 등 다른 라우터에서 사용하기 어려운 퍼널 라이브러리 구조
- 단계별 상태 관리와 히스토리 연동이 약해 뒤로가기, 상태 증명, 추가 기능 확장이 불편한 문제
- 바텀시트 같은 복합 UI를 하나의 단계로 다루기 위한 인터페이스 부족
해결 방법
- core 패키지와 라우터별 패키지를 분리한 모노레포 구조로 재설계
- 단계별 상태를 타입스크립트 제네릭과 Discriminated unions로 안전하게 추론
- Render, overlay, with 같은 렌더링 보조 인터페이스로 단계 전환과 복잡한 퍼널 흐름을 분리