SBP 과금 시스템의 플로우 상세 화면을 React로 수정해주세요.화면 정보:- 화면ID: FLOW_DETAIL_SCREEN- 화면명: 플로우 상세- 개발난이도: 보통- 개발기간: 5일주요 기능:1. 플로우 기본 정보 조회2. 플로우 설명/메타데이터 수정3. 플로우 구성 정보 조회4. 플로우 버전 목록 조회5. 플로우 실행 이력 조회UI 구성요소:- 상단: 플로우 기본 정보 섹션- 중앙: 탭 기반 레이아웃 - 탭1: 기본 정보 (수정 가능) - 탭2: 구성 정보 (읽기 전용) - 탭3: 버전 목록 - 탭4: 실행 이력- 하단: 액션 버튼 (수정, 버전관리, 시뮬레이션)기본 정보 섹션:- 플로우 ID- 플로우 이름- 플로우 설명 (편집 가능)- 활성화 상태- 생성일시- 수정일시버전 목록 테이블:- 버전 ID- 버전 번호- 버전 설명- 활성화 상태- 유효기간- 생성일시실행 이력 테이블:- 실행 ID- 실행 상태- 실행 시간- 총 과금 금액- 오류 메시지- 실행일시연동 API:- GET /api/flows/{id} (상세조회)- PUT /api/flows/{id} (수정)- GET /api/flows/{id}/versions (버전목록)- GET /api/flows/{id}/executions (실행이력)기술 스택:- React 18+- TypeScript- Material-UI 또는 Ant Design- Axios (API 연동)- React Query (상태관리)- React Hook Form (폼 관리)특별 고려사항:- 실시간 데이터 업데이트- 수정 권한 확인- 변경사항 저장 확인- 실행 이력 실시간 모니터링

Flow Version Management 화면을 React로 생성해주세요.화면 정보:- 화면ID: FLOW_VERSION_SCREEN- 화면명: 플로우 버전 관리- 개발난이도: 복잡- 개발기간: 10일주요 기능:1. 버전 목록 조회2. 새 버전 생성3. 버전 활성화/비활성화4. 버전 유효기간 설정5. 버전 롤백/복원6. 버전별 실행 통계UI 구성요소:- 상단: 플로우 정보 및 새 버전 생성 버튼- 중앙: 버전 목록 테이블- 하단: 페이지네이션 및 통계버전 목록 테이블:- 버전 ID- 버전 번호- 버전 설명- 활성화 상태- 유효기간 (시작일-종료일)- 생성일시- 액션 버튼 (활성화/비활성화, 롤백, 복원, 통계)버전 상세 모달:- 버전 기본 정보- 구성 변경 사항- 실행 통계- 롤백/복원 옵션통계 정보:- 총 실행 횟수- 성공/실패 비율- 평균 실행 시간- 오류 발생률- 최근 실행 일시연동 API:- GET /api/flows/{id}/versions (버전목록)- POST /api/flows/{id}/versions (버전생성)- PUT /api/versions/{id}/status (상태변경)- PUT /api/versions/{id}/period (유효기간설정)- POST /api/versions/{id}/rollback (롤백)- GET /api/versions/{id}/statistics (통계)기술 스택:- React 18+- TypeScript- Material-UI 또는 Ant Design- Recharts (통계 차트)- Axios (API 연동)- React Query (상태관리)- React Hook Form (폼 관리)특별 고려사항:- 버전 간 차이점 시각화- 롤백 시 확인 다이얼로그- 실시간 통계 업데이트- 유효기간 충돌 검증- 버전별 실행 이력 조회

Flow Simulation 화면을 React로 생성해주세요.화면 정보:- 화면ID: FLOW_SIMULATION_SCREEN- 화면명: 플로우 시뮬레이션- 개발난이도: 매우복잡- 개발기간: 12일주요 기능:1. 테스트 데이터 입력2. 플로우 실행 시뮬레이션3. 실시간 실행 상태 모니터링4. 실행 결과 상세 조회5. 실행 로그 확인6. 결과 다운로드UI 구성요소:- 좌측: 테스트 데이터 입력 패널- 중앙: 실시간 실행 모니터링 영역- 우측: 실행 결과 및 로그 패널- 하단: 액션 버튼 (시작, 중지, 재시작, 다운로드)테스트 데이터 입력:- 고객 정보 입력- 과금 데이터 입력- 설정값 입력- 데이터 검증실시간 모니터링:- 플로우 실행 진행률- 현재 실행 중인 스텝- 실행 시간 표시- 오류 발생 시 알림실행 결과 표시:- 최종 과금 금액- 스텝별 실행 결과- 오류 발생 지점- 성능 지표로그 확인:- 실시간 로그 스트리밍- 로그 레벨별 필터링- 로그 검색 기능- 로그 다운로드연동 API:- POST /api/flows/{id}/simulate (시뮬레이션)- GET /api/simulations/{id}/status (실행상태)- GET /api/simulations/{id}/result (실행결과)- GET /api/simulations/{id}/logs (실행로그)- GET /api/simulations/{id}/download (결과다운로드)기술 스택:- React 18+- TypeScript- Material-UI 또는 Ant Design- Socket.io (실시간 통신)- Recharts (진행률 차트)- Axios (API 연동)- React Query (상태관리)특별 고려사항:- 실시간 WebSocket 연결- 실행 상태 시각화- 오류 처리 및 복구- 대용량 로그 처리- 성능 최적화