sam-docs/system/erp-analysis/01-common.md

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