Update 2025-12-19 16:23:03

backend/static/js/index.js

@@ -1,5 +1,7 @@
 document.addEventListener('DOMContentLoaded', () => {
 
+
+
     // ─────────────────────────────────────────────────────────────
     // 스크립트 선택 시 XML 드롭다운 토글
     // ─────────────────────────────────────────────────────────────
@@ -77,6 +79,37 @@ document.addEventListener('DOMContentLoaded', () => {
     const csrfToken = document.querySelector('input[name="csrf_token"]')?.value || '';
 
 
+    // ─────────────────────────────────────────────────────────────
+    // IP 입력 데이터 보존 (Local Storage)
+    // ─────────────────────────────────────────────────────────────
+    const ipTextarea = document.getElementById('ips');
+    const ipForm = document.getElementById('ipForm');
+    const STORAGE_KEY_IP = 'ip_input_draft';
+
+    if (ipTextarea) {
+        // 1. 페이지 로드 시 저장된 값 복원
+        const savedIps = localStorage.getItem(STORAGE_KEY_IP);
+        if (savedIps) {
+            ipTextarea.value = savedIps;
+            // 라인 수 업데이트 트리거
+            if (window.updateIpCount) window.updateIpCount();
+        }
+
+        // 2. 입력 시마다 저장
+        ipTextarea.addEventListener('input', () => {
+            localStorage.setItem(STORAGE_KEY_IP, ipTextarea.value);
+            // script.js에 있는 updateIpCount 호출 (있다면)
+            if (window.updateIpCount) window.updateIpCount();
+        });
+
+        // 3. 폼 제출 성공 시 초기화? 
+        // 사용자의 의도에 따라 다름: "변경이 되지 않는 이상 계속 가지고 있게" 
+        // -> 제출 후에도 유지하는 것이 요청 사항에 부합함. 
+        // 만약 '성공적으로 작업이 끝나면 지워달라'는 요청이 있으면 여기를 수정.
+        // 현재 요청: "페이지가 리셋이되도 변경이 되지 않는이상 계속 가지고있게" -> 유지.
+    }
+
+
     // ─────────────────────────────────────────────────────────────
     // 공통 POST 함수
     // ─────────────────────────────────────────────────────────────
@@ -160,4 +193,75 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     }, 5000);
 
+
+    // ─────────────────────────────────────────────────────────────
+    // IP 스캔 로직 (Modal)
+    // ─────────────────────────────────────────────────────────────
+    const btnScan = document.getElementById('btnStartScan');
+    if (btnScan) {
+        btnScan.addEventListener('click', async () => {
+            const startIp = '10.10.0.1';
+            const endIp = '10.10.0.255';
+            const ipsTextarea = document.getElementById('ips');
+            const progressBar = document.getElementById('progressBar');
+
+            // UI 상태 변경 (로딩 중)
+            const originalIcon = btnScan.innerHTML;
+            btnScan.disabled = true;
+            btnScan.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
+
+            // 메인 진행바 활용
+            if (progressBar) {
+                const progressContainer = progressBar.closest('.progress');
+                if (progressContainer) {
+                    progressContainer.parentElement.classList.remove('d-none');
+                }
+                progressBar.style.width = '100%';
+                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+                progressBar.textContent = '네트워크 스캔 중... (10.10.0.1 ~ 255)';
+            }
+
+            try {
+                const res = await fetch('/utils/scan_network', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'X-CSRFToken': csrfToken
+                    },
+                    body: JSON.stringify({ start_ip: startIp, end_ip: endIp })
+                });
+
+                const data = await res.json();
+
+                if (data.success) {
+                    if (data.active_ips && data.active_ips.length > 0) {
+                        ipsTextarea.value = data.active_ips.join('\n');
+                        // 이벤트 트리거
+                        ipsTextarea.dispatchEvent(new Event('input'));
+
+                        alert(`스캔 완료: ${data.active_ips.length}개의 활성 IP를 찾았습니다.`);
+                    } else {
+                        alert('활성 IP를 발견하지 못했습니다.');
+                    }
+                } else {
+                    throw new Error(data.error || 'Unknown error');
+                }
+            } catch (err) {
+                console.error(err);
+                alert('오류 발생: ' + (err.message || err));
+            } finally {
+                // 상태 복구
+                btnScan.disabled = false;
+                btnScan.innerHTML = originalIcon;
+
+                if (progressBar) {
+                    // 진행바 초기화
+                    progressBar.style.width = '0%';
+                    progressBar.textContent = '0%';
+                    progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
+                }
+            }
+        });
+    }
+
 });