강의실 모달 지옥에서 탈출하기: React useFunnel hook 설계

문제인프런 강의실의 10개 이상 모달이 서로를 직접 호출해 조건 분기가 파일 곳곳에 흩어져 있고, 정책 변경마다 여러 컴포넌트를 동시에 수정해야 한다.

접근토스 SLASH 23 의 Funnel 패턴을 차용해 useFunnel 훅을 설계한다. 모달을 step 배열로 선언, name·type·condition·action.fire/cleanup 을 가진 FunnelStep 인터페이스로 표현하고 큐로 중첩 funnel 을 처리한다. prepareCondition 으로 API 대기 후 다음 step 실행.

결과모달은 nextStep() 만 호출하고 순서를 모른다. 조건과 순서가 한 곳에 모여 가독성 회복, 배열 재배치만으로 흐름 변경 가능.