1. 프로젝트 기본 정보

2. 기준이 된 제안요청서 문구

3. 만들어본 배경

정부사업이나 공공 SI 프로젝트에서는 RFP를 보고 화면, DB, 권한, 상태 흐름, CRUD 범위를 초기에 추정해야 하는 경우가 많습니다. 이번에는 실제 조달청 제안요청서의 한 문구를 기준으로 APG에 프롬프트를 넣고 Vue 기반 프로토타입을 생성해봤습니다.

·         RFP 문구를 업무 요구사항으로 확장

·         Spring Boot/eGovFrame 백엔드 생성

·         Vue 프론트엔드 화면 생성

·         목록/상세/수정/분석/이력/첨부파일/공통코드/회원 화면 확인

4. 개발자 관점에서 확인한 구성

생성 결과는 단순 HTML 화면이 아니라, 업무 메뉴와 Vue 화면, 백엔드 API, Mapper, DB 스키마와 연결되는 구조를 목표로 합니다. 이번 캡처에서는 화면 위주로 확인했지만, 프로토타입 단계에서 메뉴 흐름과 CRUD 범위를 빠르게 볼 수 있다는 점이 중요했습니다.

·         재판소원 요구사항 도메인

·         공통코드 관리

·         회원 관리

·         요구사항 검토 관리

·         담당자별 분석 관리

·         처리 이력 관리

·         첨부파일 관리

·         검색 조건과 페이징

5. 이번 Vue 버전에서 확인한 포인트

React뿐 아니라 Vue에서도 같은 요구사항을 기반으로 업무 화면을 생성할 수 있는지 확인했습니다. 특히 공공 업무시스템에서 반복되는 화면 흐름이 일관되게 나오는지가 주요 검토 포인트였습니다.

·         목록 화면의 검색 조건과 페이징

·         상세/수정 화면의 기본 CRUD 흐름

·         검토/승인 화면의 처리 구조

·         처리 이력과 첨부파일 화면

·         공통코드와 회원 관리 화면

https://blog.naver.com/aiprogen/224339017072

블로그에 오시면 실제 파일을 받아서 직접 구동 시킬 수 있는 파일이 있습니다.

실제로는 아래에 보여지는 화면과 좀 다르게 보일 수 있습니다.

한번 구동해 보시고 피드백 주시면 감사하겠습니다.

이전 react 로 만든 내용을 보시려면

https://okky.kr/articles/1559859?topic=ai

이쪽에서 확인이 가능하십니다.

그림 1. 메인 화면

Vue로 생성된 업무 시스템 메인 대시보드 화면

그림 2. 재판소원 요구사항 목록

검색 조건, 목록, 페이징, 상세/수정/삭제 버튼이 포함된 요구사항 목록 화면

그림 3. 재판소원 요구사항 상세

요구사항 기본 정보와 처리 상태를 확인하는 상세 화면

그림 4. 재판소원 요구사항 등록/수정

요구사항 제목, 내용, 유형, 상태, 일정 등을 관리하는 등록/수정 화면

그림 5. 재판소원 요구사항 검토 관리

승인/반려 처리와 검토 의견을 입력할 수 있는 검토 관리 화면

그림 6. 담당자별 요구사항 분석 관리

상태별, 담당자별, 부서별 등 요구사항을 분석하는 화면

그림 7. 처리 이력 목록

상태 변경과 처리 의견을 이력으로 확인하는 목록 화면

그림 8. 처리 이력 등록/수정

이전 상태, 변경 상태, 처리자, 처리 의견을 관리하는 화면

그림 9. 첨부파일 목록

요구사항별 첨부파일 목록과 다운로드 기능 화면

그림 10. 첨부파일 등록/수정

첨부파일 정보와 실제 파일 선택 입력을 관리하는 화면

그림 11. 공통 코드 목록

공통 코드 검색, 목록, 페이징을 제공하는 화면

그림 12. 공통 코드 상세

코드 그룹, 코드 값, 코드명, 사용 여부 등을 확인하는 상세 화면

그림 13. 공통 코드 등록/수정

공통 코드 값을 등록하거나 수정하는 화면

그림 14. 회원 관리 목록

회원 목록, 권한, 승인 상태, 사용 여부를 관리하는 화면

그림 15. 회원 관리 상세

회원 기본 정보와 권한/승인 상태를 확인하는 상세 화면

그림 16. 회원 관리 등록/수정

회원 권한, 승인 상태, 사용 여부 등을 수정하는 화면