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 (폼 관리)특별 고려사항:- 실시간 데이터 업데이트- 수정 권한 확인- 변경사항 저장 확인- 실행 이력 실시간 모니터링
기존 FlowDetailsScreen 컴포넌트를 업데이트하여 요청하신 모든 기능을 포함하고, 탭 기반 레이아웃으로 재구성하겠습니다. 또한, Flow 인터페이스에 createdAt 및 updatedAt 필드를 추가하고, 버전 및 실행 이력에 대한 목업 데이터를 포함할 것입니다. 폼 관리를 위해 react-hook-form을 사용합니다.
이제 플로우 상세 화면은 기본 정보, 구성 정보, 버전 목록, 실행 이력을 탭으로 구분하여 표시하며, 플로우 설명은 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 (폼 관리)특별 고려사항:- 버전 간 차이점 시각화- 롤백 시 확인 다이얼로그- 실시간 통계 업데이트- 유효기간 충돌 검증- 버전별 실행 이력 조회
요청하신 SBP 과금 시스템의 플로우 버전 관리 화면을 React로 구현하겠습니다. 이 화면은 버전 목록 조회, 새 버전 생성, 활성화/비활성화, 유효기간 설정, 롤백/복원, 버전별 실행 통계 기능을 포함합니다. react-hook-form과 zod를 사용하여 폼 관리를 처리하고, 통계 차트를 위해 recharts를 사용합니다.
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 연결- 실행 상태 시각화- 오류 처리 및 복구- 대용량 로그 처리- 성능 최적화