9998d9df96
- 헤더를 fixed로 변경하고 z-index를 200으로 높여 사이드바와 겹침 방지 - 대시보드에서 빠른 작업 섹션 제거 (사이드바로 대체) - 모든 템플릿(4개)에 사이드바 네비게이션 추가 - 템플릿 README에 사이드바 설명 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
158 lines
5.1 KiB
HTML
158 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>관리자 | 테크니컬코리아</title>
|
||
|
||
<!-- 모던 디자인 시스템 -->
|
||
<link rel="stylesheet" href="/css/design-system.css">
|
||
<link rel="stylesheet" href="/css/common.css">
|
||
<link rel="stylesheet" href="/css/modern-dashboard.css">
|
||
<!-- 페이지별 CSS 추가 -->
|
||
<!-- <link rel="stylesheet" href="/css/your-admin-page.css"> -->
|
||
|
||
<!-- 필수 스크립트 (순서 중요) -->
|
||
<script type="module" src="/js/api-config.js"></script>
|
||
<script type="module" src="/js/auth-check.js"></script>
|
||
<script type="module" src="/js/load-navbar.js"></script>
|
||
<script type="module" src="/js/load-sidebar.js"></script>
|
||
|
||
<!-- 페이지별 스크립트 추가 -->
|
||
<!-- <script type="module" src="/js/your-admin-page.js" defer></script> -->
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 사이드바 네비게이션 (자동 로드됨) -->
|
||
<div id="sidebar-container"></div>
|
||
|
||
<!-- 네비게이션 헤더 (자동 로드됨) -->
|
||
<div id="navbar-container"></div>
|
||
|
||
<!-- 메인 콘텐츠 -->
|
||
<main class="dashboard-main">
|
||
<div class="admin-page-container">
|
||
|
||
<!-- 페이지 헤더 -->
|
||
<div class="page-header">
|
||
<div class="page-header-left">
|
||
<button class="btn btn-secondary" onclick="history.back()">
|
||
<span>←</span>
|
||
뒤로
|
||
</button>
|
||
</div>
|
||
<div class="page-header-center">
|
||
<h2 class="page-title">⚙️ 관리 페이지</h2>
|
||
<p class="page-subtitle">시스템 설정 및 데이터 관리</p>
|
||
</div>
|
||
<div class="page-header-right">
|
||
<!-- 추가 액션 버튼 -->
|
||
<button class="btn btn-primary">
|
||
<span>➕</span>
|
||
추가
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 관리 콘텐츠 카드 -->
|
||
<div class="admin-card">
|
||
<!-- 탭 네비게이션 (선택사항) -->
|
||
<div class="tab-navigation">
|
||
<button class="tab-btn active" data-tab="tab1">탭 1</button>
|
||
<button class="tab-btn" data-tab="tab2">탭 2</button>
|
||
<button class="tab-btn" data-tab="tab3">탭 3</button>
|
||
</div>
|
||
|
||
<!-- 검색/필터 영역 -->
|
||
<div class="admin-filters">
|
||
<div class="filter-group">
|
||
<label class="filter-label">검색</label>
|
||
<input type="text" class="filter-input" placeholder="검색어 입력">
|
||
</div>
|
||
<div class="filter-group">
|
||
<label class="filter-label">상태</label>
|
||
<select class="filter-select">
|
||
<option value="all">전체</option>
|
||
<option value="active">활성</option>
|
||
<option value="inactive">비활성</option>
|
||
</select>
|
||
</div>
|
||
<button class="btn btn-primary">
|
||
<span>🔍</span>
|
||
검색
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 데이터 테이블 영역 -->
|
||
<div class="admin-table-container">
|
||
<table class="admin-table">
|
||
<thead>
|
||
<tr>
|
||
<th>
|
||
<input type="checkbox" id="selectAll">
|
||
</th>
|
||
<th>ID</th>
|
||
<th>이름</th>
|
||
<th>상태</th>
|
||
<th>등록일</th>
|
||
<th>작업</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="tableBody">
|
||
<!-- 데이터 행들이 동적으로 추가됩니다 -->
|
||
<tr>
|
||
<td><input type="checkbox"></td>
|
||
<td>1</td>
|
||
<td>샘플 데이터</td>
|
||
<td><span class="badge badge-success">활성</span></td>
|
||
<td>2025-01-20</td>
|
||
<td>
|
||
<button class="btn btn-sm btn-secondary">수정</button>
|
||
<button class="btn btn-sm btn-error">삭제</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 페이지네이션 (선택사항) -->
|
||
<div class="pagination">
|
||
<button class="pagination-btn" disabled>이전</button>
|
||
<span class="pagination-info">1 / 10</span>
|
||
<button class="pagination-btn">다음</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<!-- 로딩 스피너 -->
|
||
<div id="loadingSpinner" class="loading-overlay" style="display: none;">
|
||
<div class="loading-content">
|
||
<div class="spinner"></div>
|
||
<p>처리 중...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 확인 모달 -->
|
||
<div id="confirmModal" class="modal-overlay" style="display: none;">
|
||
<div class="modal-container">
|
||
<div class="modal-header">
|
||
<h2 id="confirmModalTitle">확인</h2>
|
||
<button class="modal-close-btn" onclick="closeConfirmModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p id="confirmModalMessage">작업을 진행하시겠습니까?</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-secondary" onclick="closeConfirmModal()">취소</button>
|
||
<button class="btn btn-primary" id="confirmModalBtn">확인</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
|
||
</html>
|