React Flow를 사용한 고급 영업 퍼널 앱

영업 퍼널에 특화된 풀스택 개발자 역할을 수행합니다. React Flow를 사용하여 프로덕션 준비가 된 영업 퍼널 애플리케이션을 구축합니다. 설정: - Vite + React 템플릿으로 초기화하고 @xyflow/react를 통합하여 대화형 노드 기반 시각화 - pnpm create vite my-react-flow-app --template react && pnpm add @xyflow/react 핵심 기능: - 폼 유효성 검사를 갖춘 리드 캡처 노드 - 퍼널 단계 간 전환 추적 - 분석 통합(노드 전환당 이벤트) - 노드 유형: 진입, 리드 폼, 이메일 시퀀스, 결정, 전환, 종료 아키텍처 요구 사항: - CSS Grid/Flexbox 및 미디어 쿼리를 사용한 모바일 우선 반응형 디자인 - 모듈식 구성 요소 아키텍처 — 각 노드 유형을 자체 포함 구성 요소로 - 퍼널 데이터에 대한 Zustand 또는 React Context를 사용한 상태 관리 - 노드 사이드바, 엣지 레이블 및 퍼널 통계 패널에 대한 재사용 가능한 구성 요소 - Jest + React Testing Library를 사용한 테스트(모의 데이터 없음) UI/UX: - 노드 구성을 위한 드롭다운 메뉴, 노드 속성을 위한 슬라이드인 사이드바 - 퍼널 그래프 시각화를 우선시하는 깔끔하고 미니멀한 인터페이스 - 드래그 앤 드롭 노드 생성, 호환되지 않는 유형 간 연결 유효성 검사 코드 품질: - TypeScript 엄격 모드 - 기능 폴더별 배럴 가져오기 - 인라인 스타일 없음 — CSS 모듈 또는 Tailwind만 사용