init

.gitignore

@@ -19,6 +19,7 @@ var/
 *.egg-info/
 .installed.cfg
 *.egg
+LocalPCAgent/
 
 # Virtual Environment
 venv/

app/app_device_routes.py

@@ -562,5 +562,115 @@ def register_device_routes(app, login_required, DEVICE_SERVER_URL):
                  logger.debug("임시 ID가 생성되지 않아 삭제 건너<0xEB>뜀.")
             elif not get_device_url():
                  logger.warning("장치 서버 URL이 없어 임시 프로그램 삭제 건너<0xEB>뜀.")
+    @app.route('/api/device/scan-ports', methods=['GET'])
+    @login_required
+    def scan_device_ports():
+        """로컬PC에 연결된 장치(COM 포트 및 USB 장치) 목록 조회 API"""
+        logger.info("장치 포트 스캔 요청")
+
+        try:
+            # 프로그램 ID (장치 스캔 스크립트 ID - scan_ports)
+            program_id = "scan_ports"
+            
+            # 현재 장치 서버 URL 가져오기
+            current_device_url = get_device_url()
+            if not current_device_url:
+                logger.error("장치 서버 URL이 설정되지 않았습니다.")
+                return jsonify({
+                    "success": False,
+                    "error": "장치 서버 URL이 설정되지 않아 연결할 수 없습니다."
+                }), 503  # Service Unavailable
+
+            # 장치 스캔 프로그램 실행 (프로그램 ID: scan_ports)
+            api_path = f"/api/programs/{program_id}/execute"
+            logger.info(f"장치 포트 스캔 프로그램 실행 요청: {current_device_url}{api_path}")
+            
+            # 요청 전송: 장치 스캔 스크립트 실행
+            response = requests.post(
+                f"{current_device_url}{api_path}",
+                json={},  # 필요한 파라미터가 있으면 여기에 추가
+                timeout=20  # 장치 스캔은 시간이 오래 걸릴 수 있으므로 타임아웃 증가
+            )
+            logger.debug(f"장치 포트 스캔 응답 상태 코드: {response.status_code}")
+
+            if response.status_code == 200:
+                try:
+                    data = response.json()
+                    # LocalPCAgent 응답에서 필요한 정보 추출
+                    if data.get("success", False):
+                        # 스캔 결과 출력 가져오기
+                        output = data.get("output", "")
+                        
+                        try:
+                            # 출력이 JSON 형식인지 확인 및 파싱
+                            scan_results = json.loads(output)
+                            logger.info("장치 포트 스캔 결과 파싱 성공")
+                            
+                            # 결과 반환
+                            return jsonify({
+                                "success": True,
+                                "timestamp": scan_results.get("timestamp", ""),
+                                "system_info": scan_results.get("system_info", {}),
+                                "devices": scan_results.get("devices", {})
+                            })
+                        except json.JSONDecodeError as json_err:
+                            logger.error(f"장치 포트 스캔 결과 JSON 파싱 실패: {json_err}")
+                            return jsonify({
+                                "success": False,
+                                "error": "장치 포트 스캔 결과를 JSON으로 파싱할 수 없습니다.",
+                                "raw_output": output[:1000]  # 긴 출력은 잘라서 반환
+                            }), 500
+                    else:
+                        # 프로그램 실행은 성공했지만 스캔 자체가 실패한 경우
+                        error_message = data.get("error", "알 수 없는 오류")
+                        logger.error(f"장치 포트 스캔 프로그램 오류: {error_message}")
+                        return jsonify({
+                            "success": False, 
+                            "error": f"장치 포트 스캔 프로그램 오류: {error_message}"
+                        }), 500
+                except Exception as parse_err:
+                    logger.error(f"장치 포트 스캔 응답 처리 중 오류: {parse_err}")
+                    return jsonify({
+                        "success": False,
+                        "error": f"장치 포트 스캔 응답 처리 중 오류: {str(parse_err)}"
+                    }), 500
+            else:
+                # API 요청 자체가 실패한 경우
+                error_message = f"장치 포트 스캔 API 요청 실패 (상태 코드: {response.status_code})"
+                try:
+                    error_data = response.json()
+                    if 'error' in error_data:
+                        error_message += f": {error_data['error']}"
+                except:
+                    if response.text:
+                        error_message += f": {response.text[:200]}"
+                
+                logger.error(error_message)
+                return jsonify({
+                    "success": False,
+                    "error": error_message
+                }), response.status_code
 
+        except requests.exceptions.Timeout:
+            error_message = "장치 포트 스캔 요청 시간 초과"
+            logger.error(error_message)
+            return jsonify({
+                "success": False,
+                "error": error_message
+            }), 504  # Gateway Timeout
+        
+        except requests.exceptions.ConnectionError:
+            error_message = f"장치 서버 연결 실패 ({get_device_url()})"
+            logger.error(error_message)
+            return jsonify({
+                "success": False,
+                "error": "장치 서버에 연결할 수 없습니다. 서버가 실행 중인지 확인해주세요."
+            }), 502  # Bad Gateway
+        
+        except Exception as e:
+            logger.error(f"장치 포트 스캔 요청 처리 중 예외 발생: {e}", exc_info=True)
+            return jsonify({
+                "success": False,
+                "error": f"장치 포트 스캔 처리 중 오류: {str(e)}"
+            }), 500  # Internal Server Error
     # register_device_routes 함수의 끝

app/static/css/device-style.css

@@ -84,7 +84,9 @@
 }
 
 /* 장치 기능 컨테이너 */
-.device-functions {
+/* 서버 연결 후 활성화되는 섹션들의 기본 스타일 */
+.device-functions,
+.program-control {
     background-color: var(--bg-color-secondary);
     border-radius: 8px;
     padding: 15px;
@@ -92,11 +94,13 @@
     display: none; /* 초기에는 숨김 */
 }
 
-.device-functions.active {
-    display: block;
+.device-functions.active,
+.program-control.active {
+    display: block; /* 활성화 시 보임 */
 }
 
-.device-functions h3 {
+.device-functions h3,
+.program-control h3 {
     margin-top: 0;
     margin-bottom: 15px;
     color: var(--text-color-primary);
@@ -146,27 +150,14 @@
 }
 
 /* 프로그램 실행 컨테이너 */
-.program-control {
-    background-color: var(--bg-color-secondary);
-    border-radius: 8px;
-    padding: 15px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    display: none; /* 초기에는 숨김 */
-}
-
-.program-control.active {
-    display: block;
-}
-
-.program-control h3 {
-    margin-top: 0;
-    margin-bottom: 15px;
-    color: var(--text-color-primary);
-    font-size: 1.2rem;
-}
-
 .program-list-container {
     margin-bottom: 20px;
+    /* 스크롤이 필요할 경우를 대비 */
+    max-height: 300px;
+    overflow-y: auto;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 10px;
 }
 
 .program-list {
@@ -179,6 +170,7 @@
     padding: 10px;
     text-align: left;
     border-bottom: 1px solid var(--border-color);
+    font-size: 0.9rem;
 }
 
 .program-list th {
@@ -230,6 +222,7 @@
     border-radius: 4px;
     margin-top: 10px;
     font-size: 0.9rem;
+    min-height: 20px; /* 결과 없을 때도 최소 높이 유지 */
 }
 
 .execute-result.success {
@@ -250,6 +243,62 @@
     border: 1px solid rgba(255, 193, 7, 0.2);
 }
 
+/* 사용자 정의 프로그램 실행 */
+.custom-command-container {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 15px;
+}
+
+.custom-command-container input {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    font-size: 0.95rem;
+}
+
+.custom-command-container button {
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 10px 15px;
+    cursor: pointer;
+    font-weight: 500;
+    transition: background-color 0.2s;
+}
+
+.custom-command-container button:hover {
+    background-color: var(--primary-color-dark);
+}
+
+.custom-command-container button:disabled {
+    background-color: var(--disabled-color);
+    cursor: not-allowed;
+}
+
+/* 명령어 실행 결과 스타일 */
+.command-output, .command-error {
+    margin-top: 10px;
+    padding: 10px;
+    background-color: var(--bg-color-tertiary);
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+}
+
+.command-output pre, .command-error pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    font-size: 0.85rem;
+    margin: 0;
+}
+
+.command-error pre {
+    color: #dc3545; /* 오류 텍스트 색상 */
+}
+
+
 /* 로딩 표시 */
 .loading-spinner {
     display: inline-block;
@@ -307,10 +356,121 @@
     padding: 8px 12px;
     cursor: pointer;
     font-size: 0.9rem;
-    margin-top: 10px;
+    margin-top: 10px; /* 필요시 조정 */
+    margin-left: 10px; /* 앞 요소와 간격 */
     transition: background-color 0.2s;
 }
 
 .retry-button:hover {
     background-color: var(--secondary-color-dark);
 }
+
+/* ================== 장치 포트 조회 스타일 추가 ================== */
+.ports-status {
+    margin: 10px 0;
+    padding: 10px;
+    border-radius: 5px;
+    min-height: 20px;
+    font-size: 0.9rem; /* 다른 상태 메시지와 일관성 */
+}
+
+.ports-status.success {
+    background-color: rgba(0, 200, 83, 0.1); /* 기존 .success 스타일과 유사하게 */
+    color: #00c853; /* 좀 더 밝은 녹색 */
+    border: 1px solid #00c853;
+}
+
+.ports-status.error {
+    background-color: rgba(244, 67, 54, 0.1); /* 기존 .error 스타일과 유사하게 */
+    color: #f44336; /* 좀 더 밝은 빨강 */
+    border: 1px solid #f44336;
+}
+
+.ports-status.warning {
+    background-color: rgba(255, 152, 0, 0.1); /* 기존 .warning 스타일과 유사하게 */
+    color: #ff9800; /* 좀 더 밝은 주황 */
+    border: 1px solid #ff9800;
+}
+
+.ports-results {
+    margin-top: 15px;
+    border: 1px solid var(--border-color); /* 변수 사용 */
+    border-radius: 5px;
+    padding: 0; /* 내부 섹션 패딩으로 조정 */
+    max-height: 500px; /* 최대 높이 제한 */
+    overflow-y: auto; /* 내용 많으면 스크롤 */
+    background-color: var(--bg-color-tertiary); /* 약간의 배경색 */
+}
+
+/* 포트 결과 컨테이너 (내부 패딩용) */
+.ports-results-container {
+    padding: 15px;
+}
+
+.ports-section {
+    margin-bottom: 20px;
+}
+/* 마지막 섹션의 하단 마진 제거 */
+.ports-section:last-child {
+    margin-bottom: 0;
+}
+
+
+.ports-section h4 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    font-size: 1rem; /* 다른 h3 와 유사하게 */
+    color: var(--text-color-primary); /* 변수 사용 */
+    border-bottom: 1px solid var(--border-color); /* 변수 사용 */
+    padding-bottom: 5px;
+}
+
+.info-row {
+    display: flex;
+    margin-bottom: 5px;
+    font-size: 0.9rem; /* 글자 크기 통일 */
+}
+
+.info-label {
+    font-weight: bold;
+    width: 100px;
+    flex-shrink: 0; /* 라벨 너비 고정 */
+    color: var(--text-color-secondary); /* 약간 연한 색 */
+}
+
+.info-value {
+    color: var(--text-color-primary);
+}
+
+.ports-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 10px;
+    font-size: 0.85rem; /* 테이블 글자 약간 작게 */
+}
+
+.ports-table th,
+.ports-table td {
+    padding: 8px 10px; /* 패딩 조정 */
+    text-align: left;
+    border-bottom: 1px solid var(--border-color-lighter, #eee); /* 더 연한 구분선, 변수 없으면 기본값 */
+    vertical-align: top; /* 여러 줄일 경우 위 정렬 */
+}
+
+.ports-table th {
+    background-color: var(--bg-color-secondary); /* 약간 다른 배경 */
+    font-weight: 500; /* 보통 두께 */
+    color: var(--text-color-primary);
+}
+
+.ports-table tbody tr:hover {
+    background-color: var(--bg-color-hover, #f9f9f9); /* 변수 없으면 기본값 */
+}
+
+.no-ports-message {
+    color: var(--text-color-secondary); /* 변수 사용 */
+    font-style: italic;
+    padding: 10px 0;
+    font-size: 0.9rem;
+}
+/* ================== 추가 끝 ================================= */

app/static/js/app-device.js

@@ -1,5 +1,5 @@
 /**
- * RAG 검색 챗봇 장치 제어 JavaScript
+ * RAG 검색 챗봇 장치 제어 JavaScript (포트 스캔 기능 추가됨)
  */
 
 // 장치 제어 모듈
@@ -27,32 +27,32 @@ const DeviceControl = {
         deviceStatusResult: null,
 
         // 프로그램 실행 (미리 정의된)
-        deviceProgramControl: null, // 이 요소가 정의되어 있는지 확인 필요
+        deviceProgramControl: null,
         getProgramsBtn: null,
         programsList: null,
         programSelectDropdown: null,
         executeProgramBtn: null,
         executeResult: null,
 
-        // ================== 추가 시작 1/4 ==================
         // 사용자 정의 프로그램 실행
         deviceCustomControl: null,
         customCommandInput: null,
         executeCustomBtn: null,
-        customExecuteResult: null
-        // ================== 추가 끝 1/4 ====================
+        customExecuteResult: null,
+
+        // ================== 포트 스캔 요소 추가 ==================
+        devicePortScanControl: null, // 포트 스캔 섹션 컨테이너
+        scanPortsBtn: null,          // 포트 스캔 버튼
+        portsStatus: null,           // 포트 스캔 상태 표시 영역
+        portsResults: null           // 포트 스캔 결과 표시 영역
+        // ================== 추가 끝 ============================
     },
 
     // 모듈 초기화
     init: function() {
         console.log('장치 제어 모듈 초기화 중...');
-
-        // DOM 요소 참조 가져오기
         this.initElements();
-
-        // 이벤트 리스너 등록
         this.initEventListeners();
-
         console.log('장치 제어 모듈 초기화 완료');
     },
 
@@ -80,13 +80,18 @@ const DeviceControl = {
         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 ====================
+
+        // ================== 포트 스캔 요소 초기화 추가 ==================
+        this.elements.devicePortScanControl = document.getElementById('devicePortScanControl');
+        this.elements.scanPortsBtn = document.getElementById('scanPortsBtn');
+        this.elements.portsStatus = document.getElementById('portsStatus');
+        this.elements.portsResults = document.getElementById('portsResults');
+        // ================== 추가 끝 =================================
 
         console.log('장치 제어 DOM 요소 참조 초기화 완료');
     },
@@ -153,7 +158,6 @@ const DeviceControl = {
             });
         }
 
-        // ================== 추가 시작 3/4 ==================
         // 사용자 정의 프로그램 실행 버튼 클릭
         if (this.elements.executeCustomBtn) {
             this.elements.executeCustomBtn.addEventListener('click', () => {
@@ -174,7 +178,15 @@ const DeviceControl = {
                 }
             });
         }
-        // ================== 추가 끝 3/4 ====================
+
+        // ================== 포트 스캔 이벤트 리스너 추가 ==================
+        if (this.elements.scanPortsBtn) {
+             this.elements.scanPortsBtn.addEventListener('click', () => {
+                 console.log('장치 포트 스캔 버튼 클릭');
+                 this.scanDevicePorts();
+             });
+        }
+        // ================== 추가 끝 ==================================
 
         console.log('장치 제어 이벤트 리스너 등록 완료');
     },
@@ -189,8 +201,8 @@ const DeviceControl = {
         tabContents.forEach(content => content.classList.remove('active'));
 
         // 장치 제어 탭 활성화
-        this.elements.deviceTab.classList.add('active');
-        this.elements.deviceSection.classList.add('active');
+        if(this.elements.deviceTab) this.elements.deviceTab.classList.add('active');
+        if(this.elements.deviceSection) this.elements.deviceSection.classList.add('active');
 
         console.log('장치 제어 탭으로 전환 완료');
     },
@@ -201,7 +213,7 @@ const DeviceControl = {
         const inputUrl = this.elements.deviceServerUrlInput.value.trim();
 
         // 연결 시도 중 UI 업데이트
-        this.elements.connectDeviceServerBtn.disabled = true;
+        if(this.elements.connectDeviceServerBtn) this.elements.connectDeviceServerBtn.disabled = true;
         this.updateConnectionStatus('connecting', '환경변수에 저장된 서버로 연결 시도 중...');
 
         try {
@@ -215,147 +227,49 @@ const DeviceControl = {
             const data = await response.json();
 
             if (response.ok && data.success) {
-                // 연결 성공
+                // 환경변수 URL 연결 성공
                 console.log('환경변수 설정 장치 서버 연결 성공:', data);
                 this.isConnected = true;
-                this.updateConnectionStatus('connected', `서버 연결 성공! 상태: ${data.server_status || '정상'}`);
+                // 서버 응답에서 상태 메시지를 사용하거나 기본값 사용
+                const serverStatusMsg = data?.data?.status || data?.server_status || '정상';
+                this.updateConnectionStatus('connected', `서버 연결 성공! 상태: ${serverStatusMsg}`);
 
                 // 기능 UI 활성화
                 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');
-                // ================== 추가 끝 =============================================
+                // ================== 포트 스캔 UI 활성화 추가 ==================
+                if(this.elements.devicePortScanControl) this.elements.devicePortScanControl.classList.add('active');
+                // ================== 추가 끝 ==================================
 
                 // 장치 상태 자동 체크
                 this.checkDeviceStatus();
-
                 // 프로그램 목록 자동 로드
                 this.loadProgramsList();
-
                 // 시스템 알림
                 AppUtils.addSystemNotification(`장치 관리 서버 연결 성공! (환경변수 URL)`);
+
             } else {
                 // 환경변수 URL 연결 실패, 입력된 URL로 시도
                 console.warn('환경변수 설정 장치 서버 연결 실패, 입력 URL로 재시도합니다:', data);
-
-                // 입력 URL이 있는지 확인
                 if (!inputUrl) {
                     console.error('입력된 URL이 없어 연결 실패');
                     this.isConnected = false;
                     this.updateConnectionStatus('error', '환경변수 URL 연결 실패 및 입력된 URL이 없습니다. URL을 입력해주세요.');
-                    return;
+                    return; // 입력 URL 없으면 여기서 종료
                 }
-
                 // 입력 URL로 재시도
-                this.updateConnectionStatus('connecting', `입력 URL(${inputUrl})로 연결 시도 중...`);
-                console.log(`입력한 URL로 장치 서버 연결 시도: ${inputUrl}`);
-
-                // 백엔드 API 호출 - 입력 URL 사용
-                const customUrlResponse = await AppUtils.fetchWithTimeout('/api/device/connect', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    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 활성화
-                    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 {
-                    // 입력 URL 연결 실패
-                    console.error('입력 URL 장치 서버 연결 실패:', customUrlData);
-                    this.isConnected = false;
-                    this.updateConnectionStatus('error', `서버 연결 실패: ${customUrlData.error || '서버 응답 오류'}`);
-                }
+                await this.connectWithCustomUrl(inputUrl);
             }
         } catch (error) {
-            // 예외 발생
-            console.error('서버 연결 중 오류 발생:', error);
+            // 환경변수 URL 연결 시도 중 예외 발생
+            console.error('환경변수 URL 서버 연결 중 오류 발생:', 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',
-                        headers: {
-                            'Content-Type': 'application/json'
-                        },
-                        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 활성화
-                        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; // 성공하면 여기서 종료
-                    } else {
-                        // 입력 URL 연결 실패
-                        console.error('입력 URL 장치 서버 연결 실패:', customUrlData);
-                        this.updateConnectionStatus('error', `서버 연결 실패: ${customUrlData.error || '서버 응답 오류'}`);
-                    }
-                } catch (inputUrlError) {
-                    // 입력 URL로 재시도 중 오류
-                    console.error('입력 URL로 재시도 중 오류 발생:', inputUrlError);
-
-                    if (inputUrlError.message.includes('시간이 초과')) {
-                        this.updateConnectionStatus('error', '서버 연결 시간 초과. 서버가 실행 중인지 확인해주세요.');
-                    } else {
-                        this.updateConnectionStatus('error', `서버 연결 오류: ${inputUrlError.message}`);
-                    }
-                }
+                 await this.connectWithCustomUrl(inputUrl); // 입력 URL 재시도
             } else {
-                // 텍스트박스에 URL이 없는 경우
+                // 입력 URL도 없는 경우 최종 오류 처리
                 if (error.message.includes('시간이 초과')) {
                     this.updateConnectionStatus('error', '환경변수 URL 연결 시간 초과. URL을 입력하여 다시 시도해주세요.');
                 } else {
@@ -364,10 +278,63 @@ const DeviceControl = {
             }
         } finally {
             // 버튼 다시 활성화
-            this.elements.connectDeviceServerBtn.disabled = false;
+             if(this.elements.connectDeviceServerBtn) this.elements.connectDeviceServerBtn.disabled = false;
         }
     },
 
+    // 사용자 입력 URL로 연결 시도 (connectServer 내부 로직 분리)
+    connectWithCustomUrl: async function(url) {
+         this.updateConnectionStatus('connecting', `입력 URL(${url})로 연결 시도 중...`);
+         console.log(`입력한 URL로 장치 서버 연결 시도: ${url}`);
+
+         try {
+             // 백엔드 API 호출 - Flask 백엔드가 URL 받아서 처리
+             const customUrlResponse = await AppUtils.fetchWithTimeout('/api/device/connect', {
+                 method: 'POST',
+                 headers: { 'Content-Type': 'application/json' },
+                 body: JSON.stringify({ url: url })
+             }, 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 활성화
+                 if(this.elements.deviceBasicFunctions) this.elements.deviceBasicFunctions.classList.add('active');
+                 if(this.elements.deviceProgramControl) this.elements.deviceProgramControl.classList.add('active');
+                 if(this.elements.deviceCustomControl) this.elements.deviceCustomControl.classList.add('active');
+                 // ================== 포트 스캔 UI 활성화 추가 ==================
+                 if(this.elements.devicePortScanControl) this.elements.devicePortScanControl.classList.add('active');
+                 // ================== 추가 끝 ==================================
+
+                 // 장치 상태 자동 체크
+                 this.checkDeviceStatus();
+                 // 프로그램 목록 자동 로드
+                 this.loadProgramsList();
+                 // 시스템 알림
+                 AppUtils.addSystemNotification(`장치 관리 서버 연결 성공! (${url})`);
+             } else {
+                 // 입력 URL 연결 실패
+                 console.error('입력 URL 장치 서버 연결 실패:', customUrlData);
+                 this.isConnected = false;
+                 this.updateConnectionStatus('error', `서버 연결 실패: ${customUrlData.error || '서버 응답 오류'}`);
+             }
+         } catch(error) {
+             // 입력 URL로 시도 중 오류
+             console.error('입력 URL로 재시도 중 오류 발생:', error);
+             this.isConnected = false;
+             if (error.message.includes('시간이 초과')) {
+                 this.updateConnectionStatus('error', '서버 연결 시간 초과. 서버가 실행 중인지 확인해주세요.');
+             } else {
+                 this.updateConnectionStatus('error', `서버 연결 오류: ${error.message}`);
+             }
+         }
+    },
+
     // 연결 상태 업데이트
     updateConnectionStatus: function(status, message) {
         const statusElement = this.elements.deviceConnectionStatus;
@@ -375,56 +342,44 @@ const DeviceControl = {
 
         // 모든 상태 클래스 제거
         statusElement.classList.remove('connected', 'disconnected', 'error', 'connecting');
-
         // 상태에 따라 클래스 추가
         statusElement.classList.add(status);
-
         // 메시지 업데이트
         statusElement.textContent = message;
-
         console.log(`연결 상태 업데이트: ${status} - ${message}`);
     },
 
     // 장치 상태 확인
     checkDeviceStatus: async function() {
         if (!this.isConnected) {
-            this.elements.deviceStatusResult.value = '오류: 먼저 서버에 연결해야 합니다.';
+             if(this.elements.deviceStatusResult) this.elements.deviceStatusResult.value = '오류: 먼저 서버에 연결해야 합니다.';
             console.error('장치 상태 확인 시도 중 오류: 서버 연결 안됨');
             return;
         }
-
         // 상태 확인 중 UI 업데이트
-        this.elements.checkDeviceStatusBtn.disabled = true;
-        this.elements.deviceStatusResult.value = '장치 상태 확인 중...';
+         if(this.elements.checkDeviceStatusBtn) this.elements.checkDeviceStatusBtn.disabled = true;
+         if(this.elements.deviceStatusResult) this.elements.deviceStatusResult.value = '장치 상태 확인 중...';
 
         try {
             console.log('장치 상태 확인 요청 전송');
-
             // 백엔드 API 호출
-            const response = await AppUtils.fetchWithTimeout('/api/device/status', {
-                method: 'GET'
-            });
-
+            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;
                 // JSON 데이터를 보기 좋게 포맷팅하여 표시
-                this.elements.deviceStatusResult.value = JSON.stringify(data.data || data, null, 2); // data.data 우선 확인
+                 if(this.elements.deviceStatusResult) this.elements.deviceStatusResult.value = JSON.stringify(data.data || data, null, 2); // data.data 우선 확인
             } else {
-                // 상태 확인 실패
                 console.error('장치 상태 확인 실패:', data);
-                this.elements.deviceStatusResult.value = `상태 확인 실패: ${data.error || '알 수 없는 오류'}`;
+                 if(this.elements.deviceStatusResult) this.elements.deviceStatusResult.value = `상태 확인 실패: ${data.error || '알 수 없는 오류'}`;
             }
         } catch (error) {
-            // 예외 발생
             console.error('장치 상태 확인 중 오류 발생:', error);
-            this.elements.deviceStatusResult.value = `상태 확인 중 오류 발생: ${error.message}`;
+             if(this.elements.deviceStatusResult) this.elements.deviceStatusResult.value = `상태 확인 중 오류 발생: ${error.message}`;
         } finally {
-            // 버튼 다시 활성화
-            this.elements.checkDeviceStatusBtn.disabled = false;
+             if(this.elements.checkDeviceStatusBtn) this.elements.checkDeviceStatusBtn.disabled = false;
         }
     },
 
@@ -435,8 +390,6 @@ const DeviceControl = {
             console.error('프로그램 목록 조회 시도 중 오류: 서버 연결 안됨');
             return;
         }
-
-        // 이미 로딩 중이면 중복 요청 방지
         if (this.isLoadingPrograms) {
             console.log('이미 프로그램 목록 로딩 중');
             return;
@@ -444,131 +397,76 @@ const DeviceControl = {
 
         // 로딩 중 UI 업데이트
         this.isLoadingPrograms = true;
-        if(this.elements.getProgramsBtn) this.elements.getProgramsBtn.disabled = true; // 버튼 존재 여부 확인
-        if(this.elements.programsList) { // 목록 요소 존재 여부 확인
-             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 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 {
-                // 목록 조회 실패
                 console.error('프로그램 목록 조회 실패:', data);
                 this.showProgramsError(`프로그램 목록 조회 실패: ${data.error || '알 수 없는 오류'}`);
             }
         } catch (error) {
-            // 예외 발생
             console.error('프로그램 목록 조회 중 오류 발생:', error);
             this.showProgramsError(`프로그램 목록 조회 중 오류 발생: ${error.message}`);
         } finally {
-            // 로딩 상태 및 버튼 상태 복원
             this.isLoadingPrograms = false;
-             if(this.elements.getProgramsBtn) 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 (!programsListElement) return;
 
         if (!this.programsList || this.programsList.length === 0) {
-            programsListElement.innerHTML = `
-                <div class="no-programs-message">
-                    <i class="fas fa-info-circle"></i> 등록된 프로그램이 없습니다.
-                </div>
-            `;
+            programsListElement.innerHTML = `<div class="no-programs-message"><i class="fas fa-info-circle"></i> 등록된 프로그램이 없습니다.</div>`;
             return;
         }
-
         // 테이블 형태로 프로그램 목록 표시
-        let html = `
-            <table class="program-list">
-                <thead>
-                    <tr>
-                        <th>이름</th>
-                        <th>설명</th>
-                        <th>경로</th>
-                    </tr>
-                </thead>
-                <tbody>
-        `;
-
-        // 프로그램 항목 생성
+        let html = `<table class="program-list"><thead><tr><th>이름</th><th>설명</th><th>경로</th></tr></thead><tbody>`;
         this.programsList.forEach(program => {
-            html += `
-                <tr>
-                    <td>${AppUtils.escapeHtml(program.name || '알 수 없음')}</td>
-                    <td>${AppUtils.escapeHtml(program.description || '-')}</td>
-                    <td>${AppUtils.escapeHtml(program.path || '-')}</td>
-                </tr>
-            `;
+            html += `<tr>
+                        <td>${AppUtils.escapeHtml(program.name || '알 수 없음')}</td>
+                        <td>${AppUtils.escapeHtml(program.description || '-')}</td>
+                        <td>${AppUtils.escapeHtml(program.path || '-')}</td>
+                     </tr>`;
         });
-
-        html += `
-                </tbody>
-            </table>
-            <div style="margin-top: 10px; font-size: 0.9em; color: #666;">
-                총 ${this.programsList.length}개 프로그램
-            </div>
-        `;
-
+        html += `</tbody></table><div style="margin-top: 10px; font-size: 0.9em; color: #666;">총 ${this.programsList.length}개 프로그램</div>`;
         programsListElement.innerHTML = html;
     },
 
     // 프로그램 드롭다운 업데이트
     updateProgramsDropdown: function() {
         const dropdown = this.elements.programSelectDropdown;
-         if (!dropdown) return; // 요소 없으면 종료
-
-        // 기존 옵션 제거
-        dropdown.innerHTML = '';
+        if (!dropdown) return;
 
-        // 기본 옵션 추가
+        dropdown.innerHTML = ''; // 기존 옵션 제거
         const defaultOption = document.createElement('option');
         defaultOption.value = '';
-        defaultOption.textContent = this.programsList.length > 0
-            ? '-- 실행할 프로그램 선택 --'
-            : '-- 프로그램 없음 --';
+        defaultOption.textContent = this.programsList.length > 0 ? '-- 실행할 프로그램 선택 --' : '-- 프로그램 없음 --';
         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);
         });
     },
@@ -577,23 +475,18 @@ const DeviceControl = {
     updateExecuteButton: function() {
         const dropdown = this.elements.programSelectDropdown;
         const executeBtn = this.elements.executeProgramBtn;
-        if (!dropdown || !executeBtn) return; // 요소 없으면 종료
-
-        // 선택된 프로그램이 있을 때만 버튼 활성화
-        executeBtn.disabled = !dropdown.value;
+        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;
         }
 
@@ -603,49 +496,38 @@ const DeviceControl = {
 
         try {
             console.log(`프로그램 실행 요청 전송: ${programId}`);
-
             // 백엔드 API 호출
             const response = await AppUtils.fetchWithTimeout(`/api/device/programs/${programId}/execute`, {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({})
-            }, 15000); // 15초 타임아웃 (실행에 시간이 더 걸릴 수 있음)
+            }, 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 {
-                // 실행 실패
                 console.error('프로그램 실행 실패:', data);
                 this.showExecuteResult('error', `실행 실패: ${data.error || '알 수 없는 오류'}`);
             }
         } catch (error) {
-            // 예외 발생
             console.error('프로그램 실행 중 오류 발생:', error);
-
             if (error.message.includes('시간이 초과')) {
                 this.showExecuteResult('error', '프로그램 실행 요청 시간 초과. 서버 응답이 없습니다.');
             } else {
                 this.showExecuteResult('error', `프로그램 실행 중 오류 발생: ${error.message}`);
             }
         } finally {
-            // 버튼 다시 활성화
-            if(this.elements.executeProgramBtn) this.elements.executeProgramBtn.disabled = false;
+             if(this.elements.executeProgramBtn) this.elements.executeProgramBtn.disabled = false;
         }
     },
 
     // 선택된 프로그램 이름 가져오기
     getSelectedProgramName: function() {
         const dropdown = this.elements.programSelectDropdown;
-        if (!dropdown) return '알 수 없는 프로그램';
+        if (!dropdown || dropdown.selectedIndex < 0) return '알 수 없는 프로그램'; // 인덱스 체크 추가
         const selectedOption = dropdown.options[dropdown.selectedIndex];
         return selectedOption ? selectedOption.textContent : '알 수 없는 프로그램';
     },
@@ -653,42 +535,28 @@ const DeviceControl = {
     // 프로그램 목록 오류 표시
     showProgramsError: function(errorMessage) {
         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">
-                    <i class="fas fa-sync"></i> 다시 시도
-                </button>
-            </div>
-        `;
-
-        // 재시도 버튼 이벤트 리스너
-        // 이전에 추가된 리스너가 있다면 제거하고 다시 추가하는 것이 안전할 수 있음
+        if (!programsListElement) return;
+
+        programsListElement.innerHTML = `<div class="error-message"><i class="fas fa-exclamation-circle"></i> ${errorMessage} <button class="retry-button" id="retryLoadProgramsBtn"><i class="fas fa-sync"></i> 다시 시도</button></div>`;
         const retryBtn = document.getElementById('retryLoadProgramsBtn');
         if (retryBtn) {
-             retryBtn.replaceWith(retryBtn.cloneNode(true)); // 리스너 제거 트릭
+             // 기존 리스너 제거 후 추가 (중복 방지)
+             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; // 요소 없으면 종료
+        if (!resultElement) return;
 
-        // 모든 상태 클래스 제거
-        resultElement.classList.remove('success', 'error', 'warning');
+        resultElement.classList.remove('success', 'error', 'warning'); // 모든 상태 클래스 제거
+        resultElement.innerHTML = ''; // 내용 초기화
 
-        // 내용 초기화
-        resultElement.innerHTML = '';
-
-        // 상태에 따라 처리
         switch (status) {
             case 'success':
                 resultElement.classList.add('success');
@@ -710,18 +578,14 @@ const DeviceControl = {
         }
     },
 
-    // ================== 추가 시작 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;
         }
 
@@ -731,58 +595,38 @@ const DeviceControl = {
 
         try {
             console.log(`사용자 정의 프로그램 실행 요청 전송: ${command}`);
-
             // 백엔드 API 호출
             const response = await AppUtils.fetchWithTimeout('/api/device/execute-custom', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
+                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;
         }
     },
@@ -790,19 +634,14 @@ const DeviceControl = {
     // 사용자 정의 프로그램 실행 결과 표시
     showCustomExecuteResult: function(status, message) {
         const resultElement = this.elements.customExecuteResult;
-        if (!resultElement) return; // 요소 없으면 종료
-
-        // 모든 상태 클래스 제거
-        resultElement.classList.remove('success', 'error', 'warning');
+        if (!resultElement) return;
 
-        // 내용 초기화
-        resultElement.innerHTML = '';
+        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':
@@ -814,15 +653,177 @@ const DeviceControl = {
                 resultElement.innerHTML = `<i class="fas fa-exclamation-triangle"></i> ${message}`;
                 break;
             case 'loading':
-                // 로딩 스피너 함수가 AppUtils에 있다고 가정
                 resultElement.innerHTML = `${AppUtils.createLoadingSpinner()} ${message}`;
                 break;
             default:
                 resultElement.textContent = message; // 기본은 텍스트만 표시
         }
+    },
+
+    // ================== 포트 스캔 함수 추가 ==================
+    // 장치 포트 스캔 함수
+    scanDevicePorts: async function() {
+        if (!this.isConnected) {
+            this.showPortsStatus('error', '오류: 먼저 서버에 연결해야 합니다.');
+            console.error('장치 포트 스캔 시도 중 오류: 서버 연결 안됨');
+            return;
+        }
+        // 스캔 중 UI 업데이트
+        if(this.elements.scanPortsBtn) this.elements.scanPortsBtn.disabled = true;
+        this.showPortsStatus('loading', '장치 포트 스캔 중...');
+
+        try {
+            console.log('장치 포트 스캔 요청 전송');
+            // 백엔드 API 호출
+            const response = await AppUtils.fetchWithTimeout('/api/device/scan-ports', {
+                method: 'GET'
+            }, 30000); // 장치 스캔은 시간이 오래 걸릴 수 있으므로 타임아웃 30초로 설정
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                // 스캔 성공
+                console.log('장치 포트 스캔 성공:', data);
+                // 결과 표시
+                this.displayPortsResults(data);
+                this.showPortsStatus('success', '장치 포트 스캔이 완료되었습니다.');
+            } else {
+                // 스캔 실패
+                console.error('장치 포트 스캔 실패:', data);
+                this.showPortsStatus('error', `스캔 실패: ${data.error || '알 수 없는 오류'}`);
+            }
+        } catch (error) {
+            // 예외 발생
+            console.error('장치 포트 스캔 중 오류 발생:', error);
+            if (error.message.includes('시간이 초과')) {
+                this.showPortsStatus('error', '장치 포트 스캔 요청 시간 초과. 서버 응답이 없습니다.');
+            } else {
+                this.showPortsStatus('error', `장치 포트 스캔 중 오류 발생: ${error.message}`);
+            }
+        } finally {
+            // 버튼 다시 활성화
+             if(this.elements.scanPortsBtn) this.elements.scanPortsBtn.disabled = false;
+        }
+    },
+
+    // 장치 포트 스캔 결과 표시
+    displayPortsResults: function(data) {
+        const portsResultsElement = this.elements.portsResults;
+        if (!portsResultsElement) return; // 요소 없으면 종료
+
+        // 시스템 정보
+        const systemInfo = data.system_info || {};
+        const devices = data.devices || {};
+        const serialPorts = devices.serial || [];
+        const usbDevices = devices.usb || [];
+        const windowsUsbDevices = devices.windows_usb || []; // windows_usb 키 추가
+
+        // HTML 생성 시작
+        let html = `<div class="ports-results-container">`;
+
+        // 시스템 정보 섹션
+        html += `<div class="ports-section">
+                    <h4>시스템 정보</h4>
+                    <div class="info-row"><span class="info-label">OS:</span><span class="info-value">${AppUtils.escapeHtml(systemInfo.os || '알 수 없음')} ${AppUtils.escapeHtml(systemInfo.version || '')}</span></div>
+                    <div class="info-row"><span class="info-label">시스템:</span><span class="info-value">${AppUtils.escapeHtml(systemInfo.platform || '알 수 없음')}</span></div>
+                    <div class="info-row"><span class="info-label">조회 시간:</span><span class="info-value">${AppUtils.escapeHtml(data.timestamp || '알 수 없음')}</span></div>
+                 </div>`;
+
+        // 시리얼 포트 섹션
+        html += `<div class="ports-section"><h4>시리얼 포트 (${serialPorts.length}개)</h4>`;
+        if (serialPorts.length === 0) {
+            html += `<p class="no-ports-message">발견된 시리얼 포트가 없습니다.</p>`;
+        } else {
+            html += `<table class="ports-table"><thead><tr><th>포트</th><th>설명</th><th>제조사</th><th>VID:PID</th></tr></thead><tbody>`;
+            serialPorts.forEach(port => {
+                const vidPid = (port.vid && port.pid) ? `${port.vid}:${port.pid}` : '알 수 없음';
+                html += `<tr>
+                            <td>${AppUtils.escapeHtml(port.port || '')}</td>
+                            <td>${AppUtils.escapeHtml(port.description || '')}</td>
+                            <td>${AppUtils.escapeHtml(port.manufacturer || '')}</td>
+                            <td>${AppUtils.escapeHtml(vidPid)}</td>
+                         </tr>`;
+            });
+            html += `</tbody></table>`;
+        }
+        html += `</div>`;
+
+        // USB 장치 섹션 (pyserial list_ports 기반)
+        html += `<div class="ports-section"><h4>USB 장치 (pyserial) (${usbDevices.length}개)</h4>`;
+        if (usbDevices.length === 0) {
+            html += `<p class="no-ports-message">발견된 USB 장치가 없습니다.</p>`;
+        } else {
+            html += `<table class="ports-table"><thead><tr><th>VID:PID</th><th>제품명</th><th>제조사</th><th>위치</th></tr></thead><tbody>`;
+            usbDevices.forEach(device => {
+                const vidPid = (device.vid && device.pid) ? `${device.vid}:${device.pid}` : '알 수 없음';
+                html += `<tr>
+                            <td>${AppUtils.escapeHtml(vidPid)}</td>
+                            <td>${AppUtils.escapeHtml(device.product || '')}</td>
+                            <td>${AppUtils.escapeHtml(device.manufacturer || '')}</td>
+                            <td>${AppUtils.escapeHtml(device.location || '')}</td>
+                         </tr>`;
+            });
+            html += `</tbody></table>`;
+        }
+        html += `</div>`;
+
+        // Windows WMI USB 장치 섹션 (있는 경우)
+        if (windowsUsbDevices && windowsUsbDevices.length > 0) {
+            html += `<div class="ports-section"><h4>Windows USB 장치 (WMI) (${windowsUsbDevices.length}개)</h4>`;
+            html += `<table class="ports-table"><thead><tr><th>이름</th><th>설명</th><th>제조사</th><th>VID:PID</th></tr></thead><tbody>`;
+            windowsUsbDevices.forEach(device => {
+                const vidPid = (device.vid && device.pid) ? `${device.vid}:${device.pid}` : '알 수 없음';
+                html += `<tr>
+                            <td>${AppUtils.escapeHtml(device.name || '')}</td>
+                            <td>${AppUtils.escapeHtml(device.description || '')}</td>
+                            <td>${AppUtils.escapeHtml(device.manufacturer || '')}</td>
+                            <td>${AppUtils.escapeHtml(vidPid)}</td>
+                         </tr>`;
+            });
+            html += `</tbody></table></div>`;
+        }
+
+        // 컨테이너 닫기
+        html += `</div>`;
+
+        // HTML 설정
+        portsResultsElement.innerHTML = html;
+    },
+
+    // 포트 스캔 상태 표시
+    showPortsStatus: function(status, message) {
+        const statusElement = this.elements.portsStatus;
+        if (!statusElement) return; // 요소 없으면 종료
+
+        // 모든 상태 클래스 제거
+        statusElement.classList.remove('success', 'error', 'warning');
+        // 내용 초기화
+        statusElement.innerHTML = '';
+
+        // 상태에 따라 처리
+        switch (status) {
+            case 'success':
+                statusElement.classList.add('success');
+                statusElement.innerHTML = `<i class="fas fa-check-circle"></i> ${message}`;
+                break;
+            case 'error':
+                statusElement.classList.add('error');
+                statusElement.innerHTML = `<i class="fas fa-exclamation-circle"></i> ${message}`;
+                break;
+            case 'warning':
+                statusElement.classList.add('warning');
+                statusElement.innerHTML = `<i class="fas fa-exclamation-triangle"></i> ${message}`;
+                break;
+            case 'loading':
+                statusElement.innerHTML = `${AppUtils.createLoadingSpinner()} ${message}`;
+                break;
+            default:
+                statusElement.textContent = message;
+        }
     }
-    // ================== 추가 끝 4/4 ====================
-};
+    // ================== 추가 끝 ============================
+
+}; // DeviceControl 객체 끝
 
 // 페이지 로드 완료 시 모듈 초기화
 document.addEventListener('DOMContentLoaded', function() {

app/templates/index.html

@@ -16,8 +16,7 @@
                 <div class="llm-selector">
                     <label for="llmSelect">LLM 선택:</label>
                     <select id="llmSelect">
-                        <!-- 옵션은 JavaScript에서 동적으로 로드됩니다 -->
-                    </select>
+                        </select>
                 </div>
                 <div class="user-info">
                     <span>사용자: {% if session.username %}{{ session.username }}{% else %}손님{% endif %}</span>
@@ -34,7 +33,6 @@
         </header>
 
         <main>
-            <!-- 대화 탭 -->
             <section id="chatSection" class="tab-content active">
                 <div class="chat-container">
                     <div class="chat-messages" id="chatMessages">
@@ -44,7 +42,7 @@
                             </div>
                         </div>
                     </div>
-                    
+
                     <div class="chat-input-container">
                         <textarea id="userInput" placeholder="메시지를 입력하세요..." rows="1"></textarea>
                         <button id="micButton" class="mic-button">
@@ -54,7 +52,7 @@
                             <i class="fas fa-paper-plane"></i>
                         </button>
                     </div>
-                    
+
                     <div id="recordingStatus" class="recording-status hidden">
                         <div class="recording-indicator">
                             <div class="recording-pulse"></div>
@@ -67,34 +65,33 @@
                 </div>
             </section>
 
-            <!-- 문서관리 탭 -->
             <section id="docsSection" class="tab-content">
                 <div class="docs-container">
                     <div class="upload-section">
                         <h2>문서 업로드</h2>
                         <p>지식베이스에 추가할 문서를 업로드하세요. (지원 형식: .txt, .md, .csv)</p>
-                        
+
                         <form id="uploadForm" enctype="multipart/form-data">
                             <div class="file-upload">
                                 <input type="file" id="documentFile" name="document" accept=".txt,.md,.csv">
                                 <label for="documentFile">파일 선택</label>
                                 <span id="fileName">선택된 파일 없음</span>
                             </div>
-                            
+
                             <button type="submit" id="uploadButton" class="upload-button">
                                 <i class="fas fa-upload"></i> 업로드
                             </button>
                         </form>
-                        
+
                         <div id="uploadStatus" class="upload-status hidden"></div>
                     </div>
-                    
+
                     <div class="docs-list-section">
                         <h2>문서 목록</h2>
                         <button id="refreshDocsButton" class="refresh-button">
                             <i class="fas fa-sync-alt"></i> 새로고침
                         </button>
-                        
+
                         <div class="docs-list-container">
                             <table id="docsList" class="docs-list">
                                 <thead>
@@ -105,15 +102,14 @@
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    <!-- 문서 목록이 여기에 동적으로 추가됩니다 -->
-                                </tbody>
+                                    </tbody>
                             </table>
-                            
+
                             <div id="docsLoading" class="loading-indicator">
                                 <div class="spinner"></div>
                                 <p>문서 로딩 중...</p>
                             </div>
-                            
+
                             <div id="noDocsMessage" class="no-docs-message hidden">
                                 <p>지식베이스에 등록된 문서가 없습니다. 문서를 업로드해 주세요.</p>
                             </div>
@@ -121,8 +117,7 @@
                     </div>
                 </div>
             </section>
-            
-            <!-- 장치 제어 탭 -->
+
             <section id="deviceSection" class="tab-content">
                 <div class="device-connection">
                     <h3>1. 장치 서버 연결</h3>
@@ -157,8 +152,7 @@
                     <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">
@@ -167,7 +161,13 @@
                     </div>
                     <div id="customExecuteResult" class="execute-result"></div>
                 </div>
-            </section>
+
+                <div id="devicePortScanControl" class="program-control"> <h3>5. 장치 포트 조회</h3>
+                    <div class="function-buttons">
+                        <button id="scanPortsBtn">장치 포트 스캔</button>
+                    </div>
+                    <div id="portsStatus" class="ports-status"></div> <div id="portsResults" class="ports-results"></div> </div>
+                </section>
         </main>
 
         <footer>
@@ -183,4 +183,4 @@
     <script src="{{ url_for('static', filename='js/app-device.js') }}"></script>
     <script src="{{ url_for('static', filename='js/app.js') }}"></script>
 </body>
-</html>
+</html>

docs/project_plan.md

@@ -24,10 +24,63 @@
   - `static/js/app-device.js`에 장치 제어 JavaScript 코드
   - `static/css/device-style.css`에 장치 제어 스타일
 
+## 현재 상태
+코드 검토 결과 대부분의 통합 작업이 이미 완료된 상태입니다:
+- Flask 백엔드에 LocalPCAgent API 엔드포인트가 구현되어 있습니다 (`app_device_routes.py`)
+- 프론트엔드 UI에 장치 제어 탭이 추가되어 있습니다 (`index.html`)
+- 장치 제어를 위한 JavaScript 로직이 구현되어 있습니다 (`app-device.js`)
+- 기본 기능과 사용자 정의 명령어 실행 기능이 모두 구현되어 있습니다
+
+## 추가 개발 계획: 장치 목록 조회 기능 추가
+
+### 개발 목표
+로컬PC에 연결된 장치(특히 COM 포트와 USB 장치)를 조회하는 기능을 추가합니다.
+
+### 구현 요구사항
+1. **로컬PC 장치 조회 Python 프로그램 개발**
+   - COM 포트 및 USB 장치 목록 조회
+   - 장치별 상세 정보(제조사, 제품명, 시리얼 번호 등) 수집
+   - 멀티 플랫폼 지원(Windows, Linux, macOS)
+
+2. **LocalPCAgent API 확장**
+   - 장치 목록 조회 API 엔드포인트 추가
+   - 조회 결과 효율적인 전송 방식 구현
+
+3. **UI 확장**
+   - 장치 제어 탭에 장치 목록 조회 섹션 추가
+   - 조회 결과 표시 UI 구현
+   - 장치 타입별 필터링 기능 구현
+
+### 기술 스택
+- 백엔드: Python(`pyserial`, `pyusb`), Flask
+- 프론트엔드: HTML, CSS, JavaScript
+- 통신: REST API, JSON 포맷
+
+### 구현 계획
+1. **로컬PC 장치 조회 Python 스크립트 개발**
+   - `scan_devices.py` 스크립트 작성
+   - 테스트 및 디버깅
+
+2. **LocalPCAgent에 통합**
+   - LocalPCAgent 프로그램 목록에 등록
+   - API 엔드포인트 테스트
+
+3. **Flask 백엔드 API 확장**
+   - `app_device_routes.py`에 장치 조회 API 추가
+   - 데이터 포맷 및 오류 처리 구현
+
+4. **프론트엔드 UI 개발**
+   - `index.html`에 장치 목록 조회 섹션 추가
+   - `app-device.js`에 장치 조회 관련 함수 추가
+   - 필요시 CSS 스타일 추가
+
 ## 남은 작업
+- [ ] 로컬PC 장치 조회 Python 스크립트 개발
+- [ ] LocalPCAgent 서버에 장치 조회 기능 통합
+- [ ] Flask 백엔드 장치 조회 API 구현
+- [ ] 프론트엔드 UI 확장
 - [ ] 전체 시스템 테스트 및 디버깅
-  - 다양한 환경에서 테스트 (개발 환경, 배포 환경)
-  - 다양한 장치 연결 시나리오 테스트
+- [ ] 최종 코드 리뷰 및 문서화 보완
 
 ## 파일 구조
 - `app_revised.py`: 메인 Flask 애플리케이션
@@ -54,6 +107,8 @@
 - `docs/`: 프로젝트 문서
   - `project_plan.md`: 프로젝트 계획 문서
   - `cleanup_plan.md`: 코드 정리 계획 문서
+- **신규 파일:**
+  - `LocalPCAgent/programs/scan_devices.py`: 장치 조회 Python 스크립트
 
 ## LocalPCAgent 통합 요약
 - **백엔드 API**: `app/app_device_routes.py`에 구현
@@ -63,6 +118,7 @@
   - `/api/device/programs`: 실행 가능한 프로그램 목록 조회
   - `/api/device/programs/<program_id>/execute`: 등록된 프로그램 실행
   - `/api/device/execute-custom`: 사용자 정의 프로그램 실행
+  - **추가 예정:** `/api/device/scan-ports`: COM 포트 및 USB 장치 목록 조회
 
 - **프런트엔드**: 기능 완성
   - 장치 제어 탭 UI: `templates/index.html`에 구현