feat: 소설 분기 시스템 및 트리 메모장 구현
🌟 주요 기능: - 트리 구조 메모장 시스템 - 소설 분기 관리 (정사 경로 설정) - 중앙 배치 트리 다이어그램 - 정사 경로 목차 뷰 - 인라인 편집 기능 📚 백엔드: - MemoTree, MemoNode 모델 추가 - 정사 경로 자동 순서 관리 - 분기점에서 하나만 선택 가능한 로직 - RESTful API 엔드포인트 🎨 프론트엔드: - memo-tree.html: 트리 다이어그램 에디터 - story-view.html: 정사 경로 목차 뷰 - SVG 연결선으로 시각적 트리 표현 - Alpine.js 기반 반응형 UI - Monaco Editor 통합 ✨ 특별 기능: - 정사 경로 황금색 배지 표시 - 확대/축소 및 패닝 지원 - 드래그 앤 드롭 준비 - 내보내기 및 인쇄 기능 - 인라인 편집 모달
This commit is contained in:
Hyungi Ahn
@@ -119,7 +119,32 @@ class DocumentServerAPI {
|
||||
|
||||
// 인증 관련 API
|
||||
async login(email, password) {
|
||||
return await this.post('/auth/login', { email, password });
|
||||
const response = await this.post('/auth/login', { email, password });
|
||||
|
||||
// 토큰 저장
|
||||
if (response.access_token) {
|
||||
this.setToken(response.access_token);
|
||||
|
||||
// 사용자 정보 가져오기
|
||||
try {
|
||||
const user = await this.getCurrentUser();
|
||||
return {
|
||||
success: true,
|
||||
user: user,
|
||||
token: response.access_token
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
message: '사용자 정보를 가져올 수 없습니다.'
|
||||
};
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
success: false,
|
||||
message: '로그인에 실패했습니다.'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
async logout() {
|
||||
@@ -414,6 +439,73 @@ class DocumentServerAPI {
|
||||
async deleteNote(noteId) {
|
||||
return await this.delete(`/notes/${noteId}`);
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// 트리 메모장 API
|
||||
// ============================================================================
|
||||
|
||||
// 메모 트리 관리
|
||||
async getUserMemoTrees(includeArchived = false) {
|
||||
const params = includeArchived ? '?include_archived=true' : '';
|
||||
return await this.get(`/memo-trees/${params}`);
|
||||
}
|
||||
|
||||
async createMemoTree(treeData) {
|
||||
return await this.post('/memo-trees/', treeData);
|
||||
}
|
||||
|
||||
async getMemoTree(treeId) {
|
||||
return await this.get(`/memo-trees/${treeId}`);
|
||||
}
|
||||
|
||||
async updateMemoTree(treeId, treeData) {
|
||||
return await this.put(`/memo-trees/${treeId}`, treeData);
|
||||
}
|
||||
|
||||
async deleteMemoTree(treeId) {
|
||||
return await this.delete(`/memo-trees/${treeId}`);
|
||||
}
|
||||
|
||||
// 메모 노드 관리
|
||||
async getMemoTreeNodes(treeId) {
|
||||
return await this.get(`/memo-trees/${treeId}/nodes`);
|
||||
}
|
||||
|
||||
async createMemoNode(nodeData) {
|
||||
return await this.post(`/memo-trees/${nodeData.tree_id}/nodes`, nodeData);
|
||||
}
|
||||
|
||||
async getMemoNode(nodeId) {
|
||||
return await this.get(`/memo-trees/nodes/${nodeId}`);
|
||||
}
|
||||
|
||||
async updateMemoNode(nodeId, nodeData) {
|
||||
return await this.put(`/memo-trees/nodes/${nodeId}`, nodeData);
|
||||
}
|
||||
|
||||
async deleteMemoNode(nodeId) {
|
||||
return await this.delete(`/memo-trees/nodes/${nodeId}`);
|
||||
}
|
||||
|
||||
// 노드 이동
|
||||
async moveMemoNode(nodeId, moveData) {
|
||||
return await this.put(`/memo-trees/nodes/${nodeId}/move`, moveData);
|
||||
}
|
||||
|
||||
// 트리 통계
|
||||
async getMemoTreeStats(treeId) {
|
||||
return await this.get(`/memo-trees/${treeId}/stats`);
|
||||
}
|
||||
|
||||
// 검색
|
||||
async searchMemoNodes(searchData) {
|
||||
return await this.post('/memo-trees/search', searchData);
|
||||
}
|
||||
|
||||
// 내보내기
|
||||
async exportMemoTree(exportData) {
|
||||
return await this.post('/memo-trees/export', exportData);
|
||||
}
|
||||
}
|
||||
|
||||
// 전역 API 인스턴스
|
||||
|
||||
984
frontend/static/js/memo-tree.js
Normal file
984
frontend/static/js/memo-tree.js
Normal file
@@ -0,0 +1,984 @@
|
||||
/**
|
||||
* 트리 구조 메모장 JavaScript
|
||||
*/
|
||||
|
||||
// Monaco Editor 인스턴스
|
||||
let monacoEditor = null;
|
||||
|
||||
// 트리 메모장 Alpine.js 컴포넌트
|
||||
window.memoTreeApp = function() {
|
||||
return {
|
||||
// 상태 관리
|
||||
currentUser: null,
|
||||
userTrees: [],
|
||||
selectedTreeId: '',
|
||||
selectedTree: null,
|
||||
treeNodes: [],
|
||||
selectedNode: null,
|
||||
|
||||
// UI 상태
|
||||
showNewTreeModal: false,
|
||||
showNewNodeModal: false,
|
||||
showTreeSettings: false,
|
||||
showLoginModal: false,
|
||||
|
||||
// 로그인 폼 상태
|
||||
loginForm: {
|
||||
email: '',
|
||||
password: ''
|
||||
},
|
||||
loginError: '',
|
||||
loginLoading: false,
|
||||
|
||||
// 폼 데이터
|
||||
newTree: {
|
||||
title: '',
|
||||
description: '',
|
||||
tree_type: 'general'
|
||||
},
|
||||
|
||||
newNode: {
|
||||
title: '',
|
||||
node_type: 'memo',
|
||||
parent_id: null
|
||||
},
|
||||
|
||||
// 에디터 상태
|
||||
editorContent: '',
|
||||
isEditorDirty: false,
|
||||
|
||||
// 트리 상태
|
||||
expandedNodes: new Set(),
|
||||
|
||||
// 트리 다이어그램 상태
|
||||
treeZoom: 1,
|
||||
treePanX: 0,
|
||||
treePanY: 0,
|
||||
nodePositions: new Map(), // 노드 ID -> {x, y} 위치 매핑
|
||||
isDragging: false,
|
||||
dragNode: null,
|
||||
dragOffset: { x: 0, y: 0 },
|
||||
|
||||
// 초기화
|
||||
async init() {
|
||||
console.log('🌳 트리 메모장 초기화 중...');
|
||||
|
||||
// API 객체가 로드될 때까지 대기 (더 긴 시간)
|
||||
let retries = 0;
|
||||
while ((!window.api || typeof window.api.getUserMemoTrees !== 'function') && retries < 50) {
|
||||
console.log(`⏳ API 객체 로딩 대기 중... (${retries + 1}/50)`);
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
retries++;
|
||||
}
|
||||
|
||||
if (!window.api || typeof window.api.getUserMemoTrees !== 'function') {
|
||||
console.error('❌ API 객체 또는 getUserMemoTrees 함수를 로드할 수 없습니다.');
|
||||
console.log('현재 window.api:', window.api);
|
||||
if (window.api) {
|
||||
console.log('API 객체의 메서드들:', Object.getOwnPropertyNames(window.api));
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await this.checkAuthStatus();
|
||||
if (this.currentUser) {
|
||||
await this.loadUserTrees();
|
||||
await this.initMonacoEditor();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 초기화 실패:', error);
|
||||
}
|
||||
},
|
||||
|
||||
// 인증 상태 확인
|
||||
async checkAuthStatus() {
|
||||
try {
|
||||
const user = await window.api.getCurrentUser();
|
||||
this.currentUser = user;
|
||||
console.log('✅ 사용자 인증됨:', user.email);
|
||||
} catch (error) {
|
||||
console.log('❌ 인증되지 않음:', error.message);
|
||||
this.currentUser = null;
|
||||
|
||||
// 토큰이 있지만 만료된 경우 제거
|
||||
if (localStorage.getItem('access_token')) {
|
||||
console.log('🗑️ 만료된 토큰 제거');
|
||||
localStorage.removeItem('access_token');
|
||||
localStorage.removeItem('refresh_token');
|
||||
window.api.clearToken();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 사용자 트리 목록 로드
|
||||
async loadUserTrees() {
|
||||
try {
|
||||
console.log('📊 사용자 트리 목록 로딩...');
|
||||
const trees = await window.api.getUserMemoTrees();
|
||||
this.userTrees = trees || [];
|
||||
console.log(`✅ ${this.userTrees.length}개 트리 로드 완료`);
|
||||
} catch (error) {
|
||||
console.error('❌ 트리 목록 로드 실패:', error);
|
||||
this.userTrees = [];
|
||||
}
|
||||
},
|
||||
|
||||
// 트리 로드
|
||||
async loadTree(treeId) {
|
||||
if (!treeId) {
|
||||
this.selectedTree = null;
|
||||
this.treeNodes = [];
|
||||
this.selectedNode = null;
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('🌳 트리 로딩:', treeId);
|
||||
|
||||
// 트리 정보 로드
|
||||
const tree = this.userTrees.find(t => t.id === treeId);
|
||||
this.selectedTree = tree;
|
||||
|
||||
// 트리 노드들 로드
|
||||
const nodes = await window.api.getMemoTreeNodes(treeId);
|
||||
this.treeNodes = nodes || [];
|
||||
|
||||
// 첫 번째 노드 선택 (있다면)
|
||||
if (this.treeNodes.length > 0) {
|
||||
this.selectNode(this.treeNodes[0]);
|
||||
}
|
||||
|
||||
// 트리 다이어그램 위치 계산
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.calculateNodePositions();
|
||||
}, 100);
|
||||
});
|
||||
|
||||
console.log(`✅ 트리 로드 완료: ${this.treeNodes.length}개 노드`);
|
||||
} catch (error) {
|
||||
console.error('❌ 트리 로드 실패:', error);
|
||||
alert('트리를 불러오는 중 오류가 발생했습니다.');
|
||||
}
|
||||
},
|
||||
|
||||
// 트리 생성
|
||||
async createTree() {
|
||||
try {
|
||||
console.log('🌳 새 트리 생성:', this.newTree);
|
||||
|
||||
const tree = await window.api.createMemoTree(this.newTree);
|
||||
|
||||
// 트리 목록에 추가
|
||||
this.userTrees.push(tree);
|
||||
|
||||
// 새 트리 선택
|
||||
this.selectedTreeId = tree.id;
|
||||
await this.loadTree(tree.id);
|
||||
|
||||
// 모달 닫기 및 폼 리셋
|
||||
this.showNewTreeModal = false;
|
||||
this.newTree = { title: '', description: '', tree_type: 'general' };
|
||||
|
||||
console.log('✅ 트리 생성 완료');
|
||||
} catch (error) {
|
||||
console.error('❌ 트리 생성 실패:', error);
|
||||
alert('트리 생성 중 오류가 발생했습니다.');
|
||||
}
|
||||
},
|
||||
|
||||
// 루트 노드 생성
|
||||
async createRootNode() {
|
||||
if (!this.selectedTree) return;
|
||||
|
||||
try {
|
||||
const nodeData = {
|
||||
tree_id: this.selectedTree.id,
|
||||
title: '새 노드',
|
||||
node_type: 'memo',
|
||||
parent_id: null
|
||||
};
|
||||
|
||||
const node = await window.api.createMemoNode(nodeData);
|
||||
this.treeNodes.push(node);
|
||||
this.selectNode(node);
|
||||
|
||||
console.log('✅ 루트 노드 생성 완료');
|
||||
} catch (error) {
|
||||
console.error('❌ 루트 노드 생성 실패:', error);
|
||||
alert('노드 생성 중 오류가 발생했습니다.');
|
||||
}
|
||||
},
|
||||
|
||||
// 노드 선택
|
||||
selectNode(node) {
|
||||
// 이전 노드 저장
|
||||
if (this.selectedNode && this.isEditorDirty) {
|
||||
this.saveNode();
|
||||
}
|
||||
|
||||
this.selectedNode = node;
|
||||
|
||||
// 에디터에 내용 로드
|
||||
if (monacoEditor && node.content) {
|
||||
monacoEditor.setValue(node.content || '');
|
||||
this.isEditorDirty = false;
|
||||
}
|
||||
|
||||
console.log('📝 노드 선택:', node.title);
|
||||
},
|
||||
|
||||
// 노드 저장
|
||||
async saveNode() {
|
||||
if (!this.selectedNode) return;
|
||||
|
||||
try {
|
||||
// 에디터 내용 가져오기
|
||||
if (monacoEditor) {
|
||||
this.selectedNode.content = monacoEditor.getValue();
|
||||
|
||||
// 단어 수 계산 (간단한 방식)
|
||||
const wordCount = this.selectedNode.content
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim()
|
||||
.split(' ')
|
||||
.filter(word => word.length > 0).length;
|
||||
this.selectedNode.word_count = wordCount;
|
||||
}
|
||||
|
||||
await window.api.updateMemoNode(this.selectedNode.id, this.selectedNode);
|
||||
this.isEditorDirty = false;
|
||||
|
||||
console.log('✅ 노드 저장 완료');
|
||||
} catch (error) {
|
||||
console.error('❌ 노드 저장 실패:', error);
|
||||
alert('노드 저장 중 오류가 발생했습니다.');
|
||||
}
|
||||
},
|
||||
|
||||
// 노드 제목 저장
|
||||
async saveNodeTitle() {
|
||||
if (!this.selectedNode) return;
|
||||
await this.saveNode();
|
||||
},
|
||||
|
||||
// 노드 타입 저장
|
||||
async saveNodeType() {
|
||||
if (!this.selectedNode) return;
|
||||
await this.saveNode();
|
||||
},
|
||||
|
||||
// 노드 상태 저장
|
||||
async saveNodeStatus() {
|
||||
if (!this.selectedNode) return;
|
||||
await this.saveNode();
|
||||
},
|
||||
|
||||
// 노드 삭제
|
||||
async deleteNode(nodeId) {
|
||||
if (!confirm('정말로 이 노드를 삭제하시겠습니까?')) return;
|
||||
|
||||
try {
|
||||
await window.api.deleteMemoNode(nodeId);
|
||||
|
||||
// 트리에서 제거
|
||||
this.treeNodes = this.treeNodes.filter(node => node.id !== nodeId);
|
||||
|
||||
// 선택된 노드였다면 선택 해제
|
||||
if (this.selectedNode && this.selectedNode.id === nodeId) {
|
||||
this.selectedNode = null;
|
||||
if (monacoEditor) {
|
||||
monacoEditor.setValue('');
|
||||
}
|
||||
}
|
||||
|
||||
console.log('✅ 노드 삭제 완료');
|
||||
} catch (error) {
|
||||
console.error('❌ 노드 삭제 실패:', error);
|
||||
alert('노드 삭제 중 오류가 발생했습니다.');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 자식 노드 가져오기
|
||||
getChildNodes(parentId) {
|
||||
return this.treeNodes
|
||||
.filter(node => node.parent_id === parentId)
|
||||
.sort((a, b) => a.sort_order - b.sort_order);
|
||||
},
|
||||
|
||||
// 루트 노드들 가져오기
|
||||
get rootNodes() {
|
||||
return this.treeNodes
|
||||
.filter(node => !node.parent_id)
|
||||
.sort((a, b) => a.sort_order - b.sort_order);
|
||||
},
|
||||
|
||||
// 노드 타입별 아이콘 가져오기
|
||||
getNodeIcon(nodeType) {
|
||||
const icons = {
|
||||
folder: '📁',
|
||||
memo: '📝',
|
||||
chapter: '📖',
|
||||
character: '👤',
|
||||
plot: '📋'
|
||||
};
|
||||
return icons[nodeType] || '📝';
|
||||
},
|
||||
|
||||
// 상태별 색상 클래스 가져오기
|
||||
getStatusColor(status) {
|
||||
const colors = {
|
||||
draft: 'text-gray-500',
|
||||
writing: 'text-yellow-600',
|
||||
review: 'text-blue-600',
|
||||
complete: 'text-green-600'
|
||||
};
|
||||
return colors[status] || 'text-gray-700';
|
||||
},
|
||||
|
||||
// 트리 타입별 아이콘 가져오기
|
||||
getTreeIcon(treeType) {
|
||||
const icons = {
|
||||
novel: '📚',
|
||||
research: '🔬',
|
||||
project: '💼',
|
||||
general: '📂'
|
||||
};
|
||||
return icons[treeType] || '📂';
|
||||
},
|
||||
|
||||
// 빠른 자식 노드 추가
|
||||
async addChildNode(parentNode) {
|
||||
if (!this.selectedTree) return;
|
||||
|
||||
try {
|
||||
const nodeData = {
|
||||
tree_id: this.selectedTree.id,
|
||||
title: '새 노드',
|
||||
node_type: 'memo',
|
||||
parent_id: parentNode.id
|
||||
};
|
||||
|
||||
const node = await window.api.createMemoNode(nodeData);
|
||||
this.treeNodes.push(node);
|
||||
|
||||
// 부모 노드 펼치기
|
||||
this.expandedNodes.add(parentNode.id);
|
||||
|
||||
// 새 노드 선택
|
||||
this.selectNode(node);
|
||||
|
||||
console.log('✅ 자식 노드 생성 완료');
|
||||
} catch (error) {
|
||||
console.error('❌ 자식 노드 생성 실패:', error);
|
||||
alert('노드 생성 중 오류가 발생했습니다.');
|
||||
}
|
||||
},
|
||||
|
||||
// 컨텍스트 메뉴 표시
|
||||
showContextMenu(event, node) {
|
||||
// TODO: 우클릭 컨텍스트 메뉴 구현
|
||||
console.log('컨텍스트 메뉴:', node.title);
|
||||
},
|
||||
|
||||
// 노드 메뉴 표시
|
||||
showNodeMenu(event, node) {
|
||||
// TODO: 노드 옵션 메뉴 구현
|
||||
console.log('노드 메뉴:', node.title);
|
||||
},
|
||||
|
||||
// 정사 경로 토글
|
||||
async toggleCanonical(node) {
|
||||
try {
|
||||
const newCanonicalState = !node.is_canonical;
|
||||
console.log(`🌟 정사 경로 토글: ${node.title} (${newCanonicalState ? '설정' : '해제'})`);
|
||||
|
||||
const updatedData = {
|
||||
is_canonical: newCanonicalState
|
||||
};
|
||||
|
||||
const updatedNode = await window.api.updateMemoNode(node.id, updatedData);
|
||||
|
||||
// 로컬 상태 업데이트 (Alpine.js 반응성 보장)
|
||||
const nodeIndex = this.treeNodes.findIndex(n => n.id === node.id);
|
||||
if (nodeIndex !== -1) {
|
||||
// 배열 전체를 새로 생성하여 Alpine.js 반응성 트리거
|
||||
this.treeNodes = this.treeNodes.map(n =>
|
||||
n.id === node.id ? { ...n, ...updatedNode } : n
|
||||
);
|
||||
}
|
||||
|
||||
// 선택된 노드도 업데이트
|
||||
if (this.selectedNode && this.selectedNode.id === node.id) {
|
||||
this.selectedNode = { ...this.selectedNode, ...updatedNode };
|
||||
}
|
||||
|
||||
// 강제 리렌더링을 위한 더미 업데이트
|
||||
this.treeNodes = [...this.treeNodes];
|
||||
|
||||
// 트리 다시 그리기 (연결선 업데이트)
|
||||
this.$nextTick(() => {
|
||||
this.calculateNodePositions();
|
||||
});
|
||||
|
||||
console.log(`✅ 정사 경로 ${newCanonicalState ? '설정' : '해제'} 완료`);
|
||||
console.log('📊 업데이트된 노드:', updatedNode);
|
||||
console.log('🔍 is_canonical 값:', updatedNode.is_canonical);
|
||||
console.log('🔍 canonical_order 값:', updatedNode.canonical_order);
|
||||
console.log('🔄 현재 treeNodes 개수:', this.treeNodes.length);
|
||||
|
||||
// 업데이트된 노드 찾기
|
||||
const updatedNodeInArray = this.treeNodes.find(n => n.id === node.id);
|
||||
console.log('🔍 배열 내 업데이트된 노드:', updatedNodeInArray?.is_canonical);
|
||||
} catch (error) {
|
||||
console.error('❌ 정사 경로 토글 실패:', error);
|
||||
alert('정사 경로 설정 중 오류가 발생했습니다.');
|
||||
}
|
||||
},
|
||||
|
||||
// 노드 드래그 시작
|
||||
startDragNode(event, node) {
|
||||
// 현재는 드래그 기능 비활성화 (패닝과 충돌 방지)
|
||||
event.stopPropagation();
|
||||
console.log('드래그 시작:', node.title);
|
||||
// TODO: 노드 드래그 앤 드롭 구현
|
||||
},
|
||||
|
||||
// 노드 인라인 편집
|
||||
editNodeInline(node) {
|
||||
// 더블클릭 시 노드 선택하고 에디터로 포커스
|
||||
this.selectNode(node);
|
||||
|
||||
// 에디터가 있다면 포커스
|
||||
this.$nextTick(() => {
|
||||
const editorContainer = document.getElementById('editor-container');
|
||||
if (editorContainer && this.monacoEditor) {
|
||||
this.monacoEditor.focus();
|
||||
}
|
||||
});
|
||||
|
||||
console.log('인라인 편집:', node.title);
|
||||
},
|
||||
|
||||
// 노드 위치 계산 및 반환
|
||||
getNodePosition(node) {
|
||||
if (!this.nodePositions.has(node.id)) {
|
||||
this.calculateNodePositions();
|
||||
}
|
||||
|
||||
const pos = this.nodePositions.get(node.id) || { x: 0, y: 0 };
|
||||
return `left: ${pos.x}px; top: ${pos.y}px;`;
|
||||
},
|
||||
|
||||
// 트리 노드 위치 자동 계산
|
||||
calculateNodePositions() {
|
||||
const canvas = document.getElementById('tree-canvas');
|
||||
if (!canvas) return;
|
||||
|
||||
const canvasWidth = canvas.clientWidth;
|
||||
const canvasHeight = canvas.clientHeight;
|
||||
|
||||
// 노드 크기 설정
|
||||
const nodeWidth = 200;
|
||||
const nodeHeight = 80;
|
||||
const levelHeight = 150; // 레벨 간 간격
|
||||
const nodeSpacing = 50; // 노드 간 간격
|
||||
|
||||
// 레벨별 노드 그룹화
|
||||
const levels = new Map();
|
||||
|
||||
// 루트 노드들 찾기
|
||||
const rootNodes = this.treeNodes.filter(node => !node.parent_id);
|
||||
|
||||
// BFS로 레벨별 노드 배치
|
||||
const queue = [];
|
||||
rootNodes.forEach(node => {
|
||||
queue.push({ node, level: 0 });
|
||||
});
|
||||
|
||||
while (queue.length > 0) {
|
||||
const { node, level } = queue.shift();
|
||||
|
||||
if (!levels.has(level)) {
|
||||
levels.set(level, []);
|
||||
}
|
||||
levels.get(level).push(node);
|
||||
|
||||
// 자식 노드들을 다음 레벨에 추가
|
||||
const children = this.getChildNodes(node.id);
|
||||
children.forEach(child => {
|
||||
queue.push({ node: child, level: level + 1 });
|
||||
});
|
||||
}
|
||||
|
||||
// 각 레벨의 노드들 위치 계산
|
||||
levels.forEach((nodes, level) => {
|
||||
const y = 100 + level * levelHeight; // 상단 여백 + 레벨 * 높이
|
||||
const totalWidth = nodes.length * nodeWidth + (nodes.length - 1) * nodeSpacing;
|
||||
const startX = (canvasWidth - totalWidth) / 2;
|
||||
|
||||
nodes.forEach((node, index) => {
|
||||
const x = startX + index * (nodeWidth + nodeSpacing);
|
||||
this.nodePositions.set(node.id, { x, y });
|
||||
});
|
||||
});
|
||||
|
||||
// 연결선 다시 그리기
|
||||
this.drawConnections();
|
||||
},
|
||||
|
||||
// SVG 연결선 그리기
|
||||
drawConnections() {
|
||||
const svg = document.getElementById('tree-connections');
|
||||
if (!svg) return;
|
||||
|
||||
// 기존 연결선 제거
|
||||
svg.innerHTML = '';
|
||||
|
||||
// 각 노드의 자식들과 연결선 그리기
|
||||
this.treeNodes.forEach(node => {
|
||||
const children = this.getChildNodes(node.id);
|
||||
if (children.length === 0) return;
|
||||
|
||||
const parentPos = this.nodePositions.get(node.id);
|
||||
if (!parentPos) return;
|
||||
|
||||
children.forEach(child => {
|
||||
const childPos = this.nodePositions.get(child.id);
|
||||
if (!childPos) return;
|
||||
|
||||
// 연결선 생성
|
||||
const line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
|
||||
// 부모 노드 하단 중앙에서 시작
|
||||
const startX = parentPos.x + 100; // 노드 중앙
|
||||
const startY = parentPos.y + 80; // 노드 하단
|
||||
|
||||
// 자식 노드 상단 중앙으로 연결
|
||||
const endX = childPos.x + 100; // 노드 중앙
|
||||
const endY = childPos.y; // 노드 상단
|
||||
|
||||
// 곡선 경로 생성 (베지어 곡선)
|
||||
const midY = startY + (endY - startY) / 2;
|
||||
const path = `M ${startX} ${startY} C ${startX} ${midY} ${endX} ${midY} ${endX} ${endY}`;
|
||||
|
||||
line.setAttribute('d', path);
|
||||
line.setAttribute('stroke', '#9CA3AF');
|
||||
line.setAttribute('stroke-width', '2');
|
||||
line.setAttribute('fill', 'none');
|
||||
line.setAttribute('marker-end', 'url(#arrowhead)');
|
||||
|
||||
svg.appendChild(line);
|
||||
});
|
||||
});
|
||||
|
||||
// 화살표 마커 추가 (한 번만)
|
||||
if (!svg.querySelector('#arrowhead')) {
|
||||
const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
|
||||
const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
|
||||
marker.setAttribute('id', 'arrowhead');
|
||||
marker.setAttribute('markerWidth', '10');
|
||||
marker.setAttribute('markerHeight', '7');
|
||||
marker.setAttribute('refX', '9');
|
||||
marker.setAttribute('refY', '3.5');
|
||||
marker.setAttribute('orient', 'auto');
|
||||
|
||||
const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
|
||||
polygon.setAttribute('points', '0 0, 10 3.5, 0 7');
|
||||
polygon.setAttribute('fill', '#9CA3AF');
|
||||
|
||||
marker.appendChild(polygon);
|
||||
defs.appendChild(marker);
|
||||
svg.appendChild(defs);
|
||||
}
|
||||
},
|
||||
|
||||
// 트리 중앙 정렬
|
||||
centerTree() {
|
||||
this.treePanX = 0;
|
||||
this.treePanY = 0;
|
||||
this.treeZoom = 1;
|
||||
},
|
||||
|
||||
// 확대
|
||||
zoomIn() {
|
||||
this.treeZoom = Math.min(this.treeZoom * 1.2, 3);
|
||||
},
|
||||
|
||||
// 축소
|
||||
zoomOut() {
|
||||
this.treeZoom = Math.max(this.treeZoom / 1.2, 0.3);
|
||||
},
|
||||
|
||||
// 휠 이벤트 처리 (확대/축소)
|
||||
handleWheel(event) {
|
||||
event.preventDefault();
|
||||
if (event.deltaY < 0) {
|
||||
this.zoomIn();
|
||||
} else {
|
||||
this.zoomOut();
|
||||
}
|
||||
},
|
||||
|
||||
// 패닝 시작
|
||||
startPan(event) {
|
||||
if (event.target.closest('.tree-diagram-node')) return; // 노드 클릭 시 패닝 방지
|
||||
|
||||
this.isPanning = true;
|
||||
this.panStartX = event.clientX - this.treePanX;
|
||||
this.panStartY = event.clientY - this.treePanY;
|
||||
|
||||
document.addEventListener('mousemove', this.handlePan.bind(this));
|
||||
document.addEventListener('mouseup', this.stopPan.bind(this));
|
||||
},
|
||||
|
||||
// 패닝 처리
|
||||
handlePan(event) {
|
||||
if (!this.isPanning) return;
|
||||
|
||||
this.treePanX = event.clientX - this.panStartX;
|
||||
this.treePanY = event.clientY - this.panStartY;
|
||||
},
|
||||
|
||||
// 패닝 종료
|
||||
stopPan() {
|
||||
this.isPanning = false;
|
||||
document.removeEventListener('mousemove', this.handlePan);
|
||||
document.removeEventListener('mouseup', this.stopPan);
|
||||
},
|
||||
|
||||
// 재귀적 트리 노드 렌더링
|
||||
renderTreeNodeRecursive(node, depth, isLast = false, parentPath = []) {
|
||||
const hasChildren = this.getChildNodes(node.id).length > 0;
|
||||
const isExpanded = this.expandedNodes.has(node.id);
|
||||
const isSelected = this.selectedNode && this.selectedNode.id === node.id;
|
||||
const isRoot = depth === 0;
|
||||
|
||||
// 상태별 색상
|
||||
let statusClass = 'text-gray-700';
|
||||
switch(node.status) {
|
||||
case 'draft': statusClass = 'text-gray-500'; break;
|
||||
case 'writing': statusClass = 'text-yellow-600'; break;
|
||||
case 'review': statusClass = 'text-blue-600'; break;
|
||||
case 'complete': statusClass = 'text-green-600'; break;
|
||||
}
|
||||
|
||||
// 트리 라인 생성
|
||||
let treeLines = '';
|
||||
for (let i = 0; i < depth; i++) {
|
||||
if (i < parentPath.length && parentPath[i]) {
|
||||
// 부모가 마지막이 아니면 세로선 표시
|
||||
treeLines += '<span class="tree-line vertical"></span>';
|
||||
} else {
|
||||
// 빈 공간
|
||||
treeLines += '<span class="tree-line empty"></span>';
|
||||
}
|
||||
}
|
||||
|
||||
// 현재 노드의 연결선
|
||||
let nodeConnector = '';
|
||||
if (!isRoot) {
|
||||
if (isLast) {
|
||||
nodeConnector = '<span class="tree-line corner"></span>'; // └─
|
||||
} else {
|
||||
nodeConnector = '<span class="tree-line branch"></span>'; // ├─
|
||||
}
|
||||
}
|
||||
|
||||
let html = `
|
||||
<div class="tree-node-item ${isRoot ? 'root' : ''} ${isLast ? 'last-child' : ''}">
|
||||
<div
|
||||
class="tree-node py-1 cursor-pointer flex items-center hover:bg-gray-50 group ${isSelected ? 'bg-blue-50 border-r-2 border-blue-500' : ''} ${statusClass}"
|
||||
onclick="window.memoTreeInstance.selectNode(${JSON.stringify(node).replace(/"/g, '"')})"
|
||||
oncontextmenu="event.preventDefault(); window.memoTreeInstance.showContextMenu(event, ${JSON.stringify(node).replace(/"/g, '"')})"
|
||||
>
|
||||
<!-- 트리 라인들 -->
|
||||
<div class="flex items-center">
|
||||
${treeLines}
|
||||
${nodeConnector}
|
||||
|
||||
<!-- 펼치기/접기 버튼 -->
|
||||
${hasChildren ?
|
||||
`<button
|
||||
onclick="event.stopPropagation(); window.memoTreeInstance.toggleNode('${node.id}')"
|
||||
class="w-4 h-4 flex items-center justify-center text-gray-400 hover:text-gray-600 mr-1 ml-1"
|
||||
>
|
||||
<i class="fas fa-${isExpanded ? 'minus' : 'plus'}-square text-xs"></i>
|
||||
</button>` :
|
||||
'<span class="w-4 mr-1 ml-1"></span>'
|
||||
}
|
||||
|
||||
<!-- 아이콘 -->
|
||||
<span class="mr-2 text-sm">${this.getNodeIcon(node.node_type)}</span>
|
||||
|
||||
<!-- 제목 -->
|
||||
<span class="flex-1 truncate font-medium">${node.title}</span>
|
||||
</div>
|
||||
|
||||
<!-- 액션 버튼들 (호버 시 표시) -->
|
||||
<div class="opacity-0 group-hover:opacity-100 flex space-x-1 ml-2">
|
||||
<button
|
||||
onclick="event.stopPropagation(); window.memoTreeInstance.addChildNode(${JSON.stringify(node).replace(/"/g, '"')})"
|
||||
class="w-6 h-6 flex items-center justify-center text-gray-400 hover:text-green-600 hover:bg-green-50 rounded"
|
||||
title="자식 노드 추가"
|
||||
>
|
||||
<i class="fas fa-plus text-xs"></i>
|
||||
</button>
|
||||
<button
|
||||
onclick="event.stopPropagation(); window.memoTreeInstance.showNodeMenu(event, ${JSON.stringify(node).replace(/"/g, '"')})"
|
||||
class="w-6 h-6 flex items-center justify-center text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded"
|
||||
title="더보기"
|
||||
>
|
||||
<i class="fas fa-ellipsis-h text-xs"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 단어 수 -->
|
||||
${node.word_count > 0 ?
|
||||
`<span class="text-xs text-gray-400 ml-2">${node.word_count}w</span>` :
|
||||
''
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 자식 노드들 재귀적으로 렌더링
|
||||
if (hasChildren && isExpanded) {
|
||||
const children = this.getChildNodes(node.id);
|
||||
const newParentPath = [...parentPath, !isLast];
|
||||
|
||||
children.forEach((child, index) => {
|
||||
const isChildLast = index === children.length - 1;
|
||||
html += this.renderTreeNodeRecursive(child, depth + 1, isChildLast, newParentPath);
|
||||
});
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
return html;
|
||||
},
|
||||
|
||||
// 노드 토글
|
||||
toggleNode(nodeId) {
|
||||
if (this.expandedNodes.has(nodeId)) {
|
||||
this.expandedNodes.delete(nodeId);
|
||||
} else {
|
||||
this.expandedNodes.add(nodeId);
|
||||
}
|
||||
// 트리 다시 렌더링을 위해 상태 업데이트
|
||||
this.$nextTick(() => {
|
||||
this.rerenderTree();
|
||||
});
|
||||
},
|
||||
|
||||
// 트리 다시 렌더링
|
||||
rerenderTree() {
|
||||
// Alpine.js의 반응성을 트리거하기 위해 배열을 새로 할당
|
||||
this.treeNodes = [...this.treeNodes];
|
||||
// 강제로 DOM 업데이트
|
||||
this.$nextTick(() => {
|
||||
// 트리 컨테이너 찾아서 다시 렌더링
|
||||
const treeContainer = document.querySelector('.tree-container');
|
||||
if (treeContainer) {
|
||||
// Alpine.js가 자동으로 다시 렌더링함
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 모두 펼치기
|
||||
expandAll() {
|
||||
this.treeNodes.forEach(node => {
|
||||
if (this.getChildNodes(node.id).length > 0) {
|
||||
this.expandedNodes.add(node.id);
|
||||
}
|
||||
});
|
||||
this.rerenderTree();
|
||||
},
|
||||
|
||||
// 모두 접기
|
||||
collapseAll() {
|
||||
this.expandedNodes.clear();
|
||||
this.rerenderTree();
|
||||
},
|
||||
|
||||
// Monaco Editor 초기화
|
||||
async initMonacoEditor() {
|
||||
console.log('🎨 Monaco Editor 초기화 시작...');
|
||||
|
||||
// Monaco Editor 로더가 로드될 때까지 대기
|
||||
let retries = 0;
|
||||
while (typeof require === 'undefined' && retries < 30) {
|
||||
console.log(`⏳ Monaco Editor 로더 대기 중... (${retries + 1}/30)`);
|
||||
await new Promise(resolve => setTimeout(resolve, 200));
|
||||
retries++;
|
||||
}
|
||||
|
||||
if (typeof require === 'undefined') {
|
||||
console.warn('❌ Monaco Editor 로더를 찾을 수 없습니다. 기본 textarea를 사용합니다.');
|
||||
this.setupFallbackEditor();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
require.config({
|
||||
paths: {
|
||||
vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs'
|
||||
}
|
||||
});
|
||||
|
||||
require(['vs/editor/editor.main'], () => {
|
||||
// 에디터 컨테이너가 생성될 때까지 대기
|
||||
const waitForEditor = () => {
|
||||
const editorElement = document.getElementById('monaco-editor');
|
||||
if (!editorElement) {
|
||||
console.log('⏳ Monaco Editor 컨테이너 대기 중...');
|
||||
setTimeout(waitForEditor, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
// 이미 Monaco Editor가 생성되어 있다면 제거
|
||||
if (monacoEditor) {
|
||||
monacoEditor.dispose();
|
||||
monacoEditor = null;
|
||||
}
|
||||
|
||||
monacoEditor = monaco.editor.create(editorElement, {
|
||||
value: '',
|
||||
language: 'markdown',
|
||||
theme: 'vs-light',
|
||||
automaticLayout: true,
|
||||
wordWrap: 'on',
|
||||
minimap: { enabled: false },
|
||||
scrollBeyondLastLine: false,
|
||||
fontSize: 14,
|
||||
lineNumbers: 'on',
|
||||
folding: true,
|
||||
renderWhitespace: 'boundary'
|
||||
});
|
||||
|
||||
// 내용 변경 감지
|
||||
monacoEditor.onDidChangeModelContent(() => {
|
||||
this.isEditorDirty = true;
|
||||
});
|
||||
|
||||
console.log('✅ Monaco Editor 초기화 완료');
|
||||
};
|
||||
|
||||
// 에디터 컨테이너 대기 시작
|
||||
waitForEditor();
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('❌ Monaco Editor 초기화 실패:', error);
|
||||
this.setupFallbackEditor();
|
||||
}
|
||||
},
|
||||
|
||||
// 폴백 에디터 설정 (Monaco가 실패했을 때)
|
||||
setupFallbackEditor() {
|
||||
console.log('📝 폴백 textarea 에디터 설정 중...');
|
||||
const editorElement = document.getElementById('monaco-editor');
|
||||
if (editorElement) {
|
||||
editorElement.innerHTML = `
|
||||
<textarea
|
||||
id="fallback-editor"
|
||||
class="w-full h-full p-4 border-none resize-none focus:outline-none"
|
||||
placeholder="여기에 내용을 입력하세요..."
|
||||
></textarea>
|
||||
`;
|
||||
|
||||
const textarea = document.getElementById('fallback-editor');
|
||||
if (textarea) {
|
||||
textarea.addEventListener('input', () => {
|
||||
this.isEditorDirty = true;
|
||||
});
|
||||
console.log('✅ 폴백 에디터 설정 완료');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 로그인 모달 열기
|
||||
openLoginModal() {
|
||||
this.showLoginModal = true;
|
||||
this.loginForm = { email: '', password: '' };
|
||||
this.loginError = '';
|
||||
},
|
||||
|
||||
// 로그인 처리
|
||||
async handleLogin() {
|
||||
this.loginLoading = true;
|
||||
this.loginError = '';
|
||||
|
||||
try {
|
||||
const response = await window.api.login(this.loginForm.email, this.loginForm.password);
|
||||
|
||||
if (response.success) {
|
||||
this.currentUser = response.user;
|
||||
this.showLoginModal = false;
|
||||
|
||||
// 트리 목록 다시 로드
|
||||
await this.loadUserTrees();
|
||||
} else {
|
||||
this.loginError = response.message || '로그인에 실패했습니다.';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('로그인 오류:', error);
|
||||
this.loginError = '로그인 중 오류가 발생했습니다.';
|
||||
} finally {
|
||||
this.loginLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 로그아웃
|
||||
async logout() {
|
||||
try {
|
||||
await window.api.logout();
|
||||
this.currentUser = null;
|
||||
this.userTrees = [];
|
||||
this.selectedTree = null;
|
||||
this.treeNodes = [];
|
||||
this.selectedNode = null;
|
||||
console.log('✅ 로그아웃 완료');
|
||||
} catch (error) {
|
||||
console.error('❌ 로그아웃 실패:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
// 전역 인스턴스 등록 (HTML에서 접근하기 위해)
|
||||
window.memoTreeInstance = null;
|
||||
|
||||
// Alpine.js 초기화 후 전역 인스턴스 설정
|
||||
document.addEventListener('alpine:init', () => {
|
||||
// 페이지 로드 후 인스턴스 등록
|
||||
setTimeout(() => {
|
||||
const appElement = document.querySelector('[x-data="memoTreeApp()"]');
|
||||
if (appElement && appElement._x_dataStack) {
|
||||
window.memoTreeInstance = appElement._x_dataStack[0];
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// 트리 노드 컴포넌트
|
||||
window.treeNodeComponent = function(node) {
|
||||
return {
|
||||
node: node,
|
||||
expanded: true,
|
||||
|
||||
get hasChildren() {
|
||||
return window.memoTreeInstance?.getChildNodes(this.node.id).length > 0;
|
||||
},
|
||||
|
||||
toggleExpanded() {
|
||||
this.expanded = !this.expanded;
|
||||
if (this.expanded) {
|
||||
window.memoTreeInstance?.expandedNodes.add(this.node.id);
|
||||
} else {
|
||||
window.memoTreeInstance?.expandedNodes.delete(this.node.id);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
console.log('🌳 트리 메모장 JavaScript 로드 완료');
|
||||
345
frontend/static/js/story-view.js
Normal file
345
frontend/static/js/story-view.js
Normal file
@@ -0,0 +1,345 @@
|
||||
// story-view.js - 정사 경로 스토리 뷰 컴포넌트
|
||||
|
||||
console.log('📖 스토리 뷰 JavaScript 로드 완료');
|
||||
|
||||
// Alpine.js 컴포넌트
|
||||
window.storyViewApp = function() {
|
||||
return {
|
||||
// 사용자 상태
|
||||
currentUser: null,
|
||||
|
||||
// 트리 데이터
|
||||
userTrees: [],
|
||||
selectedTreeId: '',
|
||||
selectedTree: null,
|
||||
canonicalNodes: [], // 정사 경로 노드들만
|
||||
|
||||
// UI 상태
|
||||
viewMode: 'toc', // 'toc' | 'full'
|
||||
showLoginModal: false,
|
||||
showEditModal: false,
|
||||
editingNode: null,
|
||||
|
||||
// 로그인 폼 상태
|
||||
loginForm: {
|
||||
email: '',
|
||||
password: ''
|
||||
},
|
||||
loginError: '',
|
||||
loginLoading: false,
|
||||
|
||||
// 계산된 속성들
|
||||
get totalWords() {
|
||||
return this.canonicalNodes.reduce((sum, node) => sum + (node.word_count || 0), 0);
|
||||
},
|
||||
|
||||
// 초기화
|
||||
async init() {
|
||||
console.log('📖 스토리 뷰 초기화 중...');
|
||||
|
||||
// API 로드 대기
|
||||
let retryCount = 0;
|
||||
while (!window.api && retryCount < 50) {
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
retryCount++;
|
||||
}
|
||||
|
||||
if (!window.api) {
|
||||
console.error('❌ API가 로드되지 않았습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 사용자 인증 상태 확인
|
||||
await this.checkAuthStatus();
|
||||
|
||||
// 인증된 경우 트리 목록 로드
|
||||
if (this.currentUser) {
|
||||
await this.loadUserTrees();
|
||||
}
|
||||
},
|
||||
|
||||
// 인증 상태 확인
|
||||
async checkAuthStatus() {
|
||||
try {
|
||||
const user = await window.api.getCurrentUser();
|
||||
this.currentUser = user;
|
||||
console.log('✅ 사용자 인증됨:', user.email);
|
||||
} catch (error) {
|
||||
console.log('❌ 인증되지 않음:', error.message);
|
||||
this.currentUser = null;
|
||||
|
||||
// 만료된 토큰 정리
|
||||
localStorage.removeItem('token');
|
||||
}
|
||||
},
|
||||
|
||||
// 사용자 트리 목록 로드
|
||||
async loadUserTrees() {
|
||||
try {
|
||||
console.log('📊 사용자 트리 목록 로딩...');
|
||||
const trees = await window.api.getUserMemoTrees();
|
||||
this.userTrees = trees || [];
|
||||
console.log(`✅ ${this.userTrees.length}개 트리 로드 완료`);
|
||||
} catch (error) {
|
||||
console.error('❌ 트리 목록 로드 실패:', error);
|
||||
this.userTrees = [];
|
||||
}
|
||||
},
|
||||
|
||||
// 스토리 로드 (정사 경로만)
|
||||
async loadStory(treeId) {
|
||||
if (!treeId) {
|
||||
this.selectedTree = null;
|
||||
this.canonicalNodes = [];
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('📖 스토리 로딩:', treeId);
|
||||
|
||||
// 트리 정보 로드
|
||||
this.selectedTree = await window.api.getMemoTree(treeId);
|
||||
|
||||
// 모든 노드 로드
|
||||
const allNodes = await window.api.getMemoTreeNodes(treeId);
|
||||
|
||||
// 정사 경로 노드들만 필터링하고 순서대로 정렬
|
||||
this.canonicalNodes = allNodes
|
||||
.filter(node => node.is_canonical)
|
||||
.sort((a, b) => (a.canonical_order || 0) - (b.canonical_order || 0));
|
||||
|
||||
console.log(`✅ 스토리 로드 완료: ${this.canonicalNodes.length}개 정사 노드`);
|
||||
} catch (error) {
|
||||
console.error('❌ 스토리 로드 실패:', error);
|
||||
alert('스토리를 불러오는 중 오류가 발생했습니다.');
|
||||
}
|
||||
},
|
||||
|
||||
// 뷰 모드 토글
|
||||
toggleView() {
|
||||
this.viewMode = this.viewMode === 'toc' ? 'full' : 'toc';
|
||||
},
|
||||
|
||||
// 챕터로 스크롤
|
||||
scrollToChapter(nodeId) {
|
||||
if (this.viewMode === 'toc') {
|
||||
this.viewMode = 'full';
|
||||
// DOM 업데이트 대기 후 스크롤
|
||||
this.$nextTick(() => {
|
||||
const element = document.getElementById(`chapter-${nodeId}`);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const element = document.getElementById(`chapter-${nodeId}`);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 챕터 편집 (인라인 모달)
|
||||
editChapter(node) {
|
||||
this.editingNode = { ...node }; // 복사본 생성
|
||||
this.showEditModal = true;
|
||||
},
|
||||
|
||||
// 편집 취소
|
||||
cancelEdit() {
|
||||
this.showEditModal = false;
|
||||
this.editingNode = null;
|
||||
},
|
||||
|
||||
// 편집 저장
|
||||
async saveEdit() {
|
||||
if (!this.editingNode) return;
|
||||
|
||||
try {
|
||||
console.log('💾 챕터 저장 중:', this.editingNode.title);
|
||||
|
||||
const updatedNode = await window.api.updateMemoNode(this.editingNode.id, {
|
||||
title: this.editingNode.title,
|
||||
content: this.editingNode.content
|
||||
});
|
||||
|
||||
// 로컬 상태 업데이트
|
||||
const nodeIndex = this.canonicalNodes.findIndex(n => n.id === this.editingNode.id);
|
||||
if (nodeIndex !== -1) {
|
||||
this.canonicalNodes = this.canonicalNodes.map(n =>
|
||||
n.id === this.editingNode.id ? { ...n, ...updatedNode } : n
|
||||
);
|
||||
}
|
||||
|
||||
this.showEditModal = false;
|
||||
this.editingNode = null;
|
||||
|
||||
console.log('✅ 챕터 저장 완료');
|
||||
} catch (error) {
|
||||
console.error('❌ 챕터 저장 실패:', error);
|
||||
alert('챕터 저장 중 오류가 발생했습니다.');
|
||||
}
|
||||
},
|
||||
|
||||
// 스토리 내보내기
|
||||
async exportStory() {
|
||||
if (!this.selectedTree || this.canonicalNodes.length === 0) {
|
||||
alert('내보낼 스토리가 없습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 텍스트 형태로 스토리 생성
|
||||
let storyText = `${this.selectedTree.title}\n`;
|
||||
storyText += `${'='.repeat(this.selectedTree.title.length)}\n\n`;
|
||||
|
||||
if (this.selectedTree.description) {
|
||||
storyText += `${this.selectedTree.description}\n\n`;
|
||||
}
|
||||
|
||||
storyText += `작성일: ${this.formatDate(this.selectedTree.created_at)}\n`;
|
||||
storyText += `수정일: ${this.formatDate(this.selectedTree.updated_at)}\n`;
|
||||
storyText += `총 ${this.canonicalNodes.length}개 챕터, ${this.totalWords}단어\n\n`;
|
||||
storyText += `${'='.repeat(50)}\n\n`;
|
||||
|
||||
this.canonicalNodes.forEach((node, index) => {
|
||||
storyText += `${index + 1}. ${node.title}\n`;
|
||||
storyText += `${'-'.repeat(node.title.length + 3)}\n\n`;
|
||||
|
||||
if (node.content) {
|
||||
// HTML 태그 제거
|
||||
const plainText = node.content.replace(/<[^>]*>/g, '');
|
||||
storyText += `${plainText}\n\n`;
|
||||
} else {
|
||||
storyText += `[이 챕터는 아직 내용이 없습니다]\n\n`;
|
||||
}
|
||||
|
||||
storyText += `${'─'.repeat(30)}\n\n`;
|
||||
});
|
||||
|
||||
// 파일 다운로드
|
||||
const blob = new Blob([storyText], { type: 'text/plain;charset=utf-8' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${this.selectedTree.title}_정사스토리.txt`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
console.log('✅ 스토리 내보내기 완료');
|
||||
} catch (error) {
|
||||
console.error('❌ 스토리 내보내기 실패:', error);
|
||||
alert('스토리 내보내기 중 오류가 발생했습니다.');
|
||||
}
|
||||
},
|
||||
|
||||
// 스토리 인쇄
|
||||
printStory() {
|
||||
if (!this.selectedTree || this.canonicalNodes.length === 0) {
|
||||
alert('인쇄할 스토리가 없습니다.');
|
||||
return;
|
||||
}
|
||||
|
||||
// 전체 뷰로 변경 후 인쇄
|
||||
if (this.viewMode === 'toc') {
|
||||
this.viewMode = 'full';
|
||||
this.$nextTick(() => {
|
||||
window.print();
|
||||
});
|
||||
} else {
|
||||
window.print();
|
||||
}
|
||||
},
|
||||
|
||||
// 유틸리티 함수들
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('ko-KR', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
},
|
||||
|
||||
formatContent(content) {
|
||||
if (!content) return '';
|
||||
|
||||
// 간단한 마크다운 스타일 변환
|
||||
return content
|
||||
.replace(/\n\n/g, '</p><p>')
|
||||
.replace(/\n/g, '<br>')
|
||||
.replace(/^/, '<p>')
|
||||
.replace(/$/, '</p>');
|
||||
},
|
||||
|
||||
getNodeTypeLabel(nodeType) {
|
||||
const labels = {
|
||||
'folder': '📁 폴더',
|
||||
'memo': '📝 메모',
|
||||
'chapter': '📖 챕터',
|
||||
'character': '👤 인물',
|
||||
'plot': '📋 플롯'
|
||||
};
|
||||
return labels[nodeType] || '📝 메모';
|
||||
},
|
||||
|
||||
getStatusLabel(status) {
|
||||
const labels = {
|
||||
'draft': '📝 초안',
|
||||
'writing': '✍️ 작성중',
|
||||
'review': '👀 검토중',
|
||||
'complete': '✅ 완료'
|
||||
};
|
||||
return labels[status] || '📝 초안';
|
||||
},
|
||||
|
||||
// 로그인 관련 함수들
|
||||
openLoginModal() {
|
||||
this.showLoginModal = true;
|
||||
this.loginForm = { email: '', password: '' };
|
||||
this.loginError = '';
|
||||
},
|
||||
|
||||
async handleLogin() {
|
||||
this.loginLoading = true;
|
||||
this.loginError = '';
|
||||
|
||||
try {
|
||||
const response = await window.api.login(this.loginForm.email, this.loginForm.password);
|
||||
|
||||
if (response.success) {
|
||||
this.currentUser = response.user;
|
||||
this.showLoginModal = false;
|
||||
|
||||
// 트리 목록 다시 로드
|
||||
await this.loadUserTrees();
|
||||
} else {
|
||||
this.loginError = response.message || '로그인에 실패했습니다.';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('로그인 오류:', error);
|
||||
this.loginError = '로그인 중 오류가 발생했습니다.';
|
||||
} finally {
|
||||
this.loginLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
async logout() {
|
||||
try {
|
||||
await window.api.logout();
|
||||
this.currentUser = null;
|
||||
this.userTrees = [];
|
||||
this.selectedTree = null;
|
||||
this.canonicalNodes = [];
|
||||
console.log('✅ 로그아웃 완료');
|
||||
} catch (error) {
|
||||
console.error('❌ 로그아웃 실패:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
console.log('📖 스토리 뷰 컴포넌트 등록 완료');
|
||||
Reference in New Issue
Block a user