시스템
기술 스택
프런트엔드: React 18+ + TypeScript + ag-grid
백엔드: Java Spring Framework + iBATIS + MariaDB
빌드/배포: Monorepo (Lerna + Yarn Workspaces)
개발환경: Windows 10/11
프로젝트명
vinci
시스템 구성
PMS: Portal & Master Data Management System (3단계 메뉴)
CRM: Customer Relationship Management System (2단계 메뉴)
WMS: Warehouse Management System (2단계 메뉴)
EDI: Electronic Data Interchange System (2단계 메뉴)
AMS: Academic Management System (2단계 메뉴)
PAI: Python AI Management System (2단계 메뉴)
프로젝트 디렉토리 구조
myfront
└── vinci/
├── packages/
│ ├── shared/ # 공통 컴포넌트 및 유틸리티
│ ├── pms/ # Portal & Master Data Management
│ ├── crm/ # Customer Relationship Management
│ ├── wms/ # Warehouse Management System
│ ├── edi/ # Electronic Data Interchange
│ ├── ams/ # Academic Management System
│ └── pai/ # Python AI Management System
├── database/
│ ├── schema/ # 데이터베이스 스키마
│ └── migrations/ # 마이그레이션 스크립트
├── lerna.json
├── package.json
└── README.md
backend
└── vinci/
├── backend/
│ ├── src/main/java/ # Java Spring 소스
│ ├── src/main/resources/ # 설정 파일 및 SQL 매핑
│ └── pom.xml # Maven 설정
각 시스템의 예제는 각 시스템에 맞는 샘플 화면과 2단계 메뉴를 구성하고 pms의 경우 3단계 메뉴로 구성합니다.
각 시스템에서 생성 된 화면은 각 메뉴를 클릭하면 이동하는 로직 만들어주세요.
상단 타이틀 영역의 좌측 영역에는 아이콘(해당 아이콘을 클릭하면 하단 좌측의 메뉴가 펼쳐지고 닫히는 동작함), 우측에는 로그인한 권한/법인, 사용자 정보 아이콘, 즐겨찾기, 채봇 아이콘이 있습니다.
로그인한 권한를 클릭하면 자신이 변경 할 수 있는 권한과 해당 권한의 법인을 선택하고 변경 할 수 있는 모달
사용자 정보 아이콘를 클릭하면 사진, 성명, 법인, 언어, 숫자 포멧, 날자 포멧 등 사용자 기본 환경 설정를 보여주고 변경 할 수 있는 모달
즐겨찾기는 현재 등록 된 즐겨찾기 메뉴 목록이 모달 보여지고 클릭하면 해당 화면으로 이동 합니다.
작업 영역은 아래와 같은 유형으로 구성되면 어느 곳에서 든 처리하는 데이터를 접근 할 수 있는 방안이 마련되어야 하고 해당 예제를 생성하고 설명해야 합니다.
작업 영역 유형 :
1) 기본 유형
상단 조회 조건 : 조건 영역을 회색 박스로 표시된다, 조건명, 입력 항목으로 쌍으로 표시되며, 조건들의 나열 된 하단 좌측에 조회 버튼 위치
하단 데이터 영역 : ag-grid 위쪽에 좌측에 타이틀과 해당 그리드의 건수 표시, 우측에 그리드 다운로드, 그리드 세팅, 필터 기능 아이콘 위치하고 해당 기능 구현되어야 한다.
2) 트리 유형
상단 조회 조건 : 조건 영역을 회색 박스로 표시된다, 조건명, 입력 항목으로 쌍으로 표시되며, 조건들의 나열 된 하단 좌측에 조회 버튼 위치
하단 좌측 영역 : ag-gird 트리의 상단 좌측에 타이틀과 해당 그리드의 건수 표시 우측에는 트리 전체 접히고 펼처지는 아이콘이 ∧,∨ 있고 기능이 구현되어야 한다.
하단 우측 영역 : ag-grid 위쪽에 좌측에 타이틀과 해당 그리드의 건수 표시, 우측에 그리드 다운로드, 그리드 세팅, 필터 기능 아이콘 위치하고 해당 기능 구현되어야 한다.
3) header-detail 유형
header 조회 조건 : 조건 영역을 회색 박스로 표시된다, 조건명, 입력 항목으로 쌍으로 표시되며, 조건들의 나열 된 하단 좌측에 조회 버튼 위치
header 데이터 영역 : ag-grid 위쪽에 좌측에 타이틀과 해당 그리드의 건수 표시, 우측에 신규, 저장, 삭제 버튼, 그리드 다운로드, 그리드 세팅, 필터 기능 아이콘 위치하고 해당 기능 구현되어야 한다.
detail 조회 조건 : 조건 영역을 회색 박스로 표시된다, 조건명, 입력 항목으로 쌍으로 표시되며, 조건들의 나열 된 하단 좌측에 조회 버튼 위치
detail 데이터 영역 : ag-grid 위쪽에 좌측에 타이틀과 해당 그리드의 건수 표시, 우측에 신규, 저장, 삭제 버튼, 그리드 다운로드, 그리드 세팅, 필터 기능 아이콘 위치하고 해당 기능 구현되어야 한다.
4) header-detail 2 유형
상단 조회 조건 : 조건 영역을 회색 박스로 표시된다, 조건명, 입력 항목으로 쌍으로 표시되며, 조건들의 나열 된 하단 좌측에 조회 버튼 위치
하단 좌측 : ag-grid 위쪽에 좌측에 타이틀과 해당 그리드의 건수 표시, 우측에 그리드 다운로드, 그리드 세팅, 필터 기능 아이콘 위치하고 해당 기능 구현되어야 한다.
하단 우측 : ag-grid 위쪽에 좌측에 타이틀과 해당 그리드의 건수 표시, 우측에 그리드 다운로드, 그리드 세팅, 필터 기능 아이콘 위치하고 해당 기능 구현되어야 한다.
5) header-detail 3 유형
상단 조회 조건 : 조건 영역을 회색 박스로 표시된다, 조건명, 입력 항목으로 쌍으로 표시되며, 조건들의 나열 된 하단 좌측에 조회 버튼 위치
하단 좌측 : ag-grid 위쪽에 좌측에 타이틀과 해당 그리드의 건수 표시, 우측에 그리드 다운로드, 그리드 세팅, 필터 기능 아이콘 위치하고 해당 기능 구현되어야 한다.
하단 우측 : ag-grid에서 선택 한 세부 항목들의 입력 값이 표시되고 상단에 저장 버튼이 있어 저장 버튼 클릭하면 저장된다.
위 환경에서 개발 하기 위한 내용을 요약해서 정리해 주고
각 단계 별 또는 영역 별로 원도우 환경에서 개발하기 위한 환경 설정 가이드 및 각각의 예제 생성 해주세요.