From f8a513ec1f476cb336d0829f744e47d364e0195a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=ED=98=95?=
 <147372294+blissyou@users.noreply.github.com>
Date: Mon, 30 Jun 2025 16:35:34 +0900
Subject: [PATCH] =?UTF-8?q?ui=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/static/index.html | 2044 +++++++++++++-------------
 src/main/resources/static/style.css  |   17 +-
 2 files changed, 1040 insertions(+), 1021 deletions(-)

diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index 926cd96..464ffa0 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@@ -54,8 +54,8 @@
                 </template>
 
                 <div id="ssid-list"></div>
-                <button id="add-ssid" style="margin-top:12px">Add SSID</button>
-                <button id="delete-ssid" style="margin-top:12px">Delete SSID</button>
+                <button id="add-ssid" class="icon-button" title="SSID 추가">➕</button>
+                <button id="delete-ssid" class="icon-button" title="SSID 삭제">➖</button>
             </div>
             <div class="actions">
                 <div class="file-upload-wrapper-device"
@@ -649,6 +649,8 @@
 
 <!-- ───── Script ───── -->
 <script>
+    const ssidList = document.getElementById('ssid-list');
+    const ssidTmpl = document.getElementById('ssid-template');
     const data = {
         /* Wi-Fi */
         wifi_static: 'off', wifi_ip: '', wifi_netmask: '', wifi_gateway: '', wifi_dns1: '', wifi_dns2: '',
@@ -721,1186 +723,1188 @@
         can: document.getElementById('page-can')
     };
 
-    const titleEl = document.getElementById('page-title');
+    document.addEventListener('DOMContentLoaded', () => {
+        // 페이지 로드 시 자동으로 JSON 파일들 로드
+        loadInitialData();
 
-    function downloadDeviceJson(obj, filename = 'deviceConfig.json') {
-        const json = JSON.stringify(obj, null, 2);        // 보기 좋게 들여쓰기 2칸
-        const blob = new Blob([json], {type: 'application/json'});
-        const url = URL.createObjectURL(blob);
+        // Device 파일 업로드
+        // 모든 파일 업로드 래퍼 섹션을 가져옵니다.
+        const fileUploadWrappersDevice = document.querySelectorAll('.file-upload-wrapper-device');
 
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    }
-    function downloadProtocolJson(obj, filename = 'protocolConfig.json') {
-        const json = JSON.stringify(obj, null, 2);        // 보기 좋게 들여쓰기 2칸
-        const blob = new Blob([json], {type: 'application/json'});
-        const url = URL.createObjectURL(blob);
+        fileUploadWrappersDevice.forEach(wrapper => {
+            // 현재 래퍼 내에서 input[type="file"]과 버튼을 찾습니다.
+            const uploadDeviceFileInput = wrapper.querySelector('.upload-input-device');
+            const selectDeviceFileBtn = wrapper.querySelector('.select-file-btn-device');
 
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    }
+            // 해당 래퍼의 data 속성들을 가져옵니다.
+            const expectedDeviceFileName = wrapper.dataset.expectedFilename;
+            const uploadDeviceUrl = wrapper.dataset.uploadUrl;
+            const getDeviceUrl = wrapper.dataset.getUrl;
+            const DeviceFileType = wrapper.dataset.fileType;
 
-    // 페이지 로드 시 자동으로 JSON 파일들 로드
-    async function loadInitialData() {
-        try {
-            // Device 설정 로드
-            const deviceResponse = await fetch('http://localhost:8080/setting/get-device');
-            if (deviceResponse.ok) {
-                const deviceData = await deviceResponse.json();
-                if (deviceData && deviceData.body) {
-                    loadFromData(deviceData.body);
-                }
+            // null 체크 (요소가 존재하지 않을 수도 있는 경우를 대비)
+            if (!uploadDeviceFileInput || !selectDeviceFileBtn) {
+                console.warn(`File upload elements not found in wrapper for type: ${DeviceFileType}`);
+                return;
             }
-        } catch (error) {
-            alert('Device configuration file missing or loading failed');
-        }
 
-        try {
-            // Protocol 설정 로드
-            const protocolResponse = await fetch('http://localhost:8080/setting/get-protocol');
-            if (protocolResponse.ok) {
-                const protocolData = await protocolResponse.json();
-                if (protocolData && protocolData.body) {
-                    loadFromRegisterJson(protocolData.body);
-                }
-            }
-        } catch (error) {
-            alert('Protocol configuration file missing or loading failed');        }
-    }
+            // "파일 선택" 버튼 클릭 시 숨겨진 input[type="file"] 클릭 이벤트 발생
+            selectDeviceFileBtn.addEventListener('click', () => {
+                uploadDeviceFileInput.value = ''; // 이전에 선택된 파일 초기화
+                uploadDeviceFileInput.click();
+            });
 
+            // 파일 선택 시 (change 이벤트 발생) 바로 업로드 로직 시작
+            uploadDeviceFileInput.addEventListener('change', async (event) => {
+                if (event.target.files.length === 0) {
+                    return;
+                }
 
+                const selectedDeviceFile = event.target.files[0];
+                const DeviceFileName = selectedDeviceFile.name;
 
-    function showPage(pageName) {
-        Object.values(pages).forEach(p => p.style.display = 'none');
-        pages[pageName].style.display = 'block';
-        // 버튼 텍스트를 페이지 제목으로 설정
-        const btn = document.querySelector(`.nav-items button[data-page="${pageName}"]`);
-        if (btn) {
-            titleEl.textContent = btn.textContent;
-        } else {
-            titleEl.textContent = pageName.charAt(0).toUpperCase() + pageName.slice(1); // 기본값
-        }
+                // 파일명 검증 (data-expected-filename 사용)
+                if (DeviceFileName !== expectedDeviceFileName){
+                    alert(`Invalid file.'${expectedDeviceFileName}' Please select a file. Current file: ${DeviceFileName} `);
+                    uploadDeviceFileInput.value = ''; // 잘못된 파일 선택 시 input 초기화
+                    return;
+                }
 
-        // 페이지 전환 시 항상 마지막으로 로드된 전체 데이터를 UI에 반영
-        // if (lastLoadedRegisterData && Object.keys(lastLoadedRegisterData).length > 0) {
-        //     loadFromRegisterJson(lastLoadedRegisterData);
-        // }
-        toggleNetInputs(); // Network 페이지 로드 시 IP 모드에 따른 입력 필드 활성화/비활성화
+                const reader = new FileReader();
 
-    }
+                reader.onload = async (e) => {
+                    try {
+                        const DeviceFileContent = e.target.result;
+                        const jsonData = JSON.parse(DeviceFileContent);
 
-    document.querySelectorAll('.nav-items button').forEach(btn => {
-        btn.addEventListener('click', () => {
-            // Object.values(pages).forEach(p=>p.style.display='none');
-            // pages[btn.dataset.page].style.display='block';
-            // titleEl.textContent = btn.textContent;
-            showPage(btn.dataset.page);
-        });
-    });
+                        // 백엔드 저장 API 호출 (data-upload-url 사용)
+                        const response = await fetch(uploadDeviceUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify(jsonData)
+                        });
 
+                        if (!response.ok) {
+                            const errorText = await response.text();
+                            throw new Error(`File upload failed: ${response.status} ${response.statusText} - ${errorText}`);
+                        }
 
-    const ssidList = document.getElementById('ssid-list');
-    const ssidTmpl = document.getElementById('ssid-template');
+                        const result = await response.json();
 
-    function createSsidRow(obj = {wifi_ssid: '', wifi_password: '', wifi_security: 'none'}) {
-        const node = ssidTmpl.content.firstElementChild.cloneNode(true);
-        node.querySelector('.ssid-name').value = obj.wifi_ssid ?? '';
-        node.querySelector('.ssid-pw').value = obj.wifi_password ?? '';
-        node.querySelector('select').value = (obj.wifi_security ?? 'none').toLowerCase();
-        return node;
-    }
+                        if (result.result && result.result.result_code === 200) {
+                            alert(`File uploaded to Device successfully (${DeviceFileType})`);
+                            console.log(`Upload successful for ${DeviceFileType}:`, result);
 
-    function addSsidRow() {
-        ssidList.appendChild(createSsidRow());
-    }
+                            // 업로드 성공 후 최신 데이터를 Device에서 다시 불러와 UI 업데이트 (data-get-url 사용)
+                            // loadFromRegisterJson은 Register 데이터만 처리하는 함수이므로,
+                            // 만약 Modbus/OPCUA/CAN 데이터 로드 함수가 별도로 있다면 여기서 조건부 호출 필요
+                            fetch(getDeviceUrl)
+                                .then(res => res.json())
+                                .then(apiResponseData => {
+                                    if (apiResponseData && apiResponseData.body) {
+                                        // 여기도 fileType에 따라 다른 load 함수를 호출해야 할 수 있습니다.
+                                        // 현재는 모든 파일이 Register 설정이라고 가정하여 loadFromRegisterJson 호출
+                                        loadFromData(apiResponseData.body);
+                                        console.log(`UI updated with newly uploaded ${DeviceFileType} data.`);
+                                    } else {
+                                        console.warn(`Failed to reload ${DeviceFileType} data after upload: no response body`);
+                                    }
+                                })
+                                .catch(err => console.error(`Error reloading ${DeviceFileType} data after upload:`, err));
 
-    document.getElementById('add-ssid').addEventListener('click', addSsidRow);
+                            uploadDeviceFileInput.value = ''; // input 초기화 (다음 업로드 위함)
 
-    document.getElementById('delete-ssid').addEventListener('click', () => {
-        if (ssidList.children.length > 1) {
-            ssidList.removeChild(ssidList.lastElementChild);
-        } else if (ssidList.children.length === 1) {
-            const firstRow = ssidList.firstElementChild;
-            firstRow.querySelector('.ssid-name').value = '';
-            firstRow.querySelector('.ssid-pw').value = '';
-            firstRow.querySelector('select').value = 'none';
-        }
-    })
+                        } else {
+                            alert(`File upload failed: ${result.result ? result.result.result_message : 'Unknown error'} (${DeviceFileType})`);
+                            console.error(`Upload failed for ${DeviceFileType} with backend error:`, result);
+                            uploadDeviceFileInput.value = '';
+                        }
 
+                    } catch (error) {
+                        console.error(`Error uploading file (${DeviceFileType}):`, error);
+                        alert(`Error uploading file: ${error.message} (${DeviceFileType})`);
+                        uploadDeviceFileInput.value = '';
+                    }
+                };
 
-    ssidList.addEventListener('click', e => {
-        if (e.target.classList.contains('toggle-pw')) {
-            const pw = e.target.closest('.ssid-row').querySelector('.ssid-pw');
-            pw.type = pw.type === 'password' ? 'text' : 'password';
-            e.target.textContent = pw.type === 'password' ? 'show' : 'hide';
-        } else if (e.target.dataset.action === 'delete-ssid') {
-            const ssidRow = e.target.closest('.ssid-row');
-            if (ssidRow) {
-                removeSsidRow(ssidRow);
-            }
-        }
-    });
+                reader.onerror = () => {
+                    alert(`An error occurred while reading the file. (${DeviceFileType})`);
+                    console.error(`FileReader error for ${DeviceFileType}:`, reader.error);
+                    uploadDeviceFileInput.value = '';
+                };
 
-    function gatherSsidRows() {
-        const arr = [];
-        ssidList.querySelectorAll('.ssid-row').forEach(row => {
-            const ssid = row.querySelector('.ssid-name').value.trim();
-            const pw = row.querySelector('.ssid-pw').value.trim();
-            const sec = row.querySelector('select').value;
-            if (ssid) arr.push({wifi_ssid: ssid, wifi_password: pw, wifi_security: sec});
+                reader.readAsText(selectedDeviceFile);
+            });
         });
-        return arr.length ? arr : [{wifi_ssid: '', wifi_password: '', wifi_security: 'none'}];
-    }
 
-    /* ───────────── 4. DHCP ↔ Static 전환 입력 잠금 ───────────── */
-    const netFields = ['wifi_ip', 'wifi_netmask', 'wifi_gateway', 'wifi_dns1', 'wifi_dns2']
-        .map(id => document.getElementById(id));
+        // Protocol 파일 업로드
+        // 모든 파일 업로드 래퍼 섹션을 가져옵니다.
+        const fileUploadWrappers = document.querySelectorAll('.file-upload-wrapper-protocol');
 
-    function toggleNetInputs() {
-        const isStatic = document.querySelector('input[name="ipMode"]:checked')?.value === 'static';
-        netFields.forEach(el => {
-            el.disabled = !isStatic;
-            el.classList.toggle('disabled', !isStatic);
-        });
-    }
+        fileUploadWrappers.forEach(wrapper => {
+            // 현재 래퍼 내에서 input[type="file"]과 버튼을 찾습니다.
+            const uploadFileInput = wrapper.querySelector('.upload-input-protocol');
+            const selectFileBtn = wrapper.querySelector('.select-file-btn-protocol');
 
-    document.querySelectorAll('input[name="ipMode"]').forEach(r => r.addEventListener('change', toggleNetInputs));
+            // 해당 래퍼의 data 속성들을 가져옵니다.
+            const expectedFileName = wrapper.dataset.expectedFilename;
+            const uploadUrl = wrapper.dataset.uploadUrl;
+            const getUrl = wrapper.dataset.getUrl;
+            const fileType = wrapper.dataset.fileType; // 'protocol', 'modbus', 'opcua', 'can'
 
+            // null 체크 (요소가 존재하지 않을 수도 있는 경우를 대비)
+            if (!uploadFileInput || !selectFileBtn) {
+                console.warn(`File upload elements not found in wrapper for type: ${fileType}`);
+                return;
+            }
 
-    function axisValueToPair(val) {
-        return val.startsWith('-')
-            ? {axis: val.slice(1), sign: 'minus'}
-            : {axis: val, sign: 'plus'};
-    }
+            // "파일 선택" 버튼 클릭 시 숨겨진 input[type="file"] 클릭 이벤트 발생
+            selectFileBtn.addEventListener('click', () => {
+                uploadFileInput.value = ''; // 이전에 선택된 파일 초기화
+                uploadFileInput.click();
+            });
 
-    function pairToAxisValue(axis, sign) {
-        return sign === 'minus' ? `-${axis}` : axis;
-    }
+            // 파일 선택 시 (change 이벤트 발생) 바로 업로드 로직 시작
+            uploadFileInput.addEventListener('change', async (event) => {
+                if (event.target.files.length === 0) {
+                    return;
+                }
 
-    /* ───────────── 6. 데이터 → 화면 로딩 ───────────── */
-    function loadFromData(obj) {
-        /* Wi-Fi 모드 radio */
-        document.querySelector(`input[name="ipMode"][value="${obj.wifi_static === 'on' ? 'static' : 'dhcp'}"]`).checked = true;
+                const selectedFile = event.target.files[0];
+                const fileName = selectedFile.name;
 
-        /* 일반 input/select */
-        for (const k in obj) {
-            const el = document.getElementById(k);
-            if (el) el.value = obj[k] ?? '';
-        }
+                // 파일명 검증 (data-expected-filename 사용)
+                if (fileName !== expectedFileName){
+                    alert(`Invalid file. '${expectedFileName}' Please select a file. Current file: ${fileName} `);
+                    uploadFileInput.value = ''; // 잘못된 파일 선택 시 input 초기화
+                    return;
+                }
 
-        /* IMU select 값 재구성 */
-        ['x', 'y', 'z'].forEach(a => {
-            const axis = obj[`imu_remap_${a}`] || 'x';
-            const sign = obj[`imu_remap_${a}_sign`] || 'plus';
-            document.getElementById(`imu_remap_${a}`).value = pairToAxisValue(axis, sign);
-        });
+                const reader = new FileReader();
 
-        /* SSID */
-        ssidList.innerHTML = '';
-        (obj.WIFI_SSID || []).forEach(o => ssidList.appendChild(createSsidRow(o)));
-        if (!ssidList.children.length) addSsidRow();
+                reader.onload = async (e) => {
+                    try {
+                        const fileContent = e.target.result;
+                        const jsonData = JSON.parse(fileContent);
 
-        toggleNetInputs();          // 초기 잠금 상태
-    }
+                        // JSON 내용 유효성 검증
+                        // 모든 파일이 Register 설정이라면 isValidRegisterConfig를 그대로 사용
+                        // 만약 파일 타입에 따라 다른 유효성 검사가 필요하다면,
+                        // 여기에 조건부 로직을 추가해야 합니다.
+                        if (!isValidRegisterConfig(jsonData)){ // 예를 들어, isValidModbusConfig(jsonData) 등
+                            alert(`The contents of the selected file are not in a valid ${fileType} setting file format.`);
+                            uploadFileInput.value = '';
+                            return;
+                        }
 
-    loadFromData(data);
+                        // 백엔드 저장 API 호출 (data-upload-url 사용)
+                        const response = await fetch(uploadUrl, {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify(jsonData)
+                        });
 
-    let regProtocolSelect;
+                        if (!response.ok) {
+                            const errorText = await response.text();
+                            throw new Error(`File upload failed: ${response.status} ${response.statusText} - ${errorText}`);
+                        }
 
-    function toggleProtocolMenus() {
-        if (!regProtocolSelect) return;
-        const selectProtocol = regProtocolSelect.value;
-        const modbusSidebarBtn = document.getElementById('modbusSidebarBtn');
-        const opcUaSidebarBtn = document.getElementById('opcUaSidebarBtn');
-        const canSidebarBtn = document.getElementById('canSidebarBtn');
-        if (modbusSidebarBtn) modbusSidebarBtn.style.display = 'none';
-        if (opcUaSidebarBtn) opcUaSidebarBtn.style.display = 'none';
-        if (canSidebarBtn) canSidebarBtn.style.display = 'none';
-        if (selectProtocol === 'MODBUS') {
-            if (modbusSidebarBtn) modbusSidebarBtn.style.display = 'block';
-        } else if (selectProtocol === 'OPC_UA') {
-            if (opcUaSidebarBtn) opcUaSidebarBtn.style.display = 'block';
-        }
-        // CAN Input이 on일 때만 CAN 메뉴 보이기
-        const canInputEl = document.getElementById('reg_can_input');
-        if (canInputEl && canInputEl.value === 'on') {
-            if (canSidebarBtn) canSidebarBtn.style.display = 'block';
-        }
-        // Protocol configuration 메뉴 자동 펼치기
-        const protocolDetails = document.querySelectorAll('details.nav')[1];
-        if (protocolDetails) protocolDetails.open = true;
-    }
+                        const result = await response.json();
 
-    function loadFromRegisterJson(register) { // register.json 데이터 로드
-        if (!register) {
-            console.error("Register data is null or undefined.");
-            return;
-        }
-        lastLoadedRegisterData = {...register};
-        console.log("Extracted Body Data:", lastLoadedRegisterData); // DTO 객체 로깅
+                        if (result.result && result.result.result_code === 200) {
+                            alert(`File uploaded to Device successfully (${fileType})`);
+                            console.log(`Upload successful for ${fileType}:`, result);
 
-        // 1. configIdMap을 순회하며 DTO의 camelCase 필드명과 HTML ID 매핑을 사용하여 UI 업데이트
-        for (const htmlId in configIdMap) {
-            const dtoKey = configIdMap[htmlId]; // DTO의 camelCase 필드명
-            const el = document.getElementById(htmlId);
+                            // 업로드 성공 후 최신 데이터를 Device에서 다시 불러와 UI 업데이트 (data-get-url 사용)
+                            // loadFromRegisterJson은 Register 데이터만 처리하는 함수이므로,
+                            // 만약 Modbus/OPCUA/CAN 데이터 로드 함수가 별도로 있다면 여기서 조건부 호출 필요
+                            fetch(getUrl)
+                                .then(res => res.json())
+                                .then(apiResponseData => {
+                                    if (apiResponseData && apiResponseData.body) {
+                                        // 여기도 fileType에 따라 다른 load 함수를 호출해야 할 수 있습니다.
+                                        // 현재는 모든 파일이 Register 설정이라고 가정하여 loadFromRegisterJson 호출
+                                        loadFromRegisterJson(apiResponseData.body);
+                                        console.log(`UI updated with newly uploaded ${fileType} data.`);
+                                    } else {
+                                        console.warn(`Failed to reload ${fileType} data after upload: no response body`);
+                                    }
+                                })
+                                .catch(err => console.error(`업로드 후 ${fileType} 데이터 재로드 중 오류 발생:`, err));
 
-            if (el && lastLoadedRegisterData.hasOwnProperty(dtoKey)) {
-                const value = lastLoadedRegisterData[dtoKey];
+                            uploadFileInput.value = ''; // input 초기화 (다음 업로드 위함)
 
-                if (el.type === 'checkbox') {
-                    // AnalogPort Enum은 "0", "1" 문자열 또는 boolean으로 파싱될 수 있습니다.
-                    // UI 체크박스는 boolean 값을 필요로 하므로, "1"이면 체크, "0"이면 체크 해제.
-                    el.checked = (value === "1" || value === true);
-                } else {
-                    // 기타 입력 필드 (select, text input)
-                    // null 또는 undefined 값에 대비하여 빈 문자열로 처리
-                    el.value = value !== null && value !== undefined ? value : '';
-                }
-            } else if (el) {
-                // DTO에 해당 필드가 없으면 UI 요소 초기화 (선택 사항)
-                if (el.type === 'checkbox') {
-                    el.checked = false;
-                } else {
-                    el.value = '';
-                }
-                console.warn(`DTO field '${dtoKey}' (mapped from HTML ID '${htmlId}') not found in loaded data.`);
-            } else {
-                console.warn(`HTML element with ID '${htmlId}' not found for DTO key '${dtoKey}'.`);
-            }
-        }
+                        } else {
+                            alert(`File upload failed: ${result.result?result.result_message: 'unknown error'} (${fileType})`);
+                            console.error(`Upload failed for ${fileType} with backend error:`, result);
+                            uploadFileInput.value = '';
+                        }
 
+                    } catch (error) {
+                        alert(`Error uploading file: ${error.message} (${fileType})`);
+                        uploadFileInput.value = '';
+                    }
+                };
 
-        // protocol 값이 있으면 select 값을 변경 (데이터 로드 시에만)
-        if (register.protocol && regProtocolSelect) {
-            regProtocolSelect.value = register.protocol;
-        }
+                reader.onerror = () => {
+                    alert(`An error occurred while reading the file. (${fileType})`);
+                    uploadFileInput.value = '';
+                };
 
-        // 프로토콜 값에 따라 사이드바 버튼 토글
-        toggleProtocolMenus();
+                reader.readAsText(selectedFile);
+            });
+        });
 
-        // MODBUS UI 테이블 렌더링
-        const modbusFieldList = document.getElementById('modbus-field-list');
-        const modbusRowTemplate = document.getElementById('modbus-row-template');
-        if (modbusFieldList && modbusRowTemplate) {
-            modbusFieldList.innerHTML = '';
-            if (Array.isArray(register.MODBUS) && register.MODBUS.length > 0) {
-                register.MODBUS.forEach(field => {
-                    const newRow = modbusRowTemplate.content.cloneNode(true);
-                    newRow.querySelector('.field-display').textContent = field.field ?? '';
-                    newRow.querySelector('.addr-display').textContent = field.addr ?? '';
-                    newRow.querySelector('.idt-display').textContent = field.idt ?? '';
-                    newRow.querySelector('.odt-display').textContent = field.odt ?? '';
-                    newRow.querySelector('.dv-display').textContent = field.dv ?? '';
-                    newRow.querySelector('.shift-display').textContent = field.shift ?? '';
-                    newRow.querySelector('.expr-display').textContent = field.expr ?? '';
-                    newRow.querySelector('.mask-display').textContent = field.mask ?? '';
-                    modbusFieldList.appendChild(newRow);
-                });
-            } else {
-                // MODBUS 데이터가 없으면 빈 행 하나 추가
-                const newRow = modbusRowTemplate.content.cloneNode(true);
-                modbusFieldList.appendChild(newRow);
+        function isValidRegisterConfig(data) {
+            // 1. data가 객체이고 null이 아닌지 확인
+            if (typeof data !== 'object' || data === null) {
+                console.error("Validation Error: Data is not an object or is null.");
+                return false;
             }
-        }
-
 
-        // OPC_UA UI 테이블 렌더링
-        const opcUaFieldList = document.getElementById('opcua-field-list');
-        const opcUaRowTemplate = document.getElementById('opcua-row-template');
-        if (opcUaFieldList && opcUaRowTemplate) {
-            opcUaFieldList.innerHTML = '';
-            if (Array.isArray(register.OPC_UA) && register.OPC_UA.length > 0) {
-                register.OPC_UA.forEach(field => {
-                    const newRow = opcUaRowTemplate.content.cloneNode(true);
-                    newRow.querySelector('.opcua-field-display').textContent = field.field ?? '';
-                    newRow.querySelector('.opcua-addr-display').textContent = field.addr ?? '';
-                    newRow.querySelector('.opcua-ns-display').textContent = field.ns ?? '';
-                    newRow.querySelector('.opcua-odt-display').textContent = field.odt ?? '';
-                    newRow.querySelector('.opcua-dv-display').textContent = field.dv ?? '';
-                    newRow.querySelector('.opcua-shift-display').textContent = field.shift ?? '';
-                    newRow.querySelector('.opcua-expr-display').textContent = field.expr ?? '';
-                    newRow.querySelector('.opcua-mask-display').textContent = field.mask ?? '';
-                    opcUaFieldList.appendChild(newRow);
-                });
-            } else {
-                // OPC_UA 데이터가 없으면 빈 행 하나 추가
-                const newRow = opcUaRowTemplate.content.cloneNode(true);
-                opcUaFieldList.appendChild(newRow);
-            }
-        }
+            // RegisterDTO의 필수 필드 (백엔드 snake_case와 일치시키세요)
+            const topLevelRequiredFields = [
+                'protocol',
+                'analog_input_level',
+                'can_input',
+                'device_type',
+                'dr_on',
+                'equipment',
+                'two_byte',
+                'four_byte',
+                'speed_data_source',
+                'version',
+                'equipment_id',
+                'meid',
+                'heading_on',
+                'heading_imu_on',
+                'fixmode_on'
 
-        // CAN 테이블 렌더링
-        const canFieldList = document.getElementById('can-field-list');
-        const canRowTemplate = document.getElementById('can-row-template');
-        canFieldList.innerHTML = '';
-        if (Array.isArray(register.CAN) && register.CAN.length > 0) {
-            register.CAN.forEach(field => {
-                const newRow = canRowTemplate.content.cloneNode(true);
-                newRow.querySelector('.can-field-display').textContent = field.field ?? '';
-                newRow.querySelector('.can-id-display').textContent = field.id ?? '';
-                newRow.querySelector('.can-odt-display').textContent = field.odt ?? '';
-                newRow.querySelector('.can-dv-display').textContent = field.dv ?? '';
-                newRow.querySelector('.can-shift-display').textContent = field.shift ?? '';
-                newRow.querySelector('.can-expr-display').textContent = field.expr ?? '';
-                newRow.querySelector('.can-mask-display').textContent = field.mask ?? '';
-                canFieldList.appendChild(newRow);
-            });
-        } else {
-            const newRow = canRowTemplate.content.cloneNode(true);
-            canFieldList.appendChild(newRow);
-        }
+            ];
 
-    }
+            // 2. 모든 최상위 필수 필드가 존재하는지 확인
+            for (const field of topLevelRequiredFields) {
+                if (!data.hasOwnProperty(field)) {
+                    console.error(`Validation Error: Missing required top-level field: '${field}'`);
+                    return false;
+                }
+            }
 
+            // 3. 각 필드의 값 타입 및 유효성 검증
 
-    function collectData() {
-        const res = { ...data };
-
-        res.wifi_static = document.querySelector('input[name="ipMode"]:checked')?.value === 'static'
-            ? 'on' : 'off';
+            // protocol 필드 유효성 검사
+            const validProtocols = ['MODBUS', 'OPC_UA', 'CAN', 'NONE'];
+            if (typeof data.protocol !== 'string' || !validProtocols.includes(data.protocol)) {
+                console.error(`Validation Error: Invalid or missing 'protocol' field. Expected one of ${validProtocols.join(', ')}, got '${data.protocol}'`);
+                return false;
+            }
 
-        // 일반 input/select 처리
-        for (const k in res) {
-            const el = document.getElementById(k);
-            if (el) {
-                const val = el.value.trim();
-                // can_baudrate, rs485_baudrate는 숫자 or null
-                if (['can_baudrate', 'rs485_baudrate'].includes(k)) {
-                    res[k] = val === '' ? null : Number(val);
-                } else {
-                    res[k] = val;
+            // ON/OFF 상태를 나타내는 필드 검사
+            const boolLikeFields = ['dr_on', 'heading_on', 'heading_imu_on', 'fixmode_on'];
+            for (const field of boolLikeFields) {
+                if (typeof data[field] !== 'string' || (data[field] !== 'on' && data[field] !== 'off')) {
+                    console.error(`Validation Error: Invalid value for boolean-like field '${field}'. Expected 'ON' or 'OFF', got '${data[field]}'`);
+                    return false;
                 }
             }
-        }
 
-        // IMU select → 축·부호 분리
-        ['x', 'y', 'z'].forEach(a => {
-            const { axis, sign } = axisValueToPair(document.getElementById(`imu_remap_${a}`).value);
-            res[`imu_remap_${a}`] = axis;
-            res[`imu_remap_${a}_sign`] = sign;
-        });
+            // 기타 최상위 필드의 타입 검사 (예시, 필요에 따라 추가)
+            if (typeof data.analog_input_level !== 'string' && typeof data.analog_input_level !== 'number') {
+                console.error("Validation Error: 'analog_input_level' is not a string or number.");
+                return false;
+            }
 
-        // SSID 배열
-        res.WIFI_SSID = gatherSsidRows();
 
-        return res;
-    }
+            // 리스트 내부 필드 유효성 검사
 
-    function collectConfigData() {
-        const collectedRegister = {...lastLoadedRegisterData};
-        // configIdMap을 순회하며 HTML ID로부터 값을 가져와 DTO 필드명에 매핑
-        for (const htmlId in configIdMap) {
-            const dtoKey = configIdMap[htmlId];
-            const el = document.getElementById(htmlId);
-            if (el) {
-                collectedRegister[dtoKey] = el.value !== null && el.value !== undefined ? el.value.trim() : '';
-            }
-        }
-        // 체크박스 필드 (HTML ID와 DTO 필드명이 같음)
-        ['ai0', 'ai1', 'ai2', 'ai3', 'di0', 'di1', 'di2', 'di3'].forEach(id => {
-            const el = document.getElementById(id);
-            if (el && el.type === 'checkbox') {
-                collectedRegister[id] = el.checked ? "1" : "0";
+            // MODBUS 리스트 검증
+            if (data.protocol === 'MODBUS') {
+                // protocol이 'MODBUS'일 경우, MODBUS 배열은 필수
+                if (!data.hasOwnProperty('MODBUS') || !Array.isArray(data.MODBUS)) {
+                    console.error("Validation Error: 'MODBUS' array is required and must be an array when protocol is 'MODBUS'.");
+                    return false;
+                }
+                // MODBUS 배열 내용 유효성 검사
+                const modbusRequiredFields = ['field', 'idt', 'addr', 'odt', 'dv'];
+                for (const [index, item] of data.MODBUS.entries()) {
+                    if (typeof item !== 'object' || item === null) {
+                        console.error(`Validation Error: MODBUS item at index ${index} is not an object.`);
+                        return false;
+                    }
+                    for (const field of modbusRequiredFields) {
+                        if (!item.hasOwnProperty(field) || String(item[field]).trim() === '') {
+                            console.error(`Validation Error: MODBUS item at index ${index} missing or empty required field: '${field}'`);
+                            return false;
+                        }
+                    }
+                }
             } else {
-                if (collectedRegister[id] === undefined) {
-                    collectedRegister[id] = "0";
+                // protocol이 'MODBUS'가 아닌 경우, MODBUS 배열은 존재하지 않거나 빈 배열이어야 함
+                if (data.hasOwnProperty('MODBUS') && data.MODBUS.length > 0) {
+                    console.error("Validation Error: 'MODBUS' array must be empty or absent when protocol is not 'MODBUS'.");
+                    return false;
+                }
+                // 만약 존재한다면 배열 타입이어야 함
+                if (data.hasOwnProperty('MODBUS') && !Array.isArray(data.MODBUS)) {
+                    console.error("Validation Error: 'MODBUS' field must be an array if present, even when protocol is not 'MODBUS'.");
+                    return false;
                 }
             }
-        });
-        // MODBUS 테이블 수집 (빈 값은 필드에서 제외)
-        const modbusRows = document.querySelectorAll('#modbus-field-list tr');
-        collectedRegister.MODBUS = [];
-        modbusRows.forEach(row => {
-            const field = row.querySelector('.field-display')?.textContent.trim();
-            if (field) {
-                const obj = {};
-                obj.field = field;
-                const addr = row.querySelector('.addr-display')?.textContent.trim();
-                const idt = row.querySelector('.idt-display')?.textContent.trim();
-                const odt = row.querySelector('.odt-display')?.textContent.trim();
-                const dv = row.querySelector('.dv-display')?.textContent.trim();
-                const shift = row.querySelector('.shift-display')?.textContent.trim();
-                const expr = row.querySelector('.expr-display')?.textContent.trim();
-                const mask = row.querySelector('.mask-display')?.textContent.trim();
-                if (addr) obj.addr = addr;
-                if (idt) obj.idt = idt;
-                if (odt) obj.odt = odt;
-                if (dv) obj.dv = dv;
-                if (shift) obj.shift = shift;
-                if (expr) obj.expr = expr;
-                if (mask) obj.mask = mask;
-                collectedRegister.MODBUS.push(obj);
-            }
-        });
-        // OPC_UA 테이블 수집 (빈 값은 필드에서 제외)
-        const opcuaRows = document.querySelectorAll('#opcua-field-list tr');
-        collectedRegister.OPC_UA = [];
-        opcuaRows.forEach(row => {
-            const field = row.querySelector('.opcua-field-display')?.textContent.trim();
-            if (field) {
-                const obj = {};
-                obj.field = field;
-                const addr = row.querySelector('.opcua-addr-display')?.textContent.trim();
-                const ns = row.querySelector('.opcua-ns-display')?.textContent.trim();
-                const odt = row.querySelector('.opcua-odt-display')?.textContent.trim();
-                const dv = row.querySelector('.opcua-dv-display')?.textContent.trim();
-                const shift = row.querySelector('.opcua-shift-display')?.textContent.trim();
-                const expr = row.querySelector('.opcua-expr-display')?.textContent.trim();
-                const mask = row.querySelector('.opcua-mask-display')?.textContent.trim();
-                if (addr) obj.addr = addr;
-                if (ns) obj.ns = ns;
-                if (odt) obj.odt = odt;
-                if (dv) obj.dv = dv;
-                if (shift) obj.shift = shift;
-                if (expr) obj.expr = expr;
-                if (mask) obj.mask = mask;
-                collectedRegister.OPC_UA.push(obj);
-            }
-        });
-        // CAN 테이블 수집 (빈 값은 필드에서 제외)
-        const canRows = document.querySelectorAll('#can-field-list tr');
-        collectedRegister.CAN = [];
-        canRows.forEach(row => {
-            const field = row.querySelector('.can-field-display')?.textContent.trim();
-            if (field) {
-                const obj = {};
-                obj.field = field;
-                const id = row.querySelector('.can-id-display')?.textContent.trim();
-                const odt = row.querySelector('.can-odt-display')?.textContent.trim();
-                const dv = row.querySelector('.can-dv-display')?.textContent.trim();
-                const shift = row.querySelector('.can-shift-display')?.textContent.trim();
-                const expr = row.querySelector('.can-expr-display')?.textContent.trim();
-                const mask = row.querySelector('.can-mask-display')?.textContent.trim();
-                if (id) obj.id = id;
-                if (odt) obj.odt = odt;
-                if (dv) obj.dv = dv;
-                if (shift) obj.shift = shift;
-                if (expr) obj.expr = expr;
-                if (mask) obj.mask = mask;
-                collectedRegister.CAN.push(obj);
-            }
-        });
-        return collectedRegister;
-    }
-
-    document.addEventListener('DOMContentLoaded', () => {
-        // 페이지 로드 시 자동으로 JSON 파일들 로드
-        loadInitialData();
-
-        // Device 파일 업로드
-        // 모든 파일 업로드 래퍼 섹션을 가져옵니다.
-        const fileUploadWrappersDevice = document.querySelectorAll('.file-upload-wrapper-device');
-
-        fileUploadWrappersDevice.forEach(wrapper => {
-            // 현재 래퍼 내에서 input[type="file"]과 버튼을 찾습니다.
-            const uploadDeviceFileInput = wrapper.querySelector('.upload-input-device');
-            const selectDeviceFileBtn = wrapper.querySelector('.select-file-btn-device');
 
-            // 해당 래퍼의 data 속성들을 가져옵니다.
-            const expectedDeviceFileName = wrapper.dataset.expectedFilename;
-            const uploadDeviceUrl = wrapper.dataset.uploadUrl;
-            const getDeviceUrl = wrapper.dataset.getUrl;
-            const DeviceFileType = wrapper.dataset.fileType;
 
-            // null 체크 (요소가 존재하지 않을 수도 있는 경우를 대비)
-            if (!uploadDeviceFileInput || !selectDeviceFileBtn) {
-                console.warn(`File upload elements not found in wrapper for type: ${DeviceFileType}`);
-                return;
+            // OPC_UA 리스트 검증
+            if (data.protocol === 'OPC_UA') {
+                // protocol이 'OPC_UA'일 경우, OPC_UA 배열은 필수
+                if (!data.hasOwnProperty('OPC_UA') || !Array.isArray(data.OPC_UA)) {
+                    console.error("Validation Error: 'OPC_UA' array is required and must be an array when protocol is 'OPC_UA'.");
+                    return false;
+                }
+                // OPC_UA 배열 내용 유효성 검사
+                const opcUaRequiredFields = ['field', 'ns', 'addr', 'odt', 'dv'];
+                for (const [index, item] of data.OPC_UA.entries()) {
+                    if (typeof item !== 'object' || item === null) {
+                        console.error(`Validation Error: OPC_UA item at index ${index} is not an object.`);
+                        return false;
+                    }
+                    for (const field of opcUaRequiredFields) {
+                        if (!item.hasOwnProperty(field) || String(item[field]).trim() === '') {
+                            console.error(`Validation Error: OPC_UA item at index ${index} missing or empty required field: '${field}'`);
+                            return false;
+                        }
+                    }
+                }
+            } else {
+                // protocol이 'OPC_UA'가 아닌 경우, OPC_UA 배열은 존재하지 않거나 빈 배열이어야 함
+                if (data.hasOwnProperty('OPC_UA') && data.OPC_UA.length > 0) {
+                    console.error("Validation Error: 'OPC_UA' array must be empty or absent when protocol is not 'OPC_UA'.");
+                    return false;
+                }
+                // 만약 존재한다면 배열 타입이어야 함
+                if (data.hasOwnProperty('OPC_UA') && !Array.isArray(data.OPC_UA)) {
+                    console.error("Validation Error: 'OPC_UA' field must be an array if present, even when protocol is not 'OPC_UA'.");
+                    return false;
+                }
             }
 
-            // "파일 선택" 버튼 클릭 시 숨겨진 input[type="file"] 클릭 이벤트 발생
-            selectDeviceFileBtn.addEventListener('click', () => {
-                uploadDeviceFileInput.value = ''; // 이전에 선택된 파일 초기화
-                uploadDeviceFileInput.click();
-            });
 
-            // 파일 선택 시 (change 이벤트 발생) 바로 업로드 로직 시작
-            uploadDeviceFileInput.addEventListener('change', async (event) => {
-                if (event.target.files.length === 0) {
-                    return;
+            // CAN 리스트 검증 (can_input이 'on'인 경우 필수 - protocol 값과는 독립적)
+            if (data.can_input.toLowerCase() === 'on') {
+                if (!data.hasOwnProperty('CAN') || !Array.isArray(data.CAN)) {
+                    console.error("Validation Error: 'CAN' is required when can_input is 'on', and must be an array.");
+                    return false;
                 }
-
-                const selectedDeviceFile = event.target.files[0];
-                const DeviceFileName = selectedDeviceFile.name;
-
-                // 파일명 검증 (data-expected-filename 사용)
-                if (DeviceFileName !== expectedDeviceFileName){
-                    alert(`Invalid file.'${expectedDeviceFileName}' Please select a file. Current file: ${DeviceFileName} `);
-                    uploadDeviceFileInput.value = ''; // 잘못된 파일 선택 시 input 초기화
-                    return;
+                const canRequiredFields = ['field', 'id', 'odt', 'dv'];
+                for (const [index, item] of data.CAN.entries()) {
+                    if (typeof item !== 'object' || item === null) {
+                        console.error(`Validation Error: CAN item at index ${index} is not an object.`);
+                        return false;
+                    }
+                    for (const field of canRequiredFields) {
+                        if (!item.hasOwnProperty(field) || String(item[field]).trim() === '') {
+                            console.error(`Validation Error: CAN item at index ${index} missing or empty required field: '${field}'`);
+                            return false;
+                        }
+                    }
                 }
+            } else {
+                // can_input이 'off'일 경우 CAN이 존재하면 배열이어야 함 (선택 사항)
+                if (data.hasOwnProperty('CAN') && data.CAN.length > 0) {
+                    console.error("Validation Error: 'CAN' array must be empty or absent when can_input is 'off'.");
+                    return false;
+                }
+                if (data.hasOwnProperty('CAN') && !Array.isArray(data.CAN)) {
+                    console.error("Validation Error: 'CAN' field should be an array if present, even when can_input is 'off'.");
+                    return false;
+                }
+            }
 
-                const reader = new FileReader();
-
-                reader.onload = async (e) => {
-                    try {
-                        const DeviceFileContent = e.target.result;
-                        const jsonData = JSON.parse(DeviceFileContent);
-
-                        // 백엔드 저장 API 호출 (data-upload-url 사용)
-                        const response = await fetch(uploadDeviceUrl, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(jsonData)
-                        });
-
-                        if (!response.ok) {
-                            const errorText = await response.text();
-                            throw new Error(`File upload failed: ${response.status} ${response.statusText} - ${errorText}`);
-                        }
-
-                        const result = await response.json();
-
-                        if (result.result && result.result.result_code === 200) {
-                            alert(`File uploaded to Device successfully (${DeviceFileType})`);
-                            console.log(`Upload successful for ${DeviceFileType}:`, result);
-
-                            // 업로드 성공 후 최신 데이터를 Device에서 다시 불러와 UI 업데이트 (data-get-url 사용)
-                            // loadFromRegisterJson은 Register 데이터만 처리하는 함수이므로,
-                            // 만약 Modbus/OPCUA/CAN 데이터 로드 함수가 별도로 있다면 여기서 조건부 호출 필요
-                            fetch(getDeviceUrl)
-                                .then(res => res.json())
-                                .then(apiResponseData => {
-                                    if (apiResponseData && apiResponseData.body) {
-                                        // 여기도 fileType에 따라 다른 load 함수를 호출해야 할 수 있습니다.
-                                        // 현재는 모든 파일이 Register 설정이라고 가정하여 loadFromRegisterJson 호출
-                                        loadFromData(apiResponseData.body);
-                                        console.log(`UI updated with newly uploaded ${DeviceFileType} data.`);
-                                    } else {
-                                        console.warn(`Failed to reload ${DeviceFileType} data after upload: no response body`);
-                                    }
-                                })
-                                .catch(err => console.error(`Error reloading ${DeviceFileType} data after upload:`, err));
+            // 모든 검사를 통과하면 유효함
+            return true;
+        }
+        const list = document.getElementById('modbus-field-list');
+        // 처음에 행이 없으면 빈 행을 하나 추가
+        if (list.children.length === 0) {
+            const modbusRowTemplate = document.getElementById('modbus-row-template');
+            if (modbusRowTemplate) {
+                const newRow = modbusRowTemplate.content.cloneNode(true);
+                list.appendChild(newRow);
+            }
+        }
+        let selectedRow = null;
+        document.getElementById('modbus-field-list').addEventListener('click', function (e) {
+            let tr = e.target.closest('tr');
+            if (!tr) return;
 
-                            uploadDeviceFileInput.value = ''; // input 초기화 (다음 업로드 위함)
+            Array.from(this.children).forEach(row => row.classList.remove('selected-row'));
+            tr.classList.add('selected-row');
+            selectedRow = tr;
 
-                        } else {
-                            alert(`File upload failed: ${result.result ? result.result.result_message : 'Unknown error'} (${DeviceFileType})`);
-                            console.error(`Upload failed for ${DeviceFileType} with backend error:`, result);
-                            uploadDeviceFileInput.value = '';
-                        }
+            document.getElementById('modbus_field_input').value = tr.querySelector('.field-display').textContent;
+            document.getElementById('modbus_addr_input').value = tr.querySelector('.addr-display').textContent;
+            document.getElementById('modbus_idt_input').value = tr.querySelector('.idt-display').textContent;
+            document.getElementById('modbus_odt_input').value = tr.querySelector('.odt-display').textContent;
+            document.getElementById('modbus_dv_input').value = tr.querySelector('.dv-display').textContent;
+            document.getElementById('modbus_shift_input').value = tr.querySelector('.shift-display').textContent;
+            document.getElementById('modbus_expr_input').value = tr.querySelector('.expr-display').textContent;
+            document.getElementById('modbus_mask_input').value = tr.querySelector('.mask-display').textContent;
+        });
 
-                    } catch (error) {
-                        console.error(`Error uploading file (${DeviceFileType}):`, error);
-                        alert(`Error uploading file: ${error.message} (${DeviceFileType})`);
-                        uploadDeviceFileInput.value = '';
-                    }
-                };
+        const opcUalist = document.getElementById('opcua-field-list');
+        // 처음에 행이 없으면 빈 행을 하나 추가
+        if (opcUalist.children.length === 0) {
+            const opcUaRowTemplate = document.getElementById('opcua-row-template');
+            if (opcUaRowTemplate) {
+                const newRow = opcUaRowTemplate.content.cloneNode(true);
+                opcUalist.appendChild(newRow);
+            }
+        }
+        document.getElementById('opcua-field-list').addEventListener('click', function (e) {
+            let tr = e.target.closest('tr');
+            if (!tr) return;
 
-                reader.onerror = () => {
-                    alert(`An error occurred while reading the file. (${DeviceFileType})`);
-                    console.error(`FileReader error for ${DeviceFileType}:`, reader.error);
-                    uploadDeviceFileInput.value = '';
-                };
+            Array.from(this.children).forEach(row => row.classList.remove('selected-row'));
+            tr.classList.add('selected-row');
+            selectedRow = tr;
 
-                reader.readAsText(selectedDeviceFile);
-            });
+            document.getElementById('opcua_field_input').value = tr.querySelector('.opcua-field-display').textContent;
+            document.getElementById('opcua_addr_input').value = tr.querySelector('.opcua-addr-display').textContent;
+            document.getElementById('opcua_ns_input').value = tr.querySelector('.opcua-ns-display').textContent;
+            document.getElementById('opcua_odt_input').value = tr.querySelector('.opcua-odt-display').textContent;
+            document.getElementById('opcua_dv_input').value = tr.querySelector('.opcua-dv-display').textContent;
+            document.getElementById('opcua_shift_input').value = tr.querySelector('.opcua-shift-display').textContent;
+            document.getElementById('opcua_expr_input').value = tr.querySelector('.opcua-expr-display').textContent;
+            document.getElementById('opcua_mask_input').value = tr.querySelector('.opcua-mask-display').textContent;
         });
 
-        // Protocol 파일 업로드
-        // 모든 파일 업로드 래퍼 섹션을 가져옵니다.
-        const fileUploadWrappers = document.querySelectorAll('.file-upload-wrapper-protocol');
+        const modbusAddBtn = document.getElementById('modbus_add_btn');
+        const modbusFieldList = document.getElementById('modbus-field-list');
+        const modbusRowTemplate = document.getElementById('modbus-row-template');
 
-        fileUploadWrappers.forEach(wrapper => {
-            // 현재 래퍼 내에서 input[type="file"]과 버튼을 찾습니다.
-                const uploadFileInput = wrapper.querySelector('.upload-input-protocol');
-            const selectFileBtn = wrapper.querySelector('.select-file-btn-protocol');
+        if (modbusAddBtn && modbusFieldList && modbusRowTemplate) {
+            modbusAddBtn.addEventListener('click', () => {
+                const field = document.getElementById('modbus_field_input').value;
+                const addr = document.getElementById('modbus_addr_input').value;
+                const idt = document.getElementById('modbus_idt_input').value;
+                const odt = document.getElementById('modbus_odt_input').value;
+                const defaultValue = document.getElementById('modbus_dv_input').value;
+                const shift = document.getElementById('modbus_shift_input').value;
+                const expr = document.getElementById('modbus_expr_input').value;
+                const mask = document.getElementById('modbus_mask_input').value;
 
-            // 해당 래퍼의 data 속성들을 가져옵니다.
-            const expectedFileName = wrapper.dataset.expectedFilename;
-            const uploadUrl = wrapper.dataset.uploadUrl;
-            const getUrl = wrapper.dataset.getUrl;
-            const fileType = wrapper.dataset.fileType; // 'protocol', 'modbus', 'opcua', 'can'
+                const newRow = modbusRowTemplate.content.cloneNode(true);
+                newRow.querySelector('.field-display').textContent = field;
+                newRow.querySelector('.addr-display').textContent = addr;
+                newRow.querySelector('.idt-display').textContent = idt;
+                newRow.querySelector('.odt-display').textContent = odt;
+                newRow.querySelector('.dv-display').textContent = defaultValue;
+                newRow.querySelector('.shift-display').textContent = shift;
+                newRow.querySelector('.expr-display').textContent = expr;
+                newRow.querySelector('.mask-display').textContent = mask;
 
-            // null 체크 (요소가 존재하지 않을 수도 있는 경우를 대비)
-            if (!uploadFileInput || !selectFileBtn) {
-                console.warn(`File upload elements not found in wrapper for type: ${fileType}`);
-                return;
-            }
+                modbusFieldList.appendChild(newRow);
 
-            // "파일 선택" 버튼 클릭 시 숨겨진 input[type="file"] 클릭 이벤트 발생
-            selectFileBtn.addEventListener('click', () => {
-                uploadFileInput.value = ''; // 이전에 선택된 파일 초기화
-                uploadFileInput.click();
+                document.getElementById('modbus_field_input').value = '';
+                document.getElementById('modbus_addr_input').value = '';
+                document.getElementById('modbus_idt_input').value = '';
+                document.getElementById('modbus_odt_input').value = '';
+                document.getElementById('modbus_dv_input').value = '';
+                document.getElementById('modbus_shift_input').value = '';
+                document.getElementById('modbus_expr_input').value = '';
+                document.getElementById('modbus_mask_input').value = '';
             });
+        }
 
-            // 파일 선택 시 (change 이벤트 발생) 바로 업로드 로직 시작
-            uploadFileInput.addEventListener('change', async (event) => {
-                if (event.target.files.length === 0) {
-                    return;
-                }
-
-                const selectedFile = event.target.files[0];
-                const fileName = selectedFile.name;
-
-                // 파일명 검증 (data-expected-filename 사용)
-                if (fileName !== expectedFileName){
-                    alert(`Invalid file. '${expectedFileName}' Please select a file. Current file: ${fileName} `);
-                    uploadFileInput.value = ''; // 잘못된 파일 선택 시 input 초기화
-                    return;
-                }
+        document.getElementById('modbus_modify_btn').onclick = function () {
+            if (!selectedRow) return alert('Please select the row you want to modify');
+            selectedRow.querySelector('.field-display').textContent = document.getElementById('modbus_field_input').value;
+            selectedRow.querySelector('.addr-display').textContent = document.getElementById('modbus_addr_input').value;
+            selectedRow.querySelector('.idt-display').textContent = document.getElementById('modbus_idt_input').value;
+            selectedRow.querySelector('.odt-display').textContent = document.getElementById('modbus_odt_input').value;
+            selectedRow.querySelector('.dv-display').textContent = document.getElementById('modbus_dv_input').value;
+            selectedRow.querySelector('.shift-display').textContent = document.getElementById('modbus_shift_input').value;
+            selectedRow.querySelector('.expr-display').textContent = document.getElementById('modbus_expr_input').value;
+            selectedRow.querySelector('.mask-display').textContent = document.getElementById('modbus_mask_input').value;
+        };
 
-                const reader = new FileReader();
+        // 삭제 버튼
+        document.getElementById('modbus_delete_btn').onclick = function () {
+            if (!selectedRow) return alert('Select the row you want to delete');
+            const list = document.getElementById('modbus-field-list');
+            selectedRow.remove();
+            selectedRow = null;
+            document.querySelectorAll('.modbus-input-area input').forEach(i => i.value = '');
+        };
 
-                reader.onload = async (e) => {
-                    try {
-                        const fileContent = e.target.result;
-                        const jsonData = JSON.parse(fileContent);
+        const opcUaAddBtn = document.getElementById('opcua_add_btn');
+        const opcUaFieldList = document.getElementById('opcua-field-list');
+        const opcUaRowTemplate = document.getElementById('opcua-row-template');
 
-                        // JSON 내용 유효성 검증
-                        // 모든 파일이 Register 설정이라면 isValidRegisterConfig를 그대로 사용
-                        // 만약 파일 타입에 따라 다른 유효성 검사가 필요하다면,
-                        // 여기에 조건부 로직을 추가해야 합니다.
-                        if (!isValidRegisterConfig(jsonData)){ // 예를 들어, isValidModbusConfig(jsonData) 등
-                            alert(`The contents of the selected file are not in a valid ${fileType} setting file format.`);
-                            uploadFileInput.value = '';
-                            return;
-                        }
+        if (opcUaAddBtn && opcUaFieldList && opcUaRowTemplate) {
+            opcUaAddBtn.addEventListener('click', () => {
+                const field = document.getElementById('opcua_field_input').value;
+                const addr = document.getElementById('opcua_addr_input').value;
+                const ns = document.getElementById('opcua_ns_input').value;
+                const odt = document.getElementById('opcua_odt_input').value;
+                const defaultValue = document.getElementById('opcua_dv_input').value;
+                const shift = document.getElementById('opcua_shift_input').value;
+                const expr = document.getElementById('opcua_expr_input').value;
+                const mask = document.getElementById('opcua_mask_input').value;
 
-                        // 백엔드 저장 API 호출 (data-upload-url 사용)
-                        const response = await fetch(uploadUrl, {
-                            method: 'POST',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(jsonData)
-                        });
+                const newRow = opcUaRowTemplate.content.cloneNode(true);
+                newRow.querySelector('.opcua-field-display').textContent = field;
+                newRow.querySelector('.opcua-addr-display').textContent = addr;
+                newRow.querySelector('.opcua-ns-display').textContent = ns;
+                newRow.querySelector('.opcua-odt-display').textContent = odt;
+                newRow.querySelector('.opcua-dv-display').textContent = defaultValue;
+                newRow.querySelector('.opcua-shift-display').textContent = shift;
+                newRow.querySelector('.opcua-expr-display').textContent = expr;
+                newRow.querySelector('.opcua-mask-display').textContent = mask;
 
-                        if (!response.ok) {
-                            const errorText = await response.text();
-                            throw new Error(`File upload failed: ${response.status} ${response.statusText} - ${errorText}`);
-                        }
+                opcUaFieldList.appendChild(newRow);
 
-                        const result = await response.json();
+                document.getElementById('opcua_field_input').value = '';
+                document.getElementById('opcua_addr_input').value = '';
+                document.getElementById('opcua_ns_input').value = '';
+                document.getElementById('opcua_odt_input').value = '';
+                document.getElementById('opcua_dv_input').value = '';
+                document.getElementById('opcua_shift_input').value = '';
+                document.getElementById('opcua_expr_input').value = '';
+                document.getElementById('opcua_mask_input').value = '';
+            });
+        }
 
-                        if (result.result && result.result.result_code === 200) {
-                            alert(`File uploaded to Device successfully (${fileType})`);
-                            console.log(`Upload successful for ${fileType}:`, result);
+        document.getElementById('opcua_modify_btn').onclick = function () {
+            if (!selectedRow) return alert('Please select the row you want to modify');
+            selectedRow.querySelector('.opcua-field-display').textContent = document.getElementById('opcua_field_input').value;
+            selectedRow.querySelector('.opcua-addr-display').textContent = document.getElementById('opcua_addr_input').value;
+            selectedRow.querySelector('.opcua-ns-display').textContent = document.getElementById('opcua_ns_input').value;
+            selectedRow.querySelector('.opcua-odt-display').textContent = document.getElementById('opcua_odt_input').value;
+            selectedRow.querySelector('.opcua-dv-display').textContent = document.getElementById('opcua_dv_input').value;
+            selectedRow.querySelector('.opcua-shift-display').textContent = document.getElementById('opcua_shift_input').value;
+            selectedRow.querySelector('.opcua-expr-display').textContent = document.getElementById('opcua_expr_input').value;
+            selectedRow.querySelector('.opcua-mask-display').textContent = document.getElementById('opcua_mask_input').value;
+        };
 
-                            // 업로드 성공 후 최신 데이터를 Device에서 다시 불러와 UI 업데이트 (data-get-url 사용)
-                            // loadFromRegisterJson은 Register 데이터만 처리하는 함수이므로,
-                            // 만약 Modbus/OPCUA/CAN 데이터 로드 함수가 별도로 있다면 여기서 조건부 호출 필요
-                            fetch(getUrl)
-                                .then(res => res.json())
-                                .then(apiResponseData => {
-                                    if (apiResponseData && apiResponseData.body) {
-                                        // 여기도 fileType에 따라 다른 load 함수를 호출해야 할 수 있습니다.
-                                        // 현재는 모든 파일이 Register 설정이라고 가정하여 loadFromRegisterJson 호출
-                                        loadFromRegisterJson(apiResponseData.body);
-                                        console.log(`UI updated with newly uploaded ${fileType} data.`);
-                                    } else {
-                                        console.warn(`Failed to reload ${fileType} data after upload: no response body`);
-                                    }
-                                })
-                                .catch(err => console.error(`업로드 후 ${fileType} 데이터 재로드 중 오류 발생:`, err));
+        // 삭제 버튼
+        document.getElementById('opcua_delete_btn').onclick = function () {
+            if (!selectedRow) return alert('Select the row you want to delete');
+            const list = document.getElementById('opcua-field-list');
+            selectedRow.remove();
+            selectedRow = null;
+            document.querySelectorAll('.opcua-input-area input').forEach(i => i.value = '');
+        };
 
-                            uploadFileInput.value = ''; // input 초기화 (다음 업로드 위함)
+        // CAN 테이블
+        document.getElementById('can_add_btn').addEventListener('click', () => {
+            const field = document.getElementById('can_field_input').value;
+            const id = document.getElementById('can_id_input').value;
+            const odt = document.getElementById('can_odt_input').value;
+            const dv = document.getElementById('can_dv_input').value;
+            const shift = document.getElementById('can_shift_input').value;
+            const expr = document.getElementById('can_expr_input').value;
+            const mask = document.getElementById('can_mask_input').value;
+            const canRowTemplate = document.getElementById('can-row-template');
+            const newRow = canRowTemplate.content.cloneNode(true);
+            newRow.querySelector('.can-field-display').textContent = field;
+            newRow.querySelector('.can-id-display').textContent = id;
+            newRow.querySelector('.can-odt-display').textContent = odt;
+            newRow.querySelector('.can-dv-display').textContent = dv;
+            newRow.querySelector('.can-shift-display').textContent = shift;
+            newRow.querySelector('.can-expr-display').textContent = expr;
+            newRow.querySelector('.can-mask-display').textContent = mask;
+            canFieldList.appendChild(newRow);
+            document.getElementById('can_field_input').value = '';
+            document.getElementById('can_id_input').value = '';
+            document.getElementById('can_odt_input').value = '';
+            document.getElementById('can_dv_input').value = '';
+            document.getElementById('can_shift_input').value = '';
+            document.getElementById('can_expr_input').value = '';
+            document.getElementById('can_mask_input').value = '';
+        });
+        document.getElementById('can_modify_btn').onclick = function () {
+            if (!selectedRow) return alert('Please select the row you want to modify');
+            selectedRow.querySelector('.can-field-display').textContent = document.getElementById('can_field_input').value;
+            selectedRow.querySelector('.can-id-display').textContent = document.getElementById('can_id_input').value;
+            selectedRow.querySelector('.can-odt-display').textContent = document.getElementById('can_odt_input').value;
+            selectedRow.querySelector('.can-dv-display').textContent = document.getElementById('can_dv_input').value;
+            selectedRow.querySelector('.can-shift-display').textContent = document.getElementById('can_shift_input').value;
+            selectedRow.querySelector('.can-expr-display').textContent = document.getElementById('can_expr_input').value;
+            selectedRow.querySelector('.can-mask-display').textContent = document.getElementById('can_mask_input').value;
+        };
+        document.getElementById('can_delete_btn').onclick = function () {
+            if (!selectedRow) return alert('Select the row you want to delete');
+            const list = document.getElementById('can-field-list');
+            selectedRow.remove();
+            selectedRow = null;
+            document.querySelectorAll('.can-input-area input').forEach(i => i.value = '');
+        };
 
-                        } else {
-                            alert(`File upload failed: ${result.result?result.result_message: 'unknown error'} (${fileType})`);
-                            console.error(`Upload failed for ${fileType} with backend error:`, result);
-                            uploadFileInput.value = '';
-                        }
 
-                    } catch (error) {
-                        alert(`Error uploading file: ${error.message} (${fileType})`);
-                        uploadFileInput.value = '';
-                    }
-                };
+        regProtocolSelect = document.getElementById('reg_protocol');
+        if (regProtocolSelect) {
+            regProtocolSelect.addEventListener('change', () => {
+                toggleProtocolMenus();
+            });
 
-                reader.onerror = () => {
-                    alert(`An error occurred while reading the file. (${fileType})`);
-                    uploadFileInput.value = '';
-                };
+            toggleProtocolMenus();
+        }
 
-                reader.readAsText(selectedFile);
-            });
-        });
+        function saveToConfig() {
+            const deviceData = collectDeviceData();
+            const protocolData = collectProtocolData();
 
-        function isValidRegisterConfig(data) {
-            // 1. data가 객체이고 null이 아닌지 확인
-            if (typeof data !== 'object' || data === null) {
-                console.error("Validation Error: Data is not an object or is null.");
-                return false;
+            if (!isValidRegisterConfig(protocolData)) {
+                alert("Register settings are currently invalid. Cannot be saved.");
+                return;
             }
 
-            // RegisterDTO의 필수 필드 (백엔드 snake_case와 일치시키세요)
-            const topLevelRequiredFields = [
-                'protocol',
-                'analog_input_level',
-                'can_input',
-                'device_type',
-                'dr_on',
-                'equipment',
-                'two_byte',
-                'four_byte',
-                'speed_data_source',
-                'version',
-                'equipment_id',
-                'meid',
-                'heading_on',
-                'heading_imu_on',
-                'fixmode_on'
+            // 두 개의 fetch를 병렬 실행
+            const deviceReq = fetch('http://localhost:8080/setting/device', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(deviceData)
+            });
 
-            ];
+            const protocolReq = fetch('http://localhost:8080/setting/protocol', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(protocolData)
+            });
 
-            // 2. 모든 최상위 필수 필드가 존재하는지 확인
-            for (const field of topLevelRequiredFields) {
-                if (!data.hasOwnProperty(field)) {
-                    console.error(`Validation Error: Missing required top-level field: '${field}'`);
-                    return false;
-                }
-            }
+            // 모든 요청이 성공하면 성공 알림
+            Promise.all([deviceReq, protocolReq])
+                .then(([res1, res2]) => {
+                    if (res1.ok && res2.ok) {
+                        alert('saved successfully');
+                    } else {
+                        alert('save failure');
+                        console.error('device response:', res1.status, 'protocol response:', res2.status);
+                    }
+                })
+                .catch(err => {
+                    console.error('Error during transfer:', err);
+                    alert('save failure');
+                });
+        }
 
-            // 3. 각 필드의 값 타입 및 유효성 검증
 
-            // protocol 필드 유효성 검사
-            const validProtocols = ['MODBUS', 'OPC_UA', 'CAN', 'NONE'];
-            if (typeof data.protocol !== 'string' || !validProtocols.includes(data.protocol)) {
-                console.error(`Validation Error: Invalid or missing 'protocol' field. Expected one of ${validProtocols.join(', ')}, got '${data.protocol}'`);
-                return false;
-            }
 
-            // ON/OFF 상태를 나타내는 필드 검사
-            const boolLikeFields = ['dr_on', 'heading_on', 'heading_imu_on', 'fixmode_on'];
-            for (const field of boolLikeFields) {
-                if (typeof data[field] !== 'string' || (data[field] !== 'on' && data[field] !== 'off')) {
-                    console.error(`Validation Error: Invalid value for boolean-like field '${field}'. Expected 'ON' or 'OFF', got '${data[field]}'`);
-                    return false;
-                }
-            }
+        document.querySelectorAll('.save-file').forEach(btn=>btn.addEventListener('click', () => {saveToConfig()}))
 
-            // 기타 최상위 필드의 타입 검사 (예시, 필요에 따라 추가)
-            if (typeof data.analog_input_level !== 'string' && typeof data.analog_input_level !== 'number') {
-                console.error("Validation Error: 'analog_input_level' is not a string or number.");
-                return false;
-            }
 
+        document.querySelectorAll('.download-device-file').forEach(btn=>{btn.addEventListener('click', () => {
+            downloadDeviceJson(collectDeviceData(data));
+        })})
 
-            // 리스트 내부 필드 유효성 검사
+        document.querySelectorAll('.download-protocol-file').forEach(btn=>{btn.addEventListener('click', () => {
+            downloadProtocolJson(collectProtocolData(data));
+        })})
 
-            // MODBUS 리스트 검증
-            if (data.protocol === 'MODBUS') {
-                // protocol이 'MODBUS'일 경우, MODBUS 배열은 필수
-                if (!data.hasOwnProperty('MODBUS') || !Array.isArray(data.MODBUS)) {
-                    console.error("Validation Error: 'MODBUS' array is required and must be an array when protocol is 'MODBUS'.");
-                    return false;
-                }
-                // MODBUS 배열 내용 유효성 검사
-                const modbusRequiredFields = ['field', 'idt', 'addr', 'odt', 'dv'];
-                for (const [index, item] of data.MODBUS.entries()) {
-                    if (typeof item !== 'object' || item === null) {
-                        console.error(`Validation Error: MODBUS item at index ${index} is not an object.`);
-                        return false;
-                    }
-                    for (const field of modbusRequiredFields) {
-                        if (!item.hasOwnProperty(field) || String(item[field]).trim() === '') {
-                            console.error(`Validation Error: MODBUS item at index ${index} missing or empty required field: '${field}'`);
-                            return false;
-                        }
-                    }
-                }
-            } else {
-                // protocol이 'MODBUS'가 아닌 경우, MODBUS 배열은 존재하지 않거나 빈 배열이어야 함
-                if (data.hasOwnProperty('MODBUS') && data.MODBUS.length > 0) {
-                    console.error("Validation Error: 'MODBUS' array must be empty or absent when protocol is not 'MODBUS'.");
-                    return false;
-                }
-                // 만약 존재한다면 배열 타입이어야 함
-                if (data.hasOwnProperty('MODBUS') && !Array.isArray(data.MODBUS)) {
-                    console.error("Validation Error: 'MODBUS' field must be an array if present, even when protocol is not 'MODBUS'.");
-                    return false;
-                }
-            }
 
+        document.getElementById('reg_can_input')?.addEventListener('change', toggleProtocolMenus);
 
-            // OPC_UA 리스트 검증
-            if (data.protocol === 'OPC_UA') {
-                // protocol이 'OPC_UA'일 경우, OPC_UA 배열은 필수
-                if (!data.hasOwnProperty('OPC_UA') || !Array.isArray(data.OPC_UA)) {
-                    console.error("Validation Error: 'OPC_UA' array is required and must be an array when protocol is 'OPC_UA'.");
-                    return false;
-                }
-                // OPC_UA 배열 내용 유효성 검사
-                const opcUaRequiredFields = ['field', 'ns', 'addr', 'odt', 'dv'];
-                for (const [index, item] of data.OPC_UA.entries()) {
-                    if (typeof item !== 'object' || item === null) {
-                        console.error(`Validation Error: OPC_UA item at index ${index} is not an object.`);
-                        return false;
-                    }
-                    for (const field of opcUaRequiredFields) {
-                        if (!item.hasOwnProperty(field) || String(item[field]).trim() === '') {
-                            console.error(`Validation Error: OPC_UA item at index ${index} missing or empty required field: '${field}'`);
-                            return false;
-                        }
-                    }
-                }
-            } else {
-                // protocol이 'OPC_UA'가 아닌 경우, OPC_UA 배열은 존재하지 않거나 빈 배열이어야 함
-                if (data.hasOwnProperty('OPC_UA') && data.OPC_UA.length > 0) {
-                    console.error("Validation Error: 'OPC_UA' array must be empty or absent when protocol is not 'OPC_UA'.");
-                    return false;
-                }
-                // 만약 존재한다면 배열 타입이어야 함
-                if (data.hasOwnProperty('OPC_UA') && !Array.isArray(data.OPC_UA)) {
-                    console.error("Validation Error: 'OPC_UA' field must be an array if present, even when protocol is not 'OPC_UA'.");
-                    return false;
-                }
-            }
-
-
-            // CAN 리스트 검증 (can_input이 'on'인 경우 필수 - protocol 값과는 독립적)
-            if (data.can_input.toLowerCase() === 'on') {
-                if (!data.hasOwnProperty('CAN') || !Array.isArray(data.CAN)) {
-                    console.error("Validation Error: 'CAN' is required when can_input is 'on', and must be an array.");
-                    return false;
-                }
-                const canRequiredFields = ['field', 'id', 'odt', 'dv'];
-                for (const [index, item] of data.CAN.entries()) {
-                    if (typeof item !== 'object' || item === null) {
-                        console.error(`Validation Error: CAN item at index ${index} is not an object.`);
-                        return false;
-                    }
-                    for (const field of canRequiredFields) {
-                        if (!item.hasOwnProperty(field) || String(item[field]).trim() === '') {
-                            console.error(`Validation Error: CAN item at index ${index} missing or empty required field: '${field}'`);
-                            return false;
-                        }
-                    }
-                }
-            } else {
-                // can_input이 'off'일 경우 CAN이 존재하면 배열이어야 함 (선택 사항)
-                if (data.hasOwnProperty('CAN') && data.CAN.length > 0) {
-                    console.error("Validation Error: 'CAN' array must be empty or absent when can_input is 'off'.");
-                    return false;
-                }
-                if (data.hasOwnProperty('CAN') && !Array.isArray(data.CAN)) {
-                    console.error("Validation Error: 'CAN' field should be an array if present, even when can_input is 'off'.");
-                    return false;
-                }
-            }
-
-            // 모든 검사를 통과하면 유효함
-            return true;
-        }
-        const list = document.getElementById('modbus-field-list');
-        // 처음에 행이 없으면 빈 행을 하나 추가
-        if (list.children.length === 0) {
-            const modbusRowTemplate = document.getElementById('modbus-row-template');
-            if (modbusRowTemplate) {
-                const newRow = modbusRowTemplate.content.cloneNode(true);
-                list.appendChild(newRow);
+        const canFieldList = document.getElementById('can-field-list');
+        if (canFieldList.children.length === 0) {
+            const canRowTemplate = document.getElementById('can-row-template');
+            if (canRowTemplate) {
+                const newRow = canRowTemplate.content.cloneNode(true);
+                canFieldList.appendChild(newRow);
             }
         }
-        let selectedRow = null;
-        document.getElementById('modbus-field-list').addEventListener('click', function (e) {
+        // CAN row 클릭 시 선택 표시 및 입력폼에 값 반영
+        canFieldList.addEventListener('click', function (e) {
             let tr = e.target.closest('tr');
             if (!tr) return;
-
             Array.from(this.children).forEach(row => row.classList.remove('selected-row'));
             tr.classList.add('selected-row');
             selectedRow = tr;
+            document.getElementById('can_field_input').value = tr.querySelector('.can-field-display').textContent;
+            document.getElementById('can_id_input').value = tr.querySelector('.can-id-display').textContent;
+            document.getElementById('can_odt_input').value = tr.querySelector('.can-odt-display').textContent;
+            document.getElementById('can_dv_input').value = tr.querySelector('.can-dv-display').textContent;
+            document.getElementById('can_shift_input').value = tr.querySelector('.can-shift-display').textContent;
+            document.getElementById('can_expr_input').value = tr.querySelector('.can-expr-display').textContent;
+            document.getElementById('can_mask_input').value = tr.querySelector('.can-mask-display').textContent;
+        });
+    });
 
-            document.getElementById('modbus_field_input').value = tr.querySelector('.field-display').textContent;
-            document.getElementById('modbus_addr_input').value = tr.querySelector('.addr-display').textContent;
-            document.getElementById('modbus_idt_input').value = tr.querySelector('.idt-display').textContent;
-            document.getElementById('modbus_odt_input').value = tr.querySelector('.odt-display').textContent;
-            document.getElementById('modbus_dv_input').value = tr.querySelector('.dv-display').textContent;
-            document.getElementById('modbus_shift_input').value = tr.querySelector('.shift-display').textContent;
-            document.getElementById('modbus_expr_input').value = tr.querySelector('.expr-display').textContent;
-            document.getElementById('modbus_mask_input').value = tr.querySelector('.mask-display').textContent;
+    document.querySelectorAll('.nav-items button').forEach(btn => {
+        btn.addEventListener('click', () => {
+            showPage(btn.dataset.page);
         });
+    });
 
-        const opcUalist = document.getElementById('opcua-field-list');
-        // 처음에 행이 없으면 빈 행을 하나 추가
-        if (opcUalist.children.length === 0) {
-            const opcUaRowTemplate = document.getElementById('opcua-row-template');
-            if (opcUaRowTemplate) {
-                const newRow = opcUaRowTemplate.content.cloneNode(true);
-                opcUalist.appendChild(newRow);
-            }
+    document.getElementById('add-ssid').addEventListener('click', addSsidRow);
+
+    document.getElementById('delete-ssid').addEventListener('click', () => {
+        if (ssidList.children.length > 1) {
+            ssidList.removeChild(ssidList.lastElementChild);
+        } else if (ssidList.children.length === 1) {
+            const firstRow = ssidList.firstElementChild;
+            firstRow.querySelector('.ssid-name').value = '';
+            firstRow.querySelector('.ssid-pw').value = '';
+            firstRow.querySelector('select').value = 'none';
         }
-        document.getElementById('opcua-field-list').addEventListener('click', function (e) {
-            let tr = e.target.closest('tr');
-            if (!tr) return;
+    })
 
-            Array.from(this.children).forEach(row => row.classList.remove('selected-row'));
-            tr.classList.add('selected-row');
-            selectedRow = tr;
 
-            document.getElementById('opcua_field_input').value = tr.querySelector('.opcua-field-display').textContent;
-            document.getElementById('opcua_addr_input').value = tr.querySelector('.opcua-addr-display').textContent;
-            document.getElementById('opcua_ns_input').value = tr.querySelector('.opcua-ns-display').textContent;
-            document.getElementById('opcua_odt_input').value = tr.querySelector('.opcua-odt-display').textContent;
-            document.getElementById('opcua_dv_input').value = tr.querySelector('.opcua-dv-display').textContent;
-            document.getElementById('opcua_shift_input').value = tr.querySelector('.opcua-shift-display').textContent;
-            document.getElementById('opcua_expr_input').value = tr.querySelector('.opcua-expr-display').textContent;
-            document.getElementById('opcua_mask_input').value = tr.querySelector('.opcua-mask-display').textContent;
-        });
+    /*-----device input데이터 받는 함수------*/
+    function collectDeviceData() {
+        const res = { ...data };
 
-        const modbusAddBtn = document.getElementById('modbus_add_btn');
-        const modbusFieldList = document.getElementById('modbus-field-list');
-        const modbusRowTemplate = document.getElementById('modbus-row-template');
+        res.wifi_static = document.querySelector('input[name="ipMode"]:checked')?.value === 'static'
+            ? 'on' : 'off';
 
-        if (modbusAddBtn && modbusFieldList && modbusRowTemplate) {
-            modbusAddBtn.addEventListener('click', () => {
-                const field = document.getElementById('modbus_field_input').value;
-                const addr = document.getElementById('modbus_addr_input').value;
-                const idt = document.getElementById('modbus_idt_input').value;
-                const odt = document.getElementById('modbus_odt_input').value;
-                const defaultValue = document.getElementById('modbus_dv_input').value;
-                const shift = document.getElementById('modbus_shift_input').value;
-                const expr = document.getElementById('modbus_expr_input').value;
-                const mask = document.getElementById('modbus_mask_input').value;
+        // 일반 input/select 처리
+        for (const k in res) {
+            const el = document.getElementById(k);
+            if (el) {
+                const val = el.value.trim();
+                // can_baudrate, rs485_baudrate는 숫자 or null
+                if (['can_baudrate', 'rs485_baudrate'].includes(k)) {
+                    res[k] = val === '' ? null : Number(val);
+                } else {
+                    res[k] = val;
+                }
+            }
+        }
 
-                const newRow = modbusRowTemplate.content.cloneNode(true);
-                newRow.querySelector('.field-display').textContent = field;
-                newRow.querySelector('.addr-display').textContent = addr;
-                newRow.querySelector('.idt-display').textContent = idt;
-                newRow.querySelector('.odt-display').textContent = odt;
-                newRow.querySelector('.dv-display').textContent = defaultValue;
-                newRow.querySelector('.shift-display').textContent = shift;
-                newRow.querySelector('.expr-display').textContent = expr;
-                newRow.querySelector('.mask-display').textContent = mask;
+        // IMU select → 축·부호 분리
+        ['x', 'y', 'z'].forEach(a => {
+            const { axis, sign } = axisValueToPair(document.getElementById(`imu_remap_${a}`).value);
+            res[`imu_remap_${a}`] = axis;
+            res[`imu_remap_${a}_sign`] = sign;
+        });
 
-                modbusFieldList.appendChild(newRow);
+        // SSID 배열
+        res.WIFI_SSID = gatherSsidRows();
 
-                document.getElementById('modbus_field_input').value = '';
-                document.getElementById('modbus_addr_input').value = '';
-                document.getElementById('modbus_idt_input').value = '';
-                document.getElementById('modbus_odt_input').value = '';
-                document.getElementById('modbus_dv_input').value = '';
-                document.getElementById('modbus_shift_input').value = '';
-                document.getElementById('modbus_expr_input').value = '';
-                document.getElementById('modbus_mask_input').value = '';
-            });
+        return res;
+    }
+    /*-----------------------------------------------------*/
+
+
+    /*--------프로토콜 input 데이터 받는 함수-----------*/
+    function collectProtocolData() {
+        const collectedRegister = {...lastLoadedRegisterData};
+        // configIdMap을 순회하며 HTML ID로부터 값을 가져와 DTO 필드명에 매핑
+        for (const htmlId in configIdMap) {
+            const dtoKey = configIdMap[htmlId];
+            const el = document.getElementById(htmlId);
+            if (el) {
+                collectedRegister[dtoKey] = el.value !== null && el.value !== undefined ? el.value.trim() : '';
+            }
         }
+        // 체크박스 필드 (HTML ID와 DTO 필드명이 같음)
+        ['ai0', 'ai1', 'ai2', 'ai3', 'di0', 'di1', 'di2', 'di3'].forEach(id => {
+            const el = document.getElementById(id);
+            if (el && el.type === 'checkbox') {
+                collectedRegister[id] = el.checked ? "1" : "0";
+            } else {
+                if (collectedRegister[id] === undefined) {
+                    collectedRegister[id] = "0";
+                }
+            }
+        });
 
-        document.getElementById('modbus_modify_btn').onclick = function () {
-            if (!selectedRow) return alert('Please select the row you want to modify');
-            selectedRow.querySelector('.field-display').textContent = document.getElementById('modbus_field_input').value;
-            selectedRow.querySelector('.addr-display').textContent = document.getElementById('modbus_addr_input').value;
-            selectedRow.querySelector('.idt-display').textContent = document.getElementById('modbus_idt_input').value;
-            selectedRow.querySelector('.odt-display').textContent = document.getElementById('modbus_odt_input').value;
-            selectedRow.querySelector('.dv-display').textContent = document.getElementById('modbus_dv_input').value;
-            selectedRow.querySelector('.shift-display').textContent = document.getElementById('modbus_shift_input').value;
-            selectedRow.querySelector('.expr-display').textContent = document.getElementById('modbus_expr_input').value;
-            selectedRow.querySelector('.mask-display').textContent = document.getElementById('modbus_mask_input').value;
-        };
+        // MODBUS 테이블 수집 (빈 값은 필드에서 제외)
+        const modbusRows = document.querySelectorAll('#modbus-field-list tr');
+        collectedRegister.MODBUS = [];
+        modbusRows.forEach(row => {
+            const field = row.querySelector('.field-display')?.textContent.trim();
+            if (field) {
+                const obj = {};
+                obj.field = field;
+                const addr = row.querySelector('.addr-display')?.textContent.trim();
+                const idt = row.querySelector('.idt-display')?.textContent.trim();
+                const odt = row.querySelector('.odt-display')?.textContent.trim();
+                const dv = row.querySelector('.dv-display')?.textContent.trim();
+                const shift = row.querySelector('.shift-display')?.textContent.trim();
+                const expr = row.querySelector('.expr-display')?.textContent.trim();
+                const mask = row.querySelector('.mask-display')?.textContent.trim();
+                if (addr) obj.addr = addr;
+                if (idt) obj.idt = idt;
+                if (odt) obj.odt = odt;
+                if (dv) obj.dv = dv;
+                if (shift) obj.shift = shift;
+                if (expr) obj.expr = expr;
+                if (mask) obj.mask = mask;
+                collectedRegister.MODBUS.push(obj);
+            }
+        });
+        // OPC_UA 테이블 수집 (빈 값은 필드에서 제외)
+        const opcuaRows = document.querySelectorAll('#opcua-field-list tr');
+        collectedRegister.OPC_UA = [];
+        opcuaRows.forEach(row => {
+            const field = row.querySelector('.opcua-field-display')?.textContent.trim();
+            if (field) {
+                const obj = {};
+                obj.field = field;
+                const addr = row.querySelector('.opcua-addr-display')?.textContent.trim();
+                const ns = row.querySelector('.opcua-ns-display')?.textContent.trim();
+                const odt = row.querySelector('.opcua-odt-display')?.textContent.trim();
+                const dv = row.querySelector('.opcua-dv-display')?.textContent.trim();
+                const shift = row.querySelector('.opcua-shift-display')?.textContent.trim();
+                const expr = row.querySelector('.opcua-expr-display')?.textContent.trim();
+                const mask = row.querySelector('.opcua-mask-display')?.textContent.trim();
+                if (addr) obj.addr = addr;
+                if (ns) obj.ns = ns;
+                if (odt) obj.odt = odt;
+                if (dv) obj.dv = dv;
+                if (shift) obj.shift = shift;
+                if (expr) obj.expr = expr;
+                if (mask) obj.mask = mask;
+                collectedRegister.OPC_UA.push(obj);
+            }
+        });
+        // CAN 테이블 수집 (빈 값은 필드에서 제외)
+        const canRows = document.querySelectorAll('#can-field-list tr');
+        collectedRegister.CAN = [];
+        canRows.forEach(row => {
+            const field = row.querySelector('.can-field-display')?.textContent.trim();
+            if (field) {
+                const obj = {};
+                obj.field = field;
+                const id = row.querySelector('.can-id-display')?.textContent.trim();
+                const odt = row.querySelector('.can-odt-display')?.textContent.trim();
+                const dv = row.querySelector('.can-dv-display')?.textContent.trim();
+                const shift = row.querySelector('.can-shift-display')?.textContent.trim();
+                const expr = row.querySelector('.can-expr-display')?.textContent.trim();
+                const mask = row.querySelector('.can-mask-display')?.textContent.trim();
+                if (id) obj.id = id;
+                if (odt) obj.odt = odt;
+                if (dv) obj.dv = dv;
+                if (shift) obj.shift = shift;
+                if (expr) obj.expr = expr;
+                if (mask) obj.mask = mask;
+                collectedRegister.CAN.push(obj);
+            }
+        });
+        return collectedRegister;
+    }
+    /*-----------------------------------------------------*/
 
-        // 삭제 버튼
-        document.getElementById('modbus_delete_btn').onclick = function () {
-            if (!selectedRow) return alert('Select the row you want to delete');
-            const list = document.getElementById('modbus-field-list');
-            selectedRow.remove();
-            selectedRow = null;
-            document.querySelectorAll('.modbus-input-area input').forEach(i => i.value = '');
-        };
+    /*--------페이지 제목설정 함수-----------*/
+    function showPage(pageName) {
+        const titleEl = document.getElementById('page-title');
+        Object.values(pages).forEach(p => p.style.display = 'none');
+        pages[pageName].style.display = 'block';
+        // 버튼 텍스트를 페이지 제목으로 설정
+        const btn = document.querySelector(`.nav-items button[data-page="${pageName}"]`);
+        if (btn) {
+            titleEl.textContent = btn.textContent;
+        } else {
+            titleEl.textContent = pageName.charAt(0).toUpperCase() + pageName.slice(1); // 기본값
+        }
 
-        const opcUaAddBtn = document.getElementById('opcua_add_btn');
-        const opcUaFieldList = document.getElementById('opcua-field-list');
-        const opcUaRowTemplate = document.getElementById('opcua-row-template');
+        // 페이지 전환 시 항상 마지막으로 로드된 전체 데이터를 UI에 반영
+        // if (lastLoadedRegisterData && Object.keys(lastLoadedRegisterData).length > 0) {
+        //     loadFromRegisterJson(lastLoadedRegisterData);
+        // }
+        toggleNetInputs(); // Network 페이지 로드 시 IP 모드에 따른 입력 필드 활성화/비활성화
+    }
+    /*-----------------------------------------------------*/
 
-        if (opcUaAddBtn && opcUaFieldList && opcUaRowTemplate) {
-            opcUaAddBtn.addEventListener('click', () => {
-                const field = document.getElementById('opcua_field_input').value;
-                const addr = document.getElementById('opcua_addr_input').value;
-                const ns = document.getElementById('opcua_ns_input').value;
-                const odt = document.getElementById('opcua_odt_input').value;
-                const defaultValue = document.getElementById('opcua_dv_input').value;
-                const shift = document.getElementById('opcua_shift_input').value;
-                const expr = document.getElementById('opcua_expr_input').value;
-                const mask = document.getElementById('opcua_mask_input').value;
+    /*-----Device에 설정 데이터를 deviceConfig.json 파일로 변경하여 유저가 다운로드 할수 있게 하는 함수-----*/
+    function downloadDeviceJson(obj, filename = 'deviceConfig.json') {
+        const json = JSON.stringify(obj, null, 2);        // 보기 좋게 들여쓰기 2칸
+        const blob = new Blob([json], {type: 'application/json'});
+        const url = URL.createObjectURL(blob);
 
-                const newRow = opcUaRowTemplate.content.cloneNode(true);
-                newRow.querySelector('.opcua-field-display').textContent = field;
-                newRow.querySelector('.opcua-addr-display').textContent = addr;
-                newRow.querySelector('.opcua-ns-display').textContent = ns;
-                newRow.querySelector('.opcua-odt-display').textContent = odt;
-                newRow.querySelector('.opcua-dv-display').textContent = defaultValue;
-                newRow.querySelector('.opcua-shift-display').textContent = shift;
-                newRow.querySelector('.opcua-expr-display').textContent = expr;
-                newRow.querySelector('.opcua-mask-display').textContent = mask;
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+    /*-----------------------------------------------------*/
 
-                opcUaFieldList.appendChild(newRow);
+    /*-----protocol에 설정 데이터를 protocolConfig.json 파일로 변경하여 유저가 다운로드 할수 있게 하는 함수-----*/
+    function downloadProtocolJson(obj, filename = 'protocolConfig.json') {
+        const json = JSON.stringify(obj, null, 2);        // 보기 좋게 들여쓰기 2칸
+        const blob = new Blob([json], {type: 'application/json'});
+        const url = URL.createObjectURL(blob);
 
-                document.getElementById('opcua_field_input').value = '';
-                document.getElementById('opcua_addr_input').value = '';
-                document.getElementById('opcua_ns_input').value = '';
-                document.getElementById('opcua_odt_input').value = '';
-                document.getElementById('opcua_dv_input').value = '';
-                document.getElementById('opcua_shift_input').value = '';
-                document.getElementById('opcua_expr_input').value = '';
-                document.getElementById('opcua_mask_input').value = '';
-            });
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+    /*-----------------------------------------------------*/
+
+    /*-------페이지 로드시 서버에 있는 데이터를 불러오는 함수---------*/
+    async function loadInitialData() {
+        try {
+            // Device 설정 로드
+            const deviceResponse = await fetch('http://localhost:8080/setting/get-device');
+            if (deviceResponse.ok) {
+                const deviceData = await deviceResponse.json();
+                if (deviceData && deviceData.body) {
+                    loadFromData(deviceData.body);
+                }
+            }
+        } catch (error) {
+            alert('Device configuration file missing or loading failed');
         }
 
-        document.getElementById('opcua_modify_btn').onclick = function () {
-            if (!selectedRow) return alert('Please select the row you want to modify');
-            selectedRow.querySelector('.opcua-field-display').textContent = document.getElementById('opcua_field_input').value;
-            selectedRow.querySelector('.opcua-addr-display').textContent = document.getElementById('opcua_addr_input').value;
-            selectedRow.querySelector('.opcua-ns-display').textContent = document.getElementById('opcua_ns_input').value;
-            selectedRow.querySelector('.opcua-odt-display').textContent = document.getElementById('opcua_odt_input').value;
-            selectedRow.querySelector('.opcua-dv-display').textContent = document.getElementById('opcua_dv_input').value;
-            selectedRow.querySelector('.opcua-shift-display').textContent = document.getElementById('opcua_shift_input').value;
-            selectedRow.querySelector('.opcua-expr-display').textContent = document.getElementById('opcua_expr_input').value;
-            selectedRow.querySelector('.opcua-mask-display').textContent = document.getElementById('opcua_mask_input').value;
-        };
+        try {
+            // Protocol 설정 로드
+            const protocolResponse = await fetch('http://localhost:8080/setting/get-protocol');
+            if (protocolResponse.ok) {
+                const protocolData = await protocolResponse.json();
+                if (protocolData && protocolData.body) {
+                    loadFromRegisterJson(protocolData.body);
+                }
+            }
+        } catch (error) {
+            alert('Protocol configuration file missing or loading failed');        }
+    }
+    /*-----------------------------------------------------*/
 
-        // 삭제 버튼
-        document.getElementById('opcua_delete_btn').onclick = function () {
-            if (!selectedRow) return alert('Select the row you want to delete');
-            const list = document.getElementById('opcua-field-list');
-            selectedRow.remove();
-            selectedRow = null;
-            document.querySelectorAll('.opcua-input-area input').forEach(i => i.value = '');
-        };
+    function createSsidRow(obj = {wifi_ssid: '', wifi_password: '', wifi_security: 'none'}) {
+        const node = ssidTmpl.content.firstElementChild.cloneNode(true);
+        node.querySelector('.ssid-name').value = obj.wifi_ssid ?? '';
+        node.querySelector('.ssid-pw').value = obj.wifi_password ?? '';
+        node.querySelector('select').value = (obj.wifi_security ?? 'none').toLowerCase();
+        return node;
+    }
 
-        // CAN 테이블 
-        document.getElementById('can_add_btn').addEventListener('click', () => {
-            const field = document.getElementById('can_field_input').value;
-            const id = document.getElementById('can_id_input').value;
-            const odt = document.getElementById('can_odt_input').value;
-            const dv = document.getElementById('can_dv_input').value;
-            const shift = document.getElementById('can_shift_input').value;
-            const expr = document.getElementById('can_expr_input').value;
-            const mask = document.getElementById('can_mask_input').value;
-            const canRowTemplate = document.getElementById('can-row-template');
-            const newRow = canRowTemplate.content.cloneNode(true);
-            newRow.querySelector('.can-field-display').textContent = field;
-            newRow.querySelector('.can-id-display').textContent = id;
-            newRow.querySelector('.can-odt-display').textContent = odt;
-            newRow.querySelector('.can-dv-display').textContent = dv;
-            newRow.querySelector('.can-shift-display').textContent = shift;
-            newRow.querySelector('.can-expr-display').textContent = expr;
-            newRow.querySelector('.can-mask-display').textContent = mask;
-            canFieldList.appendChild(newRow);
-            document.getElementById('can_field_input').value = '';
-            document.getElementById('can_id_input').value = '';
-            document.getElementById('can_odt_input').value = '';
-            document.getElementById('can_dv_input').value = '';
-            document.getElementById('can_shift_input').value = '';
-            document.getElementById('can_expr_input').value = '';
-            document.getElementById('can_mask_input').value = '';
+    function addSsidRow() {
+        ssidList.appendChild(createSsidRow());
+    }
+
+    ssidList.addEventListener('click', e => {
+        if (e.target.classList.contains('toggle-pw')) {
+            const pw = e.target.closest('.ssid-row').querySelector('.ssid-pw');
+            pw.type = pw.type === 'password' ? 'text' : 'password';
+            e.target.textContent = pw.type === 'password' ? 'show' : 'hide';
+        } else if (e.target.dataset.action === 'delete-ssid') {
+            const ssidRow = e.target.closest('.ssid-row');
+            if (ssidRow) {
+                removeSsidRow(ssidRow);
+            }
+        }
+    });
+
+    function gatherSsidRows() {
+        const arr = [];
+        ssidList.querySelectorAll('.ssid-row').forEach(row => {
+            const ssid = row.querySelector('.ssid-name').value.trim();
+            const pw = row.querySelector('.ssid-pw').value.trim();
+            const sec = row.querySelector('select').value;
+            if (ssid) arr.push({wifi_ssid: ssid, wifi_password: pw, wifi_security: sec});
+        });
+        return arr.length ? arr : [{wifi_ssid: '', wifi_password: '', wifi_security: 'none'}];
+    }
+
+    /* ───────────── 4. DHCP ↔ Static 전환 입력 잠금 ───────────── */
+    const netFields = ['wifi_ip', 'wifi_netmask', 'wifi_gateway', 'wifi_dns1', 'wifi_dns2']
+        .map(id => document.getElementById(id));
+
+    function toggleNetInputs() {
+        const isStatic = document.querySelector('input[name="ipMode"]:checked')?.value === 'static';
+        netFields.forEach(el => {
+            el.disabled = !isStatic;
+            el.classList.toggle('disabled', !isStatic);
         });
-        document.getElementById('can_modify_btn').onclick = function () {
-            if (!selectedRow) return alert('Please select the row you want to modify');
-            selectedRow.querySelector('.can-field-display').textContent = document.getElementById('can_field_input').value;
-            selectedRow.querySelector('.can-id-display').textContent = document.getElementById('can_id_input').value;
-            selectedRow.querySelector('.can-odt-display').textContent = document.getElementById('can_odt_input').value;
-            selectedRow.querySelector('.can-dv-display').textContent = document.getElementById('can_dv_input').value;
-            selectedRow.querySelector('.can-shift-display').textContent = document.getElementById('can_shift_input').value;
-            selectedRow.querySelector('.can-expr-display').textContent = document.getElementById('can_expr_input').value;
-            selectedRow.querySelector('.can-mask-display').textContent = document.getElementById('can_mask_input').value;
-        };
-        document.getElementById('can_delete_btn').onclick = function () {
-            if (!selectedRow) return alert('Select the row you want to delete');
-            const list = document.getElementById('can-field-list');
-            selectedRow.remove();
-            selectedRow = null;
-            document.querySelectorAll('.can-input-area input').forEach(i => i.value = '');
-        };
+    }
 
+    document.querySelectorAll('input[name="ipMode"]').forEach(r => r.addEventListener('change', toggleNetInputs));
 
-        regProtocolSelect = document.getElementById('reg_protocol');
-        if (regProtocolSelect) {
-            regProtocolSelect.addEventListener('change', () => {
-                toggleProtocolMenus();
-            });
 
-            toggleProtocolMenus();
+    function axisValueToPair(val) {
+        return val.startsWith('-')
+            ? {axis: val.slice(1), sign: 'minus'}
+            : {axis: val, sign: 'plus'};
+    }
+
+    function pairToAxisValue(axis, sign) {
+        return sign === 'minus' ? `-${axis}` : axis;
+    }
+
+    /* ───────────── 6. 데이터 → 화면 로딩 ───────────── */
+    function loadFromData(obj) {
+        /* Wi-Fi 모드 radio */
+        document.querySelector(`input[name="ipMode"][value="${obj.wifi_static === 'on' ? 'static' : 'dhcp'}"]`).checked = true;
+
+        /* 일반 input/select */
+        for (const k in obj) {
+            const el = document.getElementById(k);
+            if (el) el.value = obj[k] ?? '';
         }
 
-        function saveToConfig() {
-            const deviceData = collectData();
-            const protocolData = collectConfigData();
+        /* IMU select 값 재구성 */
+        ['x', 'y', 'z'].forEach(a => {
+            const axis = obj[`imu_remap_${a}`] || 'x';
+            const sign = obj[`imu_remap_${a}_sign`] || 'plus';
+            document.getElementById(`imu_remap_${a}`).value = pairToAxisValue(axis, sign);
+        });
 
-            if (!isValidRegisterConfig(protocolData)) {
-                alert("Register settings are currently invalid. Cannot be saved.");
-                return;
-            }
+        /* SSID */
+        ssidList.innerHTML = '';
+        (obj.WIFI_SSID || []).forEach(o => ssidList.appendChild(createSsidRow(o)));
+        if (!ssidList.children.length) addSsidRow();
 
-            // 두 개의 fetch를 병렬 실행
-            const deviceReq = fetch('http://localhost:8080/setting/device', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(deviceData)
-            });
+        toggleNetInputs();          // 초기 잠금 상태
+    }
 
-            const protocolReq = fetch('http://localhost:8080/setting/protocol', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(protocolData)
-            });
+    loadFromData(data);
 
-            // 모든 요청이 성공하면 성공 알림
-            Promise.all([deviceReq, protocolReq])
-                .then(([res1, res2]) => {
-                    if (res1.ok && res2.ok) {
-                        alert('saved successfully');
-                    } else {
-                        alert('save failure');
-                        console.error('device response:', res1.status, 'protocol response:', res2.status);
-                    }
-                })
-                .catch(err => {
-                    console.error('Error during transfer:', err);
-                    alert('save failure');
-                });
+    let regProtocolSelect;
+
+    function toggleProtocolMenus() {
+        if (!regProtocolSelect) return;
+        const selectProtocol = regProtocolSelect.value;
+        const modbusSidebarBtn = document.getElementById('modbusSidebarBtn');
+        const opcUaSidebarBtn = document.getElementById('opcUaSidebarBtn');
+        const canSidebarBtn = document.getElementById('canSidebarBtn');
+        if (modbusSidebarBtn) modbusSidebarBtn.style.display = 'none';
+        if (opcUaSidebarBtn) opcUaSidebarBtn.style.display = 'none';
+        if (canSidebarBtn) canSidebarBtn.style.display = 'none';
+        if (selectProtocol === 'MODBUS') {
+            if (modbusSidebarBtn) modbusSidebarBtn.style.display = 'block';
+        } else if (selectProtocol === 'OPC_UA') {
+            if (opcUaSidebarBtn) opcUaSidebarBtn.style.display = 'block';
+        }
+        // CAN Input이 on일 때만 CAN 메뉴 보이기
+        const canInputEl = document.getElementById('reg_can_input');
+        if (canInputEl && canInputEl.value === 'on') {
+            if (canSidebarBtn) canSidebarBtn.style.display = 'block';
+        }
+        // Protocol configuration 메뉴 자동 펼치기
+        const protocolDetails = document.querySelectorAll('details.nav')[1];
+        if (protocolDetails) protocolDetails.open = true;
+    }
+
+    function loadFromRegisterJson(register) { // register.json 데이터 로드
+        if (!register) {
+            console.error("Register data is null or undefined.");
+            return;
         }
+        lastLoadedRegisterData = {...register};
+        console.log("Extracted Body Data:", lastLoadedRegisterData); // DTO 객체 로깅
 
+        // 1. configIdMap을 순회하며 DTO의 camelCase 필드명과 HTML ID 매핑을 사용하여 UI 업데이트
+        for (const htmlId in configIdMap) {
+            const dtoKey = configIdMap[htmlId]; // DTO의 camelCase 필드명
+            const el = document.getElementById(htmlId);
 
+            if (el && lastLoadedRegisterData.hasOwnProperty(dtoKey)) {
+                const value = lastLoadedRegisterData[dtoKey];
 
-        document.querySelectorAll('.save-file').forEach(btn=>btn.addEventListener('click', () => {saveToConfig()}))
+                if (el.type === 'checkbox') {
+                    // AnalogPort Enum은 "0", "1" 문자열 또는 boolean으로 파싱될 수 있습니다.
+                    // UI 체크박스는 boolean 값을 필요로 하므로, "1"이면 체크, "0"이면 체크 해제.
+                    el.checked = (value === "1" || value === true);
+                } else {
+                    // 기타 입력 필드 (select, text input)
+                    // null 또는 undefined 값에 대비하여 빈 문자열로 처리
+                    el.value = value !== null && value !== undefined ? value : '';
+                }
+            } else if (el) {
+                // DTO에 해당 필드가 없으면 UI 요소 초기화 (선택 사항)
+                if (el.type === 'checkbox') {
+                    el.checked = false;
+                } else {
+                    el.value = '';
+                }
+                console.warn(`DTO field '${dtoKey}' (mapped from HTML ID '${htmlId}') not found in loaded data.`);
+            } else {
+                console.warn(`HTML element with ID '${htmlId}' not found for DTO key '${dtoKey}'.`);
+            }
+        }
 
 
-        document.querySelectorAll('.download-device-file').forEach(btn=>{btn.addEventListener('click', () => {
-            downloadDeviceJson(collectData(data));
-        })})
+        // protocol 값이 있으면 select 값을 변경 (데이터 로드 시에만)
+        if (register.protocol && regProtocolSelect) {
+            regProtocolSelect.value = register.protocol;
+        }
 
-        document.querySelectorAll('.download-protocol-file').forEach(btn=>{btn.addEventListener('click', () => {
-            downloadProtocolJson(collectConfigData(data));
-        })})
+        // 프로토콜 값에 따라 사이드바 버튼 토글
+        toggleProtocolMenus();
+
+        // MODBUS UI 테이블 렌더링
+        const modbusFieldList = document.getElementById('modbus-field-list');
+        const modbusRowTemplate = document.getElementById('modbus-row-template');
+        if (modbusFieldList && modbusRowTemplate) {
+            modbusFieldList.innerHTML = '';
+            if (Array.isArray(register.MODBUS) && register.MODBUS.length > 0) {
+                register.MODBUS.forEach(field => {
+                    const newRow = modbusRowTemplate.content.cloneNode(true);
+                    newRow.querySelector('.field-display').textContent = field.field ?? '';
+                    newRow.querySelector('.addr-display').textContent = field.addr ?? '';
+                    newRow.querySelector('.idt-display').textContent = field.idt ?? '';
+                    newRow.querySelector('.odt-display').textContent = field.odt ?? '';
+                    newRow.querySelector('.dv-display').textContent = field.dv ?? '';
+                    newRow.querySelector('.shift-display').textContent = field.shift ?? '';
+                    newRow.querySelector('.expr-display').textContent = field.expr ?? '';
+                    newRow.querySelector('.mask-display').textContent = field.mask ?? '';
+                    modbusFieldList.appendChild(newRow);
+                });
+            } else {
+                // MODBUS 데이터가 없으면 빈 행 하나 추가
+                const newRow = modbusRowTemplate.content.cloneNode(true);
+                modbusFieldList.appendChild(newRow);
+            }
+        }
 
 
-        document.getElementById('reg_can_input')?.addEventListener('change', toggleProtocolMenus);
+        // OPC_UA UI 테이블 렌더링
+        const opcUaFieldList = document.getElementById('opcua-field-list');
+        const opcUaRowTemplate = document.getElementById('opcua-row-template');
+        if (opcUaFieldList && opcUaRowTemplate) {
+            opcUaFieldList.innerHTML = '';
+            if (Array.isArray(register.OPC_UA) && register.OPC_UA.length > 0) {
+                register.OPC_UA.forEach(field => {
+                    const newRow = opcUaRowTemplate.content.cloneNode(true);
+                    newRow.querySelector('.opcua-field-display').textContent = field.field ?? '';
+                    newRow.querySelector('.opcua-addr-display').textContent = field.addr ?? '';
+                    newRow.querySelector('.opcua-ns-display').textContent = field.ns ?? '';
+                    newRow.querySelector('.opcua-odt-display').textContent = field.odt ?? '';
+                    newRow.querySelector('.opcua-dv-display').textContent = field.dv ?? '';
+                    newRow.querySelector('.opcua-shift-display').textContent = field.shift ?? '';
+                    newRow.querySelector('.opcua-expr-display').textContent = field.expr ?? '';
+                    newRow.querySelector('.opcua-mask-display').textContent = field.mask ?? '';
+                    opcUaFieldList.appendChild(newRow);
+                });
+            } else {
+                // OPC_UA 데이터가 없으면 빈 행 하나 추가
+                const newRow = opcUaRowTemplate.content.cloneNode(true);
+                opcUaFieldList.appendChild(newRow);
+            }
+        }
 
+        // CAN 테이블 렌더링
         const canFieldList = document.getElementById('can-field-list');
-        if (canFieldList.children.length === 0) {
-            const canRowTemplate = document.getElementById('can-row-template');
-            if (canRowTemplate) {
+        const canRowTemplate = document.getElementById('can-row-template');
+        canFieldList.innerHTML = '';
+        if (Array.isArray(register.CAN) && register.CAN.length > 0) {
+            register.CAN.forEach(field => {
                 const newRow = canRowTemplate.content.cloneNode(true);
+                newRow.querySelector('.can-field-display').textContent = field.field ?? '';
+                newRow.querySelector('.can-id-display').textContent = field.id ?? '';
+                newRow.querySelector('.can-odt-display').textContent = field.odt ?? '';
+                newRow.querySelector('.can-dv-display').textContent = field.dv ?? '';
+                newRow.querySelector('.can-shift-display').textContent = field.shift ?? '';
+                newRow.querySelector('.can-expr-display').textContent = field.expr ?? '';
+                newRow.querySelector('.can-mask-display').textContent = field.mask ?? '';
                 canFieldList.appendChild(newRow);
-            }
+            });
+        } else {
+            const newRow = canRowTemplate.content.cloneNode(true);
+            canFieldList.appendChild(newRow);
         }
-        // CAN row 클릭 시 선택 표시 및 입력폼에 값 반영
-        canFieldList.addEventListener('click', function (e) {
-            let tr = e.target.closest('tr');
-            if (!tr) return;
-            Array.from(this.children).forEach(row => row.classList.remove('selected-row'));
-            tr.classList.add('selected-row');
-            selectedRow = tr;
-            document.getElementById('can_field_input').value = tr.querySelector('.can-field-display').textContent;
-            document.getElementById('can_id_input').value = tr.querySelector('.can-id-display').textContent;
-            document.getElementById('can_odt_input').value = tr.querySelector('.can-odt-display').textContent;
-            document.getElementById('can_dv_input').value = tr.querySelector('.can-dv-display').textContent;
-            document.getElementById('can_shift_input').value = tr.querySelector('.can-shift-display').textContent;
-            document.getElementById('can_expr_input').value = tr.querySelector('.can-expr-display').textContent;
-            document.getElementById('can_mask_input').value = tr.querySelector('.can-mask-display').textContent;
-        });
-    });
+
+    }
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
index 2589757..1bfc913 100644
--- a/src/main/resources/static/style.css
+++ b/src/main/resources/static/style.css
@@ -105,8 +105,23 @@ details.nav {
     width: 100%
 }
 
-.ssid-row button {padding: 6px 10px;font-size: 14px;background: #f1f1f1;border: 1px solid #777;border-radius: 4px;cursor: pointer}
+.icon-button {
+    font-size: 10px;
+    background-color: #f0f0f0;
+    border: none;
+    padding: 8px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
 
+.icon-button:hover {
+    background-color: #dcdcdc;
+}
+
+.icon-button:active {
+    background-color: #c0c0c0;
+}
 /* 3-column grids (Network / Server) */
 .grid-3-col {display: grid;grid-template-columns:180px 240px 120px;align-items: center;gap: 16px}
 .grid-3-col input {padding: 6px 8px;font-size: 16px;border: 1px solid #aaa;border-radius: 1px;width: 100%}