pcap 추가

index.h

@@ -654,11 +654,13 @@ const char index_html[] PROGMEM = R"rawliteral(
         .format-selector {
             display: flex;
             align-items: center;
-            gap: 15px;
+            flex-wrap: wrap;
+            gap: 8px 15px;
             background: white;
             padding: 8px 15px;
             border-radius: 8px;
             border: 2px solid #667eea;
+            width: 100%;
         }
         
         .format-selector label {
@@ -670,6 +672,7 @@ const char index_html[] PROGMEM = R"rawliteral(
             color: #2c3e50;
             font-size: 0.9em;
             transition: all 0.3s;
+            white-space: nowrap;
         }
         
         .format-selector label:hover {
@@ -689,6 +692,26 @@ const char index_html[] PROGMEM = R"rawliteral(
             margin-left: 3px;
         }
         
+        @media (max-width: 480px) {
+            .format-selector {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 10px;
+                padding: 10px 12px;
+            }
+            .format-selector label {
+                font-size: 1em;
+                gap: 8px;
+            }
+            .format-selector input[type="radio"] {
+                width: 20px;
+                height: 20px;
+            }
+            .format-info {
+                font-size: 0.8em;
+            }
+        }
+    
         /* ========== 반응형 디자인 ========== */
         @media (max-width: 768px) {
             body {
@@ -1048,6 +1071,11 @@ const char index_html[] PROGMEM = R"rawliteral(
                             <span>📄 CSV</span>
                             <span class="format-info">(Text - Excel Ready)</span>
                         </label>
+                        <label>
+                            <input type="radio" name="can-format" value="pcap">
+                            <span>🦈 PCAP</span>
+                            <span class="format-info">(Wireshark)</span>
+                        </label>
                     </div>
                     <button onclick="saveFileFormat()">💾 Save</button>
                     <span id="format-save-status" style="color: #11998e; font-size: 0.85em; font-weight: 600;"></span>
@@ -1081,6 +1109,7 @@ const char index_html[] PROGMEM = R"rawliteral(
                     <select id="autoTriggerFormat" style="width: 100%; padding: 8px; border-radius: 5px; border: 1px solid #444; background: #2a2a2a; color: white;">
                         <option value="bin">📦 Binary (BIN) - High Speed</option>
                         <option value="csv">📄 CSV - Human Readable</option>
+                        <option value="pcap">🦈 PCAP - Wireshark</option>
                     </select>
                 </div>
                 
@@ -1398,7 +1427,7 @@ const char index_html[] PROGMEM = R"rawliteral(
                         
                         // 🆕 로그 형식 설정
                         if (data.logFormat) {
-                            document.getElementById('autoTriggerFormat').value = data.logFormat;
+                            document.getElementById('autoTriggerFormat').value = data.logFormat; // bin/csv/pcap 모두 처리
                         }
                         
                         // 🎯 수식 불러오기
@@ -1437,7 +1466,8 @@ const char index_html[] PROGMEM = R"rawliteral(
                         console.log('✅ CAN Format saved:', data.format);
                         const statusSpan = document.getElementById('format-save-status');
                         if (statusSpan) {
-                            statusSpan.textContent = '✓ Saved: ' + data.format.toUpperCase();
+                            const labelMap = { bin: '📦 BIN', csv: '📄 CSV', pcap: '🦈 PCAP' };
+                            statusSpan.textContent = '✓ Saved: ' + (labelMap[data.format] || data.format.toUpperCase());
                             setTimeout(() => { statusSpan.textContent = ''; }, 3000);
                         }
                     }