vibsin9322
2195cdf1b9
- 대용량 파일 다운로드: blob 방식 대신 직접 링크 방식으로 변경하여 메모리 문제 해결 - 자료 목록 제목 색상: 파란색(#667eea)으로 변경하여 가독성 향상 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
316 lines
15 KiB
HTML
316 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">
|
||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
||
<meta http-equiv="Pragma" content="no-cache">
|
||
<meta http-equiv="Expires" content="0">
|
||
<title>자료실 - 관리자</title>
|
||
<link rel="stylesheet" href="styles.css?v=20250821194500">
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>📚 자료실 관리자</h1>
|
||
<p>관리자 전용 페이지입니다</p>
|
||
|
||
<!-- 로그인 폼 -->
|
||
<div id="loginSection" class="login-section">
|
||
<div class="login-form">
|
||
<h3>🔐 관리자 로그인</h3>
|
||
<div class="form-group">
|
||
<input type="email" id="adminEmail" placeholder="이메일" value="admin@jaryo.com" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<input type="password" id="adminPassword" placeholder="비밀번호" required>
|
||
</div>
|
||
<button id="loginBtn" class="login-btn">로그인</button>
|
||
</div>
|
||
|
||
<div class="public-link">
|
||
<a href="/" class="public-btn">👥 일반 자료실 보기</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 로그인 후 표시될 관리자 정보 -->
|
||
<div id="adminSection" class="admin-section" style="display: none;">
|
||
<div class="admin-info">
|
||
<span id="adminUserEmail">관리자</span>
|
||
<span id="connectionStatus" class="connection-status online">🟢 온라인</span>
|
||
<button id="logoutBtn" class="logout-btn">🚪 로그아웃</button>
|
||
</div>
|
||
|
||
<div class="public-link">
|
||
<a href="/" class="public-btn">👥 일반 자료실 보기</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 관리자 전용 영역 (로그인 후에만 표시) -->
|
||
<div id="adminPanel" style="display: none;">
|
||
<div class="search-section">
|
||
<input type="text" id="searchInput" placeholder="제목, 설명, 카테고리로 검색...">
|
||
<select id="categoryFilter">
|
||
<option value="">전체 카테고리</option>
|
||
<option value="문서">문서</option>
|
||
<option value="이미지">이미지</option>
|
||
<option value="동영상">동영상</option>
|
||
<option value="프레젠테이션">프레젠테이션</option>
|
||
<option value="기타">기타</option>
|
||
</select>
|
||
<button id="searchBtn">🔍 검색</button>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<div class="section-tabs">
|
||
<button class="tab-btn active" id="fileTabBtn">📁 자료 관리</button>
|
||
<button class="tab-btn" id="categoryTabBtn">🏷️ 카테고리 관리</button>
|
||
</div>
|
||
|
||
<div id="fileTab" class="tab-content active">
|
||
<h2>📁 새 자료 추가</h2>
|
||
<form id="fileForm">
|
||
<div class="form-group">
|
||
<label for="fileTitle">제목 *</label>
|
||
<input type="text" id="fileTitle" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="fileDescription">설명</label>
|
||
<textarea id="fileDescription" rows="3"></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="fileCategory">카테고리 *</label>
|
||
<select id="fileCategory" required>
|
||
<option value="">카테고리 선택</option>
|
||
<option value="문서">문서</option>
|
||
<option value="이미지">이미지</option>
|
||
<option value="동영상">동영상</option>
|
||
<option value="프레젠테이션">프레젠테이션</option>
|
||
<option value="기타">기타</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="fileUpload">파일 첨부 (여러 파일 선택 가능)</label>
|
||
<div class="file-upload-area" id="fileUploadArea">
|
||
<input type="file" id="fileUpload" multiple accept="*/*" style="display: none;">
|
||
<div class="upload-placeholder">
|
||
<div class="upload-icon">📁</div>
|
||
<p><strong>파일을 여기로 드래그하거나 클릭하여 선택하세요</strong></p>
|
||
<p>여러 파일을 동시에 선택할 수 있습니다</p>
|
||
<small>지원 형식: 모든 파일 형식</small>
|
||
</div>
|
||
</div>
|
||
<div class="selected-files" id="selectedFiles"></div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="fileTags">태그</label>
|
||
<input type="text" id="fileTags" placeholder="쉼표로 구분하여 입력 (예: 중요, 업무, 프로젝트)">
|
||
</div>
|
||
|
||
<div class="form-buttons">
|
||
<button type="submit" id="submitBtn">📤 추가</button>
|
||
<button type="button" id="cancelBtn">❌ 취소</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div id="categoryTab" class="tab-content">
|
||
<h2>🏷️ 카테고리 관리</h2>
|
||
<form id="categoryForm">
|
||
<div class="form-group">
|
||
<label for="categoryName">카테고리 이름 *</label>
|
||
<input type="text" id="categoryName" required placeholder="새 카테고리 이름">
|
||
</div>
|
||
|
||
<div class="form-buttons">
|
||
<button type="submit" id="addCategoryBtn">➕ 카테고리 추가</button>
|
||
<button type="button" id="cancelCategoryBtn">❌ 취소</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="category-list-section">
|
||
<h3>📋 현재 카테고리</h3>
|
||
<div class="category-list" id="categoryList">
|
||
<!-- 카테고리 목록이 여기에 표시됩니다 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-section">
|
||
<div class="list-header">
|
||
<h2>📋 자료 목록</h2>
|
||
<div class="sort-options">
|
||
<select id="sortBy">
|
||
<option value="date">최신순</option>
|
||
<option value="title">제목순</option>
|
||
<option value="category">카테고리순</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="board-container">
|
||
<table class="board-table" id="boardTable">
|
||
<thead>
|
||
<tr>
|
||
<th class="col-no">번호</th>
|
||
<th class="col-category">카테고리</th>
|
||
<th class="col-title">제목</th>
|
||
<th class="col-attachment">첨부</th>
|
||
<th class="col-date">등록일</th>
|
||
<th class="col-actions">관리</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="fileList">
|
||
<tr class="empty-state">
|
||
<td colspan="6">📂 등록된 자료가 없습니다. 새 자료를 추가해보세요!</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="pagination" id="pagination" style="display: none;">
|
||
<button id="prevPage" class="page-btn" disabled>◀ 이전</button>
|
||
<span id="pageInfo">1 / 1</span>
|
||
<button id="nextPage" class="page-btn" disabled>다음 ▶</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- adminPanel 끝 -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 수정 모달 -->
|
||
<div id="editModal" class="modal">
|
||
<div class="modal-content">
|
||
<h2>✏️ 자료 수정</h2>
|
||
<form id="editForm">
|
||
<div class="form-group">
|
||
<label for="editTitle">제목 *</label>
|
||
<input type="text" id="editTitle" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="editDescription">설명</label>
|
||
<textarea id="editDescription" rows="3"></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="editCategory">카테고리 *</label>
|
||
<select id="editCategory" required>
|
||
<option value="문서">문서</option>
|
||
<option value="이미지">이미지</option>
|
||
<option value="동영상">동영상</option>
|
||
<option value="프레젠테이션">프레젠테이션</option>
|
||
<option value="기타">기타</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="editTags">태그</label>
|
||
<input type="text" id="editTags" placeholder="쉼표로 구분하여 입력">
|
||
</div>
|
||
|
||
<!-- 첨부파일 관리 섹션 -->
|
||
<div class="form-group">
|
||
<label>📎 첨부파일 관리</label>
|
||
<div class="attachment-management">
|
||
<!-- 기존 첨부파일 목록 -->
|
||
<div class="existing-attachments-section">
|
||
<h4 class="section-title">🗂️ 기존 첨부파일</h4>
|
||
<div class="existing-attachments" id="existingAttachments">
|
||
<div class="no-existing-files" id="noExistingFiles">
|
||
<span class="placeholder-text">📂 기존 첨부파일이 없습니다</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 새 파일 추가 섹션 -->
|
||
<div class="new-attachments-section">
|
||
<h4 class="section-title">➕ 새 파일 추가</h4>
|
||
|
||
<!-- 드래그&드롭 영역 -->
|
||
<div class="file-drop-zone" id="fileDropZone">
|
||
<div class="drop-zone-content">
|
||
<div class="drop-zone-icon">📁</div>
|
||
<div class="drop-zone-text">
|
||
<p><strong>파일을 여기로 드래그하세요</strong></p>
|
||
<p class="or-text">또는</p>
|
||
</div>
|
||
<button type="button" class="file-select-btn" id="fileSelectBtn">
|
||
📂 파일 선택
|
||
</button>
|
||
<input type="file" id="newAttachments" multiple accept="*/*" hidden>
|
||
</div>
|
||
<div class="drop-zone-hint">
|
||
<small>여러 파일을 동시에 선택할 수 있습니다</small>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 선택된 새 파일 미리보기 -->
|
||
<div class="new-files-preview" id="newFilesPreview">
|
||
<!-- 선택된 파일들이 여기에 표시됩니다 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-buttons">
|
||
<button type="submit">💾 저장</button>
|
||
<button type="button" id="closeModal">❌ 취소</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 카테고리 수정 모달 -->
|
||
<div id="editCategoryModal" class="modal">
|
||
<div class="modal-content">
|
||
<h2>✏️ 카테고리 수정</h2>
|
||
<form id="editCategoryForm">
|
||
<div class="form-group">
|
||
<label for="editCategoryName">카테고리 이름 *</label>
|
||
<input type="text" id="editCategoryName" required>
|
||
</div>
|
||
|
||
<div class="form-buttons">
|
||
<button type="submit">💾 저장</button>
|
||
<button type="button" id="closeCategoryModal">❌ 취소</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="api-client.js"></script>
|
||
<script src="script.js"></script>
|
||
|
||
<script>
|
||
// 페이지 로드 완료 후 디버깅 정보 출력
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
console.log('✅ DOM 로드 완료');
|
||
console.log('📋 fileList 요소:', document.getElementById('fileList'));
|
||
console.log('📋 pagination 요소:', document.getElementById('pagination'));
|
||
|
||
// 3초 후 파일 매니저 상태 확인
|
||
setTimeout(() => {
|
||
if (window.fileManager) {
|
||
console.log('📋 FileManager 인스턴스:', window.fileManager);
|
||
console.log('📋 파일 개수:', window.fileManager.files?.length || 0);
|
||
console.log('📋 현재 사용자:', window.fileManager.currentUser);
|
||
|
||
// 강제로 다시 렌더링 시도
|
||
if (window.fileManager.files && window.fileManager.files.length > 0) {
|
||
console.log('🔄 파일 목록 강제 재렌더링...');
|
||
window.fileManager.renderFiles();
|
||
}
|
||
}
|
||
}, 3000);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |