Update 2025-12-19 16:23:03

backend/templates/scp_diff.html

@@ -1,58 +1,173 @@
 {% extends "base.html" %}
 
-{% block title %}설정 파일 비교 - Dell Server Info{% endblock %}
+{% block title %}설정 파일 비교: {{ file1 }} vs {{ file2 }}{% endblock %}
 
 {% block extra_css %}
-<link rel="stylesheet" href="{{ url_for('static', filename='css/scp.css') }}">
+<!-- Monaco Diff Editor Styles -->
+<style>
+    .diff-page-container {
+        display: flex;
+        flex-direction: column;
+        height: calc(100vh - 140px);
+        min-height: 600px;
+        background: #fff;
+        border: 1px solid #e2e8f0;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+    }
+
+    .diff-toolbar {
+        background-color: #f8fafc;
+        border-bottom: 1px solid #e2e8f0;
+        padding: 0.75rem 1.5rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .diff-files {
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+        font-weight: 600;
+        color: #334155;
+    }
+
+    .file-badge {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.25rem 0.75rem;
+        background: #fff;
+        border: 1px solid #cbd5e1;
+        border-radius: 6px;
+        font-size: 0.9rem;
+    }
+
+    .diff-arrow {
+        color: #94a3b8;
+        font-size: 1.2rem;
+    }
+
+    #monaco-diff-root {
+        flex: 1;
+        width: 100%;
+        height: 100%;
+    }
+</style>
 {% endblock %}
 
 {% block content %}
-<div class="container mt-4">
-    <div class="d-flex justify-content-between align-items-center mb-3">
-        <h2>설정 파일 비교</h2>
-        <a href="{{ url_for('xml.xml_management') }}" class="btn btn-secondary">
-            <i class="fas fa-arrow-left me-1"></i> 목록으로
+<div class="container-fluid py-4 h-100">
+    <!-- Breadcrumb -->
+    <div class="mb-3">
+        <a href="{{ url_for('xml.xml_management') }}" class="text-decoration-none text-muted small fw-bold">
+            <i class="bi bi-arrow-left me-1"></i>목록으로 돌아가기
         </a>
     </div>
 
-    <div class="card mb-4">
-        <div class="card-header bg-info text-white">
-            <i class="fas fa-exchange-alt me-2"></i>비교 대상
-        </div>
-        <div class="card-body">
-            <div class="row text-center">
-                <div class="col-md-5">
-                    <h5>{{ file1 }}</h5>
+    <div class="diff-page-container">
+        <!-- Toolbar -->
+        <div class="diff-toolbar">
+            <div class="diff-files">
+                <div class="file-badge text-danger border-danger-subtle bg-danger-subtle">
+                    <i class="bi bi-file-earmark-minus"></i>
+                    <span>{{ file1 }}</span> <!-- Original -->
                 </div>
-                <div class="col-md-2">
-                    <i class="fas fa-arrow-right text-muted"></i>
-                </div>
-                <div class="col-md-5">
-                    <h5>{{ file2 }}</h5>
+                <i class="bi bi-arrow-right diff-arrow"></i>
+                <div class="file-badge text-success border-success-subtle bg-success-subtle">
+                    <i class="bi bi-file-earmark-plus"></i>
+                    <span>{{ file2 }}</span> <!-- Modified -->
                 </div>
             </div>
+
+            <div class="btn-group btn-group-sm">
+                <button class="btn btn-outline-secondary" onclick="toggleInlineDiff()" id="viewToggleBtn">
+                    <i class="bi bi-layout-split me-1"></i>Inline View
+                </button>
+            </div>
         </div>
+
+        <!-- Monaco Diff Editor -->
+        <div id="monaco-diff-root"></div>
     </div>
 
-    <div class="card">
-        <div class="card-header">
-            <i class="fas fa-code me-2"></i>Diff 결과
-        </div>
-        <div class="card-body p-0">
-            <div class="diff-container">
-                {% for line in diff_content.splitlines() %}
-                {% if line.startswith('+++') or line.startswith('---') %}
-                <span class="diff-line diff-header">{{ line }}</span>
-                {% elif line.startswith('+') %}
-                <span class="diff-line diff-add">{{ line }}</span>
-                {% elif line.startswith('-') %}
-                <span class="diff-line diff-del">{{ line }}</span>
-                {% else %}
-                <span class="diff-line">{{ line }}</span>
-                {% endif %}
-                {% endfor %}
-            </div>
-        </div>
-    </div>
+    <!-- Raw Content Hidden Inputs (Jinja2 will escape HTML entities automatically) -->
+    <textarea id="hidden_content1" style="display:none;">{{ content1 }}</textarea>
+    <textarea id="hidden_content2" style="display:none;">{{ content2 }}</textarea>
 </div>
+{% endblock %}
+
+{% block scripts %}
+<script src="https://unpkg.com/monaco-editor@0.45.0/min/vs/loader.js"></script>
+<script>
+    let diffEditor = null;
+    let isInline = false;
+
+    document.addEventListener('DOMContentLoaded', function () {
+        // 1. Check for loader failure
+        if (typeof require === 'undefined') {
+            document.getElementById('monaco-diff-root').innerHTML =
+                '<div class="d-flex justify-content-center align-items-center h-100 text-danger">' +
+                '<i class="bi bi-exclamation-triangle me-2"></i>Monaco Editor 리소스를 불러올 수 없습니다. 인터넷 연결을 확인하세요.' +
+                '</div>';
+            return;
+        }
+
+        require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.45.0/min/vs' } });
+
+        require(['vs/editor/editor.main'], function () {
+            // 2. Read content from hidden textareas
+            // Jinja2가 HTML escaping을 처리하므로, .value를 통해 원본 XML을 얻을 수 있습니다.
+            const content1 = document.getElementById('hidden_content1').value;
+            const content2 = document.getElementById('hidden_content2').value;
+
+            const originalModel = monaco.editor.createModel(content1, 'xml');
+            const modifiedModel = monaco.editor.createModel(content2, 'xml');
+
+            const container = document.getElementById('monaco-diff-root');
+
+            // 3. Create Diff Editor
+            diffEditor = monaco.editor.createDiffEditor(container, {
+                theme: 'vs',
+                originalEditable: false,
+                readOnly: true,
+                renderSideBySide: true, // Default: Split View
+                automaticLayout: true,
+                minimap: { enabled: true },
+                diffWordWrap: 'off'
+            });
+
+            diffEditor.setModel({
+                original: originalModel,
+                modified: modifiedModel
+            });
+
+            // 네비게이션 기능 추가
+            diffEditor.getNavigator();
+
+        }, function (err) {
+            document.getElementById('monaco-diff-root').innerHTML =
+                '<div class="d-flex justify-content-center align-items-center h-100 text-danger">' +
+                '<i class="bi bi-exclamation-triangle me-2"></i>에디터 로드 실패: ' + err.message + '</div>';
+        });
+    });
+
+    function toggleInlineDiff() {
+        if (!diffEditor) return;
+
+        isInline = !isInline;
+        diffEditor.updateOptions({
+            renderSideBySide: !isInline
+        });
+
+        const btn = document.getElementById('viewToggleBtn');
+        if (isInline) {
+            btn.innerHTML = '<i class="bi bi-layout-sidebar me-1"></i>Split View';
+        } else {
+            btn.innerHTML = '<i class="bi bi-layout-split me-1"></i>Inline View';
+        }
+    }
+</script>
 {% endblock %}