PM_ver4 통합 관리자 어플리케이션 화면설계서

UI/UX Specification - 대시보드 및 관리자 화면 기능 명세서

1. 공통 UI 가이드라인 및 디자인 시스템

관리자 패널의 모든 화면 레이아웃, 컴포넌트 명세, 사용자 액션 및 데이터 정합성 검증 규칙은 본 시스템의 디자인 규칙을 준수합니다.

① 색상 토큰 (Color Tokens)

Primary Forest Green

#1e5149

Dark Teal Sidebar

#142e29

Light Green Gray Border

#d2dcdb

Soft Accent Green BG

#e9eeed

② 서체 (Typography)

서체 패밀리: 'Pretendard Variable', 'Pretendard', 'Inter', 'Noto Sans KR', sans-serif
글꼴 크기 명세:
- 페이지 메인 타이틀: 1.25rem (700 Bold)
- 카드 타이틀: 1.05rem (700 Bold)
- 일반 본문 및 테이블 데이터: 0.875rem (500 Medium / 600 Semi-Bold)
- Muted 보조 텍스트: 0.8rem / 0.75rem

③ 공통 그리드 & 테이블 (Table Grid Rules)

순번 표시 (NO): 모든 테이블 그리드의 1열은 데이터 인덱스 번호(NO)를 필수 노출합니다.
가로 구분선: 답답한 디자인을 방지하기 위해 세로 테두리(Vertical Borders)는 일절 노출하지 않으며, 가로 행 구분선만 노출합니다.
행 선택 인터랙션: 마우스 호버 시 var(--primary-soft) 배경색을 지정하며, 클릭 행 활성화 시 텍스트 두께 변경으로 인한 줄높이 왜곡이 없도록 패딩 상속(inherit) 속성을 적용하여 균일한 행 높이를 유지합니다.

④ 공통 모달 팝업 (Modal Overlay Rules)

백드롭: rgba(20, 30, 29, 0.6) 반투명 딤 및 backdrop-filter: blur(4px) 효과로 모달 포커스를 고정합니다.
트랜지션: fade-in 및 slide-up (translateY 30px to 0)이 일괄 적용되어 매끄러운 팝업 동작을 보장합니다.

2. 레이아웃 구조 설계 (App Frame Layout)

LNB, 상단 헤더, 그리고 메인 콘텐츠 탭 영역의 수평/수직 분할 아키텍처는 다음과 같습니다.

+-------------------------------------------------------------------------+ | LNB (좌측 사이드바) | Main Header (상단 헤더) | | 📁 PM_ver4 Admin | [Header Title] [Admin Profile] | |-------------------------+-----------------------------------------------| | - Dashboards | Main Content (메인 콘텐츠 탭 영역) | | 📊 종합 용량/접속자 | | | - 프로젝트 관리 | +-----------------------------------------+ | | 🏗️ 프로젝트 관리 | | 카드 1 (필터 / 테이블 리스트) | | | 📢 실시간 배너 공지 | +-----------------------------------------+ | | - 사용자 및 권한 | | 카드 2 (상세정보 뷰 / 팝업 연동 리스트) | | | 👥 사용자 관리 | +-----------------------------------------+ | | - 시스템 감사 및 환경 | | | 🔎 감사 로그 조회 | | | ⚙️ 자동 삭제 설정 | | | 🔑 공통 코드 관리 | | +-------------------------------------------------------------------------+

3. 화면별 상세 UI 및 기능 설계

📊 화면 1: 종합 용량 및 접속자 현황 (Dashboard)

상단 3열 KPI 요약 카드와 하단 스토리지 프로그레스바 및 실시간 소켓 접속자 테이블 구조입니다.

① 주요 UI 컴포넌트

스토리지 KPI 카드: 전체 현장의 총 한도 용량 대비 누적 사용 용량 실시간 합산 표시 (예: 💾 9.70 GB / 20 GB).
접속자 KPI 카드: 현재 소켓 서버 연결 세션 수 노출.
압축작업 KPI 카드: Redis(BullMQ) 내 대기중인 압축 건수.
현장별 스토리지 사용 현황: 각 프로젝트 ID/명칭, 게이지바 및 사용량 정보(GB / 백분율% / 파일수량개) 동시 렌더링.

② 실시간 접속 현황 테이블 사양

NO	사용자 ID	접속 IP	현재 조회 경로	작업
1	admin_test	127.0.0.1	`/PM_TEST_01/archive`	강제퇴장

🏗️ 화면 2: 프로젝트 관리 (Project Management)

좌측 프로젝트 목록 그리드와 우측 프로젝트별 참여자 및 배정 통제 그리드 구조입니다.

① 프로젝트 목록 테이블 사양 (좌측 카드)

행 클릭 시, 우측의 '참여 권한 사용자 목록'이 해당 프로젝트 정보로 자동 리바인딩됩니다.
삭제 제한: 관련 테이블(tb_data, tb_official_doc_file, tb_banner_notice 등)에 현장 ID 사용 이력이 있으면 삭제 불가능하며 경고 메시지가 발생합니다.
신규 프로젝트 등록 및 수정 모달 (projectModalOverlay): 프로젝트 ID(수정 시 Readonly), 프로젝트명, 단축명, 카테고리 Select, 스토리지 제한(GB), 상태를 편집합니다.

② 참여 권한 사용자 목록 (우측 카드 - 병합 영역)

권한 등급 변경: 인라인 셀렉터(Admin, Sub-Master, Worker, Viewer)로 권한 레벨 즉시 업데이트.
사용자 배정 추가 팝업 모달 (assignModalOverlay): 현재 현장에 미배정된 사용자들을 체크박스로 다중 선택하여 일괄 추가합니다. 또한 목록 선택식을 지원하기 위해 우측 하단 배정 대기 목록에서도 '즉시 배정' 단축 버튼을 제공합니다.

📢 화면 3: 실시간 배너 공지 (Banner Notice)

상단 배너 등록 폼 카드 및 하단 이력 검색 조건 필터와 이력 목록 그리드 구조입니다.

① 배너 공지 등록 폼

입력 필드: 대상 프로젝트 선택(특정 현장 또는 전체 현장 'all' 매핑), 등록일(임의 편집 지원), 시작일, 종료일, 공지 자막 텍스트.
송출 등록 제출 시, 오늘 일자와 비교하여 즉시 이력에 추가되고 상태 배지가 실시간 부여됩니다.

② 이력 목록 필터 및 이력 테이블

검색 필터: 송출 상태(전체, 송출중, 예약됨, 만료) 및 등록일(from ~ to) 날짜 범위 지정 검색.
테이블 명세: NO | 등록일 | 대상 프로젝트 | 공지 내용 | 시작일 | 종료일 | 송출 상태 | 작업
송출 중지 통제: 아직 기간이 유효한 행(송출중, 예약됨)에만 [송출 중지] 버튼이 노출 및 활성화되며, 이미 만료된 이력은 [중지 완료] 비활성 텍스트로 대체하여 이중 제어를 차단합니다.

👥 화면 4: 사용자 관리 (User Management)

좌측 사용자 마스터 리스트 및 우측 선택된 사용자의 참여 권한 프로젝트 리스트업 구조입니다.

① 사용자 계정 목록 (좌측 카드)

출력 컬럼: NO | 아이디 | 이름 | 소속/직급 | 그룹 | 상태 | 관리(수정/삭제)

행 클릭 시, 해당 사용자가 참여하고 있는 프로젝트 리스트가 우측 카드에 즉시 바인딩됩니다.
삭제 제한: 권한 테이블(tb_permission)에 현장 배정/참여 권한 정보가 등록되어 있으면 삭제가 불가능하며 경고 메시지가 발생합니다.
사용자 등록 및 수정 모달 (userModalOverlay): 아이디(수정 시 Readonly), 패스워드, 이름, 회사명, 부서, 직급, 권한 그룹 지정 select, 재직 상태(재직/퇴직잠금) 지정.

② 권한부여 프로젝트 목록 (우측 카드)

출력 컬럼: NO | 프로젝트 ID | 프로젝트명 | 부여 권한 등급

🔎 화면 5: 감사 로그 조회 (Audit Logs)

파일 조작 중요 이벤트(삭제, 이동, 다운로드) 목록 및 검색 조회 화면입니다.

① 감사 로그 목록 사양

필터링 항목: 사용자 ID 검색 입력란, 조작 액션 Dropdown, 검색 기능.

⚙️ 화면 6: 자동 보관 및 파일 삭제 정책 설정 (Delete Policy)

시스템 글로벌 일괄 정책 설정 영역, 실시간 예정 시나리오 요약, 그리고 배치 처리 이력 구조입니다.

① 시스템 공통 자동 삭제 정책 설정 폼 [글로벌 정책 공통화]

입력 필드: 정책 활성화 여부(Toggle/Select), 최소 유지 파일 개수 기준(숫자 입력), 자동 삭제 제한 기한(일) (숫자 입력).
글로벌 통합: 기존의 프로젝트 개별 Dropdown은 완전히 배제하고, 전체 현장에 동일하게 일괄 반영합니다.

② 보존 정책 실시간 요약 (Dynamic Summary)

폼의 입력값을 변경하는 즉시 요약 영역 텍스트가 시나리오 문구로 동적 조합되어 나타납니다.
예: "현재 전체 공통 설정에 따라, 각 현장의 보관 파일 수가 100개 미만이고 30일이 지나면 자동 삭제 배치 스케줄러가 작동합니다."

③ 자동 삭제 처리 이력 테이블 사양

정책 값 저장 완료 시 이력 로그의 대상 프로젝트 ID 자리에는 'SYSTEM'이 기입됩니다.

🔑 화면 7: 공통 코드 관리 (Common Code Management)

대분류 마스터 및 세부 코드 리스트가 배치되는 상하 2단 수직 정렬 레이아웃 구조입니다.

① 대분류 코드 마스터 (상단 카드)

출력 컬럼: NO | 대분류 코드 | 대분류 코드명 | 사용 | 관리(수정/삭제)

행을 선택(click)하면 해당 행이 하이라이트(selected)되며, 하단의 세부 코드 그리드가 동적으로 새로고침됩니다.
대분류 등록 및 수정 모달 (codeMasterModalOverlay): 대분류 코드, 명칭, 사용여부, 비고 설명 입력.

② 세부 소분류 코드 목록 (하단 카드)

유효성 방어 차단: 상단 대분류 테이블에서 행을 클릭하여 선택하지 않은 상태에서는 하단의 [➕ 세부코드 등록] 버튼이 강제 비활성화(disabled)되며, 팝업 접근 시 안내 팝업 및 경고 텍스트("상단에서 대분류 코드를 선택해 주세요.")를 노출합니다.
조합 코드(base_code): 소분류 생성 완료 제출 시, 대분류코드_소분류코드 형태로 자동 결합되어 저장됩니다.
삭제 제한 (RESTRICT): 마스터 대분류 코드를 삭제할 경우, 하위 세부 코드(code_detail)가 존재하면 대분류 삭제가 차단되고 경고 메시지를 노출합니다. (세부 코드가 먼저 삭제되어 비어있을 때만 대분류 삭제 가능)