init

app/app_device_routes.py

@@ -170,7 +170,7 @@ def register_device_routes(app, login_required, DEVICE_SERVER_URL):
                     }), 502  # Bad Gateway
 
             except requests.exceptions.Timeout:
-                logger.error(f"장치 서버 연결 타임아웃 ({DEVICE_SERVER_URL})")
+                logger.error(f"장치 서버 연결 타임아웃 ({get_device_url()})")
                 return jsonify({
                     "success": False,
                     "error": "장치 서버 연결 타임아웃. 서버 응답이 너무 느립니다."
@@ -375,4 +375,88 @@ def register_device_routes(app, login_required, DEVICE_SERVER_URL):
             return jsonify({
                 "success": False,
                 "error": f"프로그램 실행 중 오류 발생: {str(e)}"
-            }), 500
+            }), 500
+            
+    
+    @app.route('/api/device/execute-custom', methods=['POST'])
+    @login_required
+    def execute_custom_program():
+        """사용자 정의 프로그램 실행 API"""
+        logger.info("사용자 정의 프로그램 실행 요청")
+        
+        try:
+            # 요청 데이터 확인
+            request_data = request.get_json()
+            if not request_data or 'command' not in request_data:
+                logger.error("명령어가 제공되지 않았습니다.")
+                return jsonify({
+                    "success": False,
+                    "error": "실행할 명령어를 제공해주세요."
+                }), 400  # Bad Request
+            
+            command = request_data['command'].strip()
+            if not command:
+                logger.error("명령어가 비어 있습니다.")
+                return jsonify({
+                    "success": False,
+                    "error": "실행할 명령어를 입력해주세요."
+                }), 400  # Bad Request
+            
+            # 현재 장치 서버 URL 가져오기
+            current_device_url = get_device_url()
+            api_path = "/api/execute-custom"  # LocalPCAgent에 해당 API 엔드포인트가 있어야 함
+            
+            logger.info(f"사용자 정의 프로그램 실행 요청: {current_device_url}{api_path}, 명령어: {command}")
+            response = requests.post(
+                f"{current_device_url}{api_path}",
+                json={"command": command},
+                timeout=10  # 프로그램 실행에는 더 긴 시간 부여
+            )
+            
+            logger.debug(f"사용자 정의 프로그램 실행 응답 상태 코드: {response.status_code}")
+            
+            if response.status_code == 200:
+                try:
+                    data = response.json()
+                    success = data.get("success", False)
+                    message = data.get("message", "")
+                    logger.info(f"사용자 정의 프로그램 실행 응답: {success}, {message}")
+                    return jsonify(data)  # 서버 응답 그대로 반환
+                except requests.exceptions.JSONDecodeError:
+                    logger.error("사용자 정의 프로그램 실행 응답 JSON 파싱 실패")
+                    return jsonify({
+                        "success": False,
+                        "error": "서버로부터 유효하지 않은 JSON 응답"
+                    }), 502
+            else:
+                error_message = f"사용자 정의 프로그램 실행 요청 실패: {response.status_code}"
+                try: 
+                    error_message += f" - {response.json().get('error', response.text)}"
+                except Exception: 
+                    error_message += f" - {response.text}"
+                logger.warning(error_message)
+                return jsonify({
+                    "success": False,
+                    "error": error_message
+                }), 502
+        
+        except requests.exceptions.Timeout:
+            logger.error("사용자 정의 프로그램 실행 요청 시간 초과")
+            return jsonify({
+                "success": False,
+                "error": "프로그램 실행 요청 시간이 초과되었습니다."
+            }), 504
+        
+        except requests.exceptions.ConnectionError:
+            logger.error("장치 관리 서버 연결 실패")
+            return jsonify({
+                "success": False,
+                "error": "장치 관리 서버에 연결할 수 없습니다. 서버가 실행 중인지 확인해주세요."
+            }), 503
+        
+        except Exception as e:
+            logger.error(f"사용자 정의 프로그램 실행 중 오류 발생: {e}", exc_info=True)
+            return jsonify({
+                "success": False,
+                "error": f"프로그램 실행 중 오류 발생: {str(e)}"
+            }), 500

app/static/js/app-device.js

@@ -9,72 +9,88 @@ const DeviceControl = {
     isStatusChecked: false,
     isLoadingPrograms: false,
     programsList: [],
-    
+
     // DOM 요소들
     elements: {
         // 탭 및 섹션
         deviceTab: null,
         deviceSection: null,
-        
+
         // 연결 관련
         deviceServerUrlInput: null,
         connectDeviceServerBtn: null,
         deviceConnectionStatus: null,
-        
+
         // 기본 기능
         deviceBasicFunctions: null,
         checkDeviceStatusBtn: null,
         deviceStatusResult: null,
-        
-        // 프로그램 실행
-        deviceProgramControl: null,
+
+        // 프로그램 실행 (미리 정의된)
+        deviceProgramControl: null, // 이 요소가 정의되어 있는지 확인 필요
         getProgramsBtn: null,
         programsList: null,
         programSelectDropdown: null,
         executeProgramBtn: null,
-        executeResult: null
+        executeResult: null,
+
+        // ================== 추가 시작 1/4 ==================
+        // 사용자 정의 프로그램 실행
+        deviceCustomControl: null,
+        customCommandInput: null,
+        executeCustomBtn: null,
+        customExecuteResult: null
+        // ================== 추가 끝 1/4 ====================
     },
-    
+
     // 모듈 초기화
     init: function() {
         console.log('장치 제어 모듈 초기화 중...');
-        
+
         // DOM 요소 참조 가져오기
         this.initElements();
-        
+
         // 이벤트 리스너 등록
         this.initEventListeners();
-        
+
         console.log('장치 제어 모듈 초기화 완료');
     },
-    
+
     // DOM 요소 참조 초기화
     initElements: function() {
         // 탭 및 섹션
         this.elements.deviceTab = document.getElementById('deviceTab');
         this.elements.deviceSection = document.getElementById('deviceSection');
-        
+
         // 연결 관련
         this.elements.deviceServerUrlInput = document.getElementById('deviceServerUrlInput');
         this.elements.connectDeviceServerBtn = document.getElementById('connectDeviceServerBtn');
         this.elements.deviceConnectionStatus = document.getElementById('deviceConnectionStatus');
-        
+
         // 기본 기능
         this.elements.deviceBasicFunctions = document.getElementById('deviceBasicFunctions');
         this.elements.checkDeviceStatusBtn = document.getElementById('checkDeviceStatusBtn');
         this.elements.deviceStatusResult = document.getElementById('deviceStatusResult');
-        
-        // 프로그램 실행
+
+        // 프로그램 실행 (미리 정의된)
         this.elements.deviceProgramControl = document.getElementById('deviceProgramControl');
         this.elements.getProgramsBtn = document.getElementById('getProgramsBtn');
         this.elements.programsList = document.getElementById('programsList');
         this.elements.programSelectDropdown = document.getElementById('programSelectDropdown');
         this.elements.executeProgramBtn = document.getElementById('executeProgramBtn');
         this.elements.executeResult = document.getElementById('executeResult');
-        
+
+        // ================== 추가 시작 2/4 ==================
+        // 사용자 정의 프로그램 실행
+        this.elements.deviceCustomControl = document.getElementById('deviceCustomControl');
+        this.elements.customCommandInput = document.getElementById('customCommandInput');
+        this.elements.executeCustomBtn = document.getElementById('executeCustomBtn');
+        this.elements.customExecuteResult = document.getElementById('customExecuteResult');
+        // ================== 추가 끝 2/4 ====================
+
         console.log('장치 제어 DOM 요소 참조 초기화 완료');
     },
-    
+
     // 이벤트 리스너 등록
     initEventListeners: function() {
         // 탭 전환
@@ -84,7 +100,7 @@ const DeviceControl = {
                 this.switchToDeviceTab();
             });
         }
-        
+
         // 서버 연결
         if (this.elements.connectDeviceServerBtn) {
             this.elements.connectDeviceServerBtn.addEventListener('click', () => {
@@ -92,7 +108,7 @@ const DeviceControl = {
                 this.connectServer();
             });
         }
-        
+
         // 엔터 키로 연결
         if (this.elements.deviceServerUrlInput) {
             this.elements.deviceServerUrlInput.addEventListener('keydown', (event) => {
@@ -103,7 +119,7 @@ const DeviceControl = {
                 }
             });
         }
-        
+
         // 장치 상태 확인
         if (this.elements.checkDeviceStatusBtn) {
             this.elements.checkDeviceStatusBtn.addEventListener('click', () => {
@@ -111,7 +127,7 @@ const DeviceControl = {
                 this.checkDeviceStatus();
             });
         }
-        
+
         // 프로그램 목록 조회
         if (this.elements.getProgramsBtn) {
             this.elements.getProgramsBtn.addEventListener('click', () => {
@@ -119,7 +135,7 @@ const DeviceControl = {
                 this.loadProgramsList();
             });
         }
-        
+
         // 프로그램 선택 변경
         if (this.elements.programSelectDropdown) {
             this.elements.programSelectDropdown.addEventListener('change', (event) => {
@@ -127,76 +143,102 @@ const DeviceControl = {
                 this.updateExecuteButton();
             });
         }
-        
-        // 프로그램 실행
+
+        // 프로그램 실행 (미리 정의된)
         if (this.elements.executeProgramBtn) {
             this.elements.executeProgramBtn.addEventListener('click', () => {
                 const programId = this.elements.programSelectDropdown.value;
-                console.log(`프로그램 실행 버튼 클릭, 선택된 ID: ${programId}`);
+                console.log(`미리 정의된 프로그램 실행 버튼 클릭, 선택된 ID: ${programId}`);
                 this.executeProgram(programId);
             });
         }
-        
+
+        // ================== 추가 시작 3/4 ==================
+        // 사용자 정의 프로그램 실행 버튼 클릭
+        if (this.elements.executeCustomBtn) {
+            this.elements.executeCustomBtn.addEventListener('click', () => {
+                const command = this.elements.customCommandInput.value;
+                console.log(`사용자 정의 프로그램 실행 버튼 클릭, 명령어: ${command}`);
+                this.executeCustomProgram(command);
+            });
+        }
+
+        // 엔터 키로 사용자 정의 프로그램 실행
+        if (this.elements.customCommandInput) {
+            this.elements.customCommandInput.addEventListener('keydown', (event) => {
+                if (event.key === 'Enter') {
+                    console.log('사용자 정의 명령어 입력 필드에서 엔터 키 감지');
+                    event.preventDefault(); // 폼 제출 방지 등 기본 동작 막기
+                    const command = this.elements.customCommandInput.value;
+                    this.executeCustomProgram(command);
+                }
+            });
+        }
+        // ================== 추가 끝 3/4 ====================
+
         console.log('장치 제어 이벤트 리스너 등록 완료');
     },
-    
+
     // 장치 제어 탭으로 전환
     switchToDeviceTab: function() {
         // 모든 탭과 탭 콘텐츠 비활성화
         const tabs = document.querySelectorAll('.tab');
         const tabContents = document.querySelectorAll('.tab-content');
-        
+
         tabs.forEach(tab => tab.classList.remove('active'));
         tabContents.forEach(content => content.classList.remove('active'));
-        
+
         // 장치 제어 탭 활성화
         this.elements.deviceTab.classList.add('active');
         this.elements.deviceSection.classList.add('active');
-        
+
         console.log('장치 제어 탭으로 전환 완료');
     },
-    
+
     // 서버 연결 함수
     connectServer: async function() {
         // URL 가져오기 (입력된 것이 있으면 백업으로 사용)
         const inputUrl = this.elements.deviceServerUrlInput.value.trim();
-        
+
         // 연결 시도 중 UI 업데이트
         this.elements.connectDeviceServerBtn.disabled = true;
         this.updateConnectionStatus('connecting', '환경변수에 저장된 서버로 연결 시도 중...');
-        
+
         try {
             console.log('환경변수에 저장된 장치 서버로 연결 시도');
-            
+
             // 백엔드 API 호출하여 서버 상태 확인
             const response = await AppUtils.fetchWithTimeout('/api/device/status', {
                 method: 'GET'
             }, 10000); // 10초 타임아웃
-            
+
             const data = await response.json();
-            
+
             if (response.ok && data.success) {
                 // 연결 성공
                 console.log('환경변수 설정 장치 서버 연결 성공:', data);
                 this.isConnected = true;
                 this.updateConnectionStatus('connected', `서버 연결 성공! 상태: ${data.server_status || '정상'}`);
-                
+
                 // 기능 UI 활성화
-                this.elements.deviceBasicFunctions.classList.add('active');
-                this.elements.deviceProgramControl.classList.add('active');
-                
+                if(this.elements.deviceBasicFunctions) this.elements.deviceBasicFunctions.classList.add('active');
+                if(this.elements.deviceProgramControl) this.elements.deviceProgramControl.classList.add('active');
+                // ================== 추가 (connectServer 성공 시 UI 활성화) ==================
+                if(this.elements.deviceCustomControl) this.elements.deviceCustomControl.classList.add('active');
+                // ================== 추가 끝 =============================================
+
                 // 장치 상태 자동 체크
                 this.checkDeviceStatus();
-                
+
                 // 프로그램 목�� 자동 로드
                 this.loadProgramsList();
-                
+
                 // 시스템 알림
                 AppUtils.addSystemNotification(`장치 관리 서버 연결 성공! (환경변수 URL)`);
             } else {
                 // 환경변수 URL 연결 실패, 입력된 URL로 시도
                 console.warn('환경변수 설정 장치 서버 연결 실패, 입력 URL로 재시도합니다:', data);
-                
+
                 // 입력 URL이 있는지 확인
                 if (!inputUrl) {
                     console.error('입력된 URL이 없어 연결 실패');
@@ -204,11 +246,11 @@ const DeviceControl = {
                     this.updateConnectionStatus('error', '환경변수 URL 연결 실패 및 입력된 URL이 없습니다. URL을 입력해주세요.');
                     return;
                 }
-                
+
                 // 입력 URL로 재시도
                 this.updateConnectionStatus('connecting', `입력 URL(${inputUrl})로 연결 시도 중...`);
                 console.log(`입력한 URL로 장치 서버 연결 시도: ${inputUrl}`);
-                
+
                 // 백엔드 API 호출 - 입력 URL 사용
                 const customUrlResponse = await AppUtils.fetchWithTimeout('/api/device/connect', {
                     method: 'POST',
@@ -217,25 +259,29 @@ const DeviceControl = {
                     },
                     body: JSON.stringify({ url: inputUrl })
                 }, 10000);
-                
+
                 const customUrlData = await customUrlResponse.json();
-                
+
                 if (customUrlResponse.ok && customUrlData.success) {
                     // 입력 URL 연결 성공
                     console.log('입력 URL 장치 서버 연결 성공:', customUrlData);
                     this.isConnected = true;
                     this.updateConnectionStatus('connected', `서버 연결 성공! 상태: ${customUrlData.server_status || '정상'}`);
-                    
+
                     // 기능 UI 활성화
-                    this.elements.deviceBasicFunctions.classList.add('active');
-                    this.elements.deviceProgramControl.classList.add('active');
-                    
+                    if(this.elements.deviceBasicFunctions) this.elements.deviceBasicFunctions.classList.add('active');
+                    if(this.elements.deviceProgramControl) this.elements.deviceProgramControl.classList.add('active');
+                    // ================== 추가 (connectServer 성공 시 UI 활성화) ==================
+                    if(this.elements.deviceCustomControl) this.elements.deviceCustomControl.classList.add('active');
+                    // ================== 추가 끝 =============================================
+
+
                     // 장치 상태 자동 체크
                     this.checkDeviceStatus();
-                    
+
                     // 프로그램 목록 자동 로드
                     this.loadProgramsList();
-                    
+
                     // 시스템 알림
                     AppUtils.addSystemNotification(`장치 관리 서버 연결 성공! (${inputUrl})`);
                 } else {
@@ -249,16 +295,16 @@ const DeviceControl = {
             // 예외 발생
             console.error('서버 연결 중 오류 발생:', error);
             this.isConnected = false;
-            
+
             // 환경변수 URL 연결 실패, 입력된 URL로 시도
             if (inputUrl) {
                 console.warn('환경변수 URL 연결 시 오류 발생, 입력 URL로 재시도합니다');
-                
+
                 try {
                     // 입력 URL로 재시도
                     this.updateConnectionStatus('connecting', `입력 URL(${inputUrl})로 연결 시도 중...`);
                     console.log(`입력한 URL로 장치 서버 연결 시도: ${inputUrl}`);
-                    
+
                     // 백엔드 API 호출 - 입력 URL 사용
                     const customUrlResponse = await AppUtils.fetchWithTimeout('/api/device/connect', {
                         method: 'POST',
@@ -267,25 +313,29 @@ const DeviceControl = {
                         },
                         body: JSON.stringify({ url: inputUrl })
                     }, 10000);
-                    
+
                     const customUrlData = await customUrlResponse.json();
-                    
+
                     if (customUrlResponse.ok && customUrlData.success) {
                         // 입력 URL 연결 성공
                         console.log('입력 URL 장치 서버 연결 성공:', customUrlData);
                         this.isConnected = true;
                         this.updateConnectionStatus('connected', `서버 연결 성공! 상태: ${customUrlData.server_status || '정상'}`);
-                        
+
                         // 기능 UI 활성화
-                        this.elements.deviceBasicFunctions.classList.add('active');
-                        this.elements.deviceProgramControl.classList.add('active');
-                        
+                        if(this.elements.deviceBasicFunctions) this.elements.deviceBasicFunctions.classList.add('active');
+                        if(this.elements.deviceProgramControl) this.elements.deviceProgramControl.classList.add('active');
+                        // ================== 추가 (connectServer 성공 시 UI 활성화) ==================
+                        if(this.elements.deviceCustomControl) this.elements.deviceCustomControl.classList.add('active');
+                        // ================== 추가 끝 =============================================
+
+
                         // 장치 상태 자동 체크
                         this.checkDeviceStatus();
-                        
+
                         // 프로그램 목록 자동 로드
                         this.loadProgramsList();
-                        
+
                         // 시스템 알림
                         AppUtils.addSystemNotification(`장치 관리 서버 연결 성공! (${inputUrl})`);
                         return; // 성공하면 여기서 종료
@@ -297,7 +347,7 @@ const DeviceControl = {
                 } catch (inputUrlError) {
                     // 입력 URL로 재시도 중 오류
                     console.error('입력 URL로 재시도 중 오류 발생:', inputUrlError);
-                    
+
                     if (inputUrlError.message.includes('시간이 초과')) {
                         this.updateConnectionStatus('error', '서버 연결 시간 초과. 서버가 실행 중인지 확인해주세요.');
                     } else {
@@ -317,23 +367,24 @@ const DeviceControl = {
             this.elements.connectDeviceServerBtn.disabled = false;
         }
     },
-    
+
     // 연결 상태 업데이트
     updateConnectionStatus: function(status, message) {
         const statusElement = this.elements.deviceConnectionStatus;
-        
+        if (!statusElement) return; // 요소 없으면 종료
+
         // 모든 상태 클래스 제거
         statusElement.classList.remove('connected', 'disconnected', 'error', 'connecting');
-        
+
         // 상태에 따라 클래스 추가
         statusElement.classList.add(status);
-        
+
         // 메시지 업데이트
         statusElement.textContent = message;
-        
+
         console.log(`연결 상태 업데이트: ${status} - ${message}`);
     },
-    
+
     // 장치 상태 확인
     checkDeviceStatus: async function() {
         if (!this.isConnected) {
@@ -341,26 +392,27 @@ const DeviceControl = {
             console.error('장치 상태 확인 시도 중 오류: 서버 연결 안됨');
             return;
         }
-        
+
         // 상태 확인 중 UI 업데이트
         this.elements.checkDeviceStatusBtn.disabled = true;
         this.elements.deviceStatusResult.value = '장치 상태 확인 중...';
-        
+
         try {
             console.log('장치 상태 확인 요청 전송');
-            
+
             // 백엔드 API 호출
             const response = await AppUtils.fetchWithTimeout('/api/device/status', {
                 method: 'GET'
             });
-            
+
             const data = await response.json();
-            
+
             if (response.ok && data.success) {
                 // 상태 확인 성공
                 console.log('장치 상태 확인 성공:', data);
                 this.isStatusChecked = true;
-                this.elements.deviceStatusResult.value = JSON.stringify(data, null, 2);
+                // JSON 데이터를 보기 좋게 포맷팅하여 표시
+                this.elements.deviceStatusResult.value = JSON.stringify(data.data || data, null, 2); // data.data 우선 확인
             } else {
                 // 상태 확인 실패
                 console.error('장치 상태 확인 실패:', data);
@@ -375,7 +427,7 @@ const DeviceControl = {
             this.elements.checkDeviceStatusBtn.disabled = false;
         }
     },
-    
+
     // 프로그램 목록 조회
     loadProgramsList: async function() {
         if (!this.isConnected) {
@@ -383,43 +435,46 @@ const DeviceControl = {
             console.error('프로그램 목록 조회 시도 중 오류: 서버 연결 안됨');
             return;
         }
-        
+
         // 이미 로딩 중이면 중복 요청 방지
         if (this.isLoadingPrograms) {
             console.log('이미 프로그램 목록 로딩 중');
             return;
         }
-        
+
         // 로딩 중 UI 업데이트
         this.isLoadingPrograms = true;
-        this.elements.getProgramsBtn.disabled = true;
-        this.elements.programsList.innerHTML = `
-            <div class="loading-message">
-                ${AppUtils.createLoadingSpinner()} 프로그램 목록 로드 중...
-            </div>
-        `;
-        
+        if(this.elements.getProgramsBtn) this.elements.getProgramsBtn.disabled = true; // 버튼 존재 여부 확인
+        if(this.elements.programsList) { // 목록 요소 존재 여부 확인
+             this.elements.programsList.innerHTML = `
+                 <div class="loading-message">
+                     ${AppUtils.createLoadingSpinner()} 프로그램 목록 로드 중...
+                 </div>
+             `;
+        }
+
+
         try {
             console.log('프로그램 목록 조회 요청 전송');
-            
+
             // 백엔드 API 호출
             const response = await AppUtils.fetchWithTimeout('/api/device/programs', {
                 method: 'GET'
             });
-            
+
             const data = await response.json();
-            
+
             if (response.ok && data.success) {
                 // 목록 조회 성공
                 console.log('프로그램 목록 조회 성공:', data);
                 this.programsList = data.programs || [];
-                
+
                 // 목록 표시
                 this.displayProgramsList();
-                
+
                 // 드롭다운 업데이트
                 this.updateProgramsDropdown();
-                
+
                 // 실행 버튼 상태 업데이트
                 this.updateExecuteButton();
             } else {
@@ -434,14 +489,15 @@ const DeviceControl = {
         } finally {
             // 로딩 상태 및 버튼 상태 복원
             this.isLoadingPrograms = false;
-            this.elements.getProgramsBtn.disabled = false;
+             if(this.elements.getProgramsBtn) this.elements.getProgramsBtn.disabled = false; // 버튼 존재 여부 확인
         }
     },
-    
+
     // 프로그램 목록 표시
     displayProgramsList: function() {
         const programsListElement = this.elements.programsList;
-        
+         if (!programsListElement) return; // 요소 없으면 종료
+
         if (!this.programsList || this.programsList.length === 0) {
             programsListElement.innerHTML = `
                 <div class="no-programs-message">
@@ -450,7 +506,7 @@ const DeviceControl = {
             `;
             return;
         }
-        
+
         // 테이블 형태로 프로그램 목록 표시
         let html = `
             <table class="program-list">
@@ -463,7 +519,7 @@ const DeviceControl = {
                 </thead>
                 <tbody>
         `;
-        
+
         // 프로그램 항목 생성
         this.programsList.forEach(program => {
             html += `
@@ -474,7 +530,7 @@ const DeviceControl = {
                 </tr>
             `;
         });
-        
+
         html += `
                 </tbody>
             </table>
@@ -482,17 +538,18 @@ const DeviceControl = {
                 총 ${this.programsList.length}개 프로그램
             </div>
         `;
-        
+
         programsListElement.innerHTML = html;
     },
-    
+
     // 프로그램 드롭다운 업데이트
     updateProgramsDropdown: function() {
         const dropdown = this.elements.programSelectDropdown;
-        
+         if (!dropdown) return; // 요소 없으면 종료
+
         // 기존 옵션 제거
         dropdown.innerHTML = '';
-        
+
         // 기본 옵션 추가
         const defaultOption = document.createElement('option');
         defaultOption.value = '';
@@ -500,52 +557,53 @@ const DeviceControl = {
             ? '-- 실행할 프로그램 선택 --'
             : '-- 프로그램 없음 --';
         dropdown.appendChild(defaultOption);
-        
+
         // 프로그램 옵션 추가
         this.programsList.forEach(program => {
             const option = document.createElement('option');
             option.value = program.id || '';
             option.textContent = program.name || '알 수 없음';
-            
+
             // 설명이 있으면 괄호로 추가
             if (program.description) {
                 option.textContent += ` (${program.description})`;
             }
-            
+
             dropdown.appendChild(option);
         });
     },
-    
+
     // 실행 버튼 상태 업데이트
     updateExecuteButton: function() {
         const dropdown = this.elements.programSelectDropdown;
         const executeBtn = this.elements.executeProgramBtn;
-        
+        if (!dropdown || !executeBtn) return; // 요소 없으면 종료
+
         // 선택된 프로그램이 있을 때만 버튼 활성화
         executeBtn.disabled = !dropdown.value;
     },
-    
-    // 프로그램 실행
+
+    // 프로그램 실행 (미리 정의된)
     executeProgram: async function(programId) {
         if (!this.isConnected) {
             this.showExecuteResult('error', '오류: 먼저 서버에 연결해야 합니다.');
             console.error('프로그램 실행 시도 중 오류: 서버 연결 안됨');
             return;
         }
-        
+
         if (!programId) {
             this.showExecuteResult('error', '오류: 실행할 프로그램을 선택해주세요.');
             console.error('프로그램 실행 시도 중 오류: 프로그램 ID 없음');
             return;
         }
-        
+
         // 실행 중 UI 업데이트
-        this.elements.executeProgramBtn.disabled = true;
+        if(this.elements.executeProgramBtn) this.elements.executeProgramBtn.disabled = true;
         this.showExecuteResult('loading', '프로그램 실행 중...');
-        
+
         try {
             console.log(`프로그램 실행 요청 전송: ${programId}`);
-            
+
             // 백엔드 API 호출
             const response = await AppUtils.fetchWithTimeout(`/api/device/programs/${programId}/execute`, {
                 method: 'POST',
@@ -554,14 +612,14 @@ const DeviceControl = {
                 },
                 body: JSON.stringify({})
             }, 15000); // 15초 타임아웃 (실행에 시간이 더 걸릴 수 있음)
-            
+
             const data = await response.json();
-            
+
             if (response.ok && data.success) {
                 // 실행 성공
                 console.log('프로그램 실행 성공:', data);
                 this.showExecuteResult('success', `실행 성공: ${data.message || '프로그램이 성공적으로 실행되었습니다.'}`);
-                
+
                 // 시스템 알림
                 AppUtils.addSystemNotification(`프로그램 실행 성공: ${this.getSelectedProgramName()}`);
             } else {
@@ -572,7 +630,7 @@ const DeviceControl = {
         } catch (error) {
             // 예외 발생
             console.error('프로그램 실행 중 오류 발생:', error);
-            
+
             if (error.message.includes('시간이 초과')) {
                 this.showExecuteResult('error', '프로그램 실행 요청 시간 초과. 서버 응답이 없습니다.');
             } else {
@@ -580,20 +638,24 @@ const DeviceControl = {
             }
         } finally {
             // 버튼 다시 활성화
-            this.elements.executeProgramBtn.disabled = false;
+            if(this.elements.executeProgramBtn) this.elements.executeProgramBtn.disabled = false;
         }
     },
-    
+
     // 선택된 프로그램 이름 가져오기
     getSelectedProgramName: function() {
         const dropdown = this.elements.programSelectDropdown;
+        if (!dropdown) return '알 수 없는 프로그램';
         const selectedOption = dropdown.options[dropdown.selectedIndex];
         return selectedOption ? selectedOption.textContent : '알 수 없는 프로그램';
     },
-    
+
     // 프로그램 목록 오류 표시
     showProgramsError: function(errorMessage) {
-        this.elements.programsList.innerHTML = `
+        const programsListElement = this.elements.programsList;
+         if (!programsListElement) return; // 요소 없으면 종료
+
+        programsListElement.innerHTML = `
             <div class="error-message">
                 <i class="fas fa-exclamation-circle"></i> ${errorMessage}
                 <button class="retry-button" id="retryLoadProgramsBtn">
@@ -601,24 +663,31 @@ const DeviceControl = {
                 </button>
             </div>
         `;
-        
+
         // 재시도 버튼 이벤트 리스너
-        document.getElementById('retryLoadProgramsBtn').addEventListener('click', () => {
-            console.log('프로그램 목록 재시도 버튼 클릭');
-            this.loadProgramsList();
-        });
+        // 이전에 추가된 리스너가 있다면 제거하고 다시 추가하는 것이 안전할 수 있음
+        const retryBtn = document.getElementById('retryLoadProgramsBtn');
+        if (retryBtn) {
+             retryBtn.replaceWith(retryBtn.cloneNode(true)); // 리스너 제거 트릭
+             document.getElementById('retryLoadProgramsBtn').addEventListener('click', () => {
+                console.log('프로그램 목록 재시도 버튼 클릭');
+                this.loadProgramsList();
+            });
+        }
+
     },
-    
-    // 실행 결과 표시
+
+    // 실행 결과 표시 (미리 정의된 프로그램 용)
     showExecuteResult: function(status, message) {
         const resultElement = this.elements.executeResult;
-        
+        if (!resultElement) return; // 요소 없으면 종료
+
         // 모든 상태 클래스 제거
         resultElement.classList.remove('success', 'error', 'warning');
-        
+
         // 내용 초기화
         resultElement.innerHTML = '';
-        
+
         // 상태에 따라 처리
         switch (status) {
             case 'success':
@@ -639,15 +708,136 @@ const DeviceControl = {
             default:
                 resultElement.textContent = message;
         }
+    },
+
+    // ================== 추가 시작 4/4 ==================
+    // 사용자 정의 프로그램 실행
+    executeCustomProgram: async function(command) {
+        if (!this.isConnected) {
+            this.showCustomExecuteResult('error', '오류: 먼저 서버에 연결해야 합니다.');
+            console.error('사용자 정의 프로그램 실행 시도 중 오류: 서버 연결 안됨');
+            return;
+        }
+
+        if (!command || command.trim() === '') {
+            this.showCustomExecuteResult('error', '오류: 실행할 명령어를 입력해주세요.');
+            console.error('사용자 정의 프로그램 실행 시도 중 오류: 명령어 없음');
+            return;
+        }
+
+        // 실행 중 UI 업데이트
+        if(this.elements.executeCustomBtn) this.elements.executeCustomBtn.disabled = true;
+        this.showCustomExecuteResult('loading', '명령어 실행 중...');
+
+        try {
+            console.log(`사용자 정의 프로그램 실행 요청 전송: ${command}`);
+
+            // 백엔드 API 호출
+            const response = await AppUtils.fetchWithTimeout('/api/device/execute-custom', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ command: command })
+            }, 15000); // 15초 타임아웃
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                // 실행 성공
+                console.log('사용자 정의 프로그램 실행 성공:', data);
+
+                // 결과 표시
+                let successMessage = `명령어 실행 성공: ${data.message || ''}`;
+
+                // 출력 내용이 있으면 추가 (HTML 안전 처리 포함)
+                if (data.output && data.output.trim()) {
+                    successMessage += `<div class="command-output"><pre>${AppUtils.escapeHtml(data.output)}</pre></div>`;
+                }
+
+                this.showCustomExecuteResult('success', successMessage);
+
+                // 시스템 알림
+                AppUtils.addSystemNotification(`사용자 정의 명령어 실행 성공: ${command}`);
+            } else {
+                // 실행 실패
+                console.error('사용자 정의 프로그램 실행 실패:', data);
+
+                let errorMessage = `실행 실패: ${data.error || '알 수 없는 오류'}`;
+
+                // 오류 출력이 있으면 추가 (HTML 안전 처리 포함)
+                if (data.error_output && data.error_output.trim()) {
+                    errorMessage += `<div class="command-error"><pre>${AppUtils.escapeHtml(data.error_output)}</pre></div>`;
+                }
+
+                this.showCustomExecuteResult('error', errorMessage);
+            }
+        } catch (error) {
+            // 예외 발생
+            console.error('사용자 정의 프로그램 실행 중 오류 발생:', error);
+
+            if (error.message.includes('시간이 초과')) {
+                this.showCustomExecuteResult('error', '명령어 실행 요청 시간 초과. 서버 응답이 없습니다.');
+            } else {
+                this.showCustomExecuteResult('error', `명령어 실행 중 오류 발생: ${error.message}`);
+            }
+        } finally {
+            // 버튼 다시 활성화
+             if(this.elements.executeCustomBtn) this.elements.executeCustomBtn.disabled = false;
+        }
+    },
+
+    // 사용자 정의 프로그램 실행 결과 표시
+    showCustomExecuteResult: function(status, message) {
+        const resultElement = this.elements.customExecuteResult;
+        if (!resultElement) return; // 요소 없으면 종료
+
+        // 모든 상태 클래스 제거
+        resultElement.classList.remove('success', 'error', 'warning');
+
+        // 내용 초기화
+        resultElement.innerHTML = '';
+
+        // 상태에 따라 처리
+        switch (status) {
+            case 'success':
+                resultElement.classList.add('success');
+                // HTML 메시지 삽입 시 주의 (innerHTML 사용)
+                resultElement.innerHTML = `<i class="fas fa-check-circle"></i> ${message}`;
+                break;
+            case 'error':
+                resultElement.classList.add('error');
+                resultElement.innerHTML = `<i class="fas fa-exclamation-circle"></i> ${message}`;
+                break;
+            case 'warning':
+                resultElement.classList.add('warning');
+                resultElement.innerHTML = `<i class="fas fa-exclamation-triangle"></i> ${message}`;
+                break;
+            case 'loading':
+                // 로딩 스피너 함수가 AppUtils에 있다고 가정
+                resultElement.innerHTML = `${AppUtils.createLoadingSpinner()} ${message}`;
+                break;
+            default:
+                resultElement.textContent = message; // 기본은 텍스트만 표시
+        }
     }
+    // ================== 추가 끝 4/4 ====================
 };
 
 // 페이지 로드 완료 시 모듈 초기화
 document.addEventListener('DOMContentLoaded', function() {
     console.log('장치 제어 모듈 로드됨');
-    
+
     // DOM이 완전히 로드된 후 약간의 지연을 두고 초기화
+    // DOM 요소가 확실히 로드된 후에 초기화하기 위함
     setTimeout(() => {
+        // AppUtils가 정의되었는지 확인 (의존성)
+        if (typeof AppUtils === 'undefined') {
+             console.error('AppUtils가 정의되지 않아 DeviceControl 초기화 실패.');
+             // 필요하다면 사용자에게 알림 표시
+             alert('페이지 초기화 오류: 필수 유틸리티(AppUtils)를 로드할 수 없습니다.');
+             return;
+        }
         DeviceControl.init();
     }, 100);
-});
+});

app/templates/index.html

@@ -121,6 +121,7 @@
                     </div>
                 </div>
             </section>
+            
             <!-- 장치 제어 탭 -->
             <section id="deviceSection" class="tab-content">
                 <div class="device-connection">
@@ -156,6 +157,16 @@
                     <button id="executeProgramBtn" class="execute-btn" disabled>선택한 프로그램 실행</button>
                     <div id="executeResult" class="execute-result"></div>
                 </div>
+                
+                <!-- 사용자 정의 프로그램 실행 섹션 추가 -->
+                <div id="deviceCustomControl" class="program-control">
+                    <h3>4. 사용자 정의 프로그램 실행</h3>
+                    <div class="custom-command-container">
+                        <input type="text" id="customCommandInput" placeholder="실행할 명령어 또는 프로그램 경로 입력">
+                        <button id="executeCustomBtn">실행</button>
+                    </div>
+                    <div id="customExecuteResult" class="execute-result"></div>
+                </div>
             </section>
         </main>