Add comprehensive file management system with admin/user separation
Features added: - Admin interface with full CRUD operations and multi-file upload - User interface with read-only access and download functionality - Board-style table layout with pagination (10 items per page) - Category-specific file icons and attachment management - Drag & drop file upload with preview and individual file removal - Individual and bulk download with ZIP compression support - Offline mode with localStorage fallback for both interfaces - Responsive design with modern UI components Technical improvements: - Separated admin (/admin/) and user (/) interfaces - Enhanced file data structure with consistent naming - Improved error handling and user notifications - Multi-file upload processing with base64 encoding - File type detection and appropriate icon mapping - Download functionality with single/multiple file handling 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
210
admin/index.html
Normal file
210
admin/index.html
Normal file
@@ -0,0 +1,210 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>자료실 - CRUD 시스템</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
|
||||
<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="authSection" class="auth-section">
|
||||
<div id="authButtons" class="auth-buttons" style="display: none;">
|
||||
<button id="loginBtn" class="auth-btn">🔑 로그인</button>
|
||||
<button id="signupBtn" class="auth-btn">👤 회원가입</button>
|
||||
</div>
|
||||
<div id="userInfo" class="user-info" style="display: flex;">
|
||||
<span id="userEmail">오프라인 사용자</span>
|
||||
<span id="syncStatus" class="sync-status offline">🟡 오프라인</span>
|
||||
<button id="logoutBtn" class="auth-btn" style="display: none;">🚪 로그아웃</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<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">
|
||||
<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="*/*">
|
||||
<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 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>
|
||||
</div>
|
||||
|
||||
<!-- 인증 모달 -->
|
||||
<div id="authModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h2 id="authModalTitle">🔑 로그인</h2>
|
||||
<form id="authForm">
|
||||
<div class="form-group">
|
||||
<label for="authEmail">이메일 *</label>
|
||||
<input type="email" id="authEmail" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="authPassword">비밀번호 *</label>
|
||||
<input type="password" id="authPassword" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="confirmPasswordGroup" style="display: none;">
|
||||
<label for="authConfirmPassword">비밀번호 확인 *</label>
|
||||
<input type="password" id="authConfirmPassword">
|
||||
</div>
|
||||
|
||||
<div class="form-buttons">
|
||||
<button type="submit" id="authSubmitBtn">🔑 로그인</button>
|
||||
<button type="button" id="authCancelBtn">❌ 취소</button>
|
||||
</div>
|
||||
|
||||
<div class="auth-switch">
|
||||
<p id="authSwitchText">계정이 없으신가요? <a href="#" id="authSwitchLink">회원가입하기</a></p>
|
||||
</div>
|
||||
</form>
|
||||
<div id="authLoading" class="loading" style="display: none;">
|
||||
<p>처리 중...</p>
|
||||
</div>
|
||||
</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-buttons">
|
||||
<button type="submit">💾 저장</button>
|
||||
<button type="button" id="closeModal">❌ 취소</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="supabase-config.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1513
admin/script.js
Normal file
1513
admin/script.js
Normal file
File diff suppressed because it is too large
Load Diff
1029
admin/styles.css
Normal file
1029
admin/styles.css
Normal file
File diff suppressed because it is too large
Load Diff
119
admin/supabase-config.js
Normal file
119
admin/supabase-config.js
Normal file
@@ -0,0 +1,119 @@
|
||||
// Supabase configuration (오프라인 모드)
|
||||
// ⚠️ 오프라인 모드로 강제 설정됨
|
||||
const SUPABASE_CONFIG = {
|
||||
url: 'https://kncudtzthmjegowbgnto.supabase.co',
|
||||
anonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImtuY3VkdHp0aG1qZWdvd2JnbnRvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTU1Njc5OTksImV4cCI6MjA3MTE0Mzk5OX0.NlJN2vdgM96RvyVJE6ILQeDVUOU9X2F9vUn-jr_xlKc'
|
||||
};
|
||||
|
||||
// Supabase 클라이언트 초기화 (강제 비활성화)
|
||||
let supabase = null;
|
||||
|
||||
// 설정이 유효한지 확인
|
||||
function isSupabaseConfigured() {
|
||||
return false; // 강제로 false 반환
|
||||
}
|
||||
|
||||
// Supabase 클라이언트 초기화 함수 (오프라인 모드 강제)
|
||||
function initializeSupabase() {
|
||||
console.log('⚠️ 오프라인 모드로 강제 설정되었습니다.');
|
||||
return false;
|
||||
}
|
||||
|
||||
// 인증 상태 변경 리스너 (오프라인 모드용 - 빈 함수)
|
||||
function setupAuthListener(callback) {
|
||||
// 오프라인 모드에서는 아무것도 하지 않음
|
||||
return;
|
||||
}
|
||||
|
||||
// 현재 사용자 가져오기 (오프라인 모드용 - null 반환)
|
||||
async function getCurrentUser() {
|
||||
return null;
|
||||
}
|
||||
|
||||
// 로그인 (오프라인 모드용 - 빈 함수)
|
||||
async function signIn(email, password) {
|
||||
throw new Error('오프라인 모드에서는 로그인할 수 없습니다.');
|
||||
}
|
||||
|
||||
// 회원가입 (오프라인 모드용 - 빈 함수)
|
||||
async function signUp(email, password, metadata = {}) {
|
||||
throw new Error('오프라인 모드에서는 회원가입할 수 없습니다.');
|
||||
}
|
||||
|
||||
// 로그아웃 (오프라인 모드용 - 빈 함수)
|
||||
async function signOut() {
|
||||
throw new Error('오프라인 모드에서는 로그아웃할 수 없습니다.');
|
||||
}
|
||||
|
||||
// 데이터베이스 헬퍼 함수들 (오프라인 모드용)
|
||||
const SupabaseHelper = {
|
||||
// 파일 목록 가져오기 (오프라인 모드용)
|
||||
async getFiles(userId) {
|
||||
console.log('🔍 SupabaseHelper.getFiles 호출됨 (오프라인 모드)');
|
||||
throw new Error('오프라인 모드에서는 Supabase 데이터베이스를 사용할 수 없습니다.');
|
||||
},
|
||||
|
||||
// 파일 추가 (오프라인 모드용)
|
||||
async addFile(fileData, userId) {
|
||||
console.log('🔍 SupabaseHelper.addFile 호출됨 (오프라인 모드)');
|
||||
throw new Error('오프라인 모드에서는 Supabase 데이터베이스를 사용할 수 없습니다.');
|
||||
},
|
||||
|
||||
// 파일 수정 (오프라인 모드용)
|
||||
async updateFile(id, updates, userId) {
|
||||
console.log('🔍 SupabaseHelper.updateFile 호출됨 (오프라인 모드)');
|
||||
throw new Error('오프라인 모드에서는 Supabase 데이터베이스를 사용할 수 없습니다.');
|
||||
},
|
||||
|
||||
// 파일 삭제 (오프라인 모드용)
|
||||
async deleteFile(id, userId) {
|
||||
console.log('🔍 SupabaseHelper.deleteFile 호출됨 (오프라인 모드)');
|
||||
throw new Error('오프라인 모드에서는 Supabase 데이터베이스를 사용할 수 없습니다.');
|
||||
},
|
||||
|
||||
// 실시간 구독 설정 (오프라인 모드용)
|
||||
subscribeToFiles(userId, callback) {
|
||||
console.log('🔍 SupabaseHelper.subscribeToFiles 호출됨 (오프라인 모드)');
|
||||
return null;
|
||||
},
|
||||
|
||||
// 파일 업로드 (오프라인 모드용)
|
||||
async uploadFile(file, filePath) {
|
||||
console.log('🔍 SupabaseHelper.uploadFile 호출됨 (오프라인 모드)');
|
||||
throw new Error('오프라인 모드에서는 Supabase Storage를 사용할 수 없습니다.');
|
||||
},
|
||||
|
||||
// 파일 다운로드 URL 가져오기 (오프라인 모드용)
|
||||
async getFileUrl(filePath) {
|
||||
console.log('🔍 SupabaseHelper.getFileUrl 호출됨 (오프라인 모드)');
|
||||
throw new Error('오프라인 모드에서는 Supabase Storage를 사용할 수 없습니다.');
|
||||
},
|
||||
|
||||
// 파일 삭제 (Storage) (오프라인 모드용)
|
||||
async deleteStorageFile(filePath) {
|
||||
console.log('🔍 SupabaseHelper.deleteStorageFile 호출됨 (오프라인 모드)');
|
||||
throw new Error('오프라인 모드에서는 Supabase Storage를 사용할 수 없습니다.');
|
||||
},
|
||||
|
||||
// 첨부파일 정보 추가 (오프라인 모드용)
|
||||
async addFileAttachment(fileId, attachmentData) {
|
||||
console.log('🔍 SupabaseHelper.addFileAttachment 호출됨 (오프라인 모드)');
|
||||
throw new Error('오프라인 모드에서는 Supabase 데이터베이스를 사용할 수 없습니다.');
|
||||
},
|
||||
|
||||
// Storage 버킷 확인 및 생성 (오프라인 모드용)
|
||||
async checkOrCreateBucket() {
|
||||
console.log('🔍 SupabaseHelper.checkOrCreateBucket 호출됨 (오프라인 모드)');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// 전역으로 내보내기
|
||||
window.SupabaseHelper = SupabaseHelper;
|
||||
window.initializeSupabase = initializeSupabase;
|
||||
window.isSupabaseConfigured = isSupabaseConfigured;
|
||||
window.setupAuthListener = setupAuthListener;
|
||||
window.getCurrentUser = getCurrentUser;
|
||||
window.signIn = signIn;
|
||||
window.signUp = signUp;
|
||||
window.signOut = signOut;
|
||||
Reference in New Issue
Block a user