fix

app/static/js/app-device.js

@@ -19,16 +19,74 @@ const programsLoading = document.getElementById('programsLoading');
 const programsList = document.getElementById('programsList');
 const noProgramsMessage = document.getElementById('noProgramsMessage');
 
+// 장치 서버 URL 설정
+// 직접 접근 설정: 빈 문자열이면 현재 호스트의 5050 포트를 사용
+let DEVICE_SERVER_URL = ''; // 서버에서 전달된 URL이 있으면 초기화 시 설정됨
+
+/**
+ * 장치 서버 API 경로 생성 함수
+ * @param {string} endpoint - API 엔드포인트 경로
+ * @returns {string} - 완전한 API URL
+ */
+function getDeviceApiUrl(endpoint) {
+    // 직접 접근 모드인 경우 (별도 서버에 직접 요청)
+    if (DEVICE_SERVER_URL) {
+        return `${DEVICE_SERVER_URL}${endpoint}`;
+    }
+    
+    // 프록시 모드인 경우 (내부 API 경로 사용)
+    return endpoint;
+}
+
+/**
+ * 장치 서버 설정 초기화 (페이지 로드 시 호출)
+ */
+function initDeviceServerSettings() {
+    console.log("장치 서버 설정 초기화 시작");
+    // 서버 URL 설정 (웹 서버로부터 설정 불러오기)
+    fetch('/api/device/settings')
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('설정을 가져올 수 없습니다');
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (data.server_url) {
+                console.log(`장치 서버 URL 설정됨: ${data.server_url}`);
+                DEVICE_SERVER_URL = data.server_url;
+            } else {
+                // 설정 없음 - 자동 생성 (현재 호스트 + 포트 5050)
+                const currentHost = window.location.hostname;
+                const protocol = window.location.protocol;
+                DEVICE_SERVER_URL = `${protocol}//${currentHost}:5050`;
+                console.log(`장치 서버 URL 자동 설정: ${DEVICE_SERVER_URL}`);
+            }
+        })
+        .catch(error => {
+            console.error('장치 서버 설정 초기화 오류:', error);
+            // 기본값으로 설정 (현재 호스트 + 포트 5050)
+            const currentHost = window.location.hostname;
+            const protocol = window.location.protocol;
+            DEVICE_SERVER_URL = `${protocol}//${currentHost}:5050`;
+            console.log(`장치 서버 URL 기본값 설정: ${DEVICE_SERVER_URL}`);
+        });
+}
+
 // 페이지 로드 시 초기화
 document.addEventListener('DOMContentLoaded', () => {
     console.log("장치 관리 모듈 초기화");
     
-    // 탭 전환 이벤트 리스너 추가
-    deviceTab.addEventListener('click', () => {
-        console.log("장치 관리 탭 클릭");
-        switchTab('device');
-        checkDeviceStatus(); // 탭 전환 시 자동으로 상태 확인
-    });
+    // 장치 서버 설정 초기화
+    initDeviceServerSettings();
+    
+    // 탭 전환 이벤트 리스너는 이미 app.js에서 등록되어 있으므로 여기서는 등록하지 않음
+    // 대신 전역 함수가 올바르게 설정되어 있는지 확인
+    if (typeof window.switchTab !== 'function') {
+        console.log("window.switchTab 함수가 정의되지 않았습니다. 내부 구현을 사용합니다.");
+    } else {
+        console.log("window.switchTab 함수 사용 가능합니다.");
+    }
     
     // 장치 상태 확인 버튼 이벤트 리스너
     checkDeviceStatusButton.addEventListener('click', () => {
@@ -49,48 +107,6 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 });
 
-/**
- * 탭 전환 함수 (기존 app.js의 함수 확장)
- * @param {string} tabName - 활성화할 탭 이름 ('chat', 'docs', 'device')
- */
-function switchTab(tabName) {
-    // app.js에 이미 정의된 함수를 참조
-    if (typeof window.switchTab === 'function') {
-        // 기존 switchTab 함수 호출
-        window.switchTab(tabName);
-        return;
-    }
-    
-    // 기존 함수가 없는 경우를 대비한 기본 구현
-    const chatTab = document.getElementById('chatTab');
-    const docsTab = document.getElementById('docsTab');
-    const chatSection = document.getElementById('chatSection');
-    const docsSection = document.getElementById('docsSection');
-    
-    if (tabName === 'chat') {
-        chatTab.classList.add('active');
-        docsTab.classList.remove('active');
-        deviceTab.classList.remove('active');
-        chatSection.classList.add('active');
-        docsSection.classList.remove('active');
-        deviceSection.classList.remove('active');
-    } else if (tabName === 'docs') {
-        chatTab.classList.remove('active');
-        docsTab.classList.add('active');
-        deviceTab.classList.remove('active');
-        chatSection.classList.remove('active');
-        docsSection.classList.add('active');
-        deviceSection.classList.remove('active');
-    } else if (tabName === 'device') {
-        chatTab.classList.remove('active');
-        docsTab.classList.remove('active');
-        deviceTab.classList.add('active');
-        chatSection.classList.remove('active');
-        docsSection.classList.remove('active');
-        deviceSection.classList.add('active');
-    }
-}
-
 /**
  * 에러 처리 헬퍼 함수
  * @param {Error} error - 발생한 오류
@@ -126,7 +142,7 @@ function escapeHtml(unsafe) {
 }
 
 /**
- * 장치 관리 서버 상태 확인 함수
+ * 장치 관리 서버 상태 확인 함수 - 전역 함수로 export
  */
 async function checkDeviceStatus() {
     console.log("장치 상태 확인 중...");
@@ -140,8 +156,8 @@ async function checkDeviceStatus() {
         const controller = new AbortController();
         const timeoutId = setTimeout(() => controller.abort(), 5000); // 5초 타임아웃
         
-        // API 요청
-        const response = await fetch('/api/device/status', {
+        // API 요청 - 수정된 URL 구성 사용
+        const response = await fetch(getDeviceApiUrl('/api/status'), {
             signal: controller.signal
         });
         
@@ -159,10 +175,10 @@ async function checkDeviceStatus() {
         deviceStatusLoading.classList.add('hidden');
         deviceStatusResult.classList.remove('hidden');
         
-        if (data.success) {
+        if (data.status === "online") {
             // 온라인 상태인 경우
             statusIcon.innerHTML = '<i class="fas fa-circle online"></i>';
-            statusText.textContent = `서버 상태: ${data.server_status || '정상'}`;
+            statusText.textContent = `서버 상태: ${data.status || '정상'}`;
             
             // 자동으로 장치 목록 로드
             loadDevices();
@@ -199,8 +215,8 @@ async function loadDevices() {
         const controller = new AbortController();
         const timeoutId = setTimeout(() => controller.abort(), 5000); // 5초 타임아웃
         
-        // API 요청
-        const response = await fetch('/api/device/list', {
+        // API 요청 - 수정된 URL 구성 사용
+        const response = await fetch(getDeviceApiUrl('/api/devices'), {
             signal: controller.signal
         });
         
@@ -217,19 +233,15 @@ async function loadDevices() {
         // UI 업데이트
         devicesLoading.classList.add('hidden');
         
-        if (data.success && data.devices && data.devices.length > 0) {
-            // 장치가 있는 경우
+        if (data.devices && data.devices.length > 0) {
+            // 장치 목록 표시
             data.devices.forEach(device => {
-                const deviceItem = createDeviceItem(device);
-                deviceList.appendChild(deviceItem);
+                const deviceElement = createDeviceItem(device);
+                deviceList.appendChild(deviceElement);
             });
         } else {
-            // 장치가 없는 경우
+            // 장치 없음 메시지 표시
             noDevicesMessage.classList.remove('hidden');
-            
-            if (data.error) {
-                noDevicesMessage.querySelector('p').textContent = `오류: ${data.error}`;
-            }
         }
     } catch (error) {
         console.error("장치 목록 로드 오류:", error);
@@ -237,7 +249,7 @@ async function loadDevices() {
         // UI 업데이트
         devicesLoading.classList.add('hidden');
         noDevicesMessage.classList.remove('hidden');
-        noDevicesMessage.querySelector('p').textContent = handleError(error);
+        noDevicesMessage.textContent = handleError(error);
     }
 }
 
@@ -334,8 +346,8 @@ async function loadPrograms() {
         const controller = new AbortController();
         const timeoutId = setTimeout(() => controller.abort(), 5000); // 5초 타임아웃
         
-        // API 요청
-        const response = await fetch('/api/device/programs', {
+        // API 요청 - 수정된 URL 구성 사용
+        const response = await fetch(getDeviceApiUrl('/api/programs'), {
             signal: controller.signal
         });
         
@@ -352,20 +364,15 @@ async function loadPrograms() {
         // UI 업데이트
         programsLoading.classList.add('hidden');
         
-        if (data.success && data.programs && data.programs.length > 0) {
-            // 프로그램이 있는 경우
+        if (data.programs && data.programs.length > 0) {
+            // 프로그램 목록 표시
             data.programs.forEach(program => {
-                const programItem = createProgramItem(program);
-                programsList.appendChild(programItem);
+                const programElement = createProgramItem(program);
+                programsList.appendChild(programElement);
             });
-            noProgramsMessage.classList.add('hidden');
         } else {
-            // 프로그램이 없는 경우
+            // 프로그램 없음 메시지 표시
             noProgramsMessage.classList.remove('hidden');
-            
-            if (data.error) {
-                noProgramsMessage.querySelector('p').textContent = `오류: ${data.error}`;
-            }
         }
     } catch (error) {
         console.error("프로그램 목록 로드 오류:", error);
@@ -373,7 +380,7 @@ async function loadPrograms() {
         // UI 업데이트
         programsLoading.classList.add('hidden');
         noProgramsMessage.classList.remove('hidden');
-        noProgramsMessage.querySelector('p').textContent = handleError(error);
+        noProgramsMessage.textContent = handleError(error);
     }
 }
 
@@ -421,52 +428,50 @@ function createProgramItem(program) {
 
 /**
  * 프로그램 실행 함수
- * @param {string} programId - 프로그램 ID
- * @param {string} programName - 프로그램 이름
+ * @param {string} programId - 실행할 프로그램 ID
+ * @param {string} programName - 프로그램 이름 (알림용)
  */
 async function executeProgram(programId, programName) {
-    console.log(`프로그램 실행: ${programName} (ID: ${programId})`);
+    if (!programId) return;
+    
+    console.log(`프로그램 실행 요청: ${programId} (${programName})`);
     
     // 실행 확인
     if (!confirm(`'${programName}' 프로그램을 실행하시겠습니까?`)) {
+        console.log('프로그램 실행 취소됨');
         return;
     }
     
     try {
-        // 타임아웃 설정을 위한 컨트롤러
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), 10000); // 10초 타임아웃 (실행에는 더 긴 시간 부여)
+        // 로딩 알림 표시
+        showNotification(`'${programName}' 실행 중...`, 'info');
         
-        // API 요청
-        const response = await fetch(`/api/device/programs/${programId}/execute`, {
+        // API 요청 - 수정된 URL 구성 사용
+        const response = await fetch(getDeviceApiUrl(`/api/programs/${programId}/execute`), {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
             },
-            body: JSON.stringify({}),
-            signal: controller.signal
+            body: JSON.stringify({}) // 필요 시 추가 파라미터 전달
         });
         
-        clearTimeout(timeoutId); // 타임아웃 해제
-        
         // 응답 처리
         if (!response.ok) {
-            const errorData = await response.json();
-            throw new Error(errorData.error || `HTTP 오류: ${response.status}`);
+            throw new Error(`HTTP 오류: ${response.status}`);
         }
         
         const data = await response.json();
-        console.log("프로그램 실행 응답:", data);
+        console.log(`프로그램 실행 응답:`, data);
         
-        // 성공 메시지
+        // 결과 처리
         if (data.success) {
-            showNotification(`'${programName}' 실행이 요청되었습니다.`, 'success');
+            showNotification(`'${programName}' 실행 성공: ${data.message}`, 'success');
         } else {
-            showNotification(`'${programName}' 실행 요청 실패: ${data.error || '알 수 없는 오류'}`, 'error');
+            showNotification(`'${programName}' 실행 실패: ${data.message || '알 수 없는 오류'}`, 'error');
         }
     } catch (error) {
-        console.error(`프로그램 실행 오류 (${programName}):`, error);
-        showNotification(`'${programName}' 실행 중 오류 발생: ${handleError(error)}`, 'error');
+        console.error(`프로그램 실행 오류 (${programId}):`, error);
+        showNotification(`'${programName}' 실행 오류: ${handleError(error)}`, 'error');
     }
 }
 
@@ -508,5 +513,5 @@ function showNotification(message, type = 'info') {
     }, 5000); // 5초 후 사라짐
 }
 
-// 앱 전역에서 switchTab 함수가 사용 가능하도록 export
-window.deviceSwitchTab = switchTab;
+// checkDeviceStatus 함수를 전역으로 노출
+window.checkDeviceStatus = checkDeviceStatus;

app/static/js/app.js

@@ -174,14 +174,29 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // 탭 전환 이벤트 리스너
     chatTab.addEventListener('click', () => {
+        console.log("대화 탭 클릭");
         switchTab('chat');
     });
     
     docsTab.addEventListener('click', () => {
+        console.log("문서관리 탭 클릭");
         switchTab('docs');
         loadDocuments();
     });
     
+    // 장치관리 탭 이벤트 리스너 추가
+    deviceTab.addEventListener('click', () => {
+        console.log("장치관리 탭 클릭");
+        switchTab('device');
+        // 장치관리 탭으로 전환 시 필요한 초기화 작업이 있다면 여기서 호출
+        if (typeof checkDeviceStatus === 'function') {
+            console.log("장치 상태 확인 함수 호출");
+            checkDeviceStatus();
+        } else {
+            console.log("checkDeviceStatus 함수가 정의되지 않았습니다");
+        }
+    });
+    
     // LLM 선택 이벤트 리스너
     llmSelect.addEventListener('change', (event) => {
         changeLLM(event.target.value);
@@ -231,6 +246,8 @@ document.addEventListener('DOMContentLoaded', () => {
  * @param {string} tabName - 활성화할 탭 이름 ('chat', 'docs', 'device')
  */
 function switchTab(tabName) {
+    console.log(`switchTab 함수 호출: ${tabName}`);
+    
     if (tabName === 'chat') {
         chatTab.classList.add('active');
         docsTab.classList.remove('active');
@@ -252,6 +269,7 @@ function switchTab(tabName) {
         chatSection.classList.remove('active');
         docsSection.classList.remove('active');
         deviceSection.classList.add('active');
+        console.log("장치관리 탭으로 전환 완료");
     }
 }