# 공통 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일간 안보기)
```