${treeLines}
${nodeConnector}
${hasChildren ?
`` :
''
}
${this.getNodeIcon(node.node_type)}
${node.title}
${node.word_count > 0 ?
`
${node.word_count}w` :
''
}
`;
// 자식 노드들 재귀적으로 렌더링
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 += '
';
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 = `