프론트엔드
강의실 모달 지옥에서 탈출하기: React useFunnel hook 설계
두줄요약
React useFunnel로 강의실 모달의 연쇄 호출과 조건 분기를 선언적 퍼널로 중앙화했습니다. 순차 실행과 유지보수성을 높이고 중첩 퍼널·API 대기 조건도 지원했습니다.
문제 상황
- 모달 컴포넌트가 다음 모달을 직접 호출하며 발생한 강한 결합과 분기 로직 분산
- 완강·진도율·기능 플래그·언어 조건에 따른 연쇄 UI 흐름의 변경 비용 증가
구조와 흐름
- 퍼널을
FunnelStep배열로 선언하고startFunnel(type)으로 유형별 순차 실행 시작 condition,fire, 선택적cleanup을 각 Step에 집중하고 조건 불충족 Step 자동 건너뛰기modalStep의 사용자 액션 기반 진행과functionStep의 자동 진행을nextStep()으로 통합
선택 이유
- 기존 모달 컴포넌트 위치와 플레이어 라이브러리 의존성을 유지한 Hook·Context 기반 적용
- 퍼널 정의 코드에서 모달 노출 순서와 조건을 한눈에 파악 가능한 선언적 구성
트레이드오프
- 순차 실행 보장으로 특정 Step 이동·되돌리기 요구에는 Linked List 등 다른 구조 검토 필요
- 오류 Step 추적을 위한 별도 디버깅 코드 필요성
- 중첩 퍼널의 즉시 실행·제외 Step, API 대기용
prepareCondition지원
