🚀 배포용: PDF 뷰어 개선 및 서적별 UI 데본씽크 스타일 적용
✨ 주요 개선사항: - PDF API 500 에러 수정 (한글 파일명 UTF-8 인코딩 처리) - PDF 뷰어 기능 완전 구현 (PDF.js 통합, 네비게이션, 확대/축소) - 서적별 문서 그룹화 UI 데본씽크 스타일로 개선 - PDF Manager 페이지 서적별 보기 기능 추가 - Alpine.js 로드 순서 최적화로 JavaScript 에러 해결 🎨 UI/UX 개선: - 확장/축소 가능한 아코디언 스타일 서적 목록 - 간결하고 직관적인 데본씽크 스타일 인터페이스 - PDF 상태 표시 (HTML 연결, 서적 분류) - 반응형 디자인 및 부드러운 애니메이션 🔧 기술적 개선: - PDF.js 워커 설정 및 토큰 인증 처리 - 서적별 PDF 자동 그룹화 로직 - Alpine.js 컴포넌트 초기화 최적화
This commit is contained in:
hyungi
521
frontend/static/js/viewer/utils/cached-api.js
Normal file
521
frontend/static/js/viewer/utils/cached-api.js
Normal file
@@ -0,0 +1,521 @@
|
||||
/**
|
||||
* CachedAPI - 캐싱이 적용된 API 래퍼
|
||||
* 기존 DocumentServerAPI를 확장하여 캐싱 기능을 추가합니다.
|
||||
*/
|
||||
class CachedAPI {
|
||||
constructor(baseAPI) {
|
||||
this.api = baseAPI;
|
||||
this.cache = window.cacheManager;
|
||||
|
||||
console.log('🚀 CachedAPI 초기화 완료');
|
||||
}
|
||||
|
||||
/**
|
||||
* 캐싱이 적용된 GET 요청
|
||||
*/
|
||||
async get(endpoint, params = {}, options = {}) {
|
||||
const {
|
||||
useCache = true,
|
||||
category = 'api',
|
||||
ttl = null,
|
||||
forceRefresh = false
|
||||
} = options;
|
||||
|
||||
// 캐시 키 생성
|
||||
const cacheKey = this.generateCacheKey(endpoint, params);
|
||||
|
||||
// 강제 새로고침이 아니고 캐시 사용 설정인 경우 캐시 확인
|
||||
if (useCache && !forceRefresh) {
|
||||
const cached = this.cache.get(cacheKey, category);
|
||||
if (cached) {
|
||||
console.log(`🚀 API 캐시 사용: ${endpoint}`);
|
||||
return cached;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
console.log(`🌐 API 호출: ${endpoint}`);
|
||||
|
||||
// 실제 백엔드 API 엔드포인트로 매핑
|
||||
let response;
|
||||
if (endpoint === '/highlights' && params.document_id) {
|
||||
// 실제: /highlights/document/{documentId}
|
||||
response = await this.api.get(`/highlights/document/${params.document_id}`);
|
||||
} else if (endpoint === '/notes' && params.document_id) {
|
||||
// 실제: /notes/document/{documentId}
|
||||
response = await this.api.get(`/notes/document/${params.document_id}`);
|
||||
} else if (endpoint === '/bookmarks' && params.document_id) {
|
||||
// 실제: /bookmarks/document/{documentId}
|
||||
response = await this.api.get(`/bookmarks/document/${params.document_id}`);
|
||||
} else if (endpoint === '/document-links' && params.document_id) {
|
||||
// 실제: /documents/{documentId}/links
|
||||
response = await this.api.get(`/documents/${params.document_id}/links`);
|
||||
} else if (endpoint === '/document-links/backlinks' && params.target_document_id) {
|
||||
// 실제: /documents/{documentId}/backlinks
|
||||
response = await this.api.get(`/documents/${params.target_document_id}/backlinks`);
|
||||
} else if (endpoint.startsWith('/documents/') && endpoint.endsWith('/links')) {
|
||||
// /documents/{documentId}/links 패턴
|
||||
const documentId = endpoint.split('/')[2];
|
||||
console.log('🔗 CachedAPI: 링크 API 직접 호출:', documentId);
|
||||
response = await this.api.getDocumentLinks(documentId);
|
||||
} else if (endpoint.startsWith('/documents/') && endpoint.endsWith('/backlinks')) {
|
||||
// /documents/{documentId}/backlinks 패턴
|
||||
const documentId = endpoint.split('/')[2];
|
||||
console.log('🔗 CachedAPI: 백링크 API 직접 호출:', documentId);
|
||||
response = await this.api.getDocumentBacklinks(documentId);
|
||||
} else if (endpoint.startsWith('/documents/') && endpoint.match(/^\/documents\/[^\/]+$/)) {
|
||||
// /documents/{documentId} 패턴만 (추가 경로 없음)
|
||||
const documentId = endpoint.split('/')[2];
|
||||
console.log('📄 CachedAPI: 문서 API 호출:', documentId);
|
||||
response = await this.api.getDocument(documentId);
|
||||
} else {
|
||||
// 기본 API 호출 (기존 방식)
|
||||
response = await this.api.get(endpoint, params);
|
||||
}
|
||||
|
||||
// 성공적인 응답만 캐시에 저장
|
||||
if (useCache && response) {
|
||||
this.cache.set(cacheKey, response, category, ttl);
|
||||
console.log(`💾 API 응답 캐시 저장: ${endpoint}`);
|
||||
}
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error(`❌ API 호출 실패: ${endpoint}`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 캐싱이 적용된 POST 요청 (일반적으로 캐시하지 않음)
|
||||
*/
|
||||
async post(endpoint, data = {}, options = {}) {
|
||||
const {
|
||||
invalidateCache = true,
|
||||
invalidateCategories = []
|
||||
} = options;
|
||||
|
||||
try {
|
||||
const response = await this.api.post(endpoint, data);
|
||||
|
||||
// POST 후 관련 캐시 무효화
|
||||
if (invalidateCache) {
|
||||
this.invalidateRelatedCache(endpoint, invalidateCategories);
|
||||
}
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error(`❌ API POST 실패: ${endpoint}`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 캐싱이 적용된 PUT 요청
|
||||
*/
|
||||
async put(endpoint, data = {}, options = {}) {
|
||||
const {
|
||||
invalidateCache = true,
|
||||
invalidateCategories = []
|
||||
} = options;
|
||||
|
||||
try {
|
||||
const response = await this.api.put(endpoint, data);
|
||||
|
||||
// PUT 후 관련 캐시 무효화
|
||||
if (invalidateCache) {
|
||||
this.invalidateRelatedCache(endpoint, invalidateCategories);
|
||||
}
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error(`❌ API PUT 실패: ${endpoint}`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 캐싱이 적용된 DELETE 요청
|
||||
*/
|
||||
async delete(endpoint, options = {}) {
|
||||
const {
|
||||
invalidateCache = true,
|
||||
invalidateCategories = []
|
||||
} = options;
|
||||
|
||||
try {
|
||||
const response = await this.api.delete(endpoint);
|
||||
|
||||
// DELETE 후 관련 캐시 무효화
|
||||
if (invalidateCache) {
|
||||
this.invalidateRelatedCache(endpoint, invalidateCategories);
|
||||
}
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error(`❌ API DELETE 실패: ${endpoint}`, error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 문서 데이터 조회 (캐싱 최적화)
|
||||
*/
|
||||
async getDocument(documentId, contentType = 'document') {
|
||||
const cacheKey = `document_${documentId}_${contentType}`;
|
||||
|
||||
// 캐시 확인
|
||||
const cached = this.cache.get(cacheKey, 'document');
|
||||
if (cached) {
|
||||
console.log(`🚀 문서 캐시 사용: ${documentId}`);
|
||||
return cached;
|
||||
}
|
||||
|
||||
// 기존 API 메서드 직접 사용
|
||||
try {
|
||||
const result = await this.api.getDocument(documentId);
|
||||
|
||||
// 캐시에 저장
|
||||
this.cache.set(cacheKey, result, 'document', 30 * 60 * 1000);
|
||||
console.log(`💾 문서 캐시 저장: ${documentId}`);
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('문서 로드 실패:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 하이라이트 조회 (캐싱 최적화)
|
||||
*/
|
||||
async getHighlights(documentId, contentType = 'document') {
|
||||
const cacheKey = `highlights_${documentId}_${contentType}`;
|
||||
|
||||
// 캐시 확인
|
||||
const cached = this.cache.get(cacheKey, 'highlights');
|
||||
if (cached) {
|
||||
console.log(`🚀 하이라이트 캐시 사용: ${documentId}`);
|
||||
return cached;
|
||||
}
|
||||
|
||||
// 기존 API 메서드 직접 사용
|
||||
try {
|
||||
let result;
|
||||
if (contentType === 'note') {
|
||||
result = await this.api.get(`/note/${documentId}/highlights`).catch(() => []);
|
||||
} else {
|
||||
result = await this.api.getDocumentHighlights(documentId).catch(() => []);
|
||||
}
|
||||
|
||||
// 캐시에 저장
|
||||
this.cache.set(cacheKey, result, 'highlights', 10 * 60 * 1000);
|
||||
console.log(`💾 하이라이트 캐시 저장: ${documentId}`);
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('하이라이트 로드 실패:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 메모 조회 (캐싱 최적화)
|
||||
*/
|
||||
async getNotes(documentId, contentType = 'document') {
|
||||
const cacheKey = `notes_${documentId}_${contentType}`;
|
||||
|
||||
// 캐시 확인
|
||||
const cached = this.cache.get(cacheKey, 'notes');
|
||||
if (cached) {
|
||||
console.log(`🚀 메모 캐시 사용: ${documentId}`);
|
||||
return cached;
|
||||
}
|
||||
|
||||
// 하이라이트 메모 API 사용
|
||||
try {
|
||||
let result;
|
||||
if (contentType === 'note') {
|
||||
// 노트 문서의 하이라이트 메모
|
||||
result = await this.api.get(`/highlight-notes/`, { note_document_id: documentId }).catch(() => []);
|
||||
} else {
|
||||
// 일반 문서의 하이라이트 메모
|
||||
result = await this.api.get(`/highlight-notes/`, { document_id: documentId }).catch(() => []);
|
||||
}
|
||||
|
||||
// 캐시에 저장
|
||||
this.cache.set(cacheKey, result, 'notes', 10 * 60 * 1000);
|
||||
console.log(`💾 메모 캐시 저장: ${documentId} (${result.length}개)`);
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('❌ 메모 로드 실패:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 북마크 조회 (캐싱 최적화)
|
||||
*/
|
||||
async getBookmarks(documentId) {
|
||||
const cacheKey = `bookmarks_${documentId}`;
|
||||
|
||||
// 캐시 확인
|
||||
const cached = this.cache.get(cacheKey, 'bookmarks');
|
||||
if (cached) {
|
||||
console.log(`🚀 북마크 캐시 사용: ${documentId}`);
|
||||
return cached;
|
||||
}
|
||||
|
||||
// 기존 API 메서드 직접 사용
|
||||
try {
|
||||
const result = await this.api.getDocumentBookmarks(documentId).catch(() => []);
|
||||
|
||||
// 캐시에 저장
|
||||
this.cache.set(cacheKey, result, 'bookmarks', 15 * 60 * 1000);
|
||||
console.log(`💾 북마크 캐시 저장: ${documentId}`);
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('북마크 로드 실패:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 문서 링크 조회 (캐싱 최적화)
|
||||
*/
|
||||
async getDocumentLinks(documentId) {
|
||||
const cacheKey = `links_${documentId}`;
|
||||
|
||||
// 캐시 확인
|
||||
const cached = this.cache.get(cacheKey, 'links');
|
||||
if (cached) {
|
||||
console.log(`🚀 문서 링크 캐시 사용: ${documentId}`);
|
||||
return cached;
|
||||
}
|
||||
|
||||
// 기존 API 메서드 직접 사용
|
||||
try {
|
||||
const result = await this.api.getDocumentLinks(documentId).catch(() => []);
|
||||
|
||||
// 캐시에 저장
|
||||
this.cache.set(cacheKey, result, 'links', 15 * 60 * 1000);
|
||||
console.log(`💾 문서 링크 캐시 저장: ${documentId}`);
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('문서 링크 로드 실패:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 백링크 조회 (캐싱 최적화)
|
||||
*/
|
||||
async getBacklinks(documentId) {
|
||||
const cacheKey = `backlinks_${documentId}`;
|
||||
|
||||
// 캐시 확인
|
||||
const cached = this.cache.get(cacheKey, 'links');
|
||||
if (cached) {
|
||||
console.log(`🚀 백링크 캐시 사용: ${documentId}`);
|
||||
return cached;
|
||||
}
|
||||
|
||||
// 기존 API 메서드 직접 사용
|
||||
try {
|
||||
const result = await this.api.getDocumentBacklinks(documentId).catch(() => []);
|
||||
|
||||
// 캐시에 저장
|
||||
this.cache.set(cacheKey, result, 'links', 15 * 60 * 1000);
|
||||
console.log(`💾 백링크 캐시 저장: ${documentId}`);
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('백링크 로드 실패:', error);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 네비게이션 정보 조회 (캐싱 최적화)
|
||||
*/
|
||||
async getNavigation(documentId, contentType = 'document') {
|
||||
return await this.get('/documents/navigation', { document_id: documentId, content_type: contentType }, {
|
||||
category: 'navigation',
|
||||
ttl: 60 * 60 * 1000 // 1시간
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 하이라이트 생성 (캐시 무효화)
|
||||
*/
|
||||
async createHighlight(data) {
|
||||
return await this.post('/highlights/', data, {
|
||||
invalidateCategories: ['highlights', 'notes']
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 메모 생성 (캐시 무효화)
|
||||
*/
|
||||
async createNote(data) {
|
||||
return await this.post('/highlight-notes/', data, {
|
||||
invalidateCategories: ['notes', 'highlights']
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 메모 업데이트 (캐시 무효화)
|
||||
*/
|
||||
async updateNote(noteId, data) {
|
||||
return await this.put(`/highlight-notes/${noteId}`, data, {
|
||||
invalidateCategories: ['notes', 'highlights']
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 메모 삭제 (캐시 무효화)
|
||||
*/
|
||||
async deleteNote(noteId) {
|
||||
return await this.delete(`/highlight-notes/${noteId}`, {
|
||||
invalidateCategories: ['notes', 'highlights']
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 북마크 생성 (캐시 무효화)
|
||||
*/
|
||||
async createBookmark(data) {
|
||||
return await this.post('/bookmarks/', data, {
|
||||
invalidateCategories: ['bookmarks']
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 링크 생성 (캐시 무효화)
|
||||
*/
|
||||
async createDocumentLink(data) {
|
||||
return await this.post('/document-links/', data, {
|
||||
invalidateCategories: ['links']
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 캐시 키 생성
|
||||
*/
|
||||
generateCacheKey(endpoint, params) {
|
||||
const sortedParams = Object.keys(params)
|
||||
.sort()
|
||||
.reduce((result, key) => {
|
||||
result[key] = params[key];
|
||||
return result;
|
||||
}, {});
|
||||
|
||||
return `${endpoint}_${JSON.stringify(sortedParams)}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 관련 캐시 무효화
|
||||
*/
|
||||
invalidateRelatedCache(endpoint, categories = []) {
|
||||
console.log(`🗑️ 캐시 무효화: ${endpoint}`);
|
||||
|
||||
// 기본 무효화 규칙
|
||||
const defaultInvalidations = {
|
||||
'/highlights': ['highlights', 'notes'],
|
||||
'/notes': ['notes', 'highlights'],
|
||||
'/bookmarks': ['bookmarks'],
|
||||
'/document-links': ['links']
|
||||
};
|
||||
|
||||
// 엔드포인트별 기본 무효화 적용
|
||||
for (const [pattern, cats] of Object.entries(defaultInvalidations)) {
|
||||
if (endpoint.includes(pattern)) {
|
||||
cats.forEach(cat => this.cache.deleteCategory(cat));
|
||||
}
|
||||
}
|
||||
|
||||
// 추가 무효화 카테고리 적용
|
||||
categories.forEach(category => {
|
||||
this.cache.deleteCategory(category);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 특정 문서의 모든 캐시 무효화
|
||||
*/
|
||||
invalidateDocumentCache(documentId) {
|
||||
console.log(`🗑️ 문서 캐시 무효화: ${documentId}`);
|
||||
|
||||
const categories = ['document', 'highlights', 'notes', 'bookmarks', 'links', 'navigation'];
|
||||
categories.forEach(category => {
|
||||
// 해당 문서 ID가 포함된 캐시만 삭제하는 것이 이상적이지만,
|
||||
// 간단하게 전체 카테고리를 무효화
|
||||
this.cache.deleteCategory(category);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 캐시 강제 새로고침
|
||||
*/
|
||||
async refreshCache(endpoint, params = {}, category = 'api') {
|
||||
return await this.get(endpoint, params, {
|
||||
category,
|
||||
forceRefresh: true
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 캐시 통계 조회
|
||||
*/
|
||||
getCacheStats() {
|
||||
return this.cache.getStats();
|
||||
}
|
||||
|
||||
/**
|
||||
* 캐시 리포트 조회
|
||||
*/
|
||||
getCacheReport() {
|
||||
return this.cache.getReport();
|
||||
}
|
||||
|
||||
/**
|
||||
* 모든 캐시 삭제
|
||||
*/
|
||||
clearAllCache() {
|
||||
this.cache.clear();
|
||||
console.log('🗑️ 모든 API 캐시 삭제 완료');
|
||||
}
|
||||
|
||||
// 기존 API 메서드들을 그대로 위임 (캐싱이 필요 없는 경우)
|
||||
setToken(token) {
|
||||
return this.api.setToken(token);
|
||||
}
|
||||
|
||||
getHeaders() {
|
||||
return this.api.getHeaders();
|
||||
}
|
||||
|
||||
/**
|
||||
* 문서 네비게이션 정보 조회 (캐싱 최적화)
|
||||
*/
|
||||
async getDocumentNavigation(documentId) {
|
||||
const cacheKey = `navigation_${documentId}`;
|
||||
return await this.get(`/documents/${documentId}/navigation`, {}, {
|
||||
category: 'navigation',
|
||||
cacheKey,
|
||||
ttl: 30 * 60 * 1000 // 30분 (네비게이션은 자주 변경되지 않음)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 기존 api 인스턴스를 캐싱 API로 래핑
|
||||
if (window.api) {
|
||||
window.cachedApi = new CachedAPI(window.api);
|
||||
console.log('🚀 CachedAPI 래퍼 생성 완료');
|
||||
}
|
||||
|
||||
// 전역으로 내보내기
|
||||
window.CachedAPI = CachedAPI;
|
||||
Reference in New Issue
Block a user