강의실 모달 지옥에서 벗어나기: React useFunnel hook 설계

강의실에서는 시작 메시지, 완강 메시지, 수강평 모달, 다음 수업 안내 같은 UI와 함수가 특정 시점마다 연쇄적으로 실행된다. 기존에는 각 모달의 handleClose에서 다음 모달을 직접 호출해 강한 결합도가 생겼고, isKo, isReviewable, isFromComplete 같은 조건 분기가 컴포넌트 곳곳에 흩어져 정책 변경이 어려웠다.

예를 들어 진도율 100% 달성 후에는 수강평 모달 뒤에 추천 모달을 추가해야 했는데, 이 경우 전역 상태를 추가하고, 수강평 모달과 추천 모달 양쪽에 분기 로직을 넣어야 했다. 흐름을 다른 곳에서 다시 해석해야 하는 구조라, 모달 순서를 바꾸거나 중간에 새 모달을 끼워 넣는 일이 계속 비싸졌다.

해결책으로 Funnel 패턴을 도입해 각 화면이나 작업을 Step으로 보고 순서대로 실행하는 useFunnel hook을 설계했다. 퍼널은 startFunnel(type)으로 시작하고, 각 step은 condition, action.fire, action.cleanup, type: 'modal' | 'function'으로 정의한다.

핵심은 모달 컴포넌트가 더 이상 다음 흐름을 알 필요가 없다는 점이다.

• 모달은 닫힐 때 nextStep()만 호출한다.
• 조건 판단은 퍼널 정의 한 곳에 모인다.
• 순서는 배열 순서만 바꾸면 된다.
• type: 'function' step은 실행 직후 자동으로 다음 step으로 넘어간다.

구현은 Context로 전역 제공해 여러 컴포넌트에서 같은 퍼널 상태를 공유하게 했다. 또한 조건을 기다리기 위한 prepareCondition을 두어 API 응답 대기 같은 비동기 준비도 처리했고, 다른 퍼널을 중첩 실행하는 구조도 지원해 a1-a2-b1-a3-b2 같은 흐름을 만들 수 있게 했다.

결과적으로 모달 간 결합을 줄이고, 조건 로직을 중앙화했으며, 실행 순서를 선언적으로 읽을 수 있게 됐다. 일반적인 퍼널과 달리 사용자가 이탈하는 구조가 아니라 순차 실행 보장이 목적이어서, 더 정확한 이름은 useStepper일 수도 있지만 커뮤니티 관용에 맞춰 useFunnel을 채택했다.