..

2025-07-07 17:44:59 +09:00
parent 5a0ff2e3ad
commit d537030eb3
10 changed files with 435 additions and 24 deletions
--- a/Web/wwwroot/index.html
+++ b/Web/wwwroot/index.html
@@ -32,14 +32,21 @@
        <!-- 상태 표시 -->
        <div id="status" class="mb-6"></div>

-        <!-- 서버 추가 버튼 -->
-        <div class="mb-6">
+        <!-- 버튼 그룹 -->
+        <div class="mb-6 flex space-x-4">
            <button id="addServerBtn" class="bg-primary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200">
                <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
                새 서버 추가
            </button>
+            <button id="settingsBtn" class="bg-secondary hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition duration-200">
+                <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                </svg>
+                설정
+            </button>
        </div>

        <!-- 서버 목록 -->
@@ -94,6 +101,36 @@
        </div>
    </div>

+    <!-- 설정 모달 -->
+    <div id="settingsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
+        <div class="flex items-center justify-center min-h-screen p-4">
+            <div class="bg-white rounded-lg shadow-xl max-w-lg w-full">
+                <div class="px-6 py-4 border-b border-gray-200">
+                    <h3 class="text-lg font-semibold text-gray-800">설정</h3>
+                </div>
+                <form id="settingsForm" class="p-6">
+                    <div class="mb-4">
+                        <label for="vncViewerPath" class="block text-sm font-medium text-gray-700 mb-2">VNC Viewer 경로</label>
+                        <div class="flex space-x-2">
+                            <input type="text" id="vncViewerPath" class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="C:\Program Files\TightVNC\tvnviewer.exe">
+                            <button type="button" id="browseVncBtn" class="px-4 py-2 bg-secondary text-white rounded-md hover:bg-gray-600 transition duration-200">찾아보기</button>
+                        </div>
+                        <p class="text-sm text-gray-500 mt-1">VNC Viewer 실행 파일의 경로를 설정하세요.</p>
+                    </div>
+                    <div class="mb-6">
+                        <label for="webServerPort" class="block text-sm font-medium text-gray-700 mb-2">웹 서버 포트</label>
+                        <input type="number" id="webServerPort" value="8080" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
+                        <p class="text-sm text-gray-500 mt-1">내장 웹 서버의 포트 번호를 설정하세요.</p>
+                    </div>
+                    <div class="flex justify-end space-x-3">
+                        <button type="button" id="settingsCancelBtn" class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 transition duration-200">취소</button>
+                        <button type="submit" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-700 transition duration-200">저장</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
    <!-- 확인 모달 -->
    <div id="confirmModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen p-4">
--- a/Web/wwwroot/js/app.js
+++ b/Web/wwwroot/js/app.js
@@ -16,17 +16,37 @@ class VNCServerApp {
            this.showServerModal();
        });

+        // 설정 버튼
+        document.getElementById('settingsBtn').addEventListener('click', () => {
+            this.showSettingsModal();
+        });
+
        // 모달 취소 버튼
        document.getElementById('cancelBtn').addEventListener('click', () => {
            this.hideServerModal();
        });

+        document.getElementById('settingsCancelBtn').addEventListener('click', () => {
+            this.hideSettingsModal();
+        });
+
        // 서버 폼 제출
        document.getElementById('serverForm').addEventListener('submit', (e) => {
            e.preventDefault();
            this.saveServer();
        });

+        // 설정 폼 제출
+        document.getElementById('settingsForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.saveSettings();
+        });
+
+        // VNC 경로 찾아보기 버튼
+        document.getElementById('browseVncBtn').addEventListener('click', () => {
+            this.browseVNCViewer();
+        });
+
        // 확인 모달 이벤트
        document.getElementById('confirmCancel').addEventListener('click', () => {
            this.hideConfirmModal();
@@ -98,12 +118,15 @@ class VNCServerApp {

    async checkVNCStatus() {
        try {
+            console.log('VNC 상태 확인 시작...'); // 디버깅용
            const response = await fetch(`${this.apiBase}/vnc-status`);
            if (!response.ok) throw new Error('VNC 상태를 확인할 수 없습니다.');
            
            const status = await response.json();
+            console.log('VNC 상태:', status); // 디버깅용
            this.showVNCStatus(status);
        } catch (error) {
+            console.error('VNC 상태 확인 오류:', error); // 디버깅용
            this.showError('VNC 상태 확인 중 오류가 발생했습니다: ' + error.message);
        }
    }
@@ -113,22 +136,28 @@ class VNCServerApp {
        if (status.isInstalled) {
            statusDiv.innerHTML = `
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
-                    <div class="flex items-center">
-                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
-                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
-                        </svg>
-                        VNC Viewer가 설치되어 있습니다.
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
+                            </svg>
+                            VNC Viewer가 설치되어 있습니다.
+                        </div>
+                        <button onclick="app.showSettingsModal()" class="text-green-600 hover:text-green-800 text-sm underline">설정 변경</button>
                    </div>
                </div>
            `;
        } else {
            statusDiv.innerHTML = `
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-                    <div class="flex items-center">
-                        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
-                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
-                        </svg>
-                        VNC Viewer가 설치되어 있지 않습니다. 경로: ${status.path}
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
+                            </svg>
+                            VNC Viewer를 찾을 수 없습니다. 경로: ${status.path}
+                        </div>
+                        <button onclick="app.showSettingsModal()" class="text-red-600 hover:text-red-800 text-sm underline">설정</button>
                    </div>
                </div>
            `;
@@ -160,6 +189,106 @@ class VNCServerApp {
        document.getElementById('serverModal').classList.add('hidden');
    }

+    showSettingsModal() {
+        console.log('설정 모달 열기 시작'); // 디버깅용
+        this.loadSettings();
+        document.getElementById('settingsModal').classList.remove('hidden');
+        console.log('설정 모달 열기 완료'); // 디버깅용
+    }
+
+    hideSettingsModal() {
+        document.getElementById('settingsModal').classList.add('hidden');
+    }
+
+    async loadSettings() {
+        try {
+            console.log('설정 로드 시작...'); // 디버깅용
+            
+            const response = await fetch(`${this.apiBase}/settings`);
+            console.log('설정 로드 응답 상태:', response.status); // 디버깅용
+            
+            if (!response.ok) throw new Error('설정을 불러올 수 없습니다.');
+            
+            const settings = await response.json();
+            console.log('로드된 설정:', settings); // 디버깅용
+            console.log('VNC 경로:', settings.vncViewerPath); // 디버깅용
+            console.log('웹 포트:', settings.webServerPort); // 디버깅용
+            
+            const vncPathElement = document.getElementById('vncViewerPath');
+            const webPortElement = document.getElementById('webServerPort');
+            
+            console.log('VNC 경로 요소:', vncPathElement); // 디버깅용
+            console.log('웹 포트 요소:', webPortElement); // 디버깅용
+            
+            vncPathElement.value = settings.vncViewerPath || '';
+            webPortElement.value = settings.webServerPort || 8080;
+            
+            console.log('설정 로드 완료'); // 디버깅용
+            console.log('설정된 VNC 경로 값:', vncPathElement.value); // 디버깅용
+            console.log('설정된 웹 포트 값:', webPortElement.value); // 디버깅용
+        } catch (error) {
+            console.error('설정 로드 오류:', error); // 디버깅용
+            this.showError('설정을 불러오는 중 오류가 발생했습니다: ' + error.message);
+        }
+    }
+
+    async saveSettings() {
+        const vncPath = document.getElementById('vncViewerPath').value;
+        const webPort = parseInt(document.getElementById('webServerPort').value);
+        
+        const settings = {
+            vncViewerPath: vncPath,            
+            webServerPort: webPort
+        };
+
+        console.log('저장할 설정:', settings); // 디버깅용
+        console.log('VNC 경로 값:', vncPath); // 디버깅용
+        console.log('웹 포트 값:', webPort); // 디버깅용
+
+        try {
+            const response = await fetch(`${this.apiBase}/settings`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(settings)
+            });
+
+            console.log('응답 상태:', response.status); // 디버깅용
+
+            if (!response.ok) {
+                const errorText = await response.text();
+                throw new Error(`설정 저장에 실패했습니다. 상태: ${response.status}, 응답: ${errorText}`);
+            }
+            
+            const result = await response.json();
+            console.log('저장 결과:', result); // 디버깅용
+            this.showSuccess(result.message);
+            this.hideSettingsModal();
+            this.checkVNCStatus(); // VNC 상태 다시 확인
+        } catch (error) {
+            console.error('설정 저장 오류:', error); // 디버깅용
+            this.showError('설정 저장 중 오류가 발생했습니다: ' + error.message);
+        }
+    }
+
+    browseVNCViewer() {
+        // C#의 OpenFileDialog 호출
+        if (window.chrome && window.chrome.webview) {
+            // WebView2 환경에서 C# 메서드 호출
+            window.chrome.webview.postMessage('OPEN_FILE_DIALOG');
+        } else {
+            // 일반 브라우저에서는 수동 입력 안내
+            this.showError('WebView2 환경에서만 파일 선택이 가능합니다. 경로를 수동으로 입력해주세요.');
+        }
+    }
+
+    // C#에서 호출하는 함수
+    receiveFilePath(filePath) {
+        document.getElementById('vncViewerPath').value = filePath;
+        this.showSuccess('VNC Viewer 경로가 설정되었습니다.');
+    }
+
    async saveServer() {
        const serverUser = document.getElementById('serverUser').value;
        const serverIp = document.getElementById('serverIp').value;
@@ -302,4 +431,9 @@ class VNCServerApp {
 }

 // 앱 초기화
-const app = new VNCServerApp(); 
+const app = new VNCServerApp();
+
+// C#에서 호출할 수 있도록 전역 함수로 등록
+window.receiveFilePath = function(filePath) {
+    app.receiveFilePath(filePath);
+};