권혁성
d4e5f62413
- system/overview.md: 전체 아키텍처 개요 - system/api-structure.md: API 구조 (220 모델, 1027 엔드포인트, 18 라우트 도메인) - system/react-structure.md: React 구조 (249 페이지, 612 컴포넌트) - system/mng-structure.md: MNG 구조 (171 컨트롤러, 436 Blade 뷰) - system/docker-setup.md: Docker 7 컨테이너 구성 - system/database/README.md + 9개 도메인 스키마 (270+ 테이블) - core, hr, sales, production, finance, boards, files, system, erp-analysis Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
143 lines
5.0 KiB
Markdown
143 lines
5.0 KiB
Markdown
# 공통 UI 컴포넌트 (슬라이드 3-13)
|
|
|
|
## 1. 화면 템플릿 (슬라이드 6)
|
|
|
|
### 1.1 모바일 화면 구조
|
|
```
|
|
┌─────────────────────────────┐
|
|
│ A. Status bar (OS 관리) │
|
|
├─────────────────────────────┤
|
|
│ B. Browser 영역 │
|
|
├──────┬──────────────────────┤
|
|
│Button│ Title │Button│ C. Title 영역
|
|
├──────┴──────────────────────┤
|
|
│ │
|
|
│ D. Content 영역 │
|
|
│ │
|
|
├─────────────────────────────┤
|
|
│ E. Browser bar 영역 │
|
|
├─────────────────────────────┤
|
|
│ F. Keypad 영역 (입력 시) │
|
|
└─────────────────────────────┘
|
|
```
|
|
|
|
### 1.2 영역 설명
|
|
- **A. Status bar**: 안테나, 통화, 배터리 등 시스템 OS 관리 영역
|
|
- **B. Browser 영역**: 브라우저 기능 영역
|
|
- **C. Title 영역**: 텍스트 또는 기능 버튼으로 구현, 텍스트 기본 가운데 정렬
|
|
- **D. Content 영역**: 컨텐츠 내용 표시, 컨텐츠 길이가 길어질 경우 스크롤 제공
|
|
- **E. Browser bar 영역**: 브라우저 유틸 바 영역
|
|
- **F. Keypad 영역**: 키보드 입력할 때 활성화, 모든 페이지 위에 덮어쓰기 구현
|
|
|
|
## 2. GNB/LNB/푸터 (슬라이드 8)
|
|
|
|
### 2.1 알림 버튼
|
|
- 클릭: 알림 팝업 표시
|
|
|
|
### 2.2 개인 정보 버튼
|
|
- 등록: 디폴트 이미지, 이름, 직급
|
|
- 클릭: 마이페이지 팝업 표시
|
|
|
|
### 2.3 회사 로고
|
|
- 회사정보 화면에서 등록한 로고 표시
|
|
- 회사 변경 선택 시 해당 로고 변경
|
|
|
|
### 2.4 메뉴 영역
|
|
- 메뉴 클릭:
|
|
- 하위 메뉴가 있을 경우: 하위 메뉴 하단에 표시
|
|
- 하위 메뉴 없을 경우: 해당 메뉴 화면으로 이동
|
|
- 목록 길 경우 해당 영역 내 스크롤 처리
|
|
|
|
### 2.5 MES 메뉴 영역
|
|
- 영업관리, 판매관리, 구매관리 등 해당하는 MES 메뉴 영역 표시
|
|
|
|
### 2.6 푸터 영역
|
|
- 모든 화면 하단 공통 표시
|
|
|
|
## 3. 알림 팝업 (슬라이드 9)
|
|
|
|
### 3.1 알림 목록
|
|
- 항목: 디폴트 원형일, 종류(공지사항), 안내/제목/내용, 전송일시 표시
|
|
- 클릭: 해당 상세 화면으로 이동
|
|
- 최신순 10개까지 표시
|
|
|
|
### 3.2 New 아이콘
|
|
- 새 알림일 경우 New 아이콘 표시
|
|
- 해당 알림 클릭 시 사라짐
|
|
|
|
### 3.3 빨간 점 아이콘
|
|
- 새 알림이 있을 경우 표시
|
|
- 해당 알림 모두 클릭 시 사라짐
|
|
|
|
## 4. 마이페이지 팝업 (슬라이드 10)
|
|
|
|
### 4.1 계정 아이디 (이메일) 표시
|
|
|
|
### 4.2 회사 셀렉트 박스
|
|
- 종류: 회사명, 회사명... (해당 계정이 생성한 회사(테넌트) 목록 표시)
|
|
- 정렬: 등록순
|
|
- 한 회사만 소유중일 경우에는 해당 영역 숨김
|
|
|
|
### 4.3 로그아웃 버튼
|
|
- 클릭: "정말 로그아웃하시겠습니까?" 로그아웃 확인 Alert 표시
|
|
- 확인 버튼 클릭 시 로그아웃 처리
|
|
|
|
## 5. 셀렉트 박스 (슬라이드 11)
|
|
|
|
### 5.1 기본 셀렉트 박스
|
|
- 클릭: 하단에 종류 목록 표시
|
|
|
|
### 5.2 종류 목록
|
|
- 목록 중 하나만 선택 가능
|
|
|
|
### 5.3 다중 선택 셀렉트 박스
|
|
- 선택된 첫번째 항목명 + 추가 수 표시
|
|
- 텍스트 영역 부족할 경우 '항목..+3' 형태로 표시
|
|
|
|
### 5.4 다중 선택 종류 목록
|
|
- 목록 중 복수 선택 가능
|
|
- 전체 선택 시 전체 선택/해제 토글
|
|
|
|
### 5.5 검색 영역
|
|
- 검색어 입력 후 엔터 또는 검색 아이콘 클릭 시 (5-1) 형태로 표시되며 (5-2) 영역에 검색 결과 표시
|
|
|
|
### 5.6 삭제 버튼
|
|
- 클릭: 검색어 삭제 처리, 전체 종류 목록 표시
|
|
|
|
## 6. 입력 필드 가이드 메시지 (슬라이드 12)
|
|
|
|
### 6.1 가이드 메시지 표시 위치
|
|
- 상황에 따라 입력 필드 하단 또는 Alert에 표시
|
|
|
|
### 6.2 가이드 메시지 색상
|
|
- 긍정일 경우: 녹색
|
|
- (1-1) 부정일 경우: 붉은색
|
|
|
|
## 7. 공지 팝업 (슬라이드 13)
|
|
|
|
### 7.1 대상
|
|
- 전체, 설정 부서
|
|
- 내용: 설정 기간동안 대상에게 팝업 표시
|
|
|
|
### 7.2 팝업 내용 영역
|
|
- 이미지, 텍스트
|
|
|
|
### 7.3 "1일간 이 창을 열지 않음" 체크박스
|
|
- 클릭: 체크 설정/해제 토글
|
|
- 디폴트: 체크 해제 상태
|
|
- 체크 설정 시 1일 동안 팝업 미표시 (차정 기준)
|
|
|
|
---
|
|
|
|
## API 도출
|
|
|
|
### 공통 API
|
|
```
|
|
GET /api/notifications # 알림 목록 조회
|
|
POST /api/notifications/{id}/read # 알림 읽음 처리
|
|
GET /api/user/profile # 마이페이지 정보
|
|
GET /api/user/companies # 사용자 소속 회사 목록
|
|
POST /api/auth/logout # 로그아웃
|
|
GET /api/announcements # 공지 팝업 조회
|
|
POST /api/announcements/{id}/dismiss # 공지 팝업 닫기 (1일간 안보기)
|
|
``` |