diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 359de5b..68e5096 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -8,7 +8,9 @@
"WebFetch(domain:ngrok.com)",
"Bash(python:*)",
"WebFetch(domain:developers.cloudflare.com)",
- "Bash(git add:*)"
+ "Bash(git add:*)",
+ "Bash(mkdir:*)",
+ "Bash(cp:*)"
],
"deny": [],
"ask": []
diff --git a/admin/index.html b/admin/index.html
new file mode 100644
index 0000000..6f173a4
--- /dev/null
+++ b/admin/index.html
@@ -0,0 +1,210 @@
+
+
+
+
+
+ 자료실 - CRUD 시스템
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ | 번호 |
+ 카테고리 |
+ 제목 |
+ 첨부 |
+ 등록일 |
+ 관리 |
+
+
+
+
+ | 📂 등록된 자료가 없습니다. 새 자료를 추가해보세요! |
+
+
+
+
+
+
+
+
+ 👤 오프라인 모드 - 로컬 저장소를 사용합니다
+ ⚠️ 인터넷 연결 시 Supabase 기능을 사용할 수 있습니다
+
+ `;
+ container.insertBefore(guestNotice, container.firstChild.nextSibling);
+ }
+
+ hideGuestMode() {
+ const guestNotice = document.getElementById('guestModeNotice');
+ if (guestNotice) {
+ guestNotice.remove();
+ }
+ }
+
+ // 공개 파일 로드 (게스트용)
+ async loadPublicFiles() {
+ if (isSupabaseConfigured()) {
+ try {
+ // Supabase에서 모든 파일 로드 (RLS로 공개 파일만 접근 가능)
+ const data = await SupabaseHelper.getFiles('public');
+ this.files = data.map(file => ({
+ ...file,
+ files: file.file_attachments || [],
+ isReadOnly: true
+ }));
+ } catch (error) {
+ console.error('공개 파일 로딩 오류:', error);
+ // localStorage 폴백
+ this.files = this.loadFiles().map(file => ({ ...file, isReadOnly: true }));
+ }
+ } else {
+ // 오프라인 모드: localStorage의 파일을 읽기 전용으로 로드
+ this.files = this.loadFiles().map(file => ({ ...file, isReadOnly: true }));
+ }
+ this.renderFiles();
+ this.updateEmptyState();
+ }
+
+ setupOnlineStatusListener() {
+ window.addEventListener('online', () => {
+ this.isOnline = true;
+ this.showNotification('온라인 상태가 되었습니다.', 'success');
+ });
+
+ window.addEventListener('offline', () => {
+ this.isOnline = false;
+ this.showNotification('오프라인 상태입니다.', 'info');
+ });
+ }
+
+ // Supabase 데이터베이스 연동 메서드들
+ async loadUserFiles() {
+ if (!this.currentUser || !isSupabaseConfigured()) {
+ this.files = this.loadFiles(); // localStorage 폴백
+ this.updateSyncStatus('offline');
+ return;
+ }
+
+ try {
+ this.updateSyncStatus('syncing');
+ const data = await SupabaseHelper.getFiles(this.currentUser.id);
+ this.files = data.map(file => ({
+ ...file,
+ files: file.file_attachments || [] // 첨부파일 정보 매핑
+ }));
+ this.renderFiles();
+ this.updateEmptyState();
+ this.updateSyncStatus('online');
+ } catch (error) {
+ console.error('파일 로딩 오류:', error);
+ this.showNotification('파일을 불러오는 중 오류가 발생했습니다.', 'error');
+ this.updateSyncStatus('error');
+ // 오류 시 localStorage 폴백
+ this.files = this.loadFiles();
+ }
+ }
+
+ async addFileToSupabase(fileData) {
+ if (!this.currentUser || !isSupabaseConfigured()) {
+ return this.addFileLocally(fileData);
+ }
+
+ try {
+ this.updateSyncStatus('syncing');
+ console.log('파일 데이터 추가 중...', fileData);
+
+ const result = await SupabaseHelper.addFile(fileData, this.currentUser.id);
+ console.log('파일 데이터 추가 성공:', result);
+
+ // 첨부파일이 있는 경우 파일 업로드 처리
+ if (fileData.files && fileData.files.length > 0) {
+ console.log(`${fileData.files.length}개의 첨부파일 업로드 시작...`);
+ await this.uploadAttachments(result.id, fileData.files);
+ console.log('모든 첨부파일 업로드 완료');
+ }
+
+ this.showNotification('새 자료가 성공적으로 추가되었습니다!', 'success');
+ await this.loadUserFiles(); // 목록 새로고침
+ this.updateSyncStatus('online');
+ this.clearForm(); // 폼 초기화
+
+ } catch (error) {
+ console.error('파일 추가 오류:', error);
+
+ // 더 구체적인 에러 메시지 제공
+ let errorMessage = '파일 추가 중 오류가 발생했습니다.';
+ if (error.message) {
+ errorMessage += ` (${error.message})`;
+ }
+
+ this.showNotification(errorMessage, 'error');
+ this.updateSyncStatus('error');
+
+ // 콘솔에 상세 오류 정보 출력
+ if (error.details) {
+ console.error('오류 상세:', error.details);
+ }
+ if (error.hint) {
+ console.error('오류 힌트:', error.hint);
+ }
+ }
+ }
+
+ async updateFileInSupabase(id, updates) {
+ if (!this.currentUser || !isSupabaseConfigured()) {
+ return this.updateFileLocally(id, updates);
+ }
+
+ try {
+ await SupabaseHelper.updateFile(id, updates, this.currentUser.id);
+ this.showNotification('자료가 성공적으로 수정되었습니다!', 'success');
+ await this.loadUserFiles(); // 목록 새로고침
+ } catch (error) {
+ console.error('파일 수정 오류:', error);
+ this.showNotification('파일 수정 중 오류가 발생했습니다.', 'error');
+ }
+ }
+
+ async deleteFileFromSupabase(id) {
+ if (!this.currentUser || !isSupabaseConfigured()) {
+ return this.deleteFileLocally(id);
+ }
+
+ try {
+ // 첨부파일들을 Storage에서 삭제
+ await this.deleteAttachmentsFromStorage(id);
+
+ // 데이터베이스에서 파일 삭제 (CASCADE로 첨부파일 정보도 함께 삭제)
+ await SupabaseHelper.deleteFile(id, this.currentUser.id);
+ this.showNotification('자료가 성공적으로 삭제되었습니다!', 'success');
+ await this.loadUserFiles(); // 목록 새로고침
+ } catch (error) {
+ console.error('파일 삭제 오류:', error);
+ this.showNotification('파일 삭제 중 오류가 발생했습니다.', 'error');
+ }
+ }
+
+ // localStorage 폴백 메서드들
+ addFileLocally(fileData) {
+ // 로컬 저장용 데이터 생성 (ID와 타임스탬프 추가)
+ const localFileData = {
+ id: this.generateId(),
+ ...fileData,
+ created_at: new Date().toISOString(),
+ updated_at: new Date().toISOString()
+ };
+
+ // 첨부파일이 있는 경우, localStorage에 바로 저장 가능한 형태로 처리
+ if (fileData.files && fileData.files.length > 0) {
+ // 첨부파일 데이터가 이미 base64 형태로 준비되어 있으므로 그대로 사용
+ localFileData.files = fileData.files.map(file => ({
+ name: file.name,
+ original_name: file.name,
+ size: file.size,
+ type: file.type,
+ data: file.data // base64 데이터
+ }));
+ } else {
+ localFileData.files = [];
+ }
+
+ this.files.push(localFileData);
+ this.saveFiles();
+ this.renderFiles();
+ this.updateEmptyState();
+ this.showNotification('새 자료가 성공적으로 추가되었습니다! (로컬 저장)', 'success');
+ this.clearForm(); // 폼 초기화
+ }
+
+ updateFileLocally(id, updates) {
+ const fileIndex = this.files.findIndex(f => f.id === id);
+ if (fileIndex !== -1) {
+ this.files[fileIndex] = {
+ ...this.files[fileIndex],
+ ...updates,
+ updated_at: new Date().toISOString()
+ };
+ this.saveFiles();
+ this.renderFiles();
+ this.showNotification('자료가 성공적으로 수정되었습니다! (로컬 저장)', 'success');
+ }
+ }
+
+ deleteFileLocally(id) {
+ this.files = this.files.filter(f => f.id !== id);
+ this.saveFiles();
+ this.renderFiles();
+ this.updateEmptyState();
+ this.showNotification('자료가 성공적으로 삭제되었습니다! (로컬 저장)', 'success');
+ }
+
+ // 실시간 구독 관련
+ setupRealtimeSubscription() {
+ if (!this.currentUser || !isSupabaseConfigured()) return;
+
+ this.realtimeSubscription = SupabaseHelper.subscribeToFiles(
+ this.currentUser.id,
+ (payload) => {
+ console.log('실시간 업데이트:', payload);
+ this.loadUserFiles(); // 변경사항이 있으면 목록 새로고침
+ }
+ );
+ }
+
+ cleanupRealtimeSubscription() {
+ if (this.realtimeSubscription) {
+ this.realtimeSubscription.unsubscribe();
+ this.realtimeSubscription = null;
+ }
+ }
+
+ // 파일 업로드 관련 메서드들
+ async uploadAttachments(fileId, attachments) {
+ if (!isSupabaseConfigured() || !this.currentUser) {
+ console.log('오프라인 모드: 첨부파일을 base64로 저장합니다.');
+ return; // 오프라인 모드에서는 base64로 저장된 상태 유지
+ }
+
+ const uploadedFiles = [];
+
+ try {
+ for (let i = 0; i < attachments.length; i++) {
+ const attachment = attachments[i];
+
+ try {
+ console.log(`파일 업로드 중... (${i + 1}/${attachments.length}): ${attachment.name}`);
+
+ // base64 데이터를 Blob으로 변환
+ const response = await fetch(attachment.data);
+ const blob = await response.blob();
+
+ // 안전한 파일명 생성 (고유한 이름으로 저장, 원본명은 DB에 저장)
+ const fileExtension = this.getFileExtension(attachment.name);
+ const safeFileName = `${Date.now()}_${Math.random().toString(36).substr(2, 9)}${fileExtension}`;
+ const filePath = `${this.currentUser.id}/${fileId}/${safeFileName}`;
+
+ // Storage 버킷 확인
+ const bucketExists = await SupabaseHelper.checkOrCreateBucket();
+ if (!bucketExists) {
+ throw new Error('Storage 버킷 접근 권한이 없습니다. Storage 정책을 확인해주세요.');
+ }
+
+ // Supabase Storage에 업로드
+ const uploadResult = await SupabaseHelper.uploadFile(blob, filePath);
+ console.log('Storage 업로드 성공:', uploadResult);
+
+ // 데이터베이스에 첨부파일 정보 저장
+ const attachmentResult = await this.addFileAttachment(fileId, {
+ original_name: attachment.name,
+ storage_path: filePath,
+ file_size: attachment.size || blob.size,
+ mime_type: attachment.type || blob.type
+ });
+
+ uploadedFiles.push(attachmentResult);
+ console.log('첨부파일 정보 저장 성공:', attachmentResult);
+
+ } catch (fileError) {
+ console.error(`파일 "${attachment.name}" 업로드 실패:`, fileError);
+ throw new Error(`파일 "${attachment.name}" 업로드에 실패했습니다: ${fileError.message}`);
+ }
+ }
+
+ console.log('모든 첨부파일 업로드 완료:', uploadedFiles);
+ return uploadedFiles;
+
+ } catch (error) {
+ console.error('파일 업로드 오류:', error);
+
+ // 부분적으로 업로드된 파일들 정리 (선택사항)
+ try {
+ for (const uploadedFile of uploadedFiles) {
+ if (uploadedFile.storage_path) {
+ await SupabaseHelper.deleteStorageFile(uploadedFile.storage_path);
+ }
+ }
+ } catch (cleanupError) {
+ console.error('업로드 실패 파일 정리 중 오류:', cleanupError);
+ }
+
+ throw error;
+ }
+ }
+
+ async addFileAttachment(fileId, attachmentData) {
+ if (!isSupabaseConfigured()) {
+ return; // 오프라인 모드에서는 처리하지 않음
+ }
+
+ try {
+ // SupabaseHelper를 통해 첨부파일 정보 저장
+ const result = await SupabaseHelper.addFileAttachment(fileId, attachmentData);
+ return result;
+ } catch (error) {
+ console.error('첨부파일 정보 저장 오류:', error);
+ throw error;
+ }
+ }
+
+ async downloadFileFromStorage(filePath, originalName) {
+ if (!isSupabaseConfigured()) {
+ return; // 오프라인 모드에서는 처리하지 않음
+ }
+
+ try {
+ console.log('파일 다운로드 시도:', filePath, originalName);
+
+ // Storage 버킷 확인
+ const bucketExists = await SupabaseHelper.checkOrCreateBucket();
+ if (!bucketExists) {
+ throw new Error('Storage 버킷 접근 권한이 없습니다. Storage 정책을 확인해주세요.');
+ }
+
+ const url = await SupabaseHelper.getFileUrl(filePath);
+ console.log('다운로드 URL 생성:', url);
+
+ // 다운로드 링크 생성
+ const link = document.createElement('a');
+ link.href = url;
+ link.download = originalName;
+
+ // Ctrl/Cmd 키를 누른 상태에서 클릭하면 "다른 이름으로 저장" 대화상자 표시
+ if (window.event && (window.event.ctrlKey || window.event.metaKey)) {
+ link.target = '_blank';
+ // 브라우저의 다운로드 관리자로 보내기
+ }
+
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+
+ console.log('파일 다운로드 완료:', originalName);
+ } catch (error) {
+ console.error('파일 다운로드 오류:', error);
+
+ // 더 구체적인 오류 메시지 제공
+ let errorMessage = '파일 다운로드 중 오류가 발생했습니다.';
+ if (error.message.includes('Bucket not found')) {
+ errorMessage = 'Storage 버킷이 설정되지 않았습니다. 관리자에게 문의하세요.';
+ } else if (error.message.includes('파일을 찾을 수 없습니다')) {
+ errorMessage = '파일을 찾을 수 없습니다. 파일이 삭제되었을 수 있습니다.';
+ }
+
+ this.showNotification(errorMessage, 'error');
+ }
+ }
+
+ async deleteAttachmentsFromStorage(fileId) {
+ if (!isSupabaseConfigured() || !this.currentUser) {
+ return; // 오프라인 모드에서는 처리하지 않음
+ }
+
+ try {
+ // 파일의 모든 첨부파일 경로 가져오기
+ const { data: attachments, error } = await supabase
+ .from('file_attachments')
+ .select('storage_path')
+ .eq('file_id', fileId);
+
+ if (error) throw error;
+
+ // 각 파일을 Storage에서 삭제
+ for (const attachment of attachments) {
+ await SupabaseHelper.deleteStorageFile(attachment.storage_path);
+ }
+ } catch (error) {
+ console.error('첨부파일 삭제 오류:', error);
+ }
+ }
+
+ handleSubmit(e) {
+ e.preventDefault();
+
+ if (!this.currentUser) {
+ this.showNotification('로그인이 필요합니다.', 'error');
+ return;
+ }
+
+ const title = document.getElementById('fileTitle').value.trim();
+ const description = document.getElementById('fileDescription').value.trim();
+ const category = document.getElementById('fileCategory').value;
+ const tags = document.getElementById('fileTags').value.split(',').map(tag => tag.trim()).filter(tag => tag);
+ const fileInput = document.getElementById('fileUpload');
+
+ if (!title || !category) {
+ alert('제목과 카테고리는 필수 입력 항목입니다.');
+ return;
+ }
+
+ const fileData = {
+ title,
+ description,
+ category,
+ tags,
+ files: [] // 첨부파일 임시 저장용 (Supabase 전송시 제외됨)
+ };
+
+ // this.selectedFiles 사용 (드래그앤드롭으로 선택한 파일들 포함)
+ if (this.selectedFiles && this.selectedFiles.length > 0) {
+ let processedFiles = 0;
+ Array.from(this.selectedFiles).forEach(file => {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ fileData.files.push({
+ name: file.name,
+ size: file.size,
+ type: file.type,
+ data: e.target.result
+ });
+
+ processedFiles++;
+ if (processedFiles === this.selectedFiles.length) {
+ this.addFileToSupabase(fileData);
+ }
+ };
+ reader.readAsDataURL(file);
+ });
+ } else {
+ this.addFileToSupabase(fileData);
+ }
+ }
+
+ async addFile(fileData) {
+ // 호환성을 위해 유지, 실제로는 addFileToSupabase 사용
+ await this.addFileToSupabase(fileData);
+ this.clearForm();
+ }
+
+ // 드래그 앤 드롭 설정
+ setupDragAndDrop() {
+ const uploadArea = document.getElementById('fileUploadArea');
+ const fileInput = document.getElementById('fileUpload');
+
+ // 드래그 이벤트
+ uploadArea.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ uploadArea.classList.add('drag-over');
+ });
+
+ uploadArea.addEventListener('dragleave', (e) => {
+ e.preventDefault();
+ uploadArea.classList.remove('drag-over');
+ });
+
+ uploadArea.addEventListener('drop', (e) => {
+ e.preventDefault();
+ uploadArea.classList.remove('drag-over');
+
+ const files = Array.from(e.dataTransfer.files);
+ this.handleMultipleFiles(files);
+ });
+
+ // 클릭 이벤트
+ uploadArea.addEventListener('click', () => {
+ fileInput.click();
+ });
+ }
+
+ handleFileUpload(e) {
+ const files = Array.from(e.target.files);
+ this.handleMultipleFiles(files);
+ }
+
+ handleMultipleFiles(files) {
+ this.selectedFiles = files;
+ this.updateFilePreview();
+ }
+
+ updateFilePreview() {
+ const container = document.getElementById('selectedFiles');
+
+ if (!this.selectedFiles || this.selectedFiles.length === 0) {
+ container.innerHTML = '';
+ return;
+ }
+
+ const totalSize = this.selectedFiles.reduce((sum, file) => sum + file.size, 0);
+
+ container.innerHTML = `
+
+ 📎 선택된 파일: ${this.selectedFiles.length}개 (총 ${this.formatFileSize(totalSize)})
+
+ ${this.selectedFiles.map((file, index) => `
+
+
+
${this.getFileIcon(file.name)}
+
+
${file.name}
+
${this.formatFileSize(file.size)}
+
+
+
+
+ | 📂 등록된 자료가 없습니다. 새 자료를 추가해보세요! |
+
+ `;
+ return;
+ }
+
+ // 페이지네이션 적용
+ const itemsPerPage = 10;
+ const currentPage = this.currentPage || 1;
+ const startIndex = (currentPage - 1) * itemsPerPage;
+ const endIndex = startIndex + itemsPerPage;
+ const paginatedFiles = sortedFiles.slice(startIndex, endIndex);
+
+ tbody.innerHTML = paginatedFiles.map((file, index) =>
+ this.createFileRowHTML(file, startIndex + index + 1)
+ ).join('');
+ }
+
+ createFileRowHTML(file, rowNumber) {
+ const createdDate = new Date(file.created_at || file.createdAt).toLocaleDateString('ko-KR');
+ const hasAttachments = file.files && file.files.length > 0;
+
+ return `
+
+ | ${rowNumber} |
+
+ ${file.category}
+ |
+
+
+ ${this.escapeHtml(file.title)}
+ ${file.description ? ` ${this.escapeHtml(file.description.substring(0, 80))}${file.description.length > 80 ? '...' : ''}` : ''}
+ ${file.tags && file.tags.length > 0 ?
+ ` ${file.tags.map(tag => `#${this.escapeHtml(tag)}`).join('')} ` : ''
+ }
+ |
+
+ ${hasAttachments ?
+ ` ${file.files.map((f, index) =>
+ `${this.getFileIcon(f.name || f.original_name || 'unknown')}`
+ ).join(' ')} ` :
+ `-`
+ }
+ |
+ ${createdDate} |
+
+
+
+
+ ${hasAttachments ?
+ `` : ''
+ }
+
+ |
+
+ `;
+ }
+
+ createFileHTML(file) {
+ const createdDate = new Date(file.created_at || file.createdAt).toLocaleDateString('ko-KR');
+ const updatedDate = new Date(file.updated_at || file.updatedAt).toLocaleDateString('ko-KR');
+ const tagsHTML = file.tags.map(tag => `${tag}`).join('');
+ const filesHTML = file.files.length > 0 ?
+ `
+ 첨부파일 (${file.files.length}개):
+ ${file.files.map(f => `${this.getFileIcon(f.name || f.original_name || 'unknown')} ${f.name || f.original_name || '파일'}`).join(', ')}
+
` : '';
+
+ return `
+
+
+
+ ${file.description ? `
${this.escapeHtml(file.description)}
` : ''}
+
+ ${file.tags.length > 0 ? `
${tagsHTML}
` : ''}
+
+ ${filesHTML}
+
+
+ ${!file.isReadOnly && this.currentUser ? `
+
+
+ ` : ''}
+ ${file.files.length > 0 ? `` : ''}
+ ${file.isReadOnly ? `👁️ 읽기 전용` : ''}
+
+
🔍 검색 결과가 없습니다. 다른 키워드로 검색해보세요!
📂 등록된 자료가 없습니다. 새 자료를 추가해보세요!
📚 자료실 관리 시스템
파일과 문서를 효율적으로 관리하세요
-
-
-
-
-
-
-
- 🟢 온라인
-
-
-
@@ -38,48 +27,6 @@
-
-
-
-
📂 등록된 자료가 없습니다. 새 자료를 추가해보세요!
-
+
+
+
+
+ | 번호 |
+ 카테고리 |
+ 제목 |
+ 첨부 |
+ 등록일 |
+ 다운로드 |
+
+
+
+
+ | 📂 등록된 자료가 없습니다. |
+
+
+
+
+
+
- 👤 게스트 모드 - 파일 보기 및 다운로드만 가능합니다
-
-
- `;
- container.insertBefore(guestNotice, container.firstChild.nextSibling);
- }
-
- hideGuestMode() {
- const guestNotice = document.getElementById('guestModeNotice');
- if (guestNotice) {
- guestNotice.remove();
- }
- }
-
- // 공개 파일 로드 (게스트용)
- async loadPublicFiles() {
- if (isSupabaseConfigured()) {
- try {
- // Supabase에서 모든 파일 로드 (RLS로 공개 파일만 접근 가능)
- const data = await SupabaseHelper.getFiles('public');
- this.files = data.map(file => ({
- ...file,
- files: file.file_attachments || [],
- isReadOnly: true
- }));
- } catch (error) {
- console.error('공개 파일 로딩 오류:', error);
- // localStorage 폴백
- this.files = this.loadFiles().map(file => ({ ...file, isReadOnly: true }));
- }
- } else {
- // 오프라인 모드: localStorage의 파일을 읽기 전용으로 로드
- this.files = this.loadFiles().map(file => ({ ...file, isReadOnly: true }));
- }
- this.renderFiles();
- this.updateEmptyState();
- }
-
- setupOnlineStatusListener() {
- window.addEventListener('online', () => {
- this.isOnline = true;
- this.showNotification('온라인 상태가 되었습니다.', 'success');
- });
-
- window.addEventListener('offline', () => {
- this.isOnline = false;
- this.showNotification('오프라인 상태입니다.', 'info');
- });
- }
-
- // Supabase 데이터베이스 연동 메서드들
- async loadUserFiles() {
- if (!this.currentUser || !isSupabaseConfigured()) {
- this.files = this.loadFiles(); // localStorage 폴백
- this.updateSyncStatus('offline');
- return;
- }
-
- try {
- this.updateSyncStatus('syncing');
- const data = await SupabaseHelper.getFiles(this.currentUser.id);
- this.files = data.map(file => ({
- ...file,
- files: file.file_attachments || [] // 첨부파일 정보 매핑
- }));
- this.renderFiles();
- this.updateEmptyState();
- this.updateSyncStatus('online');
- } catch (error) {
- console.error('파일 로딩 오류:', error);
- this.showNotification('파일을 불러오는 중 오류가 발생했습니다.', 'error');
- this.updateSyncStatus('error');
- // 오류 시 localStorage 폴백
- this.files = this.loadFiles();
- }
- }
-
- async addFileToSupabase(fileData) {
- if (!this.currentUser || !isSupabaseConfigured()) {
- return this.addFileLocally(fileData);
- }
-
- try {
- this.updateSyncStatus('syncing');
- console.log('파일 데이터 추가 중...', fileData);
-
- const result = await SupabaseHelper.addFile(fileData, this.currentUser.id);
- console.log('파일 데이터 추가 성공:', result);
-
- // 첨부파일이 있는 경우 파일 업로드 처리
- if (fileData.files && fileData.files.length > 0) {
- console.log(`${fileData.files.length}개의 첨부파일 업로드 시작...`);
- await this.uploadAttachments(result.id, fileData.files);
- console.log('모든 첨부파일 업로드 완료');
- }
-
- this.showNotification('새 자료가 성공적으로 추가되었습니다!', 'success');
- await this.loadUserFiles(); // 목록 새로고침
- this.updateSyncStatus('online');
- this.clearForm(); // 폼 초기화
-
- } catch (error) {
- console.error('파일 추가 오류:', error);
-
- // 더 구체적인 에러 메시지 제공
- let errorMessage = '파일 추가 중 오류가 발생했습니다.';
- if (error.message) {
- errorMessage += ` (${error.message})`;
- }
-
- this.showNotification(errorMessage, 'error');
- this.updateSyncStatus('error');
-
- // 콘솔에 상세 오류 정보 출력
- if (error.details) {
- console.error('오류 상세:', error.details);
- }
- if (error.hint) {
- console.error('오류 힌트:', error.hint);
- }
- }
- }
-
- async updateFileInSupabase(id, updates) {
- if (!this.currentUser || !isSupabaseConfigured()) {
- return this.updateFileLocally(id, updates);
- }
-
- try {
- await SupabaseHelper.updateFile(id, updates, this.currentUser.id);
- this.showNotification('자료가 성공적으로 수정되었습니다!', 'success');
- await this.loadUserFiles(); // 목록 새로고침
- } catch (error) {
- console.error('파일 수정 오류:', error);
- this.showNotification('파일 수정 중 오류가 발생했습니다.', 'error');
- }
- }
-
- async deleteFileFromSupabase(id) {
- if (!this.currentUser || !isSupabaseConfigured()) {
- return this.deleteFileLocally(id);
- }
-
- try {
- // 첨부파일들을 Storage에서 삭제
- await this.deleteAttachmentsFromStorage(id);
-
- // 데이터베이스에서 파일 삭제 (CASCADE로 첨부파일 정보도 함께 삭제)
- await SupabaseHelper.deleteFile(id, this.currentUser.id);
- this.showNotification('자료가 성공적으로 삭제되었습니다!', 'success');
- await this.loadUserFiles(); // 목록 새로고침
- } catch (error) {
- console.error('파일 삭제 오류:', error);
- this.showNotification('파일 삭제 중 오류가 발생했습니다.', 'error');
- }
- }
-
- // localStorage 폴백 메서드들
- addFileLocally(fileData) {
- // 로컬 저장용 데이터 생성 (ID와 타임스탬프 추가)
- const localFileData = {
- id: this.generateId(),
- ...fileData,
- created_at: new Date().toISOString(),
- updated_at: new Date().toISOString()
- };
-
- this.files.push(localFileData);
- this.saveFiles();
- this.renderFiles();
- this.updateEmptyState();
- this.showNotification('새 자료가 성공적으로 추가되었습니다! (로컬 저장)', 'success');
- this.clearForm(); // 폼 초기화
- }
-
- updateFileLocally(id, updates) {
- const fileIndex = this.files.findIndex(f => f.id === id);
- if (fileIndex !== -1) {
- this.files[fileIndex] = {
- ...this.files[fileIndex],
- ...updates,
- updated_at: new Date().toISOString()
- };
- this.saveFiles();
- this.renderFiles();
- this.showNotification('자료가 성공적으로 수정되었습니다! (로컬 저장)', 'success');
- }
- }
-
- deleteFileLocally(id) {
- this.files = this.files.filter(f => f.id !== id);
- this.saveFiles();
- this.renderFiles();
- this.updateEmptyState();
- this.showNotification('자료가 성공적으로 삭제되었습니다! (로컬 저장)', 'success');
- }
-
- // 실시간 구독 관련
- setupRealtimeSubscription() {
- if (!this.currentUser || !isSupabaseConfigured()) return;
-
- this.realtimeSubscription = SupabaseHelper.subscribeToFiles(
- this.currentUser.id,
- (payload) => {
- console.log('실시간 업데이트:', payload);
- this.loadUserFiles(); // 변경사항이 있으면 목록 새로고침
- }
- );
- }
-
- cleanupRealtimeSubscription() {
- if (this.realtimeSubscription) {
- this.realtimeSubscription.unsubscribe();
- this.realtimeSubscription = null;
- }
- }
-
- // 파일 업로드 관련 메서드들
- async uploadAttachments(fileId, attachments) {
- if (!isSupabaseConfigured() || !this.currentUser) {
- console.log('오프라인 모드: 첨부파일을 base64로 저장합니다.');
- return; // 오프라인 모드에서는 base64로 저장된 상태 유지
- }
-
- const uploadedFiles = [];
-
- try {
- for (let i = 0; i < attachments.length; i++) {
- const attachment = attachments[i];
-
- try {
- console.log(`파일 업로드 중... (${i + 1}/${attachments.length}): ${attachment.name}`);
-
- // base64 데이터를 Blob으로 변환
- const response = await fetch(attachment.data);
- const blob = await response.blob();
-
- // 안전한 파일명 생성 (고유한 이름으로 저장, 원본명은 DB에 저장)
- const fileExtension = this.getFileExtension(attachment.name);
- const safeFileName = `${Date.now()}_${Math.random().toString(36).substr(2, 9)}${fileExtension}`;
- const filePath = `${this.currentUser.id}/${fileId}/${safeFileName}`;
-
- // Storage 버킷 확인
- const bucketExists = await SupabaseHelper.checkOrCreateBucket();
- if (!bucketExists) {
- throw new Error('Storage 버킷 접근 권한이 없습니다. Storage 정책을 확인해주세요.');
- }
-
- // Supabase Storage에 업로드
- const uploadResult = await SupabaseHelper.uploadFile(blob, filePath);
- console.log('Storage 업로드 성공:', uploadResult);
-
- // 데이터베이스에 첨부파일 정보 저장
- const attachmentResult = await this.addFileAttachment(fileId, {
- original_name: attachment.name,
- storage_path: filePath,
- file_size: attachment.size || blob.size,
- mime_type: attachment.type || blob.type
- });
-
- uploadedFiles.push(attachmentResult);
- console.log('첨부파일 정보 저장 성공:', attachmentResult);
-
- } catch (fileError) {
- console.error(`파일 "${attachment.name}" 업로드 실패:`, fileError);
- throw new Error(`파일 "${attachment.name}" 업로드에 실패했습니다: ${fileError.message}`);
- }
- }
-
- console.log('모든 첨부파일 업로드 완료:', uploadedFiles);
- return uploadedFiles;
-
- } catch (error) {
- console.error('파일 업로드 오류:', error);
-
- // 부분적으로 업로드된 파일들 정리 (선택사항)
- try {
- for (const uploadedFile of uploadedFiles) {
- if (uploadedFile.storage_path) {
- await SupabaseHelper.deleteStorageFile(uploadedFile.storage_path);
- }
- }
- } catch (cleanupError) {
- console.error('업로드 실패 파일 정리 중 오류:', cleanupError);
- }
-
- throw error;
- }
- }
-
- async addFileAttachment(fileId, attachmentData) {
- if (!isSupabaseConfigured()) {
- return; // 오프라인 모드에서는 처리하지 않음
- }
-
- try {
- // SupabaseHelper를 통해 첨부파일 정보 저장
- const result = await SupabaseHelper.addFileAttachment(fileId, attachmentData);
- return result;
- } catch (error) {
- console.error('첨부파일 정보 저장 오류:', error);
- throw error;
- }
- }
-
- async downloadFileFromStorage(filePath, originalName) {
- if (!isSupabaseConfigured()) {
- return; // 오프라인 모드에서는 처리하지 않음
- }
-
- try {
- console.log('파일 다운로드 시도:', filePath, originalName);
-
- // Storage 버킷 확인
- const bucketExists = await SupabaseHelper.checkOrCreateBucket();
- if (!bucketExists) {
- throw new Error('Storage 버킷 접근 권한이 없습니다. Storage 정책을 확인해주세요.');
- }
-
- const url = await SupabaseHelper.getFileUrl(filePath);
- console.log('다운로드 URL 생성:', url);
-
- // 다운로드 링크 생성
- const link = document.createElement('a');
- link.href = url;
- link.download = originalName;
-
- // Ctrl/Cmd 키를 누른 상태에서 클릭하면 "다른 이름으로 저장" 대화상자 표시
- if (window.event && (window.event.ctrlKey || window.event.metaKey)) {
- link.target = '_blank';
- // 브라우저의 다운로드 관리자로 보내기
- }
-
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
-
- console.log('파일 다운로드 완료:', originalName);
- } catch (error) {
- console.error('파일 다운로드 오류:', error);
-
- // 더 구체적인 오류 메시지 제공
- let errorMessage = '파일 다운로드 중 오류가 발생했습니다.';
- if (error.message.includes('Bucket not found')) {
- errorMessage = 'Storage 버킷이 설정되지 않았습니다. 관리자에게 문의하세요.';
- } else if (error.message.includes('파일을 찾을 수 없습니다')) {
- errorMessage = '파일을 찾을 수 없습니다. 파일이 삭제되었을 수 있습니다.';
- }
-
- this.showNotification(errorMessage, 'error');
- }
- }
-
- async deleteAttachmentsFromStorage(fileId) {
- if (!isSupabaseConfigured() || !this.currentUser) {
- return; // 오프라인 모드에서는 처리하지 않음
- }
-
- try {
- // 파일의 모든 첨부파일 경로 가져오기
- const { data: attachments, error } = await supabase
- .from('file_attachments')
- .select('storage_path')
- .eq('file_id', fileId);
-
- if (error) throw error;
-
- // 각 파일을 Storage에서 삭제
- for (const attachment of attachments) {
- await SupabaseHelper.deleteStorageFile(attachment.storage_path);
- }
- } catch (error) {
- console.error('첨부파일 삭제 오류:', error);
- }
- }
-
- handleSubmit(e) {
- e.preventDefault();
-
- if (!this.currentUser) {
- this.showNotification('로그인이 필요합니다.', 'error');
- return;
- }
-
- const title = document.getElementById('fileTitle').value.trim();
- const description = document.getElementById('fileDescription').value.trim();
- const category = document.getElementById('fileCategory').value;
- const tags = document.getElementById('fileTags').value.split(',').map(tag => tag.trim()).filter(tag => tag);
- const fileInput = document.getElementById('fileUpload');
-
- if (!title || !category) {
- alert('제목과 카테고리는 필수 입력 항목입니다.');
- return;
- }
-
- const fileData = {
- title,
- description,
- category,
- tags,
- files: [] // 첨부파일 임시 저장용 (Supabase 전송시 제외됨)
- };
-
- if (fileInput.files.length > 0) {
- Array.from(fileInput.files).forEach(file => {
- const reader = new FileReader();
- reader.onload = (e) => {
- fileData.files.push({
- name: file.name,
- size: file.size,
- type: file.type,
- data: e.target.result
- });
-
- if (fileData.files.length === fileInput.files.length) {
- this.addFileToSupabase(fileData);
- }
- };
- reader.readAsDataURL(file);
- });
- } else {
- this.addFileToSupabase(fileData);
- }
- }
-
- async addFile(fileData) {
- // 호환성을 위해 유지, 실제로는 addFileToSupabase 사용
- await this.addFileToSupabase(fileData);
- this.clearForm();
- }
-
- handleFileUpload(e) {
- const files = Array.from(e.target.files);
- const filesList = document.querySelector('.files-list') || this.createFilesList();
-
- filesList.innerHTML = '';
-
- files.forEach((file, index) => {
- const fileItem = document.createElement('div');
- fileItem.className = 'file-attachment';
- fileItem.innerHTML = `
- 📎 ${file.name} (${this.formatFileSize(file.size)})
-
- `;
- filesList.appendChild(fileItem);
- });
- }
-
- createFilesList() {
- const fileGroup = document.querySelector('#fileUpload').closest('.form-group');
- const filesList = document.createElement('div');
- filesList.className = 'files-list';
- fileGroup.appendChild(filesList);
- return filesList;
- }
-
- removeFileFromInput(index) {
- const fileInput = document.getElementById('fileUpload');
- const dt = new DataTransfer();
- const files = Array.from(fileInput.files);
-
- files.forEach((file, i) => {
- if (i !== index) {
- dt.items.add(file);
- }
- });
-
- fileInput.files = dt.files;
- this.handleFileUpload({ target: fileInput });
- }
-
- renderFiles() {
- const container = document.getElementById('fileList');
- const sortBy = document.getElementById('sortBy').value;
-
- let sortedFiles = [...this.files];
-
- switch (sortBy) {
- case 'title':
- sortedFiles.sort((a, b) => a.title.localeCompare(b.title));
- break;
- case 'category':
- sortedFiles.sort((a, b) => a.category.localeCompare(b.category));
- break;
- case 'date':
- default:
- sortedFiles.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
- break;
- }
-
- if (sortedFiles.length === 0) {
- container.innerHTML = '📂 등록된 자료가 없습니다. 새 자료를 추가해보세요!
- 첨부파일 (${file.files.length}개):
- ${file.files.map(f => `📎 ${f.name}`).join(', ')}
-
` : '';
-
- return `
-
-
-
- ${file.description ? `
${this.escapeHtml(file.description)}
` : ''}
-
- ${file.tags.length > 0 ? `
${tagsHTML}
` : ''}
-
- ${filesHTML}
-
-
- ${!file.isReadOnly && this.currentUser ? `
-
-
- ` : ''}
- ${file.files.length > 0 ? `` : ''}
- ${file.isReadOnly ? `👁️ 읽기 전용` : ''}
-
-
🔍 검색 결과가 없습니다. 다른 키워드로 검색해보세요!
+ | 📂 조건에 맞는 자료가 없습니다. |
+
+ `;
return;
}
- container.innerHTML = sortedFiles.map(file => this.createFileHTML(file)).join('');
+ fileList.innerHTML = paginatedFiles.map((file, index) =>
+ this.createFileRowHTML(file, startIndex + index + 1)
+ ).join('');
}
- clearForm() {
- document.getElementById('fileForm').reset();
- const filesList = document.querySelector('.files-list');
- if (filesList) {
- filesList.innerHTML = '';
+ createFileRowHTML(file, rowNumber) {
+ const createdDate = new Date(file.created_at || file.createdAt).toLocaleDateString('ko-KR');
+ const hasAttachments = file.files && file.files.length > 0;
+
+ return `
+
+ | ${rowNumber} |
+
+ ${file.category}
+ |
+
+
+ ${this.escapeHtml(file.title)}
+ ${file.description ? ` ${this.escapeHtml(file.description)}` : ''}
+ ${file.tags && file.tags.length > 0 ?
+ ` ${file.tags.map(tag => `#${this.escapeHtml(tag)}`).join('')} ` : ''
+ }
+ |
+
+ ${hasAttachments ?
+ ` ${file.files.map((f, index) =>
+ `${this.getFileIcon(f.name || f.original_name || 'unknown')}`
+ ).join(' ')} ` :
+ `-`
+ }
+ |
+ ${createdDate} |
+
+ ${hasAttachments ?
+ `` :
+ `-`
+ }
+ |
+
+ `;
+ }
+
+ getFileIcon(fileName) {
+ const ext = fileName.split('.').pop().toLowerCase();
+ const iconMap = {
+ 'pdf': '📄',
+ 'doc': '📝', 'docx': '📝',
+ 'xls': '📊', 'xlsx': '📊',
+ 'ppt': '📽️', 'pptx': '📽️',
+ 'jpg': '🖼️', 'jpeg': '🖼️', 'png': '🖼️', 'gif': '🖼️',
+ 'mp4': '🎥', 'avi': '🎥', 'mov': '🎥',
+ 'mp3': '🎵', 'wav': '🎵',
+ 'zip': '📦', 'rar': '📦',
+ 'txt': '📄'
+ };
+ return iconMap[ext] || '📄';
+ }
+
+ viewFileInfo(id) {
+ const file = this.files.find(f => f.id === id);
+ if (!file) return;
+
+ let info = `📋 자료 정보\n\n`;
+ info += `📌 제목: ${file.title}\n`;
+ info += `📂 카테고리: ${file.category}\n`;
+ info += `📅 등록일: ${new Date(file.created_at || file.createdAt).toLocaleDateString('ko-KR')}\n`;
+ if (file.description) info += `📝 설명: ${file.description}\n`;
+ if (file.tags && file.tags.length > 0) info += `🏷️ 태그: ${file.tags.join(', ')}\n`;
+ if (file.files && file.files.length > 0) {
+ info += `\n📎 첨부파일 (${file.files.length}개):\n`;
+ file.files.forEach((attachment, index) => {
+ const icon = this.getFileIcon(attachment.name || attachment.original_name || 'unknown');
+ info += ` ${index + 1}. ${icon} ${attachment.name || attachment.original_name || '파일'}\n`;
+ });
+ }
+
+ alert(info);
+ }
+
+ async downloadFiles(id) {
+ const file = this.files.find(f => f.id === id);
+ if (!file) {
+ this.showNotification('파일을 찾을 수 없습니다.', 'error');
+ return;
+ }
+ if (!file.files || file.files.length === 0) {
+ this.showNotification('첨부파일이 없습니다.', 'error');
+ return;
+ }
+
+ try {
+ if (file.files.length === 1) {
+ // 단일 파일: 직접 다운로드
+ await this.downloadSingleFileData(file.files[0]);
+ this.showNotification(`파일 다운로드 완료: ${file.files[0].name || file.files[0].original_name}`, 'success');
+ } else {
+ // 다중 파일: localStorage에서 base64 데이터를 각각 다운로드
+ for (const fileData of file.files) {
+ await this.downloadSingleFileData(fileData);
+ }
+ this.showNotification(`${file.files.length}개 파일 다운로드 완료`, 'success');
+ }
+ } catch (error) {
+ console.error('파일 다운로드 오류:', error);
+ this.showNotification('파일 다운로드 중 오류가 발생했습니다.', 'error');
}
}
- formatFileSize(bytes) {
- if (bytes === 0) return '0 Bytes';
- const k = 1024;
- const sizes = ['Bytes', 'KB', 'MB', 'GB'];
- const i = Math.floor(Math.log(bytes) / Math.log(k));
- return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+ async downloadSingleFile(fileId, fileIndex) {
+ const file = this.files.find(f => f.id === fileId);
+ if (!file) {
+ this.showNotification('파일을 찾을 수 없습니다.', 'error');
+ return;
+ }
+ if (!file.files || !file.files[fileIndex]) {
+ this.showNotification('첨부파일을 찾을 수 없습니다.', 'error');
+ return;
+ }
+
+ try {
+ const fileData = file.files[fileIndex];
+ await this.downloadSingleFileData(fileData);
+ this.showNotification(`파일 다운로드 완료: ${fileData.name || fileData.original_name}`, 'success');
+ } catch (error) {
+ console.error('개별 파일 다운로드 오류:', error);
+ this.showNotification('파일 다운로드 중 오류가 발생했습니다.', 'error');
+ }
}
- updateEmptyState() {
- const container = document.getElementById('fileList');
- if (this.files.length === 0) {
- container.innerHTML = '📂 등록된 자료가 없습니다. 새 자료를 추가해보세요!