377 lines
15 KiB
HTML
377 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PM_ver4 통합 관리자 메뉴정의서</title>
|
|
<!-- Google Fonts - Inter & Noto Sans KR -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap"
|
|
rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--primary: #1e5149;
|
|
/* Forest Green */
|
|
--primary-dark: #142e29;
|
|
--primary-light: #e9eeed;
|
|
--border: #d2dcdb;
|
|
--bg: #f4f7f6;
|
|
--card-bg: #ffffff;
|
|
--text-main: #1f2937;
|
|
--text-muted: #4b746d;
|
|
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', 'Noto Sans KR', sans-serif;
|
|
background-color: var(--bg);
|
|
color: var(--text-main);
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
background-color: var(--card-bg);
|
|
border-radius: 12px;
|
|
padding: 40px;
|
|
box-shadow: var(--shadow);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
header {
|
|
border-bottom: 2px solid var(--border);
|
|
padding-bottom: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: var(--primary-dark);
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.05rem;
|
|
color: var(--text-muted);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Filter Controls */
|
|
.filter-controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 24px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-btn {
|
|
background-color: #ffffff;
|
|
border: 1px solid var(--border);
|
|
color: var(--text-main);
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.filter-btn:hover,
|
|
.filter-btn.active {
|
|
background-color: var(--primary);
|
|
color: #ffffff;
|
|
border-color: var(--primary);
|
|
}
|
|
|
|
/* Menu Definition Table */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.88rem;
|
|
margin-top: 10px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
th {
|
|
background-color: var(--primary-dark);
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
text-align: left;
|
|
padding: 12px 16px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
td {
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
vertical-align: top;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
tr:nth-child(even) td {
|
|
background-color: #f9fafb;
|
|
}
|
|
|
|
tr.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Badges */
|
|
.badge-cat {
|
|
display: inline-block;
|
|
background-color: var(--primary-light);
|
|
color: var(--primary);
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.badge-table {
|
|
font-family: monospace;
|
|
background-color: #f1f5f9;
|
|
color: #334155;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
border: 1px solid #e2e8f0;
|
|
display: inline-block;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.menu-id {
|
|
font-family: monospace;
|
|
font-weight: 600;
|
|
color: #0369a1;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Rules list style */
|
|
.rules-list {
|
|
margin: 0;
|
|
padding-left: 16px;
|
|
font-size: 0.82rem;
|
|
color: #4b5563;
|
|
}
|
|
|
|
.rules-list li {
|
|
margin-bottom: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
<header>
|
|
<h1>PM_ver4 통합 관리자 메뉴정의서</h1>
|
|
<p class="subtitle">관리자 화면(Admin Panel) 1단계 및 2단계 메뉴 기능 명세 및 테이블 매핑 테이블</p>
|
|
</header>
|
|
|
|
<!-- Filter Buttons -->
|
|
<div class="filter-controls">
|
|
<button class="filter-btn active" onclick="filterMenu('all')">전체보기</button>
|
|
<button class="filter-btn" onclick="filterMenu('dashboard')">1. Dashboards</button>
|
|
<button class="filter-btn" onclick="filterMenu('project')">2. 프로젝트 관리</button>
|
|
<button class="filter-btn" onclick="filterMenu('user')">3. 사용자 관리</button>
|
|
<button class="filter-btn" onclick="filterMenu('system')">4. 시스템 감사 및 환경</button>
|
|
</div>
|
|
|
|
<!-- Menu Table -->
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 15%;">1단계 메뉴</th>
|
|
<th style="width: 15%;">2단계 메뉴</th>
|
|
<th style="width: 15%;">메뉴 ID / Hash</th>
|
|
<th style="width: 25%;">주요 기능 명세 (Functional Specifications)</th>
|
|
<th style="width: 15%;">관련 DB 테이블</th>
|
|
<th style="width: 15%;">비고 및 비즈니스 규칙</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="menu-tbody">
|
|
<!-- Row 1 -->
|
|
<tr data-category="dashboard">
|
|
<td><strong>1. Dashboards</strong></td>
|
|
<td><span class="badge-cat">종합 용량 및 접속자</span></td>
|
|
<td class="menu-id">menu-dashboard<br>#dashboard</td>
|
|
<td>
|
|
• 전체 디스크 용량, 실시간 소켓 접속자 수, Redis 대기 작업 수 요약 노출.<br>
|
|
• 현장별 사용 용량, 백분율, 파일 수량 프로그레스 바 표시.<br>
|
|
• 실시간 소켓 연결 정보 그리드 및 사용자 강제퇴장(Kick) 기능.
|
|
</td>
|
|
<td>
|
|
<span class="badge-table">tb_project</span><br>
|
|
<span class="badge-table">tb_data</span><br>
|
|
<span class="badge-table">Redis (Queue)</span>
|
|
</td>
|
|
<td>소켓 세션 맵과 실시간 동기화하여 퇴장 처리 즉시 실행.</td>
|
|
</tr>
|
|
|
|
<!-- Row 2 -->
|
|
<tr data-category="project">
|
|
<td><strong>2. 프로젝트 관리</strong></td>
|
|
<td><span class="badge-cat">프로젝트 관리</span></td>
|
|
<td class="menu-id">menu-project-mgmt<br>#project-mgmt</td>
|
|
<td>
|
|
• 프로젝트 목록 조회 및 신규 등록/수정/삭제 모달 팝업.<br>
|
|
• 프로젝트 구분 카테고리 지정.<br>
|
|
• 행 클릭 시 우측에 참여 사용자 등급 조회 및 즉각 수정/배정제외.<br>
|
|
• 미배정 사용자 다중 선택 일괄 추가 배정 팝업.
|
|
</td>
|
|
<td>
|
|
<span class="badge-table">tb_project</span><br>
|
|
<span class="badge-table">code_detail</span><br>
|
|
<span class="badge-table">tb_permission</span><br>
|
|
<span class="badge-table">tb_user</span>
|
|
</td>
|
|
<td>
|
|
<ul class="rules-list">
|
|
<li>등록 시 ID 직접 입력, 수정 시 ID 비활성.</li>
|
|
<li><strong>삭제 제한</strong>: 관련 테이블(tb_data, tb_official_doc_file, tb_banner_notice 등)에 현장 ID
|
|
사용 이력이 있으면 삭제 불가능.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Row 3 -->
|
|
<tr data-category="project">
|
|
<td><strong>2. 프로젝트 관리</strong></td>
|
|
<td><span class="badge-cat">실시간 배너 공지</span></td>
|
|
<td class="menu-id">menu-banner-notice<br>#banner-notice</td>
|
|
<td>
|
|
• 배너 공지사항 작성 및 등록 (대상 현장, 송출 기간, 편집용 등록일 지정).<br>
|
|
• 송출 상태(송출중, 예약됨, 만료) 및 등록일 범위 필터 검색 기능.<br>
|
|
• 진행 중인 공지 개별 즉시 송출중지 처리.
|
|
</td>
|
|
<td>
|
|
<span class="badge-table">tb_banner_notice</span><br>
|
|
<span class="badge-table">code_detail</span><br>
|
|
<span class="badge-table">tb_project</span>
|
|
</td>
|
|
<td>시작일/종료일 경과 여부에 따라 송출 상태 실시간 계산 렌더링.</td>
|
|
</tr>
|
|
|
|
<!-- Row 4 -->
|
|
<tr data-category="user">
|
|
<td><strong>3. 사용자 관리</strong></td>
|
|
<td><span class="badge-cat">사용자 관리</span></td>
|
|
<td class="menu-id">menu-user-mgmt<br>#user-mgmt</td>
|
|
<td>
|
|
• 전체 사용자 정보 조회 및 신규 계정 등록/정보 수정/삭제 모달.<br>
|
|
• 권한 그룹 및 재직/퇴직잠금 상태 배지 설정.<br>
|
|
• 행 클릭 시 해당 유저의 프로젝트 참여 목록(권한 등급 포함) 우측 연동 리스트업.
|
|
</td>
|
|
<td>
|
|
<span class="badge-table">tb_user</span><br>
|
|
<span class="badge-table">code_detail</span><br>
|
|
<span class="badge-table">tb_permission</span><br>
|
|
<span class="badge-table">tb_project</span>
|
|
</td>
|
|
<td><strong>삭제 제한</strong>: 권한 테이블(tb_permission)에 프로젝트 참여 권한 정보가 존재하면 계정 삭제 불가능.</td>
|
|
</tr>
|
|
|
|
<!-- Row 5 -->
|
|
<tr data-category="system">
|
|
<td><strong>4. 시스템 감사 및 환경</strong></td>
|
|
<td><span class="badge-cat">감사 로그 조회</span></td>
|
|
<td class="menu-id">menu-audit-logs<br>#audit-logs</td>
|
|
<td>
|
|
• 파일 삭제, 이동, 다운로드 등 보안 감사 대상 활동 조회.<br>
|
|
• 유저 ID 검색 및 액션 타입(activity) 필터 검색 기능.
|
|
</td>
|
|
<td>
|
|
<span class="badge-table">tb_log</span>
|
|
</td>
|
|
<td>감사 추적용 조회 전용 화면.</td>
|
|
</tr>
|
|
|
|
<!-- Row 6 -->
|
|
<tr data-category="system">
|
|
<td><strong>4. 시스템 감사 및 환경</strong></td>
|
|
<td><span class="badge-cat">보관 및 삭제 정책 설정</span></td>
|
|
<td class="menu-id">menu-delete-policy<br>#delete-policy</td>
|
|
<td>
|
|
• 시스템 공통 자동 보존 및 파일 삭제 임계 기준 설정 폼.<br>
|
|
• 폼 데이터 변경 시 작동 시나리오 문구 동적 요약 안내.<br>
|
|
• 정기 자동 삭제 스케줄러 배치 구동 이력 로그 리스트업.
|
|
</td>
|
|
<td>
|
|
<span class="badge-table">tb_system_policy</span><br>
|
|
<span class="badge-table">tb_auto_clean_log</span>
|
|
</td>
|
|
<td>
|
|
<ul class="rules-list">
|
|
<li>설정값 변경 저장 시 로그 이력의 대상에는 'SYSTEM' 기입.</li>
|
|
<li>배치는 수동 변경 값을 즉각 바인딩하여 다음 기동 시 적용.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Row 7 -->
|
|
<tr data-category="system">
|
|
<td><strong>4. 시스템 감사 및 환경</strong></td>
|
|
<td><span class="badge-cat">공통 코드 관리</span></td>
|
|
<td class="menu-id">menu-code-mgmt<br>#code-mgmt</td>
|
|
<td>
|
|
• 대분류 코드 마스터 등록/수정/삭제 모달.<br>
|
|
• 대분류 선택 시 하단에 소속 소분류 세부 코드 실시간 필터 로드.<br>
|
|
• 소분류 코드 등록/수정/삭제 모달.<br>
|
|
• 소분류 base_code (대분류_소분류 결합 코드) 자동 완성 저장.
|
|
</td>
|
|
<td>
|
|
<span class="badge-table">code_master</span><br>
|
|
<span class="badge-table">code_detail</span>
|
|
</td>
|
|
<td>
|
|
<ul class="rules-list">
|
|
<li>대분류 미선택 시 하단 세부코드 등록 차단 및 경고.</li>
|
|
<li><strong>삭제 제한</strong>: 대분류 코드에 속한 하위 소분류 세부 코드(code_detail)가 존재하면 대분류 삭제 불가능.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Interactive Filtering Script -->
|
|
<script>
|
|
function filterMenu(category) {
|
|
// Update active filter button styling
|
|
const buttons = document.querySelectorAll('.filter-btn');
|
|
buttons.forEach(btn => btn.classList.remove('active'));
|
|
|
|
// Highlight clicked button
|
|
const clickedBtn = event.currentTarget || event.target;
|
|
if (clickedBtn && clickedBtn.classList) {
|
|
clickedBtn.classList.add('active');
|
|
}
|
|
|
|
// Show/Hide rows
|
|
const rows = document.querySelectorAll('#menu-tbody tr');
|
|
rows.forEach(row => {
|
|
if (category === 'all' || row.getAttribute('data-category') === category) {
|
|
row.classList.remove('hidden');
|
|
} else {
|
|
row.classList.add('hidden');
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |