diff --git a/src/main/java/org/mobidgim/mobidigimproject/model/device/DeviceDTO.java b/src/main/java/org/mobidgim/mobidigimproject/model/device/DeviceDTO.java
index a74fa08..c0833e0 100644
--- a/src/main/java/org/mobidgim/mobidigimproject/model/device/DeviceDTO.java
+++ b/src/main/java/org/mobidgim/mobidigimproject/model/device/DeviceDTO.java
@@ -33,6 +33,9 @@ public class DeviceDTO {
     @JsonUnwrapped
     private Imu imuConfig;
 
+    @JsonUnwrapped
+    private Lte lteConfig;
+
     @JsonProperty("WIFI_SSID")
     private List<WifiSSIDS> wifiSsid;
 }
\ No newline at end of file
diff --git a/src/main/java/org/mobidgim/mobidigimproject/model/device/WifiSSIDS.java b/src/main/java/org/mobidgim/mobidigimproject/model/device/WifiSSIDS.java
index 71ba1d9..3485fd7 100644
--- a/src/main/java/org/mobidgim/mobidigimproject/model/device/WifiSSIDS.java
+++ b/src/main/java/org/mobidgim/mobidigimproject/model/device/WifiSSIDS.java
@@ -1,6 +1,8 @@
 package org.mobidgim.mobidigimproject.model.device;
 
 
+import com.fasterxml.jackson.annotation.JsonProperty;
+import com.fasterxml.jackson.annotation.JsonValue;
 import lombok.Data;
 import org.mobidgim.mobidigimproject.model.device.enums.WiFiSecurity;
 
@@ -8,7 +10,11 @@ import org.mobidgim.mobidigimproject.model.device.enums.WiFiSecurity;
 @Data
 public class WifiSSIDS {
 
+
+    @JsonProperty("wifi_ssid")
     private String wifiSsid;
+    @JsonProperty("wifi_password")
     private String wifiPassword;
+
     private WiFiSecurity wifiSecurity;
 }
diff --git a/src/main/java/org/mobidgim/mobidigimproject/model/device/subDTO/Lte.java b/src/main/java/org/mobidgim/mobidigimproject/model/device/subDTO/Lte.java
new file mode 100644
index 0000000..0e88899
--- /dev/null
+++ b/src/main/java/org/mobidgim/mobidigimproject/model/device/subDTO/Lte.java
@@ -0,0 +1,14 @@
+package org.mobidgim.mobidigimproject.model.device.subDTO;
+
+import com.fasterxml.jackson.annotation.JsonProperty;
+
+public class Lte {
+    @JsonProperty("lte_ip")
+    private String LTEip;
+    @JsonProperty("lte_subnet")
+    private String LTEsubnet;
+    @JsonProperty("lte_gateway")
+    private String LTEgateway;
+    @JsonProperty("lte_port")
+    private int LTEport;
+}
diff --git a/src/main/java/org/mobidgim/mobidigimproject/service/SettingService.java b/src/main/java/org/mobidgim/mobidigimproject/service/SettingService.java
index 8e59887..bd5e5bb 100644
--- a/src/main/java/org/mobidgim/mobidigimproject/service/SettingService.java
+++ b/src/main/java/org/mobidgim/mobidigimproject/service/SettingService.java
@@ -107,11 +107,10 @@ public class SettingService {
             Files.write(Paths.get("./temp/registerConfig.json"),json.getBytes(StandardCharsets.UTF_8));
             return true;
         }
-        catch(Exception e){
+        catch(Exception e) {
             e.printStackTrace();
             return false;
         }
-        
     }
 
 }
diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index e91bc4a..64632a9 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html
@@ -1,132 +1,667 @@
 <!DOCTYPE html>
 <html lang="ko">
 <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Device Configuration UI</title>
 
     <style>
-        *{margin:0;padding:0;box-sizing:border-box}
-        body{font-family:"Pretendard",sans-serif;min-height:100vh;display:flex;background:#fff;color:#111}
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box
+        }
+
+        body {
+            font-family: "Pretendard", sans-serif;
+            min-height: 100vh;
+            display: flex;
+            background: #fff;
+            color: #111
+        }
 
         /* ───── Sidebar ───── */
-        .sidebar{width:260px;border-right:1px solid #ddd;padding:32px 24px;display:flex;flex-direction:column}
-        .sidebar h2{font-size:24px;margin-bottom:32px}
-        details.nav{margin-bottom:24px}
-        .nav>summary{list-style:none;cursor:pointer;display:flex;align-items:center;font-size:20px}
-        .nav>summary::before{content:"";width:8px;height:8px;margin-right:8px;
-            border-left:2px solid #111;border-bottom:2px solid #111;transform:rotate(-135deg);transition:.2s}
-        .nav[open]>summary::before{transform:rotate(-45deg)}
-        .nav-items{display:flex;flex-direction:column;margin-top:10px;padding-left:16px;gap:6px}
-        .nav-items button{background:none;border:none;cursor:pointer;font-size:16px;text-align:left;padding:4px 0}
+        .sidebar {
+            width: 260px;
+            border-right: 1px solid #ddd;
+            padding: 32px 24px;
+            display: flex;
+            flex-direction: column
+        }
+
+        .sidebar h2 {
+            font-size: 24px;
+            margin-bottom: 32px
+        }
+
+        details.nav {
+            margin-bottom: 24px
+        }
+
+        .nav > summary {
+            list-style: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            font-size: 20px
+        }
+
+        .nav > summary::before {
+            content: "";
+            width: 8px;
+            height: 8px;
+            margin-right: 8px;
+            border-left: 2px solid #111;
+            border-bottom: 2px solid #111;
+            transform: rotate(-135deg);
+            transition: .2s
+        }
+
+        .nav[open] > summary::before {
+            transform: rotate(-45deg)
+        }
+
+        .nav-items {
+            display: flex;
+            flex-direction: column;
+            margin-top: 10px;
+            padding-left: 16px;
+            gap: 6px
+        }
+
+        .nav-items button {
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 16px;
+            text-align: left;
+            padding: 4px 0
+        }
 
         /* ───── Top-bar ───── */
-        .topbar{height:68px;background:#d9d9d9;display:flex;align-items:center;
-            padding:0 32px;font-size:28px;font-weight:500;box-shadow:0 2px 4px rgba(0,0,0,.15) inset}
+        .topbar {
+            height: 68px;
+            background: #d9d9d9;
+            display: flex;
+            align-items: center;
+            padding: 0 32px;
+            font-size: 28px;
+            font-weight: 500;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, .15) inset
+        }
 
         /* ───── Main Board ───── */
-        .content{flex:1;display:flex;flex-direction:column}
-        .board{flex:1;overflow:auto;padding:40px;display:flex;flex-direction:column;gap:32px}
-        .card{background:#fff;border:1px solid #e5e5e5;box-shadow:0 2px 4px rgba(0,0,0,.15) inset;
-            padding:32px;border-radius:8px}
-        .card h3{font-size:24px;margin-bottom:24px}
+        .content {
+            flex: 1;
+            display: flex;
+            flex-direction: column
+        }
+
+        .board {
+            flex: 1;
+            overflow: auto;
+            padding: 40px;
+            display: flex;
+            flex-direction: column;
+            gap: 32px
+        }
+
+        .card {
+            background: #fff;
+            border: 1px solid #e5e5e5;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, .15) inset;
+            padding: 32px;
+            border-radius: 8px
+        }
+
+        .card h3 {
+            font-size: 24px;
+            margin-bottom: 24px
+        }
 
         /* SSID rows */
-        .ssid-row{display:grid;grid-template-columns:220px 220px 60px 120px;gap:16px;margin-bottom:12px}
-        .ssid-row input,.ssid-row select{padding:6px 8px;font-size:16px;border:1px solid #aaa;border-radius:4px;width:100%}
-        .ssid-row button{padding:6px 10px;font-size:14px;background:#f1f1f1;border:1px solid #777;border-radius:4px;cursor:pointer}
+        .ssid-row {
+            display: grid;
+            grid-template-columns:220px 220px 60px 120px;
+            gap: 16px;
+            margin-bottom: 12px
+        }
+
+        .ssid-row input, .ssid-row select {
+            padding: 6px 8px;
+            font-size: 16px;
+            border: 1px solid #aaa;
+            border-radius: 4px;
+            width: 100%
+        }
+
+        .ssid-row button {
+            padding: 6px 10px;
+            font-size: 14px;
+            background: #f1f1f1;
+            border: 1px solid #777;
+            border-radius: 4px;
+            cursor: pointer
+        }
 
         /* 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%}
+        .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%
+        }
 
         /* radio */
-        .radio-group{display:flex;align-items:center;gap:24px}
-        .radio-label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
-        .radio-label input{margin:0}
+        .radio-group {
+            display: flex;
+            align-items: center;
+            gap: 24px
+        }
+
+        .radio-label {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            cursor: pointer
+        }
+
+        .radio-label input {
+            margin: 0
+        }
 
         /* I/O  */
-        .io-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:40px;margin-bottom:32px}
-        .io-bot{display:flex; gap: 40px ;flex-wrap:wrap;}
-        .io-group{flex:1 1 0;min-width:320px;}
-        .io-group h4{font-size:20px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
-        .io-group h4::before{content:"";width:8px;height:8px;background:#aaa;display:inline-block}
-        .io-fieldset{border:1px solid #bbb;padding:24px 32px;border-radius:4px;display:flex;flex-direction:column;gap:16px;width:100%}
-        .io-row{display:grid;grid-template-columns:120px 12px 1fr;align-items:center;gap:8px}
-        .io-row input,.io-row select{padding:4px 6px;border:1px solid #aaa;border-radius:4px;font-size:14px;width:50%}
-        .io-row span.label {font-size: 14px;color: #333;display: block;width: 100%;}
-        .io-row span.label-inline {font-size: 14px;color: #333;display: inline;width: auto}
-        .io-row span.colon {font-size: 14px;color: #333;text-align: center;}
-        .reg-io-grid{display: grid;grid-template-columns: 1fr 1fr; gap: 4px}
-        .reg-io-grid .io-fieldset .io-row {display: grid; grid-template-columns: 140px 220px; align-items: center; gap: 4px; margin-bottom: 8px;}
+        .io-top {
+            display: grid;
+            grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
+            gap: 40px;
+            margin-bottom: 32px
+        }
+
+        .io-bot {
+            display: grid; /* Ethernet·LTE와 같은 2열(가변) 그리드 */
+            grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
+            gap: 40px;
+        }
+
+        .io-group {
+            display: flex;
+            flex-direction: column;
+            gap: 8px
+        }
+
+        .io-group h4 {
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 16px;
+            display: flex;
+            align-items: center;
+            gap: 8px
+        }
+
+        .io-group h4::before {
+            content: "";
+            width: 8px;
+            height: 8px;
+            background: #aaa;
+            display: inline-block
+        }
+
+        .io-fieldset {
+            border: 1px solid #bbb;
+            padding: 24px 32px;
+            border-radius: 4px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            width: 100%
+        }
+
+        .io-row {
+            display: grid;
+            grid-template-columns:120px 12px 1fr;
+            align-items: center;
+            gap: 8px
+        }
+
+        .io-row input, .io-row select {
+            padding: 4px 6px;
+            border: 1px solid #aaa;
+            border-radius: 4px;
+            font-size: 14px;
+            width: 50%
+        }
+
+        .io-row span.label {
+            font-size: 14px;
+            color: #333;
+            display: block;
+            width: 100%;
+        }
+
+        .io-row span.label-inline {
+            font-size: 14px;
+            color: #333;
+            display: inline;
+            width: auto
+        }
+
+        .io-row span.colon {
+            font-size: 14px;
+            color: #333;
+            text-align: center;
+        }
+
+        .reg-io-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 4px
+        }
+
+        .reg-io-grid .io-fieldset .io-row {
+            display: grid;
+            grid-template-columns: 140px 220px;
+            align-items: center;
+            gap: 4px;
+            margin-bottom: 8px;
+        }
+
         /* config 내부 라벨 */
-        .reg-io-grid .io-fieldset .io-row span.label{font-size: 14px; color: #333;}
+        .reg-io-grid .io-fieldset .io-row span.label {
+            font-size: 14px;
+            color: #333;
+        }
+
         .reg-io-grid .io-fieldset .io-row input,
-        .reg-io-grid .io-fieldset .io-row select{padding: 4px 6px; border: 1px solid #aaa; border-radius: 4px; font-size: 14px; width: 100%; box-sizing: border-box;}
+        .reg-io-grid .io-fieldset .io-row select {
+            padding: 4px 6px;
+            border: 1px solid #aaa;
+            border-radius: 4px;
+            font-size: 14px;
+            width: 100%;
+            box-sizing: border-box;
+        }
 
-        .reg-io-grid .io-fieldset .io-row.checkbox-group {display: flex; align-items: center;gap: 16px; grid-column: 2 / 3;}
-        .reg-io-grid .io-fieldset .io-row .checkbox-with-text {display: flex;align-items: center;gap: 10px;width: 100%;}
-        .reg-io-grid .io-fieldset .io-row .checkbox-with-text input[type="checkbox"] {width: auto;margin: 0;}
+        .reg-io-grid .io-fieldset .io-row.checkbox-group {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            grid-column: 2 / 3;
+        }
+
+        .reg-io-grid .io-fieldset .io-row .checkbox-with-text {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            width: 100%;
+        }
+
+        .reg-io-grid .io-fieldset .io-row .checkbox-with-text input[type="checkbox"] {
+            width: auto;
+            margin: 0;
+        }
 
 
         /* 비활성 input 시각화 */
-        .disabled{background:#f5f5f5;cursor:not-allowed}
+        .disabled {
+            background: #f5f5f5;
+            cursor: not-allowed
+        }
 
         /* Footer Buttons */
-        .actions{display:flex;gap:24px;justify-content:center;padding: 20px}
-        .actions button{min-width:140px;padding:10px 18px;font-size:16px;border:1px solid #bbb;background:#d9d9d9;border-radius:4px;cursor:pointer}
+        .actions {
+            display: flex;
+            gap: 24px;
+            justify-content: center;
+            padding: 20px
+        }
+
+        .actions button {
+            min-width: 140px;
+            padding: 10px 18px;
+            font-size: 16px;
+            border: 1px solid #bbb;
+            background: #d9d9d9;
+            border-radius: 4px;
+            cursor: pointer
+        }
+
+        .config-actions {
+            display: flex;
+            gap: 24px;
+            justify-content: center;
+            padding: 20px
+        }
 
-        .config-actions{display:flex;gap:24px;justify-content:center;padding: 20px}
-        .config-actions button{min-width:140px;padding:10px 18px;font-size:16px;border:1px solid #bbb;background:#d9d9d9;border-radius:4px;cursor:pointer}
+        .config-actions button {
+            min-width: 140px;
+            padding: 10px 18px;
+            font-size: 16px;
+            border: 1px solid #bbb;
+            background: #d9d9d9;
+            border-radius: 4px;
+            cursor: pointer
+        }
 
         /* MODBUS 화면 심플 스타일 */
-        #page-modbus .card {background: #f7f7f7;border: 1px solid #bbb;box-shadow: none;padding: 24px;border-radius: 4px;display: flex;flex-direction: column;}
-        #page-modbus table {width: 100%;border-collapse: collapse;background: #fff;border: 1px solid #bbb;}
-        #page-modbus th, #page-modbus td {border: 1px solid #bbb;padding: 6px 8px;text-align: left;background: #fff;}
-        #page-modbus th {background: #e5e5e5;font-weight: 500;}
-        #page-modbus .modbus-input-area {display: grid;grid-template-columns: 200px 200px 200px 200px;gap: 20px 20px;margin: 24px auto 16px auto;background: #eaeaea;padding: 16px;border-radius: 4px;margin-left: auto;margin-right: auto;}
-        #page-modbus .input-row {display: contents;}
-        #page-modbus .modbus-input-area label.nowrap {white-space: nowrap;}
-        #page-modbus .modbus-input-area label {min-width: auto;color: #444;white-space: normal;}
-        #page-modbus .modbus-input-area input {background: #e0e0e0;border: none;border-radius: 2px;padding: 4px 8px;min-width: auto;}
-        #page-modbus .modbus-actions {display: flex;gap: 24px;justify-content: center;margin: 16px 0 0 0;}
-        #page-modbus .modbus-actions button {background: #d3d3d3;border: 1px solid #aaa;border-radius: 2px;padding: 8px 24px;font-size: 16px;cursor: pointer;}
+        #page-modbus .card {
+            background: #f7f7f7;
+            border: 1px solid #bbb;
+            box-shadow: none;
+            padding: 24px;
+            border-radius: 4px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        #page-modbus table {
+            width: 100%;
+            border-collapse: collapse;
+            background: #fff;
+            border: 1px solid #bbb;
+        }
+
+        #page-modbus th, #page-modbus td {
+            border: 1px solid #bbb;
+            padding: 6px 8px;
+            text-align: left;
+            background: #fff;
+        }
+
+        #page-modbus th {
+            background: #e5e5e5;
+            font-weight: 500;
+        }
+
+        #page-modbus .modbus-input-area {
+            display: grid;
+            grid-template-columns: 200px 200px 200px 200px;
+            gap: 20px 20px;
+            margin: 24px auto 16px auto;
+            background: #eaeaea;
+            padding: 16px;
+            border-radius: 4px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        #page-modbus .input-row {
+            display: contents;
+        }
+
+        #page-modbus .modbus-input-area label.nowrap {
+            white-space: nowrap;
+        }
+
+        #page-modbus .modbus-input-area label {
+            min-width: auto;
+            color: #444;
+            white-space: normal;
+        }
+
+        #page-modbus .modbus-input-area input {
+            background: #e0e0e0;
+            border: none;
+            border-radius: 2px;
+            padding: 4px 8px;
+            min-width: auto;
+        }
+
+        #page-modbus .modbus-actions {
+            display: flex;
+            gap: 24px;
+            justify-content: center;
+            margin: 16px 0 0 0;
+        }
+
+        #page-modbus .modbus-actions button {
+            background: #d3d3d3;
+            border: 1px solid #aaa;
+            border-radius: 2px;
+            padding: 8px 24px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+
         /* 하단 버튼 영역 */
-        #modbus-bottom-actions {display: flex;gap: 24px;justify-content: center;background: #f7f7f7;border: 1px solid #bbb;border-radius: 4px;margin: 24px 0 0 0;padding: 20px 0;}
-        #modbus-bottom-actions button {background: #e0e0e0;border: 1px solid #aaa;border-radius: 2px;padding: 10px 18px;font-size: 16px;min-width: 140px;cursor: pointer;}
+        #modbus-bottom-actions {
+            display: flex;
+            gap: 24px;
+            justify-content: center;
+            background: #f7f7f7;
+            border: 1px solid #bbb;
+            border-radius: 4px;
+            margin: 24px 0 0 0;
+            padding: 20px 0;
+        }
+
+        #modbus-bottom-actions button {
+            background: #e0e0e0;
+            border: 1px solid #aaa;
+            border-radius: 2px;
+            padding: 10px 18px;
+            font-size: 16px;
+            min-width: 140px;
+            cursor: pointer;
+        }
 
         /* OPC_UA 화면 */
-        #page-opcua .card {background: #f7f7f7;border: 1px solid #bbb;box-shadow: none;padding: 24px;border-radius: 4px;display: flex;flex-direction: column;}
-        #page-opcua table {width: 100%;border-collapse: collapse;background: #fff;border: 1px solid #bbb;}
-        #page-opcua th, #page-opcua td {border: 1px solid #bbb;padding: 6px 8px;text-align: left;background: #fff;}
-        #page-opcua th {background: #e5e5e5;font-weight: 500;}
-        #page-opcua .opcua-input-area {display: grid;grid-template-columns: 200px 200px 200px 200px;gap: 20px 20px;margin: 24px auto 16px auto;background: #eaeaea;padding: 16px;border-radius: 4px;margin-left: auto;margin-right: auto;}
-        #page-opcua .input-row {display: contents;}
-        #page-opcua .opcua-input-area label.nowrap {white-space: nowrap;}
-        #page-opcua .opcua-input-area label {min-width: auto;color: #444;white-space: normal;}
-        #page-opcua .opcua-input-area input {background: #e0e0e0;border: none;border-radius: 2px;padding: 4px 8px;min-width: auto;}
-        #page-opcua .opcua-actions {display: flex;gap: 24px;justify-content: center;margin: 16px 0 0 0;}
-        #page-opcua .opcua-actions button {background: #d3d3d3;border: 1px solid #aaa;border-radius: 2px;padding: 8px 24px;font-size: 16px;cursor: pointer;}
-        #opcUa-bottom-actions {display: flex;gap: 24px;justify-content: center;background: #f7f7f7;border: 1px solid #bbb;border-radius: 4px;margin: 24px 0 0 0;padding: 20px 0;}
-        #opcUa-bottom-actions button {background: #e0e0e0;border: 1px solid #aaa;border-radius: 2px;padding: 10px 18px;font-size: 16px;min-width: 140px;cursor: pointer;}
+        #page-opcua .card {
+            background: #f7f7f7;
+            border: 1px solid #bbb;
+            box-shadow: none;
+            padding: 24px;
+            border-radius: 4px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        #page-opcua table {
+            width: 100%;
+            border-collapse: collapse;
+            background: #fff;
+            border: 1px solid #bbb;
+        }
+
+        #page-opcua th, #page-opcua td {
+            border: 1px solid #bbb;
+            padding: 6px 8px;
+            text-align: left;
+            background: #fff;
+        }
+
+        #page-opcua th {
+            background: #e5e5e5;
+            font-weight: 500;
+        }
+
+        #page-opcua .opcua-input-area {
+            display: grid;
+            grid-template-columns: 200px 200px 200px 200px;
+            gap: 20px 20px;
+            margin: 24px auto 16px auto;
+            background: #eaeaea;
+            padding: 16px;
+            border-radius: 4px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        #page-opcua .input-row {
+            display: contents;
+        }
+
+        #page-opcua .opcua-input-area label.nowrap {
+            white-space: nowrap;
+        }
+
+        #page-opcua .opcua-input-area label {
+            min-width: auto;
+            color: #444;
+            white-space: normal;
+        }
+
+        #page-opcua .opcua-input-area input {
+            background: #e0e0e0;
+            border: none;
+            border-radius: 2px;
+            padding: 4px 8px;
+            min-width: auto;
+        }
+
+        #page-opcua .opcua-actions {
+            display: flex;
+            gap: 24px;
+            justify-content: center;
+            margin: 16px 0 0 0;
+        }
+
+        #page-opcua .opcua-actions button {
+            background: #d3d3d3;
+            border: 1px solid #aaa;
+            border-radius: 2px;
+            padding: 8px 24px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+
+        #opcUa-bottom-actions {
+            display: flex;
+            gap: 24px;
+            justify-content: center;
+            background: #f7f7f7;
+            border: 1px solid #bbb;
+            border-radius: 4px;
+            margin: 24px 0 0 0;
+            padding: 20px 0;
+        }
+
+        #opcUa-bottom-actions button {
+            background: #e0e0e0;
+            border: 1px solid #aaa;
+            border-radius: 2px;
+            padding: 10px 18px;
+            font-size: 16px;
+            min-width: 140px;
+            cursor: pointer;
+        }
 
         /* CAN 화면 스타일 */
-        #page-can .card {background: #f7f7f7; border: 1px solid #bbb; box-shadow: none; padding: 24px; border-radius: 4px; display: flex; flex-direction: column;}
-        #page-can table {width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #bbb;}
-        #page-can th, #page-can td {border: 1px solid #bbb; padding: 6px 8px; text-align: left; background: #fff;}
-        #page-can th {background: #e5e5e5; font-weight: 500;}
-        #page-can .can-input-area {display: grid; grid-template-columns: 200px 200px 200px 200px; gap: 20px 20px; margin: 24px auto 16px auto; background: #eaeaea; padding: 16px; border-radius: 4px; margin-left: auto; margin-right: auto;}
-        #page-can .input-row {display: contents;}
-        #page-can .can-input-area label.nowrap {white-space: nowrap;}
-        #page-can .can-input-area label {min-width: auto; color: #444; white-space: normal;}
-        #page-can .can-input-area input {background: #e0e0e0; border: none; border-radius: 2px; padding: 4px 8px; min-width: auto;}
-        #page-can .can-actions {display: flex; gap: 24px; justify-content: center; margin: 16px 0 0 0;}
-        #page-can .can-actions button {background: #d3d3d3; border: 1px solid #aaa; border-radius: 2px; padding: 8px 24px; font-size: 16px; cursor: pointer;}
-        #can-bottom-actions {display: flex; gap: 24px; justify-content: center; background: #f7f7f7; border: 1px solid #bbb; border-radius: 4px; margin: 24px 0 0 0; padding: 20px 0;}
-        #can-bottom-actions button {background: #e0e0e0; border: 1px solid #aaa; border-radius: 2px; padding: 10px 18px; font-size: 16px; min-width: 140px; cursor: pointer;}
-
-        .selected-row{background: #d0e6ff !important;}
-        .selected-row > td {background: #d0e6ff !important;}
+        #page-can .card {
+            background: #f7f7f7;
+            border: 1px solid #bbb;
+            box-shadow: none;
+            padding: 24px;
+            border-radius: 4px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        #page-can table {
+            width: 100%;
+            border-collapse: collapse;
+            background: #fff;
+            border: 1px solid #bbb;
+        }
+
+        #page-can th, #page-can td {
+            border: 1px solid #bbb;
+            padding: 6px 8px;
+            text-align: left;
+            background: #fff;
+        }
+
+        #page-can th {
+            background: #e5e5e5;
+            font-weight: 500;
+        }
+
+        #page-can .can-input-area {
+            display: grid;
+            grid-template-columns: 200px 200px 200px 200px;
+            gap: 20px 20px;
+            margin: 24px auto 16px auto;
+            background: #eaeaea;
+            padding: 16px;
+            border-radius: 4px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        #page-can .input-row {
+            display: contents;
+        }
+
+        #page-can .can-input-area label.nowrap {
+            white-space: nowrap;
+        }
+
+        #page-can .can-input-area label {
+            min-width: auto;
+            color: #444;
+            white-space: normal;
+        }
+
+        #page-can .can-input-area input {
+            background: #e0e0e0;
+            border: none;
+            border-radius: 2px;
+            padding: 4px 8px;
+            min-width: auto;
+        }
+
+        #page-can .can-actions {
+            display: flex;
+            gap: 24px;
+            justify-content: center;
+            margin: 16px 0 0 0;
+        }
+
+        #page-can .can-actions button {
+            background: #d3d3d3;
+            border: 1px solid #aaa;
+            border-radius: 2px;
+            padding: 8px 24px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+
+        #can-bottom-actions {
+            display: flex;
+            gap: 24px;
+            justify-content: center;
+            background: #f7f7f7;
+            border: 1px solid #bbb;
+            border-radius: 4px;
+            margin: 24px 0 0 0;
+            padding: 20px 0;
+        }
+
+        #can-bottom-actions button {
+            background: #e0e0e0;
+            border: 1px solid #aaa;
+            border-radius: 2px;
+            padding: 10px 18px;
+            font-size: 16px;
+            min-width: 140px;
+            cursor: pointer;
+        }
+
+        .selected-row {
+            background: #d0e6ff !important;
+        }
+
+        .selected-row > td {
+            background: #d0e6ff !important;
+        }
 
     </style>
 </head>
@@ -165,8 +700,8 @@
 
                 <template id="ssid-template">
                     <div class="ssid-row">
-                        <input class="ssid-name" placeholder="Name" />
-                        <input class="ssid-pw"  type="password" placeholder="Password" />
+                        <input class="ssid-name" placeholder="Name"/>
+                        <input class="ssid-pw" type="password" placeholder="Password"/>
                         <button type="button" class="toggle-pw">show</button>
                         <select>
                             <option value="none">NONE</option>
@@ -182,6 +717,7 @@
             <div class="actions">
                 <button id="loadDeviceBtn_ssid">Load Device File</button>
                 <button id="saveDeviceBtn_ssid">Save to Device</button>
+                <button id="downloadDeviceBtn">Download Device File</button>
             </div>
         </section>
 
@@ -196,24 +732,31 @@
                     </div>
                 </div>
 
-                <div class="grid-3-col"><span>IP</span><input id="wifi_ip" placeholder="000.000.000.000" /></div>
-                <div class="grid-3-col"><span>SUBNET</span><input id="wifi_netmask" placeholder="255.255.255.0" /></div>
-                <div class="grid-3-col"><span>GATEWAY</span><input id="wifi_gateway" placeholder="000.000.000.001" /></div>
-                <div class="grid-3-col"><span>DNS #1</span><input id="wifi_dns1" placeholder="008.008.008.008" /></div>
-                <div class="grid-3-col"><span>DNS #2</span><input id="wifi_dns2" placeholder="008.008.004.004" /></div>
+                <div class="grid-3-col"><span>IP</span><input id="wifi_ip" placeholder="000.000.000.000"/></div>
+                <div class="grid-3-col"><span>SUBNET</span><input id="wifi_netmask" placeholder="255.255.255.0"/></div>
+                <div class="grid-3-col"><span>GATEWAY</span><input id="wifi_gateway" placeholder="000.000.000.001"/>
+                </div>
+                <div class="grid-3-col"><span>DNS #1</span><input id="wifi_dns1" placeholder="008.008.008.008"/></div>
+                <div class="grid-3-col"><span>DNS #2</span><input id="wifi_dns2" placeholder="008.008.004.004"/></div>
             </div>
 
             <div class="card">
                 <h3>Server</h3>
-                <div class="grid-3-col"><strong></strong><span style="text-align:center">IP</span><span style="text-align:center">Port</span></div>
-                <div class="grid-3-col"><span>TIoT Server</span>  <input id="rtcm_server_ip"/><input id="rtcm_server_port"/></div>
-                <div class="grid-3-col"><span>Update Server</span><input id="update_server_ip"  /><input id="update_server_port" /></div>
-                <div class="grid-3-col"><span>DGPS Server</span>  <input id="modbus_server_ip"    /><input id="modbus_server_port"   /></div>
-                <div class="grid-3-col"><span>OPC-UA</span>       <input id="opc_ua_server_ip"  /><input id="opc_ua_server_port"/></div>
+                <div class="grid-3-col"><strong></strong><span style="text-align:center">IP</span><span
+                        style="text-align:center">Port</span></div>
+                <div class="grid-3-col"><span>TIoT Server</span> <input id="rtcm_server_ip"/><input
+                        id="rtcm_server_port"/></div>
+                <div class="grid-3-col"><span>Update Server</span><input id="update_server_ip"/><input
+                        id="update_server_port"/></div>
+                <div class="grid-3-col"><span>DGPS Server</span> <input id="modbus_server_ip"/><input
+                        id="modbus_server_port"/></div>
+                <div class="grid-3-col"><span>OPC-UA</span> <input id="opc_ua_server_ip"/><input
+                        id="opc_ua_server_port"/></div>
             </div>
             <div class="actions">
                 <button id="loadDeviceBtn_network">Load Device File</button>
                 <button id="saveDeviceBtn_network">Save to Device</button>
+                <button id="downloadDeviceBtn">Download Device File</button>
             </div>
         </section>
 
@@ -225,11 +768,16 @@
                     <div class="io-group">
                         <h4>Ethernet</h4>
                         <div class="io-fieldset">
-                            <div class="io-row"><span class="label-inline">IP</span><span class="colon">:</span><input id="eth_ip"></div>
-                            <div class="io-row"><span class="label-inline">SUBNET</span><span class="colon">:</span><input id="eth_netmask"></div>
-                            <div class="io-row"><span class="label-inline">GATEWAY</span><span class="colon">:</span><input id="eth_gateway"></div>
-                            <div class="io-row"><span class="label-inline">SERVER IP</span><span class="colon">:</span><input id="protocol_server_ip"></div>
-                            <div class="io-row"><span class="label-inline">SERVER PORT</span><span class="colon">:</span><input id="protocol_server_port"></div>
+                            <div class="io-row"><span class="label-inline">IP</span><span class="colon">:</span><input
+                                    id="eth_ip"></div>
+                            <div class="io-row"><span class="label-inline">SUBNET</span><span
+                                    class="colon">:</span><input id="eth_netmask"></div>
+                            <div class="io-row"><span class="label-inline">GATEWAY</span><span
+                                    class="colon">:</span><input id="eth_gateway"></div>
+                            <div class="io-row"><span class="label-inline">SERVER IP</span><span
+                                    class="colon">:</span><input id="protocol_server_ip"></div>
+                            <div class="io-row"><span class="label-inline">SERVER PORT</span><span
+                                    class="colon">:</span><input id="protocol_server_port"></div>
                         </div>
                     </div>
 
@@ -237,10 +785,14 @@
                     <div class="io-group">
                         <h4>LTE</h4>
                         <div class="io-fieldset">
-                            <div class="io-row"><span class="label-inline">IP</span><span class="colon">:</span><input id="lte_ip"></div>
-                            <div class="io-row"><span class="label-inline">SUBNET</span><span class="colon">:</span><input id="lte_netmask"></div>
-                            <div class="io-row"><span class="label-inline">GATEWAY</span><span class="colon">:</span><input id="lte_gateway"></div>
-                            <div class="io-row"><span class="label-inline">Port</span><span class="colon">:</span><input id="lte_port"></div>
+                            <div class="io-row"><span class="label-inline">IP</span><span class="colon">:</span><input
+                                    id="lte_ip"></div>
+                            <div class="io-row"><span class="label-inline">SUBNET</span><span
+                                    class="colon">:</span><input id="lte_subnet"></div>
+                            <div class="io-row"><span class="label-inline">GATEWAY</span><span
+                                    class="colon">:</span><input id="lte_gateway"></div>
+                            <div class="io-row"><span class="label-inline">Port</span><span class="colon">:</span><input
+                                    id="lte_port"></div>
                         </div>
                     </div>
                 </div>
@@ -249,72 +801,84 @@
                     <!-- RS-485 -->
                     <div class="io-group">
                         <h4>MODBUS 422 / 485</h4>
-                        <div class="io-row"><span class="label-inline">Mode</span><span class="colon">:</span>
-                            <select id="rs485_mode">
-                                <option value="half">half</option>
-                                <option value="full">full</option>
-                            </select>
+                        <div class="io-fieldset">
+                            <div class="io-row"><span class="label-inline">Mode</span><span class="colon">:</span>
+                                <select id="rs485_mode">
+                                    <option value="half">half</option>
+                                    <option value="full">full</option>
+                                </select>
+                            </div>
+                            <div class="io-row"><span class="label-inline">Speed</span><span
+                                    class="colon">:</span><select id="rs485_baudrate">
+                                <option value="9600">9600</option>
+                                <option value="115200">115200</option>
+                            </select></div>
+                            <div class="io-row"><span class="label-inline">Parity</span><span
+                                    class="colon">:</span><select id="rs485_parity">
+                                <option value="no">NONE</option>
+                                <option value="odd">ODD</option>
+                                <option value="even">EVEN</option>
+                            </select></div>
+                            <div class="io-row"><span class="label-inline">Data bits</span><span
+                                    class="colon">:</span><input id="rs485_data_bits"></div>
+                            <div class="io-row"><span class="label-inline">Stop bits</span><span
+                                    class="colon">:</span><input id="rs485_stop_bits"></div>
                         </div>
-                        <div class="io-row"><span class="label-inline">Speed</span><span class="colon">:</span><select id="rs485_baudrate">
-                            <option value="9600">9600</option>
-                            <option value="115200">115200</option>
-                        </select></div>
-                        <div class="io-row"><span class="label-inline">Parity</span><span class="colon">:</span><select id="rs485_parity">
-                            <option value="no">NONE</option>
-                            <option value="odd">ODD</option>
-                            <option value="EVEN">EVEN</option>
-                        </select></div>
                     </div>
-
                     <!-- CAN -->
                     <div class="io-group">
                         <h4>CAN</h4>
-                        <div class="io-row"><span class="label-inline">Type</span><span class="colon">:</span>
-                            <select id="can_bus_type">
-                                <option value="extended">extended</option>
-                                <option value="standard">standard</option>
-                            </select>
-                        </div>
+                        <div class="io-fieldset">
+                            <div class="io-row"><span class="label-inline">Type</span><span class="colon">:</span>
+                                <select id="can_bus_type">
+                                    <option value="extended">extended</option>
+                                    <option value="standard">standard</option>
+                                </select>
+                            </div>
 
-                        <div class="io-row"><span class="label-inline">Speed</span><span class="colon">:</span>
-                            <select id="can_baudrate">
-                                <option value="1000">100kb/s</option>
-                                <option value="2500">250kb/s</option>
-                                <option value="5000">500kb/s</option>
-                                <option value="10000">1M/s</option>
-                            </select>
+                            <div class="io-row"><span class="label-inline">Speed</span><span class="colon">:</span>
+                                <select id="can_baudrate">
+                                    <option value="1000">100kb/s</option>
+                                    <option value="2500">250kb/s</option>
+                                    <option value="5000">500kb/s</option>
+                                    <option value="10000">1M/s</option>
+                                </select>
 
+                            </div>
                         </div>
-
                         <!-- IMU -->
                         <div class="io-group">
                             <h4>IMU Re-map</h4>
-                            <div class="io-row"><span class="label-inline">X</span><span class="colon">:</span>
-                                <select id="imu_remap_x">
+                            <div class="io-fieldset">
+                                <div class="io-row"><span class="label-inline">X</span><span class="colon">:</span>
+                                    <select id="imu_remap_x">
+                                        <option value="x">x</option>
+                                        <option value="y">y</option>
+                                        <option value="z">z</option>
+                                        <option value="-x">-x</option>
+                                        <option value="-y">-y</option>
+                                        <option value="-z">-z</option>
+                                    </select>
+                                </div>
+                                <div class="io-row"><span class="label-inline">Y</span><span
+                                        class="colon">:</span><select id="imu_remap_y">
                                     <option value="x">x</option>
                                     <option value="y">y</option>
                                     <option value="z">z</option>
                                     <option value="-x">-x</option>
                                     <option value="-y">-y</option>
                                     <option value="-z">-z</option>
-                                </select>
+                                </select></div>
+                                <div class="io-row"><span class="label-inline">Z</span><span
+                                        class="colon">:</span><select id="imu_remap_z">
+                                    <option value="x">x</option>
+                                    <option value="y">y</option>
+                                    <option value="z">z</option>
+                                    <option value="-x">-x</option>
+                                    <option value="-y">-y</option>
+                                    <option value="-z">-z</option>
+                                </select></div>
                             </div>
-                            <div class="io-row"><span class="label-inline">Y</span><span class="colon">:</span><select id="imu_remap_y">
-                                <option value="x">x</option>
-                                <option value="y">y</option>
-                                <option value="z">z</option>
-                                <option value="-x">-x</option>
-                                <option value="-y">-y</option>
-                                <option value="-z">-z</option>
-                            </select></div>
-                            <div class="io-row"><span class="label-inline">Z</span><span class="colon">:</span><select id="imu_remap_z">
-                                <option value="x">x</option>
-                                <option value="y">y</option>
-                                <option value="z">z</option>
-                                <option value="-x">-x</option>
-                                <option value="-y">-y</option>
-                                <option value="-z">-z</option>
-                            </select></div>
                         </div>
                     </div>
                 </div>
@@ -322,13 +886,14 @@
             <div class="actions">
                 <button id="loadDeviceBtn_io">Load Device File</button>
                 <button id="saveDeviceBtn_io">Save to Device</button>
+                <button id="downloadDeviceBtn">Download Device File</button>
             </div>
         </section>
 
         <!-- ▽ Register PAGE (placeholder) ▽ -->
         <section id="page-reg" class="page" style="display:none">
             <div class="card"><h3>Config</h3>
-                <div class = "io-group">
+                <div class="io-group">
                     <div class="reg-io-grid">
                         <div class="io-fieldset">
                             <div class="io-row"><span class="label">Device type</span>
@@ -351,7 +916,8 @@
                                     <option value="STS">STS</option>
                                 </select>
                             </div>
-                            <div class="io-row"><span class="label">Equipment ID</span><input id="reg_equipment_id"></div>
+                            <div class="io-row"><span class="label">Equipment ID</span><input id="reg_equipment_id">
+                            </div>
                             <div class="io-row"><span class="label">MEID</span><input id="reg_meid"></div>
                             <div class="io-row"><span class="label">Protocol</span>
                                 <select id="reg_protocol">
@@ -375,13 +941,14 @@
                                 </select>
                             </div>
                         </div>
-                        <div class="io-fieldset"> <div class="io-row"><span class="label">DR On/Off</span>
-                            <select id="reg_dr_on_off">
-                                <option selected disabled hidden="hidden"></option>
-                                <option value="on">on</option>
-                                <option value="off">off</option>
-                            </select>
-                        </div>
+                        <div class="io-fieldset">
+                            <div class="io-row"><span class="label">DR On/Off</span>
+                                <select id="reg_dr_on_off">
+                                    <option selected disabled hidden="hidden"></option>
+                                    <option value="on">on</option>
+                                    <option value="off">off</option>
+                                </select>
+                            </div>
                             <div class="io-row"><span class="label">Speed Data Source</span>
                                 <select id="reg_speed_data_source">
                                     <option selected disabled hidden="hidden"></option>
@@ -451,6 +1018,7 @@
                 <button id="loadProtocolBtn">Load Protocol File</button>
                 <button id="saveProtocolBtn">Save to Protocol</button>
                 <button id="uploadProtocolBtn">Upload to Device</button>
+                <button id="downloadProtocolBtn">Download Device File</button>
             </div>
         </section>
 
@@ -533,6 +1101,7 @@
                 <button id="loadModbusBtn">Load Protocol File</button>
                 <button id="saveModbusBtn">Save Protocol File</button>
                 <button id="uploadModbusBtn">Upload to Device</button>
+                <button id="downloadProtocolBtn">Download Device File</button>
             </div>
         </section>
 
@@ -607,6 +1176,7 @@
                 <button id="loadOpcUaFileBtn">Load Protocol File</button>
                 <button id="saveOpcUaFileBtn">Save to Protocol</button>
                 <button id="uploadOpcuaFileBtn">Upload to Device</button>
+                <button id="downloadProtocolBtn">Download Device File</button>
             </div>
         </section>
 
@@ -674,10 +1244,13 @@
                 <button id="loadCanBtn">Load Protocol File</button>
                 <button id="saveCanBtn">Save Protocol File</button>
                 <button id="uploadCanBtn">Upload to Device</button>
+                <button id="downloadProtocolBtn">Download Device File</button>
             </div>
         </section>
 
+
     </main>
+
 </div>
 
 <!-- ───── Script ───── -->
@@ -685,33 +1258,35 @@
 
     const data = {
         /* Wi-Fi */
-        wifi_static : 'off', wifi_ip:'', wifi_netmask:'', wifi_gateway:'', wifi_dns1:'', wifi_dns2:'',
+        wifi_static: 'off', wifi_ip: '', wifi_netmask: '', wifi_gateway: '', wifi_dns1: '', wifi_dns2: '',
 
         /* Ethernet */
-        eth_ip:'', eth_netmask:'', eth_gateway:'',
+        eth_ip: '', eth_netmask: '', eth_gateway: '',
 
         /* 서버들 */
-        protocol_server_ip:'', protocol_server_port:null,
-        update_server_ip  :'',
-        update_server_port:null,
-        rtcm_server_ip    :'',
-        rtcm_server_port  :null,
-        opc_ua_server_ip  :'',
-        opc_ua_server_port:null,
-        modbus_server_ip  :'',
-        modbus_server_port:null,
+        protocol_server_ip: '', protocol_server_port: null,
+        update_server_ip: '',
+        update_server_port: null,
+        rtcm_server_ip: '',
+        rtcm_server_port: null,
+        opc_ua_server_ip: '',
+        opc_ua_server_port: null,
+        modbus_server_ip: '',
+        modbus_server_port: null,
 
         /* CAN / RS-485 */
-        can_bus_type:'', can_baudrate:null,
-        rs485_mode:'', rs485_baudrate:null, rs485_databits:null,
-        rs485_parity:'', rs485_stopbits:null,
+        can_bus_type: '', can_baudrate: null,
+        rs485_mode: '', rs485_baudrate: null, rs485_data_bits: null,
+        rs485_parity: '', rs485_stop_bits: null,
 
         /* IMU (축 + 부호) */
-        imu_remap_x:'', imu_remap_y:'', imu_remap_z:'',
-        imu_remap_x_sign:'', imu_remap_y_sign:'', imu_remap_z_sign:'',
+        imu_remap_x: '', imu_remap_y: '', imu_remap_z: '',
+        imu_remap_x_sign: '', imu_remap_y_sign: '', imu_remap_z_sign: '',
 
+        /* LTE 설정 */
+        lte_ip: '', lte_subnet: '', lte_gateway: '', lte_port: null,
         /* SSID 목록 */
-        WIFI_SSID:[{wifi_ssid:'',wifi_password:'',wifi_security:'none'}],
+        WIFI_SSID: [{wifi_ssid: '', wifi_password: '', wifi_security: 'none'}],
     };
 
     const configData = {
@@ -745,7 +1320,7 @@
         CAN: []
     };
 
-    const configIdMap={
+    const configIdMap = {
         'reg_analog_input_level': 'analog_input_level',
         'ai0': 'ai0',
         'ai1': 'ai1',
@@ -775,16 +1350,52 @@
 
 
     const pages = {
-        ssid   : document.getElementById('page-ssid'),
+        ssid: document.getElementById('page-ssid'),
         network: document.getElementById('page-network'),
-        io     : document.getElementById('page-io'),
-        reg    : document.getElementById('page-reg'),
-        modbus : document.getElementById('page-modbus'),
-        opcua  : document.getElementById('page-opcua'),
-        can    : document.getElementById('page-can')
+        io: document.getElementById('page-io'),
+        reg: document.getElementById('page-reg'),
+        modbus: document.getElementById('page-modbus'),
+        opcua: document.getElementById('page-opcua'),
+        can: document.getElementById('page-can')
     };
     const titleEl = document.getElementById('page-title');
 
+    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 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);
+
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+
+    /* (A) 고정 data 객체 그대로 저장 */
+    document.getElementById('downloadDeviceBtn')?.addEventListener('click', () => {
+        downloadDeviceJson(collectData(data));
+    });
+
+    document.getElementById('downloadProtocolBtn')?.addEventListener('click', () => {
+        downloadProtocolJson(collectConfigData(configData));
+    })
+
     function showPage(pageName) {
         Object.values(pages).forEach(p => p.style.display = 'none');
         pages[pageName].style.display = 'block';
@@ -804,8 +1415,8 @@
 
     }
 
-    document.querySelectorAll('.nav-items button').forEach(btn=>{
-        btn.addEventListener('click',()=>{
+    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;
@@ -817,21 +1428,24 @@
     const ssidList = document.getElementById('ssid-list');
     const ssidTmpl = document.getElementById('ssid-template');
 
-    function createSsidRow(obj={wifi_ssid:'',wifi_password:'',wifi_security:'none'}){
+    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();
+        node.querySelector('.ssid-pw').value = obj.wifi_password ?? '';
+        node.querySelector('select').value = (obj.wifi_security ?? 'none').toLowerCase();
         return node;
     }
-    function addSsidRow(){ ssidList.appendChild(createSsidRow()); }
+
+    function addSsidRow() {
+        ssidList.appendChild(createSsidRow());
+    }
+
     document.getElementById('add-ssid').addEventListener('click', addSsidRow);
 
     document.getElementById('delete-ssid').addEventListener('click', () => {
-        if(ssidList.children.length > 1){
+        if (ssidList.children.length > 1) {
             ssidList.removeChild(ssidList.lastElementChild);
-        }
-        else if(ssidList.children.length == 1){
+        } else if (ssidList.children.length == 1) {
             const firstRow = ssidList.firstElementChild;
             firstRow.querySelector('.ssid-name').value = '';
             firstRow.querySelector('.ssid-pw').value = '';
@@ -840,100 +1454,103 @@
     })
 
 
-    ssidList.addEventListener('click',e=>{
-        if(e.target.classList.contains('toggle-pw')){
+    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'){
+            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){
+            if (ssidRow) {
                 removeSsidRow(ssidRow);
             }
         }
     });
-    function gatherSsidRows(){
-        const arr=[];
-        ssidList.querySelectorAll('.ssid-row').forEach(row=>{
+
+    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});
+            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'}];
+        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));
+    const netFields = ['wifi_ip', 'wifi_netmask', 'wifi_gateway', 'wifi_dns1', 'wifi_dns2']
+        .map(id => document.getElementById(id));
 
-    function toggleNetInputs(){
+    function toggleNetInputs() {
         const isStatic = document.querySelector('input[name="ipMode"]:checked')?.value === 'static';
-        netFields.forEach(el=>{
+        netFields.forEach(el => {
             el.disabled = !isStatic;
             el.classList.toggle('disabled', !isStatic);
         });
     }
-    document.querySelectorAll('input[name="ipMode"]').forEach(r=>r.addEventListener('change', toggleNetInputs));
 
+    document.querySelectorAll('input[name="ipMode"]').forEach(r => r.addEventListener('change', toggleNetInputs));
 
-    function axisValueToPair(val){
+
+    function axisValueToPair(val) {
         return val.startsWith('-')
-            ? {axis:val.slice(1), sign:'minus'}
-            : {axis:val,          sign:'plus'};
+            ? {axis: val.slice(1), sign: 'minus'}
+            : {axis: val, sign: 'plus'};
     }
-    function pairToAxisValue(axis, sign){
-        return sign==='minus' ? `-${axis}` : axis;
+
+    function pairToAxisValue(axis, sign) {
+        return sign === 'minus' ? `-${axis}` : axis;
     }
 
     /* ───────────── 6. 데이터 → 화면 로딩 ───────────── */
-    function loadFromData(obj){
+    function loadFromData(obj) {
         /* Wi-Fi 모드 radio */
-        document.querySelector(`input[name="ipMode"][value="${obj.wifi_static==='on'?'static':'dhcp'}"]`).checked = true;
+        document.querySelector(`input[name="ipMode"][value="${obj.wifi_static === 'on' ? 'static' : 'dhcp'}"]`).checked = true;
 
         /* 일반 input/select */
-        for(const k in obj){
+        for (const k in obj) {
             const el = document.getElementById(k);
-            if(el) el.value = obj[k] ?? '';
+            if (el) el.value = obj[k] ?? '';
         }
 
         /* IMU select 값 재구성 */
-        ['x','y','z'].forEach(a=>{
-            const axis = obj[`imu_remap_${a}`]      || 'x';
+        ['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);
         });
 
         /* SSID */
-        ssidList.innerHTML='';
-        (obj.WIFI_SSID||[]).forEach(o=>ssidList.appendChild(createSsidRow(o)));
-        if(!ssidList.children.length) addSsidRow();
+        ssidList.innerHTML = '';
+        (obj.WIFI_SSID || []).forEach(o => ssidList.appendChild(createSsidRow(o)));
+        if (!ssidList.children.length) addSsidRow();
 
         toggleNetInputs();          // 초기 잠금 상태
     }
+
     loadFromData(data);
 
     let regProtocolSelect;
+
     function toggleProtocolMenus() {
-        if(!regProtocolSelect) return;
+        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 = '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';
+        } 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';
+        if (canInputEl && canInputEl.value === 'on') {
+            if (canSidebarBtn) canSidebarBtn.style.display = 'block';
         }
         // Protocol configuration 메뉴 자동 펼치기
         const protocolDetails = document.querySelectorAll('details.nav')[1];
@@ -979,7 +1596,6 @@
         }
 
 
-
         // protocol 값이 있으면 select 값을 변경 (데이터 로드 시에만)
         if (register.protocol && regProtocolSelect) {
             regProtocolSelect.value = register.protocol;
@@ -1187,15 +1803,15 @@
     document.addEventListener('DOMContentLoaded', () => {
         const list = document.getElementById('modbus-field-list');
         // 처음에 행이 없으면 빈 행을 하나 추가
-        if(list.children.length === 0) {
+        if (list.children.length === 0) {
             const modbusRowTemplate = document.getElementById('modbus-row-template');
-            if(modbusRowTemplate) {
+            if (modbusRowTemplate) {
                 const newRow = modbusRowTemplate.content.cloneNode(true);
                 list.appendChild(newRow);
             }
         }
         let selectedRow = null;
-        document.getElementById('modbus-field-list').addEventListener('click', function(e){
+        document.getElementById('modbus-field-list').addEventListener('click', function (e) {
             let tr = e.target.closest('tr');
             if (!tr) return;
 
@@ -1215,14 +1831,14 @@
 
         const opcUalist = document.getElementById('opcua-field-list');
         // 처음에 행이 없으면 빈 행을 하나 추가
-        if(opcUalist.children.length === 0) {
+        if (opcUalist.children.length === 0) {
             const opcUaRowTemplate = document.getElementById('opcua-row-template');
-            if(opcUaRowTemplate) {
+            if (opcUaRowTemplate) {
                 const newRow = opcUaRowTemplate.content.cloneNode(true);
                 opcUalist.appendChild(newRow);
             }
         }
-        document.getElementById('opcua-field-list').addEventListener('click', function(e){
+        document.getElementById('opcua-field-list').addEventListener('click', function (e) {
             let tr = e.target.closest('tr');
             if (!tr) return;
 
@@ -1240,15 +1856,12 @@
             document.getElementById('opcua_mask_input').value = tr.querySelector('.opcua-mask-display').textContent;
         });
 
-
-
-
         const modbusAddBtn = document.getElementById('modbus_add_btn');
         const modbusFieldList = document.getElementById('modbus-field-list');
         const modbusRowTemplate = document.getElementById('modbus-row-template');
 
-        if(modbusAddBtn && modbusFieldList && modbusRowTemplate){
-            modbusAddBtn.addEventListener('click',()=>{
+        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;
@@ -1281,7 +1894,7 @@
             });
         }
 
-        document.getElementById('modbus_modify_btn').onclick = function() {
+        document.getElementById('modbus_modify_btn').onclick = function () {
             if (!selectedRow) return alert('수정할 행을 선택하세요!');
             selectedRow.querySelector('.field-display').textContent = document.getElementById('modbus_field_input').value;
             selectedRow.querySelector('.addr-display').textContent = document.getElementById('modbus_addr_input').value;
@@ -1294,7 +1907,7 @@
         };
 
         // 삭제 버튼
-        document.getElementById('modbus_delete_btn').onclick = function() {
+        document.getElementById('modbus_delete_btn').onclick = function () {
             if (!selectedRow) return alert('삭제할 행을 선택하세요!');
             const list = document.getElementById('modbus-field-list');
             selectedRow.remove();
@@ -1306,8 +1919,8 @@
         const opcUaFieldList = document.getElementById('opcua-field-list');
         const opcUaRowTemplate = document.getElementById('opcua-row-template');
 
-        if(opcUaAddBtn && opcUaFieldList && opcUaRowTemplate){
-            opcUaAddBtn.addEventListener('click',()=>{
+        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;
@@ -1340,7 +1953,7 @@
             });
         }
 
-        document.getElementById('opcua_modify_btn').onclick = function() {
+        document.getElementById('opcua_modify_btn').onclick = function () {
             if (!selectedRow) return alert('수정할 행을 선택하세요!');
             selectedRow.querySelector('.opcua-field-display').textContent = document.getElementById('opcua_field_input').value;
             selectedRow.querySelector('.opcua-addr-display').textContent = document.getElementById('opcua_addr_input').value;
@@ -1353,7 +1966,7 @@
         };
 
         // 삭제 버튼
-        document.getElementById('opcua_delete_btn').onclick = function() {
+        document.getElementById('opcua_delete_btn').onclick = function () {
             if (!selectedRow) return alert('삭제할 행을 선택하세요!');
             const list = document.getElementById('opcua-field-list');
             selectedRow.remove();
@@ -1362,7 +1975,7 @@
         };
 
         // CAN 테이블 
-        document.getElementById('can_add_btn').addEventListener('click',()=>{
+        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;
@@ -1388,7 +2001,7 @@
             document.getElementById('can_expr_input').value = '';
             document.getElementById('can_mask_input').value = '';
         });
-        document.getElementById('can_modify_btn').onclick = function() {
+        document.getElementById('can_modify_btn').onclick = function () {
             if (!selectedRow) return alert('수정할 행을 선택하세요!');
             selectedRow.querySelector('.can-field-display').textContent = document.getElementById('can_field_input').value;
             selectedRow.querySelector('.can-id-display').textContent = document.getElementById('can_id_input').value;
@@ -1398,7 +2011,7 @@
             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() {
+        document.getElementById('can_delete_btn').onclick = function () {
             if (!selectedRow) return alert('삭제할 행을 선택하세요!');
             const list = document.getElementById('can-field-list');
             selectedRow.remove();
@@ -1408,9 +2021,9 @@
 
 
         regProtocolSelect = document.getElementById('reg_protocol');
-        if(regProtocolSelect) {
+        if (regProtocolSelect) {
             regProtocolSelect.addEventListener('change', () => {
-                console.log('regProtocolSelect 변경 감지',regProtocolSelect.value);
+                console.log('regProtocolSelect 변경 감지', regProtocolSelect.value);
                 toggleProtocolMenus();
             });
 
@@ -1426,8 +2039,8 @@
                     }
                     return res.json();
                 })
-                .then(deviceJsonData => {
-                    loadFromData(deviceJsonData);
+                .then(({body}) => {
+                    loadFromData(body);
                     alert('Device 설정 파일 로드 완료');
                 })
                 .catch(error => {
@@ -1446,8 +2059,8 @@
                     }
                     return res.json();
                 })
-                .then(deviceJsonData => {
-                    loadFromData(deviceJsonData);
+                .then(({body}) => {
+                    loadFromData(body);
                     alert('Device 설정 파일 로드 완료');
                 })
                 .catch(error => {
@@ -1484,8 +2097,18 @@
                 headers: {'Content-Type': 'application/json'},
                 body: JSON.stringify(collectData())
             })
-                .then(() => alert('전송 완료'))
-                .catch(console.error);
+                .then(res => {
+                    if (res.ok) {
+                        alert('Device config successfully');
+                    } else {
+                        alert('Device config failed: ' + res.statusText);
+                        console.error('Device config failed:', res); // 응답 객체 자체를 로깅
+                    }
+                })
+                .catch(error => {
+                    console.error('Device config failed::', error); // 네트워크 오류 로깅
+                    alert('Device config failed:');
+                });
         });
 
         document.getElementById('saveDeviceBtn_network').addEventListener('click', () => {
@@ -1494,8 +2117,18 @@
                 headers: {'Content-Type': 'application/json'},
                 body: JSON.stringify(collectData())
             })
-                .then(() => alert('전송 완료'))
-                .catch(console.error);
+                .then(res => {
+                    if (res.ok) {
+                        alert('Device config successfully');
+                    } else {
+                        alert('Device config failed: ' + res.statusText);
+                        console.error('Device config failed:', res); // 응답 객체 자체를 로깅
+                    }
+                })
+                .catch(error => {
+                    console.error('Device config failed::', error); // 네트워크 오류 로깅
+                    alert('Device config failed:');
+                });
         });
 
         document.getElementById('saveDeviceBtn_io').addEventListener('click', () => {
@@ -1504,8 +2137,18 @@
                 headers: {'Content-Type': 'application/json'},
                 body: JSON.stringify(collectData())
             })
-                .then(() => alert('전송 완료'))
-                .catch(console.error);
+                .then(res => {
+                    if (res.ok) {
+                        alert('Device config successfully');
+                    } else {
+                        alert('Device config failed: ' + res.statusText);
+                        console.error('Device config failed:', res); // 응답 객체 자체를 로깅
+                    }
+                })
+                .catch(error => {
+                    console.error('Device config failed::', error); // 네트워크 오류 로깅
+                    alert('Device config failed:');
+                });
         });
 
         document.getElementById('loadProtocolBtn').addEventListener('click', () => {
@@ -1660,15 +2303,15 @@
 
         // DOMContentLoaded 내부에 추가: CAN 테이블도 처음에 빈 행이 없으면 하나 추가
         const canFieldList = document.getElementById('can-field-list');
-        if(canFieldList.children.length === 0) {
+        if (canFieldList.children.length === 0) {
             const canRowTemplate = document.getElementById('can-row-template');
-            if(canRowTemplate) {
+            if (canRowTemplate) {
                 const newRow = canRowTemplate.content.cloneNode(true);
                 canFieldList.appendChild(newRow);
             }
         }
         // CAN row 클릭 시 선택 표시 및 입력폼에 값 반영
-        canFieldList.addEventListener('click', function(e){
+        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'));
@@ -1785,8 +2428,6 @@
                 alert('통신 오류: ' + err.message);
             });
     });
-
-
 </script>
 </body>
 </html>
\ No newline at end of file
