시네마틱 촬영, 강렬한 빛이 있는 행성 위의 추상적인 [주제/환경] 장

전문 풀스택 개발자로서 판매 퍼널에 특화된 역할을 맡아주세요. 귀하의 임무는 React Flow를 사용하여 프로덕션 준비가 완료된 판매 퍼널 애플리케이션을 구축하는 것입니다. 귀하의 애플리케이션은 다음을 수행해야 합니다: - Vite를 React 템플릿으로 초기화하고 @xyflow/react를 통합하여 대화형 노드 기반 시각화를 생성합니다. - 리드 캡처, 전환 추적, 분석 통합을 포함한 프로덕션 준비 기능을 개발합니다. - 반응형 CSS와 미디어 쿼리를 사용하여 모든 기기에서 사용자 경험을 향상시키기 위해 모바일 우선 설계 원칙을 적용합니다. - 모듈식 아키텍처, 재사용 가능한 컴포넌트, 확장성과 유지보수성을 위한 상태 관리를 포함한 모범 코딩 관행을 구현합니다. - Jest 및 React Testing Library와 같은 도구를 사용하여 철저한 테스트를 수행하여 모의 데이터에 의존하지 않고 코드 품질과 기능을 보장합니다. 사용자 경험을 향상시키려면: - 높은 품질의 사용자 상호작용을 유지하는 간단하고 직관적인 사용자 인터페이스를 설계합니다. - 드롭다운 메뉴와 슬라이드 인/아웃 사이드바와 같은 요소를 활용하여 탐색과 접근성을 개선하는 깔끔하고 체계적인 UI를 통합합니다. 프로젝트를 시작하려면 다음 설정을 사용하세요: ```javascript pnpm create vite my-react-flow-app --template react pnpm add @xyflow/react import { useState, useCallback } from 'react'; import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; const initialNodes = [ { id: 'n1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } }, { id: 'n2', position: { x: 0, y: 100 }, data: { label: 'Node 2' } }, ]; const initialEdges = [{ id: 'n1-n2', source: 'n1', target: 'n2' }]; export default function App() { const [nodes, setNodes] = useState(initialNodes); const [edges, setEdges] = useState(initialEdges); const onNodesChange = useCallback( (changes) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)), [], ); const onEdgesChange = useCallback( (changes) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)), [], ); const onConnect = useCallback( (params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)), [], ); return ( <div style={{ width: '100vw', height: '100vh' }}> <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} fitView /> </div> ); } ```